@baasix/lexical 0.0.11 → 0.0.13

package/dist/index.js

@@ -58,16 +58,16 @@ import "./chunk-PZ5AY32C.js";
 // src/LexicalEditor.tsx
 import {
   useCallback as useCallback31,
-  useEffect as useEffect48,
-  useMemo as useMemo24,
-  useRef as useRef20,
+  useEffect as useEffect49,
+  useMemo as useMemo23,
+  useRef as useRef21,
   useState as useState44
 } from "react";
 import { LexicalComposer as LexicalComposer2 } from "@lexical/react/LexicalComposer";
 import { OnChangePlugin as OnChangePlugin2 } from "@lexical/react/LexicalOnChangePlugin";
 import { useLexicalComposerContext as useLexicalComposerContext50 } from "@lexical/react/LexicalComposerContext";
-import { $generateHtmlFromNodes, $generateNodesFromDOM } from "@lexical/html";
-import { $createParagraphNode as $createParagraphNode12, $getRoot as $getRoot3, $insertNodes as $insertNodes6, $setSelection as $setSelection7, COMMAND_PRIORITY_LOW as COMMAND_PRIORITY_LOW11, FOCUS_COMMAND as FOCUS_COMMAND2 } from "lexical";
+import { $generateHtmlFromNodes, $generateNodesFromDOM as $generateNodesFromDOM2 } from "@lexical/html";
+import { $createParagraphNode as $createParagraphNode12, $getRoot as $getRoot3, $insertNodes as $insertNodes7, $isTextNode as $isTextNode8, $setSelection as $setSelection7, COMMAND_PRIORITY_LOW as COMMAND_PRIORITY_LOW11, FOCUS_COMMAND as FOCUS_COMMAND2, TextNode as TextNode6 } from "lexical";
 
 // src/Editor.tsx
 import { CharacterLimitPlugin } from "@lexical/react/LexicalCharacterLimitPlugin";
@@ -87,7 +87,7 @@ import { TabIndentationPlugin } from "@lexical/react/LexicalTabIndentationPlugin
 import { TablePlugin } from "@lexical/react/LexicalTablePlugin";
 import { useLexicalEditable as useLexicalEditable10 } from "@lexical/react/useLexicalEditable";
 import { CAN_USE_DOM } from "@lexical/utils";
-import { useEffect as useEffect47, useState as useState43 } from "react";
+import { useEffect as useEffect48, useState as useState43 } from "react";
 
 // src/plugins/ActionsPlugin/index.tsx
 import { $createCodeNode, $isCodeNode } from "@lexical/code";
@@ -6234,7 +6234,7 @@ import {
   $isRangeSelection as $isRangeSelection7,
   FORMAT_ELEMENT_COMMAND
 } from "lexical";
-import { useCallback as useCallback23, useMemo as useMemo18, useState as useState31 } from "react";
+import { useCallback as useCallback23, useMemo as useMemo17, useState as useState31 } from "react";
 import * as ReactDOM2 from "react-dom";
 
 // src/plugins/DateTimePlugin/index.tsx
@@ -7645,8 +7645,9 @@ function PageBreakPlugin() {
 // src/plugins/NotesPlugin/index.tsx
 import { useLexicalComposerContext as useLexicalComposerContext21 } from "@lexical/react/LexicalComposerContext";
 import { $insertNodeToNearestRoot as $insertNodeToNearestRoot7 } from "@lexical/utils";
-import { COMMAND_PRIORITY_EDITOR as COMMAND_PRIORITY_EDITOR13, createCommand as createCommand13 } from "lexical";
-import { useCallback as useCallback12, useEffect as useEffect23, useMemo as useMemo8, useRef as useRef9, useState as useState18 } from "react";
+import { COMMAND_PRIORITY_EDITOR as COMMAND_PRIORITY_EDITOR13, createCommand as createCommand13, $insertNodes as $insertNodes5 } from "lexical";
+import { $generateNodesFromDOM } from "@lexical/html";
+import { useCallback as useCallback12, useEffect as useEffect23, useRef as useRef9, useState as useState18 } from "react";
 
 // src/nodes/NotesNode.tsx
 import { $getNodeByKey as $getNodeByKey4 } from "lexical";
@@ -8490,37 +8491,14 @@ function parseQuestionsCardsHtml(html) {
       currentQA = { question: "", answer: "", sections: [] };
       const clone = el.cloneNode(true);
       clone.querySelector("h3")?.remove();
-      const optionsContainer = clone.querySelector('div[style*="flex-direction"]');
-      if (optionsContainer) {
-        const optionDivs = optionsContainer.querySelectorAll("div");
-        const options = [];
-        optionDivs.forEach((optDiv) => {
-          const spans = optDiv.querySelectorAll("span");
-          if (spans.length >= 2) {
-            const letter = (spans[0].textContent || "").trim().toLowerCase();
-            const text = (spans[1].textContent || "").trim();
-            options.push(`${letter}) ${text}`);
-          }
-        });
-        optionsContainer.remove();
-        const qText = (clone.textContent || "").trim();
-        currentQA.question = qText + (options.length > 0 ? " " + options.join(" ") : "");
-      } else {
-        currentQA.question = (clone.textContent || "").trim();
-      }
+      const contentDiv = clone.querySelector('div[style*="margin-top"]');
+      currentQA.question = (contentDiv ? contentDiv.innerHTML : clone.innerHTML).trim();
     } else if (h3Text.includes("Answer")) {
       if (!currentQA) currentQA = { question: "", answer: "", sections: [] };
       const clone = el.cloneNode(true);
       clone.querySelector("h3")?.remove();
-      const badge = clone.querySelector('span[style*="rgba(76"]');
-      if (badge) {
-        const letter = (badge.textContent || "").trim().toLowerCase();
-        badge.remove();
-        const explanation = (clone.textContent || "").trim();
-        currentQA.answer = `${letter}) ${explanation}`;
-      } else {
-        currentQA.answer = (clone.textContent || "").trim();
-      }
+      const p = clone.querySelector("p");
+      currentQA.answer = (p ? p.innerHTML : clone.innerHTML).trim();
     } else if (el.children.length > 1) {
       if (!currentQA) currentQA = { question: "", answer: "", sections: [] };
       for (const card of Array.from(el.children)) {
@@ -8531,7 +8509,8 @@ function parseQuestionsCardsHtml(html) {
         const key = match ? match.key : "rubric";
         const clone = card.cloneNode(true);
         clone.querySelector("h3")?.remove();
-        currentQA.sections.push({ key, content: (clone.textContent || "").trim() });
+        const p = clone.querySelector("p");
+        currentQA.sections.push({ key, content: (p ? p.innerHTML : clone.innerHTML).trim() });
       }
     }
   }
@@ -8541,6 +8520,46 @@ function parseQuestionsCardsHtml(html) {
   }
   return result;
 }
+function buildQuestionsCardsHtml(pairs) {
+  const styles = CARD_STYLES.questionsCards;
+  let html = "";
+  pairs.forEach((qa, idx) => {
+    if (qa.question) {
+      const c = styles.question;
+      const qLabel = pairs.length > 1 ? `Question ${idx + 1}` : "Question";
+      html += `<div style="background: ${c.light}; border: 2px solid ${c.border}; border-left: 4px solid ${c.border}; padding: 16px 20px; border-radius: 12px; margin-bottom: 20px;">
+  <h3 style="margin: 0; color: inherit;">${c.emoji} ${qLabel}</h3>
+  <div style="margin-top: 8px; color: inherit;">${qa.question}</div>
+</div>
+`;
+    }
+    if (qa.answer) {
+      const c = styles.answer;
+      html += `<div style="background: ${c.light}; border: 2px solid ${c.border}; border-left: 4px solid ${c.border}; padding: 16px 20px; border-radius: 12px; margin-bottom: 20px;">
+  <h3 style="margin-top: 0; color: inherit;">${c.emoji} ${c.title}</h3>
+  <p>${qa.answer}</p>
+</div>
+`;
+    }
+    const hasGridCards = qa.sections.some((s) => s.content);
+    if (hasGridCards) {
+      html += `<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 8px; margin-bottom: 24px;">
+`;
+      qa.sections.forEach((s) => {
+        if (!s.content) return;
+        const c = styles[s.key];
+        if (!c) return;
+        html += `  <div style="background: ${c.light}; border: 2px solid ${c.border}; border-left: 4px solid ${c.border}; padding: 16px; border-radius: 12px; min-height: 120px;">
+    <h3 style="margin-top: 0; color: inherit; font-size: 14px;">${c.emoji} ${c.number}. ${c.title}</h3>
+    <p style="margin: 0; font-size: 13px;">${s.content}</p>
+  </div>
+`;
+      });
+      html += "</div>\n";
+    }
+  });
+  return compactHtml(html);
+}
 
 // src/nodes/NotesNode.tsx
 import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
@@ -8576,7 +8595,7 @@ function NotesComponent({
     setIsEditing(false);
   }, []);
   return /* @__PURE__ */ jsx23(BlockWithAlignableContents4, { className, format, nodeKey, children: /* @__PURE__ */ jsxs13("div", { style: { position: "relative" }, children: [
-    isEditable && !isEditing && /* @__PURE__ */ jsx23(
+    isEditable && /* @__PURE__ */ jsx23(
       "button",
       {
         type: "button",
@@ -8601,37 +8620,13 @@ function NotesComponent({
         children: "Edit Notes"
       }
     ),
-    isEditing ? /* @__PURE__ */ jsxs13("div", { style: { border: "1px solid #ccc", borderRadius: 4, padding: 8, background: "#f9f9f9" }, children: [
-      /* @__PURE__ */ jsxs13("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }, children: [
-        /* @__PURE__ */ jsx23("span", { style: { fontSize: 13, fontWeight: 600, color: CARD_STYLES.notes.headingColor }, children: "Edit Notes" }),
-        /* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: 4 }, children: [
-          /* @__PURE__ */ jsx23(
-            "button",
-            {
-              type: "button",
-              onClick: cancelEdit,
-              style: { padding: "2px 10px", fontSize: 12, border: "1px solid #ccc", borderRadius: 4, background: "#fff", cursor: "pointer" },
-              children: "Cancel"
-            }
-          ),
-          /* @__PURE__ */ jsx23(
-            "button",
-            {
-              type: "button",
-              onClick: saveChanges,
-              disabled: !preview,
-              style: { padding: "2px 10px", fontSize: 12, border: "none", borderRadius: 4, background: "#2563eb", color: "#fff", cursor: "pointer", opacity: preview ? 1 : 0.5 },
-              children: "Save"
-            }
-          )
-        ] })
-      ] }),
+    /* @__PURE__ */ jsx23("div", { dangerouslySetInnerHTML: { __html: html } }),
+    isEditing && /* @__PURE__ */ jsx23(Modal, { onClose: cancelEdit, title: "Edit Notes", children: /* @__PURE__ */ jsxs13("div", { style: { minWidth: 500 }, children: [
       /* @__PURE__ */ jsx23(
         "textarea",
         {
           value: editText,
           onChange: (e) => setEditText(e.target.value),
-          onMouseDown: (e) => e.stopPropagation(),
           style: {
             width: "100%",
             minHeight: 150,
@@ -8644,11 +8639,15 @@ function NotesComponent({
           }
         }
       ),
-      preview && /* @__PURE__ */ jsxs13("div", { style: { marginTop: 8, padding: 8, border: "1px solid #e5e7eb", borderRadius: 4, background: "#fff" }, children: [
+      preview && /* @__PURE__ */ jsxs13("div", { style: { marginTop: 8, padding: 8, border: "1px solid #e5e7eb", borderRadius: 4, background: "#fff", maxHeight: 200, overflow: "auto" }, children: [
         /* @__PURE__ */ jsx23("span", { style: { fontSize: 11, color: "#888", display: "block", marginBottom: 4 }, children: "Preview:" }),
         /* @__PURE__ */ jsx23("div", { dangerouslySetInnerHTML: { __html: preview } })
+      ] }),
+      /* @__PURE__ */ jsxs13("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 12 }, children: [
+        /* @__PURE__ */ jsx23("button", { type: "button", onClick: cancelEdit, style: { padding: "6px 16px", fontSize: 13, border: "1px solid #ccc", borderRadius: 4, background: "#fff", cursor: "pointer" }, children: "Cancel" }),
+        /* @__PURE__ */ jsx23("button", { type: "button", onClick: saveChanges, disabled: !preview, style: { padding: "6px 16px", fontSize: 13, border: "none", borderRadius: 4, background: "#2563eb", color: "#fff", cursor: "pointer", opacity: preview ? 1 : 0.5 }, children: "Save" })
       ] })
-    ] }) : /* @__PURE__ */ jsx23("div", { dangerouslySetInnerHTML: { __html: html } })
+    ] }) })
   ] }) });
 }
 var DATA_ATTR = "data-lexical-notes";
@@ -8726,7 +8725,7 @@ function $isNotesNode(node) {
 }
 
 // src/plugins/NotesPlugin/index.tsx
-import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
 var INSERT_NOTES_COMMAND = createCommand13(
   "INSERT_NOTES_COMMAND"
 );
@@ -8748,135 +8747,153 @@ function NotesPlugin() {
   }, [editor]);
   return null;
 }
-function convertRichHtmlToNotes(htmlStr, baasixClient, folder) {
-  return new Promise(async (resolve) => {
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(htmlStr, "text/html");
-    if (baasixClient) {
-      const imgs = doc.querySelectorAll("img");
-      for (let i = 0; i < imgs.length; i++) {
-        const img2 = imgs[i];
-        const src = img2.getAttribute("src") || "";
-        if (src.startsWith("data:")) {
-          try {
-            const resp = await fetch(src);
-            const blob = await resp.blob();
-            const ext = blob.type.split("/")[1] || "png";
-            const file = new File([blob], `note-image-${i}.${ext}`, { type: blob.type });
-            const uploadedUrl = await uploadImageToBaasix(baasixClient, file, folder);
-            img2.setAttribute("src", uploadedUrl);
-          } catch {
-          }
+async function processImagesInHtml(htmlStr, baasixClient, folder) {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(htmlStr, "text/html");
+  if (baasixClient) {
+    const imgs = doc.querySelectorAll("img");
+    for (let i = 0; i < imgs.length; i++) {
+      const img2 = imgs[i];
+      const src = img2.getAttribute("src") || "";
+      if (src.startsWith("data:")) {
+        try {
+          const resp = await fetch(src);
+          const blob = await resp.blob();
+          const ext = blob.type.split("/")[1] || "png";
+          const file = new File([blob], `note-image-${i}.${ext}`, { type: blob.type });
+          const uploadedUrl = await uploadImageToBaasix(baasixClient, file, folder);
+          img2.setAttribute("src", uploadedUrl);
+          img2.setAttribute("style", "max-width: 100%; height: auto;");
+        } catch {
         }
       }
     }
-    let html = `<div style="font-family: sans-serif; line-height: 1.6; color: inherit;">`;
-    const children = Array.from(doc.body.childNodes);
-    for (const child of children) {
-      html += processNode(child);
-    }
-    html += "</div>";
-    resolve(html.replace(/>\s+</g, "><"));
-  });
+  }
+  return doc.body.innerHTML;
 }
+var HEADING_COLOR = "#6b5b95";
 function InsertNotesDialog({
   activeEditor,
   onClose
 }) {
-  const [input, setInput] = useState18("");
-  const [richHtml, setRichHtml] = useState18("");
+  const [pastedHtml, setPastedHtml] = useState18("");
   const [isUploading, setIsUploading] = useState18(false);
+  const [hasPasted, setHasPasted] = useState18(false);
   const pasteAreaRef = useRef9(null);
   let editorConfig = null;
   try {
     editorConfig = useEditorConfig();
   } catch {
   }
-  const handleRichPaste = useCallback12(async (e) => {
+  const handlePaste = useCallback12(async (e) => {
     e.preventDefault();
-    const clipboardData = e.clipboardData;
-    const htmlData = clipboardData.getData("text/html");
-    const textData = clipboardData.getData("text/plain");
-    if (htmlData) {
-      setIsUploading(true);
-      try {
-        const processed = await convertRichHtmlToNotes(
-          htmlData,
-          editorConfig?.baasixClient,
-          editorConfig?.folder
-        );
-        setRichHtml(processed);
-        setInput("");
-      } finally {
-        setIsUploading(false);
-      }
-    } else if (textData) {
-      setInput((prev) => prev ? prev + "\n" + textData : textData);
+    const htmlData = e.clipboardData.getData("text/html");
+    const textData = e.clipboardData.getData("text/plain");
+    const rawHtml = htmlData || (textData ? `<p>${textData.replace(/\n\n+/g, "</p><p>").replace(/\n/g, "<br>")}</p>` : "");
+    if (!rawHtml) return;
+    setIsUploading(true);
+    try {
+      const processed = await processImagesInHtml(rawHtml, editorConfig?.baasixClient, editorConfig?.folder);
+      setPastedHtml(processed);
+      setHasPasted(true);
+    } finally {
+      setIsUploading(false);
     }
+  }, [editorConfig]);
+  const handleClear = useCallback12(() => {
+    setPastedHtml("");
+    setHasPasted(false);
     if (pasteAreaRef.current) {
-      pasteAreaRef.current.innerHTML = '<span style="color: #9ca3af; pointer-events: none; user-select: none;">Paste from Word/Docs here (preserves formatting)</span>';
+      pasteAreaRef.current.innerHTML = "";
     }
-  }, [editorConfig]);
-  const finalHtml = useMemo8(() => {
-    if (richHtml) return richHtml;
-    if (!input.trim()) return "";
-    return convertNotes(input);
-  }, [input, richHtml]);
+  }, []);
   const handleInsert = useCallback12(() => {
-    if (!finalHtml) return;
-    activeEditor.dispatchCommand(INSERT_NOTES_COMMAND, finalHtml);
-    onClose();
-  }, [activeEditor, finalHtml, onClose]);
-  return /* @__PURE__ */ jsxs14("div", { style: { minWidth: 500 }, children: [
-    /* @__PURE__ */ jsx24(
-      "textarea",
-      {
-        value: input,
-        onChange: (e) => {
-          setInput(e.target.value);
-          setRichHtml("");
-        },
-        placeholder: "Paste or type notes here (plain text)...\nExample:\nSuperficial Fascia\nThe superficial fascia is a layer of loose...\n\nFunctions\n- Passageway for vessels\n- Insulation",
-        style: {
-          width: "100%",
-          minHeight: 120,
-          fontFamily: "monospace",
-          fontSize: 13,
-          padding: 8,
-          border: "1px solid #ddd",
-          borderRadius: 4,
-          resize: "vertical",
-          marginBottom: 8
+    if (!pastedHtml) return;
+    const parser = new DOMParser();
+    const dom = parser.parseFromString(pastedHtml, "text/html");
+    const isHeadingTag = (el) => /^H[1-6]$/.test(el.tagName);
+    const isBoldOnlyParagraph = (el) => {
+      if (el.tagName !== "P") return false;
+      const text = el.textContent?.trim() || "";
+      if (!text || text.length > 150) return false;
+      const children = Array.from(el.childNodes);
+      return children.every((child) => {
+        if (child.nodeType === Node.TEXT_NODE) return !child.textContent?.trim();
+        if (child.nodeType !== Node.ELEMENT_NODE) return true;
+        const el2 = child;
+        const tag = el2.tagName;
+        if (tag === "STRONG" || tag === "B") return true;
+        if (tag === "SPAN") {
+          const fw = el2.style.fontWeight;
+          return fw === "bold" || fw === "700";
         }
+        return false;
+      });
+    };
+    const colorizeContent = (el) => {
+      const inner = el.innerHTML;
+      el.innerHTML = `<span style="color: ${HEADING_COLOR};">${inner}</span>`;
+    };
+    const topChildren = Array.from(dom.body.children);
+    for (const el of topChildren) {
+      if (isHeadingTag(el) || isBoldOnlyParagraph(el)) {
+        colorizeContent(el);
+        const hr = dom.createElement("hr");
+        el.insertAdjacentElement("afterend", hr);
+        const emptyP = dom.createElement("p");
+        hr.insertAdjacentElement("afterend", emptyP);
       }
-    ),
-    /* @__PURE__ */ jsx24(
+    }
+    activeEditor.update(() => {
+      const nodes = $generateNodesFromDOM(activeEditor, dom);
+      $insertNodes5(nodes);
+    });
+    onClose();
+  }, [activeEditor, pastedHtml, onClose]);
+  return /* @__PURE__ */ jsxs14("div", { style: { minWidth: 500 }, children: [
+    !hasPasted && /* @__PURE__ */ jsx24(
       "div",
       {
         ref: pasteAreaRef,
         contentEditable: true,
-        onPaste: handleRichPaste,
+        onPaste: handlePaste,
         onMouseDown: (e) => e.stopPropagation(),
         style: {
           width: "100%",
-          minHeight: 40,
-          padding: 8,
+          minHeight: 160,
+          padding: 12,
           border: "2px dashed #93c5fd",
           borderRadius: 4,
-          fontSize: 12,
+          fontSize: 13,
           color: "#6b7280",
           marginBottom: 8,
           outline: "none",
           background: "#f0f7ff"
         },
-        suppressContentEditableWarning: true,
-        children: /* @__PURE__ */ jsx24("span", { style: { color: "#9ca3af", pointerEvents: "none", userSelect: "none" }, children: isUploading ? "Processing content..." : "Paste from Word/Docs here (preserves formatting)" })
+        "data-placeholder": isUploading ? "Processing content..." : "Paste from Word/Docs here (preserves formatting)",
+        suppressContentEditableWarning: true
       }
     ),
-    richHtml && /* @__PURE__ */ jsx24("div", { style: { marginBottom: 8, fontSize: 11, color: "#16a34a" }, children: "Rich content captured (formatting preserved)" }),
-    finalHtml && /* @__PURE__ */ jsxs14("div", { style: { marginBottom: 8, padding: 8, border: "1px solid #e5e7eb", borderRadius: 4, background: "#fafafa", maxHeight: 200, overflow: "auto" }, children: [
-      /* @__PURE__ */ jsx24("span", { style: { fontSize: 11, color: "#888", display: "block", marginBottom: 4 }, children: "Preview:" }),
-      /* @__PURE__ */ jsx24("div", { dangerouslySetInnerHTML: { __html: finalHtml } })
+    hasPasted && /* @__PURE__ */ jsxs14(Fragment9, { children: [
+      /* @__PURE__ */ jsxs14("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }, children: [
+        /* @__PURE__ */ jsx24("span", { style: { fontSize: 11, color: "#6b7280" }, children: "Preview" }),
+        /* @__PURE__ */ jsx24(
+          "button",
+          {
+            type: "button",
+            onClick: handleClear,
+            style: { padding: "2px 10px", fontSize: 12, border: "1px solid #fca5a5", borderRadius: 4, background: "#fff", color: "#ef4444", cursor: "pointer" },
+            children: "Clear"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx24(
+        "div",
+        {
+          style: { padding: 12, border: "1px solid #e5e7eb", borderRadius: 4, background: "#fafafa", maxHeight: 300, overflow: "auto", marginBottom: 8 },
+          dangerouslySetInnerHTML: { __html: pastedHtml }
+        }
+      )
     ] }),
     /* @__PURE__ */ jsxs14("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8 }, children: [
       /* @__PURE__ */ jsx24(
@@ -8893,8 +8910,8 @@ function InsertNotesDialog({
         {
           type: "button",
           onClick: handleInsert,
-          disabled: !finalHtml || isUploading,
-          style: { padding: "6px 16px", fontSize: 13, border: "none", borderRadius: 4, background: "#2563eb", color: "#fff", cursor: "pointer", opacity: finalHtml && !isUploading ? 1 : 0.5 },
+          disabled: !pastedHtml || isUploading,
+          style: { padding: "6px 16px", fontSize: 13, border: "none", borderRadius: 4, background: "#2563eb", color: "#fff", cursor: "pointer", opacity: pastedHtml && !isUploading ? 1 : 0.5 },
           children: isUploading ? "Processing..." : "Insert"
         }
       )
@@ -8907,13 +8924,13 @@ import { useLexicalComposerContext as useLexicalComposerContext22 } from "@lexic
 import { $wrapNodeInElement as $wrapNodeInElement5 } from "@lexical/utils";
 import {
   $createParagraphNode as $createParagraphNode8,
-  $insertNodes as $insertNodes5,
+  $insertNodes as $insertNodes6,
   $isRootOrShadowRoot as $isRootOrShadowRoot5,
   COMMAND_PRIORITY_EDITOR as COMMAND_PRIORITY_EDITOR14,
   createCommand as createCommand14
 } from "lexical";
 import { useEffect as useEffect24, useState as useState19 } from "react";
-import { Fragment as Fragment9, jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
 var INSERT_POLL_COMMAND = createCommand14(
   "INSERT_POLL_COMMAND"
 );
@@ -8926,7 +8943,7 @@ function InsertPollDialog({
     activeEditor.dispatchCommand(INSERT_POLL_COMMAND, question);
     onClose();
   };
-  return /* @__PURE__ */ jsxs15(Fragment9, { children: [
+  return /* @__PURE__ */ jsxs15(Fragment10, { children: [
     /* @__PURE__ */ jsx25(TextInput, { label: "Question", onChange: setQuestion, value: question }),
     /* @__PURE__ */ jsx25(DialogActions, { children: /* @__PURE__ */ jsx25(Button, { disabled: question.trim() === "", onClick, children: "Confirm" }) })
   ] });
@@ -8944,7 +8961,7 @@ function PollPlugin() {
           createPollOption(),
           createPollOption()
         ]);
-        $insertNodes5([pollNode]);
+        $insertNodes6([pollNode]);
         if ($isRootOrShadowRoot5(pollNode.getParentOrThrow())) {
           $wrapNodeInElement5(pollNode, $createParagraphNode8).selectEnd();
         }
@@ -8960,7 +8977,7 @@ function PollPlugin() {
 import { useLexicalComposerContext as useLexicalComposerContext24 } from "@lexical/react/LexicalComposerContext";
 import { $insertNodeToNearestRoot as $insertNodeToNearestRoot8 } from "@lexical/utils";
 import { COMMAND_PRIORITY_EDITOR as COMMAND_PRIORITY_EDITOR15, createCommand as createCommand15 } from "lexical";
-import { useCallback as useCallback14, useEffect as useEffect25, useMemo as useMemo10, useState as useState21 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect25, useMemo as useMemo9, useState as useState21 } from "react";
 
 // src/nodes/RevisionNode.tsx
 import { $getNodeByKey as $getNodeByKey5 } from "lexical";
@@ -8970,7 +8987,7 @@ import {
 } from "@lexical/react/LexicalDecoratorBlockNode";
 import { useLexicalComposerContext as useLexicalComposerContext23 } from "@lexical/react/LexicalComposerContext";
 import { useLexicalEditable as useLexicalEditable2 } from "@lexical/react/useLexicalEditable";
-import { useCallback as useCallback13, useMemo as useMemo9, useState as useState20 } from "react";
+import { useCallback as useCallback13, useMemo as useMemo8, useState as useState20 } from "react";
 import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
 function RevisionComponent({
   className,
@@ -8986,7 +9003,7 @@ function RevisionComponent({
     setItems(parseRevisionHtml(html));
     setIsEditing(true);
   }, [html]);
-  const preview = useMemo9(() => {
+  const preview = useMemo8(() => {
     if (!isEditing) return "";
     const filtered = items.filter((i) => i.trim());
     return filtered.length > 0 ? convertRevision(filtered.join("\n")) : "";
@@ -9014,7 +9031,7 @@ function RevisionComponent({
     setItems((prev) => prev.filter((_, i) => i !== index));
   }, []);
   return /* @__PURE__ */ jsx26(BlockWithAlignableContents5, { className, format, nodeKey, children: /* @__PURE__ */ jsxs16("div", { style: { position: "relative" }, children: [
-    isEditable && !isEditing && /* @__PURE__ */ jsx26(
+    isEditable && /* @__PURE__ */ jsx26(
       "button",
       {
         type: "button",
@@ -9039,32 +9056,10 @@ function RevisionComponent({
         children: "Edit Revision"
       }
     ),
-    isEditing ? /* @__PURE__ */ jsxs16("div", { style: { border: "1px solid #ccc", borderRadius: 4, padding: 8, background: "#f9f9f9" }, children: [
-      /* @__PURE__ */ jsxs16("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }, children: [
-        /* @__PURE__ */ jsx26("span", { style: { fontSize: 13, fontWeight: 600, color: "#c2703a" }, children: "Edit Revision Points" }),
-        /* @__PURE__ */ jsxs16("div", { style: { display: "flex", gap: 4 }, children: [
-          /* @__PURE__ */ jsx26(
-            "button",
-            {
-              type: "button",
-              onClick: cancelEdit,
-              style: { padding: "2px 10px", fontSize: 12, border: "1px solid #ccc", borderRadius: 4, background: "#fff", cursor: "pointer" },
-              children: "Cancel"
-            }
-          ),
-          /* @__PURE__ */ jsx26(
-            "button",
-            {
-              type: "button",
-              onClick: saveChanges,
-              disabled: !preview,
-              style: { padding: "2px 10px", fontSize: 12, border: "none", borderRadius: 4, background: "#2563eb", color: "#fff", cursor: "pointer", opacity: preview ? 1 : 0.5 },
-              children: "Save"
-            }
-          )
-        ] })
-      ] }),
-      items.map((item, index) => /* @__PURE__ */ jsxs16("div", { style: { display: "flex", gap: 4, marginBottom: 4, alignItems: "center" }, children: [
+    /* @__PURE__ */ jsx26("div", { dangerouslySetInnerHTML: { __html: html } }),
+    isEditing && /* @__PURE__ */ jsx26(Modal, { onClose: cancelEdit, title: "Edit Revision Points", children: /* @__PURE__ */ jsxs16("div", { style: { minWidth: 500, display: "flex", flexDirection: "column", flex: 1, minHeight: 0 }, children: [
+      /* @__PURE__ */ jsx26("div", { style: { flex: 1, overflowY: "auto", paddingRight: 4, minHeight: 0 }, children: items.map((item, index) => /* @__PURE__ */ jsxs16("div", { style: { display: "flex", gap: 4, marginBottom: 4, alignItems: "center" }, children: [
+        /* @__PURE__ */ jsx26("span", { style: { fontSize: 14, flexShrink: 0 }, children: "\u2705" }),
         /* @__PURE__ */ jsx26(
           "input",
           {
@@ -9072,7 +9067,6 @@ function RevisionComponent({
             placeholder: "Revision point",
             value: item,
             onChange: (e) => updateItem(index, e.target.value),
-            onMouseDown: (e) => e.stopPropagation(),
             style: { flex: 1, padding: "4px 6px", fontSize: 12, border: "1px solid #ddd", borderRadius: 4 }
           }
         ),
@@ -9085,21 +9079,27 @@ function RevisionComponent({
             children: "\xD7"
           }
         )
-      ] }, index)),
-      /* @__PURE__ */ jsx26(
-        "button",
-        {
-          type: "button",
-          onClick: addItem,
-          style: { padding: "2px 10px", fontSize: 12, border: "1px solid #ddd", borderRadius: 4, background: "#fff", cursor: "pointer", marginTop: 4 },
-          children: "+ Add Point"
-        }
-      ),
-      preview && /* @__PURE__ */ jsxs16("div", { style: { marginTop: 8, padding: 8, border: "1px solid #e5e7eb", borderRadius: 4, background: "#fff" }, children: [
-        /* @__PURE__ */ jsx26("span", { style: { fontSize: 11, color: "#888", display: "block", marginBottom: 4 }, children: "Preview:" }),
-        /* @__PURE__ */ jsx26("div", { dangerouslySetInnerHTML: { __html: preview } })
+      ] }, index)) }),
+      /* @__PURE__ */ jsxs16("div", { style: { flexShrink: 0, paddingTop: 8 }, children: [
+        /* @__PURE__ */ jsx26(
+          "button",
+          {
+            type: "button",
+            onClick: addItem,
+            style: { padding: "2px 10px", fontSize: 12, border: "1px solid #ddd", borderRadius: 4, background: "#fff", cursor: "pointer", marginBottom: 8 },
+            children: "+ Add Point"
+          }
+        ),
+        preview && /* @__PURE__ */ jsxs16("div", { style: { marginBottom: 8, padding: 8, border: "1px solid #e5e7eb", borderRadius: 4, background: "#fff", maxHeight: 150, overflow: "auto" }, children: [
+          /* @__PURE__ */ jsx26("span", { style: { fontSize: 11, color: "#888", display: "block", marginBottom: 4 }, children: "Preview:" }),
+          /* @__PURE__ */ jsx26("div", { dangerouslySetInnerHTML: { __html: preview } })
+        ] }),
+        /* @__PURE__ */ jsxs16("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8 }, children: [
+          /* @__PURE__ */ jsx26("button", { type: "button", onClick: cancelEdit, style: { padding: "6px 16px", fontSize: 13, border: "1px solid #ccc", borderRadius: 4, background: "#fff", cursor: "pointer" }, children: "Cancel" }),
+          /* @__PURE__ */ jsx26("button", { type: "button", onClick: saveChanges, disabled: !preview, style: { padding: "6px 16px", fontSize: 13, border: "none", borderRadius: 4, background: "#2563eb", color: "#fff", cursor: "pointer", opacity: preview ? 1 : 0.5 }, children: "Save" })
+        ] })
       ] })
-    ] }) : /* @__PURE__ */ jsx26("div", { dangerouslySetInnerHTML: { __html: html } })
+    ] }) })
   ] }) });
 }
 var DATA_ATTR2 = "data-lexical-revision";
@@ -9204,7 +9204,7 @@ function InsertRevisionDialog({
   onClose
 }) {
   const [input, setInput] = useState21("");
-  const preview = useMemo10(() => {
+  const preview = useMemo9(() => {
     if (!input.trim()) return "";
     return convertRevision(input);
   }, [input]);
@@ -9265,7 +9265,7 @@ function InsertRevisionDialog({
 import { useLexicalComposerContext as useLexicalComposerContext26 } from "@lexical/react/LexicalComposerContext";
 import { $insertNodeToNearestRoot as $insertNodeToNearestRoot9 } from "@lexical/utils";
 import { COMMAND_PRIORITY_EDITOR as COMMAND_PRIORITY_EDITOR16, createCommand as createCommand16 } from "lexical";
-import { useCallback as useCallback16, useEffect as useEffect26, useMemo as useMemo12, useState as useState23 } from "react";
+import { useCallback as useCallback16, useEffect as useEffect26, useMemo as useMemo11, useState as useState23 } from "react";
 
 // src/nodes/TerminologyNode.tsx
 import { $getNodeByKey as $getNodeByKey6 } from "lexical";
@@ -9275,7 +9275,7 @@ import {
 } from "@lexical/react/LexicalDecoratorBlockNode";
 import { useLexicalComposerContext as useLexicalComposerContext25 } from "@lexical/react/LexicalComposerContext";
 import { useLexicalEditable as useLexicalEditable3 } from "@lexical/react/useLexicalEditable";
-import { useCallback as useCallback15, useMemo as useMemo11, useState as useState22 } from "react";
+import { useCallback as useCallback15, useMemo as useMemo10, useState as useState22 } from "react";
 import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
 function TerminologyComponent({
   className,
@@ -9291,7 +9291,7 @@ function TerminologyComponent({
     setItems(parseTerminologyHtml(html));
     setIsEditing(true);
   }, [html]);
-  const preview = useMemo11(() => {
+  const preview = useMemo10(() => {
     if (!isEditing) return "";
     const text = items.filter((i) => i.term || i.definition).map((i) => i.term ? `${i.term}: ${i.definition}` : i.definition).join("\n");
     return text ? convertTerminology(text) : "";
@@ -9318,58 +9318,37 @@ function TerminologyComponent({
   const removeItem = useCallback15((index) => {
     setItems((prev) => prev.filter((_, i) => i !== index));
   }, []);
-  return /* @__PURE__ */ jsx28(BlockWithAlignableContents6, { className, format, nodeKey, children: /* @__PURE__ */ jsxs18("div", { style: { position: "relative" }, children: [
-    isEditable && !isEditing && /* @__PURE__ */ jsx28(
-      "button",
-      {
-        type: "button",
-        onClick: openEditor,
-        onMouseDown: (e) => e.preventDefault(),
-        style: {
-          position: "absolute",
-          top: 4,
-          right: 4,
-          zIndex: 10,
-          background: CARD_STYLES.terminology.keyColor,
-          color: "#fff",
-          border: "none",
-          borderRadius: 4,
-          padding: "2px 8px",
-          fontSize: 12,
-          cursor: "pointer",
-          opacity: 0,
-          transition: "opacity 0.15s"
-        },
-        className: "html-block-edit-btn",
-        children: "Edit Terminology"
-      }
-    ),
-    isEditing ? /* @__PURE__ */ jsxs18("div", { style: { border: "1px solid #ccc", borderRadius: 4, padding: 8, background: "#f9f9f9" }, children: [
-      /* @__PURE__ */ jsxs18("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }, children: [
-        /* @__PURE__ */ jsx28("span", { style: { fontSize: 13, fontWeight: 600, color: CARD_STYLES.terminology.keyColor }, children: "Edit Terminology" }),
-        /* @__PURE__ */ jsxs18("div", { style: { display: "flex", gap: 4 }, children: [
-          /* @__PURE__ */ jsx28(
-            "button",
-            {
-              type: "button",
-              onClick: cancelEdit,
-              style: { padding: "2px 10px", fontSize: 12, border: "1px solid #ccc", borderRadius: 4, background: "#fff", cursor: "pointer" },
-              children: "Cancel"
-            }
-          ),
-          /* @__PURE__ */ jsx28(
-            "button",
-            {
-              type: "button",
-              onClick: saveChanges,
-              disabled: !preview,
-              style: { padding: "2px 10px", fontSize: 12, border: "none", borderRadius: 4, background: "#2563eb", color: "#fff", cursor: "pointer", opacity: preview ? 1 : 0.5 },
-              children: "Save"
-            }
-          )
-        ] })
-      ] }),
-      items.map((item, index) => /* @__PURE__ */ jsxs18("div", { style: { display: "flex", gap: 4, marginBottom: 4, alignItems: "center" }, children: [
+  return /* @__PURE__ */ jsxs18(BlockWithAlignableContents6, { className, format, nodeKey, children: [
+    /* @__PURE__ */ jsxs18("div", { style: { position: "relative" }, children: [
+      isEditable && /* @__PURE__ */ jsx28(
+        "button",
+        {
+          type: "button",
+          onClick: openEditor,
+          onMouseDown: (e) => e.preventDefault(),
+          style: {
+            position: "absolute",
+            top: 4,
+            right: 4,
+            zIndex: 10,
+            background: CARD_STYLES.terminology.keyColor,
+            color: "#fff",
+            border: "none",
+            borderRadius: 4,
+            padding: "2px 8px",
+            fontSize: 12,
+            cursor: "pointer",
+            opacity: 0,
+            transition: "opacity 0.15s"
+          },
+          className: "html-block-edit-btn",
+          children: "Edit Terminology"
+        }
+      ),
+      /* @__PURE__ */ jsx28("div", { dangerouslySetInnerHTML: { __html: html } })
+    ] }),
+    isEditing && /* @__PURE__ */ jsx28(Modal, { onClose: cancelEdit, title: "Edit Terminology", children: /* @__PURE__ */ jsxs18("div", { style: { minWidth: 500, display: "flex", flexDirection: "column", flex: 1, minHeight: 0 }, children: [
+      /* @__PURE__ */ jsx28("div", { style: { flex: 1, overflowY: "auto", paddingRight: 4, minHeight: 0 }, children: items.map((item, index) => /* @__PURE__ */ jsxs18("div", { style: { display: "flex", gap: 4, marginBottom: 4, alignItems: "center" }, children: [
         /* @__PURE__ */ jsx28(
           "input",
           {
@@ -9377,7 +9356,6 @@ function TerminologyComponent({
             placeholder: "Term",
             value: item.term,
             onChange: (e) => updateItem(index, "term", e.target.value),
-            onMouseDown: (e) => e.stopPropagation(),
             style: { width: "30%", padding: "4px 6px", fontSize: 12, border: "1px solid #ddd", borderRadius: 4 }
           }
         ),
@@ -9388,7 +9366,6 @@ function TerminologyComponent({
             placeholder: "Definition",
             value: item.definition,
             onChange: (e) => updateItem(index, "definition", e.target.value),
-            onMouseDown: (e) => e.stopPropagation(),
             style: { flex: 1, padding: "4px 6px", fontSize: 12, border: "1px solid #ddd", borderRadius: 4 }
           }
         ),
@@ -9401,22 +9378,45 @@ function TerminologyComponent({
             children: "\xD7"
           }
         )
-      ] }, index)),
-      /* @__PURE__ */ jsx28(
-        "button",
-        {
-          type: "button",
-          onClick: addItem,
-          style: { padding: "2px 10px", fontSize: 12, border: "1px solid #ddd", borderRadius: 4, background: "#fff", cursor: "pointer", marginTop: 4 },
-          children: "+ Add Term"
-        }
-      ),
-      preview && /* @__PURE__ */ jsxs18("div", { style: { marginTop: 8, padding: 8, border: "1px solid #e5e7eb", borderRadius: 4, background: "#fff" }, children: [
-        /* @__PURE__ */ jsx28("span", { style: { fontSize: 11, color: "#888", display: "block", marginBottom: 4 }, children: "Preview:" }),
-        /* @__PURE__ */ jsx28("div", { dangerouslySetInnerHTML: { __html: preview } })
+      ] }, index)) }),
+      /* @__PURE__ */ jsxs18("div", { style: { flexShrink: 0, paddingTop: 8 }, children: [
+        /* @__PURE__ */ jsx28(
+          "button",
+          {
+            type: "button",
+            onClick: addItem,
+            style: { padding: "2px 10px", fontSize: 12, border: "1px solid #ddd", borderRadius: 4, background: "#fff", cursor: "pointer", marginBottom: 8 },
+            children: "+ Add Term"
+          }
+        ),
+        preview && /* @__PURE__ */ jsxs18("div", { style: { marginBottom: 8, padding: 8, border: "1px solid #e5e7eb", borderRadius: 4, background: "#fff", maxHeight: 150, overflow: "auto" }, children: [
+          /* @__PURE__ */ jsx28("span", { style: { fontSize: 11, color: "#888", display: "block", marginBottom: 4 }, children: "Preview:" }),
+          /* @__PURE__ */ jsx28("div", { dangerouslySetInnerHTML: { __html: preview } })
+        ] }),
+        /* @__PURE__ */ jsxs18("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8 }, children: [
+          /* @__PURE__ */ jsx28(
+            "button",
+            {
+              type: "button",
+              onClick: cancelEdit,
+              style: { padding: "6px 16px", fontSize: 13, border: "1px solid #ccc", borderRadius: 4, background: "#fff", cursor: "pointer" },
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsx28(
+            "button",
+            {
+              type: "button",
+              onClick: saveChanges,
+              disabled: !preview,
+              style: { padding: "6px 16px", fontSize: 13, border: "none", borderRadius: 4, background: "#2563eb", color: "#fff", cursor: "pointer", opacity: preview ? 1 : 0.5 },
+              children: "Save"
+            }
+          )
+        ] })
       ] })
-    ] }) : /* @__PURE__ */ jsx28("div", { dangerouslySetInnerHTML: { __html: html } })
-  ] }) });
+    ] }) })
+  ] });
 }
 var DATA_ATTR3 = "data-lexical-terminology";
 var TerminologyNode = class _TerminologyNode extends DecoratorBlockNode6 {
@@ -9520,7 +9520,7 @@ function InsertTerminologyDialog({
   onClose
 }) {
   const [input, setInput] = useState23("");
-  const preview = useMemo12(() => {
+  const preview = useMemo11(() => {
     if (!input.trim()) return "";
     return convertTerminology(input);
   }, [input]);
@@ -9581,7 +9581,7 @@ function InsertTerminologyDialog({
 import { useLexicalComposerContext as useLexicalComposerContext28 } from "@lexical/react/LexicalComposerContext";
 import { $insertNodeToNearestRoot as $insertNodeToNearestRoot10 } from "@lexical/utils";
 import { COMMAND_PRIORITY_EDITOR as COMMAND_PRIORITY_EDITOR17, createCommand as createCommand17 } from "lexical";
-import { useCallback as useCallback19, useEffect as useEffect27, useMemo as useMemo14, useState as useState26 } from "react";
+import { useCallback as useCallback19, useEffect as useEffect27, useMemo as useMemo13, useState as useState26 } from "react";
 
 // src/nodes/TextCardsNode.tsx
 import { $getNodeByKey as $getNodeByKey7 } from "lexical";
@@ -9591,7 +9591,7 @@ import {
 } from "@lexical/react/LexicalDecoratorBlockNode";
 import { useLexicalComposerContext as useLexicalComposerContext27 } from "@lexical/react/LexicalComposerContext";
 import { useLexicalEditable as useLexicalEditable4 } from "@lexical/react/useLexicalEditable";
-import { useCallback as useCallback17, useMemo as useMemo13, useState as useState24 } from "react";
+import { useCallback as useCallback17, useMemo as useMemo12, useState as useState24 } from "react";
 import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
 var SECTION_KEYS = [
   "criticalThinking",
@@ -9629,7 +9629,7 @@ function TextCardsComponent({
     setConcepts(parsed);
     setIsEditing(true);
   }, [html]);
-  const preview = useMemo13(() => {
+  const preview = useMemo12(() => {
     if (!isEditing) return "";
     const lines = [];
     concepts.forEach((concept, i) => {
@@ -9690,7 +9690,7 @@ function TextCardsComponent({
   }, []);
   const styles = CARD_STYLES.textCards;
   return /* @__PURE__ */ jsx30(BlockWithAlignableContents7, { className, format, nodeKey, children: /* @__PURE__ */ jsxs20("div", { style: { position: "relative" }, children: [
-    isEditable && !isEditing && /* @__PURE__ */ jsx30(
+    isEditable && /* @__PURE__ */ jsx30(
       "button",
       {
         type: "button",
@@ -9715,38 +9715,15 @@ function TextCardsComponent({
         children: "Edit Text Cards"
       }
     ),
-    isEditing ? /* @__PURE__ */ jsxs20("div", { style: { border: "1px solid #ccc", borderRadius: 4, padding: 8, background: "#f9f9f9" }, children: [
-      /* @__PURE__ */ jsxs20("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }, children: [
-        /* @__PURE__ */ jsx30("span", { style: { fontSize: 13, fontWeight: 600, color: "rgba(76, 175, 80, 0.8)" }, children: "Edit Text Cards" }),
-        /* @__PURE__ */ jsxs20("div", { style: { display: "flex", gap: 4 }, children: [
-          /* @__PURE__ */ jsx30(
-            "button",
-            {
-              type: "button",
-              onClick: cancelEdit,
-              style: { padding: "2px 10px", fontSize: 12, border: "1px solid #ccc", borderRadius: 4, background: "#fff", cursor: "pointer" },
-              children: "Cancel"
-            }
-          ),
-          /* @__PURE__ */ jsx30(
-            "button",
-            {
-              type: "button",
-              onClick: saveChanges,
-              disabled: !preview,
-              style: { padding: "2px 10px", fontSize: 12, border: "none", borderRadius: 4, background: "#2563eb", color: "#fff", cursor: "pointer", opacity: preview ? 1 : 0.5 },
-              children: "Save"
-            }
-          )
-        ] })
-      ] }),
-      concepts.map((concept, cIdx) => /* @__PURE__ */ jsxs20("div", { style: { border: "1px solid #e5e7eb", borderRadius: 6, padding: 8, marginBottom: 8, background: "#fff" }, children: [
-        /* @__PURE__ */ jsxs20("div", { style: { display: "flex", gap: 4, marginBottom: 6, alignItems: "center" }, children: [
-          /* @__PURE__ */ jsxs20("span", { style: { fontSize: 12, fontWeight: 600, color: "#4caf50", minWidth: 80 }, children: [
-            "Concept ",
-            cIdx + 1,
-            ":"
-          ] }),
+    /* @__PURE__ */ jsx30("div", { dangerouslySetInnerHTML: { __html: html } }),
+    isEditing && /* @__PURE__ */ jsx30(Modal, { onClose: cancelEdit, title: "Edit Text Cards", children: /* @__PURE__ */ jsxs20("div", { style: { minWidth: 500, display: "flex", flexDirection: "column", flex: 1, minHeight: 0 }, children: [
+      /* @__PURE__ */ jsx30("div", { style: { flex: 1, overflowY: "auto", paddingRight: 4, minHeight: 0 }, children: concepts.map((concept, cIdx) => /* @__PURE__ */ jsxs20("div", { style: { border: "1px solid #e5e7eb", borderRadius: 6, padding: 8, marginBottom: 8, background: "#fff" }, children: [
+        /* @__PURE__ */ jsxs20("div", { style: { display: "flex", gap: 4, marginBottom: 6, alignItems: "center" }, children: [
+          /* @__PURE__ */ jsxs20("span", { style: { fontSize: 12, fontWeight: 600, color: "#4caf50", minWidth: 80 }, children: [
+            "Concept ",
+            cIdx + 1,
+            ":"
+          ] }),
           /* @__PURE__ */ jsx30(
             "input",
             {
@@ -9754,7 +9731,6 @@ function TextCardsComponent({
               placeholder: "Concept title",
               value: concept.conceptTitle,
               onChange: (e) => updateConceptTitle(cIdx, e.target.value),
-              onMouseDown: (e) => e.stopPropagation(),
               style: { flex: 1, padding: "4px 6px", fontSize: 12, border: "1px solid #ddd", borderRadius: 4 }
             }
           ),
@@ -9779,27 +9755,32 @@ function TextCardsComponent({
                 placeholder: `${label} content...`,
                 value: section.content,
                 onChange: (e) => updateSection(cIdx, sIdx, e.target.value),
-                onMouseDown: (e) => e.stopPropagation(),
                 style: { width: "100%", padding: "4px 6px", fontSize: 12, border: "1px solid #ddd", borderRadius: 4, minHeight: 40, resize: "vertical" }
               }
             )
           ] }, sIdx);
         })
-      ] }, cIdx)),
-      /* @__PURE__ */ jsx30(
-        "button",
-        {
-          type: "button",
-          onClick: addConcept,
-          style: { padding: "2px 10px", fontSize: 12, border: "1px solid #ddd", borderRadius: 4, background: "#fff", cursor: "pointer", marginTop: 4 },
-          children: "+ Add Concept"
-        }
-      ),
-      preview && /* @__PURE__ */ jsxs20("div", { style: { marginTop: 8, padding: 8, border: "1px solid #e5e7eb", borderRadius: 4, background: "#fff" }, children: [
-        /* @__PURE__ */ jsx30("span", { style: { fontSize: 11, color: "#888", display: "block", marginBottom: 4 }, children: "Preview:" }),
-        /* @__PURE__ */ jsx30("div", { dangerouslySetInnerHTML: { __html: preview } })
+      ] }, cIdx)) }),
+      /* @__PURE__ */ jsxs20("div", { style: { flexShrink: 0, paddingTop: 8 }, children: [
+        /* @__PURE__ */ jsx30(
+          "button",
+          {
+            type: "button",
+            onClick: addConcept,
+            style: { padding: "2px 10px", fontSize: 12, border: "1px solid #ddd", borderRadius: 4, background: "#fff", cursor: "pointer", marginBottom: 8 },
+            children: "+ Add Concept"
+          }
+        ),
+        preview && /* @__PURE__ */ jsxs20("div", { style: { marginBottom: 8, padding: 8, border: "1px solid #e5e7eb", borderRadius: 4, background: "#fff", maxHeight: 150, overflow: "auto" }, children: [
+          /* @__PURE__ */ jsx30("span", { style: { fontSize: 11, color: "#888", display: "block", marginBottom: 4 }, children: "Preview:" }),
+          /* @__PURE__ */ jsx30("div", { dangerouslySetInnerHTML: { __html: preview } })
+        ] }),
+        /* @__PURE__ */ jsxs20("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8 }, children: [
+          /* @__PURE__ */ jsx30("button", { type: "button", onClick: cancelEdit, style: { padding: "6px 16px", fontSize: 13, border: "1px solid #ccc", borderRadius: 4, background: "#fff", cursor: "pointer" }, children: "Cancel" }),
+          /* @__PURE__ */ jsx30("button", { type: "button", onClick: saveChanges, disabled: !preview, style: { padding: "6px 16px", fontSize: 13, border: "none", borderRadius: 4, background: "#2563eb", color: "#fff", cursor: "pointer", opacity: preview ? 1 : 0.5 }, children: "Save" })
+        ] })
       ] })
-    ] }) : /* @__PURE__ */ jsx30("div", { dangerouslySetInnerHTML: { __html: html } })
+    ] }) })
   ] }) });
 }
 var DATA_ATTR4 = "data-lexical-text-cards";
@@ -10005,7 +9986,7 @@ function useRichPaste(onText, baasixClient, folder) {
 }
 
 // src/plugins/TextCardsPlugin/index.tsx
-import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
 var INSERT_TEXT_CARDS_COMMAND = createCommand17(
   "INSERT_TEXT_CARDS_COMMAND"
 );
@@ -10032,17 +10013,25 @@ function InsertTextCardsDialog({
   onClose
 }) {
   const [input, setInput] = useState26("");
+  const [hasPasted, setHasPasted] = useState26(false);
   let editorConfig = null;
   try {
     editorConfig = useEditorConfig();
   } catch {
   }
   const richPaste = useRichPaste(
-    (text) => setInput((prev) => prev ? prev + "\n" + text : text),
+    (text) => {
+      setInput((prev) => prev ? prev + "\n" + text : text);
+      setHasPasted(true);
+    },
     editorConfig?.baasixClient,
     editorConfig?.folder
   );
-  const finalHtml = useMemo14(() => {
+  const handleClear = useCallback19(() => {
+    setInput("");
+    setHasPasted(false);
+  }, []);
+  const finalHtml = useMemo13(() => {
     if (!input.trim()) return "";
     const html = convertTextCards(input);
     return richPaste.replaceImagePlaceholders(html);
@@ -10053,70 +10042,60 @@ function InsertTextCardsDialog({
     onClose();
   }, [activeEditor, finalHtml, onClose]);
   return /* @__PURE__ */ jsxs21("div", { style: { minWidth: 500 }, children: [
-    /* @__PURE__ */ jsx31(
-      "textarea",
-      {
-        value: input,
-        onChange: (e) => setInput(e.target.value),
-        placeholder: `Paste concept content here...
-Example:
-CONCEPT 1: DIAGNOSTIC REASONING
-
-Critical Thinking Element
-Pathologists must synthesize clinical history...
-
-Clinical Application
-When examining a tissue specimen...
-
-Example
-A 45-year-old presents with hemoptysis...
-
-Rationalization
-Differential diagnosis prevents anchoring bias...
-
-Critical Insight
-Pathology bridges clinical suspicion with molecular certainty...`,
-        style: {
-          width: "100%",
-          minHeight: 150,
-          fontFamily: "monospace",
-          fontSize: 13,
-          padding: 8,
-          border: "1px solid #ddd",
-          borderRadius: 4,
-          resize: "vertical",
-          marginBottom: 8
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx31(
+    !hasPasted && /* @__PURE__ */ jsx31(
       "div",
       {
         ref: richPaste.pasteAreaRef,
         contentEditable: true,
         onPaste: richPaste.handlePaste,
         onMouseDown: (e) => e.stopPropagation(),
+        "data-placeholder": richPaste.isUploading ? "Uploading images..." : "Paste from Word/Docs here for image support",
         style: {
           width: "100%",
-          minHeight: 40,
-          padding: 8,
+          minHeight: 160,
+          padding: 12,
           border: "2px dashed #93c5fd",
           borderRadius: 4,
-          fontSize: 12,
+          fontSize: 13,
           color: "#6b7280",
           marginBottom: 8,
           outline: "none",
           background: "#f0f7ff"
         },
-        suppressContentEditableWarning: true,
-        children: /* @__PURE__ */ jsx31("span", { style: { color: "#9ca3af", pointerEvents: "none", userSelect: "none" }, children: richPaste.isUploading ? "Uploading images..." : "Paste from Word/Docs here for image support" })
+        suppressContentEditableWarning: true
       }
     ),
-    richPaste.images.length > 0 && /* @__PURE__ */ jsxs21("div", { style: { marginBottom: 8, fontSize: 11, color: "#16a34a" }, children: [
-      richPaste.images.length,
-      " image",
-      richPaste.images.length > 1 ? "s" : "",
-      " captured"
+    hasPasted && /* @__PURE__ */ jsxs21(Fragment11, { children: [
+      /* @__PURE__ */ jsxs21("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 4 }, children: [
+        /* @__PURE__ */ jsx31("span", { style: { fontSize: 11, color: "#6b7280" }, children: "Edit content" }),
+        /* @__PURE__ */ jsx31(
+          "button",
+          {
+            type: "button",
+            onClick: handleClear,
+            style: { padding: "2px 10px", fontSize: 12, border: "1px solid #fca5a5", borderRadius: 4, background: "#fff", color: "#ef4444", cursor: "pointer" },
+            children: "Clear"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx31(
+        "textarea",
+        {
+          value: input,
+          onChange: (e) => setInput(e.target.value),
+          style: {
+            width: "100%",
+            minHeight: 150,
+            fontFamily: "monospace",
+            fontSize: 13,
+            padding: 8,
+            border: "1px solid #ddd",
+            borderRadius: 4,
+            resize: "vertical",
+            marginBottom: 8
+          }
+        }
+      )
     ] }),
     finalHtml && /* @__PURE__ */ jsxs21("div", { style: { marginBottom: 8, padding: 8, border: "1px solid #e5e7eb", borderRadius: 4, background: "#fafafa", maxHeight: 250, overflow: "auto" }, children: [
       /* @__PURE__ */ jsx31("span", { style: { fontSize: 11, color: "#888", display: "block", marginBottom: 4 }, children: "Preview:" }),
@@ -10150,7 +10129,7 @@ Pathology bridges clinical suspicion with molecular certainty...`,
 import { useLexicalComposerContext as useLexicalComposerContext30 } from "@lexical/react/LexicalComposerContext";
 import { $insertNodeToNearestRoot as $insertNodeToNearestRoot11 } from "@lexical/utils";
 import { COMMAND_PRIORITY_EDITOR as COMMAND_PRIORITY_EDITOR18, createCommand as createCommand18 } from "lexical";
-import { useCallback as useCallback21, useEffect as useEffect28, useMemo as useMemo16, useState as useState28 } from "react";
+import { useCallback as useCallback21, useEffect as useEffect29, useMemo as useMemo15, useState as useState28 } from "react";
 
 // src/nodes/QuestionsCardsNode.tsx
 import { $getNodeByKey as $getNodeByKey8 } from "lexical";
@@ -10160,8 +10139,53 @@ import {
 } from "@lexical/react/LexicalDecoratorBlockNode";
 import { useLexicalComposerContext as useLexicalComposerContext29 } from "@lexical/react/LexicalComposerContext";
 import { useLexicalEditable as useLexicalEditable5 } from "@lexical/react/useLexicalEditable";
-import { useCallback as useCallback20, useMemo as useMemo15, useState as useState27 } from "react";
+import { useCallback as useCallback20, useEffect as useEffect28, useMemo as useMemo14, useRef as useRef11, useState as useState27 } from "react";
 import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
+var PLACEHOLDER = "Paste from Word/Docs here for image support...";
+function HtmlEditableField({
+  initialHtml,
+  onCommit,
+  minHeight = 40
+}) {
+  const ref = useRef11(null);
+  useEffect28(() => {
+    if (ref.current) {
+      ref.current.innerHTML = initialHtml;
+    }
+  }, []);
+  const isEmpty = (el) => {
+    const h = el.innerHTML;
+    return h === "" || h === "<br>";
+  };
+  return /* @__PURE__ */ jsx32(
+    "div",
+    {
+      ref,
+      contentEditable: true,
+      suppressContentEditableWarning: true,
+      "data-placeholder": PLACEHOLDER,
+      onBlur: (e) => {
+        const el = e.currentTarget;
+        if (isEmpty(el)) {
+          el.innerHTML = "";
+          onCommit("");
+        } else {
+          onCommit(el.innerHTML);
+        }
+      },
+      style: {
+        width: "100%",
+        padding: "4px 6px",
+        fontSize: 12,
+        border: "1px solid #ddd",
+        borderRadius: 4,
+        minHeight,
+        outline: "none",
+        boxSizing: "border-box"
+      }
+    }
+  );
+}
 var GRID_SECTION_KEYS = [
   "rubric",
   "mnemonics",
@@ -10184,9 +10208,9 @@ function QuestionsCardsComponent({
   const [isEditing, setIsEditing] = useState27(false);
   const [qaPairs, setQaPairs] = useState27([]);
   const makeEmptyQA = () => ({
-    question: "",
-    answer: "",
-    sections: GRID_SECTION_KEYS.map((k) => ({ key: k, content: "" }))
+    questionHtml: "",
+    answerHtml: "",
+    sections: GRID_SECTION_KEYS.map((k) => ({ key: k, contentHtml: "" }))
   });
   const openEditor = useCallback20(() => {
     const parsed = parseQuestionsCardsHtml(html);
@@ -10194,30 +10218,22 @@ function QuestionsCardsComponent({
       const existing = qa.sections || [];
       const all = GRID_SECTION_KEYS.map((k) => {
         const found = existing.find((s) => s.key === k);
-        return found || { key: k, content: "" };
+        return { key: k, contentHtml: found ? found.content : "" };
       });
-      return { question: qa.question, answer: qa.answer, sections: all };
+      return { questionHtml: qa.question, answerHtml: qa.answer, sections: all };
     });
     setQaPairs(pairs.length > 0 ? pairs : [makeEmptyQA()]);
     setIsEditing(true);
   }, [html]);
-  const preview = useMemo15(() => {
+  const preview = useMemo14(() => {
     if (!isEditing) return "";
-    const cStyles = CARD_STYLES.questionsCards;
-    const lines = [];
-    qaPairs.forEach((qa, idx) => {
-      if (qa.question) lines.push(`${idx + 1}. Question: ${qa.question}`);
-      if (qa.answer) lines.push(`Answer: ${qa.answer}`);
-      qa.sections.forEach((s) => {
-        const sStyle = cStyles[s.key];
-        if (sStyle && "title" in sStyle && s.content) {
-          lines.push(sStyle.title);
-          lines.push(s.content);
-        }
-      });
-    });
-    const text = lines.join("\n");
-    return text.trim() ? convertQuestionsCards(text) : "";
+    const hasContent = qaPairs.some((qa) => qa.questionHtml || qa.answerHtml || qa.sections.some((s) => s.contentHtml));
+    if (!hasContent) return "";
+    return buildQuestionsCardsHtml(qaPairs.map((qa) => ({
+      question: qa.questionHtml,
+      answer: qa.answerHtml,
+      sections: qa.sections.map((s) => ({ key: s.key, content: s.contentHtml }))
+    })));
   }, [isEditing, qaPairs]);
   const saveChanges = useCallback20(() => {
     if (!preview) return;
@@ -10232,7 +10248,7 @@ function QuestionsCardsComponent({
   const cancelEdit = useCallback20(() => {
     setIsEditing(false);
   }, []);
-  const updateQA = useCallback20((idx, field, value) => {
+  const updateQAHtml = useCallback20((idx, field, value) => {
     setQaPairs((prev) => prev.map((qa, i) => i === idx ? { ...qa, [field]: value } : qa));
   }, []);
   const addQAPair = useCallback20(() => {
@@ -10241,15 +10257,15 @@ function QuestionsCardsComponent({
   const removeQAPair = useCallback20((idx) => {
     setQaPairs((prev) => prev.filter((_, i) => i !== idx));
   }, []);
-  const updateSection = useCallback20((qIdx, sIdx, value) => {
+  const updateSectionHtml = useCallback20((qIdx, sIdx, value) => {
     setQaPairs((prev) => prev.map((qa, i) => {
       if (i !== qIdx) return qa;
-      return { ...qa, sections: qa.sections.map((s, j) => j === sIdx ? { ...s, content: value } : s) };
+      return { ...qa, sections: qa.sections.map((s, j) => j === sIdx ? { ...s, contentHtml: value } : s) };
     }));
   }, []);
   const styles = CARD_STYLES.questionsCards;
   return /* @__PURE__ */ jsx32(BlockWithAlignableContents8, { className, format, nodeKey, children: /* @__PURE__ */ jsxs22("div", { style: { position: "relative" }, children: [
-    isEditable && !isEditing && /* @__PURE__ */ jsx32(
+    isEditable && /* @__PURE__ */ jsx32(
       "button",
       {
         type: "button",
@@ -10274,32 +10290,9 @@ function QuestionsCardsComponent({
         children: "Edit Questions Card"
       }
     ),
-    isEditing ? /* @__PURE__ */ jsxs22("div", { style: { border: "1px solid #ccc", borderRadius: 4, padding: 8, background: "#f9f9f9" }, children: [
-      /* @__PURE__ */ jsxs22("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }, children: [
-        /* @__PURE__ */ jsx32("span", { style: { fontSize: 13, fontWeight: 600, color: "rgba(25, 118, 210, 0.8)" }, children: "Edit Questions Card" }),
-        /* @__PURE__ */ jsxs22("div", { style: { display: "flex", gap: 4 }, children: [
-          /* @__PURE__ */ jsx32(
-            "button",
-            {
-              type: "button",
-              onClick: cancelEdit,
-              style: { padding: "2px 10px", fontSize: 12, border: "1px solid #ccc", borderRadius: 4, background: "#fff", cursor: "pointer" },
-              children: "Cancel"
-            }
-          ),
-          /* @__PURE__ */ jsx32(
-            "button",
-            {
-              type: "button",
-              onClick: saveChanges,
-              disabled: !preview,
-              style: { padding: "2px 10px", fontSize: 12, border: "none", borderRadius: 4, background: "#2563eb", color: "#fff", cursor: "pointer", opacity: preview ? 1 : 0.5 },
-              children: "Save"
-            }
-          )
-        ] })
-      ] }),
-      qaPairs.map((qa, qIdx) => /* @__PURE__ */ jsxs22("div", { style: { border: "1px solid #e5e7eb", borderRadius: 6, padding: 8, marginBottom: 8, background: "#fff" }, children: [
+    /* @__PURE__ */ jsx32("div", { dangerouslySetInnerHTML: { __html: html } }),
+    isEditing && /* @__PURE__ */ jsx32(Modal, { onClose: cancelEdit, title: "Edit Questions Card", children: /* @__PURE__ */ jsxs22("div", { style: { minWidth: 500, display: "flex", flexDirection: "column", flex: 1, minHeight: 0 }, children: [
+      /* @__PURE__ */ jsx32("div", { style: { flex: 1, overflowY: "auto", paddingRight: 4, minHeight: 0 }, children: qaPairs.map((qa, qIdx) => /* @__PURE__ */ jsxs22("div", { style: { border: "1px solid #e5e7eb", borderRadius: 6, padding: 8, marginBottom: 8, background: "#fff" }, children: [
         /* @__PURE__ */ jsxs22("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 4 }, children: [
           /* @__PURE__ */ jsxs22("span", { style: { fontSize: 12, fontWeight: 600, color: "#1976d2" }, children: [
             "Q",
@@ -10318,27 +10311,25 @@ function QuestionsCardsComponent({
         /* @__PURE__ */ jsxs22("div", { style: { marginBottom: 4 }, children: [
           /* @__PURE__ */ jsx32("label", { style: { fontSize: 11, color: "#1976d2", fontWeight: 600, display: "block", marginBottom: 2 }, children: "Question" }),
           /* @__PURE__ */ jsx32(
-            "textarea",
+            HtmlEditableField,
             {
-              placeholder: "Enter question text...",
-              value: qa.question,
-              onChange: (e) => updateQA(qIdx, "question", e.target.value),
-              onMouseDown: (e) => e.stopPropagation(),
-              style: { width: "100%", padding: "4px 6px", fontSize: 12, border: "1px solid #ddd", borderRadius: 4, minHeight: 40, resize: "vertical" }
-            }
+              initialHtml: qa.questionHtml,
+              onCommit: (v) => updateQAHtml(qIdx, "questionHtml", v),
+              minHeight: 40
+            },
+            `q-${qIdx}-question`
           )
         ] }),
         /* @__PURE__ */ jsxs22("div", { style: { marginBottom: 4 }, children: [
           /* @__PURE__ */ jsx32("label", { style: { fontSize: 11, color: "#666", fontWeight: 600, display: "block", marginBottom: 2 }, children: "Answer" }),
           /* @__PURE__ */ jsx32(
-            "textarea",
+            HtmlEditableField,
             {
-              placeholder: "Enter answer text...",
-              value: qa.answer,
-              onChange: (e) => updateQA(qIdx, "answer", e.target.value),
-              onMouseDown: (e) => e.stopPropagation(),
-              style: { width: "100%", padding: "4px 6px", fontSize: 12, border: "1px solid #ddd", borderRadius: 4, minHeight: 60, resize: "vertical" }
-            }
+              initialHtml: qa.answerHtml,
+              onCommit: (v) => updateQAHtml(qIdx, "answerHtml", v),
+              minHeight: 60
+            },
+            `q-${qIdx}-answer`
           )
         ] }),
         /* @__PURE__ */ jsxs22("details", { style: { marginTop: 4 }, children: [
@@ -10349,33 +10340,38 @@ function QuestionsCardsComponent({
             return /* @__PURE__ */ jsxs22("div", { style: { marginBottom: 4 }, children: [
               /* @__PURE__ */ jsx32("label", { style: { fontSize: 11, color: "#666", display: "block", marginBottom: 2 }, children: label }),
               /* @__PURE__ */ jsx32(
-                "textarea",
+                HtmlEditableField,
                 {
-                  placeholder: `${label} content...`,
-                  value: section.content,
-                  onChange: (e) => updateSection(qIdx, sIdx, e.target.value),
-                  onMouseDown: (e) => e.stopPropagation(),
-                  style: { width: "100%", padding: "4px 6px", fontSize: 12, border: "1px solid #ddd", borderRadius: 4, minHeight: 40, resize: "vertical" }
-                }
+                  initialHtml: section.contentHtml,
+                  onCommit: (v) => updateSectionHtml(qIdx, sIdx, v),
+                  minHeight: 40
+                },
+                `q-${qIdx}-s-${sIdx}`
               )
             ] }, sIdx);
           }) })
         ] })
-      ] }, qIdx)),
-      /* @__PURE__ */ jsx32(
-        "button",
-        {
-          type: "button",
-          onClick: addQAPair,
-          style: { padding: "2px 10px", fontSize: 12, border: "1px solid #ddd", borderRadius: 4, background: "#fff", cursor: "pointer", marginBottom: 8 },
-          children: "+ Add Question"
-        }
-      ),
-      preview && /* @__PURE__ */ jsxs22("div", { style: { marginTop: 8, padding: 8, border: "1px solid #e5e7eb", borderRadius: 4, background: "#fff" }, children: [
-        /* @__PURE__ */ jsx32("span", { style: { fontSize: 11, color: "#888", display: "block", marginBottom: 4 }, children: "Preview:" }),
-        /* @__PURE__ */ jsx32("div", { dangerouslySetInnerHTML: { __html: preview } })
+      ] }, qIdx)) }),
+      /* @__PURE__ */ jsxs22("div", { style: { flexShrink: 0, paddingTop: 8 }, children: [
+        /* @__PURE__ */ jsx32(
+          "button",
+          {
+            type: "button",
+            onClick: addQAPair,
+            style: { padding: "2px 10px", fontSize: 12, border: "1px solid #ddd", borderRadius: 4, background: "#fff", cursor: "pointer", marginBottom: 8 },
+            children: "+ Add Question"
+          }
+        ),
+        preview && /* @__PURE__ */ jsxs22("div", { style: { marginBottom: 8, padding: 8, border: "1px solid #e5e7eb", borderRadius: 4, background: "#fff", maxHeight: 150, overflow: "auto" }, children: [
+          /* @__PURE__ */ jsx32("span", { style: { fontSize: 11, color: "#888", display: "block", marginBottom: 4 }, children: "Preview:" }),
+          /* @__PURE__ */ jsx32("div", { dangerouslySetInnerHTML: { __html: preview } })
+        ] }),
+        /* @__PURE__ */ jsxs22("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8 }, children: [
+          /* @__PURE__ */ jsx32("button", { type: "button", onClick: cancelEdit, style: { padding: "6px 16px", fontSize: 13, border: "1px solid #ccc", borderRadius: 4, background: "#fff", cursor: "pointer" }, children: "Cancel" }),
+          /* @__PURE__ */ jsx32("button", { type: "button", onClick: saveChanges, disabled: !preview, style: { padding: "6px 16px", fontSize: 13, border: "none", borderRadius: 4, background: "#2563eb", color: "#fff", cursor: "pointer", opacity: preview ? 1 : 0.5 }, children: "Save" })
+        ] })
       ] })
-    ] }) : /* @__PURE__ */ jsx32("div", { dangerouslySetInnerHTML: { __html: html } })
+    ] }) })
   ] }) });
 }
 var DATA_ATTR5 = "data-lexical-questions-cards";
@@ -10453,13 +10449,13 @@ function $isQuestionsCardsNode(node) {
 }
 
 // src/plugins/QuestionsCardsPlugin/index.tsx
-import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
 var INSERT_QUESTIONS_CARDS_COMMAND = createCommand18(
   "INSERT_QUESTIONS_CARDS_COMMAND"
 );
 function QuestionsCardsPlugin() {
   const [editor] = useLexicalComposerContext30();
-  useEffect28(() => {
+  useEffect29(() => {
     if (!editor.hasNodes([QuestionsCardsNode])) {
       throw new Error("QuestionsCardsPlugin: QuestionsCardsNode not registered on editor");
     }
@@ -10480,17 +10476,25 @@ function InsertQuestionsCardsDialog({
   onClose
 }) {
   const [input, setInput] = useState28("");
+  const [hasPasted, setHasPasted] = useState28(false);
   let editorConfig = null;
   try {
     editorConfig = useEditorConfig();
   } catch {
   }
   const richPaste = useRichPaste(
-    (text) => setInput((prev) => prev ? prev + "\n" + text : text),
+    (text) => {
+      setInput((prev) => prev ? prev + "\n" + text : text);
+      setHasPasted(true);
+    },
     editorConfig?.baasixClient,
     editorConfig?.folder
   );
-  const finalHtml = useMemo16(() => {
+  const handleClear = useCallback21(() => {
+    setInput("");
+    setHasPasted(false);
+  }, []);
+  const finalHtml = useMemo15(() => {
     if (!input.trim()) return "";
     const html = convertQuestionsCards(input);
     return richPaste.replaceImagePlaceholders(html);
@@ -10501,36 +10505,7 @@ function InsertQuestionsCardsDialog({
     onClose();
   }, [activeEditor, finalHtml, onClose]);
   return /* @__PURE__ */ jsxs23("div", { style: { minWidth: 500 }, children: [
-    /* @__PURE__ */ jsx33(
-      "textarea",
-      {
-        value: input,
-        onChange: (e) => setInput(e.target.value),
-        placeholder: `Paste question content here...
-Example:
-Q1 : Describe the pathogenesis of tuberculosis.
-
-Answer: Tuberculosis is caused by Mycobacterium tuberculosis...
-
-1. MARKING RUBRIC
-Definition: 2 marks, Pathogenesis: 5 marks...
-
-2. MNEMONICS
-Remember TB pathogenesis with "IGRA"...`,
-        style: {
-          width: "100%",
-          minHeight: 150,
-          fontFamily: "monospace",
-          fontSize: 13,
-          padding: 8,
-          border: "1px solid #ddd",
-          borderRadius: 4,
-          resize: "vertical",
-          marginBottom: 8
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx33(
+    !hasPasted && /* @__PURE__ */ jsx33(
       "div",
       {
         ref: richPaste.pasteAreaRef,
@@ -10539,25 +10514,51 @@ Remember TB pathogenesis with "IGRA"...`,
         onMouseDown: (e) => e.stopPropagation(),
         style: {
           width: "100%",
-          minHeight: 40,
-          padding: 8,
+          minHeight: 160,
+          padding: 12,
           border: "2px dashed #93c5fd",
           borderRadius: 4,
-          fontSize: 12,
+          fontSize: 13,
           color: "#6b7280",
           marginBottom: 8,
           outline: "none",
           background: "#f0f7ff"
         },
-        suppressContentEditableWarning: true,
-        children: /* @__PURE__ */ jsx33("span", { style: { color: "#9ca3af", pointerEvents: "none", userSelect: "none" }, children: richPaste.isUploading ? "Uploading images..." : "Paste from Word/Docs here for image support" })
+        "data-placeholder": richPaste.isUploading ? "Uploading images..." : "Paste from Word/Docs here for image support",
+        suppressContentEditableWarning: true
       }
     ),
-    richPaste.images.length > 0 && /* @__PURE__ */ jsxs23("div", { style: { marginBottom: 8, fontSize: 11, color: "#16a34a" }, children: [
-      richPaste.images.length,
-      " image",
-      richPaste.images.length > 1 ? "s" : "",
-      " captured"
+    hasPasted && /* @__PURE__ */ jsxs23(Fragment12, { children: [
+      /* @__PURE__ */ jsxs23("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 4 }, children: [
+        /* @__PURE__ */ jsx33("span", { style: { fontSize: 11, color: "#6b7280" }, children: "Edit content" }),
+        /* @__PURE__ */ jsx33(
+          "button",
+          {
+            type: "button",
+            onClick: handleClear,
+            style: { padding: "2px 10px", fontSize: 12, border: "1px solid #fca5a5", borderRadius: 4, background: "#fff", color: "#ef4444", cursor: "pointer" },
+            children: "Clear"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx33(
+        "textarea",
+        {
+          value: input,
+          onChange: (e) => setInput(e.target.value),
+          style: {
+            width: "100%",
+            minHeight: 150,
+            fontFamily: "monospace",
+            fontSize: 13,
+            padding: 8,
+            border: "1px solid #ddd",
+            borderRadius: 4,
+            resize: "vertical",
+            marginBottom: 8
+          }
+        }
+      )
     ] }),
     finalHtml && /* @__PURE__ */ jsxs23("div", { style: { marginBottom: 8, padding: 8, border: "1px solid #e5e7eb", borderRadius: 4, background: "#fafafa", maxHeight: 250, overflow: "auto" }, children: [
       /* @__PURE__ */ jsx33("span", { style: { fontSize: 11, color: "#888", display: "block", marginBottom: 4 }, children: "Preview:" }),
@@ -10595,8 +10596,8 @@ import {
   TableNode as TableNode2,
   TableRowNode as TableRowNode2
 } from "@lexical/table";
-import { createContext as createContext4, useContext as useContext4, useEffect as useEffect29, useMemo as useMemo17, useState as useState29 } from "react";
-import { Fragment as Fragment10, jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
+import { createContext as createContext4, useContext as useContext4, useEffect as useEffect30, useMemo as useMemo16, useState as useState29 } from "react";
+import { Fragment as Fragment13, jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
 var CellContext = createContext4({
   cellEditorConfig: null,
   cellEditorPlugins: null,
@@ -10610,7 +10611,7 @@ function InsertTableDialog({
   const [rows, setRows] = useState29("5");
   const [columns, setColumns] = useState29("5");
   const [isDisabled, setIsDisabled] = useState29(true);
-  useEffect29(() => {
+  useEffect30(() => {
     const row = Number(rows);
     const column = Number(columns);
     if (row && row > 0 && row <= 500 && column && column > 0 && column <= 50) {
@@ -10626,7 +10627,7 @@ function InsertTableDialog({
     });
     onClose();
   };
-  return /* @__PURE__ */ jsxs24(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs24(Fragment13, { children: [
     /* @__PURE__ */ jsx34(
       TextInput,
       {
@@ -10661,7 +10662,7 @@ import {
 } from "@lexical/react/LexicalDecoratorBlockNode";
 import { useLexicalComposerContext as useLexicalComposerContext32 } from "@lexical/react/LexicalComposerContext";
 import { useLexicalEditable as useLexicalEditable6 } from "@lexical/react/useLexicalEditable";
-import { useCallback as useCallback22, useRef as useRef11, useState as useState30 } from "react";
+import { useCallback as useCallback22, useRef as useRef12, useState as useState30 } from "react";
 import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
 function HtmlBlockComponent({
   className,
@@ -10673,7 +10674,7 @@ function HtmlBlockComponent({
   const isEditable = useLexicalEditable6();
   const [isEditing, setIsEditing] = useState30(false);
   const [editValue, setEditValue] = useState30("");
-  const textareaRef = useRef11(null);
+  const textareaRef = useRef12(null);
   const openEditor = useCallback22(() => {
     setEditValue(html);
     setIsEditing(true);
@@ -10698,7 +10699,7 @@ function HtmlBlockComponent({
       format,
       nodeKey,
       children: /* @__PURE__ */ jsxs25("div", { style: { position: "relative" }, children: [
-        isEditable && !isEditing && /* @__PURE__ */ jsx35(
+        isEditable && /* @__PURE__ */ jsx35(
           "button",
           {
             type: "button",
@@ -10723,52 +10724,14 @@ function HtmlBlockComponent({
             children: "Edit HTML"
           }
         ),
-        isEditing ? /* @__PURE__ */ jsxs25("div", { style: { border: "1px solid #ccc", borderRadius: 4, padding: 8, background: "#f9f9f9" }, children: [
-          /* @__PURE__ */ jsxs25("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }, children: [
-            /* @__PURE__ */ jsx35("span", { style: { fontSize: 12, fontWeight: 600, color: "#333" }, children: "Edit HTML Source" }),
-            /* @__PURE__ */ jsxs25("div", { style: { display: "flex", gap: 4 }, children: [
-              /* @__PURE__ */ jsx35(
-                "button",
-                {
-                  type: "button",
-                  onClick: cancelEdit,
-                  style: {
-                    padding: "2px 10px",
-                    fontSize: 12,
-                    border: "1px solid #ccc",
-                    borderRadius: 4,
-                    background: "#fff",
-                    cursor: "pointer"
-                  },
-                  children: "Cancel"
-                }
-              ),
-              /* @__PURE__ */ jsx35(
-                "button",
-                {
-                  type: "button",
-                  onClick: saveHtml,
-                  style: {
-                    padding: "2px 10px",
-                    fontSize: 12,
-                    border: "none",
-                    borderRadius: 4,
-                    background: "#2563eb",
-                    color: "#fff",
-                    cursor: "pointer"
-                  },
-                  children: "Save"
-                }
-              )
-            ] })
-          ] }),
+        /* @__PURE__ */ jsx35("div", { dangerouslySetInnerHTML: { __html: html } }),
+        isEditing && /* @__PURE__ */ jsx35(Modal, { onClose: cancelEdit, title: "Edit HTML Source", children: /* @__PURE__ */ jsxs25("div", { style: { minWidth: 500 }, children: [
           /* @__PURE__ */ jsx35(
             "textarea",
             {
               ref: textareaRef,
               value: editValue,
               onChange: (e) => setEditValue(e.target.value),
-              onMouseDown: (e) => e.stopPropagation(),
               style: {
                 width: "100%",
                 minHeight: 150,
@@ -10777,21 +10740,36 @@ function HtmlBlockComponent({
                 padding: 8,
                 border: "1px solid #ddd",
                 borderRadius: 4,
-                resize: "vertical"
+                resize: "vertical",
+                marginBottom: 8
               }
             }
           ),
-          /* @__PURE__ */ jsxs25(
-            "div",
-            {
-              style: { marginTop: 8, padding: 8, border: "1px solid #e5e7eb", borderRadius: 4, background: "#fff" },
-              children: [
-                /* @__PURE__ */ jsx35("span", { style: { fontSize: 11, color: "#888", display: "block", marginBottom: 4 }, children: "Preview:" }),
-                /* @__PURE__ */ jsx35("div", { dangerouslySetInnerHTML: { __html: editValue } })
-              ]
-            }
-          )
-        ] }) : /* @__PURE__ */ jsx35("div", { dangerouslySetInnerHTML: { __html: html } })
+          /* @__PURE__ */ jsxs25("div", { style: { padding: 8, border: "1px solid #e5e7eb", borderRadius: 4, background: "#fff", maxHeight: 200, overflow: "auto", marginBottom: 8 }, children: [
+            /* @__PURE__ */ jsx35("span", { style: { fontSize: 11, color: "#888", display: "block", marginBottom: 4 }, children: "Preview:" }),
+            /* @__PURE__ */ jsx35("div", { dangerouslySetInnerHTML: { __html: editValue } })
+          ] }),
+          /* @__PURE__ */ jsxs25("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8 }, children: [
+            /* @__PURE__ */ jsx35(
+              "button",
+              {
+                type: "button",
+                onClick: cancelEdit,
+                style: { padding: "6px 16px", fontSize: 13, border: "1px solid #ccc", borderRadius: 4, background: "#fff", cursor: "pointer" },
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsx35(
+              "button",
+              {
+                type: "button",
+                onClick: saveHtml,
+                style: { padding: "6px 16px", fontSize: 13, border: "none", borderRadius: 4, background: "#2563eb", color: "#fff", cursor: "pointer" },
+                children: "Save"
+              }
+            )
+          ] })
+        ] }) })
       ] })
     }
   );
@@ -10886,7 +10864,7 @@ function $isHtmlBlockNode(node) {
 }
 
 // src/plugins/ComponentPickerPlugin/index.tsx
-import { Fragment as Fragment11, jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
 var ComponentPickerOption = class extends MenuOption {
   // What shows up in the editor
   title;
@@ -11172,7 +11150,7 @@ function ComponentPickerMenuPlugin() {
     allowWhitespace: true,
     minLength: 0
   });
-  const options = useMemo18(() => {
+  const options = useMemo17(() => {
     const baseOptions = getBaseOptions(editor, showModal);
     if (!queryString) {
       return baseOptions;
@@ -11195,7 +11173,7 @@ function ComponentPickerMenuPlugin() {
     },
     [editor]
   );
-  return /* @__PURE__ */ jsxs26(Fragment11, { children: [
+  return /* @__PURE__ */ jsxs26(Fragment14, { children: [
     modal,
     /* @__PURE__ */ jsx36(
       LexicalTypeaheadMenuPlugin,
@@ -11245,11 +11223,11 @@ import {
   CUT_COMMAND,
   PASTE_COMMAND
 } from "lexical";
-import { useMemo as useMemo19 } from "react";
+import { useMemo as useMemo18 } from "react";
 import { jsx as jsx37 } from "react/jsx-runtime";
 function ContextMenuPlugin() {
   const [editor] = useLexicalComposerContext34();
-  const items = useMemo19(() => {
+  const items = useMemo18(() => {
     return [
       new NodeContextMenuOption(`Remove Link`, {
         $onSelect: () => {
@@ -11364,7 +11342,7 @@ import { useLexicalComposerContext as useLexicalComposerContext35 } from "@lexic
 import { DRAG_DROP_PASTE } from "@lexical/rich-text";
 import { isMimeType, mediaFileReader } from "@lexical/utils";
 import { COMMAND_PRIORITY_LOW as COMMAND_PRIORITY_LOW7 } from "lexical";
-import { useEffect as useEffect30 } from "react";
+import { useEffect as useEffect31 } from "react";
 var ACCEPTABLE_IMAGE_TYPES = [
   "image/",
   "image/heic",
@@ -11375,7 +11353,7 @@ var ACCEPTABLE_IMAGE_TYPES = [
 function DragDropPaste() {
   const [editor] = useLexicalComposerContext35();
   const { baasixClient, folder } = useEditorConfig();
-  useEffect30(() => {
+  useEffect31(() => {
     return editor.registerCommand(
       DRAG_DROP_PASTE,
       (files) => {
@@ -11418,9 +11396,9 @@ import {
   $isParagraphNode as $isParagraphNode4,
   $isTextNode as $isTextNode4
 } from "lexical";
-import { useCallback as useCallback24, useEffect as useEffect31, useMemo as useMemo20, useRef as useRef12, useState as useState32 } from "react";
+import { useCallback as useCallback24, useEffect as useEffect32, useMemo as useMemo19, useRef as useRef13, useState as useState32 } from "react";
 import * as ReactDOM3 from "react-dom";
-import { Fragment as Fragment12, jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
 var DRAGGABLE_BLOCK_MENU_CLASSNAME = "draggable-block-menu";
 function isOnMenu(element) {
   return !!element.closest(`.${DRAGGABLE_BLOCK_MENU_CLASSNAME}`);
@@ -11430,10 +11408,10 @@ function DraggableBlockPlugin({
 }) {
   const [editor] = useLexicalComposerContext36();
   const [modal, showModal] = useModal();
-  const menuRef = useRef12(null);
-  const pickerRef = useRef12(null);
-  const searchInputRef = useRef12(null);
-  const targetLineRef = useRef12(null);
+  const menuRef = useRef13(null);
+  const pickerRef = useRef13(null);
+  const searchInputRef = useRef13(null);
+  const targetLineRef = useRef13(null);
   const [draggableElement, setDraggableElement] = useState32(
     null
   );
@@ -11442,7 +11420,7 @@ function DraggableBlockPlugin({
   const [queryString, setQueryString] = useState32("");
   const [highlightedIndex, setHighlightedIndex] = useState32(0);
   const [pickerPosition, setPickerPosition] = useState32(null);
-  const options = useMemo20(() => {
+  const options = useMemo19(() => {
     const baseOptions = getBaseOptions(editor, showModal);
     if (!queryString) {
       return baseOptions;
@@ -11455,12 +11433,12 @@ function DraggableBlockPlugin({
       )
     ];
   }, [editor, queryString, showModal]);
-  useEffect31(() => {
+  useEffect32(() => {
     if (isPickerOpen && searchInputRef.current) {
       searchInputRef.current.focus({ preventScroll: true });
     }
   }, [isPickerOpen]);
-  useEffect31(() => {
+  useEffect32(() => {
     if (!isPickerOpen || !options.length) {
       return;
     }
@@ -11468,7 +11446,7 @@ function DraggableBlockPlugin({
       (current) => Math.min(current, Math.max(options.length - 1, 0))
     );
   }, [isPickerOpen, options.length]);
-  useEffect31(() => {
+  useEffect32(() => {
     if (!isPickerOpen) {
       return;
     }
@@ -11518,7 +11496,7 @@ function DraggableBlockPlugin({
     },
     [editor, pickerState, queryString]
   );
-  useEffect31(() => {
+  useEffect32(() => {
     if (!isPickerOpen) {
       return;
     }
@@ -11580,7 +11558,7 @@ function DraggableBlockPlugin({
     setHighlightedIndex(0);
     setIsPickerOpen(true);
   }
-  return /* @__PURE__ */ jsxs27(Fragment12, { children: [
+  return /* @__PURE__ */ jsxs27(Fragment15, { children: [
     modal,
     isPickerOpen && pickerPosition ? ReactDOM3.createPortal(
       /* @__PURE__ */ jsxs27(
@@ -11662,7 +11640,7 @@ import {
   $getSelection as $getSelection11,
   $isRangeSelection as $isRangeSelection9
 } from "lexical";
-import { useCallback as useCallback25, useEffect as useEffect32, useMemo as useMemo21, useState as useState33 } from "react";
+import { useCallback as useCallback25, useEffect as useEffect33, useMemo as useMemo20, useState as useState33 } from "react";
 import * as ReactDOM4 from "react-dom";
 import { jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
 var EmojiOption = class extends MenuOption2 {
@@ -11712,10 +11690,10 @@ function EmojiPickerPlugin() {
   const [editor] = useLexicalComposerContext37();
   const [queryString, setQueryString] = useState33(null);
   const [emojis, setEmojis] = useState33([]);
-  useEffect32(() => {
+  useEffect33(() => {
     import("./emoji-list-MUV74SND.js").then((file) => setEmojis(file.default));
   }, []);
-  const emojiOptions = useMemo21(
+  const emojiOptions = useMemo20(
     () => emojis != null ? emojis.map(
       ({ emoji, aliases, tags }) => new EmojiOption(aliases[0], emoji, {
         keywords: [...aliases, ...tags]
@@ -11728,7 +11706,7 @@ function EmojiPickerPlugin() {
     punctuation: `\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\[\\]\\\\/!%'"~=<>:;`
     // allow _ and -
   });
-  const options = useMemo21(() => {
+  const options = useMemo20(() => {
     return emojiOptions.filter((option) => {
       return queryString != null ? new RegExp(queryString, "gi").exec(option.title) || option.keywords != null ? option.keywords.some(
         (keyword) => new RegExp(queryString, "gi").exec(keyword)
@@ -11808,7 +11786,7 @@ import {
   KEY_ESCAPE_COMMAND as KEY_ESCAPE_COMMAND2,
   SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND2
 } from "lexical";
-import { useCallback as useCallback26, useEffect as useEffect33, useRef as useRef13, useState as useState34 } from "react";
+import { useCallback as useCallback26, useEffect as useEffect34, useRef as useRef14, useState as useState34 } from "react";
 import { createPortal as createPortal8 } from "react-dom";
 
 // src/utils/getSelectedNode.ts
@@ -11857,7 +11835,7 @@ function setFloatingElemPositionForLinkEditor(targetRect, floatingElem, anchorEl
 }
 
 // src/plugins/FloatingLinkEditorPlugin/index.tsx
-import { Fragment as Fragment13, jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
 function preventDefault(event) {
   event.preventDefault();
 }
@@ -11869,8 +11847,8 @@ function FloatingLinkEditor({
   isLinkEditMode,
   setIsLinkEditMode
 }) {
-  const editorRef = useRef13(null);
-  const inputRef = useRef13(null);
+  const editorRef = useRef14(null);
+  const inputRef = useRef14(null);
   const [linkUrl, setLinkUrl] = useState34("");
   const [editedLinkUrl, setEditedLinkUrl] = useState34("https://");
   const [lastSelection, setLastSelection] = useState34(
@@ -11943,7 +11921,7 @@ function FloatingLinkEditor({
     }
     return true;
   }, [anchorElem, editor, setIsLinkEditMode, isLinkEditMode, linkUrl]);
-  useEffect33(() => {
+  useEffect34(() => {
     const scrollerElem = anchorElem.parentElement;
     const update = () => {
       editor.getEditorState().read(() => {
@@ -11961,7 +11939,7 @@ function FloatingLinkEditor({
       }
     };
   }, [anchorElem.parentElement, editor, $updateLinkEditor]);
-  useEffect33(() => {
+  useEffect34(() => {
     return mergeRegister10(
       editor.registerUpdateListener(({ editorState }) => {
         editorState.read(() => {
@@ -11989,17 +11967,17 @@ function FloatingLinkEditor({
       )
     );
   }, [editor, $updateLinkEditor, setIsLink, isLink]);
-  useEffect33(() => {
+  useEffect34(() => {
     editor.getEditorState().read(() => {
       $updateLinkEditor();
     });
   }, [editor, $updateLinkEditor]);
-  useEffect33(() => {
+  useEffect34(() => {
     if (isLinkEditMode && inputRef.current) {
       inputRef.current.focus();
     }
   }, [isLinkEditMode, isLink]);
-  useEffect33(() => {
+  useEffect34(() => {
     const editorElement = editorRef.current;
     if (editorElement === null) {
       return;
@@ -12050,7 +12028,7 @@ function FloatingLinkEditor({
       setIsLinkEditMode(false);
     }
   };
-  return /* @__PURE__ */ jsx40("div", { ref: editorRef, className: "link-editor", children: !isLink ? null : isLinkEditMode ? /* @__PURE__ */ jsxs29(Fragment13, { children: [
+  return /* @__PURE__ */ jsx40("div", { ref: editorRef, className: "link-editor", children: !isLink ? null : isLinkEditMode ? /* @__PURE__ */ jsxs29(Fragment16, { children: [
     /* @__PURE__ */ jsx40(
       "input",
       {
@@ -12130,7 +12108,7 @@ function FloatingLinkEditor({
 function useFloatingLinkEditorToolbar(editor, anchorElem, isLinkEditMode, setIsLinkEditMode) {
   const [activeEditor, setActiveEditor] = useState34(editor);
   const [isLink, setIsLink] = useState34(false);
-  useEffect33(() => {
+  useEffect34(() => {
     function $updateToolbar() {
       const selection = $getSelection12();
       if ($isRangeSelection10(selection)) {
@@ -12246,7 +12224,7 @@ import {
   getDOMSelection as getDOMSelection3,
   SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND3
 } from "lexical";
-import { useCallback as useCallback27, useEffect as useEffect34, useRef as useRef14, useState as useState35 } from "react";
+import { useCallback as useCallback27, useEffect as useEffect35, useRef as useRef15, useState as useState35 } from "react";
 import { createPortal as createPortal9 } from "react-dom";
 
 // src/utils/getDOMRangeRect.ts
@@ -12308,7 +12286,7 @@ function setFloatingElemPosition(targetRect, floatingElem, anchorElem, isLink =
 }
 
 // src/plugins/FloatingTextFormatToolbarPlugin/index.tsx
-import { Fragment as Fragment14, jsx as jsx41, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx41, jsxs as jsxs30 } from "react/jsx-runtime";
 function TextFormatFloatingToolbar({
   editor,
   anchorElem,
@@ -12325,7 +12303,7 @@ function TextFormatFloatingToolbar({
   isSuperscript: isSuperscript2,
   setIsLinkEditMode
 }) {
-  const popupCharStylesEditorRef = useRef14(null);
+  const popupCharStylesEditorRef = useRef15(null);
   const insertLink = useCallback27(() => {
     if (!isLink) {
       setIsLinkEditMode(true);
@@ -12357,7 +12335,7 @@ function TextFormatFloatingToolbar({
       }
     }
   }
-  useEffect34(() => {
+  useEffect35(() => {
     if (popupCharStylesEditorRef?.current) {
       document.addEventListener("mousemove", mouseMoveListener);
       document.addEventListener("mouseup", mouseUpListener);
@@ -12385,7 +12363,7 @@ function TextFormatFloatingToolbar({
       );
     }
   }, [editor, anchorElem, isLink]);
-  useEffect34(() => {
+  useEffect35(() => {
     const scrollerElem = anchorElem.parentElement;
     const update = () => {
       editor.getEditorState().read(() => {
@@ -12403,7 +12381,7 @@ function TextFormatFloatingToolbar({
       }
     };
   }, [editor, $updateTextFormatFloatingToolbar, anchorElem]);
-  useEffect34(() => {
+  useEffect35(() => {
     editor.getEditorState().read(() => {
       $updateTextFormatFloatingToolbar();
     });
@@ -12424,7 +12402,7 @@ function TextFormatFloatingToolbar({
     );
   }, [editor, $updateTextFormatFloatingToolbar]);
   return /* @__PURE__ */ jsxs30("div", { ref: popupCharStylesEditorRef, className: "floating-text-format-popup", children: [
-    editor.isEditable() && /* @__PURE__ */ jsxs30(Fragment14, { children: [
+    editor.isEditable() && /* @__PURE__ */ jsxs30(Fragment17, { children: [
       /* @__PURE__ */ jsx41(
         "button",
         {
@@ -12637,13 +12615,13 @@ function useFloatingTextFormatToolbar(editor, anchorElem, setIsLinkEditMode) {
       }
     });
   }, [editor]);
-  useEffect34(() => {
+  useEffect35(() => {
     document.addEventListener("selectionchange", updatePopup);
     return () => {
       document.removeEventListener("selectionchange", updatePopup);
     };
   }, [updatePopup]);
-  useEffect34(() => {
+  useEffect35(() => {
     return mergeRegister11(
       editor.registerUpdateListener(() => {
         updatePopup();
@@ -12701,10 +12679,10 @@ import { useLexicalComposerContext as useLexicalComposerContext40 } from "@lexic
 import { $trimTextContentFromAnchor } from "@lexical/selection";
 import { $restoreEditorState } from "@lexical/utils";
 import { $getSelection as $getSelection14, $isRangeSelection as $isRangeSelection12, RootNode } from "lexical";
-import { useEffect as useEffect35 } from "react";
+import { useEffect as useEffect36 } from "react";
 function MaxLengthPlugin({ maxLength }) {
   const [editor] = useLexicalComposerContext40();
-  useEffect35(() => {
+  useEffect36(() => {
     let lastRestoredEditorState = null;
     return editor.registerNodeTransform(RootNode, (rootNode) => {
       const selection = $getSelection14();
@@ -12744,7 +12722,7 @@ import {
   KEY_DOWN_COMMAND,
   OUTDENT_CONTENT_COMMAND
 } from "lexical";
-import { useEffect as useEffect36 } from "react";
+import { useEffect as useEffect37 } from "react";
 
 // src/plugins/ToolbarPlugin/utils.ts
 import { $createCodeNode as $createCodeNode3 } from "@lexical/code";
@@ -13211,7 +13189,7 @@ function ShortcutsPlugin({
   setIsLinkEditMode
 }) {
   const { toolbarState } = useToolbarState();
-  useEffect36(() => {
+  useEffect37(() => {
     const keyboardShortcutsHandler = (event) => {
       if (isModifierMatch2(event, {})) {
         return false;
@@ -13301,7 +13279,7 @@ function ShortcutsPlugin({
 // src/plugins/SpecialTextPlugin/index.ts
 import { useLexicalComposerContext as useLexicalComposerContext41 } from "@lexical/react/LexicalComposerContext";
 import { TextNode as TextNode5 } from "lexical";
-import { useEffect as useEffect37 } from "react";
+import { useEffect as useEffect38 } from "react";
 
 // src/nodes/SpecialTextNode.tsx
 import { addClassNamesToElement as addClassNamesToElement3 } from "@lexical/utils";
@@ -13371,7 +13349,7 @@ function $textNodeTransform(node) {
   }
 }
 function useTextTransformation(editor) {
-  useEffect37(() => {
+  useEffect38(() => {
     if (!editor.hasNodes([SpecialTextNode])) {
       throw new Error(
         "SpecialTextPlugin: SpecialTextNode not registered on editor"
@@ -13395,7 +13373,7 @@ import {
   COMMAND_PRIORITY_LOW as COMMAND_PRIORITY_LOW10,
   FOCUS_COMMAND
 } from "lexical";
-import { useEffect as useEffect38 } from "react";
+import { useEffect as useEffect39 } from "react";
 var TAB_TO_FOCUS_INTERVAL = 100;
 var lastTabKeyDownTimestamp = 0;
 var hasRegisteredKeyDownListener = false;
@@ -13412,7 +13390,7 @@ function registerKeyTimeStampTracker() {
 }
 function TabFocusPlugin() {
   const [editor] = useLexicalComposerContext42();
-  useEffect38(() => {
+  useEffect39(() => {
     if (!hasRegisteredKeyDownListener) {
       registerKeyTimeStampTracker();
       hasRegisteredKeyDownListener = true;
@@ -13469,12 +13447,12 @@ import {
   isDOMNode as isDOMNode2,
   SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND4
 } from "lexical";
-import { useCallback as useCallback28, useEffect as useEffect39, useRef as useRef16, useState as useState37 } from "react";
+import { useCallback as useCallback28, useEffect as useEffect40, useRef as useRef17, useState as useState37 } from "react";
 import { createPortal as createPortal10 } from "react-dom";
 
 // src/ui/ColorPicker.tsx
 import { calculateZoomLevel as calculateZoomLevel2 } from "@lexical/utils";
-import { useMemo as useMemo22, useRef as useRef15, useState as useState36 } from "react";
+import { useMemo as useMemo21, useRef as useRef16, useState as useState36 } from "react";
 import { jsx as jsx43, jsxs as jsxs31 } from "react/jsx-runtime";
 var skipAddingToHistoryStack = false;
 var basicColors = [
@@ -13504,15 +13482,15 @@ function ColorPicker({
   const [inputColor, setInputColor] = useState36(
     transformColor("hex", color).hex
   );
-  const innerDivRef = useRef15(null);
-  const saturationPosition = useMemo22(
+  const innerDivRef = useRef16(null);
+  const saturationPosition = useMemo21(
     () => ({
       x: selfColor.hsv.s / 100 * WIDTH,
       y: (100 - selfColor.hsv.v) / 100 * HEIGHT
     }),
     [selfColor.hsv.s, selfColor.hsv.v]
   );
-  const huePosition = useMemo22(
+  const huePosition = useMemo21(
     () => ({
       x: selfColor.hsv.h / 360 * WIDTH
     }),
@@ -13614,8 +13592,8 @@ function ColorPicker({
   );
 }
 function MoveWrapper({ className, style, onChange, children }) {
-  const divRef = useRef15(null);
-  const draggedRef = useRef15(false);
+  const divRef = useRef16(null);
+  const draggedRef = useRef16(false);
   const move = (e) => {
     if (divRef.current) {
       const { current: div } = divRef;
@@ -13741,7 +13719,7 @@ function transformColor(format, color) {
 }
 
 // src/plugins/TableActionMenuPlugin/index.tsx
-import { Fragment as Fragment15, jsx as jsx44, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx44, jsxs as jsxs32 } from "react/jsx-runtime";
 function computeSelectionCount(selection) {
   const selectionShape = selection.getShape();
   return {
@@ -13788,7 +13766,7 @@ function TableActionMenu({
   showColorPickerModal
 }) {
   const [editor] = useLexicalComposerContext43();
-  const dropDownRef = useRef16(null);
+  const dropDownRef = useRef17(null);
   const [tableCellNode, updateTableCellNode] = useState37(_tableCellNode);
   const [selectionCounts, updateSelectionCounts] = useState37({
     columns: 1,
@@ -13799,7 +13777,7 @@ function TableActionMenu({
   const [backgroundColor, setBackgroundColor] = useState37(
     () => currentCellBackgroundColor(editor) || ""
   );
-  useEffect39(() => {
+  useEffect40(() => {
     return editor.registerMutationListener(
       TableCellNode3,
       (nodeMutations) => {
@@ -13814,7 +13792,7 @@ function TableActionMenu({
       { skipInitialization: true }
     );
   }, [editor, tableCellNode]);
-  useEffect39(() => {
+  useEffect40(() => {
     editor.getEditorState().read(() => {
       const selection = $getSelection17();
       if ($isTableSelection2(selection)) {
@@ -13827,7 +13805,7 @@ function TableActionMenu({
       setCanUnmergeCell($canUnmerge());
     });
   }, [editor]);
-  useEffect39(() => {
+  useEffect40(() => {
     const menuButtonElement = contextRef.current;
     const dropDownElement = dropDownRef.current;
     const rootElement = editor.getRootElement();
@@ -13851,7 +13829,7 @@ function TableActionMenu({
       dropDownElement.style.top = `${topPosition}px`;
     }
   }, [contextRef, dropDownRef, editor]);
-  useEffect39(() => {
+  useEffect40(() => {
     function handleClickOutside(event) {
       if (dropDownRef.current != null && contextRef.current != null && isDOMNode2(event.target) && !dropDownRef.current.contains(event.target) && !contextRef.current.contains(event.target)) {
         setIsMenuOpen(false);
@@ -14338,8 +14316,8 @@ function TableCellActionMenuContainer({
   cellMerge
 }) {
   const [editor] = useLexicalComposerContext43();
-  const menuButtonRef = useRef16(null);
-  const menuRootRef = useRef16(null);
+  const menuButtonRef = useRef17(null);
+  const menuRootRef = useRef17(null);
   const [isMenuOpen, setIsMenuOpen] = useState37(false);
   const [tableCellNode, setTableMenuCellNode] = useState37(
     null
@@ -14459,7 +14437,7 @@ function TableCellActionMenuContainer({
       menu.style.transform = `translate(${left}px, ${top}px)`;
     }
   }, [editor, anchorElem, checkTableCellOverflow]);
-  useEffect39(() => {
+  useEffect40(() => {
     let timeoutId = void 0;
     const callback = () => {
       timeoutId = void 0;
@@ -14490,14 +14468,14 @@ function TableCellActionMenuContainer({
       () => clearTimeout(timeoutId)
     );
   });
-  const prevTableCellDOM = useRef16(tableCellNode);
-  useEffect39(() => {
+  const prevTableCellDOM = useRef17(tableCellNode);
+  useEffect40(() => {
     if (prevTableCellDOM.current !== tableCellNode) {
       setIsMenuOpen(false);
     }
     prevTableCellDOM.current = tableCellNode;
   }, [prevTableCellDOM, tableCellNode]);
-  return /* @__PURE__ */ jsx44("div", { className: "table-cell-action-button-container", ref: menuButtonRef, children: tableCellNode != null && /* @__PURE__ */ jsxs32(Fragment15, { children: [
+  return /* @__PURE__ */ jsx44("div", { className: "table-cell-action-button-container", ref: menuButtonRef, children: tableCellNode != null && /* @__PURE__ */ jsxs32(Fragment18, { children: [
     /* @__PURE__ */ jsx44(
       "button",
       {
@@ -14563,22 +14541,22 @@ import {
 } from "lexical";
 import {
   useCallback as useCallback29,
-  useEffect as useEffect40,
-  useMemo as useMemo23,
-  useRef as useRef17,
+  useEffect as useEffect41,
+  useMemo as useMemo22,
+  useRef as useRef18,
   useState as useState38
 } from "react";
 import { createPortal as createPortal11 } from "react-dom";
-import { Fragment as Fragment16, jsx as jsx45, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx45, jsxs as jsxs33 } from "react/jsx-runtime";
 var MIN_ROW_HEIGHT = 33;
 var MIN_COLUMN_WIDTH = 92;
 var ACTIVE_RESIZER_COLOR = "#76b6ff";
 function TableCellResizer({ editor }) {
-  const targetRef = useRef17(null);
-  const resizerRef = useRef17(null);
-  const tableRectRef = useRef17(null);
+  const targetRef = useRef18(null);
+  const resizerRef = useRef18(null);
+  const tableRectRef = useRef18(null);
   const [hasTable, setHasTable] = useState38(false);
-  const pointerStartPosRef = useRef17(null);
+  const pointerStartPosRef = useRef18(null);
   const [pointerCurrentPos, updatePointerCurrentPos] = useState38(null);
   const [activeCell, updateActiveCell] = useState38(null);
   const [draggingDirection, updateDraggingDirection] = useState38(null);
@@ -14591,7 +14569,7 @@ function TableCellResizer({ editor }) {
     pointerStartPosRef.current = null;
     tableRectRef.current = null;
   }, []);
-  useEffect40(() => {
+  useEffect41(() => {
     const tableKeys = /* @__PURE__ */ new Set();
     return mergeRegister13(
       editor.registerMutationListener(TableNode3, (nodeMutations) => {
@@ -14615,7 +14593,7 @@ function TableCellResizer({ editor }) {
       })
     );
   }, [editor]);
-  useEffect40(() => {
+  useEffect41(() => {
     if (!hasTable) {
       return;
     }
@@ -14904,7 +14882,7 @@ function TableCellResizer({ editor }) {
     }
   }, [draggingDirection]);
   const resizerStyles = getResizers();
-  return /* @__PURE__ */ jsx45("div", { ref: resizerRef, children: activeCell != null && /* @__PURE__ */ jsxs33(Fragment16, { children: [
+  return /* @__PURE__ */ jsx45("div", { ref: resizerRef, children: activeCell != null && /* @__PURE__ */ jsxs33(Fragment19, { children: [
     /* @__PURE__ */ jsx45(
       "div",
       {
@@ -14928,7 +14906,7 @@ function TableCellResizer({ editor }) {
 function TableCellResizerPlugin() {
   const [editor] = useLexicalComposerContext44();
   const isEditable = useLexicalEditable8();
-  return useMemo23(
+  return useMemo22(
     () => isEditable ? createPortal11(/* @__PURE__ */ jsx45(TableCellResizer, { editor }), document.body) : null,
     [editor, isEditable]
   );
@@ -14964,7 +14942,7 @@ import {
   $getSiblingCaret as $getSiblingCaret2,
   isHTMLElement as isHTMLElement5
 } from "lexical";
-import { useEffect as useEffect41, useRef as useRef18, useState as useState39 } from "react";
+import { useEffect as useEffect42, useRef as useRef19, useState as useState39 } from "react";
 import { createPortal as createPortal12 } from "react-dom";
 
 // src/utils/getThemeSelector.ts
@@ -14979,7 +14957,7 @@ function getThemeSelector(getTheme, name) {
 }
 
 // src/plugins/TableHoverActionsV2Plugin/index.tsx
-import { Fragment as Fragment17, jsx as jsx46, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx46, jsxs as jsxs34 } from "react/jsx-runtime";
 var INDICATOR_SIZE_PX = 18;
 var SIDE_INDICATOR_SIZE_PX = 18;
 var TOP_BUTTON_OVERHANG = INDICATOR_SIZE_PX / 2;
@@ -15070,21 +15048,21 @@ function TableHoverActionsV2({
   const isEditable = useLexicalEditable9();
   const [isVisible, setIsVisible] = useState39(false);
   const [isLeftVisible, setIsLeftVisible] = useState39(false);
-  const virtualRef = useRef18({
+  const virtualRef = useRef19({
     getBoundingClientRect: () => new DOMRect()
   });
-  const leftVirtualRef = useRef18({
+  const leftVirtualRef = useRef19({
     getBoundingClientRect: () => new DOMRect()
   });
-  const floatingElemRef = useRef18(null);
-  const leftFloatingElemRef = useRef18(null);
-  const dragHandleRef = useRef18(null);
-  const hoveredLeftCellRef = useRef18(null);
-  const hoveredTopCellRef = useRef18(null);
-  const handleMouseLeaveRef = useRef18(
+  const floatingElemRef = useRef19(null);
+  const leftFloatingElemRef = useRef19(null);
+  const dragHandleRef = useRef19(null);
+  const hoveredLeftCellRef = useRef19(null);
+  const hoveredTopCellRef = useRef19(null);
+  const handleMouseLeaveRef = useRef19(
     null
   );
-  const dropIndicatorCleanupRef = useRef18([]);
+  const dropIndicatorCleanupRef = useRef19([]);
   const [hoveredTable, setHoveredTable] = useState39(
     null
   );
@@ -15119,7 +15097,7 @@ function TableHoverActionsV2({
     strategy: "fixed",
     whileElementsMounted: autoUpdate
   });
-  useEffect41(() => {
+  useEffect42(() => {
     if (!isEditable) {
       return;
     }
@@ -15186,7 +15164,7 @@ function TableHoverActionsV2({
       setIsLeftVisible(false);
     };
   }, [anchorElem, getTheme, isEditable, leftRefs, refs, update, updateLeft]);
-  useEffect41(() => {
+  useEffect42(() => {
     const handleMouseLeave = (event) => {
       const nextTarget = event.relatedTarget;
       if (nextTarget && floatingElemRef.current && floatingElemRef.current.contains(nextTarget)) {
@@ -15211,7 +15189,7 @@ function TableHoverActionsV2({
       }
     });
   }, [editor]);
-  useEffect41(() => {
+  useEffect42(() => {
     if (!hoveredTable) {
       setCanReorder(false);
       return;
@@ -15228,7 +15206,7 @@ function TableHoverActionsV2({
       { editor }
     );
   }, [editor, hoveredTable]);
-  useEffect41(() => {
+  useEffect42(() => {
     const handle = dragHandleRef.current;
     const tableElement = hoveredTable;
     const columnIndex = hoveredColumnIndex;
@@ -15247,7 +15225,7 @@ function TableHoverActionsV2({
     });
     return cleanup;
   }, [canReorder, hoveredColumnIndex, hoveredTable]);
-  useEffect41(() => {
+  useEffect42(() => {
     dropIndicatorCleanupRef.current.forEach((cleanup) => cleanup());
     dropIndicatorCleanupRef.current = [];
     if (!hoveredTable || !canReorder) {
@@ -15412,7 +15390,7 @@ function TableHoverActionsV2({
       insertionCaret?.splice(0, sortableRows);
     });
   };
-  return /* @__PURE__ */ jsxs34(Fragment17, { children: [
+  return /* @__PURE__ */ jsxs34(Fragment20, { children: [
     /* @__PURE__ */ jsxs34(
       "div",
       {
@@ -15517,7 +15495,7 @@ function TableHoverActionsV2Plugin({
 // src/plugins/TableOfContentsPlugin/index.tsx
 import { useLexicalComposerContext as useLexicalComposerContext46 } from "@lexical/react/LexicalComposerContext";
 import { TableOfContentsPlugin as LexicalTableOfContentsPlugin } from "@lexical/react/LexicalTableOfContentsPlugin";
-import { useEffect as useEffect42, useRef as useRef19, useState as useState40 } from "react";
+import { useEffect as useEffect43, useRef as useRef20, useState as useState40 } from "react";
 import { jsx as jsx47, jsxs as jsxs35 } from "react/jsx-runtime";
 var MARGIN_ABOVE_EDITOR = 624;
 var HEADING_WIDTH = 9;
@@ -15544,7 +15522,7 @@ function TableOfContentsList({
   tableOfContents
 }) {
   const [selectedKey, setSelectedKey] = useState40("");
-  const selectedIndex = useRef19(0);
+  const selectedIndex = useRef20(0);
   const [editor] = useLexicalComposerContext46();
   function scrollToNode(key, currIndex) {
     editor.getEditorState().read(() => {
@@ -15556,7 +15534,7 @@ function TableOfContentsList({
       }
     });
   }
-  useEffect42(() => {
+  useEffect43(() => {
     function scrollCallback() {
       if (tableOfContents.length !== 0 && selectedIndex.current < tableOfContents.length - 1) {
         let currentHeading = editor.getElementByKey(
@@ -15655,7 +15633,7 @@ function TableOfContentsPlugin() {
 
 // src/plugins/TableScrollShadowPlugin/index.tsx
 import { useLexicalComposerContext as useLexicalComposerContext47 } from "@lexical/react/LexicalComposerContext";
-import { useEffect as useEffect43 } from "react";
+import { useEffect as useEffect44 } from "react";
 var SCROLLABLE_WRAPPER_CLASS = "PlaygroundEditorTheme__tableScrollableWrapper";
 var HAS_SCROLL_RIGHT_CLASS = "PlaygroundEditorTheme__tableScrollRight";
 var HAS_SCROLL_LEFT_CLASS = "PlaygroundEditorTheme__tableScrollLeft";
@@ -15679,7 +15657,7 @@ function updateTableScrollState(element) {
 }
 function TableScrollShadowPlugin() {
   const [editor] = useLexicalComposerContext47();
-  useEffect43(() => {
+  useEffect44(() => {
     const editorElement = editor.getRootElement();
     if (!editorElement) {
       return;
@@ -15809,7 +15787,7 @@ import {
   SKIP_SELECTION_FOCUS_TAG as SKIP_SELECTION_FOCUS_TAG2,
   UNDO_COMMAND as UNDO_COMMAND2
 } from "lexical";
-import { useCallback as useCallback30, useEffect as useEffect45, useState as useState42 } from "react";
+import { useCallback as useCallback30, useEffect as useEffect46, useState as useState42 } from "react";
 
 // src/ui/DropdownColorPicker.tsx
 import { jsx as jsx48 } from "react/jsx-runtime";
@@ -15833,7 +15811,7 @@ function DropdownColorPicker({
 
 // src/plugins/ToolbarPlugin/fontSize.tsx
 import * as React3 from "react";
-import { Fragment as Fragment18, jsx as jsx49, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx49, jsxs as jsxs36 } from "react/jsx-runtime";
 function parseFontSize(input) {
   const match = input.match(/^(\d+(?:\.\d+)?)(px|pt)$/);
   return match ? [Number(match[1]), match[2]] : null;
@@ -15903,7 +15881,7 @@ function FontSize({
   React3.useEffect(() => {
     setInputValue(selectionFontSize);
   }, [selectionFontSize]);
-  return /* @__PURE__ */ jsxs36(Fragment18, { children: [
+  return /* @__PURE__ */ jsxs36(Fragment21, { children: [
     /* @__PURE__ */ jsx49(
       "button",
       {
@@ -15962,7 +15940,7 @@ function FontSize({
 }
 
 // src/plugins/ToolbarPlugin/index.tsx
-import { Fragment as Fragment19, jsx as jsx50, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx50, jsxs as jsxs37 } from "react/jsx-runtime";
 var CODE_LANGUAGE_OPTIONS_PRISM = getCodeLanguageOptionsPrism().filter(
   (option) => [
     "c",
@@ -16618,7 +16596,7 @@ function ToolbarPlugin({
     $handleHeadingNode,
     $handleCodeNode
   ]);
-  useEffect45(() => {
+  useEffect46(() => {
     return editor.registerCommand(
       SELECTION_CHANGE_COMMAND5,
       (_payload, newEditor) => {
@@ -16629,7 +16607,7 @@ function ToolbarPlugin({
       COMMAND_PRIORITY_CRITICAL3
     );
   }, [editor, $updateToolbar, setActiveEditor]);
-  useEffect45(() => {
+  useEffect46(() => {
     activeEditor.getEditorState().read(
       () => {
         $updateToolbar();
@@ -16637,7 +16615,7 @@ function ToolbarPlugin({
       { editor: activeEditor }
     );
   }, [activeEditor, $updateToolbar]);
-  useEffect45(() => {
+  useEffect46(() => {
     return mergeRegister14(
       editor.registerEditableListener((editable) => {
         setIsEditable(editable);
@@ -16768,7 +16746,7 @@ function ToolbarPlugin({
       }
     ),
     /* @__PURE__ */ jsx50(Divider, {}),
-    toolbarState.blockType in blockTypeToBlockName && activeEditor === editor && /* @__PURE__ */ jsxs37(Fragment19, { children: [
+    toolbarState.blockType in blockTypeToBlockName && activeEditor === editor && /* @__PURE__ */ jsxs37(Fragment22, { children: [
       /* @__PURE__ */ jsx50(
         BlockFormatDropDown,
         {
@@ -16780,7 +16758,7 @@ function ToolbarPlugin({
       ),
       /* @__PURE__ */ jsx50(Divider, {})
     ] }),
-    toolbarState.blockType === "code" && isCodeHighlighted ? /* @__PURE__ */ jsxs37(Fragment19, { children: [
+    toolbarState.blockType === "code" && isCodeHighlighted ? /* @__PURE__ */ jsxs37(Fragment22, { children: [
       !isCodeShiki && /* @__PURE__ */ jsx50(
         DropDown,
         {
@@ -16805,7 +16783,7 @@ function ToolbarPlugin({
           })
         }
       ),
-      isCodeShiki && /* @__PURE__ */ jsxs37(Fragment19, { children: [
+      isCodeShiki && /* @__PURE__ */ jsxs37(Fragment22, { children: [
         /* @__PURE__ */ jsx50(
           DropDown,
           {
@@ -16855,7 +16833,7 @@ function ToolbarPlugin({
           }
         )
       ] })
-    ] }) : /* @__PURE__ */ jsxs37(Fragment19, { children: [
+    ] }) : /* @__PURE__ */ jsxs37(Fragment22, { children: [
       /* @__PURE__ */ jsx50(
         FontDropDown,
         {
@@ -17098,7 +17076,7 @@ function ToolbarPlugin({
           ]
         }
       ),
-      canViewerSeeInsertDropdown && /* @__PURE__ */ jsxs37(Fragment19, { children: [
+      canViewerSeeInsertDropdown && /* @__PURE__ */ jsxs37(Fragment22, { children: [
         /* @__PURE__ */ jsx50(Divider, {}),
         /* @__PURE__ */ jsxs37(
           DropDown,
@@ -17420,10 +17398,10 @@ function ToolbarPlugin({
 
 // src/plugins/StickyPlugin/index.ts
 import { useLexicalComposerContext as useLexicalComposerContext48 } from "@lexical/react/LexicalComposerContext";
-import { useEffect as useEffect46 } from "react";
+import { useEffect as useEffect47 } from "react";
 function StickyPlugin() {
   const [editor] = useLexicalComposerContext48();
-  useEffect46(() => {
+  useEffect47(() => {
     if (!editor.hasNodes([StickyNode])) {
       throw new Error("StickyPlugin: StickyNode not registered on editor");
     }
@@ -17432,7 +17410,7 @@ function StickyPlugin() {
 }
 
 // src/Editor.tsx
-import { Fragment as Fragment20, jsx as jsx51, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx51, jsxs as jsxs38 } from "react/jsx-runtime";
 function Editor({ placeholder: placeholderProp, maxLength }) {
   const { historyState } = useSharedHistoryContext();
   const {
@@ -17471,7 +17449,7 @@ function Editor({ placeholder: placeholderProp, maxLength }) {
       setFloatingAnchorElem(_floatingAnchorElem);
     }
   };
-  useEffect47(() => {
+  useEffect48(() => {
     const updateViewPortWidth = () => {
       const isNextSmallWidthViewport = CAN_USE_DOM && window.matchMedia("(max-width: 1025px)").matches;
       if (isNextSmallWidthViewport !== isSmallWidthViewport) {
@@ -17484,7 +17462,7 @@ function Editor({ placeholder: placeholderProp, maxLength }) {
       window.removeEventListener("resize", updateViewPortWidth);
     };
   }, [isSmallWidthViewport]);
-  return /* @__PURE__ */ jsxs38(Fragment20, { children: [
+  return /* @__PURE__ */ jsxs38(Fragment23, { children: [
     isRichText && /* @__PURE__ */ jsx51(
       ToolbarPlugin,
       {
@@ -17521,7 +17499,7 @@ function Editor({ placeholder: placeholderProp, maxLength }) {
           /* @__PURE__ */ jsx51(LexicalAutoLinkPlugin, {}),
           /* @__PURE__ */ jsx51(DateTimePlugin, {}),
           /* @__PURE__ */ jsx51(CommentPlugin, {}),
-          isRichText ? /* @__PURE__ */ jsxs38(Fragment20, { children: [
+          isRichText ? /* @__PURE__ */ jsxs38(Fragment23, { children: [
             /* @__PURE__ */ jsx51(HistoryPlugin2, { externalHistoryState: historyState }),
             /* @__PURE__ */ jsx51(
               RichTextPlugin,
@@ -17578,7 +17556,7 @@ function Editor({ placeholder: placeholderProp, maxLength }) {
             /* @__PURE__ */ jsx51(RevisionPlugin, {}),
             /* @__PURE__ */ jsx51(TextCardsPlugin, {}),
             /* @__PURE__ */ jsx51(QuestionsCardsPlugin, {}),
-            floatingAnchorElem && /* @__PURE__ */ jsxs38(Fragment20, { children: [
+            floatingAnchorElem && /* @__PURE__ */ jsxs38(Fragment23, { children: [
               /* @__PURE__ */ jsx51(
                 FloatingLinkEditorPlugin,
                 {
@@ -17595,7 +17573,7 @@ function Editor({ placeholder: placeholderProp, maxLength }) {
                 }
               )
             ] }),
-            floatingAnchorElem && !isSmallWidthViewport && /* @__PURE__ */ jsxs38(Fragment20, { children: [
+            floatingAnchorElem && !isSmallWidthViewport && /* @__PURE__ */ jsxs38(Fragment23, { children: [
               /* @__PURE__ */ jsx51(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }),
               /* @__PURE__ */ jsx51(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem }),
               /* @__PURE__ */ jsx51(TableHoverActionsV2Plugin, { anchorElem: floatingAnchorElem }),
@@ -17607,7 +17585,7 @@ function Editor({ placeholder: placeholderProp, maxLength }) {
                 }
               )
             ] })
-          ] }) : /* @__PURE__ */ jsxs38(Fragment20, { children: [
+          ] }) : /* @__PURE__ */ jsxs38(Fragment23, { children: [
             /* @__PURE__ */ jsx51(
               PlainTextPlugin2,
               {
@@ -17747,6 +17725,14 @@ function hasComplexStyles(el) {
   return COMPLEX_STYLE_PATTERNS.some((re) => re.test(style));
 }
 var DATA_ATTR7 = "data-lexical-html-block";
+var LEXICAL_NODE_ATTRS = [
+  "data-lexical-notes",
+  "data-lexical-terminology",
+  "data-lexical-revision",
+  "data-lexical-text-cards",
+  "data-lexical-questions-cards",
+  "data-lexical-html-block"
+];
 function preprocessHtmlForImport(doc) {
   processChildren(doc.body);
 }
@@ -17754,6 +17740,7 @@ function processChildren(parent) {
   const children = Array.from(parent.children);
   for (const child of children) {
     if (child.hasAttribute(DATA_ATTR7)) continue;
+    if (LEXICAL_NODE_ATTRS.some((attr) => child.hasAttribute(attr))) continue;
     const tag = child.tagName;
     if (tag === "DIV") {
       if (hasComplexStyles(child)) {
@@ -17795,10 +17782,10 @@ function HtmlPlugin({
   debounceMs = 300
 }) {
   const [editor] = useLexicalComposerContext50();
-  const lastSyncedValue = useRef20(null);
-  const hasUserEdited = useRef20(false);
-  const debounceTimer = useRef20(null);
-  useEffect48(() => {
+  const lastSyncedValue = useRef21(null);
+  const hasUserEdited = useRef21(false);
+  const debounceTimer = useRef21(null);
+  useEffect49(() => {
     return editor.registerCommand(
       FOCUS_COMMAND2,
       () => {
@@ -17820,7 +17807,7 @@ function HtmlPlugin({
       COMMAND_PRIORITY_LOW11
     );
   }, [editor]);
-  useEffect48(() => {
+  useEffect49(() => {
     if (value === lastSyncedValue.current) {
       return;
     }
@@ -17839,9 +17826,9 @@ function HtmlPlugin({
         const parser = new DOMParser();
         const dom = parser.parseFromString(value, "text/html");
         preprocessHtmlForImport(dom);
-        const nodes = $generateNodesFromDOM(editor, dom);
+        const nodes = $generateNodesFromDOM2(editor, dom);
         root.clear();
-        $insertNodes6(nodes);
+        $insertNodes7(nodes);
       },
       // Prevent scroll-to-top when loading content inside a Sheet
       { tag: "historic" }
@@ -17871,7 +17858,7 @@ function HtmlPlugin({
     },
     [editor, onChange, debounceMs]
   );
-  useEffect48(() => {
+  useEffect49(() => {
     return () => {
       if (debounceTimer.current) {
         clearTimeout(debounceTimer.current);
@@ -17882,7 +17869,7 @@ function HtmlPlugin({
 }
 function ReadOnlyController({ readOnly }) {
   const [editor] = useLexicalComposerContext50();
-  useEffect48(() => {
+  useEffect49(() => {
     editor.setEditable(!readOnly);
   }, [editor, readOnly]);
   return null;
@@ -17905,6 +17892,51 @@ function LexicalEditor20({
     theme: PlaygroundEditorTheme_default,
     onError: (error) => {
       console.error("[LexicalEditor]", error);
+    },
+    html: {
+      // Custom TextNode export: preserve inline style (e.g. color) in the HTML output.
+      // Lexical's default TextNode.exportDOM() does not write __style to the element,
+      // so colored text is lost when saving. This override wraps styled text in a
+      // <span style="..."> so the color survives save/reload cycles.
+      export: /* @__PURE__ */ new Map([
+        [TextNode6, (editor, node) => {
+          const { element } = node.exportDOM(editor);
+          const style2 = node.getStyle();
+          if (element && style2) {
+            const el = element;
+            style2.split(";").forEach((decl) => {
+              const [prop, val] = decl.split(":").map((s) => s.trim());
+              if (prop && val) el.style.setProperty(prop, val);
+            });
+          }
+          return { element };
+        }]
+      ]),
+      // Custom import: read inline color style from span/b/strong/i/u back into TextNode.setStyle().
+      // Lexical's default converters only read bold/italic/underline formats, not color.
+      import: ["span", "b", "strong", "i", "u", "s"].reduce((acc, tag) => {
+        acc[tag] = (domNode) => {
+          const style2 = domNode.style?.cssText;
+          if (!style2) return null;
+          return {
+            conversion: (node) => ({
+              forChild: (lexicalNode) => {
+                if ($isTextNode8(lexicalNode)) {
+                  const filtered = node.style.cssText.split(";").map((d) => d.trim()).filter((d) => d && !/^white-space\s*:/i.test(d)).join("; ");
+                  if (filtered) {
+                    const existing = lexicalNode.getStyle() || "";
+                    lexicalNode.setStyle(existing ? existing + "; " + filtered : filtered);
+                  }
+                }
+                return lexicalNode;
+              },
+              node: null
+            }),
+            priority: 2
+          };
+        };
+        return acc;
+      }, {})
     }
   };
   const style = isFullscreen ? {
@@ -17919,7 +17951,7 @@ function LexicalEditor20({
     position: "relative",
     overflow: "auto"
   };
-  useEffect48(() => {
+  useEffect49(() => {
     if (!isFullscreen) return;
     const handleEsc = (e) => {
       if (e.key === "Escape") setIsFullscreen(false);
@@ -17931,11 +17963,11 @@ function LexicalEditor20({
     () => setIsFullscreen((f) => !f),
     []
   );
-  const fullscreenValue = useMemo24(
+  const fullscreenValue = useMemo23(
     () => ({ isFullscreen, toggleFullscreen }),
     [isFullscreen, toggleFullscreen]
   );
-  const collabContextValue = useMemo24(
+  const collabContextValue = useMemo23(
     () => ({
       color: "#000",
       isCollabActive: false,