@baasix/lexical 0.0.10 → 0.0.11

package/dist/index.js

@@ -57,11 +57,11 @@ import "./chunk-PZ5AY32C.js";
 
 // src/LexicalEditor.tsx
 import {
-  useCallback as useCallback30,
+  useCallback as useCallback31,
   useEffect as useEffect48,
   useMemo as useMemo24,
-  useRef as useRef18,
-  useState as useState43
+  useRef as useRef20,
+  useState as useState44
 } from "react";
 import { LexicalComposer as LexicalComposer2 } from "@lexical/react/LexicalComposer";
 import { OnChangePlugin as OnChangePlugin2 } from "@lexical/react/LexicalOnChangePlugin";
@@ -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 useState42 } from "react";
+import { useEffect as useEffect47, 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 useCallback22, useMemo as useMemo18, useState as useState30 } from "react";
+import { useCallback as useCallback23, useMemo as useMemo18, useState as useState31 } from "react";
 import * as ReactDOM2 from "react-dom";
 
 // src/plugins/DateTimePlugin/index.tsx
@@ -7646,7 +7646,7 @@ function PageBreakPlugin() {
 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, useState as useState18 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect23, useMemo as useMemo8, useRef as useRef9, useState as useState18 } from "react";
 
 // src/nodes/NotesNode.tsx
 import { $getNodeByKey as $getNodeByKey4 } from "lexical";
@@ -7942,34 +7942,68 @@ function convertNotes(input) {
     const doc = parser.parseFromString(input, "text/html");
     html += Array.from(doc.body.childNodes).map(processNode).join("");
   } else {
-    const paragraphs = input.split(/\n\s*\n/);
     const style = CARD_STYLES.notes;
-    paragraphs.forEach((p) => {
-      p = p.trim();
-      if (!p) return;
-      if (p.match(/^[-•*]/) || p.match(/^\d+\./)) {
-        const items = p.split(/\n/).map((l) => l.trim()).filter((l) => l);
-        const isOrdered = p.match(/^\d+\./);
-        const tag = isOrdered ? "ol" : "ul";
-        html += `  <${tag} style="margin-left: 20px; padding-left: 20px; margin-bottom: 15px;">
+    const lines = input.split("\n");
+    let inList = null;
+    const closeList = () => {
+      if (inList) {
+        html += `  </${inList}>
 `;
-        items.forEach((item) => {
-          const cleanItem = item.replace(/^([-•*]|\d+\.)\s*/, "");
-          if (cleanItem) {
-            html += `    <li style="margin-bottom: 5px;">${cleanItem}</li>
+        inList = null;
+      }
+    };
+    const isBullet = (line) => /^[\s]*[-•*]\s/.test(line);
+    const isOrdered = (line) => /^[\s]*\d+[.)]\s/.test(line);
+    const isHeading = (line) => {
+      const t = line.trim();
+      if (t.length > 120 || t.length < 2) return false;
+      if (t.endsWith(".") || t.endsWith(",")) return false;
+      if (isBullet(t) || isOrdered(t)) return false;
+      if (t.endsWith(":")) return true;
+      if (t.length < 80 && !/[.!?,;]$/.test(t)) return true;
+      return false;
+    };
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i];
+      const trimmed = line.trim();
+      if (!trimmed) {
+        closeList();
+        continue;
+      }
+      if (isBullet(trimmed)) {
+        if (inList !== "ul") {
+          closeList();
+          inList = "ul";
+          html += `  <ul style="margin-left: 20px; padding-left: 20px; margin-bottom: 15px;">
 `;
-          }
-        });
-        html += `  </${tag}>
+        }
+        const cleanItem = trimmed.replace(/^[-•*]\s*/, "");
+        html += `    <li style="margin-bottom: 5px;">${cleanItem}</li>
 `;
-      } else if (p.length < 100 && !p.endsWith(".")) {
-        html += `  <h3 style="color: ${style.headingColor}; border-bottom: 2px solid ${style.headingBorder}; padding-bottom: 5px; margin-top: 25px; margin-bottom: 15px;">${p}</h3>
+        continue;
+      }
+      if (isOrdered(trimmed)) {
+        if (inList !== "ol") {
+          closeList();
+          inList = "ol";
+          html += `  <ol style="margin-left: 20px; padding-left: 20px; margin-bottom: 15px;">
 `;
-      } else {
-        html += `  <p style="margin-bottom: 15px;">${p}</p>
+        }
+        const cleanItem = trimmed.replace(/^\d+[.)]\s*/, "");
+        html += `    <li style="margin-bottom: 5px;">${cleanItem}</li>
 `;
+        continue;
       }
-    });
+      closeList();
+      if (isHeading(trimmed)) {
+        html += `  <h3 style="color: ${style.headingColor}; border-bottom: 2px solid ${style.headingBorder}; padding-bottom: 5px; margin-top: 25px; margin-bottom: 15px;">${trimmed}</h3>
+`;
+        continue;
+      }
+      html += `  <p style="margin-bottom: 15px;">${trimmed}</p>
+`;
+    }
+    closeList();
   }
   html += "</div>";
   return compactHtml(html);
@@ -8133,7 +8167,7 @@ function convertTextCards(input) {
         const c = styles[key];
         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;">${content}</p>
+    <p style="margin: 0; font-size: 13px;">${nl2br(content)}</p>
   </div>
 `;
       });
@@ -8239,8 +8273,8 @@ var QUESTIONS_CARD_GRID_SECTIONS = [
   "tips"
 ];
 var QUESTIONS_SECTION_PATTERNS = {
-  question: /^Q\d+\./i,
-  answer: /^Answer:\s*$/i,
+  question: /^(\d+\.\s*)?Q(uestion|\d+)\s*[\s.:]/i,
+  answer: /^(Model\s+)?Answer:\s*/i,
   rubric: /^(\d+\.\s*)?MARKING\s+RUBRIC/i,
   mnemonics: /^(\d+\.\s*)?MNEMONIC/i,
   examiner: /^(\d+\.\s*)?EXAMINER/i,
@@ -8251,103 +8285,244 @@ var QUESTIONS_SECTION_PATTERNS = {
   variations: /^(\d+\.\s*)?EXAM\s+VARIATION/i,
   tips: /^(\d+\.\s*)?(HIGH-YIELD|EXAM\s+TIP)/i
 };
+function formatMcqQuestion(text) {
+  const optionMatch = text.match(/\s+[a-eA-E][)]\s/);
+  if (!optionMatch || optionMatch.index === void 0) return text;
+  const questionPart = text.substring(0, optionMatch.index).trim();
+  const optionsPart = text.substring(optionMatch.index).trim();
+  const options = optionsPart.split(/(?=\s*[a-eA-E][)]\s)/).map((o) => o.trim()).filter(Boolean);
+  if (options.length < 2) return text;
+  let optionsHtml = '<div style="margin-top: 10px; display: flex; flex-direction: column; gap: 6px;">';
+  options.forEach((opt) => {
+    const letter = opt.charAt(0).toUpperCase();
+    const optText = opt.replace(/^[a-eA-E][)]\s*/, "").trim();
+    optionsHtml += `<div style="display: flex; align-items: baseline; gap: 8px;">
+      <span style="background: rgba(0,0,0,0.08); border-radius: 4px; padding: 2px 8px; font-weight: 600; font-size: 13px; min-width: 24px; text-align: center;">${letter}</span>
+      <span style="font-size: 14px;">${optText}</span>
+    </div>`;
+  });
+  optionsHtml += "</div>";
+  return `${questionPart}${optionsHtml}`;
+}
+function formatMcqAnswer(text) {
+  const match = text.match(/^([a-eA-E])[)]\s*/);
+  if (!match) return text;
+  const letter = match[1].toUpperCase();
+  const explanation = text.substring(match[0].length).trim();
+  return `<span style="background: rgba(76, 175, 80, 0.15); border: 1px solid rgba(76, 175, 80, 0.4); border-radius: 4px; padding: 2px 8px; font-weight: 700; font-size: 14px; margin-right: 8px;">${letter}</span> ${explanation}`;
+}
+function nl2br(text) {
+  return text.replace(/\n/g, "<br>");
+}
 function convertQuestionsCards(input) {
   if (!input.trim()) return "";
-  const sections = parseQuestionsInput(input);
+  const parsed = parseQuestionsInput(input);
   const styles = CARD_STYLES.questionsCards;
   let html = "";
-  if (sections.question) {
-    const c = styles.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} Question</h3>
-  <p style="margin-top: 8px; color: inherit;">${sections.question}</p>
+  parsed.qaPairs.forEach((qa, idx) => {
+    if (qa.question) {
+      const c = styles.question;
+      const qLabel = parsed.qaPairs.length > 1 ? `Question ${idx + 1}` : "Question";
+      const formattedQ = formatMcqQuestion(nl2br(qa.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;">${formattedQ}</div>
 </div>
 `;
-  }
-  if (sections.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;">
+    }
+    if (qa.answer) {
+      const c = styles.answer;
+      const formattedA = formatMcqAnswer(nl2br(qa.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>${sections.answer}</p>
+  <p>${formattedA}</p>
 </div>
 `;
-  }
-  const hasGridCards = QUESTIONS_CARD_GRID_SECTIONS.some((k) => sections[k]);
-  if (hasGridCards) {
-    html += `<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 20px;">
+    }
+    const qaSections = qa.sections || {};
+    const hasGridCards = QUESTIONS_CARD_GRID_SECTIONS.some((k) => qaSections[k]);
+    if (hasGridCards) {
+      html += `<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 8px; margin-bottom: 24px;">
 `;
-    QUESTIONS_CARD_GRID_SECTIONS.forEach((key) => {
-      const content = sections[key];
-      if (!content) return;
-      const c = styles[key];
-      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;">
+      QUESTIONS_CARD_GRID_SECTIONS.forEach((key) => {
+        const content = qaSections[key];
+        if (!content) return;
+        const c = styles[key];
+        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;">${content}</p>
+    <p style="margin: 0; font-size: 13px;">${nl2br(content)}</p>
   </div>
 `;
-    });
-    html += "</div>\n";
-  }
+      });
+      html += "</div>\n";
+    }
+  });
   return compactHtml(html);
 }
+var INLINE_ANSWER_PATTERNS = [
+  /\s+Correct\s+Answer:\s*/i,
+  /\s+Model\s+Answer:\s*/i
+];
+var MCQ_LINE_PATTERN = /^\d+[.)]\s+/;
 function parseQuestionsInput(input) {
   const lines = input.split("\n").filter((l) => l.trim());
-  const sections = {};
+  const result = { qaPairs: [] };
   let currentSection = null;
   let contentBuffer = [];
-  const flush = () => {
+  let currentQA = { question: "", answer: "", sections: {} };
+  let inQASection = null;
+  const flushQA = () => {
+    if (inQASection === "question") {
+      currentQA.question = contentBuffer.join("\n").trim();
+    } else if (inQASection === "answer") {
+      currentQA.answer = contentBuffer.join("\n").trim();
+    }
+    contentBuffer = [];
+  };
+  const flushSection = () => {
     if (currentSection && contentBuffer.length > 0) {
-      sections[currentSection] = contentBuffer.join(" ").trim();
+      currentQA.sections[currentSection] = contentBuffer.join("\n").trim();
     }
     contentBuffer = [];
   };
+  const pushCurrentQA = () => {
+    if (currentQA.question || currentQA.answer || Object.keys(currentQA.sections).length > 0) {
+      result.qaPairs.push({ ...currentQA, sections: { ...currentQA.sections } });
+      currentQA = { question: "", answer: "", sections: {} };
+    }
+  };
+  const trySplitInline = (line) => {
+    for (const pattern of INLINE_ANSWER_PATTERNS) {
+      const match = line.match(pattern);
+      if (match && match.index !== void 0) {
+        return {
+          question: line.substring(0, match.index).trim(),
+          answer: line.substring(match.index + match[0].length).trim()
+        };
+      }
+    }
+    return null;
+  };
   for (const line of lines) {
     const trimmed = line.trim();
+    if (QUESTIONS_SECTION_PATTERNS.question.test(trimmed)) {
+      if (inQASection) flushQA();
+      if (currentSection) {
+        flushSection();
+        currentSection = null;
+      }
+      pushCurrentQA();
+      const qText = trimmed.replace(/^(\d+\.\s*)?Q(uestion|\d+)\s*[\s.:]+/i, "").trim();
+      const inlineSplit = trySplitInline(qText);
+      if (inlineSplit) {
+        currentQA = { question: inlineSplit.question, answer: inlineSplit.answer, sections: {} };
+        inQASection = null;
+      } else {
+        inQASection = "question";
+        if (qText) contentBuffer.push(qText);
+      }
+      continue;
+    }
+    if (QUESTIONS_SECTION_PATTERNS.answer.test(trimmed)) {
+      if (inQASection) flushQA();
+      if (currentSection) {
+        flushSection();
+        currentSection = null;
+      }
+      inQASection = "answer";
+      const aText = trimmed.replace(/^(Model\s+)?Answer:\s*/i, "").trim();
+      if (aText) contentBuffer.push(aText);
+      continue;
+    }
+    if (MCQ_LINE_PATTERN.test(trimmed) && !QUESTIONS_SECTION_PATTERNS.question.test(trimmed)) {
+      const inlineSplit = trySplitInline(trimmed);
+      if (inlineSplit) {
+        if (inQASection) flushQA();
+        if (currentSection) {
+          flushSection();
+          currentSection = null;
+        }
+        pushCurrentQA();
+        const qText = inlineSplit.question.replace(/^\d+[.)]\s*/, "").trim();
+        currentQA = { question: qText, answer: inlineSplit.answer, sections: {} };
+        inQASection = null;
+        continue;
+      }
+    }
     let foundSection = false;
     for (const [key, pattern] of Object.entries(QUESTIONS_SECTION_PATTERNS)) {
+      if (key === "question" || key === "answer") continue;
       if (pattern.test(trimmed)) {
-        flush();
+        if (inQASection) {
+          flushQA();
+          inQASection = null;
+        }
+        if (currentSection) flushSection();
         currentSection = key;
         foundSection = true;
-        if (key === "question") {
-          const qText = trimmed.replace(/^Q\d+\.\s*/, "").trim();
-          if (qText) contentBuffer.push(qText);
-        }
         break;
       }
     }
     if (foundSection) continue;
-    if (currentSection) {
-      contentBuffer.push(trimmed);
-    }
+    contentBuffer.push(trimmed);
   }
-  flush();
-  return sections;
+  if (inQASection) flushQA();
+  if (currentSection) flushSection();
+  pushCurrentQA();
+  return result;
 }
 function parseQuestionsCardsHtml(html) {
   const parser = new DOMParser();
   const doc = parser.parseFromString(html, "text/html");
   const result = {
-    question: "",
-    answer: "",
-    sections: []
+    qaPairs: []
   };
   const styles = CARD_STYLES.questionsCards;
   const gridEntries = QUESTIONS_CARD_GRID_SECTIONS.map((k) => ({ key: k, title: styles[k].title }));
+  let currentQA = null;
   const children = Array.from(doc.body.children);
   for (const el of children) {
     const h3 = el.querySelector("h3");
     if (!h3) continue;
     const h3Text = (h3.textContent || "").trim();
     if (h3Text.includes("Question")) {
+      if (currentQA) result.qaPairs.push(currentQA);
+      currentQA = { question: "", answer: "", sections: [] };
       const clone = el.cloneNode(true);
       clone.querySelector("h3")?.remove();
-      result.question = (clone.textContent || "").trim();
+      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();
+      }
     } else if (h3Text.includes("Answer")) {
+      if (!currentQA) currentQA = { question: "", answer: "", sections: [] };
       const clone = el.cloneNode(true);
       clone.querySelector("h3")?.remove();
-      result.answer = (clone.textContent || "").trim();
+      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();
+      }
     } else if (el.children.length > 1) {
+      if (!currentQA) currentQA = { question: "", answer: "", sections: [] };
       for (const card of Array.from(el.children)) {
         const cardH3 = card.querySelector("h3");
         if (!cardH3) continue;
@@ -8356,10 +8531,14 @@ function parseQuestionsCardsHtml(html) {
         const key = match ? match.key : "rubric";
         const clone = card.cloneNode(true);
         clone.querySelector("h3")?.remove();
-        result.sections.push({ key, content: (clone.textContent || "").trim() });
+        currentQA.sections.push({ key, content: (clone.textContent || "").trim() });
       }
     }
   }
+  if (currentQA) result.qaPairs.push(currentQA);
+  if (result.qaPairs.length === 0) {
+    result.qaPairs.push({ question: "", answer: "", sections: [] });
+  }
   return result;
 }
 
@@ -8569,27 +8748,95 @@ 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 {
+          }
+        }
+      }
+    }
+    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, "><"));
+  });
+}
 function InsertNotesDialog({
   activeEditor,
   onClose
 }) {
   const [input, setInput] = useState18("");
-  const preview = useMemo8(() => {
+  const [richHtml, setRichHtml] = useState18("");
+  const [isUploading, setIsUploading] = useState18(false);
+  const pasteAreaRef = useRef9(null);
+  let editorConfig = null;
+  try {
+    editorConfig = useEditorConfig();
+  } catch {
+  }
+  const handleRichPaste = 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);
+    }
+    if (pasteAreaRef.current) {
+      pasteAreaRef.current.innerHTML = '<span style="color: #9ca3af; pointer-events: none; user-select: none;">Paste from Word/Docs here (preserves formatting)</span>';
+    }
+  }, [editorConfig]);
+  const finalHtml = useMemo8(() => {
+    if (richHtml) return richHtml;
     if (!input.trim()) return "";
     return convertNotes(input);
-  }, [input]);
+  }, [input, richHtml]);
   const handleInsert = useCallback12(() => {
-    if (!preview) return;
-    activeEditor.dispatchCommand(INSERT_NOTES_COMMAND, preview);
+    if (!finalHtml) return;
+    activeEditor.dispatchCommand(INSERT_NOTES_COMMAND, finalHtml);
     onClose();
-  }, [activeEditor, preview, onClose]);
+  }, [activeEditor, finalHtml, onClose]);
   return /* @__PURE__ */ jsxs14("div", { style: { minWidth: 500 }, children: [
     /* @__PURE__ */ jsx24(
       "textarea",
       {
         value: input,
-        onChange: (e) => setInput(e.target.value),
-        placeholder: "Paste notes here...\nExample:\nSuperficial Fascia\nThe superficial fascia is a layer of loose...\n\nFunctions\n- Passageway for vessels\n- Insulation",
+        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,
@@ -8603,9 +8850,33 @@ function InsertNotesDialog({
         }
       }
     ),
-    preview && /* @__PURE__ */ jsxs14("div", { style: { marginBottom: 8, padding: 8, border: "1px solid #e5e7eb", borderRadius: 4, background: "#fafafa", maxHeight: 200, overflow: "auto" }, children: [
+    /* @__PURE__ */ jsx24(
+      "div",
+      {
+        ref: pasteAreaRef,
+        contentEditable: true,
+        onPaste: handleRichPaste,
+        onMouseDown: (e) => e.stopPropagation(),
+        style: {
+          width: "100%",
+          minHeight: 40,
+          padding: 8,
+          border: "2px dashed #93c5fd",
+          borderRadius: 4,
+          fontSize: 12,
+          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)" })
+      }
+    ),
+    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: preview } })
+      /* @__PURE__ */ jsx24("div", { dangerouslySetInnerHTML: { __html: finalHtml } })
     ] }),
     /* @__PURE__ */ jsxs14("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8 }, children: [
       /* @__PURE__ */ jsx24(
@@ -8622,9 +8893,9 @@ function InsertNotesDialog({
         {
           type: "button",
           onClick: handleInsert,
-          disabled: !preview,
-          style: { padding: "6px 16px", fontSize: 13, border: "none", borderRadius: 4, background: "#2563eb", color: "#fff", cursor: "pointer", opacity: preview ? 1 : 0.5 },
-          children: "Insert"
+          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 },
+          children: isUploading ? "Processing..." : "Insert"
         }
       )
     ] })
@@ -9310,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 useCallback18, useEffect as useEffect27, useMemo as useMemo14, useState as useState25 } from "react";
+import { useCallback as useCallback19, useEffect as useEffect27, useMemo as useMemo14, useState as useState26 } from "react";
 
 // src/nodes/TextCardsNode.tsx
 import { $getNodeByKey as $getNodeByKey7 } from "lexical";
@@ -9605,6 +9876,134 @@ function $isTextCardsNode(node) {
   return node instanceof TextCardsNode;
 }
 
+// src/utils/useRichPaste.ts
+import { useCallback as useCallback18, useRef as useRef10, useState as useState25 } from "react";
+function useRichPaste(onText, baasixClient, folder) {
+  const [images, setImages] = useState25([]);
+  const [isUploading, setIsUploading] = useState25(false);
+  const pasteAreaRef = useRef10(null);
+  const extractImages = useCallback18(
+    async (htmlStr) => {
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(htmlStr, "text/html");
+      const imgs = doc.querySelectorAll("img");
+      const newImages = [];
+      for (let i = 0; i < imgs.length; i++) {
+        const img2 = imgs[i];
+        const src = img2.getAttribute("src") || "";
+        const placeholder = `__IMG_${Date.now()}_${i}__`;
+        if (src.startsWith("data:") && baasixClient) {
+          try {
+            const resp = await fetch(src);
+            const blob = await resp.blob();
+            const ext = blob.type.split("/")[1] || "png";
+            const file = new File([blob], `pasted-image-${i}.${ext}`, { type: blob.type });
+            const uploadedUrl = await uploadImageToBaasix(baasixClient, file, folder);
+            newImages.push({ placeholder, src: uploadedUrl });
+          } catch {
+            newImages.push({ placeholder, src });
+          }
+        } else if (src) {
+          newImages.push({ placeholder, src });
+        }
+      }
+      return newImages;
+    },
+    [baasixClient, folder]
+  );
+  const insertPlaceholders = useCallback18(
+    (plainText, htmlStr, imgPlaceholders) => {
+      if (imgPlaceholders.length === 0) return plainText;
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(htmlStr, "text/html");
+      const segments = [];
+      let imgIdx = 0;
+      const blockTags = /* @__PURE__ */ new Set(["P", "DIV", "LI", "TR", "H1", "H2", "H3", "H4", "H5", "H6", "BLOCKQUOTE", "PRE", "TABLE"]);
+      const walkNode = (node) => {
+        if (node.nodeType === Node.TEXT_NODE) {
+          const t = (node.textContent || "").trim();
+          if (t) segments.push({ type: "text", text: t });
+          return;
+        }
+        if (node.nodeType !== Node.ELEMENT_NODE) return;
+        const el = node;
+        if (el.tagName === "IMG") {
+          segments.push({ type: "img", idx: imgIdx++ });
+          return;
+        }
+        for (const child of Array.from(el.childNodes)) walkNode(child);
+      };
+      walkNode(doc.body);
+      const textCountBeforeImg = [];
+      let textCount = 0;
+      for (const seg of segments) {
+        if (seg.type === "text") {
+          textCount++;
+        } else {
+          textCountBeforeImg.push(textCount);
+        }
+      }
+      const lines = plainText.split("\n");
+      const nonEmptyLineIndices = [];
+      for (let i = 0; i < lines.length; i++) {
+        if (lines[i].trim()) nonEmptyLineIndices.push(i);
+      }
+      for (let i = textCountBeforeImg.length - 1; i >= 0; i--) {
+        const placeholder = imgPlaceholders[i]?.placeholder;
+        if (!placeholder) continue;
+        const tc = textCountBeforeImg[i];
+        const lineIdx = tc > 0 && tc <= nonEmptyLineIndices.length ? nonEmptyLineIndices[tc - 1] : nonEmptyLineIndices.length > 0 ? nonEmptyLineIndices[nonEmptyLineIndices.length - 1] : lines.length - 1;
+        lines.splice(lineIdx + 1, 0, placeholder);
+        for (let j = 0; j < nonEmptyLineIndices.length; j++) {
+          if (nonEmptyLineIndices[j] > lineIdx) nonEmptyLineIndices[j]++;
+        }
+      }
+      return lines.join("\n");
+    },
+    []
+  );
+  const handlePaste = useCallback18(
+    async (e) => {
+      e.preventDefault();
+      const clipboardData = e.clipboardData;
+      const htmlData = clipboardData.getData("text/html");
+      const textData = clipboardData.getData("text/plain");
+      if (htmlData && htmlData.includes("<img")) {
+        setIsUploading(true);
+        try {
+          const processedImages = await extractImages(htmlData);
+          let text = textData || "";
+          text = insertPlaceholders(text, htmlData, processedImages);
+          onText(text);
+          setImages((prev) => [...prev, ...processedImages]);
+        } finally {
+          setIsUploading(false);
+        }
+      } else {
+        onText(textData || "");
+      }
+      if (pasteAreaRef.current) {
+        pasteAreaRef.current.textContent = "";
+      }
+    },
+    [extractImages, insertPlaceholders, onText]
+  );
+  const replaceImagePlaceholders = useCallback18(
+    (html) => {
+      let result = html;
+      images.forEach(({ placeholder, src }) => {
+        result = result.replace(
+          new RegExp(placeholder.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "g"),
+          `<img src="${src}" style="max-width: 100%; border-radius: 8px; margin: 8px 0;" />`
+        );
+      });
+      return result;
+    },
+    [images]
+  );
+  return { images, isUploading, pasteAreaRef, handlePaste, replaceImagePlaceholders };
+}
+
 // src/plugins/TextCardsPlugin/index.tsx
 import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
 var INSERT_TEXT_CARDS_COMMAND = createCommand17(
@@ -9632,16 +10031,27 @@ function InsertTextCardsDialog({
   activeEditor,
   onClose
 }) {
-  const [input, setInput] = useState25("");
-  const preview = useMemo14(() => {
+  const [input, setInput] = useState26("");
+  let editorConfig = null;
+  try {
+    editorConfig = useEditorConfig();
+  } catch {
+  }
+  const richPaste = useRichPaste(
+    (text) => setInput((prev) => prev ? prev + "\n" + text : text),
+    editorConfig?.baasixClient,
+    editorConfig?.folder
+  );
+  const finalHtml = useMemo14(() => {
     if (!input.trim()) return "";
-    return convertTextCards(input);
-  }, [input]);
-  const handleInsert = useCallback18(() => {
-    if (!preview) return;
-    activeEditor.dispatchCommand(INSERT_TEXT_CARDS_COMMAND, preview);
+    const html = convertTextCards(input);
+    return richPaste.replaceImagePlaceholders(html);
+  }, [input, richPaste]);
+  const handleInsert = useCallback19(() => {
+    if (!finalHtml) return;
+    activeEditor.dispatchCommand(INSERT_TEXT_CARDS_COMMAND, finalHtml);
     onClose();
-  }, [activeEditor, preview, onClose]);
+  }, [activeEditor, finalHtml, onClose]);
   return /* @__PURE__ */ jsxs21("div", { style: { minWidth: 500 }, children: [
     /* @__PURE__ */ jsx31(
       "textarea",
@@ -9668,7 +10078,7 @@ Critical Insight
 Pathology bridges clinical suspicion with molecular certainty...`,
         style: {
           width: "100%",
-          minHeight: 180,
+          minHeight: 150,
           fontFamily: "monospace",
           fontSize: 13,
           padding: 8,
@@ -9679,9 +10089,38 @@ Pathology bridges clinical suspicion with molecular certainty...`,
         }
       }
     ),
-    preview && /* @__PURE__ */ jsxs21("div", { style: { marginBottom: 8, padding: 8, border: "1px solid #e5e7eb", borderRadius: 4, background: "#fafafa", maxHeight: 250, overflow: "auto" }, children: [
+    /* @__PURE__ */ jsx31(
+      "div",
+      {
+        ref: richPaste.pasteAreaRef,
+        contentEditable: true,
+        onPaste: richPaste.handlePaste,
+        onMouseDown: (e) => e.stopPropagation(),
+        style: {
+          width: "100%",
+          minHeight: 40,
+          padding: 8,
+          border: "2px dashed #93c5fd",
+          borderRadius: 4,
+          fontSize: 12,
+          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" })
+      }
+    ),
+    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"
+    ] }),
+    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:" }),
-      /* @__PURE__ */ jsx31("div", { dangerouslySetInnerHTML: { __html: preview } })
+      /* @__PURE__ */ jsx31("div", { dangerouslySetInnerHTML: { __html: finalHtml } })
     ] }),
     /* @__PURE__ */ jsxs21("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8 }, children: [
       /* @__PURE__ */ jsx31(
@@ -9698,9 +10137,9 @@ Pathology bridges clinical suspicion with molecular certainty...`,
         {
           type: "button",
           onClick: handleInsert,
-          disabled: !preview,
-          style: { padding: "6px 16px", fontSize: 13, border: "none", borderRadius: 4, background: "#2563eb", color: "#fff", cursor: "pointer", opacity: preview ? 1 : 0.5 },
-          children: "Insert"
+          disabled: !finalHtml || richPaste.isUploading,
+          style: { padding: "6px 16px", fontSize: 13, border: "none", borderRadius: 4, background: "#2563eb", color: "#fff", cursor: "pointer", opacity: finalHtml && !richPaste.isUploading ? 1 : 0.5 },
+          children: richPaste.isUploading ? "Uploading..." : "Insert"
         }
       )
     ] })
@@ -9711,7 +10150,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 useCallback20, useEffect as useEffect28, useMemo as useMemo16, useState as useState27 } from "react";
+import { useCallback as useCallback21, useEffect as useEffect28, useMemo as useMemo16, useState as useState28 } from "react";
 
 // src/nodes/QuestionsCardsNode.tsx
 import { $getNodeByKey as $getNodeByKey8 } from "lexical";
@@ -9721,7 +10160,7 @@ import {
 } from "@lexical/react/LexicalDecoratorBlockNode";
 import { useLexicalComposerContext as useLexicalComposerContext29 } from "@lexical/react/LexicalComposerContext";
 import { useLexicalEditable as useLexicalEditable5 } from "@lexical/react/useLexicalEditable";
-import { useCallback as useCallback19, useMemo as useMemo15, useState as useState26 } from "react";
+import { useCallback as useCallback20, useMemo as useMemo15, useState as useState27 } from "react";
 import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
 var GRID_SECTION_KEYS = [
   "rubric",
@@ -9742,44 +10181,45 @@ function QuestionsCardsComponent({
 }) {
   const [editor] = useLexicalComposerContext29();
   const isEditable = useLexicalEditable5();
-  const [isEditing, setIsEditing] = useState26(false);
-  const [question, setQuestion] = useState26("");
-  const [answer, setAnswer] = useState26("");
-  const [sections, setSections] = useState26([]);
-  const openEditor = useCallback19(() => {
+  const [isEditing, setIsEditing] = useState27(false);
+  const [qaPairs, setQaPairs] = useState27([]);
+  const makeEmptyQA = () => ({
+    question: "",
+    answer: "",
+    sections: GRID_SECTION_KEYS.map((k) => ({ key: k, content: "" }))
+  });
+  const openEditor = useCallback20(() => {
     const parsed = parseQuestionsCardsHtml(html);
-    setQuestion(parsed.question);
-    setAnswer(parsed.answer);
-    const existing = parsed.sections;
-    const all = GRID_SECTION_KEYS.map((k) => {
-      const found = existing.find((s) => s.key === k);
-      return found || { key: k, content: "" };
+    const pairs = parsed.qaPairs.map((qa) => {
+      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 { question: qa.question, answer: qa.answer, sections: all };
     });
-    setSections(all);
+    setQaPairs(pairs.length > 0 ? pairs : [makeEmptyQA()]);
     setIsEditing(true);
   }, [html]);
   const preview = useMemo15(() => {
     if (!isEditing) return "";
-    const styles2 = CARD_STYLES.questionsCards;
+    const cStyles = CARD_STYLES.questionsCards;
     const lines = [];
-    if (question) {
-      lines.push(`Q1. ${question}`);
-    }
-    if (answer) {
-      lines.push("Answer:");
-      lines.push(answer);
-    }
-    sections.forEach((s) => {
-      const sStyle = styles2[s.key];
-      if (sStyle && "title" in sStyle && s.content) {
-        lines.push(sStyle.title);
-        lines.push(s.content);
-      }
+    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) : "";
-  }, [isEditing, question, answer, sections]);
-  const saveChanges = useCallback19(() => {
+  }, [isEditing, qaPairs]);
+  const saveChanges = useCallback20(() => {
     if (!preview) return;
     editor.update(() => {
       const node = $getNodeByKey8(nodeKey);
@@ -9789,13 +10229,23 @@ function QuestionsCardsComponent({
     });
     setIsEditing(false);
   }, [editor, nodeKey, preview]);
-  const cancelEdit = useCallback19(() => {
+  const cancelEdit = useCallback20(() => {
     setIsEditing(false);
   }, []);
-  const updateSection = useCallback19((idx, value) => {
-    setSections(
-      (prev) => prev.map((s, i) => i === idx ? { ...s, content: value } : s)
-    );
+  const updateQA = useCallback20((idx, field, value) => {
+    setQaPairs((prev) => prev.map((qa, i) => i === idx ? { ...qa, [field]: value } : qa));
+  }, []);
+  const addQAPair = useCallback20(() => {
+    setQaPairs((prev) => [...prev, makeEmptyQA()]);
+  }, []);
+  const removeQAPair = useCallback20((idx) => {
+    setQaPairs((prev) => prev.filter((_, i) => i !== idx));
+  }, []);
+  const updateSection = 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) };
+    }));
   }, []);
   const styles = CARD_STYLES.questionsCards;
   return /* @__PURE__ */ jsx32(BlockWithAlignableContents8, { className, format, nodeKey, children: /* @__PURE__ */ jsxs22("div", { style: { position: "relative" }, children: [
@@ -9849,52 +10299,78 @@ function QuestionsCardsComponent({
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsxs22("div", { style: { marginBottom: 6 }, children: [
-        /* @__PURE__ */ jsx32("label", { style: { fontSize: 11, color: "#1976d2", fontWeight: 600, display: "block", marginBottom: 2 }, children: "Question" }),
-        /* @__PURE__ */ jsx32(
-          "textarea",
-          {
-            placeholder: "Enter question text...",
-            value: question,
-            onChange: (e) => setQuestion(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" }
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs22("div", { style: { marginBottom: 6 }, children: [
-        /* @__PURE__ */ jsx32("label", { style: { fontSize: 11, color: "#666", fontWeight: 600, display: "block", marginBottom: 2 }, children: "Answer" }),
-        /* @__PURE__ */ jsx32(
-          "textarea",
-          {
-            placeholder: "Enter answer text...",
-            value: answer,
-            onChange: (e) => setAnswer(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" }
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs22("div", { style: { border: "1px solid #e5e7eb", borderRadius: 6, padding: 8, background: "#fff" }, children: [
-        /* @__PURE__ */ jsx32("span", { style: { fontSize: 11, color: "#666", fontWeight: 600, display: "block", marginBottom: 4 }, children: "Card Sections" }),
-        sections.map((section, idx) => {
-          const sStyle = styles[section.key];
-          const label = sStyle && "title" in sStyle ? sStyle.title : section.key;
-          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",
-              {
-                placeholder: `${label} content...`,
-                value: section.content,
-                onChange: (e) => updateSection(idx, 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" }
-              }
-            )
-          ] }, idx);
-        })
-      ] }),
+      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",
+            qIdx + 1
+          ] }),
+          qaPairs.length > 1 && /* @__PURE__ */ jsx32(
+            "button",
+            {
+              type: "button",
+              onClick: () => removeQAPair(qIdx),
+              style: { padding: "2px 6px", fontSize: 14, border: "1px solid #ddd", borderRadius: 4, background: "#fff", cursor: "pointer", color: "#e11d48" },
+              children: "\xD7"
+            }
+          )
+        ] }),
+        /* @__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",
+            {
+              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" }
+            }
+          )
+        ] }),
+        /* @__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",
+            {
+              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" }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs22("details", { style: { marginTop: 4 }, children: [
+          /* @__PURE__ */ jsx32("summary", { style: { fontSize: 11, color: "#666", fontWeight: 600, cursor: "pointer" }, children: "Card Sections" }),
+          /* @__PURE__ */ jsx32("div", { style: { marginTop: 4 }, children: qa.sections.map((section, sIdx) => {
+            const sStyle = styles[section.key];
+            const label = sStyle && "title" in sStyle ? sStyle.title : section.key;
+            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",
+                {
+                  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" }
+                }
+              )
+            ] }, 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 } })
@@ -10003,16 +10479,27 @@ function InsertQuestionsCardsDialog({
   activeEditor,
   onClose
 }) {
-  const [input, setInput] = useState27("");
-  const preview = useMemo16(() => {
+  const [input, setInput] = useState28("");
+  let editorConfig = null;
+  try {
+    editorConfig = useEditorConfig();
+  } catch {
+  }
+  const richPaste = useRichPaste(
+    (text) => setInput((prev) => prev ? prev + "\n" + text : text),
+    editorConfig?.baasixClient,
+    editorConfig?.folder
+  );
+  const finalHtml = useMemo16(() => {
     if (!input.trim()) return "";
-    return convertQuestionsCards(input);
-  }, [input]);
-  const handleInsert = useCallback20(() => {
-    if (!preview) return;
-    activeEditor.dispatchCommand(INSERT_QUESTIONS_CARDS_COMMAND, preview);
+    const html = convertQuestionsCards(input);
+    return richPaste.replaceImagePlaceholders(html);
+  }, [input, richPaste]);
+  const handleInsert = useCallback21(() => {
+    if (!finalHtml) return;
+    activeEditor.dispatchCommand(INSERT_QUESTIONS_CARDS_COMMAND, finalHtml);
     onClose();
-  }, [activeEditor, preview, onClose]);
+  }, [activeEditor, finalHtml, onClose]);
   return /* @__PURE__ */ jsxs23("div", { style: { minWidth: 500 }, children: [
     /* @__PURE__ */ jsx33(
       "textarea",
@@ -10021,28 +10508,18 @@ function InsertQuestionsCardsDialog({
         onChange: (e) => setInput(e.target.value),
         placeholder: `Paste question content here...
 Example:
-Q1. Describe the pathogenesis of tuberculosis.
+Q1 : Describe the pathogenesis of tuberculosis.
 
-Answer:
-Tuberculosis is caused by Mycobacterium tuberculosis...
+Answer: Tuberculosis is caused by Mycobacterium tuberculosis...
 
-MARKING RUBRIC
+1. MARKING RUBRIC
 Definition: 2 marks, Pathogenesis: 5 marks...
 
-MNEMONICS
-Remember TB pathogenesis with "IGRA"...
-
-EXAMINER'S PERSPECTIVE
-Examiners look for systematic approach...
-
-CLINICAL CORRELATION
-TB commonly presents with...
-
-HIGH-YIELD EXAM TIP
-Always mention Ghon complex...`,
+2. MNEMONICS
+Remember TB pathogenesis with "IGRA"...`,
         style: {
           width: "100%",
-          minHeight: 180,
+          minHeight: 150,
           fontFamily: "monospace",
           fontSize: 13,
           padding: 8,
@@ -10053,9 +10530,38 @@ Always mention Ghon complex...`,
         }
       }
     ),
-    preview && /* @__PURE__ */ jsxs23("div", { style: { marginBottom: 8, padding: 8, border: "1px solid #e5e7eb", borderRadius: 4, background: "#fafafa", maxHeight: 250, overflow: "auto" }, children: [
+    /* @__PURE__ */ jsx33(
+      "div",
+      {
+        ref: richPaste.pasteAreaRef,
+        contentEditable: true,
+        onPaste: richPaste.handlePaste,
+        onMouseDown: (e) => e.stopPropagation(),
+        style: {
+          width: "100%",
+          minHeight: 40,
+          padding: 8,
+          border: "2px dashed #93c5fd",
+          borderRadius: 4,
+          fontSize: 12,
+          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" })
+      }
+    ),
+    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"
+    ] }),
+    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:" }),
-      /* @__PURE__ */ jsx33("div", { dangerouslySetInnerHTML: { __html: preview } })
+      /* @__PURE__ */ jsx33("div", { dangerouslySetInnerHTML: { __html: finalHtml } })
     ] }),
     /* @__PURE__ */ jsxs23("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8 }, children: [
       /* @__PURE__ */ jsx33(
@@ -10072,9 +10578,9 @@ Always mention Ghon complex...`,
         {
           type: "button",
           onClick: handleInsert,
-          disabled: !preview,
-          style: { padding: "6px 16px", fontSize: 13, border: "none", borderRadius: 4, background: "#2563eb", color: "#fff", cursor: "pointer", opacity: preview ? 1 : 0.5 },
-          children: "Insert"
+          disabled: !finalHtml || richPaste.isUploading,
+          style: { padding: "6px 16px", fontSize: 13, border: "none", borderRadius: 4, background: "#2563eb", color: "#fff", cursor: "pointer", opacity: finalHtml && !richPaste.isUploading ? 1 : 0.5 },
+          children: richPaste.isUploading ? "Uploading..." : "Insert"
         }
       )
     ] })
@@ -10089,7 +10595,7 @@ 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 useState28 } from "react";
+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";
 var CellContext = createContext4({
   cellEditorConfig: null,
@@ -10101,9 +10607,9 @@ function InsertTableDialog({
   activeEditor,
   onClose
 }) {
-  const [rows, setRows] = useState28("5");
-  const [columns, setColumns] = useState28("5");
-  const [isDisabled, setIsDisabled] = useState28(true);
+  const [rows, setRows] = useState29("5");
+  const [columns, setColumns] = useState29("5");
+  const [isDisabled, setIsDisabled] = useState29(true);
   useEffect29(() => {
     const row = Number(rows);
     const column = Number(columns);
@@ -10155,7 +10661,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 useCallback21, useRef as useRef9, useState as useState29 } from "react";
+import { useCallback as useCallback22, useRef as useRef11, useState as useState30 } from "react";
 import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
 function HtmlBlockComponent({
   className,
@@ -10165,15 +10671,15 @@ function HtmlBlockComponent({
 }) {
   const [editor] = useLexicalComposerContext32();
   const isEditable = useLexicalEditable6();
-  const [isEditing, setIsEditing] = useState29(false);
-  const [editValue, setEditValue] = useState29("");
-  const textareaRef = useRef9(null);
-  const openEditor = useCallback21(() => {
+  const [isEditing, setIsEditing] = useState30(false);
+  const [editValue, setEditValue] = useState30("");
+  const textareaRef = useRef11(null);
+  const openEditor = useCallback22(() => {
     setEditValue(html);
     setIsEditing(true);
     setTimeout(() => textareaRef.current?.focus(), 50);
   }, [html]);
-  const saveHtml = useCallback21(() => {
+  const saveHtml = useCallback22(() => {
     editor.update(() => {
       const node = $getNodeByKey9(nodeKey);
       if ($isHtmlBlockNode(node)) {
@@ -10182,7 +10688,7 @@ function HtmlBlockComponent({
     });
     setIsEditing(false);
   }, [editor, nodeKey, editValue]);
-  const cancelEdit = useCallback21(() => {
+  const cancelEdit = useCallback22(() => {
     setIsEditing(false);
   }, []);
   return /* @__PURE__ */ jsx35(
@@ -10661,7 +11167,7 @@ function getBaseOptions(editor, showModal) {
 function ComponentPickerMenuPlugin() {
   const [editor] = useLexicalComposerContext33();
   const [modal, showModal] = useModal();
-  const [queryString, setQueryString] = useState30(null);
+  const [queryString, setQueryString] = useState31(null);
   const checkForTriggerMatch = useBasicTypeaheadTriggerMatch("/", {
     allowWhitespace: true,
     minLength: 0
@@ -10679,7 +11185,7 @@ function ComponentPickerMenuPlugin() {
       )
     ];
   }, [editor, queryString, showModal]);
-  const onSelectOption = useCallback22(
+  const onSelectOption = useCallback23(
     (selectedOption, nodeToRemove, closeMenu, matchingString) => {
       editor.update(() => {
         nodeToRemove?.remove();
@@ -10912,7 +11418,7 @@ import {
   $isParagraphNode as $isParagraphNode4,
   $isTextNode as $isTextNode4
 } from "lexical";
-import { useCallback as useCallback23, useEffect as useEffect31, useMemo as useMemo20, useRef as useRef10, useState as useState31 } from "react";
+import { useCallback as useCallback24, useEffect as useEffect31, useMemo as useMemo20, useRef as useRef12, 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";
 var DRAGGABLE_BLOCK_MENU_CLASSNAME = "draggable-block-menu";
@@ -10924,18 +11430,18 @@ function DraggableBlockPlugin({
 }) {
   const [editor] = useLexicalComposerContext36();
   const [modal, showModal] = useModal();
-  const menuRef = useRef10(null);
-  const pickerRef = useRef10(null);
-  const searchInputRef = useRef10(null);
-  const targetLineRef = useRef10(null);
-  const [draggableElement, setDraggableElement] = useState31(
+  const menuRef = useRef12(null);
+  const pickerRef = useRef12(null);
+  const searchInputRef = useRef12(null);
+  const targetLineRef = useRef12(null);
+  const [draggableElement, setDraggableElement] = useState32(
     null
   );
-  const [pickerState, setPickerState] = useState31(null);
-  const [isPickerOpen, setIsPickerOpen] = useState31(false);
-  const [queryString, setQueryString] = useState31("");
-  const [highlightedIndex, setHighlightedIndex] = useState31(0);
-  const [pickerPosition, setPickerPosition] = useState31(null);
+  const [pickerState, setPickerState] = useState32(null);
+  const [isPickerOpen, setIsPickerOpen] = useState32(false);
+  const [queryString, setQueryString] = useState32("");
+  const [highlightedIndex, setHighlightedIndex] = useState32(0);
+  const [pickerPosition, setPickerPosition] = useState32(null);
   const options = useMemo20(() => {
     const baseOptions = getBaseOptions(editor, showModal);
     if (!queryString) {
@@ -10979,7 +11485,7 @@ function DraggableBlockPlugin({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [isPickerOpen]);
-  const selectOption = useCallback23(
+  const selectOption = useCallback24(
     (option) => {
       if (!pickerState) {
         setIsPickerOpen(false);
@@ -11156,7 +11662,7 @@ import {
   $getSelection as $getSelection11,
   $isRangeSelection as $isRangeSelection9
 } from "lexical";
-import { useCallback as useCallback24, useEffect as useEffect32, useMemo as useMemo21, useState as useState32 } from "react";
+import { useCallback as useCallback25, useEffect as useEffect32, useMemo as useMemo21, 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 {
@@ -11204,8 +11710,8 @@ function EmojiMenuItem({
 var MAX_EMOJI_SUGGESTION_COUNT = 10;
 function EmojiPickerPlugin() {
   const [editor] = useLexicalComposerContext37();
-  const [queryString, setQueryString] = useState32(null);
-  const [emojis, setEmojis] = useState32([]);
+  const [queryString, setQueryString] = useState33(null);
+  const [emojis, setEmojis] = useState33([]);
   useEffect32(() => {
     import("./emoji-list-MUV74SND.js").then((file) => setEmojis(file.default));
   }, []);
@@ -11229,7 +11735,7 @@ function EmojiPickerPlugin() {
       ) : false : emojiOptions;
     }).slice(0, MAX_EMOJI_SUGGESTION_COUNT);
   }, [emojiOptions, queryString]);
-  const onSelectOption = useCallback24(
+  const onSelectOption = useCallback25(
     (selectedOption, nodeToRemove, closeMenu) => {
       editor.update(() => {
         const selection = $getSelection11();
@@ -11302,7 +11808,7 @@ import {
   KEY_ESCAPE_COMMAND as KEY_ESCAPE_COMMAND2,
   SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND2
 } from "lexical";
-import { useCallback as useCallback25, useEffect as useEffect33, useRef as useRef11, useState as useState33 } from "react";
+import { useCallback as useCallback26, useEffect as useEffect33, useRef as useRef13, useState as useState34 } from "react";
 import { createPortal as createPortal8 } from "react-dom";
 
 // src/utils/getSelectedNode.ts
@@ -11363,14 +11869,14 @@ function FloatingLinkEditor({
   isLinkEditMode,
   setIsLinkEditMode
 }) {
-  const editorRef = useRef11(null);
-  const inputRef = useRef11(null);
-  const [linkUrl, setLinkUrl] = useState33("");
-  const [editedLinkUrl, setEditedLinkUrl] = useState33("https://");
-  const [lastSelection, setLastSelection] = useState33(
+  const editorRef = useRef13(null);
+  const inputRef = useRef13(null);
+  const [linkUrl, setLinkUrl] = useState34("");
+  const [editedLinkUrl, setEditedLinkUrl] = useState34("https://");
+  const [lastSelection, setLastSelection] = useState34(
     null
   );
-  const $updateLinkEditor = useCallback25(() => {
+  const $updateLinkEditor = useCallback26(() => {
     const selection = $getSelection12();
     if ($isRangeSelection10(selection)) {
       const node = getSelectedNode(selection);
@@ -11622,8 +12128,8 @@ function FloatingLinkEditor({
   ] }) });
 }
 function useFloatingLinkEditorToolbar(editor, anchorElem, isLinkEditMode, setIsLinkEditMode) {
-  const [activeEditor, setActiveEditor] = useState33(editor);
-  const [isLink, setIsLink] = useState33(false);
+  const [activeEditor, setActiveEditor] = useState34(editor);
+  const [isLink, setIsLink] = useState34(false);
   useEffect33(() => {
     function $updateToolbar() {
       const selection = $getSelection12();
@@ -11740,7 +12246,7 @@ import {
   getDOMSelection as getDOMSelection3,
   SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND3
 } from "lexical";
-import { useCallback as useCallback26, useEffect as useEffect34, useRef as useRef12, useState as useState34 } from "react";
+import { useCallback as useCallback27, useEffect as useEffect34, useRef as useRef14, useState as useState35 } from "react";
 import { createPortal as createPortal9 } from "react-dom";
 
 // src/utils/getDOMRangeRect.ts
@@ -11819,8 +12325,8 @@ function TextFormatFloatingToolbar({
   isSuperscript: isSuperscript2,
   setIsLinkEditMode
 }) {
-  const popupCharStylesEditorRef = useRef12(null);
-  const insertLink = useCallback26(() => {
+  const popupCharStylesEditorRef = useRef14(null);
+  const insertLink = useCallback27(() => {
     if (!isLink) {
       setIsLinkEditMode(true);
       editor.dispatchCommand(TOGGLE_LINK_COMMAND4, "https://");
@@ -11861,7 +12367,7 @@ function TextFormatFloatingToolbar({
       };
     }
   }, [popupCharStylesEditorRef]);
-  const $updateTextFormatFloatingToolbar = useCallback26(() => {
+  const $updateTextFormatFloatingToolbar = useCallback27(() => {
     const selection = $getSelection13();
     const popupCharStylesEditorElem = popupCharStylesEditorRef.current;
     const nativeSelection = getDOMSelection3(editor._window);
@@ -12075,19 +12581,19 @@ function TextFormatFloatingToolbar({
   ] });
 }
 function useFloatingTextFormatToolbar(editor, anchorElem, setIsLinkEditMode) {
-  const [isText, setIsText] = useState34(false);
-  const [isLink, setIsLink] = useState34(false);
-  const [isBold, setIsBold] = useState34(false);
-  const [isItalic, setIsItalic] = useState34(false);
-  const [isUnderline, setIsUnderline] = useState34(false);
-  const [isUppercase2, setIsUppercase] = useState34(false);
-  const [isLowercase2, setIsLowercase] = useState34(false);
-  const [isCapitalize2, setIsCapitalize] = useState34(false);
-  const [isStrikethrough, setIsStrikethrough] = useState34(false);
-  const [isSubscript2, setIsSubscript] = useState34(false);
-  const [isSuperscript2, setIsSuperscript] = useState34(false);
-  const [isCode, setIsCode] = useState34(false);
-  const updatePopup = useCallback26(() => {
+  const [isText, setIsText] = useState35(false);
+  const [isLink, setIsLink] = useState35(false);
+  const [isBold, setIsBold] = useState35(false);
+  const [isItalic, setIsItalic] = useState35(false);
+  const [isUnderline, setIsUnderline] = useState35(false);
+  const [isUppercase2, setIsUppercase] = useState35(false);
+  const [isLowercase2, setIsLowercase] = useState35(false);
+  const [isCapitalize2, setIsCapitalize] = useState35(false);
+  const [isStrikethrough, setIsStrikethrough] = useState35(false);
+  const [isSubscript2, setIsSubscript] = useState35(false);
+  const [isSuperscript2, setIsSuperscript] = useState35(false);
+  const [isCode, setIsCode] = useState35(false);
+  const updatePopup = useCallback27(() => {
     editor.getEditorState().read(() => {
       if (editor.isComposing()) {
         return;
@@ -12963,12 +13469,12 @@ import {
   isDOMNode as isDOMNode2,
   SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND4
 } from "lexical";
-import { useCallback as useCallback27, useEffect as useEffect39, useRef as useRef14, useState as useState36 } from "react";
+import { useCallback as useCallback28, useEffect as useEffect39, useRef as useRef16, 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 useRef13, useState as useState35 } from "react";
+import { useMemo as useMemo22, useRef as useRef15, useState as useState36 } from "react";
 import { jsx as jsx43, jsxs as jsxs31 } from "react/jsx-runtime";
 var skipAddingToHistoryStack = false;
 var basicColors = [
@@ -12994,11 +13500,11 @@ function ColorPicker({
   color,
   onChange
 }) {
-  const [selfColor, setSelfColor] = useState35(transformColor("hex", color));
-  const [inputColor, setInputColor] = useState35(
+  const [selfColor, setSelfColor] = useState36(transformColor("hex", color));
+  const [inputColor, setInputColor] = useState36(
     transformColor("hex", color).hex
   );
-  const innerDivRef = useRef13(null);
+  const innerDivRef = useRef15(null);
   const saturationPosition = useMemo22(
     () => ({
       x: selfColor.hsv.s / 100 * WIDTH,
@@ -13108,8 +13614,8 @@ function ColorPicker({
   );
 }
 function MoveWrapper({ className, style, onChange, children }) {
-  const divRef = useRef13(null);
-  const draggedRef = useRef13(false);
+  const divRef = useRef15(null);
+  const draggedRef = useRef15(false);
   const move = (e) => {
     if (divRef.current) {
       const { current: div } = divRef;
@@ -13282,15 +13788,15 @@ function TableActionMenu({
   showColorPickerModal
 }) {
   const [editor] = useLexicalComposerContext43();
-  const dropDownRef = useRef14(null);
-  const [tableCellNode, updateTableCellNode] = useState36(_tableCellNode);
-  const [selectionCounts, updateSelectionCounts] = useState36({
+  const dropDownRef = useRef16(null);
+  const [tableCellNode, updateTableCellNode] = useState37(_tableCellNode);
+  const [selectionCounts, updateSelectionCounts] = useState37({
     columns: 1,
     rows: 1
   });
-  const [canMergeCells, setCanMergeCells] = useState36(false);
-  const [canUnmergeCell, setCanUnmergeCell] = useState36(false);
-  const [backgroundColor, setBackgroundColor] = useState36(
+  const [canMergeCells, setCanMergeCells] = useState37(false);
+  const [canUnmergeCell, setCanUnmergeCell] = useState37(false);
+  const [backgroundColor, setBackgroundColor] = useState37(
     () => currentCellBackgroundColor(editor) || ""
   );
   useEffect39(() => {
@@ -13354,7 +13860,7 @@ function TableActionMenu({
     window.addEventListener("click", handleClickOutside);
     return () => window.removeEventListener("click", handleClickOutside);
   }, [setIsMenuOpen, contextRef]);
-  const clearTableSelection = useCallback27(() => {
+  const clearTableSelection = useCallback28(() => {
     editor.update(() => {
       if (tableCellNode.isAttached()) {
         const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
@@ -13397,7 +13903,7 @@ function TableActionMenu({
       $unmergeCell();
     });
   };
-  const insertTableRowAtSelection = useCallback27(
+  const insertTableRowAtSelection = useCallback28(
     (shouldInsertAfter) => {
       editor.update(() => {
         for (let i = 0; i < selectionCounts.rows; i++) {
@@ -13408,7 +13914,7 @@ function TableActionMenu({
     },
     [editor, onClose, selectionCounts.rows]
   );
-  const insertTableColumnAtSelection = useCallback27(
+  const insertTableColumnAtSelection = useCallback28(
     (shouldInsertAfter) => {
       editor.update(() => {
         for (let i = 0; i < selectionCounts.columns; i++) {
@@ -13419,13 +13925,13 @@ function TableActionMenu({
     },
     [editor, onClose, selectionCounts.columns]
   );
-  const deleteTableRowAtSelection = useCallback27(() => {
+  const deleteTableRowAtSelection = useCallback28(() => {
     editor.update(() => {
       $deleteTableRowAtSelection();
       onClose();
     });
   }, [editor, onClose]);
-  const deleteTableAtSelection = useCallback27(() => {
+  const deleteTableAtSelection = useCallback28(() => {
     editor.update(() => {
       const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
       tableNode.remove();
@@ -13433,13 +13939,13 @@ function TableActionMenu({
       onClose();
     });
   }, [editor, tableCellNode, clearTableSelection, onClose]);
-  const deleteTableColumnAtSelection = useCallback27(() => {
+  const deleteTableColumnAtSelection = useCallback28(() => {
     editor.update(() => {
       $deleteTableColumnAtSelection();
       onClose();
     });
   }, [editor, onClose]);
-  const toggleTableRowIsHeader = useCallback27(() => {
+  const toggleTableRowIsHeader = useCallback28(() => {
     editor.update(() => {
       const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
       const tableRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode);
@@ -13460,7 +13966,7 @@ function TableActionMenu({
       onClose();
     });
   }, [editor, tableCellNode, clearTableSelection, onClose]);
-  const toggleTableColumnIsHeader = useCallback27(() => {
+  const toggleTableColumnIsHeader = useCallback28(() => {
     editor.update(() => {
       const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
       const tableColumnIndex = $getTableColumnIndexFromTableCellNode(tableCellNode);
@@ -13481,7 +13987,7 @@ function TableActionMenu({
       onClose();
     });
   }, [editor, tableCellNode, clearTableSelection, onClose]);
-  const toggleRowStriping = useCallback27(() => {
+  const toggleRowStriping = useCallback28(() => {
     editor.update(() => {
       if (tableCellNode.isAttached()) {
         const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
@@ -13493,7 +13999,7 @@ function TableActionMenu({
       onClose();
     });
   }, [editor, tableCellNode, clearTableSelection, onClose]);
-  const toggleFirstRowFreeze = useCallback27(() => {
+  const toggleFirstRowFreeze = useCallback28(() => {
     editor.update(() => {
       if (tableCellNode.isAttached()) {
         const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
@@ -13505,7 +14011,7 @@ function TableActionMenu({
       onClose();
     });
   }, [editor, tableCellNode, clearTableSelection, onClose]);
-  const toggleFirstColumnFreeze = useCallback27(() => {
+  const toggleFirstColumnFreeze = useCallback28(() => {
     editor.update(() => {
       if (tableCellNode.isAttached()) {
         const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
@@ -13519,7 +14025,7 @@ function TableActionMenu({
       onClose();
     });
   }, [editor, tableCellNode, clearTableSelection, onClose]);
-  const handleCellBackgroundColor = useCallback27(
+  const handleCellBackgroundColor = useCallback28(
     (value) => {
       editor.update(() => {
         const selection = $getSelection17();
@@ -13832,14 +14338,14 @@ function TableCellActionMenuContainer({
   cellMerge
 }) {
   const [editor] = useLexicalComposerContext43();
-  const menuButtonRef = useRef14(null);
-  const menuRootRef = useRef14(null);
-  const [isMenuOpen, setIsMenuOpen] = useState36(false);
-  const [tableCellNode, setTableMenuCellNode] = useState36(
+  const menuButtonRef = useRef16(null);
+  const menuRootRef = useRef16(null);
+  const [isMenuOpen, setIsMenuOpen] = useState37(false);
+  const [tableCellNode, setTableMenuCellNode] = useState37(
     null
   );
   const [colorPickerModal, showColorPickerModal] = useModal();
-  const checkTableCellOverflow = useCallback27(
+  const checkTableCellOverflow = useCallback28(
     (tableCellParentNodeDOM) => {
       const scrollableContainer = tableCellParentNodeDOM.closest(
         ".PlaygroundEditorTheme__tableScrollableWrapper"
@@ -13857,7 +14363,7 @@ function TableCellActionMenuContainer({
     },
     []
   );
-  const $moveMenu = useCallback27(() => {
+  const $moveMenu = useCallback28(() => {
     const menu = menuButtonRef.current;
     const selection = $getSelection17();
     const nativeSelection = getDOMSelection4(editor._window);
@@ -13984,7 +14490,7 @@ function TableCellActionMenuContainer({
       () => clearTimeout(timeoutId)
     );
   });
-  const prevTableCellDOM = useRef14(tableCellNode);
+  const prevTableCellDOM = useRef16(tableCellNode);
   useEffect39(() => {
     if (prevTableCellDOM.current !== tableCellNode) {
       setIsMenuOpen(false);
@@ -14056,11 +14562,11 @@ import {
   SKIP_SCROLL_INTO_VIEW_TAG
 } from "lexical";
 import {
-  useCallback as useCallback28,
+  useCallback as useCallback29,
   useEffect as useEffect40,
   useMemo as useMemo23,
-  useRef as useRef15,
-  useState as useState37
+  useRef as useRef17,
+  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";
@@ -14068,16 +14574,16 @@ var MIN_ROW_HEIGHT = 33;
 var MIN_COLUMN_WIDTH = 92;
 var ACTIVE_RESIZER_COLOR = "#76b6ff";
 function TableCellResizer({ editor }) {
-  const targetRef = useRef15(null);
-  const resizerRef = useRef15(null);
-  const tableRectRef = useRef15(null);
-  const [hasTable, setHasTable] = useState37(false);
-  const pointerStartPosRef = useRef15(null);
-  const [pointerCurrentPos, updatePointerCurrentPos] = useState37(null);
-  const [activeCell, updateActiveCell] = useState37(null);
-  const [draggingDirection, updateDraggingDirection] = useState37(null);
-  const [hoveredDirection, updateHoveredDirection] = useState37(null);
-  const resetState = useCallback28(() => {
+  const targetRef = useRef17(null);
+  const resizerRef = useRef17(null);
+  const tableRectRef = useRef17(null);
+  const [hasTable, setHasTable] = useState38(false);
+  const pointerStartPosRef = useRef17(null);
+  const [pointerCurrentPos, updatePointerCurrentPos] = useState38(null);
+  const [activeCell, updateActiveCell] = useState38(null);
+  const [draggingDirection, updateDraggingDirection] = useState38(null);
+  const [hoveredDirection, updateHoveredDirection] = useState38(null);
+  const resetState = useCallback29(() => {
     updateActiveCell(null);
     targetRef.current = null;
     updateDraggingDirection(null);
@@ -14188,7 +14694,7 @@ function TableCellResizer({ editor }) {
     }
     return false;
   };
-  const updateRowHeight = useCallback28(
+  const updateRowHeight = useCallback29(
     (heightChange) => {
       if (!activeCell) {
         throw new Error("TableCellResizer: Expected active cell.");
@@ -14241,7 +14747,7 @@ function TableCellResizer({ editor }) {
       }
     }
   };
-  const updateColumnWidth = useCallback28(
+  const updateColumnWidth = useCallback29(
     (widthChange) => {
       if (!activeCell) {
         throw new Error("TableCellResizer: Expected active cell.");
@@ -14280,7 +14786,7 @@ function TableCellResizer({ editor }) {
     },
     [activeCell, editor]
   );
-  const pointerUpHandler = useCallback28(
+  const pointerUpHandler = useCallback29(
     (direction) => {
       const handler = (event) => {
         event.preventDefault();
@@ -14309,7 +14815,7 @@ function TableCellResizer({ editor }) {
     },
     [activeCell, resetState, updateColumnWidth, updateRowHeight]
   );
-  const toggleResize = useCallback28(
+  const toggleResize = useCallback29(
     (direction) => (event) => {
       event.preventDefault();
       event.stopPropagation();
@@ -14326,7 +14832,7 @@ function TableCellResizer({ editor }) {
     },
     [activeCell, pointerUpHandler]
   );
-  const getResizers = useCallback28(() => {
+  const getResizers = useCallback29(() => {
     if (activeCell) {
       const { height, width, top, left } = activeCell.elem.getBoundingClientRect();
       const zoom = calculateZoomLevel3(activeCell.elem);
@@ -14384,7 +14890,7 @@ function TableCellResizer({ editor }) {
       top: null
     };
   }, [activeCell, draggingDirection, hoveredDirection, pointerCurrentPos]);
-  const handlePointerEnter = useCallback28(
+  const handlePointerEnter = useCallback29(
     (direction) => () => {
       if (!draggingDirection) {
         updateHoveredDirection(direction);
@@ -14392,7 +14898,7 @@ function TableCellResizer({ editor }) {
     },
     [draggingDirection]
   );
-  const handlePointerLeave = useCallback28(() => {
+  const handlePointerLeave = useCallback29(() => {
     if (!draggingDirection) {
       updateHoveredDirection(null);
     }
@@ -14458,7 +14964,7 @@ import {
   $getSiblingCaret as $getSiblingCaret2,
   isHTMLElement as isHTMLElement5
 } from "lexical";
-import { useEffect as useEffect41, useRef as useRef16, useState as useState38 } from "react";
+import { useEffect as useEffect41, useRef as useRef18, useState as useState39 } from "react";
 import { createPortal as createPortal12 } from "react-dom";
 
 // src/utils/getThemeSelector.ts
@@ -14562,31 +15068,31 @@ function TableHoverActionsV2({
 }) {
   const [editor, { getTheme }] = useLexicalComposerContext45();
   const isEditable = useLexicalEditable9();
-  const [isVisible, setIsVisible] = useState38(false);
-  const [isLeftVisible, setIsLeftVisible] = useState38(false);
-  const virtualRef = useRef16({
+  const [isVisible, setIsVisible] = useState39(false);
+  const [isLeftVisible, setIsLeftVisible] = useState39(false);
+  const virtualRef = useRef18({
     getBoundingClientRect: () => new DOMRect()
   });
-  const leftVirtualRef = useRef16({
+  const leftVirtualRef = useRef18({
     getBoundingClientRect: () => new DOMRect()
   });
-  const floatingElemRef = useRef16(null);
-  const leftFloatingElemRef = useRef16(null);
-  const dragHandleRef = useRef16(null);
-  const hoveredLeftCellRef = useRef16(null);
-  const hoveredTopCellRef = useRef16(null);
-  const handleMouseLeaveRef = useRef16(
+  const floatingElemRef = useRef18(null);
+  const leftFloatingElemRef = useRef18(null);
+  const dragHandleRef = useRef18(null);
+  const hoveredLeftCellRef = useRef18(null);
+  const hoveredTopCellRef = useRef18(null);
+  const handleMouseLeaveRef = useRef18(
     null
   );
-  const dropIndicatorCleanupRef = useRef16([]);
-  const [hoveredTable, setHoveredTable] = useState38(
+  const dropIndicatorCleanupRef = useRef18([]);
+  const [hoveredTable, setHoveredTable] = useState39(
     null
   );
-  const [hoveredColumnIndex, setHoveredColumnIndex] = useState38(
+  const [hoveredColumnIndex, setHoveredColumnIndex] = useState39(
     null
   );
-  const [canReorder, setCanReorder] = useState38(false);
-  const [dropIndicatorState, setDropIndicatorState] = useState38(null);
+  const [canReorder, setCanReorder] = useState39(false);
+  const [dropIndicatorState, setDropIndicatorState] = useState39(null);
   const { refs, floatingStyles, update } = useFloating({
     middleware: [
       offset({ mainAxis: -TOP_BUTTON_OVERHANG }),
@@ -15011,7 +15517,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 useRef17, useState as useState39 } from "react";
+import { useEffect as useEffect42, useRef as useRef19, 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;
@@ -15037,8 +15543,8 @@ function isHeadingBelowTheTopOfThePage(element) {
 function TableOfContentsList({
   tableOfContents
 }) {
-  const [selectedKey, setSelectedKey] = useState39("");
-  const selectedIndex = useRef17(0);
+  const [selectedKey, setSelectedKey] = useState40("");
+  const selectedIndex = useRef19(0);
   const [editor] = useLexicalComposerContext46();
   function scrollToNode(key, currIndex) {
     editor.getEditorState().read(() => {
@@ -15303,7 +15809,7 @@ import {
   SKIP_SELECTION_FOCUS_TAG as SKIP_SELECTION_FOCUS_TAG2,
   UNDO_COMMAND as UNDO_COMMAND2
 } from "lexical";
-import { useCallback as useCallback29, useEffect as useEffect45, useState as useState41 } from "react";
+import { useCallback as useCallback30, useEffect as useEffect45, useState as useState42 } from "react";
 
 // src/ui/DropdownColorPicker.tsx
 import { jsx as jsx48 } from "react/jsx-runtime";
@@ -15737,7 +16243,7 @@ function FontDropDown({
   style,
   disabled = false
 }) {
-  const handleClick = useCallback29(
+  const handleClick = useCallback30(
     (option) => {
       editor.update(() => {
         $addUpdateTag3(SKIP_SELECTION_FOCUS_TAG2);
@@ -15943,11 +16449,11 @@ function ToolbarPlugin({
   setActiveEditor,
   setIsLinkEditMode
 }) {
-  const [selectedElementKey, setSelectedElementKey] = useState41(
+  const [selectedElementKey, setSelectedElementKey] = useState42(
     null
   );
   const [modal, showModal] = useModal();
-  const [isEditable, setIsEditable] = useState41(() => editor.isEditable());
+  const [isEditable, setIsEditable] = useState42(() => editor.isEditable());
   const { toolbarState, updateToolbarState } = useToolbarState();
   const dispatchToolbarCommand = (command, payload = void 0, skipRefocus = false) => {
     activeEditor.update(() => {
@@ -15958,7 +16464,7 @@ function ToolbarPlugin({
     });
   };
   const dispatchFormatTextCommand = (payload, skipRefocus = false) => dispatchToolbarCommand(FORMAT_TEXT_COMMAND3, payload, skipRefocus);
-  const $handleHeadingNode = useCallback29(
+  const $handleHeadingNode = useCallback30(
     (selectedElement) => {
       const type = $isHeadingNode2(selectedElement) ? selectedElement.getTag() : selectedElement.getType();
       if (type in blockTypeToBlockName) {
@@ -15973,7 +16479,7 @@ function ToolbarPlugin({
   const {
     settings: { isCodeHighlighted, isCodeShiki }
   } = useSettings();
-  const $handleCodeNode = useCallback29(
+  const $handleCodeNode = useCallback30(
     (element) => {
       if ($isCodeNode6(element)) {
         const language = element.getLanguage();
@@ -15989,7 +16495,7 @@ function ToolbarPlugin({
     },
     [updateToolbarState, isCodeHighlighted, isCodeShiki]
   );
-  const $updateToolbar = useCallback29(() => {
+  const $updateToolbar = useCallback30(() => {
     const selection = $getSelection18();
     if ($isRangeSelection16(selection)) {
       if (activeEditor !== editor && $isEditorIsNestedEditor(activeEditor)) {
@@ -16162,7 +16668,7 @@ function ToolbarPlugin({
       )
     );
   }, [$updateToolbar, activeEditor, editor, updateToolbarState]);
-  const applyStyleText = useCallback29(
+  const applyStyleText = useCallback30(
     (styles, skipHistoryStack, skipRefocus = false) => {
       activeEditor.update(
         () => {
@@ -16179,13 +16685,13 @@ function ToolbarPlugin({
     },
     [activeEditor]
   );
-  const onFontColorSelect = useCallback29(
+  const onFontColorSelect = useCallback30(
     (value, skipHistoryStack, skipRefocus) => {
       applyStyleText({ color: value }, skipHistoryStack, skipRefocus);
     },
     [applyStyleText]
   );
-  const onBgColorSelect = useCallback29(
+  const onBgColorSelect = useCallback30(
     (value, skipHistoryStack, skipRefocus) => {
       applyStyleText(
         { "background-color": value },
@@ -16195,7 +16701,7 @@ function ToolbarPlugin({
     },
     [applyStyleText]
   );
-  const insertLink = useCallback29(() => {
+  const insertLink = useCallback30(() => {
     if (!toolbarState.isLink) {
       setIsLinkEditMode(true);
       activeEditor.dispatchCommand(
@@ -16207,7 +16713,7 @@ function ToolbarPlugin({
       activeEditor.dispatchCommand(TOGGLE_LINK_COMMAND6, null);
     }
   }, [activeEditor, setIsLinkEditMode, toolbarState.isLink]);
-  const onCodeLanguageSelect = useCallback29(
+  const onCodeLanguageSelect = useCallback30(
     (value) => {
       activeEditor.update(() => {
         $addUpdateTag3(SKIP_SELECTION_FOCUS_TAG2);
@@ -16221,7 +16727,7 @@ function ToolbarPlugin({
     },
     [activeEditor, selectedElementKey]
   );
-  const onCodeThemeSelect = useCallback29(
+  const onCodeThemeSelect = useCallback30(
     (value) => {
       activeEditor.update(() => {
         if (selectedElementKey !== null) {
@@ -16955,11 +17461,11 @@ function Editor({ placeholder: placeholderProp, maxLength }) {
   } = useSettings();
   const isEditable = useLexicalEditable10();
   const placeholder = placeholderProp ?? (isRichText ? "Enter some rich text..." : "Enter some plain text...");
-  const [floatingAnchorElem, setFloatingAnchorElem] = useState42(null);
-  const [isSmallWidthViewport, setIsSmallWidthViewport] = useState42(false);
+  const [floatingAnchorElem, setFloatingAnchorElem] = useState43(null);
+  const [isSmallWidthViewport, setIsSmallWidthViewport] = useState43(false);
   const [editor] = useLexicalComposerContext49();
-  const [activeEditor, setActiveEditor] = useState42(editor);
-  const [isLinkEditMode, setIsLinkEditMode] = useState42(false);
+  const [activeEditor, setActiveEditor] = useState43(editor);
+  const [isLinkEditMode, setIsLinkEditMode] = useState43(false);
   const onRef = (_floatingAnchorElem) => {
     if (_floatingAnchorElem !== null) {
       setFloatingAnchorElem(_floatingAnchorElem);
@@ -17289,9 +17795,9 @@ function HtmlPlugin({
   debounceMs = 300
 }) {
   const [editor] = useLexicalComposerContext50();
-  const lastSyncedValue = useRef18(null);
-  const hasUserEdited = useRef18(false);
-  const debounceTimer = useRef18(null);
+  const lastSyncedValue = useRef20(null);
+  const hasUserEdited = useRef20(false);
+  const debounceTimer = useRef20(null);
   useEffect48(() => {
     return editor.registerCommand(
       FOCUS_COMMAND2,
@@ -17341,7 +17847,7 @@ function HtmlPlugin({
       { tag: "historic" }
     );
   }, [editor, value]);
-  const handleChange = useCallback30(
+  const handleChange = useCallback31(
     (_editorState, _editor, tags) => {
       if (!tags.has("historic")) {
         hasUserEdited.current = true;
@@ -17392,7 +17898,7 @@ function LexicalEditor20({
   readOnly,
   maxLength
 }) {
-  const [isFullscreen, setIsFullscreen] = useState43(false);
+  const [isFullscreen, setIsFullscreen] = useState44(false);
   const initialConfig = {
     namespace: "LexicalEditor",
     nodes: [...PlaygroundNodes_default],
@@ -17421,7 +17927,7 @@ function LexicalEditor20({
     document.addEventListener("keydown", handleEsc);
     return () => document.removeEventListener("keydown", handleEsc);
   }, [isFullscreen]);
-  const toggleFullscreen = useCallback30(
+  const toggleFullscreen = useCallback31(
     () => setIsFullscreen((f) => !f),
     []
   );