Wrapping up for the day. Finally working on IDAA related events some more.

src/lib/element_tiptap_editor.svelte

@@ -5,6 +5,7 @@ import ListItem from '@tiptap/extension-list-item'
 import TextStyle from '@tiptap/extension-text-style'
 import StarterKit from "@tiptap/starter-kit";
 import { Editor } from "@tiptap/core";
+// import Highlight from '@tiptap/extension-highlight';
 
 // import Highlight from '@tiptap/extension-highlight' ????
 // import Typography from '@tiptap/extension-typography' ????
@@ -16,6 +17,12 @@ import "./element_tiptap_editor.scss";
 // <code class="language-css">
 
 export let html_text: string = '';
+export let default_minimal: boolean = false;
+export let show_menu: boolean = true;
+
+if (default_minimal) {
+    show_menu = false;
+}
 
 // export let html_text: string = `
 //             <h2>
@@ -74,19 +81,23 @@ if (show_button_kv) {
     show_button_kv = show_button_kv_defaults;
 }
 
+export let new_json = editor?.getJSON();
+export let new_html: string = '';
+
 onMount(() => {
     editor = new Editor({
-    element: element,
-    extensions: [
-        Color.configure({ types: [TextStyle.name, ListItem.name] }),
-        TextStyle.configure({ types: [ListItem.name] }),
-        StarterKit,
-    ],
-    content: html_text,
-    onTransaction: () => {
-        // force re-render so `editor.isActive` works as expected
-        editor = editor;
-    },
+        element: element,
+        extensions: [
+            Color.configure({ types: [TextStyle.name, ListItem.name] }),
+            TextStyle.configure({ types: [ListItem.name] }),
+            StarterKit,
+        ],
+        content: html_text,
+        onTransaction: () => {
+            // force re-render so `editor.isActive` works as expected
+            editor = editor;
+            new_html = editor.getHTML();
+        },
     });
 });
 
@@ -98,17 +109,28 @@ onDestroy(() => {
 </script>
 
 <div
+    on:click={() => {
+        if (default_minimal) {
+            editor.chain().focus().setParagraph().run();
+            show_menu = true;
+        }
+    }}
+    on:mouseleave={() => {
+        if (default_minimal) {
+            show_menu = false;
+        }
+    }}
     class="editor border border-gray-300 rounded p-1 pb-2 bg-gray-200"
     >
 
-      {#if editor}
+      {#if editor && show_menu}
         <div class="control-group bg-gray-200 border-b border-gray-400 p-1">
           <div class="button-group flex flex-row flex-wrap gap-4 items-center justify-between">
 
             <span>
                 <button
                     type="button"
-                    on:click={() => console.log && editor.chain().toggleBold().run()}
+                    on:click={() => console.log(editor?.getHTML()) && editor.chain().toggleBold().run()}
                     disabled={!editor.can().chain().focus().toggleBold().run()}
                     class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md font-bold"
                     class:variant-ghost-secondary={editor.isActive("bold") ?? false}