@examind/block-editor 0.1.14 → 0.1.16

package/dist/index.mjs

@@ -26,144 +26,9 @@ import SlTab from "@shoelace-style/shoelace/dist/components/tab/tab.js";
 import SlTextarea from "@shoelace-style/shoelace/dist/components/textarea/textarea.js";
 import SlTooltip from "@shoelace-style/shoelace/dist/components/tooltip/tooltip.js";
 
-// src/components/feedback/DotBadge.tsx
-import clsx from "clsx";
-import { jsx } from "react/jsx-runtime";
-function DotBadge(props) {
-  const { slot, variant, leftSided, style } = props;
-  const className = clsx("dot", {
-    ["left_sided"]: leftSided
-  });
-  const attributes = {};
-  if (slot) {
-    attributes.slot = slot;
-  }
-  return /* @__PURE__ */ jsx(
-    "sl-badge",
-    {
-      class: className,
-      ...attributes,
-      variant,
-      pill: true,
-      pulse: true,
-      style
-    }
-  );
-}
-
-// src/components/feedback/TextBadge.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-function TextBadge(props) {
-  const { variant, text, slot } = props;
-  const attributes = {};
-  if (slot) {
-    attributes.slot = slot;
-  }
-  return /* @__PURE__ */ jsx2("sl-badge", { ...attributes, variant, pill: true, children: text });
-}
-
-// src/components/icon/Icon.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-function Icon(props) {
-  const { icon, slot, style, fill, dataTrigger } = props;
-  const IconComponent = icon;
-  const dataAttributes = {};
-  if (dataTrigger) {
-    dataAttributes["data-trigger"] = dataTrigger;
-  }
-  return /* @__PURE__ */ jsx3("div", { slot, className: "sl-icon", ...dataAttributes, children: IconComponent && /* @__PURE__ */ jsx3(
-    IconComponent,
-    {
-      fill: fill ? fill : "none",
-      style: { ...style }
-    }
-  ) });
-}
-
-// src/components/utils/objectUtils.ts
-var isNil = (value) => value === null || value === void 0;
-function filterNilAttrs(object, attrs) {
-  return Object.fromEntries(
-    Object.entries(object).filter(
-      ([key, value]) => attrs.includes(key) && !isNil(value)
-    )
-  );
-}
-
-// src/components/inputs/Button.tsx
-import { jsx as jsx4, jsxs } from "react/jsx-runtime";
-function Button(props) {
-  const {
-    label,
-    variant = "default",
-    className,
-    EndIcon,
-    StartIcon,
-    circle,
-    size = "medium",
-    isBadgeDot = false,
-    badgeText,
-    type = "button",
-    tooltip,
-    prefix,
-    suffix,
-    onClick
-  } = props;
-  const handleButtonClick = (e) => {
-    if (e) {
-      e.stopPropagation();
-      e.preventDefault();
-    }
-    if (onClick) {
-      onClick();
-    }
-  };
-  const attributes = filterNilAttrs(props, [
-    "form",
-    "name",
-    "loading",
-    "disabled",
-    "outline",
-    "circle",
-    "caret",
-    "pill",
-    "slot",
-    "href",
-    "target",
-    "value",
-    "tabindex"
-  ]);
-  let validClassName = className;
-  if (!label) {
-    validClassName = className ? `${className} button_icon` : "button_icon";
-  }
-  const buttonElement = /* @__PURE__ */ jsxs(
-    "sl-button",
-    {
-      class: validClassName,
-      ...attributes,
-      variant,
-      size,
-      title: tooltip,
-      type,
-      onClick: handleButtonClick,
-      children: [
-        prefix && /* @__PURE__ */ jsx4("div", { slot: "prefix", children: prefix }),
-        StartIcon && !circle && /* @__PURE__ */ jsx4(Icon, { slot: "prefix", icon: StartIcon }),
-        EndIcon && !circle && /* @__PURE__ */ jsx4(Icon, { slot: "suffix", icon: EndIcon }),
-        circle ? StartIcon ? /* @__PURE__ */ jsx4(Icon, { slot: "prefix", icon: StartIcon }) : null : label ? /* @__PURE__ */ jsx4("span", { className: "line-clamp-1", children: label }) : null,
-        isBadgeDot && /* @__PURE__ */ jsx4(DotBadge, { variant: "danger" }),
-        badgeText && /* @__PURE__ */ jsx4(TextBadge, { variant: "neutral", text: badgeText }),
-        suffix && /* @__PURE__ */ jsx4("div", { slot: "suffix", children: suffix })
-      ]
-    }
-  );
-  return buttonElement;
-}
-
 // src/components/utils/ResizeObserver.tsx
 import { useEffect, useRef } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 var RESIZE_CONTENT_EVENT = "RESIZE_CONTENT_EVENT";
 function ResizeObserver(props) {
   const { children } = props;
@@ -183,7 +48,7 @@ function ResizeObserver(props) {
       );
     };
   }, []);
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx(
     "sl-resize-observer",
     {
       style: { display: "contents" },
@@ -201,11 +66,29 @@ import {
 } from "lexical";
 import { Info, Lightbulb } from "lucide-react";
 
+// src/components/icon/Icon.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Icon(props) {
+  const { icon, slot, style, fill, dataTrigger } = props;
+  const IconComponent = icon;
+  const dataAttributes = {};
+  if (dataTrigger) {
+    dataAttributes["data-trigger"] = dataTrigger;
+  }
+  return /* @__PURE__ */ jsx2("div", { slot, className: "sl-icon", ...dataAttributes, children: IconComponent && /* @__PURE__ */ jsx2(
+    IconComponent,
+    {
+      fill: fill ? fill : "none",
+      style: { ...style }
+    }
+  ) });
+}
+
 // src/content/editable/NestedContentEditable.tsx
 import { ContentEditable as LexicalContentEditable } from "@lexical/react/LexicalContentEditable";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 function NestedContentEditable(props) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx3(
     LexicalContentEditable,
     {
       tabIndex: props.tabIndex,
@@ -242,7 +125,7 @@ function OnNestedChangePlugin(props) {
 import { useLexicalComposerContext as useLexicalComposerContext2 } from "@lexical/react/LexicalComposerContext";
 import uniqueId from "lodash-es/uniqueId";
 import React2, { useContext, useEffect as useEffect3, useState } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var NestedEditorContext = React2.createContext(null);
 function NestedEditor(props) {
   const { children, nodeKey } = props;
@@ -278,7 +161,7 @@ function NestedEditor(props) {
       }
     );
   }, [editor]);
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx4(
     NestedEditorContext.Provider,
     {
       value: {
@@ -299,6 +182,123 @@ var useNestedEditor = () => {
   return context;
 };
 
+// src/components/feedback/DotBadge.tsx
+import clsx from "clsx";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function DotBadge(props) {
+  const { slot, variant, leftSided, style } = props;
+  const className = clsx("dot", {
+    ["left_sided"]: leftSided
+  });
+  const attributes = {};
+  if (slot) {
+    attributes.slot = slot;
+  }
+  return /* @__PURE__ */ jsx5(
+    "sl-badge",
+    {
+      class: className,
+      ...attributes,
+      variant,
+      pill: true,
+      pulse: true,
+      style
+    }
+  );
+}
+
+// src/components/feedback/TextBadge.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function TextBadge(props) {
+  const { variant, text, slot } = props;
+  const attributes = {};
+  if (slot) {
+    attributes.slot = slot;
+  }
+  return /* @__PURE__ */ jsx6("sl-badge", { ...attributes, variant, pill: true, children: text });
+}
+
+// src/components/utils/objectUtils.ts
+var isNil = (value) => value === null || value === void 0;
+function filterNilAttrs(object, attrs) {
+  return Object.fromEntries(
+    Object.entries(object).filter(
+      ([key, value]) => attrs.includes(key) && !isNil(value)
+    )
+  );
+}
+
+// src/components/inputs/Button.tsx
+import { jsx as jsx7, jsxs } from "react/jsx-runtime";
+function Button(props) {
+  const {
+    label,
+    variant = "default",
+    className,
+    EndIcon,
+    StartIcon,
+    circle,
+    size = "medium",
+    isBadgeDot = false,
+    badgeText,
+    type = "button",
+    tooltip,
+    prefix,
+    suffix,
+    onClick
+  } = props;
+  const handleButtonClick = (e) => {
+    if (e) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+    if (onClick) {
+      onClick();
+    }
+  };
+  const attributes = filterNilAttrs(props, [
+    "form",
+    "name",
+    "loading",
+    "disabled",
+    "outline",
+    "circle",
+    "caret",
+    "pill",
+    "slot",
+    "href",
+    "target",
+    "value",
+    "tabindex"
+  ]);
+  let validClassName = className;
+  if (!label) {
+    validClassName = className ? `${className} button_icon` : "button_icon";
+  }
+  const buttonElement = /* @__PURE__ */ jsxs(
+    "sl-button",
+    {
+      class: validClassName,
+      ...attributes,
+      variant,
+      size,
+      title: tooltip,
+      type,
+      onClick: handleButtonClick,
+      children: [
+        prefix && /* @__PURE__ */ jsx7("div", { slot: "prefix", children: prefix }),
+        StartIcon && !circle && /* @__PURE__ */ jsx7(Icon, { slot: "prefix", icon: StartIcon }),
+        EndIcon && !circle && /* @__PURE__ */ jsx7(Icon, { slot: "suffix", icon: EndIcon }),
+        circle ? StartIcon ? /* @__PURE__ */ jsx7(Icon, { slot: "prefix", icon: StartIcon }) : null : label ? /* @__PURE__ */ jsx7("span", { className: "line-clamp-1", children: label }) : null,
+        isBadgeDot && /* @__PURE__ */ jsx7(DotBadge, { variant: "danger" }),
+        badgeText && /* @__PURE__ */ jsx7(TextBadge, { variant: "neutral", text: badgeText }),
+        suffix && /* @__PURE__ */ jsx7("div", { slot: "suffix", children: suffix })
+      ]
+    }
+  );
+  return buttonElement;
+}
+
 // src/components/layouts/SettingsCard.tsx
 import { XIcon } from "lucide-react";
 import { useEffect as useEffect4, useRef as useRef2 } from "react";
@@ -4456,6 +4456,7 @@ var ACCEPTABLE_IMAGE_TYPES = [
 ];
 
 // src/utils/formatUtils.ts
+import numeral from "numeral";
 function humanReadableBytes(bytes) {
   if (!bytes) {
     return "";
@@ -4472,6 +4473,37 @@ function humanReadableBytes(bytes) {
     return `${Math.round(bytes / Math.pow(1024, i))} ${sizes[i]}`;
   }
 }
+function getNumber(value) {
+  if (typeof value === "number") {
+    return Number.isNaN(value) ? void 0 : value;
+  }
+  if (typeof value === "string") {
+    const trimmedStr = value.trim();
+    if (trimmedStr === "") {
+      return void 0;
+    }
+    const num = +trimmedStr;
+    return Number.isNaN(num) ? void 0 : num;
+  }
+  if (typeof value === "boolean") {
+    return value ? 1 : 0;
+  }
+  return void 0;
+}
+var formatNumber = (num, format) => {
+  return format ? numeral(num).format(format) : autoFormatNumber(num);
+};
+var correctRoundingError = (num) => parseFloat(num.toPrecision(14));
+var autoFormatNumber = (num, options = {}) => {
+  const correctedNum = correctRoundingError(num);
+  const formatted = new Intl.NumberFormat("en-US", {
+    maximumFractionDigits: 14,
+    ...options
+  }).format(correctedNum);
+  if (Math.abs(correctedNum) < 1e4)
+    return formatted.replace(/,/g, "");
+  return formatted;
+};
 
 // src/plugins/ImagePlugin/ImagePlugin.tsx
 import { useLexicalComposerContext as useLexicalComposerContext18 } from "@lexical/react/LexicalComposerContext";
@@ -4607,15 +4639,15 @@ function ImageSettings(props) {
         },
         options: [
           {
-            id: "30%",
+            id: "188px",
             label: "Small"
           },
           {
-            id: "50%",
+            id: "375px",
             label: "Medium"
           },
           {
-            id: "70%",
+            id: "563px",
             label: "Large"
           },
           {
@@ -4926,10 +4958,8 @@ var placeholderData = `data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w
 import { useLexicalComposerContext as useLexicalComposerContext19 } from "@lexical/react/LexicalComposerContext";
 import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
 import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
-import { ListPlugin } from "@lexical/react/LexicalListPlugin";
 import { LexicalNestedComposer } from "@lexical/react/LexicalNestedComposer";
-import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
-import { TabIndentationPlugin } from "@lexical/react/LexicalTabIndentationPlugin";
+import { PlainTextPlugin } from "@lexical/react/LexicalPlainTextPlugin";
 import { useLexicalNodeSelection as useLexicalNodeSelection2 } from "@lexical/react/useLexicalNodeSelection";
 import { mergeRegister as mergeRegister5 } from "@lexical/utils";
 import {
@@ -4966,9 +4996,6 @@ function ImageComponent(props) {
           if (root.getFirstChild() === null) {
             const paragraph = $createParagraphNode4();
             const textNode = $createTextNode3("Image caption");
-            textNode.setStyle(
-              "font-size: var(--sl-font-size-small); color: var(--sl-color-gray-500)"
-            );
             paragraph.append(textNode);
             paragraph.setFormat("center");
             root.append(paragraph);
@@ -5029,7 +5056,7 @@ function ImageComponent(props) {
       }
     );
   }
-  return /* @__PURE__ */ jsx47(Fragment19, { children: /* @__PURE__ */ jsxs16("div", { className: "image-box", style: { width }, children: [
+  return /* @__PURE__ */ jsx47(Fragment19, { children: /* @__PURE__ */ jsxs16("div", { className: "image-box", style: { width, maxWidth: "100%" }, children: [
     src ? /* @__PURE__ */ jsx47(
       "img",
       {
@@ -5097,18 +5124,15 @@ function ImageComponent(props) {
           position: "relative"
         },
         children: /* @__PURE__ */ jsx47(LexicalNestedComposer, { initialEditor: caption, children: /* @__PURE__ */ jsxs16(NestedEditor, { nodeKey, children: [
+          /* @__PURE__ */ jsx47(SettingsPanelNestedAgentPlugin, {}),
           /* @__PURE__ */ jsx47(
-            RichTextPlugin,
+            PlainTextPlugin,
             {
               contentEditable: /* @__PURE__ */ jsx47(NestedContentEditable, {}),
-              placeholder: null,
               ErrorBoundary: LexicalErrorBoundary
             }
           ),
-          /* @__PURE__ */ jsx47(HistoryPlugin, { externalHistoryState: historyState }),
-          /* @__PURE__ */ jsx47(ListPlugin, {}),
-          /* @__PURE__ */ jsx47(TabIndentationPlugin, {}),
-          /* @__PURE__ */ jsx47(TextToolbarAgentPlugin, { decoratorNode: ImageNode })
+          /* @__PURE__ */ jsx47(HistoryPlugin, { externalHistoryState: historyState })
         ] }) })
       }
     )
@@ -5116,10 +5140,8 @@ function ImageComponent(props) {
 }
 
 // src/plugins/ImagePlugin/ImageNode.tsx
-import { $generateHtmlFromNodes } from "@lexical/html";
 import {
   $applyNodeReplacement as $applyNodeReplacement3,
-  $getRoot as $getRoot3,
   createEditor,
   DecoratorNode as DecoratorNode3
 } from "lexical";
@@ -5193,35 +5215,6 @@ var ImageNode = class _ImageNode extends DecoratorNode3 {
   }
   exportDOM() {
     const element = this._createWrapper();
-    const imgBox = document.createElement("div");
-    imgBox.classList.add("image-box");
-    imgBox.style.width = this.__width.toString();
-    element.appendChild(imgBox);
-    const img = document.createElement("img");
-    img.setAttribute("src", this.__src || "");
-    img.style.width = "100%";
-    img.style.borderRadius = "var(--sl-border-radius-small)";
-    if (this.__showBorder) {
-      img.style.border = "1px solid var(--sl-color-neutral-300)";
-    }
-    imgBox.appendChild(img);
-    if (this.__showCaption && this.__caption) {
-      const div = document.createElement("div");
-      div.style.width = "100%";
-      this.__caption.getEditorState().read(() => {
-        div.innerHTML = $generateHtmlFromNodes(this.__caption, null);
-        const rootNode = $getRoot3();
-        if (rootNode) {
-          img.setAttribute(
-            "alt",
-            rootNode.getAllTextNodes().map((textNode) => {
-              return textNode.getTextContent();
-            }).join(" ")
-          );
-        }
-      });
-      imgBox.appendChild(div);
-    }
     return { element };
   }
   static importDOM() {
@@ -5522,7 +5515,15 @@ var VariableNode = class _VariableNode extends DecoratorNode4 {
       this.__variable
     );
     if (this.__isPreviewMode) {
-      element.textContent = this.__variableValue || "[???]";
+      const variableAsNumber = this.__variableValue ? getNumber(this.__variableValue) : void 0;
+      if (variableAsNumber) {
+        element.textContent = formatNumber(
+          variableAsNumber,
+          this.__variableFormat
+        );
+      } else {
+        element.textContent = "[???]";
+      }
     } else {
       element.textContent = this.__variable;
     }
@@ -5539,7 +5540,15 @@ var VariableNode = class _VariableNode extends DecoratorNode4 {
   }
   updateDOM(_prevNode, dom, _config) {
     if (this.__isPreviewMode) {
-      dom.textContent = this.__variableValue || "[???]";
+      const variableAsNumber = this.__variableValue ? getNumber(this.__variableValue) : void 0;
+      if (variableAsNumber) {
+        dom.textContent = formatNumber(
+          variableAsNumber,
+          this.__variableFormat
+        );
+      } else {
+        dom.textContent = "[???]";
+      }
     } else {
       dom.textContent = this.__variable;
     }
@@ -5772,7 +5781,7 @@ import { useLexicalComposerContext as useLexicalComposerContext22 } from "@lexic
 import { LexicalErrorBoundary as LexicalErrorBoundary2 } from "@lexical/react/LexicalErrorBoundary";
 import { HistoryPlugin as HistoryPlugin2 } from "@lexical/react/LexicalHistoryPlugin";
 import { LexicalNestedComposer as LexicalNestedComposer2 } from "@lexical/react/LexicalNestedComposer";
-import { RichTextPlugin as RichTextPlugin2 } from "@lexical/react/LexicalRichTextPlugin";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
 import {
   $createNodeSelection as $createNodeSelection3,
   $getNodeByKey as $getNodeByKey18,
@@ -5834,7 +5843,7 @@ function FinancialStatementQuestionComponent(props) {
                 children: /* @__PURE__ */ jsx52(LexicalNestedComposer2, { initialEditor: header, children: /* @__PURE__ */ jsxs17(NestedEditor, { nodeKey, children: [
                   /* @__PURE__ */ jsx52(SettingsPanelNestedAgentPlugin, {}),
                   /* @__PURE__ */ jsx52(
-                    RichTextPlugin2,
+                    RichTextPlugin,
                     {
                       contentEditable: /* @__PURE__ */ jsx52(NestedContentEditable, {}),
                       ErrorBoundary: LexicalErrorBoundary2,
@@ -5931,7 +5940,7 @@ function FinancialStatementQuestionComponent(props) {
                               children: /* @__PURE__ */ jsxs17(NestedEditor, { nodeKey, children: [
                                 /* @__PURE__ */ jsx52(SettingsPanelNestedAgentPlugin, {}),
                                 /* @__PURE__ */ jsx52(
-                                  RichTextPlugin2,
+                                  RichTextPlugin,
                                   {
                                     contentEditable: /* @__PURE__ */ jsx52(NestedContentEditable, {}),
                                     ErrorBoundary: LexicalErrorBoundary2,
@@ -6188,7 +6197,7 @@ import { useLexicalComposerContext as useLexicalComposerContext23 } from "@lexic
 import {
   $createParagraphNode as $createParagraphNode5,
   $getNodeByKey as $getNodeByKey19,
-  $getRoot as $getRoot4
+  $getRoot as $getRoot3
 } from "lexical";
 import { useCallback as useCallback3 } from "react";
 import { jsx as jsx54, jsxs as jsxs18 } from "react/jsx-runtime";
@@ -6211,7 +6220,7 @@ function DistractorButton(props) {
               const newQuestionItem = foundNode.__items[itemIndex + 1];
               if (newQuestionItem.itemOptionContent) {
                 newQuestionItem.itemOptionContent.update(() => {
-                  const root = $getRoot4();
+                  const root = $getRoot3();
                   let firstChild = root.getFirstChild();
                   if (!firstChild) {
                     firstChild = $createParagraphNode5();
@@ -6297,12 +6306,12 @@ import { useLexicalComposerContext as useLexicalComposerContext25 } from "@lexic
 import { LexicalErrorBoundary as LexicalErrorBoundary3 } from "@lexical/react/LexicalErrorBoundary";
 import { HistoryPlugin as HistoryPlugin3 } from "@lexical/react/LexicalHistoryPlugin";
 import { LexicalNestedComposer as LexicalNestedComposer3 } from "@lexical/react/LexicalNestedComposer";
-import { RichTextPlugin as RichTextPlugin3 } from "@lexical/react/LexicalRichTextPlugin";
+import { RichTextPlugin as RichTextPlugin2 } from "@lexical/react/LexicalRichTextPlugin";
 import clsx2 from "clsx";
 import {
   $createParagraphNode as $createParagraphNode6,
   $getNodeByKey as $getNodeByKey20,
-  $getRoot as $getRoot5
+  $getRoot as $getRoot4
 } from "lexical";
 import { CircleMinus, CirclePlus } from "lucide-react";
 import { useCallback as useCallback4 } from "react";
@@ -6334,7 +6343,7 @@ function QuestionItemComponent(props) {
               const newQuestionItem = foundNode.__items[itemIndex + 1];
               if (newQuestionItem.itemPremiseContent) {
                 newQuestionItem.itemPremiseContent.update(() => {
-                  const root = $getRoot5();
+                  const root = $getRoot4();
                   let firstChild = root.getFirstChild();
                   if (!firstChild) {
                     firstChild = $createParagraphNode6();
@@ -6345,7 +6354,7 @@ function QuestionItemComponent(props) {
               }
               if (newQuestionItem.itemOptionContent) {
                 newQuestionItem.itemOptionContent.update(() => {
-                  const root = $getRoot5();
+                  const root = $getRoot4();
                   let firstChild = root.getFirstChild();
                   if (!firstChild) {
                     firstChild = $createParagraphNode6();
@@ -6386,7 +6395,7 @@ function QuestionItemComponent(props) {
               /* @__PURE__ */ jsx56("div", { style: { height: "100%" }, children: /* @__PURE__ */ jsx56(LexicalNestedComposer3, { initialEditor: itemPremiseContent, children: /* @__PURE__ */ jsxs19(NestedEditor, { nodeKey, children: [
                 /* @__PURE__ */ jsx56(SettingsPanelNestedAgentPlugin, {}),
                 /* @__PURE__ */ jsx56(
-                  RichTextPlugin3,
+                  RichTextPlugin2,
                   {
                     contentEditable: /* @__PURE__ */ jsx56(NestedContentEditable, {}),
                     ErrorBoundary: LexicalErrorBoundary3,
@@ -6425,7 +6434,7 @@ function QuestionItemComponent(props) {
               /* @__PURE__ */ jsx56("div", { style: { height: "100%" }, children: /* @__PURE__ */ jsx56(LexicalNestedComposer3, { initialEditor: itemOptionContent, children: /* @__PURE__ */ jsxs19(NestedEditor, { nodeKey, children: [
                 /* @__PURE__ */ jsx56(SettingsPanelNestedAgentPlugin, {}),
                 /* @__PURE__ */ jsx56(
-                  RichTextPlugin3,
+                  RichTextPlugin2,
                   {
                     contentEditable: /* @__PURE__ */ jsx56(NestedContentEditable, {}),
                     ErrorBoundary: LexicalErrorBoundary3,
@@ -6737,7 +6746,7 @@ import {
   $applyNodeReplacement as $applyNodeReplacement7,
   $createParagraphNode as $createParagraphNode7,
   $createTextNode as $createTextNode4,
-  $getRoot as $getRoot6,
+  $getRoot as $getRoot5,
   DecoratorNode as DecoratorNode7,
   createEditor as createEditor4
 } from "lexical";
@@ -6759,7 +6768,7 @@ import { useLexicalComposerContext as useLexicalComposerContext27 } from "@lexic
 import { LexicalErrorBoundary as LexicalErrorBoundary4 } from "@lexical/react/LexicalErrorBoundary";
 import { HistoryPlugin as HistoryPlugin4 } from "@lexical/react/LexicalHistoryPlugin";
 import { LexicalNestedComposer as LexicalNestedComposer4 } from "@lexical/react/LexicalNestedComposer";
-import { RichTextPlugin as RichTextPlugin4 } from "@lexical/react/LexicalRichTextPlugin";
+import { RichTextPlugin as RichTextPlugin3 } from "@lexical/react/LexicalRichTextPlugin";
 import clsx3 from "clsx";
 import { $getNodeByKey as $getNodeByKey22 } from "lexical";
 import { CircleMinus as CircleMinus2, CirclePlus as CirclePlus2, Settings } from "lucide-react";
@@ -6818,7 +6827,7 @@ function MultipleOptionQuestionItemComponent(props) {
         /* @__PURE__ */ jsx59("div", { children: /* @__PURE__ */ jsx59(LexicalNestedComposer4, { initialEditor: content, children: /* @__PURE__ */ jsxs21(NestedEditor, { nodeKey, children: [
           /* @__PURE__ */ jsx59(SettingsPanelNestedAgentPlugin, {}),
           /* @__PURE__ */ jsx59(
-            RichTextPlugin4,
+            RichTextPlugin3,
             {
               contentEditable: /* @__PURE__ */ jsx59(NestedContentEditable, {}),
               ErrorBoundary: LexicalErrorBoundary4,
@@ -7144,7 +7153,7 @@ var MultipleOptionQuestionNode = class _MultipleOptionQuestionNode extends Decor
     const newOptions = [...writable.__options];
     const content = initNewContentEditor2();
     content.update(() => {
-      const root = $getRoot6();
+      const root = $getRoot5();
       const firstChild = $createParagraphNode7();
       firstChild.append($createTextNode4(initialOptionText));
       root.append(firstChild);
@@ -7215,7 +7224,7 @@ import { useLexicalComposerContext as useLexicalComposerContext29 } from "@lexic
 import { LexicalErrorBoundary as LexicalErrorBoundary5 } from "@lexical/react/LexicalErrorBoundary";
 import { HistoryPlugin as HistoryPlugin5 } from "@lexical/react/LexicalHistoryPlugin";
 import { LexicalNestedComposer as LexicalNestedComposer5 } from "@lexical/react/LexicalNestedComposer";
-import { RichTextPlugin as RichTextPlugin5 } from "@lexical/react/LexicalRichTextPlugin";
+import { RichTextPlugin as RichTextPlugin4 } from "@lexical/react/LexicalRichTextPlugin";
 import {
   $createNodeSelection as $createNodeSelection6,
   $getNodeByKey as $getNodeByKey24,
@@ -7276,7 +7285,7 @@ function ShortAnswerQuestionComponent(props) {
               /* @__PURE__ */ jsx62("div", { children: /* @__PURE__ */ jsx62(LexicalNestedComposer5, { initialEditor: notes, children: /* @__PURE__ */ jsxs23(NestedEditor, { nodeKey, children: [
                 /* @__PURE__ */ jsx62(SettingsPanelNestedAgentPlugin, {}),
                 /* @__PURE__ */ jsx62(
-                  RichTextPlugin5,
+                  RichTextPlugin4,
                   {
                     contentEditable: /* @__PURE__ */ jsx62(NestedContentEditable, {}),
                     ErrorBoundary: LexicalErrorBoundary5,
@@ -7449,12 +7458,12 @@ import { useLexicalComposerContext as useLexicalComposerContext31 } from "@lexic
 import { LexicalErrorBoundary as LexicalErrorBoundary6 } from "@lexical/react/LexicalErrorBoundary";
 import { HistoryPlugin as HistoryPlugin6 } from "@lexical/react/LexicalHistoryPlugin";
 import { LexicalNestedComposer as LexicalNestedComposer6 } from "@lexical/react/LexicalNestedComposer";
-import { RichTextPlugin as RichTextPlugin6 } from "@lexical/react/LexicalRichTextPlugin";
+import { RichTextPlugin as RichTextPlugin5 } from "@lexical/react/LexicalRichTextPlugin";
 import clsx4 from "clsx";
 import {
   $createParagraphNode as $createParagraphNode8,
   $getNodeByKey as $getNodeByKey25,
-  $getRoot as $getRoot7
+  $getRoot as $getRoot6
 } from "lexical";
 import { CircleMinus as CircleMinus3, CirclePlus as CirclePlus3 } from "lucide-react";
 import { useCallback as useCallback6 } from "react";
@@ -7479,7 +7488,7 @@ function JournalEntryQuestionItemComponent(props) {
               const newEntryItem = foundNode.__lineItems[itemIndex + 1];
               if (newEntryItem.account) {
                 newEntryItem.account.update(() => {
-                  const root = $getRoot7();
+                  const root = $getRoot6();
                   let firstChild = root.getFirstChild();
                   if (!firstChild) {
                     firstChild = $createParagraphNode8();
@@ -7490,7 +7499,7 @@ function JournalEntryQuestionItemComponent(props) {
               }
               if (newEntryItem.credit) {
                 newEntryItem.credit.update(() => {
-                  const root = $getRoot7();
+                  const root = $getRoot6();
                   let firstChild = root.getFirstChild();
                   if (!firstChild) {
                     firstChild = $createParagraphNode8();
@@ -7500,7 +7509,7 @@ function JournalEntryQuestionItemComponent(props) {
               }
               if (newEntryItem.debit) {
                 newEntryItem.debit.update(() => {
-                  const root = $getRoot7();
+                  const root = $getRoot6();
                   let firstChild = root.getFirstChild();
                   if (!firstChild) {
                     firstChild = $createParagraphNode8();
@@ -7544,7 +7553,7 @@ function JournalEntryQuestionItemComponent(props) {
               /* @__PURE__ */ jsx65("div", { style: { height: "100%" }, children: /* @__PURE__ */ jsx65(LexicalNestedComposer6, { initialEditor: account, children: /* @__PURE__ */ jsxs24(NestedEditor, { nodeKey, children: [
                 /* @__PURE__ */ jsx65(SettingsPanelNestedAgentPlugin, {}),
                 /* @__PURE__ */ jsx65(
-                  RichTextPlugin6,
+                  RichTextPlugin5,
                   {
                     contentEditable: /* @__PURE__ */ jsx65(NestedContentEditable, {}),
                     ErrorBoundary: LexicalErrorBoundary6,
@@ -7586,7 +7595,7 @@ function JournalEntryQuestionItemComponent(props) {
               /* @__PURE__ */ jsx65("div", { style: { height: "100%" }, children: /* @__PURE__ */ jsx65(LexicalNestedComposer6, { initialEditor: debit, children: /* @__PURE__ */ jsxs24(NestedEditor, { nodeKey, children: [
                 /* @__PURE__ */ jsx65(SettingsPanelNestedAgentPlugin, {}),
                 /* @__PURE__ */ jsx65(
-                  RichTextPlugin6,
+                  RichTextPlugin5,
                   {
                     contentEditable: /* @__PURE__ */ jsx65(NestedContentEditable, {}),
                     ErrorBoundary: LexicalErrorBoundary6,
@@ -7628,7 +7637,7 @@ function JournalEntryQuestionItemComponent(props) {
               /* @__PURE__ */ jsx65("div", { style: { height: "100%" }, children: /* @__PURE__ */ jsx65(LexicalNestedComposer6, { initialEditor: credit, children: /* @__PURE__ */ jsxs24(NestedEditor, { nodeKey, children: [
                 /* @__PURE__ */ jsx65(SettingsPanelNestedAgentPlugin, {}),
                 /* @__PURE__ */ jsx65(
-                  RichTextPlugin6,
+                  RichTextPlugin5,
                   {
                     contentEditable: /* @__PURE__ */ jsx65(NestedContentEditable, {}),
                     ErrorBoundary: LexicalErrorBoundary6,
@@ -8081,10 +8090,10 @@ function TypeaheadMenuAgentPlugin(props) {
 import { useLexicalComposerContext as useLexicalComposerContext36 } from "@lexical/react/LexicalComposerContext";
 import { LexicalErrorBoundary as LexicalErrorBoundary7 } from "@lexical/react/LexicalErrorBoundary";
 import { HistoryPlugin as HistoryPlugin7 } from "@lexical/react/LexicalHistoryPlugin";
-import { ListPlugin as ListPlugin2 } from "@lexical/react/LexicalListPlugin";
+import { ListPlugin } from "@lexical/react/LexicalListPlugin";
 import { LexicalNestedComposer as LexicalNestedComposer7 } from "@lexical/react/LexicalNestedComposer";
-import { RichTextPlugin as RichTextPlugin7 } from "@lexical/react/LexicalRichTextPlugin";
-import { TabIndentationPlugin as TabIndentationPlugin2 } from "@lexical/react/LexicalTabIndentationPlugin";
+import { RichTextPlugin as RichTextPlugin6 } from "@lexical/react/LexicalRichTextPlugin";
+import { TabIndentationPlugin } from "@lexical/react/LexicalTabIndentationPlugin";
 import {
   $createNodeSelection as $createNodeSelection9,
   $getNodeByKey as $getNodeByKey27,
@@ -8294,7 +8303,7 @@ function FillInTheBlankQuestionComponent(props) {
                 /* @__PURE__ */ jsx71(FillInTheBlankSpaceComponentPlugin, {}),
                 /* @__PURE__ */ jsx71(FillInTheBlankSpaceSettingsPlugin, {}),
                 /* @__PURE__ */ jsx71(
-                  RichTextPlugin7,
+                  RichTextPlugin6,
                   {
                     contentEditable: /* @__PURE__ */ jsx71(NestedContentEditable, {}),
                     ErrorBoundary: LexicalErrorBoundary7,
@@ -8323,10 +8332,10 @@ function FillInTheBlankQuestionComponent(props) {
                     decoratorNode: FillInTheBlankQuestionNode
                   }
                 ),
-                /* @__PURE__ */ jsx71(ListPlugin2, {}),
+                /* @__PURE__ */ jsx71(ListPlugin, {}),
                 /* @__PURE__ */ jsx71(ListLevelLimitPlugin, {}),
                 /* @__PURE__ */ jsx71(Table, {}),
-                /* @__PURE__ */ jsx71(TabIndentationPlugin2, {})
+                /* @__PURE__ */ jsx71(TabIndentationPlugin, {})
               ] }) })
             ]
           }
@@ -8540,7 +8549,8 @@ function SettingsPanelPlugin() {
     drawer,
     getSettingsPanel,
     getNestedEditor,
-    renderSettings
+    renderSettings,
+    autoOpenSettingsPanel
   } = useBlockEditor();
   const [_articleIsReady, setArticleReady] = useState5(false);
   const articleElementRef = useRef30();
@@ -8571,6 +8581,7 @@ function SettingsPanelPlugin() {
     }
     if (currentFocusedNode.current) {
       setSelectedNode(currentFocusedNode.current.getKey());
+      autoOpenSettingsPanel();
     } else {
       setSelectedNode(void 0);
     }
@@ -8811,11 +8822,11 @@ function getLineBreakNodeBeforeCaretOnLastLine(paragraph, selection) {
 import { LexicalErrorBoundary as LexicalErrorBoundary8 } from "@lexical/react/LexicalErrorBoundary";
 import { HistoryPlugin as HistoryPlugin8 } from "@lexical/react/LexicalHistoryPlugin";
 import { LexicalNestedComposer as LexicalNestedComposer8 } from "@lexical/react/LexicalNestedComposer";
-import { PlainTextPlugin } from "@lexical/react/LexicalPlainTextPlugin";
+import { PlainTextPlugin as PlainTextPlugin2 } from "@lexical/react/LexicalPlainTextPlugin";
 import { useLexicalNodeSelection as useLexicalNodeSelection3 } from "@lexical/react/useLexicalNodeSelection";
 import { mergeRegister as mergeRegister13 } from "@lexical/utils";
 import {
-  $getRoot as $getRoot8,
+  $getRoot as $getRoot7,
   $getSelection as $getSelection6,
   $isParagraphNode,
   $isRangeSelection as $isRangeSelection4,
@@ -8840,7 +8851,7 @@ function CalloutBoxComponent(props) {
               () => {
                 const currentSelection = $getSelection6();
                 if ($isRangeSelection4(currentSelection) && currentSelection.isCollapsed()) {
-                  const firstChild = $getRoot8().getFirstChild();
+                  const firstChild = $getRoot7().getFirstChild();
                   if (firstChild?.getTextContentSize() === 0) {
                     event.stopPropagation();
                     event.preventDefault();
@@ -8874,7 +8885,7 @@ function CalloutBoxComponent(props) {
           (event) => {
             const currentSelection = $getSelection6();
             if ($isRangeSelection4(currentSelection) && currentSelection.isCollapsed()) {
-              const firstChild = $getRoot8().getFirstChild();
+              const firstChild = $getRoot7().getFirstChild();
               if ($isParagraphNode(firstChild)) {
                 const breakNodes = getLineBreakNodeBeforeCaretOnLastLine(
                   firstChild,
@@ -8934,7 +8945,7 @@ function CalloutBoxComponent(props) {
             children: /* @__PURE__ */ jsx76(LexicalNestedComposer8, { initialEditor: content, children: /* @__PURE__ */ jsxs29(NestedEditor, { nodeKey, children: [
               /* @__PURE__ */ jsx76(SettingsPanelNestedAgentPlugin, {}),
               /* @__PURE__ */ jsx76(
-                PlainTextPlugin,
+                PlainTextPlugin2,
                 {
                   contentEditable: /* @__PURE__ */ jsx76(NestedContentEditable, {}),
                   ErrorBoundary: LexicalErrorBoundary8
@@ -8957,8 +8968,8 @@ var CALLOUT_ICONS = {
   tip: Lightbulb
 };
 var CALLOUT_COLORS = {
-  info: "--sl-color-sky",
-  tip: "--sl-color-teal"
+  info: "--sl-color-primary",
+  tip: "--sl-color-success"
 };
 var CALLOUT_LABELS = {
   info: "Instructions",
@@ -9648,30 +9659,68 @@ var initialEditorRegistry = {
   Questions: false
 };
 
+// src/content/drawer/Drawer.tsx
+import { Menu } from "lucide-react";
+import { forwardRef as forwardRef10, useEffect as useEffect52, useState as useState6 } from "react";
+import { jsx as jsx83 } from "react/jsx-runtime";
+var Drawer = forwardRef10(
+  (props, ref) => {
+    const {
+      settingsPanelSwitch,
+      toggleSettingsPanelSwitch,
+      modulesNumber,
+      hasModule
+    } = useBlockEditor();
+    const [showSettingsButton, setShowSettingsButton] = useState6(false);
+    useEffect52(() => {
+      if (hasModule("SettingsPanel")) {
+        setShowSettingsButton(true);
+      }
+    }, [modulesNumber, hasModule]);
+    return /* @__PURE__ */ jsx83(
+      "nav",
+      {
+        ref,
+        className: !showSettingsButton ? "disabled" : settingsPanelSwitch === "on" ? "shown" : "hidden",
+        children: settingsPanelSwitch === "off" && /* @__PURE__ */ jsx83("div", { children: /* @__PURE__ */ jsx83(
+          Button,
+          {
+            className: "cancel",
+            variant: "text",
+            size: "large",
+            StartIcon: Menu,
+            onClick: toggleSettingsPanelSwitch
+          }
+        ) })
+      }
+    );
+  }
+);
+
 // src/content/editable/ContentEditable.tsx
 import { ContentEditable as LexicalContentEditable2 } from "@lexical/react/LexicalContentEditable";
-import { jsx as jsx83 } from "react/jsx-runtime";
+import { jsx as jsx84 } from "react/jsx-runtime";
 function ContentEditable() {
-  return /* @__PURE__ */ jsx83(LexicalContentEditable2, { className: "content" });
+  return /* @__PURE__ */ jsx84(LexicalContentEditable2, { className: "content" });
 }
 
 // src/content/node/NodeProvider.tsx
 import React18, {
   useContext as useContext3,
-  useEffect as useEffect64,
+  useEffect as useEffect65,
   useRef as useRef46
 } from "react";
 
 // src/components/inputs/DropdownWrapper.tsx
 import {
-  forwardRef as forwardRef10,
-  useEffect as useEffect52,
+  forwardRef as forwardRef11,
+  useEffect as useEffect53,
   useImperativeHandle as useImperativeHandle10,
   useMemo as useMemo6,
   useRef as useRef33
 } from "react";
-import { jsx as jsx84, jsxs as jsxs32 } from "react/jsx-runtime";
-var DropdownWrapper = forwardRef10((props, ref) => {
+import { jsx as jsx85, jsxs as jsxs32 } from "react/jsx-runtime";
+var DropdownWrapper = forwardRef11((props, ref) => {
   const {
     className,
     menuClassName,
@@ -9753,9 +9802,9 @@ var DropdownWrapper = forwardRef10((props, ref) => {
       subMenu
     } = menuItem;
     if (menuItemDivider) {
-      menuItemElement = /* @__PURE__ */ jsx84("sl-divider", { ...triggerData }, `menuItem${menuItemId}`);
+      menuItemElement = /* @__PURE__ */ jsx85("sl-divider", { ...triggerData }, `menuItem${menuItemId}`);
     } else if (menuItemIsGroup) {
-      menuItemElement = /* @__PURE__ */ jsx84("sl-menu-label", { children: menuItemLabel }, `menuItem${menuItemId}`);
+      menuItemElement = /* @__PURE__ */ jsx85("sl-menu-label", { children: menuItemLabel }, `menuItem${menuItemId}`);
     } else if (subMenu) {
       const subMenuElements = [];
       let subTabsIndex = 0;
@@ -9774,7 +9823,7 @@ var DropdownWrapper = forwardRef10((props, ref) => {
             e.stopPropagation();
           },
           children: [
-            MenuItemIcon && /* @__PURE__ */ jsx84(
+            MenuItemIcon && /* @__PURE__ */ jsx85(
               Icon,
               {
                 style: { color: menuItemColor || "inherit" },
@@ -9783,7 +9832,7 @@ var DropdownWrapper = forwardRef10((props, ref) => {
               }
             ),
             menuItemLabel,
-            /* @__PURE__ */ jsx84(
+            /* @__PURE__ */ jsx85(
               "sl-menu",
               {
                 slot: "submenu",
@@ -9820,7 +9869,7 @@ var DropdownWrapper = forwardRef10((props, ref) => {
             e.stopPropagation();
           },
           children: [
-            MenuItemIcon && /* @__PURE__ */ jsx84(
+            MenuItemIcon && /* @__PURE__ */ jsx85(
               Icon,
               {
                 style: { color: menuItemColor || "inherit" },
@@ -9829,7 +9878,7 @@ var DropdownWrapper = forwardRef10((props, ref) => {
               }
             ),
             menuItemLabel,
-            menuItemIsError && /* @__PURE__ */ jsx84(DotBadge, { variant: "danger", leftSided: true })
+            menuItemIsError && /* @__PURE__ */ jsx85(DotBadge, { variant: "danger", leftSided: true })
           ]
         },
         `menuItem${menuItemId}`
@@ -9851,7 +9900,7 @@ var DropdownWrapper = forwardRef10((props, ref) => {
   }, [menu]);
   filterNilAttrs(props, ["sync", "slot"]);
   const dropdownAttributes = filterNilAttrs(props, ["placement"]);
-  useEffect52(() => {
+  useEffect53(() => {
     window.customElements.whenDefined("sl-menu").then(() => {
       if (menuRef.current) {
         menuRef.current.addEventListener(
@@ -9869,7 +9918,7 @@ var DropdownWrapper = forwardRef10((props, ref) => {
       }
     };
   }, [menu]);
-  useEffect52(() => {
+  useEffect53(() => {
     window.customElements.whenDefined("sl-dropdown").then(() => {
       if (dropdownRef.current) {
         dropdownRef.current.addEventListener(
@@ -9904,7 +9953,7 @@ var DropdownWrapper = forwardRef10((props, ref) => {
       ...dropdownAttributes,
       children: [
         children,
-        menuItems.length > 0 && /* @__PURE__ */ jsx84(
+        menuItems.length > 0 && /* @__PURE__ */ jsx85(
           "sl-menu",
           {
             ref: menuRef,
@@ -9960,18 +10009,18 @@ import {
   $createNodeSelection as $createNodeSelection12,
   $createParagraphNode as $createParagraphNode9,
   $getNodeByKey as $getNodeByKey33,
-  $getRoot as $getRoot9,
+  $getRoot as $getRoot8,
   $parseSerializedNode,
   $setSelection as $setSelection12,
   COMMAND_PRIORITY_EDITOR as COMMAND_PRIORITY_EDITOR9,
   createCommand as createCommand13
 } from "lexical";
-import { useEffect as useEffect54, useRef as useRef35 } from "react";
+import { useEffect as useEffect55, useRef as useRef35 } from "react";
 
 // src/plugins/FillInTheBlankQuestionPlugin/FillInTheBlankQuestionSettings.tsx
 import { useLexicalComposerContext as useLexicalComposerContext43 } from "@lexical/react/LexicalComposerContext";
 import { $getNodeByKey as $getNodeByKey32 } from "lexical";
-import { useEffect as useEffect53, useRef as useRef34, useState as useState6 } from "react";
+import { useEffect as useEffect54, useRef as useRef34, useState as useState7 } from "react";
 
 // src/plugins/FillInTheBlankQuestionPlugin/validatePointslnput.ts
 function validatePointsInput(input) {
@@ -9993,13 +10042,13 @@ function validatePointsInput(input) {
 }
 
 // src/plugins/FillInTheBlankQuestionPlugin/FillInTheBlankQuestionSettings.tsx
-import { jsx as jsx85 } from "react/jsx-runtime";
+import { jsx as jsx86 } from "react/jsx-runtime";
 function FillInTheBlankQuestionSettings(props) {
   const { nodeKey } = props;
   const [editor] = useLexicalComposerContext43();
   const pointsTextInputRef = useRef34(null);
-  const [foundNode, setFoundNode] = useState6();
-  useEffect53(() => {
+  const [foundNode, setFoundNode] = useState7();
+  useEffect54(() => {
     if (nodeKey) {
       editor.getEditorState().read(() => {
         const fillInTheBlankNode = $getNodeByKey32(nodeKey);
@@ -10012,7 +10061,7 @@ function FillInTheBlankQuestionSettings(props) {
   if (!foundNode) {
     return null;
   }
-  return /* @__PURE__ */ jsx85("div", { children: /* @__PURE__ */ jsx85(
+  return /* @__PURE__ */ jsx86("div", { children: /* @__PURE__ */ jsx86(
     TextInput,
     {
       ref: pointsTextInputRef,
@@ -10042,7 +10091,7 @@ function FillInTheBlankQuestionSettings(props) {
 }
 
 // src/plugins/FillInTheBlankQuestionPlugin/FillInTheBlankQuestionPlugin.tsx
-import { Fragment as Fragment30, jsx as jsx86 } from "react/jsx-runtime";
+import { Fragment as Fragment30, jsx as jsx87 } from "react/jsx-runtime";
 var INSERT_FILL_IN_THE_BLANK_QUESTION_COMMAND = createCommand13("INSERT_FILL_IN_THE_BLANK_QUESTION_COMMAND");
 function FillInTheBlankQuestionPlugin() {
   const {
@@ -10053,7 +10102,7 @@ function FillInTheBlankQuestionPlugin() {
   } = useBlockEditor();
   const [editor] = useLexicalComposerContext44();
   const settingsPanelStickyRef = useRef35(null);
-  useEffect54(() => {
+  useEffect55(() => {
     return mergeRegister15(
       editor.registerCommand(
         INSERT_FILL_IN_THE_BLANK_QUESTION_COMMAND,
@@ -10100,7 +10149,7 @@ function FillInTheBlankQuestionPlugin() {
                     onUpdate: () => {
                       if (fillInTheBlankNode) {
                         fillInTheBlankNode.__content.update(() => {
-                          const root = $getRoot9();
+                          const root = $getRoot8();
                           if (serializedData) {
                             const nodeSerialized2 = JSON.parse(serializedData);
                             const newNode = $parseSerializedNode(nodeSerialized2);
@@ -10134,7 +10183,7 @@ function FillInTheBlankQuestionPlugin() {
                   {
                     onUpdate: () => {
                       fillInTheBlankNode?.__content.update(() => {
-                        const root = $getRoot9();
+                        const root = $getRoot8();
                         let firstChild = root.getFirstChild();
                         if (!firstChild) {
                           firstChild = $createParagraphNode9();
@@ -10154,7 +10203,7 @@ function FillInTheBlankQuestionPlugin() {
       )
     );
   }, [editor]);
-  useEffect54(() => {
+  useEffect55(() => {
     if (isBlockEditorReady) {
       if (settingsPanelStickyRef.current) {
         registerSettingsPanel(
@@ -10164,20 +10213,20 @@ function FillInTheBlankQuestionPlugin() {
       }
     }
   }, [isBlockEditorReady]);
-  return /* @__PURE__ */ jsx86(Fragment30, { children: drawer && /* @__PURE__ */ jsx86(
+  return /* @__PURE__ */ jsx87(Fragment30, { children: drawer && /* @__PURE__ */ jsx87(
     StickyToPosition,
     {
       ref: settingsPanelStickyRef,
       container: drawer,
       children: (data, position, isVisible) => {
-        return /* @__PURE__ */ jsx86("div", { style: { width: position.width }, children: /* @__PURE__ */ jsx86(
+        return /* @__PURE__ */ jsx87("div", { style: { width: position.width }, children: /* @__PURE__ */ jsx87(
           SettingsCard,
           {
             isVisible: !!isVisible,
             container: drawer,
             title: "Fill In The Blank Settings",
             onClose: toggleSettingsPanelSwitch,
-            children: /* @__PURE__ */ jsx86(
+            children: /* @__PURE__ */ jsx87(
               FillInTheBlankQuestionSettings,
               {
                 nodeKey: data.nodeKey
@@ -10198,17 +10247,17 @@ import {
   $createNodeSelection as $createNodeSelection13,
   $createParagraphNode as $createParagraphNode10,
   $getNodeByKey as $getNodeByKey35,
-  $getRoot as $getRoot10,
+  $getRoot as $getRoot9,
   $setSelection as $setSelection13,
   COMMAND_PRIORITY_EDITOR as COMMAND_PRIORITY_EDITOR10,
   createCommand as createCommand14
 } from "lexical";
-import { useEffect as useEffect56, useRef as useRef37 } from "react";
+import { useEffect as useEffect57, useRef as useRef37 } from "react";
 
 // src/plugins/JournalEntryQuestionPlugin/JournalEntryQuestionSettings.tsx
 import { useLexicalComposerContext as useLexicalComposerContext45 } from "@lexical/react/LexicalComposerContext";
 import { $getNodeByKey as $getNodeByKey34 } from "lexical";
-import { useEffect as useEffect55, useMemo as useMemo7, useRef as useRef36, useState as useState7 } from "react";
+import { useEffect as useEffect56, useMemo as useMemo7, useRef as useRef36, useState as useState8 } from "react";
 
 // src/plugins/JournalEntryQuestionPlugin/validateErrorTolarancelnput.ts
 function validateErrorTolerance(input) {
@@ -10249,15 +10298,15 @@ function validatePointsInput2(input) {
 }
 
 // src/plugins/JournalEntryQuestionPlugin/JournalEntryQuestionSettings.tsx
-import { Fragment as Fragment31, jsx as jsx87, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment31, jsx as jsx88, jsxs as jsxs33 } from "react/jsx-runtime";
 function JournalEntryQuestionSettings(props) {
   const { nodeKey } = props;
   const [editor] = useLexicalComposerContext45();
   const pointsTextInputRef = useRef36(null);
   const errorToleranceTextInputRef = useRef36(null);
   const typeRadioGroupRef = useRef36(null);
-  const [foundNode, setFoundNode] = useState7();
-  useEffect55(() => {
+  const [foundNode, setFoundNode] = useState8();
+  useEffect56(() => {
     if (nodeKey) {
       editor.getEditorState().read(() => {
         const journalEntryNode = $getNodeByKey34(nodeKey);
@@ -10283,7 +10332,7 @@ function JournalEntryQuestionSettings(props) {
     return null;
   }
   return /* @__PURE__ */ jsxs33(Fragment31, { children: [
-    /* @__PURE__ */ jsx87("div", { children: /* @__PURE__ */ jsx87(
+    /* @__PURE__ */ jsx88("div", { children: /* @__PURE__ */ jsx88(
       TextInput,
       {
         ref: pointsTextInputRef,
@@ -10310,7 +10359,7 @@ function JournalEntryQuestionSettings(props) {
         }
       }
     ) }),
-    /* @__PURE__ */ jsx87("div", { children: /* @__PURE__ */ jsx87(
+    /* @__PURE__ */ jsx88("div", { children: /* @__PURE__ */ jsx88(
       TextInput,
       {
         ref: errorToleranceTextInputRef,
@@ -10341,7 +10390,7 @@ function JournalEntryQuestionSettings(props) {
         }
       }
     ) }),
-    /* @__PURE__ */ jsx87("div", { children: /* @__PURE__ */ jsx87(
+    /* @__PURE__ */ jsx88("div", { children: /* @__PURE__ */ jsx88(
       RadioGroup,
       {
         ref: typeRadioGroupRef,
@@ -10363,7 +10412,7 @@ function JournalEntryQuestionSettings(props) {
 }
 
 // src/plugins/JournalEntryQuestionPlugin/JournalEntryQuestionPlugin.tsx
-import { Fragment as Fragment32, jsx as jsx88 } from "react/jsx-runtime";
+import { Fragment as Fragment32, jsx as jsx89 } from "react/jsx-runtime";
 var INSERT_JOURNAL_ENTRY_QUESTION_COMMAND = createCommand14("INSERT_JOURNAL_ENTRY_QUESTION_COMMAND");
 function JournalEntryQuestionPlugin() {
   const {
@@ -10374,7 +10423,7 @@ function JournalEntryQuestionPlugin() {
   } = useBlockEditor();
   const [editor] = useLexicalComposerContext46();
   const settingsPanelStickyRef = useRef37(null);
-  useEffect56(() => {
+  useEffect57(() => {
     return mergeRegister16(
       editor.registerCommand(
         INSERT_JOURNAL_ENTRY_QUESTION_COMMAND,
@@ -10414,7 +10463,7 @@ function JournalEntryQuestionPlugin() {
                           let index = 0;
                           for (const questionItem of journalEntryNode.__lineItems) {
                             questionItem.account.update(() => {
-                              const root = $getRoot10();
+                              const root = $getRoot9();
                               let firstChild = root.getFirstChild();
                               if (!firstChild) {
                                 firstChild = $createParagraphNode10();
@@ -10426,7 +10475,7 @@ function JournalEntryQuestionPlugin() {
                             });
                             if (questionItem.debit) {
                               questionItem.debit.update(() => {
-                                const root = $getRoot10();
+                                const root = $getRoot9();
                                 let firstChild = root.getFirstChild();
                                 if (!firstChild) {
                                   firstChild = $createParagraphNode10();
@@ -10436,7 +10485,7 @@ function JournalEntryQuestionPlugin() {
                             }
                             if (questionItem.credit) {
                               questionItem.credit.update(() => {
-                                const root = $getRoot10();
+                                const root = $getRoot9();
                                 let firstChild = root.getFirstChild();
                                 if (!firstChild) {
                                   firstChild = $createParagraphNode10();
@@ -10460,7 +10509,7 @@ function JournalEntryQuestionPlugin() {
       )
     );
   }, [editor]);
-  useEffect56(() => {
+  useEffect57(() => {
     if (isBlockEditorReady && settingsPanelStickyRef.current) {
       registerSettingsPanel(
         JournalEntryQuestionNode.getType(),
@@ -10468,20 +10517,20 @@ function JournalEntryQuestionPlugin() {
       );
     }
   }, [isBlockEditorReady]);
-  return /* @__PURE__ */ jsx88(Fragment32, { children: drawer && /* @__PURE__ */ jsx88(
+  return /* @__PURE__ */ jsx89(Fragment32, { children: drawer && /* @__PURE__ */ jsx89(
     StickyToPosition,
     {
       ref: settingsPanelStickyRef,
       container: drawer,
       children: (data, position, isVisible) => {
-        return /* @__PURE__ */ jsx88("div", { style: { width: position.width }, children: /* @__PURE__ */ jsx88(
+        return /* @__PURE__ */ jsx89("div", { style: { width: position.width }, children: /* @__PURE__ */ jsx89(
           SettingsCard,
           {
             isVisible: !!isVisible,
             container: drawer,
             title: "Journal Entry Settings",
             onClose: toggleSettingsPanelSwitch,
-            children: isVisible && /* @__PURE__ */ jsx88(
+            children: isVisible && /* @__PURE__ */ jsx89(
               JournalEntryQuestionSettings,
               {
                 nodeKey: data.nodeKey
@@ -10497,7 +10546,7 @@ function JournalEntryQuestionPlugin() {
 // src/plugins/MatchingQuestionPlugin/MatchingQuestionSettings.tsx
 import { useLexicalComposerContext as useLexicalComposerContext47 } from "@lexical/react/LexicalComposerContext";
 import { $getNodeByKey as $getNodeByKey36 } from "lexical";
-import { useEffect as useEffect57, useRef as useRef38, useState as useState8 } from "react";
+import { useEffect as useEffect58, useRef as useRef38, useState as useState9 } from "react";
 
 // src/plugins/MatchingQuestionPlugin/validatePointslnput.ts
 function validatePointsInput3(input) {
@@ -10519,13 +10568,13 @@ function validatePointsInput3(input) {
 }
 
 // src/plugins/MatchingQuestionPlugin/MatchingQuestionSettings.tsx
-import { jsx as jsx89 } from "react/jsx-runtime";
+import { jsx as jsx90 } from "react/jsx-runtime";
 function MatchingQuestionSettings(props) {
   const { nodeKey } = props;
   const [editor] = useLexicalComposerContext47();
   const pointsTextInputRef = useRef38(null);
-  const [foundNode, setFoundNode] = useState8();
-  useEffect57(() => {
+  const [foundNode, setFoundNode] = useState9();
+  useEffect58(() => {
     if (nodeKey) {
       editor.getEditorState().read(() => {
         const matchingQuestionNode = $getNodeByKey36(nodeKey);
@@ -10538,7 +10587,7 @@ function MatchingQuestionSettings(props) {
   if (!foundNode) {
     return null;
   }
-  return /* @__PURE__ */ jsx89("div", { children: /* @__PURE__ */ jsx89(
+  return /* @__PURE__ */ jsx90("div", { children: /* @__PURE__ */ jsx90(
     TextInput,
     {
       ref: pointsTextInputRef,
@@ -10574,13 +10623,13 @@ import {
   $createNodeSelection as $createNodeSelection14,
   $createParagraphNode as $createParagraphNode11,
   $getNodeByKey as $getNodeByKey37,
-  $getRoot as $getRoot11,
+  $getRoot as $getRoot10,
   $setSelection as $setSelection14,
   COMMAND_PRIORITY_EDITOR as COMMAND_PRIORITY_EDITOR11,
   createCommand as createCommand15
 } from "lexical";
-import { useEffect as useEffect58, useRef as useRef39 } from "react";
-import { Fragment as Fragment33, jsx as jsx90 } from "react/jsx-runtime";
+import { useEffect as useEffect59, useRef as useRef39 } from "react";
+import { Fragment as Fragment33, jsx as jsx91 } from "react/jsx-runtime";
 var INSERT_MATCHING_QUESTION_COMMAND = createCommand15("INSERT_MATCHING_QUESTION_COMMAND");
 function MatchingQuestionPlugin() {
   const {
@@ -10591,7 +10640,7 @@ function MatchingQuestionPlugin() {
   } = useBlockEditor();
   const [editor] = useLexicalComposerContext48();
   const settingsPanelStickyRef = useRef39(null);
-  useEffect58(() => {
+  useEffect59(() => {
     return mergeRegister17(
       editor.registerCommand(
         INSERT_MATCHING_QUESTION_COMMAND,
@@ -10618,7 +10667,7 @@ function MatchingQuestionPlugin() {
                     for (const questionItem of matchingQuestionNode.__items) {
                       if (questionItem.itemPremiseContent) {
                         questionItem.itemPremiseContent.update(() => {
-                          const root = $getRoot11();
+                          const root = $getRoot10();
                           let firstChild = root.getFirstChild();
                           if (!firstChild) {
                             firstChild = $createParagraphNode11();
@@ -10630,7 +10679,7 @@ function MatchingQuestionPlugin() {
                         });
                       }
                       questionItem.itemOptionContent.update(() => {
-                        const root = $getRoot11();
+                        const root = $getRoot10();
                         let firstChild = root.getFirstChild();
                         if (!firstChild) {
                           firstChild = $createParagraphNode11();
@@ -10650,7 +10699,7 @@ function MatchingQuestionPlugin() {
       )
     );
   }, [editor]);
-  useEffect58(() => {
+  useEffect59(() => {
     if (isBlockEditorReady && settingsPanelStickyRef.current) {
       registerSettingsPanel(
         MatchingQuestionNode.getType(),
@@ -10658,20 +10707,20 @@ function MatchingQuestionPlugin() {
       );
     }
   }, [isBlockEditorReady]);
-  return /* @__PURE__ */ jsx90(Fragment33, { children: drawer && /* @__PURE__ */ jsx90(
+  return /* @__PURE__ */ jsx91(Fragment33, { children: drawer && /* @__PURE__ */ jsx91(
     StickyToPosition,
     {
       ref: settingsPanelStickyRef,
       container: drawer,
       children: (data, position, isVisible) => {
-        return /* @__PURE__ */ jsx90("div", { style: { width: position.width }, children: /* @__PURE__ */ jsx90(
+        return /* @__PURE__ */ jsx91("div", { style: { width: position.width }, children: /* @__PURE__ */ jsx91(
           SettingsCard,
           {
             isVisible: !!isVisible,
             container: drawer,
             title: "Matching Settings",
             onClose: toggleSettingsPanelSwitch,
-            children: isVisible && /* @__PURE__ */ jsx90(
+            children: isVisible && /* @__PURE__ */ jsx91(
               MatchingQuestionSettings,
               {
                 nodeKey: data.nodeKey
@@ -10730,17 +10779,17 @@ import {
   $createNodeSelection as $createNodeSelection15,
   $createParagraphNode as $createParagraphNode12,
   $getNodeByKey as $getNodeByKey39,
-  $getRoot as $getRoot12,
+  $getRoot as $getRoot11,
   $setSelection as $setSelection15,
   COMMAND_PRIORITY_EDITOR as COMMAND_PRIORITY_EDITOR12,
   createCommand as createCommand16
 } from "lexical";
-import { useEffect as useEffect60, useRef as useRef41 } from "react";
+import { useEffect as useEffect61, useRef as useRef41 } from "react";
 
 // src/plugins/MultipleOptionQuestionPlugin/MultipleOptionQuestionSettings.tsx
 import { useLexicalComposerContext as useLexicalComposerContext49 } from "@lexical/react/LexicalComposerContext";
 import { $getNodeByKey as $getNodeByKey38 } from "lexical";
-import { useEffect as useEffect59, useRef as useRef40, useState as useState9 } from "react";
+import { useEffect as useEffect60, useRef as useRef40, useState as useState10 } from "react";
 
 // src/plugins/MultipleOptionQuestionPlugin/validateChoicesInput.ts
 function validateChoicesInput(input, min) {
@@ -10784,7 +10833,7 @@ function validatePointsInput4(input) {
 }
 
 // src/plugins/MultipleOptionQuestionPlugin/MultipleOptionQuestionSettings.tsx
-import { Fragment as Fragment34, jsx as jsx91, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment34, jsx as jsx92, jsxs as jsxs34 } from "react/jsx-runtime";
 function MultipleOptionQuestionSettings(props) {
   const { nodeKey } = props;
   const [editor] = useLexicalComposerContext49();
@@ -10795,8 +10844,8 @@ function MultipleOptionQuestionSettings(props) {
   const correctChoicesTextInputRef = useRef40(null);
   const incorrectChoicesTextInputRef = useRef40(null);
   const foundNodeRef = useRef40();
-  const [questionType, setQuestionType] = useState9();
-  useEffect59(() => {
+  const [questionType, setQuestionType] = useState10();
+  useEffect60(() => {
     if (nodeKey) {
       editor.getEditorState().read(() => {
         const optionsQuestionNode = $getNodeByKey38(nodeKey);
@@ -10811,7 +10860,7 @@ function MultipleOptionQuestionSettings(props) {
     return null;
   }
   return /* @__PURE__ */ jsxs34(Fragment34, { children: [
-    /* @__PURE__ */ jsx91("div", { children: /* @__PURE__ */ jsx91(
+    /* @__PURE__ */ jsx92("div", { children: /* @__PURE__ */ jsx92(
       TextInput,
       {
         ref: pointsTextInputRef,
@@ -10838,7 +10887,7 @@ function MultipleOptionQuestionSettings(props) {
         }
       }
     ) }),
-    questionType === "multiple-answers" && /* @__PURE__ */ jsx91("div", { children: /* @__PURE__ */ jsx91(
+    questionType === "multiple-answers" && /* @__PURE__ */ jsx92("div", { children: /* @__PURE__ */ jsx92(
       RadioGroup,
       {
         ref: gradingRadioGroupRef,
@@ -10865,7 +10914,7 @@ function MultipleOptionQuestionSettings(props) {
         }
       }
     ) }),
-    questionType === "multiple-answers" && /* @__PURE__ */ jsx91("div", { children: /* @__PURE__ */ jsx91(
+    questionType === "multiple-answers" && /* @__PURE__ */ jsx92("div", { children: /* @__PURE__ */ jsx92(
       TextInput,
       {
         ref: correctChoicesTextInputRef,
@@ -10898,7 +10947,7 @@ function MultipleOptionQuestionSettings(props) {
         }
       }
     ) }),
-    questionType === "multiple-answers" && /* @__PURE__ */ jsx91("div", { children: /* @__PURE__ */ jsx91(
+    questionType === "multiple-answers" && /* @__PURE__ */ jsx92("div", { children: /* @__PURE__ */ jsx92(
       TextInput,
       {
         ref: incorrectChoicesTextInputRef,
@@ -10931,7 +10980,7 @@ function MultipleOptionQuestionSettings(props) {
         }
       }
     ) }),
-    questionType === "multiple-choice" && /* @__PURE__ */ jsx91("div", { children: /* @__PURE__ */ jsx91(
+    questionType === "multiple-choice" && /* @__PURE__ */ jsx92("div", { children: /* @__PURE__ */ jsx92(
       TextInput,
       {
         ref: choicesTextInputRef,
@@ -10962,13 +11011,13 @@ function MultipleOptionQuestionSettings(props) {
         }
       }
     ) }),
-    /* @__PURE__ */ jsx91(
+    /* @__PURE__ */ jsx92(
       "div",
       {
         style: {
           paddingBottom: "var(--sl-spacing-medium)"
         },
-        children: /* @__PURE__ */ jsx91(
+        children: /* @__PURE__ */ jsx92(
           Checkbox,
           {
             ref: noneOfTheAboveInputRef,
@@ -10992,7 +11041,7 @@ function MultipleOptionQuestionSettings(props) {
 }
 
 // src/plugins/MultipleOptionQuestionPlugin/MultipleOptionQuestionPlugin.tsx
-import { Fragment as Fragment35, jsx as jsx92 } from "react/jsx-runtime";
+import { Fragment as Fragment35, jsx as jsx93 } from "react/jsx-runtime";
 var INSERT_MULTIPLE_OPTION_QUESTION_COMMAND = createCommand16("INSERT_MULTIPLE_OPTION_QUESTION_COMMAND");
 var REPLACE_LIST_WITH_MULTIPLE_OPTION_QUESTION_COMMAND = createCommand16("REPLACE_LIST_WITH_MULTIPLE_OPTION_QUESTION_COMMAND");
 var REPLACE_MULTIPLE_OPTION_QUESTION_COMMAND = createCommand16("REPLACE_MULTIPLE_OPTION_QUESTION_COMMAND");
@@ -11005,7 +11054,7 @@ function MultipleOptionQuestionPlugin() {
   } = useBlockEditor();
   const [editor] = useLexicalComposerContext50();
   const settingsPanelStickyRef = useRef41(null);
-  useEffect60(() => {
+  useEffect61(() => {
     return mergeRegister18(
       editor.registerCommand(
         INSERT_MULTIPLE_OPTION_QUESTION_COMMAND,
@@ -11044,7 +11093,7 @@ function MultipleOptionQuestionPlugin() {
                           let index = 0;
                           for (const optionItem of foundNode.__options) {
                             optionItem.content.update(() => {
-                              const root = $getRoot12();
+                              const root = $getRoot11();
                               let firstChild = root.getFirstChild();
                               if (!firstChild) {
                                 firstChild = $createParagraphNode12();
@@ -11118,7 +11167,7 @@ function MultipleOptionQuestionPlugin() {
                       const foundNode = $getNodeByKey39(newNodeKey);
                       if ($isMultipleOptionQuestionNode(foundNode)) {
                         foundNode.__options[0].content.update(() => {
-                          const root = $getRoot12();
+                          const root = $getRoot11();
                           const firstChild = root.getFirstChild();
                           firstChild?.selectStart();
                         });
@@ -11167,7 +11216,7 @@ function MultipleOptionQuestionPlugin() {
                       const foundNode = $getNodeByKey39(newNodeKey);
                       if ($isMultipleOptionQuestionNode(foundNode)) {
                         foundNode.__options[0].content.update(() => {
-                          const root = $getRoot12();
+                          const root = $getRoot11();
                           const firstChild = root.getFirstChild();
                           firstChild?.selectStart();
                         });
@@ -11184,7 +11233,7 @@ function MultipleOptionQuestionPlugin() {
       )
     );
   }, [editor]);
-  useEffect60(() => {
+  useEffect61(() => {
     if (isBlockEditorReady && settingsPanelStickyRef.current) {
       registerSettingsPanel(
         MultipleOptionQuestionNode.getType(),
@@ -11192,7 +11241,7 @@ function MultipleOptionQuestionPlugin() {
       );
     }
   }, [isBlockEditorReady]);
-  return /* @__PURE__ */ jsx92(Fragment35, { children: drawer && /* @__PURE__ */ jsx92(
+  return /* @__PURE__ */ jsx93(Fragment35, { children: drawer && /* @__PURE__ */ jsx93(
     StickyToPosition,
     {
       ref: settingsPanelStickyRef,
@@ -11209,14 +11258,14 @@ function MultipleOptionQuestionPlugin() {
             }
           });
         }
-        return /* @__PURE__ */ jsx92("div", { style: { width: position.width }, children: /* @__PURE__ */ jsx92(
+        return /* @__PURE__ */ jsx93("div", { style: { width: position.width }, children: /* @__PURE__ */ jsx93(
           SettingsCard,
           {
             isVisible: !!isVisible,
             container: drawer,
             title: questionType === "multiple-answers" ? "Multiple Answers Settings" : "Multiple Choice Settings",
             onClose: toggleSettingsPanelSwitch,
-            children: isVisible && /* @__PURE__ */ jsx92(
+            children: isVisible && /* @__PURE__ */ jsx93(
               MultipleOptionQuestionSettings,
               {
                 nodeKey: data.nodeKey
@@ -11236,17 +11285,17 @@ import {
   $createNodeSelection as $createNodeSelection16,
   $createParagraphNode as $createParagraphNode13,
   $getNodeByKey as $getNodeByKey41,
-  $getRoot as $getRoot13,
+  $getRoot as $getRoot12,
   $setSelection as $setSelection16,
   COMMAND_PRIORITY_EDITOR as COMMAND_PRIORITY_EDITOR13,
   createCommand as createCommand17
 } from "lexical";
-import { useEffect as useEffect62, useRef as useRef43 } from "react";
+import { useEffect as useEffect63, useRef as useRef43 } from "react";
 
 // src/plugins/ShortAnswerQuestionPlugin/ShortAnswerQuestionSettings.tsx
 import { useLexicalComposerContext as useLexicalComposerContext51 } from "@lexical/react/LexicalComposerContext";
 import { $getNodeByKey as $getNodeByKey40 } from "lexical";
-import { useEffect as useEffect61, useRef as useRef42, useState as useState10 } from "react";
+import { useEffect as useEffect62, useRef as useRef42, useState as useState11 } from "react";
 
 // src/plugins/ShortAnswerQuestionPlugin/validateMaxWordsInput.ts
 function validateMaxWordsInput(input, min) {
@@ -11290,14 +11339,14 @@ function validatePointsInput5(input) {
 }
 
 // src/plugins/ShortAnswerQuestionPlugin/ShortAnswerQuestionSettings.tsx
-import { Fragment as Fragment36, jsx as jsx93, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment36, jsx as jsx94, jsxs as jsxs35 } from "react/jsx-runtime";
 function ShortAnswerQuestionSettings(props) {
   const { nodeKey } = props;
   const [editor] = useLexicalComposerContext51();
   const pointsTextInputRef = useRef42(null);
   const maxWordsTextInputRef = useRef42(null);
-  const [foundNode, setFoundNode] = useState10();
-  useEffect61(() => {
+  const [foundNode, setFoundNode] = useState11();
+  useEffect62(() => {
     if (nodeKey) {
       editor.getEditorState().read(() => {
         const shortAnswerNode = $getNodeByKey40(nodeKey);
@@ -11311,7 +11360,7 @@ function ShortAnswerQuestionSettings(props) {
     return null;
   }
   return /* @__PURE__ */ jsxs35(Fragment36, { children: [
-    /* @__PURE__ */ jsx93("div", { children: /* @__PURE__ */ jsx93(
+    /* @__PURE__ */ jsx94("div", { children: /* @__PURE__ */ jsx94(
       TextInput,
       {
         ref: pointsTextInputRef,
@@ -11338,7 +11387,7 @@ function ShortAnswerQuestionSettings(props) {
         }
       }
     ) }),
-    /* @__PURE__ */ jsx93("div", { children: /* @__PURE__ */ jsx93(
+    /* @__PURE__ */ jsx94("div", { children: /* @__PURE__ */ jsx94(
       TextInput,
       {
         ref: maxWordsTextInputRef,
@@ -11369,7 +11418,7 @@ function ShortAnswerQuestionSettings(props) {
 }
 
 // src/plugins/ShortAnswerQuestionPlugin/ShortAnswerQuestionPlugin.tsx
-import { Fragment as Fragment37, jsx as jsx94 } from "react/jsx-runtime";
+import { Fragment as Fragment37, jsx as jsx95 } from "react/jsx-runtime";
 var INSERT_SHORT_ANSWER_QUESTION_COMMAND = createCommand17("INSERT_SHORT_ANSWER_QUESTION_COMMAND");
 function ShortAnswerQuestionPlugin() {
   const {
@@ -11380,7 +11429,7 @@ function ShortAnswerQuestionPlugin() {
   } = useBlockEditor();
   const [editor] = useLexicalComposerContext52();
   const settingsPanelStickyRef = useRef43(null);
-  useEffect62(() => {
+  useEffect63(() => {
     return mergeRegister19(
       editor.registerCommand(
         INSERT_SHORT_ANSWER_QUESTION_COMMAND,
@@ -11414,7 +11463,7 @@ function ShortAnswerQuestionPlugin() {
                         const shortAnswerNode = $getNodeByKey41(newNodeKey);
                         if ($isShortAnswerQuestionNode(shortAnswerNode)) {
                           shortAnswerNode.__notes.update(() => {
-                            const root = $getRoot13();
+                            const root = $getRoot12();
                             let firstChild = root.getFirstChild();
                             if (!firstChild) {
                               firstChild = $createParagraphNode13();
@@ -11436,7 +11485,7 @@ function ShortAnswerQuestionPlugin() {
       )
     );
   }, [editor]);
-  useEffect62(() => {
+  useEffect63(() => {
     if (isBlockEditorReady && settingsPanelStickyRef.current) {
       registerSettingsPanel(
         ShortAnswerQuestionNode.getType(),
@@ -11444,20 +11493,20 @@ function ShortAnswerQuestionPlugin() {
       );
     }
   }, [isBlockEditorReady]);
-  return /* @__PURE__ */ jsx94(Fragment37, { children: drawer && /* @__PURE__ */ jsx94(
+  return /* @__PURE__ */ jsx95(Fragment37, { children: drawer && /* @__PURE__ */ jsx95(
     StickyToPosition,
     {
       ref: settingsPanelStickyRef,
       container: drawer,
       children: (data, position, isVisible) => {
-        return /* @__PURE__ */ jsx94("div", { style: { width: position.width }, children: /* @__PURE__ */ jsx94(
+        return /* @__PURE__ */ jsx95("div", { style: { width: position.width }, children: /* @__PURE__ */ jsx95(
           SettingsCard,
           {
             isVisible: !!isVisible,
             container: drawer,
             title: "Short Answer Settings",
             onClose: toggleSettingsPanelSwitch,
-            children: isVisible && /* @__PURE__ */ jsx94(
+            children: isVisible && /* @__PURE__ */ jsx95(
               ShortAnswerQuestionSettings,
               {
                 nodeKey: data.nodeKey
@@ -11497,7 +11546,7 @@ import {
   Table2
 } from "lucide-react";
 import { useMemo as useMemo8 } from "react";
-import { jsx as jsx95 } from "react/jsx-runtime";
+import { jsx as jsx96 } from "react/jsx-runtime";
 var handlerStyle3 = {
   display: "flex",
   zIndex: 10,
@@ -11839,7 +11888,7 @@ function AddMenuHandle(props) {
     }
     return menu2;
   }, [hoveredNode]);
-  return /* @__PURE__ */ jsx95("div", { id: handlerKey, style: handlerStyle3, children: /* @__PURE__ */ jsx95(
+  return /* @__PURE__ */ jsx96("div", { id: handlerKey, style: handlerStyle3, children: /* @__PURE__ */ jsx96(
     DropdownWrapper,
     {
       placement: "bottom-start",
@@ -11850,7 +11899,7 @@ function AddMenuHandle(props) {
       onHideMenu: () => {
         removeVisiblePopup();
       },
-      children: /* @__PURE__ */ jsx95("div", { slot: "trigger", className: "add-menu-handle", children: /* @__PURE__ */ jsx95(Icon, { icon: Plus }) })
+      children: /* @__PURE__ */ jsx96("div", { slot: "trigger", className: "add-menu-handle", children: /* @__PURE__ */ jsx96(Icon, { icon: Plus }) })
     }
   ) });
 }
@@ -11888,7 +11937,7 @@ function renderCopyToClipboardMenu(nodeKey, editor) {
 import {
   $createParagraphNode as $createParagraphNode15,
   $getNodeByKey as $getNodeByKey44,
-  $getRoot as $getRoot14
+  $getRoot as $getRoot13
 } from "lexical";
 import { Trash2 as Trash23 } from "lucide-react";
 function renderDeleteMenu(nodeKey, editor) {
@@ -11909,7 +11958,7 @@ function renderDeleteMenu(nodeKey, editor) {
             } else if (prevBlock) {
               prevBlock.selectStart();
             } else {
-              const root = $getRoot14();
+              const root = $getRoot13();
               const newParagraph = $createParagraphNode15();
               root.append(newParagraph);
               newParagraph.selectStart();
@@ -12180,7 +12229,7 @@ import { HeadingNode as HeadingNode3 } from "@lexical/rich-text";
 import { ParagraphNode as ParagraphNode3 } from "lexical";
 import { GripVertical } from "lucide-react";
 import { useMemo as useMemo9 } from "react";
-import { jsx as jsx96 } from "react/jsx-runtime";
+import { jsx as jsx97 } from "react/jsx-runtime";
 var handlerStyle4 = {
   display: "flex",
   zIndex: 10,
@@ -12267,7 +12316,7 @@ function DragHandle(props) {
     }
     return menu2;
   }, [hoveredNode, currentEditor]);
-  return /* @__PURE__ */ jsx96(
+  return /* @__PURE__ */ jsx97(
     "div",
     {
       id: handlerKey,
@@ -12275,7 +12324,7 @@ function DragHandle(props) {
       ...listeners,
       ...attributes,
       style: handlerStyle4,
-      children: /* @__PURE__ */ jsx96(
+      children: /* @__PURE__ */ jsx97(
         DropdownWrapper,
         {
           placement: "bottom-start",
@@ -12286,7 +12335,7 @@ function DragHandle(props) {
           onHideMenu: () => {
             removeVisiblePopup();
           },
-          children: /* @__PURE__ */ jsx96("div", { slot: "trigger", className: "draggable-handle", children: /* @__PURE__ */ jsx96(Icon, { icon: GripVertical }) })
+          children: /* @__PURE__ */ jsx97("div", { slot: "trigger", className: "draggable-handle", children: /* @__PURE__ */ jsx97(Icon, { icon: GripVertical }) })
         }
       )
     }
@@ -12320,7 +12369,7 @@ function findNodePosition(rows, point, lastFound) {
 }
 
 // src/content/node/NodeDragOverlay.tsx
-import { jsx as jsx97 } from "react/jsx-runtime";
+import { jsx as jsx98 } from "react/jsx-runtime";
 var overlayStyle2 = {
   display: "flex",
   minWidth: "150px",
@@ -12339,12 +12388,12 @@ var overlayStyle2 = {
   boxShadow: "0 1px 3px rgba(34, 25, 25, 0.4)"
 };
 function NodeDragOverlay(props) {
-  return /* @__PURE__ */ jsx97("div", { style: overlayStyle2, children: props.children() });
+  return /* @__PURE__ */ jsx98("div", { style: overlayStyle2, children: props.children() });
 }
 
 // src/content/node/NodeDropMarker.tsx
-import { useEffect as useEffect63, useRef as useRef44 } from "react";
-import { jsx as jsx98 } from "react/jsx-runtime";
+import { useEffect as useEffect64, useRef as useRef44 } from "react";
+import { jsx as jsx99 } from "react/jsx-runtime";
 var placeholderStyle3 = {
   position: "absolute",
   top: "calc(-1 * var(--sl-spacing-small) / 2)",
@@ -12363,7 +12412,7 @@ var lineStyle3 = {
 function NodeDropMarker(props) {
   const { visible, top } = props;
   const lineDivRef = useRef44(null);
-  useEffect63(() => {
+  useEffect64(() => {
     if (visible && lineDivRef.current) {
       lineDivRef.current.style.transition = "none";
       lineDivRef.current.style.width = "0px";
@@ -12375,7 +12424,7 @@ function NodeDropMarker(props) {
       }, 5);
     }
   }, [visible, top]);
-  return /* @__PURE__ */ jsx98("div", { style: { ...placeholderStyle3, width: props.width }, children: /* @__PURE__ */ jsx98("div", { ref: lineDivRef, style: lineStyle3 }) });
+  return /* @__PURE__ */ jsx99("div", { style: { ...placeholderStyle3, width: props.width }, children: /* @__PURE__ */ jsx99("div", { ref: lineDivRef, style: lineStyle3 }) });
 }
 
 // src/content/node/NodeDraggableHandleSticky.tsx
@@ -12393,20 +12442,20 @@ import {
 } from "lexical";
 import throttle3 from "lodash-es/throttle";
 import {
-  forwardRef as forwardRef11,
+  forwardRef as forwardRef12,
   useImperativeHandle as useImperativeHandle11,
   useRef as useRef45,
-  useState as useState11
+  useState as useState12
 } from "react";
-import { Fragment as Fragment38, jsx as jsx99, jsxs as jsxs36 } from "react/jsx-runtime";
-var NodeDraggableHandleSticky = forwardRef11((props, ref) => {
+import { Fragment as Fragment38, jsx as jsx100, jsxs as jsxs36 } from "react/jsx-runtime";
+var NodeDraggableHandleSticky = forwardRef12((props, ref) => {
   const {
     getRegisteredEditor,
     setHandleDragged,
     unsetHandleDragged
   } = useNode();
   const anchorElementRef = useRef45();
-  const [isAnchorElementReady, setAnchorElementReady] = useState11(false);
+  const [isAnchorElementReady, setAnchorElementReady] = useState12(false);
   const nodeHandleSticky = useRef45(null);
   const dropMarkerSticky = useRef45(null);
   const nodePositionsRef = useRef45([]);
@@ -12472,7 +12521,7 @@ var NodeDraggableHandleSticky = forwardRef11((props, ref) => {
     isHandleVisible: () => !!nodeHandleSticky.current?.isVisible()
   }));
   if (!isAnchorElementReady || !anchorElementRef.current) {
-    return /* @__PURE__ */ jsx99(Fragment38, {});
+    return /* @__PURE__ */ jsx100(Fragment38, {});
   }
   return /* @__PURE__ */ jsxs36(
     DndContext4,
@@ -12695,7 +12744,7 @@ var NodeDraggableHandleSticky = forwardRef11((props, ref) => {
         unsetHandleDragged();
       },
       children: [
-        /* @__PURE__ */ jsx99(
+        /* @__PURE__ */ jsx100(
           StickyToPosition,
           {
             ref: nodeHandleSticky,
@@ -12713,21 +12762,21 @@ var NodeDraggableHandleSticky = forwardRef11((props, ref) => {
                     gap: "6px"
                   },
                   children: [
-                    /* @__PURE__ */ jsx99(AddMenuHandle, { hoveredNode: data.hoveredNode }),
-                    /* @__PURE__ */ jsx99(DragHandle, { hoveredNode: data.hoveredNode })
+                    /* @__PURE__ */ jsx100(AddMenuHandle, { hoveredNode: data.hoveredNode }),
+                    /* @__PURE__ */ jsx100(DragHandle, { hoveredNode: data.hoveredNode })
                   ]
                 }
               );
             }
           }
         ),
-        /* @__PURE__ */ jsx99(
+        /* @__PURE__ */ jsx100(
           StickyToPosition,
           {
             ref: dropMarkerSticky,
             container: anchorElementRef.current,
             children: (_data, position, isVisible) => {
-              return /* @__PURE__ */ jsx99(
+              return /* @__PURE__ */ jsx100(
                 NodeDropMarker,
                 {
                   top: `${position.top}px`,
@@ -12738,8 +12787,8 @@ var NodeDraggableHandleSticky = forwardRef11((props, ref) => {
             }
           }
         ),
-        /* @__PURE__ */ jsx99(DragOverlay3, { dropAnimation: null, children: /* @__PURE__ */ jsx99(NodeDragOverlay, { children: () => {
-          return /* @__PURE__ */ jsx99("div", { children: "Move Block" });
+        /* @__PURE__ */ jsx100(DragOverlay3, { dropAnimation: null, children: /* @__PURE__ */ jsx100(NodeDragOverlay, { children: () => {
+          return /* @__PURE__ */ jsx100("div", { children: "Move Block" });
         } }) })
       ]
     }
@@ -12747,7 +12796,7 @@ var NodeDraggableHandleSticky = forwardRef11((props, ref) => {
 });
 
 // src/content/node/NodeProvider.tsx
-import { jsx as jsx100, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx101, jsxs as jsxs37 } from "react/jsx-runtime";
 var NodeProviderContext = React18.createContext(null);
 function NodeProvider(props) {
   const { children } = props;
@@ -12818,7 +12867,7 @@ function NodeProvider(props) {
   const getHandleOverNodeKey = () => {
     return handleOverNodeKeyRef.current;
   };
-  useEffect64(() => {
+  useEffect65(() => {
     return () => {
       const editorsKeys = Object.keys(editorsRegisterRef.current);
       for (const editorKey of editorsKeys) {
@@ -12849,7 +12898,7 @@ function NodeProvider(props) {
       },
       children: [
         children,
-        /* @__PURE__ */ jsx100(NodeDraggableHandleSticky, { ref: nodeDraggableHandleRef })
+        /* @__PURE__ */ jsx101(NodeDraggableHandleSticky, { ref: nodeDraggableHandleRef })
       ]
     }
   );
@@ -12868,18 +12917,18 @@ import { TableNode as TableNode5 } from "@lexical/table";
 import { mergeRegister as mergeRegister20 } from "@lexical/utils";
 import {
   $createParagraphNode as $createParagraphNode17,
-  $getRoot as $getRoot15,
+  $getRoot as $getRoot14,
   $isParagraphNode as $isParagraphNode2
 } from "lexical";
-import { useEffect as useEffect65 } from "react";
-import { Fragment as Fragment39, jsx as jsx101 } from "react/jsx-runtime";
+import { useEffect as useEffect66 } from "react";
+import { Fragment as Fragment39, jsx as jsx102 } from "react/jsx-runtime";
 function AutoBottomParagraphPlugin() {
   const [editor] = useLexicalComposerContext53();
   const listener = (nodeMutations) => {
     for (const [_key, mutation] of nodeMutations) {
       if (mutation === "created") {
         editor.update(() => {
-          const rootNode = $getRoot15();
+          const rootNode = $getRoot14();
           if (rootNode) {
             const lastChild = rootNode.getLastChild();
             if (lastChild && !$isParagraphNode2(lastChild)) {
@@ -12891,7 +12940,7 @@ function AutoBottomParagraphPlugin() {
       }
     }
   };
-  useEffect65(() => {
+  useEffect66(() => {
     return mergeRegister20(
       ...[
         ImageNode,
@@ -12914,19 +12963,19 @@ function AutoBottomParagraphPlugin() {
       )
     );
   }, [editor]);
-  return /* @__PURE__ */ jsx101(Fragment39, {});
+  return /* @__PURE__ */ jsx102(Fragment39, {});
 }
 
 // src/plugins/AutoFocusPlugin/AutoFocusPlugin.tsx
 import { useLexicalComposerContext as useLexicalComposerContext54 } from "@lexical/react/LexicalComposerContext";
-import { $getRoot as $getRoot16 } from "lexical";
-import { useEffect as useEffect66 } from "react";
+import { $getRoot as $getRoot15 } from "lexical";
+import { useEffect as useEffect67 } from "react";
 function AutoFocusPlugin() {
   const [editor] = useLexicalComposerContext54();
-  useEffect66(() => {
+  useEffect67(() => {
     setTimeout(() => {
       editor.update(() => {
-        const rootNode = $getRoot16();
+        const rootNode = $getRoot15();
         if (rootNode.getChildrenKeys().length >= 1) {
           rootNode.getFirstChild()?.selectStart();
         }
@@ -12941,23 +12990,23 @@ function AutoFocusPlugin() {
 
 // src/plugins/EditorRefPlugin/EditorRefPlugin.tsx
 import { useLexicalComposerContext as useLexicalComposerContext55 } from "@lexical/react/LexicalComposerContext";
-import { useEffect as useEffect67 } from "react";
+import { useEffect as useEffect68 } from "react";
 function EditorRefPlugin(props) {
   const [editor] = useLexicalComposerContext55();
   const { onMountRef } = props;
-  useEffect67(() => {
+  useEffect68(() => {
     onMountRef(editor);
   }, [editor]);
   return null;
 }
 
 // src/plugins/MarkdownPlugin/MarkdownPlugin.tsx
-import { useEffect as useEffect68 } from "react";
+import { useEffect as useEffect69 } from "react";
 import { useLexicalComposerContext as useLexicalComposerContext56 } from "@lexical/react/LexicalComposerContext";
 
 // src/plugins/MarkdownPlugin/markdown/MarkdownExport.ts
 import {
-  $getRoot as $getRoot17,
+  $getRoot as $getRoot16,
   $isDecoratorNode,
   $isElementNode as $isElementNode3,
   $isLineBreakNode as $isLineBreakNode2,
@@ -13219,7 +13268,7 @@ import {
   $createLineBreakNode as $createLineBreakNode2,
   $createParagraphNode as $createParagraphNode18,
   $createTextNode as $createTextNode5,
-  $getRoot as $getRoot18,
+  $getRoot as $getRoot17,
   $getSelection as $getSelection8,
   $isParagraphNode as $isParagraphNode4
 } from "lexical";
@@ -13826,7 +13875,7 @@ var TRANSFORMERS = [
 // src/plugins/MarkdownPlugin/MarkdownPlugin.tsx
 function MarkdownPlugin() {
   const [editor] = useLexicalComposerContext56();
-  useEffect68(() => {
+  useEffect69(() => {
     return registerMarkdownShortcuts(editor, TRANSFORMERS);
   }, [editor]);
   return null;
@@ -13834,8 +13883,8 @@ function MarkdownPlugin() {
 
 // src/plugins/NodeMousePlugin/NodeMouseAnchorPlugin.tsx
 import { useLexicalComposerContext as useLexicalComposerContext57 } from "@lexical/react/LexicalComposerContext";
-import { useEffect as useEffect69, useRef as useRef47 } from "react";
-import { Fragment as Fragment40, jsx as jsx102 } from "react/jsx-runtime";
+import { useEffect as useEffect70, useRef as useRef47 } from "react";
+import { Fragment as Fragment40, jsx as jsx103 } from "react/jsx-runtime";
 function NodeMouseAnchorPlugin() {
   const [editor] = useLexicalComposerContext57();
   const { setAnchorElement, hideHandles } = useNode();
@@ -13852,7 +13901,7 @@ function NodeMouseAnchorPlugin() {
     }
     hideHandles();
   };
-  useEffect69(() => {
+  useEffect70(() => {
     const removeRootListener = editor.registerRootListener(
       (nextRootElem) => {
         if (nextRootElem?.parentElement) {
@@ -13885,7 +13934,7 @@ function NodeMouseAnchorPlugin() {
       removeRootListener();
     };
   }, [editor]);
-  return /* @__PURE__ */ jsx102(Fragment40, {});
+  return /* @__PURE__ */ jsx103(Fragment40, {});
 }
 
 // src/plugins/NodeMousePlugin/NodeMousePlugin.tsx
@@ -13903,13 +13952,13 @@ import {
   $createParagraphNode as $createParagraphNode19,
   $createTextNode as $createTextNode7,
   $getNodeByKey as $getNodeByKey50,
-  $getRoot as $getRoot19,
+  $getRoot as $getRoot18,
   $isParagraphNode as $isParagraphNode5,
   ParagraphNode as ParagraphNode4
 } from "lexical";
 import debounce4 from "lodash-es/debounce";
 import uniqueId2 from "lodash-es/uniqueId";
-import { useEffect as useEffect70, useRef as useRef48 } from "react";
+import { useEffect as useEffect71, useRef as useRef48 } from "react";
 
 // src/plugins/NodeMousePlugin/nodeUtils.ts
 function getNodePosition2(element, parent) {
@@ -13925,7 +13974,7 @@ function getNodePosition2(element, parent) {
 }
 
 // src/plugins/NodeMousePlugin/NodeMousePlugin.tsx
-import { Fragment as Fragment41, jsx as jsx103 } from "react/jsx-runtime";
+import { Fragment as Fragment41, jsx as jsx104 } from "react/jsx-runtime";
 function NodeMousePlugin() {
   const [editor] = useLexicalComposerContext58();
   const editorUniqueIdRef = useRef48(uniqueId2("editor"));
@@ -14201,7 +14250,7 @@ function NodeMousePlugin() {
     }
     let childrenCount = 0;
     editor.getEditorState().read(() => {
-      const rootNode = $getRoot19();
+      const rootNode = $getRoot18();
       if (rootNode) {
         const childrenKeys = rootNode.getChildrenKeys();
         childrenCount = childrenKeys.length;
@@ -14209,7 +14258,7 @@ function NodeMousePlugin() {
     });
     if (childrenCount === 0) {
       editor.update(() => {
-        const rootNode = $getRoot19();
+        const rootNode = $getRoot18();
         if (rootNode && rootNode.getChildrenSize() <= 0) {
           const newParagraph = $createParagraphNode19();
           newParagraph.append($createTextNode7());
@@ -14219,7 +14268,7 @@ function NodeMousePlugin() {
     }
     refreshHelpersPositions();
   };
-  useEffect70(() => {
+  useEffect71(() => {
     window.addEventListener(
       RESIZE_CONTENT_EVENT,
       refreshHelpersPositions
@@ -14231,7 +14280,7 @@ function NodeMousePlugin() {
       );
     };
   }, []);
-  useEffect70(() => {
+  useEffect71(() => {
     registerEditor(editorUniqueIdRef.current, editor);
     const removeRegistration = mergeRegister21(
       ...[
@@ -14267,7 +14316,7 @@ function NodeMousePlugin() {
         if (nextRootElem) {
           let childrenCount = 0;
           editor.getEditorState().read(() => {
-            const rootNode = $getRoot19();
+            const rootNode = $getRoot18();
             if (rootNode) {
               const childrenKeys = rootNode.getChildrenKeys();
               childrenCount = childrenKeys.length;
@@ -14279,7 +14328,7 @@ function NodeMousePlugin() {
           });
           if (childrenCount === 0) {
             editor.update(() => {
-              const rootNode = $getRoot19();
+              const rootNode = $getRoot18();
               if (rootNode && rootNode.getChildrenSize() <= 0) {
                 const newParagraph = $createParagraphNode19();
                 newParagraph.append($createTextNode7());
@@ -14295,7 +14344,7 @@ function NodeMousePlugin() {
       removeRegistration();
     };
   }, [editor]);
-  return /* @__PURE__ */ jsx103(Fragment41, {});
+  return /* @__PURE__ */ jsx104(Fragment41, {});
 }
 
 // src/plugins/NodePastePlugin/NodePastePlugin.tsx
@@ -14309,7 +14358,7 @@ import {
   COMMAND_PRIORITY_LOW as COMMAND_PRIORITY_LOW13,
   PASTE_COMMAND
 } from "lexical";
-import { useEffect as useEffect71 } from "react";
+import { useEffect as useEffect72 } from "react";
 
 // src/plugins/NodePastePlugin/regenerateIdsInQuestion.ts
 import { nanoid as nanoid10 } from "nanoid";
@@ -14356,10 +14405,10 @@ function regenerateIdsInQuestion(serializedNode) {
 }
 
 // src/plugins/NodePastePlugin/NodePastePlugin.tsx
-import { Fragment as Fragment42, jsx as jsx104 } from "react/jsx-runtime";
+import { Fragment as Fragment42, jsx as jsx105 } from "react/jsx-runtime";
 function NodePastePlugin() {
   const [editor] = useLexicalComposerContext59();
-  useEffect71(() => {
+  useEffect72(() => {
     return mergeRegister22(
       editor.registerCommand(
         PASTE_COMMAND,
@@ -14438,20 +14487,20 @@ function NodePastePlugin() {
       )
     );
   }, [editor]);
-  return /* @__PURE__ */ jsx104(Fragment42, {});
+  return /* @__PURE__ */ jsx105(Fragment42, {});
 }
 
 // src/components/inputs/PopupToolbar.tsx
 import clsx5 from "clsx";
 import {
-  forwardRef as forwardRef12,
-  useEffect as useEffect72,
+  forwardRef as forwardRef13,
+  useEffect as useEffect73,
   useImperativeHandle as useImperativeHandle12,
   useMemo as useMemo10,
   useRef as useRef49
 } from "react";
-import { Fragment as Fragment43, jsx as jsx105, jsxs as jsxs38 } from "react/jsx-runtime";
-var PopupToolbar = forwardRef12((props, ref) => {
+import { Fragment as Fragment43, jsx as jsx106, jsxs as jsxs38 } from "react/jsx-runtime";
+var PopupToolbar = forwardRef13((props, ref) => {
   const { onEscape, menu, toolbar } = props;
   const popupRef = useRef49(null);
   const toolbarRef = useRef49(null);
@@ -14483,7 +14532,7 @@ var PopupToolbar = forwardRef12((props, ref) => {
             menuItemAttributes.checked = menuItemSelected;
             menuItemAttributes.type = "checkbox";
           }
-          let buttonElement = menuItem.subMenu ? /* @__PURE__ */ jsx105(
+          let buttonElement = menuItem.subMenu ? /* @__PURE__ */ jsx106(
             DropdownButton,
             {
               size: "medium",
@@ -14508,15 +14557,15 @@ var PopupToolbar = forwardRef12((props, ref) => {
                 }
               },
               children: [
-                MenuItemIcon && /* @__PURE__ */ jsx105(Icon, { slot: "prefix", icon: MenuItemIcon }),
+                MenuItemIcon && /* @__PURE__ */ jsx106(Icon, { slot: "prefix", icon: MenuItemIcon }),
                 menuItemLabel,
-                menuItemIsError && /* @__PURE__ */ jsx105(DotBadge, { variant: "danger" })
+                menuItemIsError && /* @__PURE__ */ jsx106(DotBadge, { variant: "danger" })
               ]
             },
             `menuItem${menuItemId}`
           );
           if (tooltip && !menuItem.subMenu) {
-            buttonElement = /* @__PURE__ */ jsx105(
+            buttonElement = /* @__PURE__ */ jsx106(
               "sl-tooltip",
               {
                 content: tooltip,
@@ -14567,7 +14616,7 @@ var PopupToolbar = forwardRef12((props, ref) => {
       onEscape();
     }
   }
-  useEffect72(() => {
+  useEffect73(() => {
     if (onEscape) {
       toolbarRef.current?.addEventListener("keydown", handleKeyDown);
       return () => {
@@ -14578,7 +14627,7 @@ var PopupToolbar = forwardRef12((props, ref) => {
       };
     }
   }, [onEscape]);
-  return /* @__PURE__ */ jsx105(Fragment43, { children: /* @__PURE__ */ jsx105(
+  return /* @__PURE__ */ jsx106(Fragment43, { children: /* @__PURE__ */ jsx106(
     "sl-popup",
     {
       ref: popupRef,
@@ -14586,7 +14635,7 @@ var PopupToolbar = forwardRef12((props, ref) => {
       shift: true,
       "auto-size": "horizontal",
       strategy: "fixed",
-      children: toolbar || /* @__PURE__ */ jsx105("sl-button-group", { ref: toolbarRef, children: menuItems })
+      children: toolbar || /* @__PURE__ */ jsx106("sl-button-group", { ref: toolbarRef, children: menuItems })
     }
   ) });
 });
@@ -14638,16 +14687,16 @@ var bgColorList = [
 ];
 
 // src/components/feedback/ProgressBar.tsx
-import { jsx as jsx106 } from "react/jsx-runtime";
+import { jsx as jsx107 } from "react/jsx-runtime";
 function ProgressBar() {
-  return /* @__PURE__ */ jsx106("sl-progress-bar", { indeterminate: "indeterminate" });
+  return /* @__PURE__ */ jsx107("sl-progress-bar", { indeterminate: "indeterminate" });
 }
 
 // src/components/layouts/Stack.tsx
-import { jsx as jsx107 } from "react/jsx-runtime";
+import { jsx as jsx108 } from "react/jsx-runtime";
 function Stack(props) {
   const { id, style, className, slot, children } = props;
-  return /* @__PURE__ */ jsx107(
+  return /* @__PURE__ */ jsx108(
     "div",
     {
       id,
@@ -14661,13 +14710,13 @@ function Stack(props) {
 
 // src/components/dialogs/FormDialog.tsx
 import {
-  forwardRef as forwardRef13,
-  useEffect as useEffect73,
+  forwardRef as forwardRef14,
+  useEffect as useEffect74,
   useImperativeHandle as useImperativeHandle13,
   useRef as useRef50
 } from "react";
-import { jsx as jsx108, jsxs as jsxs39 } from "react/jsx-runtime";
-var FormDialog = forwardRef13((props, ref) => {
+import { jsx as jsx109, jsxs as jsxs39 } from "react/jsx-runtime";
+var FormDialog = forwardRef14((props, ref) => {
   const {
     id,
     actionName,
@@ -14730,7 +14779,7 @@ var FormDialog = forwardRef13((props, ref) => {
       onHide();
     }
   };
-  useEffect73(() => {
+  useEffect74(() => {
     window.customElements.whenDefined("sl-dialog").then(() => {
       if (dialogRef.current) {
         dialogRef.current.addEventListener(
@@ -14764,7 +14813,7 @@ var FormDialog = forwardRef13((props, ref) => {
       }
     };
   }, [onCancel]);
-  useEffect73(() => {
+  useEffect74(() => {
     window.addEventListener(
       FORM_DIALOG_OPEN_EVENT,
       handleOpenByEvent
@@ -14794,13 +14843,13 @@ var FormDialog = forwardRef13((props, ref) => {
       }
     };
   });
-  return /* @__PURE__ */ jsx108("form", { id, method: "POST", onSubmit: handleSubmit, children: /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsx109("form", { id, method: "POST", onSubmit: handleSubmit, children: /* @__PURE__ */ jsxs39(
     "sl-dialog",
     {
       class: `dialog_control ${className}`,
       ref: dialogRef,
       children: [
-        /* @__PURE__ */ jsx108("div", { slot: "label", children: headerControls && headerControls.length > 0 ? /* @__PURE__ */ jsxs39(
+        /* @__PURE__ */ jsx109("div", { slot: "label", children: headerControls && headerControls.length > 0 ? /* @__PURE__ */ jsxs39(
           Stack,
           {
             className: "stack__gap-3 stack__row",
@@ -14811,13 +14860,13 @@ var FormDialog = forwardRef13((props, ref) => {
             },
             children: [
               headerControls,
-              /* @__PURE__ */ jsx108("div", { style: { flexGrow: 2 }, children: /* @__PURE__ */ jsx108("span", { className: "font-medium font-w-semibold", children: title }) })
+              /* @__PURE__ */ jsx109("div", { style: { flexGrow: 2 }, children: /* @__PURE__ */ jsx109("span", { className: "font-medium font-w-semibold", children: title }) })
             ]
           }
-        ) : /* @__PURE__ */ jsx108("span", { className: "font-medium font-w-semibold", children: title }) }),
-        loading && /* @__PURE__ */ jsx108(ProgressBar, {}),
-        /* @__PURE__ */ jsx108("input", { type: "hidden", name: "formDialogId", value: id }),
-        /* @__PURE__ */ jsx108("input", { type: "hidden", name: "action", value: actionName }),
+        ) : /* @__PURE__ */ jsx109("span", { className: "font-medium font-w-semibold", children: title }) }),
+        loading && /* @__PURE__ */ jsx109(ProgressBar, {}),
+        /* @__PURE__ */ jsx109("input", { type: "hidden", name: "formDialogId", value: id }),
+        /* @__PURE__ */ jsx109("input", { type: "hidden", name: "action", value: actionName }),
         children,
         /* @__PURE__ */ jsxs39(
           Stack,
@@ -14826,14 +14875,14 @@ var FormDialog = forwardRef13((props, ref) => {
             className: "stack__row stack__gap-4",
             style: { width: "100%", flexWrap: "nowrap" },
             children: [
-              extraControl && /* @__PURE__ */ jsx108("div", { style: { flexGrow: 0 }, children: extraControl }),
+              extraControl && /* @__PURE__ */ jsx109("div", { style: { flexGrow: 0 }, children: extraControl }),
               /* @__PURE__ */ jsxs39(
                 Stack,
                 {
                   className: "stack__row stack__gap-4",
                   style: { flexGrow: 1, justifyContent: "end" },
                   children: [
-                    /* @__PURE__ */ jsx108("div", { children: /* @__PURE__ */ jsx108(
+                    /* @__PURE__ */ jsx109("div", { children: /* @__PURE__ */ jsx109(
                       Button,
                       {
                         slot: "footer",
@@ -14845,7 +14894,7 @@ var FormDialog = forwardRef13((props, ref) => {
                         onClick: handleCancel
                       }
                     ) }),
-                    /* @__PURE__ */ jsx108("div", { children: /* @__PURE__ */ jsx108(
+                    /* @__PURE__ */ jsx109("div", { children: /* @__PURE__ */ jsx109(
                       Button,
                       {
                         slot: "footer",
@@ -14879,16 +14928,16 @@ import {
   COMMAND_PRIORITY_EDITOR as COMMAND_PRIORITY_EDITOR14,
   createCommand as createCommand18
 } from "lexical";
-import { useEffect as useEffect74, useRef as useRef51, useState as useState12 } from "react";
-import { jsx as jsx109, jsxs as jsxs40 } from "react/jsx-runtime";
+import { useEffect as useEffect75, useRef as useRef51, useState as useState13 } from "react";
+import { jsx as jsx110, jsxs as jsxs40 } from "react/jsx-runtime";
 var SHOW_LINK_EDITOR_COMMAND = createCommand18("SHOW_LINK_EDITOR_COMMAND");
 function LinkEditorPlugin() {
   const [editor] = useLexicalComposerContext60();
   const formDialogRef = useRef51(null);
   const linkUrlInputRef = useRef51(null);
-  const [openInNew, setOpenInNew] = useState12(false);
+  const [openInNew, setOpenInNew] = useState13(false);
   const activeEditorRef = useRef51();
-  useEffect74(() => {
+  useEffect75(() => {
     return mergeRegister23(
       editor.registerCommand(
         SHOW_LINK_EDITOR_COMMAND,
@@ -14913,7 +14962,7 @@ function LinkEditorPlugin() {
       )
     );
   }, [editor]);
-  return /* @__PURE__ */ jsx109(
+  return /* @__PURE__ */ jsx110(
     FormDialog,
     {
       ref: formDialogRef,
@@ -14950,8 +14999,8 @@ function LinkEditorPlugin() {
       onCancel: () => {
         formDialogRef.current?.close();
       },
-      children: /* @__PURE__ */ jsx109("div", { style: { width: "450px" }, children: /* @__PURE__ */ jsxs40(Stack, { className: "stack__column stack__gap-4", children: [
-        /* @__PURE__ */ jsx109("div", { children: /* @__PURE__ */ jsx109(
+      children: /* @__PURE__ */ jsx110("div", { style: { width: "450px" }, children: /* @__PURE__ */ jsxs40(Stack, { className: "stack__column stack__gap-4", children: [
+        /* @__PURE__ */ jsx110("div", { children: /* @__PURE__ */ jsx110(
           TextInput,
           {
             ref: linkUrlInputRef,
@@ -14961,7 +15010,7 @@ function LinkEditorPlugin() {
             defaultValue: ""
           }
         ) }),
-        /* @__PURE__ */ jsx109("div", { children: /* @__PURE__ */ jsx109(
+        /* @__PURE__ */ jsx110("div", { children: /* @__PURE__ */ jsx110(
           Checkbox,
           {
             size: "small",
@@ -14980,16 +15029,16 @@ function LinkEditorPlugin() {
 
 // src/components/inputs/PopupHighlight.tsx
 import {
-  forwardRef as forwardRef14,
+  forwardRef as forwardRef15,
   useImperativeHandle as useImperativeHandle14,
   useRef as useRef52,
-  useState as useState13
+  useState as useState14
 } from "react";
-import { jsx as jsx110 } from "react/jsx-runtime";
-var PopupHighlighter = forwardRef14((props, ref) => {
+import { jsx as jsx111 } from "react/jsx-runtime";
+var PopupHighlighter = forwardRef15((props, ref) => {
   const { highlighterClassName } = props;
   const popupRef = useRef52(null);
-  const [popupRect, setPopupRect] = useState13();
+  const [popupRect, setPopupRect] = useState14();
   function hidePopup() {
     if (popupRef.current) {
       popupRef.current.active = false;
@@ -15020,7 +15069,7 @@ var PopupHighlighter = forwardRef14((props, ref) => {
       }
     }
   }));
-  return /* @__PURE__ */ jsx110("sl-popup", { ref: popupRef, placement: "top-start", strategy: "fixed", children: /* @__PURE__ */ jsx110("div", { style: { position: "relative" }, children: highlighterClassName ? /* @__PURE__ */ jsx110(
+  return /* @__PURE__ */ jsx111("sl-popup", { ref: popupRef, placement: "top-start", strategy: "fixed", children: /* @__PURE__ */ jsx111("div", { style: { position: "relative" }, children: highlighterClassName ? /* @__PURE__ */ jsx111(
     "div",
     {
       className: highlighterClassName,
@@ -15029,7 +15078,7 @@ var PopupHighlighter = forwardRef14((props, ref) => {
         "--variable-placeholder-height": `${popupRect?.height || 0}px`
       }
     }
-  ) : /* @__PURE__ */ jsx110(
+  ) : /* @__PURE__ */ jsx111(
     "div",
     {
       style: {
@@ -15048,16 +15097,16 @@ var PopupHighlighter = forwardRef14((props, ref) => {
 
 // src/components/inputs/PopupMenu.tsx
 import {
-  forwardRef as forwardRef15,
-  useEffect as useEffect75,
+  forwardRef as forwardRef16,
+  useEffect as useEffect76,
   useImperativeHandle as useImperativeHandle15,
   useLayoutEffect,
   useMemo as useMemo11,
   useRef as useRef53,
-  useState as useState14
+  useState as useState15
 } from "react";
-import { Fragment as Fragment44, jsx as jsx111, jsxs as jsxs41 } from "react/jsx-runtime";
-var PopupMenu = forwardRef15(
+import { Fragment as Fragment44, jsx as jsx112, jsxs as jsxs41 } from "react/jsx-runtime";
+var PopupMenu = forwardRef16(
   (props, ref) => {
     const {
       onEscape,
@@ -15067,7 +15116,7 @@ var PopupMenu = forwardRef15(
     } = props;
     const popupRef = useRef53(null);
     const menuRef = useRef53(null);
-    const [itemsFilter, setItemsFilter] = useState14();
+    const [itemsFilter, setItemsFilter] = useState15();
     function hidePopup() {
       if (popupRef.current) {
         popupRef.current.active = false;
@@ -15136,11 +15185,11 @@ var PopupMenu = forwardRef15(
           } = menuItem;
           if (menuItemDivider) {
             resultList.push(
-              /* @__PURE__ */ jsx111("sl-divider", {}, `menuItem${menuItemId}`)
+              /* @__PURE__ */ jsx112("sl-divider", {}, `menuItem${menuItemId}`)
             );
           } else if (menuItemIsGroup) {
             resultList.push(
-              /* @__PURE__ */ jsx111("sl-menu-label", { children: menuItemLabel }, `menuItem${menuItemId}`)
+              /* @__PURE__ */ jsx112("sl-menu-label", { children: menuItemLabel }, `menuItem${menuItemId}`)
             );
           } else {
             const menuItemAttributes = {};
@@ -15159,9 +15208,9 @@ var PopupMenu = forwardRef15(
                   class: menuItemClassName,
                   ...menuItemAttributes,
                   children: [
-                    MenuItemIcon && /* @__PURE__ */ jsx111(Icon, { slot: "prefix", icon: MenuItemIcon }),
+                    MenuItemIcon && /* @__PURE__ */ jsx112(Icon, { slot: "prefix", icon: MenuItemIcon }),
                     menuItemLabel,
-                    menuItemIsError && /* @__PURE__ */ jsx111(DotBadge, { variant: "danger" })
+                    menuItemIsError && /* @__PURE__ */ jsx112(DotBadge, { variant: "danger" })
                   ]
                 },
                 `menuItem${menuItemId}`
@@ -15184,7 +15233,7 @@ var PopupMenu = forwardRef15(
       }
       if (constMenu.length > 0) {
         if (resultList.length > 0) {
-          resultList.push(/* @__PURE__ */ jsx111("sl-divider", {}, "const-menu-divider"));
+          resultList.push(/* @__PURE__ */ jsx112("sl-divider", {}, "const-menu-divider"));
         }
         resultList = resultList.concat(createMenuList(constMenu));
       }
@@ -15296,7 +15345,7 @@ var PopupMenu = forwardRef15(
         onEscape();
       }
     }
-    useEffect75(() => {
+    useEffect76(() => {
       if (onEscape) {
         popupRef.current?.addEventListener("keydown", handleKeyDown);
         menuRef.current?.addEventListener("keydown", handleKeyDown);
@@ -15312,7 +15361,7 @@ var PopupMenu = forwardRef15(
         };
       }
     }, [onEscape]);
-    return /* @__PURE__ */ jsx111(Fragment44, { children: /* @__PURE__ */ jsx111(
+    return /* @__PURE__ */ jsx112(Fragment44, { children: /* @__PURE__ */ jsx112(
       "sl-popup",
       {
         ref: popupRef,
@@ -15324,7 +15373,7 @@ var PopupMenu = forwardRef15(
         strategy: "fixed",
         "auto-size": "vertical",
         "auto-size-padding": "10",
-        children: /* @__PURE__ */ jsx111(
+        children: /* @__PURE__ */ jsx112(
           "sl-menu",
           {
             ref: menuRef,
@@ -15489,23 +15538,23 @@ function visitVariableNodes(rootNode, cb) {
 }
 
 // src/plugins/VariablesPlugin/VariablesContext.tsx
-import { $getRoot as $getRoot20 } from "lexical";
+import { $getRoot as $getRoot19 } from "lexical";
 import React22, {
   useContext as useContext4,
-  useEffect as useEffect76,
-  useState as useState15
+  useEffect as useEffect77,
+  useState as useState16
 } from "react";
-import { jsx as jsx112 } from "react/jsx-runtime";
+import { jsx as jsx113 } from "react/jsx-runtime";
 var VariablesContext = React22.createContext(null);
 function VariablesProvider(props) {
   const { getEditor, getAllNestedEditors } = useBlockEditor();
   const { children, variablesSettings } = props;
-  const [variableList, setVariableList] = useState15(
+  const [variableList, setVariableList] = useState16(
     variablesSettings.list
   );
   const updateVariablesInEditor = (newName, oldName, editor) => {
     editor.update(() => {
-      visitVariableNodes($getRoot20(), (variableNode) => {
+      visitVariableNodes($getRoot19(), (variableNode) => {
         if (variableNode.__variable === oldName) {
           variableNode.setVariable(newName);
         }
@@ -15524,7 +15573,7 @@ function VariablesProvider(props) {
       setVariableSelection(editorRef, newName);
     }
   };
-  useEffect76(() => {
+  useEffect77(() => {
     setVariableList(variablesSettings.list);
   }, [variablesSettings]);
   const handleOnCreated = (name) => {
@@ -15536,7 +15585,7 @@ function VariablesProvider(props) {
     renameVariable(newName, oldName);
     variablesSettings.onUpdated(newName, oldName);
   };
-  return /* @__PURE__ */ jsx112(
+  return /* @__PURE__ */ jsx113(
     VariablesContext.Provider,
     {
       value: {
@@ -15656,8 +15705,8 @@ import {
   KEY_ESCAPE_COMMAND,
   createCommand as createCommand19
 } from "lexical";
-import { useEffect as useEffect77, useMemo as useMemo12, useRef as useRef54 } from "react";
-import { Fragment as Fragment45, jsx as jsx113, jsxs as jsxs42 } from "react/jsx-runtime";
+import { useEffect as useEffect78, useMemo as useMemo12, useRef as useRef54 } from "react";
+import { Fragment as Fragment45, jsx as jsx114, jsxs as jsxs42 } from "react/jsx-runtime";
 var CREATE_VARIABLE_FROM_SELECTION_COMMAND = createCommand19("CREATE_VARIABLE_FROM_SELECTION_COMMAND");
 function TypeaheadVariablePlugin() {
   const { variableList, onCreated } = useVariables();
@@ -15811,7 +15860,7 @@ function TypeaheadVariablePlugin() {
     }
     return false;
   };
-  useEffect77(() => {
+  useEffect78(() => {
     return mergeRegister24(
       editor.registerCommand(
         TYPEAHEAD_VARIABLE_COMMAND,
@@ -15895,7 +15944,7 @@ function TypeaheadVariablePlugin() {
     );
   }, [variableList, activeDecoratorRef.current]);
   return /* @__PURE__ */ jsxs42(Fragment45, { children: [
-    /* @__PURE__ */ jsx113(
+    /* @__PURE__ */ jsx114(
       PopupMenu,
       {
         ref: popupRef,
@@ -15903,7 +15952,7 @@ function TypeaheadVariablePlugin() {
         menu
       }
     ),
-    /* @__PURE__ */ jsx113(
+    /* @__PURE__ */ jsx114(
       PopupHighlighter,
       {
         highlighterClassName: "variable-placeholder",
@@ -16050,19 +16099,19 @@ import {
 } from "lucide-react";
 import {
   useCallback as useCallback9,
-  useEffect as useEffect78,
+  useEffect as useEffect79,
   useMemo as useMemo13,
   useRef as useRef55,
-  useState as useState16
+  useState as useState17
 } from "react";
-import { jsx as jsx114 } from "react/jsx-runtime";
+import { jsx as jsx115 } from "react/jsx-runtime";
 function TextToolbarPlugin() {
   const { hasModule } = useBlockEditor();
   const [editor] = useLexicalComposerContext62();
   const popupToolbarRef = useRef55(null);
   const activeEditorRef = useRef55(void 0);
   const activeDecoratorRef = useRef55(void 0);
-  const [toolbarState, setToolbarState] = useState16({
+  const [toolbarState, setToolbarState] = useState17({
     isBold: false,
     isItalic: false,
     isUnderline: false,
@@ -16077,7 +16126,7 @@ function TextToolbarPlugin() {
     textAlign: "left"
   });
   const selectedNodeRef = useRef55(null);
-  const [selectionType, setSelectionType] = useState16("paragraph");
+  const [selectionType, setSelectionType] = useState17("paragraph");
   const formatText = (format) => {
     activeEditorRef.current?.update(() => {
       const selection = $getSelection14();
@@ -16325,7 +16374,7 @@ function TextToolbarPlugin() {
       }
     }
   };
-  useEffect78(() => {
+  useEffect79(() => {
     return mergeRegister25(
       editor.registerCommand(
         TEXT_TOOLBAR_SELECTION_CHANGE_COMMAND,
@@ -16475,7 +16524,7 @@ function TextToolbarPlugin() {
       popupToolbarRef.current.hideToolbar();
     }
   }
-  useEffect78(() => {
+  useEffect79(() => {
     window.addEventListener("scroll", repositionPopupToolbar);
     window.addEventListener("resize", repositionPopupToolbar);
     document.addEventListener("selectstart", handleSelectionStart);
@@ -16808,7 +16857,7 @@ function TextToolbarPlugin() {
     }
     return resultList;
   }, [toolbarState, selectionType, activeEditorRef.current]);
-  return /* @__PURE__ */ jsx114(PopupToolbar, { ref: popupToolbarRef, menu: menuItems });
+  return /* @__PURE__ */ jsx115(PopupToolbar, { ref: popupToolbarRef, menu: menuItems });
 }
 
 // src/plugins/TypeaheadMenuPlugin/renderCalloutModuleMenu.tsx
@@ -17280,7 +17329,7 @@ import { mergeRegister as mergeRegister26 } from "@lexical/utils";
 import {
   $createParagraphNode as $createParagraphNode22,
   $getNodeByKey as $getNodeByKey53,
-  $getRoot as $getRoot21,
+  $getRoot as $getRoot20,
   $getSelection as $getSelection15,
   $isParagraphNode as $isParagraphNode7,
   $isRangeSelection as $isRangeSelection10,
@@ -17291,7 +17340,7 @@ import {
   KEY_ENTER_COMMAND as KEY_ENTER_COMMAND3,
   KEY_ESCAPE_COMMAND as KEY_ESCAPE_COMMAND3
 } from "lexical";
-import { useEffect as useEffect79, useMemo as useMemo14, useRef as useRef56, useState as useState17 } from "react";
+import { useEffect as useEffect80, useMemo as useMemo14, useRef as useRef56, useState as useState18 } from "react";
 
 // src/plugins/TypeaheadMenuPlugin/renderFillInTheBlankMenu.tsx
 import {
@@ -17406,7 +17455,7 @@ function renderFillInTheBlankMenu(popupRef, targetNodeKeyRef, activeEditorRef) {
 }
 
 // src/plugins/TypeaheadMenuPlugin/TypeaheadMenuPlugin.tsx
-import { jsx as jsx115 } from "react/jsx-runtime";
+import { jsx as jsx116 } from "react/jsx-runtime";
 function TypeaheadMenuPlugin() {
   const { hasModule, modulesNumber } = useBlockEditor();
   const [editor] = useLexicalComposerContext63();
@@ -17416,7 +17465,7 @@ function TypeaheadMenuPlugin() {
   const popupRef = useRef56(null);
   const targetNodeKeyRef = useRef56(void 0);
   const activeEditorRef = useRef56(void 0);
-  const [activeDecorator, setActiveDecorator] = useState17();
+  const [activeDecorator, setActiveDecorator] = useState18();
   const handleUpdate = () => {
     activeEditorRef.current?.getEditorState().read(() => {
       const selection = $getSelection15();
@@ -17538,7 +17587,7 @@ function TypeaheadMenuPlugin() {
     }
     return false;
   };
-  useEffect79(() => {
+  useEffect80(() => {
     return mergeRegister26(
       editor.registerCommand(
         TYPEAHEAD_MENU_COMMAND,
@@ -17597,7 +17646,7 @@ function TypeaheadMenuPlugin() {
                 );
               });
             }
-            const rootNode = $getRoot21();
+            const rootNode = $getRoot20();
             if (rootNode) {
               const childrenKeys = rootNode.getChildrenKeys();
               if (childrenKeys.length > 0) {
@@ -17689,7 +17738,7 @@ function TypeaheadMenuPlugin() {
     }
     return menuItems;
   }, [editor, modulesNumber, activeDecorator]);
-  return /* @__PURE__ */ jsx115(
+  return /* @__PURE__ */ jsx116(
     PopupMenu,
     {
       ref: popupRef,
@@ -17701,34 +17750,716 @@ function TypeaheadMenuPlugin() {
   );
 }
 
+// src/theme/defaultThemeVariables.ts
+var themeLight = `
+:host,
+.theme-light {
+  color-scheme: light;
+
+  --sl-color-primary-50: #f0f9ff;
+  --sl-color-primary-100: #e0f2fe;
+  --sl-color-primary-200: #bae6fd;
+  --sl-color-primary-300: #93c5fd;
+  --sl-color-primary-400: #60a5fa;
+  --sl-color-primary-500: #3b82f6;
+  --sl-color-primary-600: #2563eb;
+  --sl-color-primary-700: #1d4ed8;
+  --sl-color-primary-800: #1e40af;
+  --sl-color-primary-900: #1e3a8a;
+  --sl-color-primary-950: #172554;
+
+  --sl-color-success-50: #f0fdf4;
+  --sl-color-success-100: #dcfce7;
+  --sl-color-success-200: #bbf7d0;
+  --sl-color-success-300: #86efac;
+  --sl-color-success-400: #4ade80;
+  --sl-color-success-500: #22c55e;
+  --sl-color-success-600: #16a34a;
+  --sl-color-success-700: #15803d;
+  --sl-color-success-800: #166534;
+  --sl-color-success-900: #14532d;
+  --sl-color-success-950: #052e16;
+
+  --sl-color-warning-50: #fffbeb;
+  --sl-color-warning-100: #fef3c7;
+  --sl-color-warning-200: #fde68a;
+  --sl-color-warning-300: #fcd34d;
+  --sl-color-warning-400: #fbbf24;
+  --sl-color-warning-500: #f59e0b;
+  --sl-color-warning-600: #d97706;
+  --sl-color-warning-700: #b45309;
+  --sl-color-warning-800: #92400e;
+  --sl-color-warning-900: #78350f;
+  --sl-color-warning-950: #451a03;
+
+  --sl-color-danger-50: #fef2f2;
+  --sl-color-danger-100: #fee2e2;
+  --sl-color-danger-200: #fecaca;
+  --sl-color-danger-300: #fca5a5;
+  --sl-color-danger-400: #f87171;
+  --sl-color-danger-500: #ef4444;
+  --sl-color-danger-600: #dc2626;
+  --sl-color-danger-700: #b91c1c;
+  --sl-color-danger-800: #991b1b;
+  --sl-color-danger-900: #7f1d1d;
+  --sl-color-danger-950: #450a0a;
+
+  --sl-color-neutral-50: #fafafa;
+  --sl-color-neutral-100: #f4f4f5;
+  --sl-color-neutral-200: #e4e4e7;
+  --sl-color-neutral-300: #d4d4d8;
+  --sl-color-neutral-400: #a1a1aa;
+  --sl-color-neutral-500: #71717a;
+  --sl-color-neutral-600: #52525b;
+  --sl-color-neutral-700: #3f3f46;
+  --sl-color-neutral-800: #27272a;
+  --sl-color-neutral-900: #18181b;
+  --sl-color-neutral-950: #09090b;
+
+  --sl-color-neutral-0: #ffffff;
+  --sl-color-neutral-1000: hsl(0, 0%, 0%);
+
+  --sl-border-base: var(--be-border-base);
+  --sl-border-radius-small: calc(var(--sl-border-base) * 0.1875);
+  --sl-border-radius-medium: calc(var(--sl-border-base) * 0.25);
+  --sl-border-radius-large: calc(var(--sl-border-base) * 0.5);
+  --sl-border-radius-x-large: var(
+    --sl-border-base
+  );
+
+  --sl-border-radius-circle: 50%;
+  --sl-border-radius-pill: 9999px;
+
+  --sl-shadow-x-small: 0 1px 2px hsl(240 3.8% 46.1% / 6%);
+  --sl-shadow-small: 0 1px 2px hsl(240 3.8% 46.1% / 12%);
+  --sl-shadow-medium: 0 2px 4px hsl(240 3.8% 46.1% / 12%);
+  --sl-shadow-large: var(
+    --be-shadow-large,
+    0 2px 8px hsl(240 3.8% 46.1% / 12%)
+  );
+  --sl-shadow-x-large: 0 4px 16px hsl(240 3.8% 46.1% / 12%);
+
+  --sl-spacing-base: var(--be-spacing-base, 1rem);
+  --sl-spacing-3x-small: calc(
+    var(--sl-spacing-base) * 0.125
+  );
+  --sl-spacing-2x-small: calc(
+    var(--sl-spacing-base) * 0.25
+  );
+  --sl-spacing-1_5x-small: calc(
+    var(--sl-spacing-base) * 0.375
+  );
+  --sl-spacing-x-small: calc(
+    var(--sl-spacing-base) * 0.5
+  );
+  --sl-spacing-small: calc(
+    var(--sl-spacing-base) * 0.75
+  );
+  --sl-spacing-medium: var(--sl-spacing-base);
+  --sl-spacing-large: calc(
+    var(--sl-spacing-base) * 1.25
+  );
+  --sl-spacing-x-large: calc(
+    var(--sl-spacing-base) * 1.75
+  );
+  --sl-spacing-2x-large: calc(
+    var(--sl-spacing-base) * 2.25
+  );
+  --sl-spacing-3x-large: calc(
+    var(--sl-spacing-base) * 3
+  );
+  --sl-spacing-4x-large: calc(
+    var(--sl-spacing-base) * 4.5
+  );
+  --sl-spacing-5x-large: calc(var(--sl-spacing-base) * 5);
+
+  --indent-size: var(--sl-spacing-large);
+
+  --sl-transition-x-slow: 1000ms;
+  --sl-transition-slow: 500ms;
+  --sl-transition-medium: 250ms;
+  --sl-transition-fast: 150ms;
+  --sl-transition-x-fast: 50ms;
+
+  --sl-font-mono: SFMono-Regular, Consolas, 'Liberation Mono', Menlo,
+    monospace;
+  --sl-font-sans: var(
+    --be-font-sans,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol'
+  );
+  --sl-font-serif: var(
+    --be-font-serif,
+    Georgia,
+    'Times New Roman',
+    serif
+  );
+
+  --sl-font-size-base: var(--be-font-size-base, 1rem);
+  --sl-font-size-2x-small: calc(var(--sl-font-size-base) * 0.625);
+  --sl-font-size-x-small: calc(var(--sl-font-size-base) * 0.75);
+  --sl-font-size-small: calc(var(--sl-font-size-base) * 0.875);
+  --sl-font-size-medium: var(--sl-font-size-base);
+  --sl-font-size-large: calc(var(--sl-font-size-base) * 1.25);
+  --sl-font-size-x-large: calc(var(--sl-font-size-base) * 1.5);
+  --sl-font-size-2x-large: calc(var(--sl-font-size-base) * 2.25);
+  --sl-font-size-3x-large: calc(var(--sl-font-size-base) * 3);
+  --sl-font-size-4x-large: calc(var(--sl-font-size-base) * 4.5);
+
+  --sl-font-weight-light: 300;
+  --sl-font-weight-normal: 400;
+  --sl-font-weight-semibold: 500;
+  --sl-font-weight-bold: 700;
+
+  --sl-letter-spacing-denser: -0.03em;
+  --sl-letter-spacing-dense: -0.015em;
+  --sl-letter-spacing-normal: normal;
+  --sl-letter-spacing-loose: 0.075em;
+  --sl-letter-spacing-looser: 0.15em;
+
+  --sl-line-height-base: 1;
+  --sl-line-height-x-denser: calc(var(--sl-line-height-base) * 1.1);
+  --sl-line-height-denser: calc(var(--sl-line-height-base) * 1.2);
+  --sl-line-height-dense: calc(var(--sl-line-height-base) * 1.4);
+  --sl-line-height-subnormal: calc(var(--sl-line-height-base) * 1.6);
+  --sl-line-height-normal: calc(var(--sl-line-height-base) * 1.8);
+  --sl-line-height-loose: calc(var(--sl-line-height-base) * 2.2);
+  --sl-line-height-looser: calc(var(--sl-line-height-base) * 2.6);
+
+  --sl-focus-ring-color: var(--sl-color-primary-600);
+  --sl-focus-ring-style: solid;
+  --sl-focus-ring-width: var(--be-focus-ring-width, 1px);
+  --sl-focus-ring: var(--sl-focus-ring-style)
+    var(--sl-focus-ring-width) var(--sl-focus-ring-color);
+  --sl-focus-ring-offset: 1px;
+
+  --sl-button-font-size-small: var(--sl-font-size-x-small);
+  --sl-button-font-size-medium: var(--sl-font-size-small);
+  --sl-button-font-size-large: var(--sl-font-size-medium);
+
+  --sl-input-height-base: 1rem;
+  --sl-input-height-small: calc(var(--sl-input-height-base) * 1.875);
+  --sl-input-height-medium: calc(var(--sl-input-height-base) * 2.5);
+  --sl-input-height-large: calc(var(--sl-input-height-base) * 3.125);
+
+  --sl-input-background-color: var(--sl-color-neutral-0);
+  --sl-input-background-color-hover: var(--sl-input-background-color);
+  --sl-input-background-color-focus: var(--sl-input-background-color);
+  --sl-input-background-color-disabled: var(--sl-color-neutral-100);
+  --sl-input-border-color: var(--sl-color-neutral-300);
+  --sl-input-border-color-hover: var(--sl-color-neutral-400);
+  --sl-input-border-color-focus: var(--sl-color-primary-500);
+  --sl-input-border-color-disabled: var(--sl-color-neutral-300);
+  --sl-input-border-width: 1px;
+  --sl-input-required-content: '*';
+  --sl-input-required-content-offset: -2px;
+  --sl-input-required-content-color: var(--sl-input-label-color);
+
+  --sl-input-border-radius-small: var(--sl-border-radius-medium);
+  --sl-input-border-radius-medium: var(--sl-border-radius-medium);
+  --sl-input-border-radius-large: var(--sl-border-radius-medium);
+
+  --sl-input-font-family: var(--sl-font-sans);
+  --sl-input-font-weight: var(--sl-font-weight-normal);
+  --sl-input-font-size-small: var(--sl-font-size-small);
+  --sl-input-font-size-medium: var(--sl-font-size-medium);
+  --sl-input-font-size-large: var(--sl-font-size-large);
+  --sl-input-letter-spacing: var(--sl-letter-spacing-normal);
+
+  --sl-input-color: var(--sl-color-neutral-700);
+  --sl-input-color-hover: var(--sl-color-neutral-700);
+  --sl-input-color-focus: var(--sl-color-neutral-700);
+  --sl-input-color-disabled: var(--sl-color-neutral-900);
+  --sl-input-icon-color: var(--sl-color-neutral-400);
+  --sl-input-icon-color-hover: var(--sl-color-neutral-500);
+  --sl-input-icon-color-focus: var(--sl-color-neutral-500);
+  --sl-input-placeholder-color: var(--sl-color-neutral-400);
+  --sl-input-placeholder-color-disabled: var(--sl-color-neutral-500);
+  --sl-input-spacing-small: var(--sl-spacing-small);
+  --sl-input-spacing-medium: var(--sl-spacing-medium);
+  --sl-input-spacing-large: var(--sl-spacing-large);
+
+  --sl-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);
+  --sl-input-focus-ring-offset: 0;
+
+  --sl-input-filled-background-color: var(--sl-color-neutral-100);
+  --sl-input-filled-background-color-hover: var(
+    --sl-color-neutral-100
+  );
+  --sl-input-filled-background-color-focus: var(
+    --sl-color-neutral-100
+  );
+  --sl-input-filled-background-color-disabled: var(
+    --sl-color-neutral-100
+  );
+  --sl-input-filled-color: var(--sl-color-neutral-800);
+  --sl-input-filled-color-hover: var(--sl-color-neutral-800);
+  --sl-input-filled-color-focus: var(--sl-color-neutral-700);
+  --sl-input-filled-color-disabled: var(--sl-color-neutral-800);
+
+  --sl-input-label-font-size-small: var(--sl-font-size-small);
+  --sl-input-label-font-size-medium: var(--sl-font-size-medium);
+  --sl-input-label-font-size-large: var(--sl-font-size-large);
+  --sl-input-label-color: inherit;
+
+  --sl-input-help-text-font-size-small: var(--sl-font-size-x-small);
+  --sl-input-help-text-font-size-medium: var(--sl-font-size-small);
+  --sl-input-help-text-font-size-large: var(--sl-font-size-medium);
+  --sl-input-help-text-color: var(--sl-color-neutral-500);
+
+  --sl-toggle-size-small: 0.875rem;
+  --sl-toggle-size-medium: 1.125rem;
+  --sl-toggle-size-large: 1.375rem;
+
+  --sl-overlay-background-color: hsl(240 3.8% 46.1% / 33%);
+
+  --sl-panel-background-color: var(--sl-color-neutral-0);
+  --sl-panel-border-color: var(--sl-color-neutral-300);
+  --sl-panel-border-width: 1px;
+
+  --sl-tooltip-border-radius: var(--sl-border-radius-medium);
+  --sl-tooltip-background-color: var(--sl-color-neutral-800);
+  --sl-tooltip-color: var(--sl-color-neutral-0);
+  --sl-tooltip-font-family: var(--sl-font-sans);
+  --sl-tooltip-font-weight: var(--sl-font-weight-normal);
+  --sl-tooltip-font-size: var(--sl-font-size-small);
+  --sl-tooltip-line-height: var(--sl-line-height-dense);
+  --sl-tooltip-padding: var(--sl-spacing-2x-small)
+    var(--sl-spacing-x-small);
+  --sl-tooltip-arrow-size: 6px;
+
+  --sl-z-index-drawer: 700;
+  --sl-z-index-dialog: 800;
+  --sl-z-index-dropdown: 900;
+  --sl-z-index-toast: 950;
+  --sl-z-index-tooltip: 1000;
+
+  --td-footer-background-color: #09090b;
+  --td-footer-color: #e4e4e7;
+
+  --td-code-block-toolbar-cell-background-color: #e2e8f0;
+  --td-code-block-highlighted-background-color: #dbeafe;
+
+  --td-card-color: 'inherit';
+  --td-card-background-color: var(--sl-color-neutral-0);
+  --td-card-background-hover-color: var(--sl-color-neutral-50);
+  --td-card-border-color: rgba(24, 24, 27, 0.08);
+  --td-card-box-shadow-1: rgba(24, 24, 27, 0.02);
+  --td-card-box-shadow-1-y: 3px;
+  --td-card-box-shadow-1-blur: 6px;
+  --td-card-box-shadow-2: rgba(24, 24, 27, 0.04);
+  --td-card-box-shadow-2-y: 2px;
+  --td-card-box-shadow-2-blur: 7px;
+
+  --td-card-hover-border-color: rgba(24, 24, 27, 0.15);
+  --td-card-hover-box-shadow-1: rgba(24, 24, 27, 0.05);
+  --td-card-hover-box-shadow-1-y: 3px;
+  --td-card-hover-box-shadow-1-blur: 6px;
+  --td-card-hover-box-shadow-2: rgba(24, 24, 27, 0.1);
+  --td-card-hover-box-shadow-2-y: 8px;
+  --td-card-hover-box-shadow-2-blur: 15px;
+
+  --td-body-gradient-line-color: #ffffff;
+
+  --td-editor-text-color-blue: hsl(221, 100%, 50%);
+  --td-editor-text-color-purple: hsl(291, 100%, 39%);
+  --td-editor-text-color-red: hsl(4, 100%, 40%);
+  --td-editor-text-color-green: hsl(122, 100%, 23%);
+
+  --td-editor-bg-color-blue: hsl(221, 100%, 50%, 0.1);
+  --td-editor-bg-color-purple: hsl(291, 100%, 39%, 0.1);
+  --td-editor-bg-color-red: hsl(4, 100%, 40%, 0.1);
+  --td-editor-bg-color-green: hsl(122, 100%, 23%, 0.1);
+}
+`;
+var themeDark = `
+:host,
+.theme-dark {
+  color-scheme: dark;
+
+  --sl-color-primary-950: #f0f9ff;
+  --sl-color-primary-900: #e0f2fe;
+  --sl-color-primary-800: #bae6fd;
+  --sl-color-primary-700: #93c5fd;
+  --sl-color-primary-600: #60a5fa;
+  --sl-color-primary-500: #3b82f6;
+  --sl-color-primary-400: #2563eb;
+  --sl-color-primary-300: #1d4ed8;
+  --sl-color-primary-200: #1e40af;
+  --sl-color-primary-100: #1e3a8a;
+  --sl-color-primary-50: #172554;
+
+  --sl-color-success-950: #f0fdf4;
+  --sl-color-success-900: #dcfce7;
+  --sl-color-success-800: #bbf7d0;
+  --sl-color-success-700: #86efac;
+  --sl-color-success-600: #4ade80;
+  --sl-color-success-500: #22c55e;
+  --sl-color-success-400: #16a34a;
+  --sl-color-success-300: #15803d;
+  --sl-color-success-200: #166534;
+  --sl-color-success-100: #14532d;
+  --sl-color-success-50: #052e16;
+
+  --sl-color-warning-950: #fffbeb;
+  --sl-color-warning-900: #fef3c7;
+  --sl-color-warning-800: #fde68a;
+  --sl-color-warning-700: #fcd34d;
+  --sl-color-warning-600: #fbbf24;
+  --sl-color-warning-500: #f59e0b;
+  --sl-color-warning-400: #d97706;
+  --sl-color-warning-300: #b45309;
+  --sl-color-warning-200: #92400e;
+  --sl-color-warning-100: #78350f;
+  --sl-color-warning-50: #451a03;
+
+  --sl-color-danger-950: #fef2f2;
+  --sl-color-danger-900: #fee2e2;
+  --sl-color-danger-800: #fecaca;
+  --sl-color-danger-700: #fca5a5;
+  --sl-color-danger-600: #f87171;
+  --sl-color-danger-500: #ef4444;
+  --sl-color-danger-400: #dc2626;
+  --sl-color-danger-300: #b91c1c;
+  --sl-color-danger-200: #991b1b;
+  --sl-color-danger-100: #7f1d1d;
+  --sl-color-danger-50: #450a0a;
+
+  --sl-color-neutral-950: #fafafa;
+  --sl-color-neutral-900: #f4f4f5;
+  --sl-color-neutral-800: #e4e4e7;
+  --sl-color-neutral-700: #d4d4d8;
+  --sl-color-neutral-600: #a1a1aa;
+  --sl-color-neutral-500: #71717a;
+
+  --sl-color-neutral-400: #71717a;
+  --sl-color-neutral-300: #52525b;
+  --sl-color-neutral-200: #3f3f46;
+  --sl-color-neutral-100: #27272a;
+  --sl-color-neutral-50: #18181b;
+  --sl-color-neutral-0: #09090b;
+  --sl-color-neutral-1000: hsl(0, 0%, 100%);
+
+  --sl-border-base: var(--be-border-base);
+  --sl-border-radius-small: calc(var(--sl-border-base) * 0.1875);
+  --sl-border-radius-medium: calc(var(--sl-border-base) * 0.25);
+  --sl-border-radius-large: calc(var(--sl-border-base) * 0.5);
+  --sl-border-radius-x-large: var(
+    --sl-border-base
+  );
+
+  --sl-border-radius-circle: 50%;
+  --sl-border-radius-pill: 9999px;
+
+  --sl-shadow-x-small: 0 1px 2px rgb(0 0 0 / 18%);
+  --sl-shadow-small: 0 1px 2px rgb(0 0 0 / 24%);
+  --sl-shadow-medium: 0 2px 4px rgb(0 0 0 / 24%);
+  --sl-shadow-large: var(
+    --be-shadow-large,
+    0 2px 8px rgb(0 0 0 / 24%)
+  );
+  --sl-shadow-x-large: 0 4px 16px rgb(0 0 0 / 24%);
+
+  --sl-spacing-base: var(--be-spacing-base, 1rem);
+  --sl-spacing-3x-small: calc(
+    var(--sl-spacing-base) * 0.125
+  );
+  --sl-spacing-2x-small: calc(
+    var(--sl-spacing-base) * 0.25
+  );
+  --sl-spacing-1_5x-small: calc(
+    var(--sl-spacing-base) * 0.375
+  );
+  --sl-spacing-x-small: calc(
+    var(--sl-spacing-base) * 0.5
+  );
+  --sl-spacing-small: calc(
+    var(--sl-spacing-base) * 0.75
+  );
+  --sl-spacing-medium: var(--sl-spacing-base);
+  --sl-spacing-large: calc(
+    var(--sl-spacing-base) * 1.25
+  );
+  --sl-spacing-x-large: calc(
+    var(--sl-spacing-base) * 1.75
+  );
+  --sl-spacing-2x-large: calc(
+    var(--sl-spacing-base) * 2.25
+  );
+  --sl-spacing-3x-large: calc(
+    var(--sl-spacing-base) * 3
+  );
+  --sl-spacing-4x-large: calc(
+    var(--sl-spacing-base) * 4.5
+  );
+  --sl-spacing-5x-large: calc(var(--sl-spacing-base) * 5);
+
+  --indent-size: var(--sl-spacing-large);
+
+  --sl-transition-x-slow: 1000ms;
+  --sl-transition-slow: 500ms;
+  --sl-transition-medium: 250ms;
+  --sl-transition-fast: 150ms;
+  --sl-transition-x-fast: 50ms;
+
+  --sl-font-mono: var(
+    --be-font-mono,
+    SFMono-Regular,
+    Consolas,
+    'Liberation Mono',
+    Menlo,
+    monospace
+  );
+  --sl-font-sans: var(
+    --be-font-sans,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol'
+  );
+  --sl-font-serif: var(
+    --be-font-serif,
+    Georgia,
+    'Times New Roman',
+    serif
+  );
+
+  --sl-font-size-base: var(--be-font-size-base, 1rem);
+  --sl-font-size-2x-small: calc(var(--sl-font-size-base) * 0.625);
+  --sl-font-size-x-small: calc(var(--sl-font-size-base) * 0.75);
+  --sl-font-size-small: calc(var(--sl-font-size-base) * 0.875);
+  --sl-font-size-medium: var(--sl-font-size-base);
+  --sl-font-size-large: calc(var(--sl-font-size-base) * 1.25);
+  --sl-font-size-x-large: calc(var(--sl-font-size-base) * 1.5);
+  --sl-font-size-2x-large: calc(var(--sl-font-size-base) * 2.25);
+  --sl-font-size-3x-large: calc(var(--sl-font-size-base) * 3);
+  --sl-font-size-4x-large: calc(var(--sl-font-size-base) * 4.5);
+
+  --sl-font-weight-light: 300;
+  --sl-font-weight-normal: 400;
+  --sl-font-weight-semibold: 500;
+  --sl-font-weight-bold: 700;
+
+  --sl-letter-spacing-denser: -0.03em;
+  --sl-letter-spacing-dense: -0.015em;
+  --sl-letter-spacing-normal: normal;
+  --sl-letter-spacing-loose: 0.075em;
+  --sl-letter-spacing-looser: 0.15em;
+
+  --sl-line-height-base: 1;
+  --sl-line-height-x-denser: calc(var(--sl-line-height-base) * 1.1);
+  --sl-line-height-denser: calc(var(--sl-line-height-base) * 1.2);
+  --sl-line-height-dense: calc(var(--sl-line-height-base) * 1.4);
+  --sl-line-height-subnormal: calc(var(--sl-line-height-base) * 1.6);
+  --sl-line-height-normal: calc(var(--sl-line-height-base) * 1.8);
+  --sl-line-height-loose: calc(var(--sl-line-height-base) * 2.2);
+  --sl-line-height-looser: calc(var(--sl-line-height-base) * 2.6);
+
+  --sl-focus-ring-color: var(--sl-color-primary-700);
+  --sl-focus-ring-style: solid;
+  --sl-focus-ring-width: var(--be-focus-ring-width, 1px);
+  --sl-focus-ring: var(--sl-focus-ring-style)
+    var(--sl-focus-ring-width) var(--sl-focus-ring-color);
+  --sl-focus-ring-offset: 1px;
+
+  --sl-button-font-size-small: var(--sl-font-size-x-small);
+  --sl-button-font-size-medium: var(--sl-font-size-small);
+  --sl-button-font-size-large: var(--sl-font-size-medium);
+
+  --sl-input-height-base: 1rem;
+  --sl-input-height-small: calc(var(--sl-input-height-base) * 1.875);
+  --sl-input-height-medium: calc(var(--sl-input-height-base) * 2.5);
+  --sl-input-height-large: calc(var(--sl-input-height-base) * 3.125);
+
+  --sl-input-background-color: var(--sl-color-neutral-0);
+  --sl-input-background-color-hover: var(--sl-input-background-color);
+  --sl-input-background-color-focus: var(--sl-input-background-color);
+  --sl-input-background-color-disabled: var(--sl-color-neutral-100);
+  --sl-input-border-color: var(--sl-color-neutral-300);
+  --sl-input-border-color-hover: var(--sl-color-neutral-400);
+  --sl-input-border-color-focus: var(--sl-color-primary-500);
+  --sl-input-border-color-disabled: var(--sl-color-neutral-300);
+  --sl-input-border-width: 1px;
+  --sl-input-required-content: '*';
+  --sl-input-required-content-offset: -2px;
+  --sl-input-required-content-color: var(--sl-input-label-color);
+
+  --sl-input-border-radius-small: var(--sl-border-radius-medium);
+  --sl-input-border-radius-medium: var(--sl-border-radius-medium);
+  --sl-input-border-radius-large: var(--sl-border-radius-medium);
+
+  --sl-input-font-family: var(--sl-font-sans);
+  --sl-input-font-weight: var(--sl-font-weight-normal);
+  --sl-input-font-size-small: var(--sl-font-size-small);
+  --sl-input-font-size-medium: var(--sl-font-size-medium);
+  --sl-input-font-size-large: var(--sl-font-size-large);
+  --sl-input-letter-spacing: var(--sl-letter-spacing-normal);
+
+  --sl-input-color: var(--sl-color-neutral-700);
+  --sl-input-color-hover: var(--sl-color-neutral-700);
+  --sl-input-color-focus: var(--sl-color-neutral-700);
+  --sl-input-color-disabled: var(--sl-color-neutral-900);
+  --sl-input-icon-color: var(--sl-color-neutral-400);
+  --sl-input-icon-color-hover: var(--sl-color-neutral-500);
+  --sl-input-icon-color-focus: var(--sl-color-neutral-500);
+  --sl-input-placeholder-color: var(--sl-color-neutral-400);
+  --sl-input-placeholder-color-disabled: var(--sl-color-neutral-500);
+  --sl-input-spacing-small: var(--sl-spacing-small);
+  --sl-input-spacing-medium: var(--sl-spacing-medium);
+  --sl-input-spacing-large: var(--sl-spacing-large);
+
+  --sl-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);
+  --sl-input-focus-ring-offset: 0;
+
+  --sl-input-filled-background-color: var(--sl-color-neutral-100);
+  --sl-input-filled-background-color-hover: var(
+    --sl-color-neutral-100
+  );
+  --sl-input-filled-background-color-focus: var(
+    --sl-color-neutral-100
+  );
+  --sl-input-filled-background-color-disabled: var(
+    --sl-color-neutral-100
+  );
+  --sl-input-filled-color: var(--sl-color-neutral-800);
+  --sl-input-filled-color-hover: var(--sl-color-neutral-800);
+  --sl-input-filled-color-focus: var(--sl-color-neutral-700);
+  --sl-input-filled-color-disabled: var(--sl-color-neutral-800);
+
+  --sl-input-label-font-size-small: var(--sl-font-size-small);
+  --sl-input-label-font-size-medium: var(--sl-font-size-medium);
+  --sl-input-label-font-size-large: var(--sl-font-size-large);
+  --sl-input-label-color: inherit;
+
+  --sl-input-help-text-font-size-small: var(--sl-font-size-x-small);
+  --sl-input-help-text-font-size-medium: var(--sl-font-size-small);
+  --sl-input-help-text-font-size-large: var(--sl-font-size-medium);
+  --sl-input-help-text-color: var(--sl-color-neutral-500);
+
+  --sl-toggle-size-small: 0.875rem;
+  --sl-toggle-size-medium: 1.125rem;
+  --sl-toggle-size-large: 1.375rem;
+
+  --sl-overlay-background-color: hsla(0, 0%, 100%, 0.05);
+
+  --sl-panel-background-color: var(--sl-color-neutral-0);
+  --sl-panel-border-color: var(--sl-color-neutral-300);
+  --sl-panel-border-width: 1px;
+
+  --sl-tooltip-border-radius: var(--sl-border-radius-medium);
+  --sl-tooltip-background-color: var(--sl-color-neutral-800);
+  --sl-tooltip-color: var(--sl-color-neutral-0);
+  --sl-tooltip-font-family: var(--sl-font-sans);
+  --sl-tooltip-font-weight: var(--sl-font-weight-normal);
+  --sl-tooltip-font-size: var(--sl-font-size-small);
+  --sl-tooltip-line-height: var(--sl-line-height-dense);
+  --sl-tooltip-padding: var(--sl-spacing-2x-small)
+    var(--sl-spacing-x-small);
+  --sl-tooltip-arrow-size: 6px;
+
+  --sl-z-index-drawer: 700;
+  --sl-z-index-dialog: 800;
+  --sl-z-index-dropdown: 900;
+  --sl-z-index-toast: 950;
+  --sl-z-index-tooltip: 1000;
+
+  --td-footer-background-color: #09090b;
+  --td-footer-color: #e4e4e7;
+
+  --td-code-block-toolbar-cell-background-color: #09090b;
+  --td-code-block-highlighted-background-color: #1e293b;
+
+  --td-card-color: 'inherit';
+  --td-card-background-color: var(--sl-color-neutral-0);
+  --td-card-background-hover-color: var(--sl-color-neutral-50);
+  --td-card-border-color: rgba(255, 255, 255, 0.1);
+  --td-card-box-shadow-1: rgba(0, 0, 0, 0.05);
+  --td-card-box-shadow-1-y: 3px;
+  --td-card-box-shadow-1-blur: 6px;
+  --td-card-box-shadow-2: rgba(0, 0, 0, 0.1);
+  --td-card-box-shadow-2-y: 8px;
+  --td-card-box-shadow-2-blur: 15px;
+
+  --td-card-hover-border-color: rgba(255, 255, 255, 0.2);
+  --td-card-hover-box-shadow-1: rgba(0, 0, 0, 0.04);
+  --td-card-hover-box-shadow-1-y: 5px;
+  --td-card-hover-box-shadow-1-blur: 10px;
+  --td-card-hover-box-shadow-2: rgba(0, 0, 0, 0.3);
+  --td-card-hover-box-shadow-2-y: 15px;
+  --td-card-hover-box-shadow-2-blur: 25px;
+
+  --td-body-gradient-line-color: #27272a47;
+
+  --td-editor-text-color-blue: hsl(221, 100%, 70%);
+  --td-editor-text-color-purple: hsl(291, 100%, 65%);
+  --td-editor-text-color-red: hsl(4, 100%, 63%);
+  --td-editor-text-color-green: hsl(122, 100%, 34%);
+
+  --td-editor-bg-color-blue: hsl(221, 100%, 70%, 0.2);
+  --td-editor-bg-color-purple: hsl(291, 100%, 65%, 0.2);
+  --td-editor-bg-color-red: hsl(4, 100%, 63%, 0.2);
+  --td-editor-bg-color-green: hsl(122, 100%, 34%, 0.2);
+}
+`;
+
 // src/theme/ThemeProvider.tsx
 import {
   createContext as createContext2,
   useContext as useContext5,
-  useEffect as useEffect80,
+  useEffect as useEffect81,
   useRef as useRef57,
-  useState as useState18
+  useState as useState19
 } from "react";
-import { jsx as jsx116 } from "react/jsx-runtime";
-var themeVariablesMap = {
+
+// src/theme/constants.ts
+var themeSettingsMap = {
   borderBase: "--be-border-base",
   fontSans: "--be-font-sans",
   fontSerif: "--be-font-serif",
   fontMono: "--be-font-mono",
   spacingBase: "--be-spacing-base",
-  fontSizeBase: "--be-font-size-base"
+  fontSizeBase: "--be-font-size-base",
+  focusRingWidth: "--be-focus-ring-width",
+  shadowLarge: "--be-shadow-large"
+};
+var defaultThemeSettings = {
+  borderBase: "1rem",
+  fontSans: "'Inter', sans-serif",
+  fontSerif: "Georgia, 'Times New Roman', serif",
+  fontMono: "Menlo, Monaco, 'Courier New', monospace",
+  focusRingWidth: "1px",
+  shadowLarge: "rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px",
+  spacingBase: "1rem",
+  fontSizeBase: "1rem"
 };
+
+// src/theme/ThemeProvider.tsx
+import { jsx as jsx117, jsxs as jsxs43 } from "react/jsx-runtime";
 var ThemeContext = createContext2(
   void 0
 );
 function ThemeProvider({
   theme,
-  themeVariables = {},
+  themeSettings = {},
   children
 }) {
   const rootElementRef = useRef57(null);
-  const [effectiveTheme, setEffectiveTheme] = useState18("light");
-  useEffect80(() => {
+  const [effectiveTheme, setEffectiveTheme] = useState19("light");
+  useEffect81(() => {
     const mediaQuery = window.matchMedia(
       "(prefers-color-scheme: dark)"
     );
@@ -17743,27 +18474,40 @@ function ThemeProvider({
     mediaQuery.addEventListener("change", updateEffectiveTheme);
     return () => mediaQuery.removeEventListener("change", updateEffectiveTheme);
   }, [theme]);
-  useEffect80(() => {
+  useEffect81(() => {
     rootElementRef.current?.classList.remove(
       "theme-light",
       "theme-dark"
     );
     rootElementRef.current?.classList.add(`theme-${effectiveTheme}`);
   }, [effectiveTheme]);
-  return /* @__PURE__ */ jsx116(ThemeContext.Provider, { value: { theme, effectiveTheme }, children: /* @__PURE__ */ jsx116(
-    "div",
+  return /* @__PURE__ */ jsx117(ThemeContext.Provider, { value: { theme, effectiveTheme }, children: /* @__PURE__ */ jsxs43(
+    "article",
     {
       ref: rootElementRef,
-      className: "theme-settings",
+      className: "be-article",
       style: {
         ...Object.fromEntries(
-          Object.entries(themeVariables).map(([key, value]) => [
-            themeVariablesMap[key],
+          Object.entries({
+            ...defaultThemeSettings,
+            themeSettings
+          }).map(([key, value]) => [
+            themeSettingsMap[key],
             value
           ])
         )
       },
-      children
+      children: [
+        /* @__PURE__ */ jsx117(
+          "style",
+          {
+            dangerouslySetInnerHTML: {
+              __html: effectiveTheme === "light" ? themeLight : themeDark
+            }
+          }
+        ),
+        children
+      ]
     }
   ) });
 }
@@ -17772,46 +18516,42 @@ function ThemeProvider({
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
 import { LexicalErrorBoundary as LexicalErrorBoundary9 } from "@lexical/react/LexicalErrorBoundary";
 import { HistoryPlugin as HistoryPlugin9 } from "@lexical/react/LexicalHistoryPlugin";
-import { ListPlugin as ListPlugin3 } from "@lexical/react/LexicalListPlugin";
+import { ListPlugin as ListPlugin2 } from "@lexical/react/LexicalListPlugin";
 import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
-import { RichTextPlugin as RichTextPlugin8 } from "@lexical/react/LexicalRichTextPlugin";
-import { TabIndentationPlugin as TabIndentationPlugin3 } from "@lexical/react/LexicalTabIndentationPlugin";
-import { Menu } from "lucide-react";
+import { RichTextPlugin as RichTextPlugin7 } from "@lexical/react/LexicalRichTextPlugin";
+import { TabIndentationPlugin as TabIndentationPlugin2 } from "@lexical/react/LexicalTabIndentationPlugin";
 import React24, {
   useCallback as useCallback11,
   useContext as useContext6,
-  useEffect as useEffect81,
+  useEffect as useEffect82,
   useRef as useRef58,
-  useState as useState19
+  useState as useState20
 } from "react";
-import { jsx as jsx117, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx118, jsxs as jsxs44 } from "react/jsx-runtime";
 var TOGGLE_EDITING_MODE = "TOGGLE_EDITING_MODE";
 var RESET_EDITING_MODE = "RESET_EDITING_MODE";
 var BlockEditorContext = React24.createContext(null);
 function BlockEditor(props) {
   const {
-    themeSettings,
     editable = true,
     editorState,
     theme,
+    themeSettings,
     onChange,
     children,
     renderSettings
   } = props;
-  const [modulesNumber, setModulesNumber] = useState19(0);
+  const [modulesNumber, setModulesNumber] = useState20(0);
   const editorModulesRef = useRef58({
     ...initialEditorRegistry
   });
-  const [settingsPanelSwitch, setSettingsPanelSwitch] = useState19("off");
+  const [settingsPanelSwitch, setSettingsPanelSwitch] = useState20("off");
   const settingsPanelsRef = useRef58({});
   const nestedEditorsRef = useRef58({});
   const editorRef = useRef58(null);
   const drawerRef = useRef58(null);
-  const [isBlockEditorReady, setBlockEditorReady] = useState19(false);
+  const [isBlockEditorReady, setBlockEditorReady] = useState20(false);
   const { historyState } = useSharedHistoryContext();
-  const [blockEditorStyleVars, setBlockEditorStyleVars] = useState19({
-    "--be-ol-list-style-type": "decimal"
-  });
   const handleChange = useCallback11(
     (editorState2, _editor, tags) => {
       if (onChange && !tags?.has("new_state") && !tags?.has("history-merge")) {
@@ -17821,7 +18561,7 @@ function BlockEditor(props) {
     },
     [onChange]
   );
-  useEffect81(() => {
+  useEffect82(() => {
     if (editorState) {
       const parsedEditorState = editorRef.current?.parseEditorState(editorState);
       if (parsedEditorState) {
@@ -17832,7 +18572,7 @@ function BlockEditor(props) {
     }
     editorRef.current?.setEditable(editable);
   }, [editable, editorState]);
-  useEffect81(() => {
+  useEffect82(() => {
     setBlockEditorReady(true);
   }, []);
   const registerModule = useCallback11(
@@ -17848,14 +18588,22 @@ function BlockEditor(props) {
   const openSettingsPanel = useCallback11(() => {
     setSettingsPanelSwitch("on");
   }, []);
-  const [editingMode, setEditingMode] = useState19({
+  const autoOpenSettingsPanel = useCallback11(() => {
+    setSettingsPanelSwitch((prevState) => {
+      if (prevState === "off") {
+        return "on";
+      }
+      return prevState;
+    });
+  }, []);
+  const [editingMode, setEditingMode] = useState20({
     mode: "edit"
   });
   const editingModeDataCallbackRef = useRef58();
   const handleResetPreviewModeEvent = () => {
     setEditingMode({ mode: "edit" });
   };
-  useEffect81(() => {
+  useEffect82(() => {
     if (editingMode.mode === "preview") {
       window.dispatchEvent(
         new CustomEvent(
@@ -17881,7 +18629,7 @@ function BlockEditor(props) {
       );
     }
   }, [editingMode]);
-  useEffect81(() => {
+  useEffect82(() => {
     window.addEventListener(
       RESET_EDITING_MODE,
       handleResetPreviewModeEvent
@@ -17893,7 +18641,7 @@ function BlockEditor(props) {
       );
     };
   }, []);
-  return /* @__PURE__ */ jsx117(
+  return /* @__PURE__ */ jsx118(
     BlockEditorContext.Provider,
     {
       value: {
@@ -17914,6 +18662,7 @@ function BlockEditor(props) {
         },
         settingsPanelSwitch,
         openSettingsPanel,
+        autoOpenSettingsPanel,
         toggleSettingsPanelSwitch: () => {
           setSettingsPanelSwitch((prevState) => {
             if (drawerRef.current) {
@@ -17948,101 +18697,63 @@ function BlockEditor(props) {
         },
         drawer: drawerRef.current,
         isBlockEditorReady,
-        blockEditorStyleVars,
-        setBlockEditorStyleVars: (value) => {
-          setBlockEditorStyleVars({
-            ...blockEditorStyleVars,
-            ...value
-          });
-        },
-        renderSettings: renderSettings ? renderSettings : () => /* @__PURE__ */ jsx117("div", {})
+        renderSettings: renderSettings ? renderSettings : () => /* @__PURE__ */ jsx118("div", {})
       },
-      children: /* @__PURE__ */ jsx117(ThemeProvider, { theme, themeVariables: themeSettings, children: /* @__PURE__ */ jsx117(ResizeObserver, { children: /* @__PURE__ */ jsx117(
-        "article",
-        {
-          className: "be-article",
-          style: { ...blockEditorStyleVars },
-          children: /* @__PURE__ */ jsx117(SharedHistoryContext, { children: /* @__PURE__ */ jsxs43(NodeProvider, { children: [
-            /* @__PURE__ */ jsx117(
-              "main",
-              {
-                className: `${settingsPanelSwitch === "on" ? "narrow" : ""}`,
-                children: /* @__PURE__ */ jsxs43(
-                  LexicalComposer,
-                  {
-                    initialConfig: { ...initialConfig },
-                    children: [
-                      /* @__PURE__ */ jsx117(
-                        EditorRefPlugin,
-                        {
-                          onMountRef: (editor) => editorRef.current = editor
-                        }
-                      ),
-                      /* @__PURE__ */ jsx117(AutoFocusPlugin, {}),
-                      /* @__PURE__ */ jsx117(AutoBottomParagraphPlugin, {}),
-                      /* @__PURE__ */ jsx117(
-                        HistoryPlugin9,
-                        {
-                          externalHistoryState: historyState
-                        }
-                      ),
-                      /* @__PURE__ */ jsx117(
-                        OnChangePlugin,
-                        {
-                          onChange: handleChange,
-                          ignoreSelectionChange: true
-                        }
-                      ),
-                      /* @__PURE__ */ jsx117(OnNestedChangePlugin, { onChange: handleChange }),
-                      /* @__PURE__ */ jsx117(
-                        RichTextPlugin8,
-                        {
-                          contentEditable: /* @__PURE__ */ jsx117(ContentEditable, {}),
-                          placeholder: null,
-                          ErrorBoundary: LexicalErrorBoundary9
-                        }
-                      ),
-                      /* @__PURE__ */ jsx117(NodePastePlugin, {}),
-                      /* @__PURE__ */ jsx117(ListPlugin3, {}),
-                      /* @__PURE__ */ jsx117(ListLevelLimitPlugin, {}),
-                      /* @__PURE__ */ jsx117(TabIndentationPlugin3, {}),
-                      children,
-                      /* @__PURE__ */ jsx117(TypeaheadMenuPlugin, {}),
-                      /* @__PURE__ */ jsx117(TypeaheadMenuAgentPlugin, {}),
-                      /* @__PURE__ */ jsx117(NodeMouseAnchorPlugin, {}),
-                      /* @__PURE__ */ jsx117(NodeMousePlugin, {}),
-                      /* @__PURE__ */ jsx117(TextToolbarPlugin, {}),
-                      /* @__PURE__ */ jsx117(TextToolbarAgentPlugin, {}),
-                      /* @__PURE__ */ jsx117(TypeaheadVariableAgentPlugin, {}),
-                      /* @__PURE__ */ jsx117(VariableComponentPlugin, {}),
-                      /* @__PURE__ */ jsx117(MarkdownPlugin, {})
-                    ]
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx117(
-              "nav",
-              {
-                ref: drawerRef,
-                className: settingsPanelSwitch === "on" ? "shown" : "hidden",
-                children: settingsPanelSwitch === "off" && /* @__PURE__ */ jsx117("div", { children: /* @__PURE__ */ jsx117(
-                  Button,
-                  {
-                    className: "cancel",
-                    variant: "text",
-                    size: "large",
-                    StartIcon: Menu,
-                    onClick: () => {
-                      setSettingsPanelSwitch("on");
-                    }
-                  }
-                ) })
-              }
-            )
-          ] }) })
-        }
-      ) }) })
+      children: /* @__PURE__ */ jsx118(ResizeObserver, { children: /* @__PURE__ */ jsx118(ThemeProvider, { theme, themeSettings, children: /* @__PURE__ */ jsx118(SharedHistoryContext, { children: /* @__PURE__ */ jsxs44(NodeProvider, { children: [
+        /* @__PURE__ */ jsx118(
+          "main",
+          {
+            className: `${settingsPanelSwitch === "on" ? "narrow" : ""}`,
+            children: /* @__PURE__ */ jsxs44(LexicalComposer, { initialConfig: { ...initialConfig }, children: [
+              /* @__PURE__ */ jsx118(
+                EditorRefPlugin,
+                {
+                  onMountRef: (editor) => editorRef.current = editor
+                }
+              ),
+              /* @__PURE__ */ jsx118(AutoFocusPlugin, {}),
+              /* @__PURE__ */ jsx118(AutoBottomParagraphPlugin, {}),
+              /* @__PURE__ */ jsx118(
+                HistoryPlugin9,
+                {
+                  externalHistoryState: historyState
+                }
+              ),
+              /* @__PURE__ */ jsx118(
+                OnChangePlugin,
+                {
+                  onChange: handleChange,
+                  ignoreSelectionChange: true
+                }
+              ),
+              /* @__PURE__ */ jsx118(OnNestedChangePlugin, { onChange: handleChange }),
+              /* @__PURE__ */ jsx118(
+                RichTextPlugin7,
+                {
+                  contentEditable: /* @__PURE__ */ jsx118(ContentEditable, {}),
+                  placeholder: null,
+                  ErrorBoundary: LexicalErrorBoundary9
+                }
+              ),
+              /* @__PURE__ */ jsx118(NodePastePlugin, {}),
+              /* @__PURE__ */ jsx118(ListPlugin2, {}),
+              /* @__PURE__ */ jsx118(ListLevelLimitPlugin, {}),
+              /* @__PURE__ */ jsx118(TabIndentationPlugin2, {}),
+              children,
+              /* @__PURE__ */ jsx118(TypeaheadMenuPlugin, {}),
+              /* @__PURE__ */ jsx118(TypeaheadMenuAgentPlugin, {}),
+              /* @__PURE__ */ jsx118(NodeMouseAnchorPlugin, {}),
+              /* @__PURE__ */ jsx118(NodeMousePlugin, {}),
+              /* @__PURE__ */ jsx118(TextToolbarPlugin, {}),
+              /* @__PURE__ */ jsx118(TextToolbarAgentPlugin, {}),
+              /* @__PURE__ */ jsx118(TypeaheadVariableAgentPlugin, {}),
+              /* @__PURE__ */ jsx118(VariableComponentPlugin, {}),
+              /* @__PURE__ */ jsx118(MarkdownPlugin, {})
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx118(Drawer, { ref: drawerRef })
+      ] }) }) }) })
     }
   );
 }
@@ -18056,24 +18767,31 @@ var useBlockEditor = () => {
   return context;
 };
 
+// src/BlockEditorStyle.tsx
+import { jsx as jsx119 } from "react/jsx-runtime";
+function BlockEditorStyle(props) {
+  const { children, theme, themeSettings } = props;
+  return /* @__PURE__ */ jsx119(ThemeProvider, { theme, themeSettings, children });
+}
+
 // src/modules/Callout.tsx
-import { useEffect as useEffect82 } from "react";
-import { jsx as jsx118 } from "react/jsx-runtime";
+import { useEffect as useEffect83 } from "react";
+import { jsx as jsx120 } from "react/jsx-runtime";
 function Callout() {
   const { registerModule } = useBlockEditor();
-  useEffect82(() => {
+  useEffect83(() => {
     registerModule("Callout");
   }, [registerModule]);
-  return /* @__PURE__ */ jsx118(CalloutBoxPlugin, {});
+  return /* @__PURE__ */ jsx120(CalloutBoxPlugin, {});
 }
 
 // src/plugins/TreeViewPlugin/index.tsx
 import { useLexicalComposerContext as useLexicalComposerContext64 } from "@lexical/react/LexicalComposerContext";
 import { TreeView } from "@lexical/react/LexicalTreeView";
-import { jsx as jsx119 } from "react/jsx-runtime";
+import { jsx as jsx121 } from "react/jsx-runtime";
 function TreeViewPlugin() {
   const [editor] = useLexicalComposerContext64();
-  return /* @__PURE__ */ jsx119(
+  return /* @__PURE__ */ jsx121(
     TreeView,
     {
       viewClassName: "tree-view-output",
@@ -18088,26 +18806,26 @@ function TreeViewPlugin() {
 }
 
 // src/modules/Debug.tsx
-import { useEffect as useEffect83 } from "react";
-import { jsx as jsx120 } from "react/jsx-runtime";
+import { useEffect as useEffect84 } from "react";
+import { jsx as jsx122 } from "react/jsx-runtime";
 function Debug() {
   const { registerModule } = useBlockEditor();
-  useEffect83(() => {
+  useEffect84(() => {
     registerModule("Debug");
   }, [registerModule]);
-  return /* @__PURE__ */ jsx120(TreeViewPlugin, {});
+  return /* @__PURE__ */ jsx122(TreeViewPlugin, {});
 }
 
 // src/modules/Image.tsx
-import { useEffect as useEffect84 } from "react";
-import { Fragment as Fragment46, jsx as jsx121 } from "react/jsx-runtime";
+import { useEffect as useEffect85 } from "react";
+import { Fragment as Fragment46, jsx as jsx123 } from "react/jsx-runtime";
 function Image(props) {
   const { imageSettings } = props;
   const { registerModule } = useBlockEditor();
-  useEffect84(() => {
+  useEffect85(() => {
     registerModule("Image");
   }, [registerModule]);
-  return /* @__PURE__ */ jsx121(Fragment46, { children: /* @__PURE__ */ jsx121(ImagePlugin, { imageSettings }) });
+  return /* @__PURE__ */ jsx123(Fragment46, { children: /* @__PURE__ */ jsx123(ImagePlugin, { imageSettings }) });
 }
 
 // src/plugins/LinkToolbarPlugin/LinkToolbarPlugin.tsx
@@ -18127,14 +18845,14 @@ import {
 } from "lexical";
 import debounce6 from "lodash-es/debounce";
 import { Pencil, Trash2 as Trash24, X } from "lucide-react";
-import { useCallback as useCallback12, useEffect as useEffect85, useRef as useRef59, useState as useState20 } from "react";
-import { jsx as jsx122, jsxs as jsxs44 } from "react/jsx-runtime";
+import { useCallback as useCallback12, useEffect as useEffect86, useRef as useRef59, useState as useState21 } from "react";
+import { jsx as jsx124, jsxs as jsxs45 } from "react/jsx-runtime";
 function LinkToolbarPlugin() {
   const [editor] = useLexicalComposerContext65();
   const popupToolbarRef = useRef59(null);
   const linkTextNodeRef = useRef59();
   const linkTextNodeOffsetRef = useRef59();
-  const [linkNode, setLinkNode] = useState20();
+  const [linkNode, setLinkNode] = useState21();
   const linkNodeElementRef = useRef59();
   const activeEditorRef = useRef59();
   const handleClose = () => {
@@ -18154,7 +18872,7 @@ function LinkToolbarPlugin() {
     }, 10),
     [editor]
   );
-  useEffect85(() => {
+  useEffect86(() => {
     return mergeRegister27(
       editor.registerCommand(
         CLICK_COMMAND13,
@@ -18228,7 +18946,7 @@ function LinkToolbarPlugin() {
       )
     );
   }, [editor]);
-  useEffect85(() => {
+  useEffect86(() => {
     window.addEventListener("scroll", repositionPopupToolbar);
     window.addEventListener("resize", repositionPopupToolbar);
     return () => {
@@ -18238,12 +18956,12 @@ function LinkToolbarPlugin() {
   }, [editor]);
   const linkUrl = linkNode?.linkUrl;
   const linkTitle = linkNode?.linkUrl;
-  return /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsx124(
     PopupToolbar,
     {
       ref: popupToolbarRef,
       onEscape: handleClose,
-      toolbar: /* @__PURE__ */ jsxs44(
+      toolbar: /* @__PURE__ */ jsxs45(
         "div",
         {
           style: {
@@ -18256,23 +18974,23 @@ function LinkToolbarPlugin() {
             padding: "var(--sl-spacing-2x-small) var(--sl-spacing-x-small) var(--sl-spacing-2x-small) var(--sl-spacing-medium)"
           },
           children: [
-            /* @__PURE__ */ jsx122("div", { children: /* @__PURE__ */ jsx122("a", { href: linkUrl, target: linkNode?.linkTarget || "", children: /* @__PURE__ */ jsx122(
+            /* @__PURE__ */ jsx124("div", { children: /* @__PURE__ */ jsx124("a", { href: linkUrl, target: linkNode?.linkTarget || "", children: /* @__PURE__ */ jsx124(
               "sl-tooltip",
               {
                 style: { "--show-delay": "1800" },
                 hoist: true,
                 content: linkUrl || "[Empty URL]",
-                children: /* @__PURE__ */ jsx122("span", { className: "line-short-20", children: linkTitle })
+                children: /* @__PURE__ */ jsx124("span", { className: "line-short-20", children: linkTitle })
               }
             ) }) }),
-            /* @__PURE__ */ jsxs44(Stack, { className: "stack__row", children: [
-              /* @__PURE__ */ jsx122("div", { children: /* @__PURE__ */ jsx122(
+            /* @__PURE__ */ jsxs45(Stack, { className: "stack__row", children: [
+              /* @__PURE__ */ jsx124("div", { children: /* @__PURE__ */ jsx124(
                 "sl-tooltip",
                 {
                   style: { "--show-delay": "1800" },
                   hoist: "hoist",
                   content: "Edit Link",
-                  children: /* @__PURE__ */ jsx122(
+                  children: /* @__PURE__ */ jsx124(
                     Button,
                     {
                       size: "small",
@@ -18311,13 +19029,13 @@ function LinkToolbarPlugin() {
                   )
                 }
               ) }),
-              /* @__PURE__ */ jsx122("div", { children: /* @__PURE__ */ jsx122(
+              /* @__PURE__ */ jsx124("div", { children: /* @__PURE__ */ jsx124(
                 "sl-tooltip",
                 {
                   style: { "--show-delay": "1800" },
                   hoist: "hoist",
                   content: "Remove Link",
-                  children: /* @__PURE__ */ jsx122(
+                  children: /* @__PURE__ */ jsx124(
                     Button,
                     {
                       size: "small",
@@ -18352,13 +19070,13 @@ function LinkToolbarPlugin() {
                   )
                 }
               ) }),
-              /* @__PURE__ */ jsx122("div", { children: /* @__PURE__ */ jsx122(
+              /* @__PURE__ */ jsx124("div", { children: /* @__PURE__ */ jsx124(
                 "sl-tooltip",
                 {
                   style: { "--show-delay": "1800" },
                   hoist: "hoist",
                   content: "Close",
-                  children: /* @__PURE__ */ jsx122(
+                  children: /* @__PURE__ */ jsx124(
                     Button,
                     {
                       size: "small",
@@ -18380,16 +19098,16 @@ function LinkToolbarPlugin() {
 }
 
 // src/modules/Link.tsx
-import { useEffect as useEffect86 } from "react";
-import { Fragment as Fragment47, jsx as jsx123, jsxs as jsxs45 } from "react/jsx-runtime";
+import { useEffect as useEffect87 } from "react";
+import { Fragment as Fragment47, jsx as jsx125, jsxs as jsxs46 } from "react/jsx-runtime";
 function Link() {
   const { registerModule } = useBlockEditor();
-  useEffect86(() => {
+  useEffect87(() => {
     registerModule("Link");
   }, [registerModule]);
-  return /* @__PURE__ */ jsxs45(Fragment47, { children: [
-    /* @__PURE__ */ jsx123(LinkEditorPlugin, {}),
-    /* @__PURE__ */ jsx123(LinkToolbarPlugin, {})
+  return /* @__PURE__ */ jsxs46(Fragment47, { children: [
+    /* @__PURE__ */ jsx125(LinkEditorPlugin, {}),
+    /* @__PURE__ */ jsx125(LinkToolbarPlugin, {})
   ] });
 }
 
@@ -18403,12 +19121,12 @@ import {
   COMMAND_PRIORITY_EDITOR as COMMAND_PRIORITY_EDITOR15,
   createCommand as createCommand20
 } from "lexical";
-import { useEffect as useEffect87 } from "react";
-import { Fragment as Fragment48, jsx as jsx124 } from "react/jsx-runtime";
+import { useEffect as useEffect88 } from "react";
+import { Fragment as Fragment48, jsx as jsx126 } from "react/jsx-runtime";
 var INSERT_ESSAY_QUESTION_COMMAND = createCommand20("INSERT_ESSAY_QUESTION_COMMAND");
 function EssayQuestionPlugin() {
   const [editor] = useLexicalComposerContext66();
-  useEffect87(() => {
+  useEffect88(() => {
     return mergeRegister28(
       editor.registerCommand(
         INSERT_ESSAY_QUESTION_COMMAND,
@@ -18442,13 +19160,13 @@ function EssayQuestionPlugin() {
       )
     );
   }, [editor]);
-  return /* @__PURE__ */ jsx124(Fragment48, {});
+  return /* @__PURE__ */ jsx126(Fragment48, {});
 }
 
 // src/plugins/FinancialStatementQuestionPlugin/FinancialStatementQuestionSettings.tsx
 import { useLexicalComposerContext as useLexicalComposerContext67 } from "@lexical/react/LexicalComposerContext";
 import { $getNodeByKey as $getNodeByKey55 } from "lexical";
-import { useEffect as useEffect88, useRef as useRef60, useState as useState21 } from "react";
+import { useEffect as useEffect89, useRef as useRef60, useState as useState22 } from "react";
 
 // src/plugins/FinancialStatementQuestionPlugin/validatePointslnput.ts
 function validatePointsInput6(input) {
@@ -18470,13 +19188,13 @@ function validatePointsInput6(input) {
 }
 
 // src/plugins/FinancialStatementQuestionPlugin/FinancialStatementQuestionSettings.tsx
-import { jsx as jsx125 } from "react/jsx-runtime";
+import { jsx as jsx127 } from "react/jsx-runtime";
 function FinancialStatementQuestionSettings(props) {
   const { nodeKey } = props;
   const [editor] = useLexicalComposerContext67();
   const pointsTextInputRef = useRef60(null);
-  const [foundNode, setFoundNode] = useState21();
-  useEffect88(() => {
+  const [foundNode, setFoundNode] = useState22();
+  useEffect89(() => {
     if (nodeKey) {
       editor.getEditorState().read(() => {
         const fillInTheBlankNode = $getNodeByKey55(nodeKey);
@@ -18489,7 +19207,7 @@ function FinancialStatementQuestionSettings(props) {
   if (!foundNode) {
     return null;
   }
-  return /* @__PURE__ */ jsx125("div", { children: /* @__PURE__ */ jsx125(
+  return /* @__PURE__ */ jsx127("div", { children: /* @__PURE__ */ jsx127(
     TextInput,
     {
       ref: pointsTextInputRef,
@@ -18525,14 +19243,14 @@ import {
   $createNodeSelection as $createNodeSelection20,
   $createParagraphNode as $createParagraphNode23,
   $getNodeByKey as $getNodeByKey56,
-  $getRoot as $getRoot22,
+  $getRoot as $getRoot21,
   $setSelection as $setSelection24,
   COMMAND_PRIORITY_EDITOR as COMMAND_PRIORITY_EDITOR16,
   createCommand as createCommand21,
   createEditor as createEditor9
 } from "lexical";
-import { useEffect as useEffect89, useRef as useRef61 } from "react";
-import { Fragment as Fragment49, jsx as jsx126, jsxs as jsxs46 } from "react/jsx-runtime";
+import { useEffect as useEffect90, useRef as useRef61 } from "react";
+import { Fragment as Fragment49, jsx as jsx128, jsxs as jsxs47 } from "react/jsx-runtime";
 var INSERT_FINANCIAL_STATEMENT_QUESTION_COMMAND = createCommand21("INSERT_FINANCIAL_STATEMENT_QUESTION_COMMAND");
 function FinancialStatementQuestionPlugin() {
   const {
@@ -18543,7 +19261,7 @@ function FinancialStatementQuestionPlugin() {
   } = useBlockEditor();
   const [editor] = useLexicalComposerContext68();
   const settingsPanelStickyRef = useRef61(null);
-  useEffect89(() => {
+  useEffect90(() => {
     return mergeRegister29(
       editor.registerCommand(
         INSERT_FINANCIAL_STATEMENT_QUESTION_COMMAND,
@@ -18556,7 +19274,7 @@ function FinancialStatementQuestionPlugin() {
                 if (targetNode) {
                   const headerEditor = createEditor9();
                   headerEditor.update(() => {
-                    const root = $getRoot22();
+                    const root = $getRoot21();
                     const paragraph = $createParagraphNode23();
                     root.append(paragraph);
                   });
@@ -18587,7 +19305,7 @@ function FinancialStatementQuestionPlugin() {
       )
     );
   }, [editor]);
-  useEffect89(() => {
+  useEffect90(() => {
     if (isBlockEditorReady) {
       if (settingsPanelStickyRef.current) {
         registerSettingsPanel(
@@ -18597,21 +19315,21 @@ function FinancialStatementQuestionPlugin() {
       }
     }
   }, [isBlockEditorReady]);
-  return /* @__PURE__ */ jsxs46(Fragment49, { children: [
-    drawer && /* @__PURE__ */ jsx126(
+  return /* @__PURE__ */ jsxs47(Fragment49, { children: [
+    drawer && /* @__PURE__ */ jsx128(
       StickyToPosition,
       {
         ref: settingsPanelStickyRef,
         container: drawer,
         children: (data, position, isVisible) => {
-          return /* @__PURE__ */ jsx126("div", { style: { width: position.width }, children: /* @__PURE__ */ jsx126(
+          return /* @__PURE__ */ jsx128("div", { style: { width: position.width }, children: /* @__PURE__ */ jsx128(
             SettingsCard,
             {
               isVisible: !!isVisible,
               container: drawer,
               title: "Financial Statement Settings",
               onClose: toggleSettingsPanelSwitch,
-              children: isVisible && /* @__PURE__ */ jsx126(
+              children: isVisible && /* @__PURE__ */ jsx128(
                 FinancialStatementQuestionSettings,
                 {
                   nodeKey: data.nodeKey
@@ -18623,36 +19341,36 @@ function FinancialStatementQuestionPlugin() {
         }
       }
     ),
-    /* @__PURE__ */ jsx126(FillInTheBlankSpaceSettingsPlugin, {})
+    /* @__PURE__ */ jsx128(FillInTheBlankSpaceSettingsPlugin, {})
   ] });
 }
 
 // src/modules/Questions.tsx
-import { useEffect as useEffect90 } from "react";
-import { Fragment as Fragment50, jsx as jsx127, jsxs as jsxs47 } from "react/jsx-runtime";
+import { useEffect as useEffect91 } from "react";
+import { Fragment as Fragment50, jsx as jsx129, jsxs as jsxs48 } from "react/jsx-runtime";
 function Questions() {
   const { registerModule } = useBlockEditor();
-  useEffect90(() => {
+  useEffect91(() => {
     registerModule("Questions");
   }, [registerModule]);
-  return /* @__PURE__ */ jsxs47(Fragment50, { children: [
-    /* @__PURE__ */ jsx127(MultipleOptionQuestionPlugin, {}),
-    /* @__PURE__ */ jsx127(ShortAnswerQuestionPlugin, {}),
-    /* @__PURE__ */ jsx127(MatchingQuestionPlugin, {}),
-    /* @__PURE__ */ jsx127(FillInTheBlankQuestionPlugin, {}),
-    /* @__PURE__ */ jsx127(JournalEntryQuestionPlugin, {}),
-    /* @__PURE__ */ jsx127(FinancialStatementQuestionPlugin, {}),
-    /* @__PURE__ */ jsx127(EssayQuestionPlugin, {})
+  return /* @__PURE__ */ jsxs48(Fragment50, { children: [
+    /* @__PURE__ */ jsx129(MultipleOptionQuestionPlugin, {}),
+    /* @__PURE__ */ jsx129(ShortAnswerQuestionPlugin, {}),
+    /* @__PURE__ */ jsx129(MatchingQuestionPlugin, {}),
+    /* @__PURE__ */ jsx129(FillInTheBlankQuestionPlugin, {}),
+    /* @__PURE__ */ jsx129(JournalEntryQuestionPlugin, {}),
+    /* @__PURE__ */ jsx129(FinancialStatementQuestionPlugin, {}),
+    /* @__PURE__ */ jsx129(EssayQuestionPlugin, {})
   ] });
 }
 
 // src/modules/SettingsPanel.tsx
-import { useEffect as useEffect91 } from "react";
-import { jsx as jsx128 } from "react/jsx-runtime";
+import { useEffect as useEffect92 } from "react";
+import { jsx as jsx130 } from "react/jsx-runtime";
 function SettingsPanel(props) {
   const { defaultOpen = true } = props;
   const { registerModule, openSettingsPanel } = useBlockEditor();
-  useEffect91(() => {
+  useEffect92(() => {
     registerModule("SettingsPanel");
     setTimeout(() => {
       if (defaultOpen) {
@@ -18660,11 +19378,11 @@ function SettingsPanel(props) {
       }
     }, 50);
   }, [registerModule, defaultOpen, openSettingsPanel]);
-  return /* @__PURE__ */ jsx128(SettingsPanelPlugin, {});
+  return /* @__PURE__ */ jsx130(SettingsPanelPlugin, {});
 }
 
 // src/plugins/VariablesPlugin/VariableSettingsPlugin.tsx
-import { useEffect as useEffect93, useRef as useRef63 } from "react";
+import { useEffect as useEffect94, useRef as useRef63 } from "react";
 
 // src/plugins/VariablesPlugin/VariableSettings.tsx
 import { useLexicalComposerContext as useLexicalComposerContext69 } from "@lexical/react/LexicalComposerContext";
@@ -18674,12 +19392,12 @@ import {
 } from "lexical";
 import { Pencil as Pencil2, Save, Trash2 as Trash25 } from "lucide-react";
 import {
-  useEffect as useEffect92,
+  useEffect as useEffect93,
   useMemo as useMemo15,
   useRef as useRef62,
-  useState as useState22
+  useState as useState23
 } from "react";
-import { Fragment as Fragment51, jsx as jsx129, jsxs as jsxs48 } from "react/jsx-runtime";
+import { Fragment as Fragment51, jsx as jsx131, jsxs as jsxs49 } from "react/jsx-runtime";
 var controlGridStyle = {
   width: "100%",
   display: "flex",
@@ -18713,10 +19431,10 @@ function VariableSettings(props) {
   const { variableList, onRenamed } = useVariables();
   const [editor] = useLexicalComposerContext69();
   const activeEditorRef = useRef62();
-  const [currentVariableNode, setCurrentVariableNode] = useState22();
-  const [isSettingsEditingMode, setSettingsEditingMode] = useState22(false);
+  const [currentVariableNode, setCurrentVariableNode] = useState23();
+  const [isSettingsEditingMode, setSettingsEditingMode] = useState23(false);
   const variableNameInputRef = useRef62(null);
-  useEffect92(() => {
+  useEffect93(() => {
     if (nodeKey) {
       activeEditorRef.current = nestedEditorId ? getNestedEditor(nestedEditorId) || editor : editor;
       if (activeEditorRef.current) {
@@ -18901,8 +19619,8 @@ function VariableSettings(props) {
   if (!currentVariableNode) {
     return null;
   }
-  return /* @__PURE__ */ jsxs48(Fragment51, { children: [
-    /* @__PURE__ */ jsx129("div", { style: formFieldStyle, children: /* @__PURE__ */ jsx129(
+  return /* @__PURE__ */ jsxs49(Fragment51, { children: [
+    /* @__PURE__ */ jsx131("div", { style: formFieldStyle, children: /* @__PURE__ */ jsx131(
       Button,
       {
         className: "button__fullwidth",
@@ -18921,10 +19639,10 @@ function VariableSettings(props) {
         variant: "default"
       }
     ) }),
-    /* @__PURE__ */ jsxs48("div", { style: formFieldStyle, children: [
-      /* @__PURE__ */ jsx129("div", { style: formFieldLabel, children: "Name" }),
-      /* @__PURE__ */ jsxs48("div", { style: controlGridStyle, children: [
-        /* @__PURE__ */ jsx129("div", { style: { flexGrow: 1 }, children: isSettingsEditingMode ? /* @__PURE__ */ jsx129(
+    /* @__PURE__ */ jsxs49("div", { style: formFieldStyle, children: [
+      /* @__PURE__ */ jsx131("div", { style: formFieldLabel, children: "Name" }),
+      /* @__PURE__ */ jsxs49("div", { style: controlGridStyle, children: [
+        /* @__PURE__ */ jsx131("div", { style: { flexGrow: 1 }, children: isSettingsEditingMode ? /* @__PURE__ */ jsx131(
           "form",
           {
             onSubmit: (e) => {
@@ -18932,7 +19650,7 @@ function VariableSettings(props) {
               e.preventDefault();
               updateVariableName();
             },
-            children: /* @__PURE__ */ jsx129(
+            children: /* @__PURE__ */ jsx131(
               TextInput,
               {
                 ref: variableNameInputRef,
@@ -18944,7 +19662,7 @@ function VariableSettings(props) {
               }
             )
           }
-        ) : /* @__PURE__ */ jsx129(
+        ) : /* @__PURE__ */ jsx131(
           DropdownButton,
           {
             className: "button__fullwidth button__left_aligned",
@@ -18957,7 +19675,7 @@ function VariableSettings(props) {
             menu: variablesMenu
           }
         ) }),
-        /* @__PURE__ */ jsx129("div", { style: { flexGrow: 0 }, children: isSettingsEditingMode ? /* @__PURE__ */ jsx129(
+        /* @__PURE__ */ jsx131("div", { style: { flexGrow: 0 }, children: isSettingsEditingMode ? /* @__PURE__ */ jsx131(
           Button,
           {
             StartIcon: Save,
@@ -18965,7 +19683,7 @@ function VariableSettings(props) {
             size: "small",
             onClick: updateVariableName
           }
-        ) : /* @__PURE__ */ jsx129(
+        ) : /* @__PURE__ */ jsx131(
           Button,
           {
             StartIcon: Pencil2,
@@ -18978,9 +19696,9 @@ function VariableSettings(props) {
         ) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs48("div", { style: formFieldStyle, children: [
-      /* @__PURE__ */ jsx129("div", { style: formFieldLabel, children: "Type" }),
-      /* @__PURE__ */ jsx129(
+    /* @__PURE__ */ jsxs49("div", { style: formFieldStyle, children: [
+      /* @__PURE__ */ jsx131("div", { style: formFieldLabel, children: "Type" }),
+      /* @__PURE__ */ jsx131(
         DropdownButton,
         {
           className: "button__fullwidth button__left_aligned",
@@ -18994,9 +19712,9 @@ function VariableSettings(props) {
         }
       )
     ] }),
-    currentVariableNode.getVariableFormat() && /* @__PURE__ */ jsxs48("div", { style: formFieldStyle, children: [
-      /* @__PURE__ */ jsx129("div", { style: formFieldLabel, children: "Format" }),
-      /* @__PURE__ */ jsx129(
+    currentVariableNode.getVariableFormat() && /* @__PURE__ */ jsxs49("div", { style: formFieldStyle, children: [
+      /* @__PURE__ */ jsx131("div", { style: formFieldLabel, children: "Format" }),
+      /* @__PURE__ */ jsx131(
         DropdownButton,
         {
           className: "button__fullwidth button__left_aligned",
@@ -19010,7 +19728,7 @@ function VariableSettings(props) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx129("div", { style: { width: "100%", display: "f" }, children: /* @__PURE__ */ jsx129(
+    /* @__PURE__ */ jsx131("div", { style: { width: "100%", display: "f" }, children: /* @__PURE__ */ jsx131(
       Button,
       {
         size: "small",
@@ -19052,7 +19770,7 @@ function VariableSettings(props) {
 }
 
 // src/plugins/VariablesPlugin/VariableSettingsPlugin.tsx
-import { Fragment as Fragment52, jsx as jsx130 } from "react/jsx-runtime";
+import { Fragment as Fragment52, jsx as jsx132 } from "react/jsx-runtime";
 function VariableSettingsPlugin() {
   const {
     registerSettingsPanel,
@@ -19061,7 +19779,7 @@ function VariableSettingsPlugin() {
     toggleSettingsPanelSwitch
   } = useBlockEditor();
   const settingsPanelStickyRef = useRef63(null);
-  useEffect93(() => {
+  useEffect94(() => {
     if (isBlockEditorReady) {
       if (settingsPanelStickyRef.current) {
         registerSettingsPanel(
@@ -19071,20 +19789,20 @@ function VariableSettingsPlugin() {
       }
     }
   }, [isBlockEditorReady]);
-  return /* @__PURE__ */ jsx130(Fragment52, { children: drawer && /* @__PURE__ */ jsx130(
+  return /* @__PURE__ */ jsx132(Fragment52, { children: drawer && /* @__PURE__ */ jsx132(
     StickyToPosition,
     {
       ref: settingsPanelStickyRef,
       container: drawer,
       children: (data, position, isVisible) => {
-        return /* @__PURE__ */ jsx130("div", { style: { width: position.width }, children: /* @__PURE__ */ jsx130(
+        return /* @__PURE__ */ jsx132("div", { style: { width: position.width }, children: /* @__PURE__ */ jsx132(
           SettingsCard,
           {
             isVisible: !!isVisible,
             container: drawer,
             title: "Variable Settings",
             onClose: toggleSettingsPanelSwitch,
-            children: /* @__PURE__ */ jsx130(
+            children: /* @__PURE__ */ jsx132(
               VariableSettings,
               {
                 nodeKey: data.nodeKey,
@@ -19112,18 +19830,18 @@ import debounce7 from "lodash-es/debounce";
 import { Bold as Bold2, Italic as Italic2, Underline as Underline2 } from "lucide-react";
 import {
   useCallback as useCallback13,
-  useEffect as useEffect94,
+  useEffect as useEffect95,
   useMemo as useMemo16,
   useRef as useRef64,
-  useState as useState23
+  useState as useState24
 } from "react";
-import { jsx as jsx131 } from "react/jsx-runtime";
+import { jsx as jsx133 } from "react/jsx-runtime";
 function VariableToolbarPlugin() {
   const [editor] = useLexicalComposerContext70();
   const popupToolbarRef = useRef64(null);
   const activeEditorRef = useRef64();
   const selectedNodeRef = useRef64();
-  const [toolbarState, setToolbarState] = useState23({
+  const [toolbarState, setToolbarState] = useState24({
     isBold: false,
     isItalic: false,
     isUnderline: false
@@ -19226,7 +19944,7 @@ function VariableToolbarPlugin() {
     }, 10),
     [activeEditorRef.current]
   );
-  useEffect94(() => {
+  useEffect95(() => {
     return mergeRegister30(
       editor.registerCommand(
         VARIABLE_TOOLBAR_SELECTION_CHANGE_COMMAND,
@@ -19266,7 +19984,7 @@ function VariableToolbarPlugin() {
       )
     );
   }, [editor]);
-  useEffect94(() => {
+  useEffect95(() => {
     window.addEventListener("scroll", repositionPopupToolbar);
     window.addEventListener("resize", repositionPopupToolbar);
     return () => {
@@ -19310,34 +20028,35 @@ function VariableToolbarPlugin() {
     ];
     return resultList;
   }, [toolbarState]);
-  return /* @__PURE__ */ jsx131(PopupToolbar, { ref: popupToolbarRef, menu: menuItems });
+  return /* @__PURE__ */ jsx133(PopupToolbar, { ref: popupToolbarRef, menu: menuItems });
 }
 
 // src/modules/Variables.tsx
-import { useEffect as useEffect95 } from "react";
-import { jsx as jsx132, jsxs as jsxs49 } from "react/jsx-runtime";
+import { useEffect as useEffect96 } from "react";
+import { jsx as jsx134, jsxs as jsxs50 } from "react/jsx-runtime";
 function Variables(props) {
   const { variablesSettings } = props;
   const { registerModule, setEditingModeDataCallback } = useBlockEditor();
-  useEffect95(() => {
+  useEffect96(() => {
     registerModule("Variables");
   }, [registerModule]);
-  useEffect95(() => {
+  useEffect96(() => {
     setEditingModeDataCallback(() => {
       return {
         variableValues: variablesSettings.getVariableValues()
       };
     });
   }, [variablesSettings, setEditingModeDataCallback]);
-  return /* @__PURE__ */ jsxs49(VariablesProvider, { variablesSettings, children: [
-    /* @__PURE__ */ jsx132(TypeaheadVariablePlugin, {}),
-    /* @__PURE__ */ jsx132(VariableSettingsPlugin, {}),
-    /* @__PURE__ */ jsx132(VariableToolbarPlugin, {}),
-    /* @__PURE__ */ jsx132(VariableToolbarAgentPlugin, {})
+  return /* @__PURE__ */ jsxs50(VariablesProvider, { variablesSettings, children: [
+    /* @__PURE__ */ jsx134(TypeaheadVariablePlugin, {}),
+    /* @__PURE__ */ jsx134(VariableSettingsPlugin, {}),
+    /* @__PURE__ */ jsx134(VariableToolbarPlugin, {}),
+    /* @__PURE__ */ jsx134(VariableToolbarAgentPlugin, {})
   ] });
 }
 export {
   BlockEditor,
+  BlockEditorStyle,
   Callout,
   Debug,
   Image,