@baasix/lexical 0.0.11 → 0.0.12

package/dist/index.js

@@ -8576,7 +8576,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 +8601,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 +8620,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";
@@ -9014,7 +8994,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,31 +9019,8 @@ 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"
-            }
-          )
-        ] })
-      ] }),
+    /* @__PURE__ */ jsx26("div", { dangerouslySetInnerHTML: { __html: html } }),
+    isEditing && /* @__PURE__ */ jsx26(Modal, { onClose: cancelEdit, title: "Edit Revision Points", children: /* @__PURE__ */ jsxs16("div", { style: { minWidth: 500 }, children: [
       items.map((item, index) => /* @__PURE__ */ jsxs16("div", { style: { display: "flex", gap: 4, marginBottom: 4, alignItems: "center" }, children: [
         /* @__PURE__ */ jsx26(
           "input",
@@ -9072,7 +9029,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 }
           }
         ),
@@ -9095,11 +9051,15 @@ function RevisionComponent({
           children: "+ Add Point"
         }
       ),
-      preview && /* @__PURE__ */ jsxs16("div", { style: { marginTop: 8, padding: 8, border: "1px solid #e5e7eb", borderRadius: 4, background: "#fff" }, children: [
+      preview && /* @__PURE__ */ jsxs16("div", { style: { marginTop: 8, padding: 8, border: "1px solid #e5e7eb", borderRadius: 4, background: "#fff", maxHeight: 200, 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, marginTop: 12 }, 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";
@@ -9318,57 +9278,36 @@ 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"
-            }
-          )
-        ] })
-      ] }),
+  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 }, children: [
       items.map((item, index) => /* @__PURE__ */ jsxs18("div", { style: { display: "flex", gap: 4, marginBottom: 4, alignItems: "center" }, children: [
         /* @__PURE__ */ jsx28(
           "input",
@@ -9377,7 +9316,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 +9326,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 }
           }
         ),
@@ -9407,16 +9344,37 @@ function TerminologyComponent({
         {
           type: "button",
           onClick: addItem,
-          style: { padding: "2px 10px", fontSize: 12, border: "1px solid #ddd", borderRadius: 4, background: "#fff", cursor: "pointer", marginTop: 4 },
+          style: { padding: "2px 10px", fontSize: 12, border: "1px solid #ddd", borderRadius: 4, background: "#fff", cursor: "pointer", marginTop: 4, marginBottom: 8 },
           children: "+ Add Term"
         }
       ),
-      preview && /* @__PURE__ */ jsxs18("div", { style: { marginTop: 8, padding: 8, border: "1px solid #e5e7eb", borderRadius: 4, background: "#fff" }, children: [
+      preview && /* @__PURE__ */ jsxs18("div", { style: { marginBottom: 8, padding: 8, border: "1px solid #e5e7eb", borderRadius: 4, background: "#fff", maxHeight: 200, 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 {
@@ -9690,7 +9648,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,31 +9673,8 @@ 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"
-            }
-          )
-        ] })
-      ] }),
+    /* @__PURE__ */ jsx30("div", { dangerouslySetInnerHTML: { __html: html } }),
+    isEditing && /* @__PURE__ */ jsx30(Modal, { onClose: cancelEdit, title: "Edit Text Cards", children: /* @__PURE__ */ jsxs20("div", { style: { minWidth: 500 }, 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: [
@@ -9754,7 +9689,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,7 +9713,6 @@ 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" }
               }
             )
@@ -9795,11 +9728,15 @@ function TextCardsComponent({
           children: "+ Add Concept"
         }
       ),
-      preview && /* @__PURE__ */ jsxs20("div", { style: { marginTop: 8, padding: 8, border: "1px solid #e5e7eb", borderRadius: 4, background: "#fff" }, children: [
+      preview && /* @__PURE__ */ jsxs20("div", { style: { marginTop: 8, padding: 8, border: "1px solid #e5e7eb", borderRadius: 4, background: "#fff", maxHeight: 200, 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, marginTop: 12 }, 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";
@@ -10249,7 +10186,7 @@ function QuestionsCardsComponent({
   }, []);
   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,31 +10211,8 @@ 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"
-            }
-          )
-        ] })
-      ] }),
+    /* @__PURE__ */ jsx32("div", { dangerouslySetInnerHTML: { __html: html } }),
+    isEditing && /* @__PURE__ */ jsx32(Modal, { onClose: cancelEdit, title: "Edit Questions Card", children: /* @__PURE__ */ jsxs22("div", { style: { minWidth: 500 }, 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: [
@@ -10323,7 +10237,6 @@ function QuestionsCardsComponent({
               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" }
             }
           )
@@ -10336,7 +10249,6 @@ function QuestionsCardsComponent({
               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" }
             }
           )
@@ -10354,7 +10266,6 @@ function QuestionsCardsComponent({
                   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" }
                 }
               )
@@ -10371,11 +10282,15 @@ function QuestionsCardsComponent({
           children: "+ Add Question"
         }
       ),
-      preview && /* @__PURE__ */ jsxs22("div", { style: { marginTop: 8, padding: 8, border: "1px solid #e5e7eb", borderRadius: 4, background: "#fff" }, children: [
+      preview && /* @__PURE__ */ jsxs22("div", { style: { marginTop: 8, padding: 8, border: "1px solid #e5e7eb", borderRadius: 4, background: "#fff", maxHeight: 200, 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, marginTop: 12 }, 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";
@@ -10698,7 +10613,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 +10638,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 +10654,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"
+              }
+            )
+          ] })
+        ] }) })
       ] })
     }
   );