More work on the new rich text editor. It may have a few bugs still.

src/lib/components/shad-editor/editor-toolbar.svelte

@@ -20,7 +20,7 @@
 	import Align from './icons/textalign.svelte';
 	import Quickcolor from './icons/quickcolor.svelte';
 	import Table from './icons/table.svelte';
-	import Image from './icons/image.svelte';
+	// import Image from './icons/image.svelte';
 	import Text from './icons/text.svelte';
 	import SearchReplace from './icons/search-replace.svelte';
 
@@ -35,15 +35,15 @@ let { editor, show_button_kv }: Props = $props();
 
 let show_button_kv_defaults: any = {
     undo: true,
-    redo: false,
+    redo: true,
 
     text: true,
 
     bold: true,
     italic: true,
     underline: true,
-    strikethrough: true,
-    align: true,
+    strikethrough: false,
+    align: false,
     link: true,
     code: false,
     blockquote: false,
@@ -57,7 +57,7 @@ let show_button_kv_defaults: any = {
     text_color: true,
     highlighter: true,
     quick_color: true,
-    search_replace: true,
+    search_replace: false,
 };
 if (show_button_kv) {
 	show_button_kv = {...show_button_kv_defaults, ...show_button_kv};
@@ -116,9 +116,9 @@ if (show_button_kv) {
     {#if show_button_kv.task_list}
         <TaskList {editor} />
     {/if}
-    {#if show_button_kv.image}
+    <!-- {#if show_button_kv.image}
         <Image {editor} />
-    {/if}
+    {/if} -->
     {#if show_button_kv.table}
         <Table {editor} />
     {/if}

src/lib/components/shad-editor/shad-editor.svelte

@@ -44,6 +44,7 @@
 		showToolbar?: boolean;
 		// html_text?: string;
 		new_html?: string;
+		placeholder?: string;
 	}
 
 	let { class:
@@ -52,6 +53,7 @@
 			showToolbar = true,
 			// html_text = '',
 			new_html = $bindable(''),
+			placeholder = $bindable('Start typing...')
 		}: Props = $props();
 
 	let editor = $state<Editor>();
@@ -141,11 +143,12 @@
 				editor = transaction.editor;
 				console.log(editor.isActive('bold'));
 				content = editor.getHTML();
-				console.log(content);
-				if (content == '<p></p>') {
+				// console.log(content);
+				let html = editor.getHTML();
+				if (html == '<p></p>') {
 					new_html = '';
 				} else {
-					new_html = content ?? '';
+					new_html = html ?? '';
 				}
 			}
 		});
@@ -160,5 +163,14 @@
 	{#if editor && showToolbar}
 		<EditorToolbar {editor} />
 	{/if}
-	<div bind:this={element} spellcheck="false" class="h-full w-full flex-1 overflow-auto"></div>
+	<div
+		bind:this={element}
+		spellcheck="false"
+		class="tiptap h-full w-full overflow-auto relative">
+		<span
+            class="placeholder text-sm text-gray-400 italic absolute p-3"
+            contenteditable="false"
+            hidden={editor?.getHTML() !== '<p></p>'}
+            >{placeholder}</span>
+	</div>
 </div>