@upstart.gg/vite-plugins 0.0.39 → 0.0.41

package/src/vite-plugin-upstart-editor/runtime/text-editor.ts

@@ -1,53 +1,159 @@
-import { Editor } from "@tiptap/core";
-import type { Extension } from "@tiptap/core";
+import { Editor, Extension, Node } from "@tiptap/core";
 import { BubbleMenu } from "@tiptap/extension-bubble-menu";
 import Placeholder from "@tiptap/extension-placeholder";
 import StarterKit from "@tiptap/starter-kit";
-import { getCurrentMode } from "./index.js";
 import { sendToParent } from "./utils.js";
-import type { EditorInstance, UpstartEditorOptions } from "./types.js";
+import type { EditorInstance, TextEditorMode, UpstartEditorOptions } from "./types.js";
+
+/**
+ * Custom Document node for inline elements (e.g. <a>, <span>, headings).
+ * Uses `inline*` content instead of the default `block+` to prevent
+ * TipTap from wrapping text in <p> tags inside inline elements.
+ */
+const InlineDocument = Node.create({
+  name: "doc",
+  topNode: true,
+  content: "inline*",
+});
+
+/**
+ * Remaps Enter to insert a <br> (hard break) instead of creating a new paragraph.
+ * Used in inline-rich mode where block nodes are not allowed.
+ */
+const EnterHardBreak = Extension.create({
+  name: "enterHardBreak",
+  addKeyboardShortcuts() {
+    return {
+      Enter: () => this.editor.commands.setHardBreak(),
+    };
+  },
+});
 
 const DEFAULT_OPTIONS: Required<UpstartEditorOptions> = {
   richTextElements: ["p", "div", "article", "section"],
-  plainTextElements: ["button", "a", "span", "h1", "h2", "h3", "h4", "h5", "h6", "label"],
+  inlineRichTextElements: ["a", "span", "h1", "h2", "h3", "h4", "h5", "h6"],
+  plainTextElements: ["button", "label"],
   bubbleMenu: true,
   placeholder: "Start typing...",
   autoSaveDelay: 1000,
 };
 
 const activeEditors = new Map<string, EditorInstance>();
-const saveTimeouts = new Map<string, number>();
+let i18nSyncInProgress = false;
 const styleCache = new WeakMap<
   HTMLElement,
   { outline: string; outlineOffset: string; cursor: string; transition: string }
 >();
-let isInitialized = false;
+let resolvedOptions: Required<UpstartEditorOptions> = DEFAULT_OPTIONS;
 let shortcutsRegistered = false;
+let domObserver: MutationObserver | null = null;
+let reactivateTimer: number | null = null;
 
 /**
  * Initialize TipTap text editing for elements marked as editable.
+ * Activation is deferred to avoid conflicting with React hydration.
  */
 export function initTextEditor(options: UpstartEditorOptions = {}): void {
   if (typeof window === "undefined") {
+    console.warn("[Upstart Editor] Cannot initialize text editor: not running in a browser environment");
     return;
   }
 
-  if (isInitialized) {
-    return;
+  resolvedOptions = { ...DEFAULT_OPTIONS, ...options };
+  registerKeyboardShortcuts();
+
+  // Defer activation to let React finish hydrating the server-rendered HTML.
+  waitForHydration(() => {
+    injectEditorStyles();
+    // activateAllEditors();
+    startDomObserver();
+  });
+}
+
+function waitForHydration(callback: () => void): void {
+  // Remix/React 18 wraps hydrateRoot in startTransition, making hydration a
+  // concurrent (low-priority) operation that can span many frames after the
+  // load event. Instead of guessing a delay, we wait for the DOM to stabilise:
+  // once 200 ms pass without any childList mutations, hydration is done.
+  const STABILITY_MS = 200;
+
+  const onReady = () => {
+    let timer: number | null = null;
+
+    const settle = () => {
+      if (timer) clearTimeout(timer);
+      timer = window.setTimeout(() => {
+        observer.disconnect();
+        callback();
+      }, STABILITY_MS);
+    };
+
+    const observer = new MutationObserver(settle);
+    observer.observe(document.documentElement, { childList: true, subtree: true });
+
+    // Kick off the first timer (covers case where no mutations occur after load)
+    settle();
+  };
+
+  if (document.readyState === "complete") {
+    onReady();
+  } else {
+    window.addEventListener("load", onReady, { once: true });
   }
+}
 
+/**
+ * Inject CSS rules that visually hide original content when an editor is active.
+ * This avoids moving DOM nodes (which breaks React hydration).
+ *
+ * - `font-size: 0` + `color: transparent` hides direct text nodes
+ * - `> *:not(.ProseMirror)` hides child elements
+ * - ProseMirror gets explicit inline styles to restore text rendering
+ */
+function injectEditorStyles(): void {
+  if (document.getElementById("upstart-editor-styles")) return;
+
+  const style = document.createElement("style");
+  style.id = "upstart-editor-styles";
+  style.textContent = [
+    "[data-upstart-editor-active] {",
+    "  cursor: text;",
+    "  transition: outline 100ms;",
+    "}",
+    "[data-upstart-editor-active]:hover {",
+    "  outline: 1px solid #7270c6;",
+    "  outline-offset: 4px;",
+    "}",
+    // "[data-upstart-editor-active] > *:not(.ProseMirror) {",
+    // "  display: none !important;",
+    // "}",
+    "[data-upstart-editor-active] .ProseMirror {",
+    "  outline: none !important;",
+    "  font-size: inherit !important;",
+    "  line-height: inherit !important;",
+    "  color: inherit !important;",
+    "  letter-spacing: inherit !important;",
+    "  font-weight: inherit !important;",
+    "  white-space: inherit !important;",
+    "}",
+    "[data-upstart-editor-active] .ProseMirror:focus {",
+    "  outline: none !important;",
+    "}",
+  ].join("\n");
+  document.head.appendChild(style);
+}
+
+/**
+ * Activate editors on all editable elements. Safe to call multiple times.
+ */
+export function activateAllEditors(): void {
   try {
-    const resolvedOptions = { ...DEFAULT_OPTIONS, ...options };
+    cleanupOrphanedEditors();
     const editables = document.querySelectorAll<HTMLElement>('[data-upstart-editable-text="true"]');
-
     editables.forEach((element) => setupEditableElement(element, resolvedOptions));
-
-    registerKeyboardShortcuts();
-    isInitialized = true;
-
-    console.log("[Upstart Editor] Text editor initialized");
+    console.log("[Upstart Editor] Text editors activated");
   } catch (error) {
-    console.error("[Upstart Editor] Failed to initialize text editor:", error);
+    console.error("[Upstart Editor] Failed to activate text editors:", error);
     sendToParent({
       type: "editor-error",
       error: error instanceof Error ? error.message : "Unknown error",
@@ -59,6 +165,7 @@ export function initTextEditor(options: UpstartEditorOptions = {}): void {
  * Destroy all active editors.
  */
 export function destroyAllActiveEditors(): void {
+  stopDomObserver();
   for (const hash of activeEditors.keys()) {
     destroyEditor(hash);
   }
@@ -66,53 +173,37 @@ export function destroyAllActiveEditors(): void {
 
 function setupEditableElement(element: HTMLElement, options: Required<UpstartEditorOptions>): void {
   const hash = getEditableHash(element);
-  if (!hash) {
+  if (!hash || activeEditors.has(hash)) {
     return;
   }
 
   cacheStyles(element);
-  element.style.transition = "outline 0.15s ease";
-
-  element.addEventListener("dblclick", (event) => {
-    if (getCurrentMode() !== "edit") {
-      return;
-    }
-
-    event.preventDefault();
-    event.stopPropagation();
-
-    if (activeEditors.has(hash)) {
-      return;
-    }
-
-    activateEditor(element, hash, options);
-  });
-
-  element.addEventListener("mouseenter", () => {
-    if (getCurrentMode() !== "edit") {
-      return;
-    }
-
-    if (!activeEditors.has(hash)) {
-      applyHoverStyles(element);
-    }
-  });
-
-  element.addEventListener("mouseleave", () => {
-    if (!activeEditors.has(hash)) {
-      restoreStyles(element);
-    }
-  });
+  activateEditor(element, hash, options);
 }
 
 function activateEditor(element: HTMLElement, hash: string, options: Required<UpstartEditorOptions>): void {
-  const isRichText = shouldUseRichText(element, options);
-  const editor = isRichText
-    ? createRichTextEditor(element, hash, options)
-    : createPlainTextEditor(element, hash, options);
+  const mode = getEditorMode(element, options);
+
+  let editor: Editor;
+  switch (mode) {
+    case "block-rich":
+      editor = createRichTextEditor(element, hash, options);
+      break;
+    case "inline-rich":
+      editor = createInlineRichTextEditor(element, hash, options);
+      break;
+    case "plain":
+      editor = createPlainTextEditor(element, hash, options);
+      break;
+  }
+
+  // Restore text rendering on ProseMirror (overrides inherited font-size: 0 etc.)
+
+  // Mark element — triggers CSS rules that hide original content
+  element.dataset.upstartEditorActive = "true";
 
   applyActiveStyles(element);
-  activeEditors.set(hash, { editor, element, hash });
+  activeEditors.set(hash, { editor, element, hash, mode });
 }
 
 function createPlainTextEditor(
@@ -120,10 +211,15 @@ function createPlainTextEditor(
   hash: string,
   options: Required<UpstartEditorOptions>,
 ): Editor {
-  return new Editor({
+  const content = element.textContent ?? "";
+  let hasChanged = false;
+
+  const editor = new Editor({
     element,
     extensions: [
+      InlineDocument,
       StarterKit.configure({
+        document: false,
         heading: false,
         bold: false,
         italic: false,
@@ -139,24 +235,27 @@ function createPlainTextEditor(
         placeholder: "Click to edit...",
       }),
     ],
-    content: element.textContent ?? "",
+    content,
     editorProps: {
       attributes: {
         class: "upstart-editor-active",
-        style: "outline: 2px solid #3b82f6; outline-offset: 2px;",
       },
     },
-    onUpdate: ({ editor }) => {
-      debouncedSave(hash, editor.getText(), options.autoSaveDelay);
-    },
-    onBlur: ({ editor }) => {
-      saveText(hash, editor.getText());
-      destroyEditor(hash);
+    onUpdate: ({ editor: e }) => {
+      if (i18nSyncInProgress) return;
+      hasChanged = true;
+      // const content = e.getText();
+      // debouncedSave(hash, content, options.autoSaveDelay);
+      syncI18nSiblings(hash);
     },
-    onCreate: ({ editor }) => {
-      editor.commands.focus("end");
+    onBlur: ({ editor: e }) => {
+      if (!hasChanged) return;
+      hasChanged = false;
+      saveText(hash, e.getText());
     },
   });
+
+  return editor;
 }
 
 function createRichTextEditor(
@@ -164,6 +263,10 @@ function createRichTextEditor(
   hash: string,
   options: Required<UpstartEditorOptions>,
 ): Editor {
+  const content = element.innerHTML;
+  element.innerHTML = ""; // Clear the element first!
+  let hasChanged = false;
+
   const bubbleMenuElement = createBubbleMenuElement();
   const extensions: Extension[] = [
     StarterKit,
@@ -183,68 +286,176 @@ function createRichTextEditor(
   const editor = new Editor({
     element,
     extensions,
-    content: element.innerHTML,
+    content,
     editorProps: {
       attributes: {
         class: "upstart-editor-active",
-        style: "outline: 2px solid #3b82f6; outline-offset: 2px;",
       },
     },
-    onUpdate: ({ editor: updatedEditor }) => {
-      debouncedSave(hash, updatedEditor.getHTML(), options.autoSaveDelay);
+    onUpdate: ({ editor: e }) => {
+      if (i18nSyncInProgress) return;
+      hasChanged = true;
+      // const content = e.getHTML();
+      // debouncedSave(hash, content, options.autoSaveDelay);
+      syncI18nSiblings(hash);
     },
-    onBlur: ({ editor: updatedEditor }) => {
-      saveText(hash, updatedEditor.getHTML());
-      destroyEditor(hash);
+    onBlur: ({ editor: e }) => {
+      if (!hasChanged) return;
+      hasChanged = false;
+      saveText(hash, e.getHTML());
     },
-    onCreate: ({ editor: createdEditor }) => {
-      if (options.bubbleMenu) {
-        wireBubbleMenu(bubbleMenuElement, createdEditor);
-      }
-      createdEditor.commands.focus("end");
+  });
+
+  if (options.bubbleMenu) {
+    wireBubbleMenu(bubbleMenuElement, editor);
+  }
+
+  return editor;
+}
+
+function createInlineRichTextEditor(
+  element: HTMLElement,
+  hash: string,
+  options: Required<UpstartEditorOptions>,
+): Editor {
+  const content = element.innerHTML;
+  element.innerHTML = ""; // Clear the element first!
+  let hasChanged = false;
+
+  const bubbleMenuElement = createBubbleMenuElement("inline");
+  const extensions: (Extension | ReturnType<typeof Node.create>)[] = [
+    InlineDocument,
+    EnterHardBreak,
+    StarterKit.configure({
+      document: false,
+      heading: false,
+      blockquote: false,
+      bulletList: false,
+      orderedList: false,
+      listItem: false,
+      codeBlock: false,
+      horizontalRule: false,
+    }),
+    Placeholder.configure({
+      placeholder: "Click to edit...",
+    }),
+  ];
+
+  if (options.bubbleMenu) {
+    extensions.push(
+      BubbleMenu.configure({
+        element: bubbleMenuElement,
+      }),
+    );
+  }
+
+  const editor = new Editor({
+    element,
+    extensions,
+    content,
+    editorProps: {
+      attributes: {
+        class: "upstart-editor-active",
+      },
+    },
+    onUpdate: ({ editor: e }) => {
+      if (i18nSyncInProgress) return;
+      hasChanged = true;
+      // const content = e.getHTML();
+      // debouncedSave(hash, content, options.autoSaveDelay);
+      syncI18nSiblings(hash);
+    },
+    onBlur: ({ editor: e }) => {
+      if (!hasChanged) return;
+      hasChanged = false;
+      saveText(hash, e.getHTML());
     },
   });
 
+  if (options.bubbleMenu) {
+    wireBubbleMenu(bubbleMenuElement, editor);
+  }
+
   return editor;
 }
 
-function shouldUseRichText(element: HTMLElement, options: Required<UpstartEditorOptions>): boolean {
+function getEditorMode(element: HTMLElement, options: Required<UpstartEditorOptions>): TextEditorMode {
   const tagName = element.tagName.toLowerCase();
 
   if (options.plainTextElements.includes(tagName)) {
-    return false;
+    return "plain";
+  }
+
+  if (options.inlineRichTextElements.includes(tagName)) {
+    return "inline-rich";
   }
 
   if (options.richTextElements.includes(tagName)) {
-    return true;
+    return "block-rich";
   }
 
-  return true;
+  return "block-rich";
 }
 
-function debouncedSave(hash: string, content: string, delay: number): void {
-  const existingTimeout = saveTimeouts.get(hash);
-  if (existingTimeout) {
-    clearTimeout(existingTimeout);
+function syncI18nSiblings(sourceHash: string): void {
+  console.log("[Upstart Editor] Syncing i18n siblings for", sourceHash);
+  const instance = activeEditors.get(sourceHash);
+  if (!instance) {
+    console.warn("[Upstart Editor] No editor instance found for hash:", sourceHash);
+    return;
   }
 
-  const timeoutId = window.setTimeout(() => {
-    sendToParent({
-      type: "text-update",
-      hash,
-      newText: content,
-    });
-  }, delay);
+  const i18nKey = instance.element.dataset.upstartI18n;
+  if (!i18nKey) {
+    console.warn("[Upstart Editor] No sibling i18n key found for element:", instance.element);
+    return;
+  }
+
+  const siblings = document.querySelectorAll<HTMLElement>(`[data-upstart-i18n="${CSS.escape(i18nKey)}"]`);
+  console.log(`[Upstart Editor] Found ${siblings.length} sibling(s) with i18n key "${i18nKey}"`);
+
+  // Always use plain text so each sibling's schema can wrap it correctly
+  // (e.g. InlineDocument vs block Document have incompatible content rules).
+  const plainContent = instance.editor.getText();
 
-  saveTimeouts.set(hash, timeoutId);
+  i18nSyncInProgress = true;
+  try {
+    for (const sibling of siblings) {
+      if (sibling === instance.element) continue;
+
+      const siblingHash = sibling.dataset.upstartHash;
+      const siblingInstance = siblingHash ? activeEditors.get(siblingHash) : null;
+
+      if (siblingInstance) {
+        console.log(
+          `[Upstart Editor] Updating sibling editor (hash: ${siblingHash}) with new content`,
+          siblingInstance,
+        );
+        sibling.innerText = plainContent;
+        siblingInstance.editor.chain().selectAll().insertContent(plainContent).run();
+      } else {
+        sibling.textContent = plainContent;
+      }
+    }
+  } finally {
+    i18nSyncInProgress = false;
+  }
 }
 
 function saveText(hash: string, newText: string): void {
   try {
+    const instance = activeEditors.get(hash);
+    const dataset = instance?.element.dataset ?? {};
+    const [namespace, key] = dataset.upstartI18n?.split(":") ?? [];
     sendToParent({
-      type: "text-save",
-      hash,
-      newText,
+      type: "text-edit",
+      payload: {
+        action: "editText",
+        content: newText,
+        namespace,
+        key,
+        language: document.documentElement.lang,
+      },
     });
 
     console.log("[Upstart Editor] Text save message sent:", hash);
@@ -263,17 +474,112 @@ function destroyEditor(hash: string): void {
     return;
   }
 
+  const finalContent = instance.mode === "plain" ? instance.editor.getText() : instance.editor.getHTML();
+
   instance.editor.destroy();
+
+  // Remove ProseMirror DOM
+  const editorDom = instance.element.querySelector(".ProseMirror");
+  if (editorDom) editorDom.remove();
+
+  // Remove CSS-hiding marker — original content becomes visible again
+  delete instance.element.dataset.upstartEditorActive;
+
+  // Update element content with the final edited text
+  if (instance.mode === "plain") {
+    instance.element.textContent = finalContent;
+  } else {
+    instance.element.innerHTML = finalContent;
+  }
+
   restoreStyles(instance.element);
   activeEditors.delete(hash);
+}
+
+// ---------------------------------------------------------------------------
+// MutationObserver — re-activates editors after React re-renders
+// ---------------------------------------------------------------------------
+
+function startDomObserver(): void {
+  if (domObserver) return;
+
+  domObserver = new MutationObserver((mutations) => {
+    let needsReactivation = false;
+
+    for (const mutation of mutations) {
+      if (mutation.type !== "childList") continue;
+
+      for (const node of mutation.addedNodes) {
+        if (
+          node instanceof HTMLElement &&
+          (node.matches?.('[data-upstart-editable-text="true"]') ||
+            node.querySelector?.('[data-upstart-editable-text="true"]'))
+        ) {
+          needsReactivation = true;
+          break;
+        }
+      }
 
-  const existingTimeout = saveTimeouts.get(hash);
-  if (existingTimeout) {
-    clearTimeout(existingTimeout);
-    saveTimeouts.delete(hash);
+      if (!needsReactivation) {
+        for (const node of mutation.removedNodes) {
+          if (
+            node instanceof HTMLElement &&
+            (node.matches?.('[data-upstart-editable-text="true"]') ||
+              node.querySelector?.('[data-upstart-editable-text="true"]'))
+          ) {
+            needsReactivation = true;
+            break;
+          }
+        }
+      }
+
+      if (needsReactivation) break;
+    }
+
+    if (needsReactivation) {
+      scheduleReactivation();
+    }
+  });
+
+  domObserver.observe(document.body, { childList: true, subtree: true });
+}
+
+function stopDomObserver(): void {
+  if (domObserver) {
+    domObserver.disconnect();
+    domObserver = null;
+  }
+  if (reactivateTimer) {
+    clearTimeout(reactivateTimer);
+    reactivateTimer = null;
   }
 }
 
+function scheduleReactivation(): void {
+  if (reactivateTimer) clearTimeout(reactivateTimer);
+  reactivateTimer = window.setTimeout(() => {
+    reactivateTimer = null;
+    activateAllEditors();
+  }, 50);
+}
+
+/**
+ * Remove editors whose host element has been detached from the document
+ * (e.g. React replaced the subtree during a re-render).
+ */
+function cleanupOrphanedEditors(): void {
+  for (const [hash, instance] of activeEditors) {
+    if (!document.contains(instance.element)) {
+      instance.editor.destroy();
+      activeEditors.delete(hash);
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Keyboard shortcuts
+// ---------------------------------------------------------------------------
+
 function registerKeyboardShortcuts(): void {
   if (shortcutsRegistered) {
     return;
@@ -298,6 +604,10 @@ function blurAllEditors(): void {
   });
 }
 
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
 function getEditableHash(element: HTMLElement): string | null {
   return element.dataset.upstartHash ?? null;
 }
@@ -315,18 +625,8 @@ function cacheStyles(element: HTMLElement): void {
   });
 }
 
-function applyHoverStyles(element: HTMLElement): void {
-  cacheStyles(element);
-  element.style.outline = "1px dashed #3b82f6";
-  element.style.outlineOffset = "2px";
-  element.style.cursor = "text";
-}
-
 function applyActiveStyles(element: HTMLElement): void {
   cacheStyles(element);
-  element.style.outline = "2px solid #3b82f6";
-  element.style.outlineOffset = "2px";
-  element.style.cursor = "text";
 }
 
 function restoreStyles(element: HTMLElement): void {
@@ -345,28 +645,73 @@ function restoreStyles(element: HTMLElement): void {
   element.style.transition = cached.transition;
 }
 
-function createBubbleMenuElement(): HTMLDivElement {
+const BUBBLE_MENU_GROUPS: { command: string; icon: string; title: string }[][] = [
+  [
+    { command: "bold", icon: "format-bold", title: "Bold" },
+    { command: "italic", icon: "format-italic", title: "Italic" },
+    { command: "strike", icon: "format-strikethrough", title: "Strikethrough" },
+    { command: "code", icon: "code-tags", title: "Inline Code" },
+  ],
+  [
+    { command: "heading", icon: "format-header-1", title: "Heading" },
+    { command: "blockquote", icon: "format-quote-close", title: "Blockquote" },
+  ],
+  [
+    { command: "bulletList", icon: "format-list-bulleted", title: "Bullet List" },
+    { command: "orderedList", icon: "format-list-numbered", title: "Ordered List" },
+  ],
+];
+
+function getIconifyUrl(iconName: string): string {
+  return `https://api.iconify.design/mdi/${iconName}.svg?height=none&color=%23fff`;
+}
+
+function createBubbleMenuElement(mode: "block" | "inline" = "block"): HTMLDivElement {
+  const groups = mode === "inline" ? [BUBBLE_MENU_GROUPS[0]] : BUBBLE_MENU_GROUPS;
   const menu = document.createElement("div");
   menu.className = "upstart-editor-bubble-menu";
   menu.style.cssText =
-    "display: flex; gap: 6px; padding: 6px 8px; background: #111827; color: #ffffff; " +
-    "border-radius: 6px; font-size: 12px; box-shadow: 0 6px 16px rgba(0,0,0,0.2);";
-
-  const buttons = [
-    { label: "B", command: "bold" },
-    { label: "I", command: "italic" },
-    { label: "S", command: "strike" },
-  ];
+    "display: flex; align-items: center; gap: 2px; padding: 4px; " +
+    "background: #111827; color: #ffffff; border-radius: 8px; " +
+    "font-size: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.25);";
+
+  groups.forEach((group, groupIndex) => {
+    if (groupIndex > 0) {
+      const separator = document.createElement("div");
+      separator.style.cssText =
+        "width: 1px; height: 16px; background: rgba(255,255,255,0.2); " + "margin: 0 4px; flex-shrink: 0;";
+      menu.appendChild(separator);
+    }
 
-  for (const { label, command } of buttons) {
-    const button = document.createElement("button");
-    button.type = "button";
-    button.textContent = label;
-    button.dataset.command = command;
-    button.style.cssText =
-      "background: transparent; border: none; color: inherit; cursor: pointer; font-weight: 600;";
-    menu.appendChild(button);
-  }
+    for (const { command, icon, title } of group) {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.dataset.command = command;
+      button.title = title;
+      button.style.cssText =
+        "background: transparent; border: none; color: inherit; cursor: pointer; " +
+        "display: flex; align-items: center; justify-content: center; " +
+        "width: 28px; height: 28px; padding: 4px; border-radius: 4px; " +
+        "transition: background 0.15s ease;";
+
+      const img = document.createElement("img");
+      img.src = getIconifyUrl(icon);
+      img.alt = title;
+      img.style.cssText = "width: 18px; height: 18px; display: block; pointer-events: none;";
+      button.appendChild(img);
+
+      button.addEventListener("mouseenter", () => {
+        if (!button.dataset.active) {
+          button.style.background = "rgba(255,255,255,0.12)";
+        }
+      });
+      button.addEventListener("mouseleave", () => {
+        button.style.background = button.dataset.active ? "rgba(255,255,255,0.2)" : "transparent";
+      });
+
+      menu.appendChild(button);
+    }
+  });
 
   return menu;
 }
@@ -379,23 +724,55 @@ function wireBubbleMenu(menu: HTMLDivElement, editor: Editor): void {
   menu.addEventListener("click", (event) => {
     const target = event.target as HTMLElement | null;
     const command = target?.dataset.command;
-
-    if (!command) {
-      return;
-    }
+    if (!command) return;
 
     const chain = editor.chain().focus();
 
-    if (command === "bold") {
-      chain.toggleBold().run();
+    switch (command) {
+      case "bold":
+        chain.toggleBold().run();
+        break;
+      case "italic":
+        chain.toggleItalic().run();
+        break;
+      case "strike":
+        chain.toggleStrike().run();
+        break;
+      case "code":
+        chain.toggleCode().run();
+        break;
+      case "heading":
+        chain.toggleHeading({ level: 1 }).run();
+        break;
+      case "blockquote":
+        chain.toggleBlockquote().run();
+        break;
+      case "bulletList":
+        chain.toggleBulletList().run();
+        break;
+      case "orderedList":
+        chain.toggleOrderedList().run();
+        break;
     }
+  });
 
-    if (command === "italic") {
-      chain.toggleItalic().run();
+  const updateActiveStates = (): void => {
+    const buttons = menu.querySelectorAll<HTMLButtonElement>("button[data-command]");
+    for (const button of buttons) {
+      const command = button.dataset.command!;
+      const isActive =
+        command === "heading" ? editor.isActive("heading", { level: 1 }) : editor.isActive(command);
+
+      if (isActive) {
+        button.dataset.active = "true";
+        button.style.background = "rgba(255,255,255,0.2)";
+      } else {
+        delete button.dataset.active;
+        button.style.background = "transparent";
+      }
     }
+  };
 
-    if (command === "strike") {
-      chain.toggleStrike().run();
-    }
-  });
+  editor.on("transaction", updateActiveStates);
+  updateActiveStates();
 }