tetrons 2.3.76 → 2.3.78

package/dist/index.mjs

@@ -1,21 +1,210 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/components/tetrons/toolbar/MathModal.js
+var MathModal_exports = {};
+__export(MathModal_exports, {
+  default: () => MathModal
+});
+import { useEffect as useEffect7 } from "react";
+import katex2 from "katex";
+import "katex/dist/katex.min.css";
+function MathModal({
+  isOpen,
+  onClose,
+  onSubmit,
+  value,
+  setValue
+}) {
+  useEffect7(() => {
+    const onEsc = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    if (isOpen) {
+      window.addEventListener("keydown", onEsc);
+    }
+    return () => window.removeEventListener("keydown", onEsc);
+  }, [isOpen, onClose]);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ React.createElement("div", { className: "ai-modal-backdrop" }, /* @__PURE__ */ React.createElement("div", { className: "ai-modal-content" }, /* @__PURE__ */ React.createElement("div", { className: "ai-modal-title" }, "Insert LaTeX Equation"), /* @__PURE__ */ React.createElement(
+    "textarea",
+    {
+      className: "ai-modal-textarea",
+      placeholder: "Enter LaTeX code here...",
+      value,
+      onChange: (e) => setValue(e.target.value)
+    }
+  ), /* @__PURE__ */ React.createElement("div", { className: "ai-modal-preview" }, /* @__PURE__ */ React.createElement("strong", null, "Preview:"), /* @__PURE__ */ React.createElement("div", { className: "ai-modal-preview-output" }, /* @__PURE__ */ React.createElement("span", { dangerouslySetInnerHTML: { __html: renderLatex(value) } }))), /* @__PURE__ */ React.createElement("div", { className: "ai-modal-actions" }, /* @__PURE__ */ React.createElement("button", { type: "button", className: "ai-cancel-btn", onClick: onClose }, "Cancel"), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: "ai-submit-btn",
+      onClick: () => onSubmit(value),
+      disabled: !value.trim()
+    },
+    "Insert"
+  ))));
+}
+function renderLatex(latex) {
+  try {
+    return katex2.renderToString(latex, {
+      throwOnError: false,
+      displayMode: false
+    });
+  } catch {
+    return `<span style="color: red;">Invalid LaTeX</span>`;
+  }
+}
+var init_MathModal = __esm({
+  "src/components/tetrons/toolbar/MathModal.js"() {
+    "use strict";
+  }
+});
+
+// src/components/tetrons/toolbar/CodeEditorModal.js
+var CodeEditorModal_exports = {};
+__export(CodeEditorModal_exports, {
+  default: () => CodeEditorModal_default
+});
+import React14, { useState as useState8 } from "react";
+import Editor from "@monaco-editor/react";
+var CodeEditorModal, CodeEditorModal_default;
+var init_CodeEditorModal = __esm({
+  "src/components/tetrons/toolbar/CodeEditorModal.js"() {
+    "use strict";
+    "use client";
+    CodeEditorModal = ({ isOpen, onClose }) => {
+      const [language, setLanguage] = useState8("javascript");
+      const [code, setCode] = useState8("// Write your code here");
+      const [output, setOutput] = useState8("");
+      const [loading, setLoading] = useState8(false);
+      const runCode = async () => {
+        setLoading(true);
+        try {
+          const res = await fetch("/api/execute", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ language, code })
+          });
+          const data = await res.json();
+          let result = "";
+          if (data.stderr) result += `Error:
+${data.stderr}
+`;
+          if (data.stdout) result += data.stdout;
+          if (!data.stdout && !data.stderr) result = "No output";
+          setOutput(result);
+        } catch (err) {
+          console.log(err.message);
+          setOutput("Error running code");
+        }
+        setLoading(false);
+      };
+      if (!isOpen) return null;
+      return /* @__PURE__ */ React14.createElement("div", { className: "code-modal-overlay" }, /* @__PURE__ */ React14.createElement("div", { className: "code-modal-content" }, /* @__PURE__ */ React14.createElement("div", { className: "code-modal-header" }, /* @__PURE__ */ React14.createElement("h2", null, "Run Code"), /* @__PURE__ */ React14.createElement("button", { onClick: onClose, className: "code-close-btn" }, "\xD7")), /* @__PURE__ */ React14.createElement("div", { className: "code-modal-controls" }, /* @__PURE__ */ React14.createElement("label", { htmlFor: "language" }, "Language:"), /* @__PURE__ */ React14.createElement(
+        "select",
+        {
+          id: "language",
+          value: language,
+          onChange: (e) => setLanguage(e.target.value)
+        },
+        /* @__PURE__ */ React14.createElement("option", { value: "javascript" }, "JavaScript"),
+        /* @__PURE__ */ React14.createElement("option", { value: "python" }, "Python"),
+        /* @__PURE__ */ React14.createElement("option", { value: "cpp" }, "C++"),
+        /* @__PURE__ */ React14.createElement("option", { value: "java" }, "Java"),
+        /* @__PURE__ */ React14.createElement("option", { value: "typescript" }, "TypeScript")
+      ), /* @__PURE__ */ React14.createElement("button", { className: "run-code", onClick: runCode, disabled: loading }, loading ? "Running..." : "Run")), /* @__PURE__ */ React14.createElement(
+        Editor,
+        {
+          height: "50vh",
+          theme: "vs-dark",
+          language,
+          value: code,
+          onChange: (v) => setCode(v ?? "")
+        }
+      ), /* @__PURE__ */ React14.createElement("div", { className: "code-output" }, /* @__PURE__ */ React14.createElement("strong", null, "Output:"), /* @__PURE__ */ React14.createElement("pre", null, output.trim() === "" ? "\u2190 Click Run to see output here" : output))));
+    };
+    CodeEditorModal_default = CodeEditorModal;
+  }
+});
+
+// src/components/tetrons/extensions/MathExtension.ts
+import { Node, mergeAttributes } from "@tiptap/core";
+import katex from "katex";
+var MathInline = Node.create({
+  name: "mathInline",
+  inline: true,
+  group: "inline",
+  atom: true,
+  addAttributes() {
+    return {
+      formula: {
+        default: ""
+      }
+    };
+  },
+  parseHTML() {
+    return [{ tag: "span[data-math-inline]" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "span",
+      mergeAttributes(HTMLAttributes, {
+        "data-math-inline": "",
+        class: "math-inline"
+      }),
+      HTMLAttributes.formula
+    ];
+  },
+  addNodeView() {
+    return ({ node }) => {
+      const span = document.createElement("span");
+      try {
+        span.innerHTML = katex.renderToString(node.attrs.formula, {
+          throwOnError: false,
+          displayMode: false
+        });
+      } catch {
+        span.textContent = node.attrs.formula;
+      }
+      return {
+        dom: span
+      };
+    };
+  },
+  addCommands() {
+    return {
+      insertMathInline: (formula) => ({ commands }) => {
+        return commands.insertContent({
+          type: this.name,
+          attrs: { formula }
+        });
+      }
+    };
+  }
+});
+
 // src/components/tetrons/EditorContent.tsx
-import React14, { useEffect as useEffect8, useRef as useRef7, useState as useState9 } from "react";
-import {
-  useEditor,
-  EditorContent as TiptapEditorContent
-} from "@tiptap/react";
+import React17, { useEffect as useEffect9, useRef as useRef7, useState as useState11 } from "react";
+import { useEditor, EditorContent as TiptapEditorContent } from "@tiptap/react";
 
 // node_modules/@tiptap/extension-document/dist/index.js
-import { Node } from "@tiptap/core";
-var Document = Node.create({
+import { Node as Node2 } from "@tiptap/core";
+var Document = Node2.create({
   name: "doc",
   topNode: true,
   content: "block+"
 });
 
 // node_modules/@tiptap/extension-paragraph/dist/index.js
-import { Node as Node2, mergeAttributes } from "@tiptap/core";
-var Paragraph = Node2.create({
+import { Node as Node3, mergeAttributes as mergeAttributes2 } from "@tiptap/core";
+var Paragraph = Node3.create({
   name: "paragraph",
   priority: 1e3,
   addOptions() {
@@ -31,7 +220,7 @@ var Paragraph = Node2.create({
     ];
   },
   renderHTML({ HTMLAttributes }) {
-    return ["p", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+    return ["p", mergeAttributes2(this.options.HTMLAttributes, HTMLAttributes), 0];
   },
   addCommands() {
     return {
@@ -48,8 +237,8 @@ var Paragraph = Node2.create({
 });
 
 // node_modules/@tiptap/extension-text/dist/index.js
-import { Node as Node3 } from "@tiptap/core";
-var Text = Node3.create({
+import { Node as Node4 } from "@tiptap/core";
+var Text = Node4.create({
   name: "text",
   group: "inline"
 });
@@ -1272,7 +1461,7 @@ var NodeRange = class {
   }
 };
 var emptyAttrs = /* @__PURE__ */ Object.create(null);
-var Node4 = class _Node {
+var Node5 = class _Node {
   /**
   @internal
   */
@@ -1673,7 +1862,7 @@ var Node4 = class _Node {
     return node;
   }
 };
-Node4.prototype.text = void 0;
+Node5.prototype.text = void 0;
 function wrapMarks(marks, str) {
   for (let i = marks.length - 1; i >= 0; i--)
     str = marks[i].type.name + "(" + str + ")";
@@ -5713,7 +5902,7 @@ var History = Extension.create({
 });
 
 // node_modules/@tiptap/extension-bold/dist/index.js
-import { Mark as Mark2, mergeAttributes as mergeAttributes2, markInputRule, markPasteRule } from "@tiptap/core";
+import { Mark as Mark2, mergeAttributes as mergeAttributes3, markInputRule, markPasteRule } from "@tiptap/core";
 var starInputRegex = /(?:^|\s)(\*\*(?!\s+\*\*)((?:[^*]+))\*\*(?!\s+\*\*))$/;
 var starPasteRegex = /(?:^|\s)(\*\*(?!\s+\*\*)((?:[^*]+))\*\*(?!\s+\*\*))/g;
 var underscoreInputRegex = /(?:^|\s)(__(?!\s+__)((?:[^_]+))__(?!\s+__))$/;
@@ -5745,7 +5934,7 @@ var Bold = Mark2.create({
     ];
   },
   renderHTML({ HTMLAttributes }) {
-    return ["strong", mergeAttributes2(this.options.HTMLAttributes, HTMLAttributes), 0];
+    return ["strong", mergeAttributes3(this.options.HTMLAttributes, HTMLAttributes), 0];
   },
   addCommands() {
     return {
@@ -5793,7 +5982,7 @@ var Bold = Mark2.create({
 });
 
 // node_modules/@tiptap/extension-italic/dist/index.js
-import { Mark as Mark3, mergeAttributes as mergeAttributes3, markInputRule as markInputRule2, markPasteRule as markPasteRule2 } from "@tiptap/core";
+import { Mark as Mark3, mergeAttributes as mergeAttributes4, markInputRule as markInputRule2, markPasteRule as markPasteRule2 } from "@tiptap/core";
 var starInputRegex2 = /(?:^|\s)(\*(?!\s+\*)((?:[^*]+))\*(?!\s+\*))$/;
 var starPasteRegex2 = /(?:^|\s)(\*(?!\s+\*)((?:[^*]+))\*(?!\s+\*))/g;
 var underscoreInputRegex2 = /(?:^|\s)(_(?!\s+_)((?:[^_]+))_(?!\s+_))$/;
@@ -5824,7 +6013,7 @@ var Italic = Mark3.create({
     ];
   },
   renderHTML({ HTMLAttributes }) {
-    return ["em", mergeAttributes3(this.options.HTMLAttributes, HTMLAttributes), 0];
+    return ["em", mergeAttributes4(this.options.HTMLAttributes, HTMLAttributes), 0];
   },
   addCommands() {
     return {
@@ -5875,7 +6064,7 @@ var Italic = Mark3.create({
 import Underline from "@tiptap/extension-underline";
 
 // node_modules/@tiptap/extension-strike/dist/index.js
-import { Mark as Mark4, mergeAttributes as mergeAttributes4, markInputRule as markInputRule3, markPasteRule as markPasteRule3 } from "@tiptap/core";
+import { Mark as Mark4, mergeAttributes as mergeAttributes5, markInputRule as markInputRule3, markPasteRule as markPasteRule3 } from "@tiptap/core";
 var inputRegex = /(?:^|\s)(~~(?!\s+~~)((?:[^~]+))~~(?!\s+~~))$/;
 var pasteRegex = /(?:^|\s)(~~(?!\s+~~)((?:[^~]+))~~(?!\s+~~))/g;
 var Strike = Mark4.create({
@@ -5904,7 +6093,7 @@ var Strike = Mark4.create({
     ];
   },
   renderHTML({ HTMLAttributes }) {
-    return ["s", mergeAttributes4(this.options.HTMLAttributes, HTMLAttributes), 0];
+    return ["s", mergeAttributes5(this.options.HTMLAttributes, HTMLAttributes), 0];
   },
   addCommands() {
     return {
@@ -5943,7 +6132,7 @@ var Strike = Mark4.create({
 });
 
 // node_modules/@tiptap/extension-code/dist/index.js
-import { Mark as Mark5, mergeAttributes as mergeAttributes5, markInputRule as markInputRule4, markPasteRule as markPasteRule4 } from "@tiptap/core";
+import { Mark as Mark5, mergeAttributes as mergeAttributes6, markInputRule as markInputRule4, markPasteRule as markPasteRule4 } from "@tiptap/core";
 var inputRegex2 = /(^|[^`])`([^`]+)`(?!`)/;
 var pasteRegex2 = /(^|[^`])`([^`]+)`(?!`)/g;
 var Code = Mark5.create({
@@ -5962,7 +6151,7 @@ var Code = Mark5.create({
     ];
   },
   renderHTML({ HTMLAttributes }) {
-    return ["code", mergeAttributes5(this.options.HTMLAttributes, HTMLAttributes), 0];
+    return ["code", mergeAttributes6(this.options.HTMLAttributes, HTMLAttributes), 0];
   },
   addCommands() {
     return {
@@ -6001,9 +6190,9 @@ var Code = Mark5.create({
 });
 
 // node_modules/@tiptap/extension-blockquote/dist/index.js
-import { Node as Node5, mergeAttributes as mergeAttributes6, wrappingInputRule } from "@tiptap/core";
+import { Node as Node6, mergeAttributes as mergeAttributes7, wrappingInputRule } from "@tiptap/core";
 var inputRegex3 = /^\s*>\s$/;
-var Blockquote = Node5.create({
+var Blockquote = Node6.create({
   name: "blockquote",
   addOptions() {
     return {
@@ -6019,7 +6208,7 @@ var Blockquote = Node5.create({
     ];
   },
   renderHTML({ HTMLAttributes }) {
-    return ["blockquote", mergeAttributes6(this.options.HTMLAttributes, HTMLAttributes), 0];
+    return ["blockquote", mergeAttributes7(this.options.HTMLAttributes, HTMLAttributes), 0];
   },
   addCommands() {
     return {
@@ -6050,8 +6239,8 @@ var Blockquote = Node5.create({
 });
 
 // node_modules/@tiptap/extension-hard-break/dist/index.js
-import { Node as Node6, mergeAttributes as mergeAttributes7 } from "@tiptap/core";
-var HardBreak = Node6.create({
+import { Node as Node7, mergeAttributes as mergeAttributes8 } from "@tiptap/core";
+var HardBreak = Node7.create({
   name: "hardBreak",
   addOptions() {
     return {
@@ -6069,7 +6258,7 @@ var HardBreak = Node6.create({
     ];
   },
   renderHTML({ HTMLAttributes }) {
-    return ["br", mergeAttributes7(this.options.HTMLAttributes, HTMLAttributes)];
+    return ["br", mergeAttributes8(this.options.HTMLAttributes, HTMLAttributes)];
   },
   renderText() {
     return "\n";
@@ -6108,8 +6297,8 @@ var HardBreak = Node6.create({
 });
 
 // node_modules/@tiptap/extension-heading/dist/index.js
-import { Node as Node7, mergeAttributes as mergeAttributes8, textblockTypeInputRule } from "@tiptap/core";
-var Heading = Node7.create({
+import { Node as Node8, mergeAttributes as mergeAttributes9, textblockTypeInputRule } from "@tiptap/core";
+var Heading = Node8.create({
   name: "heading",
   addOptions() {
     return {
@@ -6137,7 +6326,7 @@ var Heading = Node7.create({
   renderHTML({ node, HTMLAttributes }) {
     const hasLevel = this.options.levels.includes(node.attrs.level);
     const level = hasLevel ? node.attrs.level : this.options.levels[0];
-    return [`h${level}`, mergeAttributes8(this.options.HTMLAttributes, HTMLAttributes), 0];
+    return [`h${level}`, mergeAttributes9(this.options.HTMLAttributes, HTMLAttributes), 0];
   },
   addCommands() {
     return {
@@ -6177,8 +6366,8 @@ var Heading = Node7.create({
 });
 
 // node_modules/@tiptap/extension-horizontal-rule/dist/index.js
-import { Node as Node8, mergeAttributes as mergeAttributes9, canInsertNode, isNodeSelection, nodeInputRule } from "@tiptap/core";
-var HorizontalRule = Node8.create({
+import { Node as Node9, mergeAttributes as mergeAttributes10, canInsertNode, isNodeSelection, nodeInputRule } from "@tiptap/core";
+var HorizontalRule = Node9.create({
   name: "horizontalRule",
   addOptions() {
     return {
@@ -6190,7 +6379,7 @@ var HorizontalRule = Node8.create({
     return [{ tag: "hr" }];
   },
   renderHTML({ HTMLAttributes }) {
-    return ["hr", mergeAttributes9(this.options.HTMLAttributes, HTMLAttributes)];
+    return ["hr", mergeAttributes10(this.options.HTMLAttributes, HTMLAttributes)];
   },
   addCommands() {
     return {
@@ -6261,8 +6450,8 @@ import Link from "@tiptap/extension-link";
 import TextStyle from "@tiptap/extension-text-style";
 
 // node_modules/@tiptap/extension-list-item/dist/index.js
-import { Node as Node9, mergeAttributes as mergeAttributes10 } from "@tiptap/core";
-var ListItem = Node9.create({
+import { Node as Node10, mergeAttributes as mergeAttributes11 } from "@tiptap/core";
+var ListItem = Node10.create({
   name: "listItem",
   addOptions() {
     return {
@@ -6281,7 +6470,7 @@ var ListItem = Node9.create({
     ];
   },
   renderHTML({ HTMLAttributes }) {
-    return ["li", mergeAttributes10(this.options.HTMLAttributes, HTMLAttributes), 0];
+    return ["li", mergeAttributes11(this.options.HTMLAttributes, HTMLAttributes), 0];
   },
   addKeyboardShortcuts() {
     return {
@@ -6293,11 +6482,11 @@ var ListItem = Node9.create({
 });
 
 // node_modules/@tiptap/extension-bullet-list/dist/index.js
-import { Node as Node10, mergeAttributes as mergeAttributes11, wrappingInputRule as wrappingInputRule2 } from "@tiptap/core";
+import { Node as Node11, mergeAttributes as mergeAttributes12, wrappingInputRule as wrappingInputRule2 } from "@tiptap/core";
 var ListItemName = "listItem";
 var TextStyleName = "textStyle";
 var inputRegex4 = /^\s*([-+*])\s$/;
-var BulletList = Node10.create({
+var BulletList = Node11.create({
   name: "bulletList",
   addOptions() {
     return {
@@ -6317,7 +6506,7 @@ var BulletList = Node10.create({
     ];
   },
   renderHTML({ HTMLAttributes }) {
-    return ["ul", mergeAttributes11(this.options.HTMLAttributes, HTMLAttributes), 0];
+    return ["ul", mergeAttributes12(this.options.HTMLAttributes, HTMLAttributes), 0];
   },
   addCommands() {
     return {
@@ -6358,11 +6547,11 @@ var BulletList = Node10.create({
 });
 
 // node_modules/@tiptap/extension-ordered-list/dist/index.js
-import { Node as Node11, mergeAttributes as mergeAttributes12, wrappingInputRule as wrappingInputRule3 } from "@tiptap/core";
+import { Node as Node12, mergeAttributes as mergeAttributes13, wrappingInputRule as wrappingInputRule3 } from "@tiptap/core";
 var ListItemName2 = "listItem";
 var TextStyleName2 = "textStyle";
 var inputRegex5 = /^(\d+)\.\s$/;
-var OrderedList = Node11.create({
+var OrderedList = Node12.create({
   name: "orderedList",
   addOptions() {
     return {
@@ -6399,7 +6588,7 @@ var OrderedList = Node11.create({
   },
   renderHTML({ HTMLAttributes }) {
     const { start, ...attributesWithoutStart } = HTMLAttributes;
-    return start === 1 ? ["ol", mergeAttributes12(this.options.HTMLAttributes, attributesWithoutStart), 0] : ["ol", mergeAttributes12(this.options.HTMLAttributes, HTMLAttributes), 0];
+    return start === 1 ? ["ol", mergeAttributes13(this.options.HTMLAttributes, attributesWithoutStart), 0] : ["ol", mergeAttributes13(this.options.HTMLAttributes, HTMLAttributes), 0];
   },
   addCommands() {
     return {
@@ -8025,7 +8214,7 @@ var Spellcheck = Mark6.create({
 });
 
 // src/components/tetrons/toolbar/extensions/Comment.ts
-import { Mark as Mark7, mergeAttributes as mergeAttributes13 } from "@tiptap/core";
+import { Mark as Mark7, mergeAttributes as mergeAttributes14 } from "@tiptap/core";
 var Comment = Mark7.create({
   name: "comment",
   addOptions() {
@@ -8050,7 +8239,7 @@ var Comment = Mark7.create({
   renderHTML({ HTMLAttributes }) {
     return [
       "span",
-      mergeAttributes13(HTMLAttributes, {
+      mergeAttributes14(HTMLAttributes, {
         "data-comment": HTMLAttributes.comment,
         class: "comment-highlight",
         title: HTMLAttributes.comment,
@@ -15210,8 +15399,8 @@ var ResizableTable = Table.extend({
 });
 
 // src/components/tetrons/toolbar/extensions/Embed.ts
-import { Node as Node12, mergeAttributes as mergeAttributes14 } from "@tiptap/core";
-var Embed = Node12.create({
+import { Node as Node13, mergeAttributes as mergeAttributes15 } from "@tiptap/core";
+var Embed = Node13.create({
   name: "embed",
   group: "block",
   atom: true,
@@ -15226,7 +15415,7 @@ var Embed = Node12.create({
     return [{ tag: "iframe[src]" }];
   },
   renderHTML({ HTMLAttributes }) {
-    return ["iframe", mergeAttributes14(HTMLAttributes)];
+    return ["iframe", mergeAttributes15(HTMLAttributes)];
   },
   addCommands() {
     return {
@@ -15304,7 +15493,7 @@ var Embed = Node12.create({
 });
 
 // src/components/tetrons/toolbar/extensions/FontFamily.ts
-import { Mark as Mark10, mergeAttributes as mergeAttributes15 } from "@tiptap/core";
+import { Mark as Mark10, mergeAttributes as mergeAttributes16 } from "@tiptap/core";
 var FontFamily = Mark10.create({
   name: "fontFamily",
   addAttributes() {
@@ -15323,7 +15512,7 @@ var FontFamily = Mark10.create({
     return [{ style: "font-family" }];
   },
   renderHTML({ HTMLAttributes }) {
-    return ["span", mergeAttributes15(HTMLAttributes), 0];
+    return ["span", mergeAttributes16(HTMLAttributes), 0];
   },
   addCommands() {
     return {
@@ -15333,7 +15522,7 @@ var FontFamily = Mark10.create({
 });
 
 // src/components/tetrons/toolbar/extensions/FontSize.ts
-import { Mark as Mark11, mergeAttributes as mergeAttributes16 } from "@tiptap/core";
+import { Mark as Mark11, mergeAttributes as mergeAttributes17 } from "@tiptap/core";
 var FontSize = Mark11.create({
   name: "fontSize",
   addAttributes() {
@@ -15352,7 +15541,7 @@ var FontSize = Mark11.create({
     return [{ style: "font-size" }];
   },
   renderHTML({ HTMLAttributes }) {
-    return ["span", mergeAttributes16(HTMLAttributes), 0];
+    return ["span", mergeAttributes17(HTMLAttributes), 0];
   },
   addCommands() {
     return {
@@ -15366,7 +15555,7 @@ import Image from "@tiptap/extension-image";
 import { ReactNodeViewRenderer } from "@tiptap/react";
 
 // src/components/tetrons/ResizableImageComponent.tsx
-import React, { useRef, useEffect as useEffect2, useState as useState2 } from "react";
+import React2, { useRef, useEffect as useEffect2, useState as useState2 } from "react";
 import { NodeViewWrapper } from "@tiptap/react";
 var ResizableImageComponent = ({
   node,
@@ -15404,7 +15593,7 @@ var ResizableImageComponent = ({
       window.removeEventListener("mouseup", handleMouseUp);
     };
   }, [isResizing, updateAttributes, aspectRatio]);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React2.createElement(
     NodeViewWrapper,
     {
       ref: wrapperRef,
@@ -15423,7 +15612,7 @@ var ResizableImageComponent = ({
         padding: 2
       }
     },
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React2.createElement(
       "img",
       {
         src,
@@ -15441,7 +15630,7 @@ var ResizableImageComponent = ({
         draggable: false
       }
     ),
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React2.createElement(
       "div",
       {
         onMouseDown: (e) => {
@@ -15494,11 +15683,11 @@ var ResizableImage = Image.extend({
 });
 
 // src/components/tetrons/ResizableVideo.ts
-import { Node as Node13 } from "@tiptap/core";
+import { Node as Node14 } from "@tiptap/core";
 import { ReactNodeViewRenderer as ReactNodeViewRenderer2 } from "@tiptap/react";
 
 // src/components/tetrons/ResizableVideoComponent.tsx
-import React2, { useRef as useRef2, useEffect as useEffect3 } from "react";
+import React3, { useRef as useRef2, useEffect as useEffect3 } from "react";
 import { NodeViewWrapper as NodeViewWrapper2 } from "@tiptap/react";
 var ResizableVideoComponent = ({
   node,
@@ -15519,7 +15708,7 @@ var ResizableVideoComponent = ({
     observer.observe(video);
     return () => observer.disconnect();
   }, [updateAttributes]);
-  return /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React3.createElement(
     NodeViewWrapper2,
     {
       ref: wrapperRef,
@@ -15533,7 +15722,7 @@ var ResizableVideoComponent = ({
         display: "inline-block"
       }
     },
-    /* @__PURE__ */ React2.createElement(
+    /* @__PURE__ */ React3.createElement(
       "video",
       {
         ref: videoRef,
@@ -15550,7 +15739,7 @@ var ResizableVideoComponent = ({
 var ResizableVideoComponent_default = ResizableVideoComponent;
 
 // src/components/tetrons/ResizableVideo.ts
-var ResizableVideo = Node13.create({
+var ResizableVideo = Node14.create({
   name: "video",
   group: "block",
   draggable: true,
@@ -15597,7 +15786,7 @@ var ResizableVideo = Node13.create({
 });
 
 // src/components/tetrons/toolbar/TableContextMenu.tsx
-import React3, { useEffect as useEffect4, useState as useState3 } from "react";
+import React4, { useEffect as useEffect4, useState as useState3 } from "react";
 function TableContextMenu({ editor }) {
   const [menuPosition, setMenuPosition] = useState3(null);
   useEffect4(() => {
@@ -15625,13 +15814,13 @@ function TableContextMenu({ editor }) {
   const deleteRow = () => editor.chain().focus().deleteRow().run();
   const deleteCol = () => editor.chain().focus().deleteColumn().run();
   if (!menuPosition) return null;
-  return /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React4.createElement(
     "ul",
     {
       className: "absolute bg-white shadow border rounded text-sm z-50",
       style: { top: menuPosition.y, left: menuPosition.x }
     },
-    /* @__PURE__ */ React3.createElement(
+    /* @__PURE__ */ React4.createElement(
       "li",
       {
         className: "px-3 py-1 hover:bg-gray-100 cursor-pointer",
@@ -15639,7 +15828,7 @@ function TableContextMenu({ editor }) {
       },
       "Insert Row Above"
     ),
-    /* @__PURE__ */ React3.createElement(
+    /* @__PURE__ */ React4.createElement(
       "li",
       {
         className: "px-3 py-1 hover:bg-gray-100 cursor-pointer",
@@ -15647,7 +15836,7 @@ function TableContextMenu({ editor }) {
       },
       "Insert Row Below"
     ),
-    /* @__PURE__ */ React3.createElement(
+    /* @__PURE__ */ React4.createElement(
       "li",
       {
         className: "px-3 py-1 hover:bg-gray-100 cursor-pointer",
@@ -15655,7 +15844,7 @@ function TableContextMenu({ editor }) {
       },
       "Insert Column Left"
     ),
-    /* @__PURE__ */ React3.createElement(
+    /* @__PURE__ */ React4.createElement(
       "li",
       {
         className: "px-3 py-1 hover:bg-gray-100 cursor-pointer",
@@ -15663,7 +15852,7 @@ function TableContextMenu({ editor }) {
       },
       "Insert Column Right"
     ),
-    /* @__PURE__ */ React3.createElement(
+    /* @__PURE__ */ React4.createElement(
       "li",
       {
         className: "px-3 py-1 hover:bg-red-100 cursor-pointer",
@@ -15671,7 +15860,7 @@ function TableContextMenu({ editor }) {
       },
       "Delete Row"
     ),
-    /* @__PURE__ */ React3.createElement(
+    /* @__PURE__ */ React4.createElement(
       "li",
       {
         className: "px-3 py-1 hover:bg-red-100 cursor-pointer",
@@ -15683,10 +15872,10 @@ function TableContextMenu({ editor }) {
 }
 
 // src/components/tetrons/toolbar/TetronsToolbar.tsx
-import React13, { useEffect as useEffect7, useState as useState8 } from "react";
+import React16, { useEffect as useEffect8, useState as useState10 } from "react";
 
 // src/components/tetrons/toolbar/ActionGroup.tsx
-import React5, { useEffect as useEffect5, useRef as useRef3, useState as useState4 } from "react";
+import React6, { useEffect as useEffect5, useRef as useRef3, useState as useState4 } from "react";
 import {
   MdZoomIn,
   MdZoomOut,
@@ -15696,10 +15885,10 @@ import {
 } from "react-icons/md";
 
 // src/components/tetrons/toolbar/ToolbarButton.tsx
-import React4 from "react";
-var ToolbarButton = React4.forwardRef(
+import React5 from "react";
+var ToolbarButton = React5.forwardRef(
   ({ icon: Icon, onClick, disabled = false, title, label, isActive = false }, ref) => {
-    return /* @__PURE__ */ React4.createElement(
+    return /* @__PURE__ */ React5.createElement(
       "button",
       {
         type: "button",
@@ -15710,7 +15899,7 @@ var ToolbarButton = React4.forwardRef(
         "aria-label": title ?? label,
         className: `toolbar-button ${isActive ? "active" : ""}`
       },
-      /* @__PURE__ */ React4.createElement(Icon, { size: 20 })
+      /* @__PURE__ */ React5.createElement(Icon, { size: 20 })
     );
   }
 );
@@ -15844,7 +16033,7 @@ function ActionGroup({ editor }) {
     link.click();
     document.body.removeChild(link);
   };
-  return /* @__PURE__ */ React5.createElement("div", { className: "action-group", role: "group", "aria-label": "Editor actions" }, /* @__PURE__ */ React5.createElement(ToolbarButton_default, { icon: MdZoomIn, onClick: zoomIn, title: "Zoom In" }), /* @__PURE__ */ React5.createElement(ToolbarButton_default, { icon: MdZoomOut, onClick: zoomOut, title: "Zoom Out" }), /* @__PURE__ */ React5.createElement(ToolbarButton_default, { icon: MdPrint, onClick: handlePrint, title: "Print" }), /* @__PURE__ */ React5.createElement(ToolbarButton_default, { icon: MdSave, onClick: handleSave, title: "Save" }), /* @__PURE__ */ React5.createElement("div", { className: "relative", ref: dropdownRef }, /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React6.createElement("div", { className: "action-group", role: "group", "aria-label": "Editor actions" }, /* @__PURE__ */ React6.createElement(ToolbarButton_default, { icon: MdZoomIn, onClick: zoomIn, title: "Zoom In" }), /* @__PURE__ */ React6.createElement(ToolbarButton_default, { icon: MdZoomOut, onClick: zoomOut, title: "Zoom Out" }), /* @__PURE__ */ React6.createElement(ToolbarButton_default, { icon: MdPrint, onClick: handlePrint, title: "Print" }), /* @__PURE__ */ React6.createElement(ToolbarButton_default, { icon: MdSave, onClick: handleSave, title: "Save" }), /* @__PURE__ */ React6.createElement("div", { className: "relative", ref: dropdownRef }, /* @__PURE__ */ React6.createElement(
     "button",
     {
       type: "button",
@@ -15854,9 +16043,9 @@ function ActionGroup({ editor }) {
       className: "export-button",
       title: "Export"
     },
-    /* @__PURE__ */ React5.createElement(MdDownload, null),
-    /* @__PURE__ */ React5.createElement("span", { className: "text-sm" })
-  ), dropdownOpen && /* @__PURE__ */ React5.createElement("div", { className: "export-dropdown" }, /* @__PURE__ */ React5.createElement(
+    /* @__PURE__ */ React6.createElement(MdDownload, null),
+    /* @__PURE__ */ React6.createElement("span", { className: "text-sm" })
+  ), dropdownOpen && /* @__PURE__ */ React6.createElement("div", { className: "export-dropdown" }, /* @__PURE__ */ React6.createElement(
     "button",
     {
       type: "button",
@@ -15866,7 +16055,7 @@ function ActionGroup({ editor }) {
       }
     },
     "Export as PDF"
-  ), /* @__PURE__ */ React5.createElement(
+  ), /* @__PURE__ */ React6.createElement(
     "button",
     {
       type: "button",
@@ -15876,7 +16065,7 @@ function ActionGroup({ editor }) {
       }
     },
     "Export as HTML"
-  ), /* @__PURE__ */ React5.createElement(
+  ), /* @__PURE__ */ React6.createElement(
     "button",
     {
       type: "button",
@@ -15896,9 +16085,9 @@ import {
   MdContentCopy,
   MdFormatPaint
 } from "react-icons/md";
-import React6 from "react";
+import React7 from "react";
 function ClipboardGroup({ editor }) {
-  return /* @__PURE__ */ React6.createElement("div", { className: "clipboard-group" }, /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement("div", { className: "clipboard-group" }, /* @__PURE__ */ React7.createElement(
     ToolbarButton_default,
     {
       icon: MdContentPaste,
@@ -15912,7 +16101,7 @@ function ClipboardGroup({ editor }) {
         }
       }
     }
-  ), /* @__PURE__ */ React6.createElement(
+  ), /* @__PURE__ */ React7.createElement(
     ToolbarButton_default,
     {
       icon: MdContentCut,
@@ -15926,7 +16115,7 @@ function ClipboardGroup({ editor }) {
         });
       }
     }
-  ), /* @__PURE__ */ React6.createElement(
+  ), /* @__PURE__ */ React7.createElement(
     ToolbarButton_default,
     {
       icon: MdContentCopy,
@@ -15938,7 +16127,7 @@ function ClipboardGroup({ editor }) {
         navigator.clipboard.writeText(selectedText);
       }
     }
-  ), /* @__PURE__ */ React6.createElement(
+  ), /* @__PURE__ */ React7.createElement(
     ToolbarButton_default,
     {
       icon: MdFormatPaint,
@@ -15964,7 +16153,7 @@ import {
 } from "react-icons/md";
 import { ImTextColor } from "react-icons/im";
 import { BiSolidColorFill } from "react-icons/bi";
-import React7, { useEffect as useEffect6, useState as useState5 } from "react";
+import React8, { useEffect as useEffect6, useState as useState5 } from "react";
 function FontStyleGroup({ editor }) {
   const [textColor, setTextColor] = useState5("#000000");
   const [highlightColor, setHighlightColor] = useState5("#ffff00");
@@ -15990,7 +16179,7 @@ function FontStyleGroup({ editor }) {
       editor.off("transaction", updateStates);
     };
   }, [editor]);
-  return /* @__PURE__ */ React7.createElement("div", { className: "font-style-group" }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement("div", { className: "font-style-group" }, /* @__PURE__ */ React8.createElement(
     "select",
     {
       title: "Font Family",
@@ -16001,12 +16190,12 @@ function FontStyleGroup({ editor }) {
         editor.chain().focus().setFontFamily(value).run();
       }
     },
-    /* @__PURE__ */ React7.createElement("option", { value: "Arial" }, "Arial"),
-    /* @__PURE__ */ React7.createElement("option", { value: "Georgia" }, "Georgia"),
-    /* @__PURE__ */ React7.createElement("option", { value: "Times New Roman" }, "Times New Roman"),
-    /* @__PURE__ */ React7.createElement("option", { value: "Courier New" }, "Courier New"),
-    /* @__PURE__ */ React7.createElement("option", { value: "Verdana" }, "Verdana")
-  ), /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React8.createElement("option", { value: "Arial" }, "Arial"),
+    /* @__PURE__ */ React8.createElement("option", { value: "Georgia" }, "Georgia"),
+    /* @__PURE__ */ React8.createElement("option", { value: "Times New Roman" }, "Times New Roman"),
+    /* @__PURE__ */ React8.createElement("option", { value: "Courier New" }, "Courier New"),
+    /* @__PURE__ */ React8.createElement("option", { value: "Verdana" }, "Verdana")
+  ), /* @__PURE__ */ React8.createElement(
     "select",
     {
       title: "Font Size",
@@ -16017,16 +16206,16 @@ function FontStyleGroup({ editor }) {
         editor.chain().focus().setFontSize(value).run();
       }
     },
-    /* @__PURE__ */ React7.createElement("option", { value: "12px" }, "12"),
-    /* @__PURE__ */ React7.createElement("option", { value: "14px" }, "14"),
-    /* @__PURE__ */ React7.createElement("option", { value: "16px" }, "16"),
-    /* @__PURE__ */ React7.createElement("option", { value: "18px" }, "18"),
-    /* @__PURE__ */ React7.createElement("option", { value: "24px" }, "24"),
-    /* @__PURE__ */ React7.createElement("option", { value: "36px" }, "36"),
-    /* @__PURE__ */ React7.createElement("option", { value: "48px" }, "48"),
-    /* @__PURE__ */ React7.createElement("option", { value: "64px" }, "64"),
-    /* @__PURE__ */ React7.createElement("option", { value: "72px" }, "72")
-  ), /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React8.createElement("option", { value: "12px" }, "12"),
+    /* @__PURE__ */ React8.createElement("option", { value: "14px" }, "14"),
+    /* @__PURE__ */ React8.createElement("option", { value: "16px" }, "16"),
+    /* @__PURE__ */ React8.createElement("option", { value: "18px" }, "18"),
+    /* @__PURE__ */ React8.createElement("option", { value: "24px" }, "24"),
+    /* @__PURE__ */ React8.createElement("option", { value: "36px" }, "36"),
+    /* @__PURE__ */ React8.createElement("option", { value: "48px" }, "48"),
+    /* @__PURE__ */ React8.createElement("option", { value: "64px" }, "64"),
+    /* @__PURE__ */ React8.createElement("option", { value: "72px" }, "72")
+  ), /* @__PURE__ */ React8.createElement(
     ToolbarButton_default,
     {
       icon: MdFormatBold,
@@ -16034,7 +16223,7 @@ function FontStyleGroup({ editor }) {
       onClick: () => editor.chain().focus().toggleBold().run(),
       isActive: editor.isActive("bold")
     }
-  ), /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ React8.createElement(
     ToolbarButton_default,
     {
       icon: MdFormatItalic,
@@ -16042,7 +16231,7 @@ function FontStyleGroup({ editor }) {
       onClick: () => editor.chain().focus().toggleItalic().run(),
       isActive: editor.isActive("italic")
     }
-  ), /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ React8.createElement(
     ToolbarButton_default,
     {
       icon: MdFormatUnderlined,
@@ -16050,7 +16239,7 @@ function FontStyleGroup({ editor }) {
       onClick: () => editor.chain().focus().toggleUnderline().run(),
       isActive: editor.isActive("underline")
     }
-  ), /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ React8.createElement(
     ToolbarButton_default,
     {
       icon: MdStrikethroughS,
@@ -16058,7 +16247,7 @@ function FontStyleGroup({ editor }) {
       onClick: () => editor.chain().focus().toggleStrike().run(),
       isActive: editor.isActive("strike")
     }
-  ), /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ React8.createElement(
     ToolbarButton_default,
     {
       icon: MdSubscript,
@@ -16066,7 +16255,7 @@ function FontStyleGroup({ editor }) {
       onClick: () => editor.chain().focus().toggleSubscript().run(),
       isActive: editor.isActive("subscript")
     }
-  ), /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ React8.createElement(
     ToolbarButton_default,
     {
       icon: MdSuperscript,
@@ -16074,7 +16263,7 @@ function FontStyleGroup({ editor }) {
       onClick: () => editor.chain().focus().toggleSuperscript().run(),
       isActive: editor.isActive("superscript")
     }
-  ), /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ React8.createElement(
     "label",
     {
       title: "Font Color",
@@ -16082,9 +16271,9 @@ function FontStyleGroup({ editor }) {
       className: "color-label",
       style: { "--indicator-color": textColor }
     },
-    /* @__PURE__ */ React7.createElement(ImTextColor, { size: 20 }),
-    /* @__PURE__ */ React7.createElement("div", { className: "color-indicator" }),
-    /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React8.createElement(ImTextColor, { size: 20 }),
+    /* @__PURE__ */ React8.createElement("div", { className: "color-indicator" }),
+    /* @__PURE__ */ React8.createElement(
       "input",
       {
         type: "color",
@@ -16096,7 +16285,7 @@ function FontStyleGroup({ editor }) {
         }
       }
     )
-  ), /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ React8.createElement(
     "label",
     {
       title: "Highlight Color",
@@ -16104,9 +16293,9 @@ function FontStyleGroup({ editor }) {
       className: "color-label",
       style: { "--indicator-color": highlightColor }
     },
-    /* @__PURE__ */ React7.createElement(BiSolidColorFill, { size: 20 }),
-    /* @__PURE__ */ React7.createElement("div", { className: "color-indicator" }),
-    /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React8.createElement(BiSolidColorFill, { size: 20 }),
+    /* @__PURE__ */ React8.createElement("div", { className: "color-indicator" }),
+    /* @__PURE__ */ React8.createElement(
       "input",
       {
         type: "color",
@@ -16118,14 +16307,14 @@ function FontStyleGroup({ editor }) {
         }
       }
     )
-  ), /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ React8.createElement(
     ToolbarButton_default,
     {
       icon: MdFormatClear,
       label: "Clear Formatting",
       onClick: () => editor.chain().focus().unsetAllMarks().run()
     }
-  ), /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ React8.createElement(
     ToolbarButton_default,
     {
       icon: MdFormatPaint2,
@@ -16144,7 +16333,7 @@ function FontStyleGroup({ editor }) {
 }
 
 // src/components/tetrons/toolbar/InsertGroup.tsx
-import React8, { useRef as useRef4, useState as useState6 } from "react";
+import React9, { useRef as useRef4, useState as useState6 } from "react";
 import {
   MdTableChart,
   MdInsertPhoto,
@@ -16231,7 +16420,7 @@ function InsertGroup({ editor }) {
       return url;
     }
   }
-  return /* @__PURE__ */ React8.createElement("div", { className: "insert-group" }, /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React9.createElement("div", { className: "insert-group" }, /* @__PURE__ */ React9.createElement(
     "input",
     {
       type: "file",
@@ -16242,7 +16431,7 @@ function InsertGroup({ editor }) {
       "aria-label": "Upload Image",
       title: "Upload Image"
     }
-  ), /* @__PURE__ */ React8.createElement(
+  ), /* @__PURE__ */ React9.createElement(
     "input",
     {
       type: "file",
@@ -16253,23 +16442,23 @@ function InsertGroup({ editor }) {
       "aria-label": "Upload Video",
       title: "Upload Video"
     }
-  ), /* @__PURE__ */ React8.createElement(
+  ), /* @__PURE__ */ React9.createElement(
     ToolbarButton_default,
     {
       icon: MdTableChart,
       label: "Insert Table",
       onClick: () => setShowTableGrid(!showTableGrid)
     }
-  ), showTableGrid && /* @__PURE__ */ React8.createElement(
+  ), showTableGrid && /* @__PURE__ */ React9.createElement(
     "div",
     {
       className: "table-grid-popup",
       onMouseLeave: () => setShowTableGrid(false)
     },
-    /* @__PURE__ */ React8.createElement("div", { className: "table-grid" }, [...Array(10)].map(
+    /* @__PURE__ */ React9.createElement("div", { className: "table-grid" }, [...Array(10)].map(
       (_, row) => [...Array(10)].map((_2, col) => {
         const isSelected = row < selectedRows && col < selectedCols;
-        return /* @__PURE__ */ React8.createElement(
+        return /* @__PURE__ */ React9.createElement(
           "div",
           {
             key: `${row}-${col}`,
@@ -16280,22 +16469,22 @@ function InsertGroup({ editor }) {
         );
       })
     )),
-    /* @__PURE__ */ React8.createElement("div", { className: "table-grid-label" }, selectedRows, " x ", selectedCols)
-  ), /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React9.createElement("div", { className: "table-grid-label" }, selectedRows, " x ", selectedCols)
+  ), /* @__PURE__ */ React9.createElement(
     ToolbarButton_default,
     {
       icon: MdInsertPhoto,
       label: "Insert Image",
       onClick: () => imageInputRef.current?.click()
     }
-  ), /* @__PURE__ */ React8.createElement(
+  ), /* @__PURE__ */ React9.createElement(
     ToolbarButton_default,
     {
       icon: MdVideoLibrary,
       label: "Insert Video",
       onClick: () => videoInputRef.current?.click()
     }
-  ), /* @__PURE__ */ React8.createElement(
+  ), /* @__PURE__ */ React9.createElement(
     ToolbarButton_default,
     {
       icon: MdInsertLink,
@@ -16307,7 +16496,7 @@ function InsertGroup({ editor }) {
         }
       }
     }
-  ), /* @__PURE__ */ React8.createElement(
+  ), /* @__PURE__ */ React9.createElement(
     ToolbarButton_default,
     {
       icon: MdInsertComment,
@@ -16321,14 +16510,14 @@ function InsertGroup({ editor }) {
         }
       }
     }
-  ), /* @__PURE__ */ React8.createElement("div", { className: "relative" }, /* @__PURE__ */ React8.createElement(
+  ), /* @__PURE__ */ React9.createElement("div", { className: "relative" }, /* @__PURE__ */ React9.createElement(
     ToolbarButton_default,
     {
       icon: MdInsertEmoticon,
       label: "Emoji",
       onClick: () => setShowPicker(!showPicker)
     }
-  ), showPicker && /* @__PURE__ */ React8.createElement("div", { className: "emoji-picker" }, /* @__PURE__ */ React8.createElement(
+  ), showPicker && /* @__PURE__ */ React9.createElement("div", { className: "emoji-picker" }, /* @__PURE__ */ React9.createElement(
     Picker,
     {
       onEmojiSelect: addEmoji,
@@ -16338,14 +16527,14 @@ function InsertGroup({ editor }) {
       showSkinTones: true,
       emojiTooltip: true
     }
-  ))), /* @__PURE__ */ React8.createElement(
+  ))), /* @__PURE__ */ React9.createElement(
     ToolbarButton_default,
     {
       icon: MdHorizontalRule,
       label: "Horizontal Line",
       onClick: () => editor.chain().focus().setHorizontalRule().run()
     }
-  ), /* @__PURE__ */ React8.createElement(
+  ), /* @__PURE__ */ React9.createElement(
     ToolbarButton_default,
     {
       icon: MdOutlineOndemandVideo,
@@ -16369,7 +16558,7 @@ function InsertGroup({ editor }) {
 }
 
 // src/components/tetrons/toolbar/ListAlignGroup.tsx
-import React9 from "react";
+import React10 from "react";
 import {
   MdFormatListBulleted,
   MdFormatListNumbered,
@@ -16381,7 +16570,7 @@ import {
   MdFormatAlignJustify
 } from "react-icons/md";
 function ListAlignGroup({ editor }) {
-  return /* @__PURE__ */ React9.createElement("div", { className: "list-align-group" }, /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React10.createElement("div", { className: "list-align-group" }, /* @__PURE__ */ React10.createElement(
     ToolbarButton_default,
     {
       icon: MdFormatListBulleted,
@@ -16389,7 +16578,7 @@ function ListAlignGroup({ editor }) {
       onClick: () => editor.chain().focus().toggleBulletList().run(),
       disabled: !editor.can().toggleBulletList()
     }
-  ), /* @__PURE__ */ React9.createElement(
+  ), /* @__PURE__ */ React10.createElement(
     ToolbarButton_default,
     {
       icon: MdFormatListNumbered,
@@ -16397,7 +16586,7 @@ function ListAlignGroup({ editor }) {
       onClick: () => editor.chain().focus().toggleOrderedList().run(),
       disabled: !editor.can().toggleOrderedList()
     }
-  ), /* @__PURE__ */ React9.createElement(
+  ), /* @__PURE__ */ React10.createElement(
     ToolbarButton_default,
     {
       icon: MdFormatIndentIncrease,
@@ -16405,7 +16594,7 @@ function ListAlignGroup({ editor }) {
       onClick: () => editor.chain().focus().sinkListItem("listItem").run(),
       disabled: !editor.can().sinkListItem("listItem")
     }
-  ), /* @__PURE__ */ React9.createElement(
+  ), /* @__PURE__ */ React10.createElement(
     ToolbarButton_default,
     {
       icon: MdFormatIndentDecrease,
@@ -16413,7 +16602,7 @@ function ListAlignGroup({ editor }) {
       onClick: () => editor.chain().focus().liftListItem("listItem").run(),
       disabled: !editor.can().liftListItem("listItem")
     }
-  ), /* @__PURE__ */ React9.createElement(
+  ), /* @__PURE__ */ React10.createElement(
     ToolbarButton_default,
     {
       icon: MdFormatAlignLeft,
@@ -16421,7 +16610,7 @@ function ListAlignGroup({ editor }) {
       onClick: () => editor.chain().focus().setTextAlign("left").run(),
       disabled: !editor.can().setTextAlign("left")
     }
-  ), /* @__PURE__ */ React9.createElement(
+  ), /* @__PURE__ */ React10.createElement(
     ToolbarButton_default,
     {
       icon: MdFormatAlignCenter,
@@ -16429,7 +16618,7 @@ function ListAlignGroup({ editor }) {
       onClick: () => editor.chain().focus().setTextAlign("center").run(),
       disabled: !editor.can().setTextAlign("center")
     }
-  ), /* @__PURE__ */ React9.createElement(
+  ), /* @__PURE__ */ React10.createElement(
     ToolbarButton_default,
     {
       icon: MdFormatAlignRight,
@@ -16437,7 +16626,7 @@ function ListAlignGroup({ editor }) {
       onClick: () => editor.chain().focus().setTextAlign("right").run(),
       disabled: !editor.can().setTextAlign("right")
     }
-  ), /* @__PURE__ */ React9.createElement(
+  ), /* @__PURE__ */ React10.createElement(
     ToolbarButton_default,
     {
       icon: MdFormatAlignJustify,
@@ -16449,7 +16638,7 @@ function ListAlignGroup({ editor }) {
 }
 
 // src/components/tetrons/toolbar/MiscGroup.tsx
-import React10 from "react";
+import React11 from "react";
 import {
   MdUndo,
   MdRedo,
@@ -16522,7 +16711,7 @@ Reason: ${issue.message}
       alert("\u274C Failed to check grammar. Please try again later.");
     }
   };
-  return /* @__PURE__ */ React10.createElement("div", { className: "misc-group" }, /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React11.createElement("div", { className: "misc-group" }, /* @__PURE__ */ React11.createElement(
     ToolbarButton_default,
     {
       icon: MdUndo,
@@ -16530,7 +16719,7 @@ Reason: ${issue.message}
       onClick: () => editor.chain().focus().undo().run(),
       disabled: !editor.can().undo()
     }
-  ), /* @__PURE__ */ React10.createElement(
+  ), /* @__PURE__ */ React11.createElement(
     ToolbarButton_default,
     {
       icon: MdRedo,
@@ -16538,14 +16727,14 @@ Reason: ${issue.message}
       onClick: () => editor.chain().focus().redo().run(),
       disabled: !editor.can().redo()
     }
-  ), /* @__PURE__ */ React10.createElement(
+  ), /* @__PURE__ */ React11.createElement(
     ToolbarButton_default,
     {
       icon: MdRefresh,
       label: "Reset Formatting",
       onClick: () => editor.chain().focus().unsetAllMarks().clearNodes().run()
     }
-  ), /* @__PURE__ */ React10.createElement(
+  ), /* @__PURE__ */ React11.createElement(
     ToolbarButton_default,
     {
       icon: MdCode,
@@ -16553,14 +16742,14 @@ Reason: ${issue.message}
       onClick: () => editor.chain().focus().toggleCodeBlock().run(),
       isActive: editor.isActive("codeBlock")
     }
-  ), /* @__PURE__ */ React10.createElement(
+  ), /* @__PURE__ */ React11.createElement(
     ToolbarButton_default,
     {
       icon: MdVisibility,
       label: "Preview",
       onClick: handlePreview
     }
-  ), /* @__PURE__ */ React10.createElement(
+  ), /* @__PURE__ */ React11.createElement(
     ToolbarButton_default,
     {
       icon: MdSpellcheck,
@@ -16573,7 +16762,7 @@ Reason: ${issue.message}
 // src/components/tetrons/toolbar/FileGroup.tsx
 import { FaRegFolderOpen } from "react-icons/fa";
 import { VscNewFile } from "react-icons/vsc";
-import React11, { useRef as useRef5 } from "react";
+import React12, { useRef as useRef5 } from "react";
 function FileGroup({ editor }) {
   const fileInputRef = useRef5(null);
   const handleNew = () => {
@@ -16602,7 +16791,7 @@ function FileGroup({ editor }) {
       e.target.value = "";
     }
   };
-  return /* @__PURE__ */ React11.createElement("div", { className: "file-group", role: "group", "aria-label": "File actions" }, /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement("div", { className: "file-group", role: "group", "aria-label": "File actions" }, /* @__PURE__ */ React12.createElement(
     "input",
     {
       type: "file",
@@ -16612,7 +16801,7 @@ function FileGroup({ editor }) {
       className: "hidden",
       "aria-label": "Open JSON file"
     }
-  ), /* @__PURE__ */ React11.createElement(ToolbarButton_default, { icon: VscNewFile, onClick: handleNew, title: "New" }), /* @__PURE__ */ React11.createElement(
+  ), /* @__PURE__ */ React12.createElement(ToolbarButton_default, { icon: VscNewFile, onClick: handleNew, title: "New" }), /* @__PURE__ */ React12.createElement(
     ToolbarButton_default,
     {
       icon: FaRegFolderOpen,
@@ -16623,7 +16812,7 @@ function FileGroup({ editor }) {
 }
 
 // src/components/tetrons/toolbar/AIGroup.tsx
-import React12, { useState as useState7, useRef as useRef6 } from "react";
+import React13, { useState as useState7, useRef as useRef6 } from "react";
 import { FaMicrophone, FaStop } from "react-icons/fa";
 import { Waveform } from "@uiball/loaders";
 import { motion, AnimatePresence } from "framer-motion";
@@ -16710,7 +16899,7 @@ function AiGroup({ editor }) {
       setIsLoadingAI(false);
     }
   };
-  return /* @__PURE__ */ React12.createElement("div", { className: "group relative space-y-3" }, /* @__PURE__ */ React12.createElement("div", { className: "flex gap-2 items-center" }, !isRecording ? /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement("div", { className: "group relative space-y-3" }, /* @__PURE__ */ React13.createElement("div", { className: "flex gap-2 items-center" }, !isRecording ? /* @__PURE__ */ React13.createElement(
     "button",
     {
       type: "button",
@@ -16718,8 +16907,8 @@ function AiGroup({ editor }) {
       className: "icon-btn",
       title: "Start Voice Input"
     },
-    /* @__PURE__ */ React12.createElement(FaMicrophone, { size: 18 })
-  ) : /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React13.createElement(FaMicrophone, { size: 18 })
+  ) : /* @__PURE__ */ React13.createElement(
     "button",
     {
       type: "button",
@@ -16727,8 +16916,8 @@ function AiGroup({ editor }) {
       className: "icon-btn stop-btn",
       title: "Stop Recording"
     },
-    /* @__PURE__ */ React12.createElement(FaStop, { size: 18 })
-  ), /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React13.createElement(FaStop, { size: 18 })
+  ), /* @__PURE__ */ React13.createElement(
     "button",
     {
       type: "button",
@@ -16737,7 +16926,7 @@ function AiGroup({ editor }) {
       title: "AI Assist"
     },
     "AI"
-  )), isRecording && /* @__PURE__ */ React12.createElement("div", { className: "flex flex-col items-center" }, /* @__PURE__ */ React12.createElement(Waveform, { size: 30, lineWeight: 3.5, speed: 1, color: "#4F46E5" }), /* @__PURE__ */ React12.createElement("p", { className: "text-sm mt-1 text-gray-600" }, "Recording...")), isTranscribing && /* @__PURE__ */ React12.createElement("p", { className: "text-sm text-gray-500" }, "Transcribing..."), transcriptionError && /* @__PURE__ */ React12.createElement("p", { className: "text-sm text-red-600" }, transcriptionError), audioBlob && /* @__PURE__ */ React12.createElement("div", { className: "mt-2" }, /* @__PURE__ */ React12.createElement("audio", { controls: true, src: URL.createObjectURL(audioBlob) })), /* @__PURE__ */ React12.createElement(AnimatePresence, null, showPromptInput && /* @__PURE__ */ React12.createElement(
+  )), isRecording && /* @__PURE__ */ React13.createElement("div", { className: "flex flex-col items-center" }, /* @__PURE__ */ React13.createElement(Waveform, { size: 30, lineWeight: 3.5, speed: 1, color: "#4F46E5" }), /* @__PURE__ */ React13.createElement("p", { className: "text-sm mt-1 text-gray-600" }, "Recording...")), isTranscribing && /* @__PURE__ */ React13.createElement("p", { className: "text-sm text-gray-500" }, "Transcribing..."), transcriptionError && /* @__PURE__ */ React13.createElement("p", { className: "text-sm text-red-600" }, transcriptionError), audioBlob && /* @__PURE__ */ React13.createElement("div", { className: "mt-2" }, /* @__PURE__ */ React13.createElement("audio", { controls: true, src: URL.createObjectURL(audioBlob) })), /* @__PURE__ */ React13.createElement(AnimatePresence, null, showPromptInput && /* @__PURE__ */ React13.createElement(
     motion.div,
     {
       className: "ai-modal-backdrop",
@@ -16745,7 +16934,7 @@ function AiGroup({ editor }) {
       animate: { opacity: 1 },
       exit: { opacity: 0 }
     },
-    /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React13.createElement(
       motion.div,
       {
         className: "ai-modal-content",
@@ -16753,8 +16942,8 @@ function AiGroup({ editor }) {
         animate: { scale: 1, opacity: 1 },
         exit: { scale: 0.9, opacity: 0 }
       },
-      /* @__PURE__ */ React12.createElement("h2", { className: "ai-modal-title" }, "AI Prompt"),
-      /* @__PURE__ */ React12.createElement(
+      /* @__PURE__ */ React13.createElement("h2", { className: "ai-modal-title" }, "AI Prompt"),
+      /* @__PURE__ */ React13.createElement(
         "textarea",
         {
           className: "ai-modal-textarea",
@@ -16763,15 +16952,15 @@ function AiGroup({ editor }) {
           placeholder: "Enter your prompt here..."
         }
       ),
-      aiError && /* @__PURE__ */ React12.createElement("p", { className: "ai-modal-error" }, aiError),
-      /* @__PURE__ */ React12.createElement("div", { className: "ai-modal-actions" }, /* @__PURE__ */ React12.createElement(
+      aiError && /* @__PURE__ */ React13.createElement("p", { className: "ai-modal-error" }, aiError),
+      /* @__PURE__ */ React13.createElement("div", { className: "ai-modal-actions" }, /* @__PURE__ */ React13.createElement(
         "button",
         {
           onClick: () => setShowPromptInput(false),
           className: "ai-cancel-btn"
         },
         "Cancel"
-      ), /* @__PURE__ */ React12.createElement(
+      ), /* @__PURE__ */ React13.createElement(
         "button",
         {
           onClick: handlePromptSubmit,
@@ -16784,13 +16973,76 @@ function AiGroup({ editor }) {
   )));
 }
 
+// src/components/tetrons/toolbar/AddOnGroup.tsx
+import React15, { useState as useState9 } from "react";
+import { SquareRadical, MessageSquareCode } from "lucide-react";
+import dynamic from "next/dynamic";
+import "katex/dist/katex.min.css";
+var MathModal2 = dynamic(() => Promise.resolve().then(() => (init_MathModal(), MathModal_exports)), { ssr: false });
+var CodeEditorModal2 = dynamic(() => Promise.resolve().then(() => (init_CodeEditorModal(), CodeEditorModal_exports)), {
+  ssr: false
+});
+var AddOnGroup = ({ editor }) => {
+  const [isModalOpen, setModalOpen] = useState9(false);
+  const [latexValue, setLatexValue] = useState9("");
+  const [isCodeModalOpen, setCodeModalOpen] = useState9(false);
+  if (!editor) return null;
+  const insertCodeBlock = () => {
+    setCodeModalOpen(true);
+  };
+  const handleMathInsert = (latex) => {
+    editor.chain().focus().insertContent({
+      type: "mathInline",
+      attrs: { formula: latex }
+    }).run();
+    setModalOpen(false);
+    setLatexValue("");
+  };
+  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement("div", { className: "group flex gap-2 items-center" }, /* @__PURE__ */ React15.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: insertCodeBlock,
+      className: "addon-btn",
+      title: "Open Code Editor"
+    },
+    /* @__PURE__ */ React15.createElement(MessageSquareCode, { size: 18 })
+  ), /* @__PURE__ */ React15.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => setModalOpen(true),
+      className: "addon-btn",
+      title: "Insert Math Equation"
+    },
+    /* @__PURE__ */ React15.createElement(SquareRadical, { size: 18 })
+  )), /* @__PURE__ */ React15.createElement(
+    MathModal2,
+    {
+      isOpen: isModalOpen,
+      onClose: () => setModalOpen(false),
+      onSubmit: handleMathInsert,
+      value: latexValue,
+      setValue: setLatexValue
+    }
+  ), /* @__PURE__ */ React15.createElement(
+    CodeEditorModal2,
+    {
+      isOpen: isCodeModalOpen,
+      onClose: () => setCodeModalOpen(false)
+    }
+  ));
+};
+var AddOnGroup_default = AddOnGroup;
+
 // src/components/tetrons/toolbar/TetronsToolbar.tsx
 function TetronsToolbar({
   editor,
-  version
+  version,
+  addOns = []
 }) {
-  const [autoSave, setAutoSave] = useState8(false);
-  useEffect7(() => {
+  const [autoSave, setAutoSave] = useState10(false);
+  useEffect8(() => {
     if (!editor) return;
     const handleUpdate = () => {
       if (!autoSave) return;
@@ -16806,7 +17058,7 @@ function TetronsToolbar({
       editor.off("update", handleUpdate);
     };
   }, [autoSave, editor]);
-  return /* @__PURE__ */ React13.createElement("div", { className: "tetrons-toolbar" }, version !== "free" && /* @__PURE__ */ React13.createElement("div", { className: "group" }, /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React16.createElement("div", { className: "tetrons-toolbar" }, version !== "free" && /* @__PURE__ */ React16.createElement("div", { className: "group" }, /* @__PURE__ */ React16.createElement(
     "input",
     {
       type: "checkbox",
@@ -16814,7 +17066,7 @@ function TetronsToolbar({
       checked: autoSave,
       onChange: (e) => setAutoSave(e.target.checked)
     }
-  ), /* @__PURE__ */ React13.createElement("label", { htmlFor: "autoSave" }, "Auto Save")), ["pro", "premium", "platinum"].includes(version) && /* @__PURE__ */ React13.createElement(FileGroup, { editor }), /* @__PURE__ */ React13.createElement(ClipboardGroup, { editor }), /* @__PURE__ */ React13.createElement(FontStyleGroup, { editor }), /* @__PURE__ */ React13.createElement(ListAlignGroup, { editor }), ["premium", "platinum"].includes(version) && /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(InsertGroup, { editor }), /* @__PURE__ */ React13.createElement(ActionGroup, { editor })), version === "platinum" && /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(MiscGroup, { editor }), /* @__PURE__ */ React13.createElement(AiGroup, { editor })));
+  ), /* @__PURE__ */ React16.createElement("label", { htmlFor: "autoSave" }, "Auto Save")), ["pro", "premium", "platinum"].includes(version) && /* @__PURE__ */ React16.createElement(FileGroup, { editor }), /* @__PURE__ */ React16.createElement(ClipboardGroup, { editor }), /* @__PURE__ */ React16.createElement(FontStyleGroup, { editor }), /* @__PURE__ */ React16.createElement(ListAlignGroup, { editor }), ["premium", "platinum"].includes(version) && /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(InsertGroup, { editor }), /* @__PURE__ */ React16.createElement(ActionGroup, { editor })), version === "platinum" && /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(MiscGroup, { editor }), /* @__PURE__ */ React16.createElement(AiGroup, { editor })), addOns.length > 0 && /* @__PURE__ */ React16.createElement(AddOnGroup_default, { editor }));
 }
 
 // src/components/tetrons/EditorContent.tsx
@@ -16823,25 +17075,16 @@ lowlight.register("js", javascript);
 lowlight.register("ts", typescript);
 function EditorContent({ apiKey }) {
   const typo = useTypo();
-  const [isValid, setIsValid] = useState9(null);
-  const [error, setError] = useState9(null);
-  const [versions, setVersions] = useState9([]);
-  const [userVersion, setUserVersion] = useState9(null);
-  const [currentVersionIndex, setCurrentVersionIndex] = useState9(
+  const [isValid, setIsValid] = useState11(null);
+  const [error, setError] = useState11(null);
+  const [versions, setVersions] = useState11([]);
+  const [userVersion, setUserVersion] = useState11(null);
+  const [currentVersionIndex, setCurrentVersionIndex] = useState11(
     null
   );
   const wrapperRef = useRef7(null);
-  function getApiBaseUrl() {
-    if (typeof import.meta !== "undefined" && import.meta.env?.VITE_TETRONS_API_URL) {
-      return import.meta.env.VITE_TETRONS_API_URL;
-    }
-    if (typeof process !== "undefined" && process.env?.NEXT_PUBLIC_TETRONS_API_URL) {
-      return process.env.NEXT_PUBLIC_TETRONS_API_URL;
-    }
-    return "https://staging.tetrons.com";
-  }
-  const API_BASE_URL = getApiBaseUrl();
-  useEffect8(() => {
+  const API_BASE_URL = typeof process !== "undefined" && process.env?.NEXT_PUBLIC_TETRONS_API_URL ? process.env.NEXT_PUBLIC_TETRONS_API_URL : "https://staging.tetrons.com";
+  useEffect9(() => {
     const validateKey = async () => {
       try {
         const res = await fetch(`${API_BASE_URL}/api/validate`, {
@@ -16912,7 +17155,8 @@ function EditorContent({ apiKey }) {
         Spellcheck.configure({
           spellcheckFn: (word) => typo.check(word)
         })
-      ] : []
+      ] : [],
+      MathInline
     ],
     content: "",
     editorProps: {
@@ -16923,7 +17167,7 @@ function EditorContent({ apiKey }) {
     },
     immediatelyRender: false
   });
-  useEffect8(() => {
+  useEffect9(() => {
     return () => {
       editor?.destroy();
     };
@@ -16948,15 +17192,22 @@ function EditorContent({ apiKey }) {
     }
   };
   if (isValid === false) {
-    return /* @__PURE__ */ React14.createElement("div", { className: "editor-error" }, "\u26A0\uFE0F ", error);
+    return /* @__PURE__ */ React17.createElement("div", { className: "editor-error" }, "\u26A0\uFE0F ", error);
   }
   if (isValid === null) {
-    return /* @__PURE__ */ React14.createElement("div", { className: "editor-loading" }, "\u{1F50D} Validating license...");
+    return /* @__PURE__ */ React17.createElement("div", { className: "editor-loading" }, "\u{1F50D} Validating license...");
   }
   if (!typo) {
-    return /* @__PURE__ */ React14.createElement("div", { className: "editor-loading" }, "\u{1F4D6} Loading dictionary...");
+    return /* @__PURE__ */ React17.createElement("div", { className: "editor-loading" }, "\u{1F4D6} Loading dictionary...");
   }
-  return /* @__PURE__ */ React14.createElement("div", { className: "editor-container" }, userVersion !== "free" && /* @__PURE__ */ React14.createElement("div", { className: "editor-toolbar" }, /* @__PURE__ */ React14.createElement(
+  const versionAddOnsMap = {
+    free: [],
+    pro: ["code"],
+    premium: ["code", "math"],
+    platinum: ["code", "math"]
+  };
+  const enabledAddOns = userVersion ? versionAddOnsMap[userVersion] || [] : [];
+  return /* @__PURE__ */ React17.createElement("div", { className: "editor-container" }, userVersion !== "free" && /* @__PURE__ */ React17.createElement("div", { className: "editor-toolbar" }, /* @__PURE__ */ React17.createElement(
     "button",
     {
       type: "button",
@@ -16965,7 +17216,7 @@ function EditorContent({ apiKey }) {
       className: "editor-save-btn"
     },
     "Save Version"
-  ), /* @__PURE__ */ React14.createElement("div", { className: "editor-versions-wrapper" }, versions.length === 0 ? /* @__PURE__ */ React14.createElement("span", { className: "editor-no-versions" }, "No saved versions") : versions.map((_, idx) => /* @__PURE__ */ React14.createElement(
+  ), /* @__PURE__ */ React17.createElement("div", { className: "editor-versions-wrapper" }, versions.length === 0 ? /* @__PURE__ */ React17.createElement("span", { className: "editor-no-versions" }, "No saved versions") : versions.map((_, idx) => /* @__PURE__ */ React17.createElement(
     "button",
     {
       key: idx,
@@ -16975,14 +17226,21 @@ function EditorContent({ apiKey }) {
       title: `Restore Version ${idx + 1}`
     },
     `V${idx + 1}`
-  )))), editor && userVersion && /* @__PURE__ */ React14.createElement(TetronsToolbar, { editor, version: userVersion }), /* @__PURE__ */ React14.createElement(
+  )))), editor && userVersion && /* @__PURE__ */ React17.createElement(
+    TetronsToolbar,
+    {
+      editor,
+      version: userVersion,
+      addOns: enabledAddOns
+    }
+  ), /* @__PURE__ */ React17.createElement(
     "div",
     {
       ref: wrapperRef,
       className: "editor-content-wrapper",
       onClick: handleEditorClick
     },
-    editor ? /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(TiptapEditorContent, { editor }), /* @__PURE__ */ React14.createElement(TableContextMenu, { editor })) : /* @__PURE__ */ React14.createElement("div", { className: "editor-loading" }, "Loading editor...")
+    editor ? /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(TiptapEditorContent, { editor }), /* @__PURE__ */ React17.createElement(TableContextMenu, { editor })) : /* @__PURE__ */ React17.createElement("div", { className: "editor-loading" }, "Loading editor...")
   ));
 }