@kopexa/tiptap 1.0.0 → 2.0.0

package/dist/presets/basic/index.js

@@ -7,16 +7,15 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __defNormalProp = (obj, key2, value) => key2 in obj ? __defProp(obj, key2, { enumerable: true, configurable: true, writable: true, value }) : obj[key2] = value;
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
-    for (let key2 of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key2) && key2 !== except)
-        __defProp(to, key2, { get: () => from[key2], enumerable: !(desc = __getOwnPropDesc(from, key2)) || desc.enumerable });
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
   return to;
 };
@@ -29,7 +28,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __publicField = (obj, key2, value) => __defNormalProp(obj, typeof key2 !== "symbol" ? key2 + "" : key2, value);
 
 // src/presets/basic/index.tsx
 var basic_exports = {};
@@ -38,25 +36,29 @@ __export(basic_exports, {
 });
 module.exports = __toCommonJS(basic_exports);
 var import_theme3 = require("@kopexa/theme");
-var import_react32 = require("@tiptap/react");
-var import_react33 = require("react");
+var import_react31 = require("@tiptap/react");
+var import_react32 = require("react");
 
 // src/context/editor-context.ts
 var import_react_utils = require("@kopexa/react-utils");
-var [EditorWrapperProvider, useEditorWrapper] = (0, import_react_utils.createContext)();
+var [EditorUIProvider, useEditorUIContext] = (0, import_react_utils.createContext)();
 
 // src/hooks/use-create-editor.ts
+var import_extension_code = require("@kopexa/extension-code");
 var import_extension_controlref = require("@kopexa/extension-controlref");
+var import_extension_table = require("@kopexa/extension-table");
 var import_extension_highlight = require("@tiptap/extension-highlight");
+var import_extension_invisible_characters = __toESM(require("@tiptap/extension-invisible-characters"));
+var import_extension_list = require("@tiptap/extension-list");
 var import_extension_subscript = require("@tiptap/extension-subscript");
 var import_extension_superscript = require("@tiptap/extension-superscript");
-var import_extension_task_item = require("@tiptap/extension-task-item");
-var import_extension_task_list = require("@tiptap/extension-task-list");
+var import_extension_table_of_contents = require("@tiptap/extension-table-of-contents");
 var import_extension_text_align = require("@tiptap/extension-text-align");
+var import_extension_text_style = require("@tiptap/extension-text-style");
 var import_extension_typography = require("@tiptap/extension-typography");
 var import_extension_unique_id = require("@tiptap/extension-unique-id");
 var import_extensions = require("@tiptap/extensions");
-var import_react5 = require("@tiptap/react");
+var import_react4 = require("@tiptap/react");
 var import_starter_kit = require("@tiptap/starter-kit");
 
 // src/extensions/link/index.ts
@@ -149,1174 +151,9 @@ var Selection = import_react2.Extension.create({
   }
 });
 
-// src/extensions/table/kit.ts
-var import_react3 = require("@tiptap/react");
-
-// src/extensions/table/table/table.ts
-var import_extension_table = require("@tiptap/extension-table");
-var import_tables2 = require("@tiptap/pm/tables");
-
-// src/extensions/table/table/table-controls.ts
-var import_core = require("@tiptap/core");
-var import_state3 = require("@tiptap/pm/state");
-var import_view2 = require("@tiptap/pm/view");
-var key = new import_state3.PluginKey("tableControls");
-function tableControls() {
-  return new import_state3.Plugin({
-    key,
-    state: {
-      init() {
-        return new TableControlsState();
-      },
-      apply(tr, prev) {
-        return prev.apply(tr);
-      }
-    },
-    props: {
-      handleDOMEvents: {
-        mousemove: (view, event) => {
-          var _a;
-          const pluginState = key.getState(view.state);
-          if (!event.target.closest(".table-wrapper") && pluginState.values.hoveredTable) {
-            return view.dispatch(
-              view.state.tr.setMeta(key, {
-                setHoveredTable: null,
-                setHoveredCell: null
-              })
-            );
-          }
-          const pos = view.posAtCoords({
-            left: event.clientX,
-            top: event.clientY
-          });
-          if (!pos || pos.pos < 0 || pos.pos > view.state.doc.content.size)
-            return;
-          const table = (0, import_core.findParentNode)((node) => node.type.name === "table")(
-            import_state3.TextSelection.create(view.state.doc, pos.pos)
-          );
-          const cell = (0, import_core.findParentNode)(
-            (node) => node.type.name === "tableCell" || node.type.name === "tableHeader"
-          )(import_state3.TextSelection.create(view.state.doc, pos.pos));
-          if (!table || !cell) return;
-          if (((_a = pluginState.values.hoveredCell) == null ? void 0 : _a.pos) !== cell.pos) {
-            return view.dispatch(
-              view.state.tr.setMeta(key, {
-                setHoveredTable: table,
-                setHoveredCell: cell
-              })
-            );
-          }
-        }
-      },
-      decorations: (state) => {
-        const pluginState = key.getState(state);
-        if (!pluginState) {
-          return null;
-        }
-        const { hoveredTable, hoveredCell } = pluginState.values;
-        const docSize = state.doc.content.size;
-        if (hoveredTable && hoveredCell && hoveredTable.pos < docSize && hoveredCell.pos < docSize) {
-          const decorations = [
-            import_view2.Decoration.node(
-              hoveredTable.pos,
-              hoveredTable.pos + hoveredTable.node.nodeSize,
-              {},
-              {
-                hoveredTable,
-                hoveredCell
-              }
-            )
-          ];
-          return import_view2.DecorationSet.create(state.doc, decorations);
-        }
-        return null;
-      }
-    }
-  });
-}
-var TableControlsState = class {
-  constructor(props = {}) {
-    __publicField(this, "values");
-    this.values = {
-      hoveredTable: null,
-      hoveredCell: null,
-      ...props
-    };
-  }
-  apply(tr) {
-    const actions = tr.getMeta(key);
-    if ((actions == null ? void 0 : actions.setHoveredTable) !== void 0) {
-      this.values.hoveredTable = actions.setHoveredTable;
-    }
-    if ((actions == null ? void 0 : actions.setHoveredCell) !== void 0) {
-      this.values.hoveredCell = actions.setHoveredCell;
-    }
-    return this;
-  }
-};
-
-// src/extensions/table/table/table-view.tsx
-var import_dom = require("@floating-ui/dom");
-var import_tables = require("@tiptap/pm/tables");
-var import_jsx_dom_cjs = require("jsx-dom-cjs");
-
-// src/extensions/table/table/icons.ts
-var icons = {
-  colorPicker: `<svg xmlns="http://www.w3.org/2000/svg" length="24" viewBox="0 0 24 24" style="transform: ;msFilter:;"><path fill="rgb(var(--color-text-300))" d="M20 14c-.092.064-2 2.083-2 3.5 0 1.494.949 2.448 2 2.5.906.044 2-.891 2-2.5 0-1.5-1.908-3.436-2-3.5zM9.586 20c.378.378.88.586 1.414.586s1.036-.208 1.414-.586l7-7-.707-.707L11 4.586 8.707 2.293 7.293 3.707 9.586 6 4 11.586c-.378.378-.586.88-.586 1.414s.208 1.036.586 1.414L9.586 20zM11 7.414 16.586 13H5.414L11 7.414z"></path></svg>`,
-  deleteColumn: `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash-2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>`,
-  deleteRow: `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash-2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>`,
-  insertLeftTableIcon: `<svg
-    xmlns="http://www.w3.org/2000/svg"
-    length={12}
-    viewBox="0 -960 960 960"
-      >
-    <path
-      d="M224.617-140.001q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21H360q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H224.617Zm375.383 0q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21h135.383q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H600Zm147.691-607.69q0-4.616-3.846-8.463-3.846-3.846-8.462-3.846H600q-4.616 0-8.462 3.846-3.847 3.847-3.847 8.463v535.382q0 4.616 3.847 8.463Q595.384-200 600-200h135.383q4.616 0 8.462-3.846 3.846-3.847 3.846-8.463v-535.382ZM587.691-200h160-160Z"
-      fill="rgb(var(--color-text-300))"
-    />
-  </svg>
-`,
-  insertRightTableIcon: `<svg
-    xmlns="http://www.w3.org/2000/svg"
-    length={12}
-    viewBox="0 -960 960 960"
-  >
-    <path
-      d="M600-140.001q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21h135.383q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H600Zm-375.383 0q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21H360q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H224.617Zm-12.308-607.69v535.382q0 4.616 3.846 8.463 3.846 3.846 8.462 3.846H360q4.616 0 8.462-3.846 3.847-3.847 3.847-8.463v-535.382q0-4.616-3.847-8.463Q364.616-760 360-760H224.617q-4.616 0-8.462 3.846-3.846 3.847-3.846 8.463Zm160 547.691h-160 160Z"
-      fill="rgb(var(--color-text-300))"
-    />
-  </svg>
-`,
-  insertTopTableIcon: `<svg
-    xmlns="http://www.w3.org/2000/svg"
-    length={24}
-    viewBox="0 -960 960 960"
-  >
-    <path
-      d="M212.309-527.693q-30.308 0-51.308-21t-21-51.307v-135.383q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307V-600q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0 375.383q-30.308 0-51.308-21t-21-51.307V-360q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307v135.383q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0-59.999h535.382q4.616 0 8.463-3.846 3.846-3.846 3.846-8.462V-360q0-4.616-3.846-8.462-3.847-3.847-8.463-3.847H212.309q-4.616 0-8.463 3.847Q200-364.616 200-360v135.383q0 4.616 3.846 8.462 3.847 3.846 8.463 3.846Zm-12.309-160v160-160Z"
-      fill="rgb(var(--color-text-300))"
-    />
-  </svg>
-`,
-  toggleColumnHeader: `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-toggle-right"><rect width="20" height="12" x="2" y="6" rx="6" ry="6"/><circle cx="16" cy="12" r="2"/></svg>`,
-  toggleRowHeader: `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-toggle-right"><rect width="20" height="12" x="2" y="6" rx="6" ry="6"/><circle cx="16" cy="12" r="2"/></svg>`,
-  insertBottomTableIcon: `<svg
-    xmlns="http://www.w3.org/2000/svg"
-    length={24}
-    viewBox="0 -960 960 960"
-  >
-    <path
-      d="M212.309-152.31q-30.308 0-51.308-21t-21-51.307V-360q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307v135.383q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0-375.383q-30.308 0-51.308-21t-21-51.307v-135.383q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307V-600q0 30.307-21 51.307-21 21-51.308 21H212.309Zm535.382-219.998H212.309q-4.616 0-8.463 3.846-3.846 3.846-3.846 8.462V-600q0 4.616 3.846 8.462 3.847 3.847 8.463 3.847h535.382q4.616 0 8.463-3.847Q760-595.384 760-600v-135.383q0-4.616-3.846-8.462-3.847-3.846-8.463-3.846ZM200-587.691v-160 160Z"
-      fill="rgb(var(--color-text-300))"
-    />
-  </svg>
-`
-};
-
-// src/extensions/table/table/table-view.tsx
-var Popover = class {
-  constructor(content, opts) {
-    __publicField(this, "reference");
-    __publicField(this, "floating");
-    __publicField(this, "cleanupAutoUpdate", null);
-    __publicField(this, "onDocClick", (e) => {
-      if (!this.floating.contains(e.target) && !this.reference.contains(e.target)) {
-        this.hide();
-      }
-    });
-    __publicField(this, "onEsc", (e) => {
-      if (e.key === "Escape") this.hide();
-    });
-    __publicField(this, "_placement");
-    __publicField(this, "_offsetPx");
-    // biome-ignore lint/correctness/noUnusedPrivateClassMembers: backwards. will be used later
-    __publicField(this, "_interactive");
-    var _a, _b, _c, _d;
-    this.reference = opts.reference;
-    this.floating = document.createElement("div");
-    this.floating.setAttribute("role", "dialog");
-    this.floating.setAttribute("aria-modal", "false");
-    this.floating.style.position = "fixed";
-    this.floating.style.zIndex = "9999";
-    this.floating.style.display = "none";
-    this.floating.className = "rounded-md border bg-background px-2 py-2.5 text-xs shadow-sm min-w-[12rem] whitespace-nowrap";
-    this.floating.appendChild(content);
-    const host = (_a = opts.container) != null ? _a : document.body;
-    host.appendChild(this.floating);
-    this._placement = (_b = opts.placement) != null ? _b : "right";
-    this._offsetPx = (_c = opts.offsetPx) != null ? _c : 6;
-    this._interactive = (_d = opts.interactive) != null ? _d : true;
-  }
-  async _updatePosition() {
-    const { x, y } = await (0, import_dom.computePosition)(this.reference, this.floating, {
-      placement: this._placement,
-      middleware: [(0, import_dom.offset)(this._offsetPx), (0, import_dom.flip)(), (0, import_dom.shift)({ padding: 8 })]
-    });
-    Object.assign(this.floating.style, { left: `${x}px`, top: `${y}px` });
-  }
-  show() {
-    if (this.floating.style.display !== "none") return;
-    this.floating.style.display = "block";
-    this.cleanupAutoUpdate = (0, import_dom.autoUpdate)(
-      this.reference,
-      this.floating,
-      () => this._updatePosition()
-    );
-    document.addEventListener("keydown", this.onEsc, { passive: true });
-    document.addEventListener("mousedown", this.onDocClick, { capture: true });
-    requestAnimationFrame(() => this._updatePosition());
-  }
-  hide() {
-    var _a;
-    if (this.floating.style.display === "none") return;
-    this.floating.style.display = "none";
-    (_a = this.cleanupAutoUpdate) == null ? void 0 : _a.call(this);
-    this.cleanupAutoUpdate = null;
-    document.removeEventListener("keydown", this.onEsc);
-    document.removeEventListener("mousedown", this.onDocClick, {
-      capture: true
-    });
-  }
-  toggle() {
-    if (this.floating.style.display === "none") this.show();
-    else this.hide();
-  }
-  destroy() {
-    this.hide();
-    this.floating.remove();
-  }
-  get el() {
-    return this.floating;
-  }
-};
-function setCellsBackgroundColor(editor, color) {
-  return editor.chain().focus().updateAttributes("tableCell", {
-    background: color.backgroundColor,
-    textColor: color.textColor
-  }).run();
-}
-function setTableRowBackgroundColor(editor, color) {
-  const { state, dispatch } = editor.view;
-  const { selection } = state;
-  if (!(selection instanceof import_tables.CellSelection)) return false;
-  const hoveredCell = selection.$headCell || selection.$anchorCell;
-  let rowDepth = hoveredCell.depth;
-  while (rowDepth > 0 && hoveredCell.node(rowDepth).type.name !== "tableRow") {
-    rowDepth--;
-  }
-  if (hoveredCell.node(rowDepth).type.name !== "tableRow") return false;
-  const rowStartPos = hoveredCell.start(rowDepth);
-  const tr = state.tr.setNodeMarkup(rowStartPos - 1, null, {
-    ...hoveredCell.node(rowDepth).attrs,
-    background: color.backgroundColor,
-    textColor: color.textColor
-  });
-  dispatch(tr);
-  return true;
-}
-var columnsToolboxItems = [
-  {
-    label: "Toggle column header",
-    icon: icons.toggleColumnHeader,
-    action: ({ editor }) => editor.chain().focus().toggleHeaderColumn().run()
-  },
-  {
-    label: "Add column before",
-    icon: icons.insertLeftTableIcon,
-    action: ({ editor }) => editor.chain().focus().addColumnBefore().run()
-  },
-  {
-    label: "Add column after",
-    icon: icons.insertRightTableIcon,
-    action: ({ editor }) => editor.chain().focus().addColumnAfter().run()
-  },
-  { label: "Pick color", icon: "", action: () => {
-  } },
-  {
-    label: "Delete column",
-    icon: icons.deleteColumn,
-    action: ({ editor }) => editor.chain().focus().deleteColumn().run()
-  }
-];
-var rowsToolboxItems = [
-  {
-    label: "Toggle row header",
-    icon: icons.toggleRowHeader,
-    action: ({ editor }) => editor.chain().focus().toggleHeaderRow().run()
-  },
-  {
-    label: "Add row above",
-    icon: icons.insertTopTableIcon,
-    action: ({ editor }) => editor.chain().focus().addRowBefore().run()
-  },
-  {
-    label: "Add row below",
-    icon: icons.insertBottomTableIcon,
-    action: ({ editor }) => editor.chain().focus().addRowAfter().run()
-  },
-  { label: "Pick color", icon: "", action: () => {
-  } },
-  {
-    label: "Delete row",
-    icon: icons.deleteRow,
-    action: ({ editor }) => editor.chain().focus().deleteRow().run()
-  }
-];
-function buildToolboxContent({
-  items,
-  onClickItem,
-  onSelectColor,
-  colors
-}) {
-  return (0, import_jsx_dom_cjs.h)(
-    "div",
-    { className: "space-y-2" },
-    items.map((item) => {
-      if (item.label === "Pick color") {
-        return (0, import_jsx_dom_cjs.h)("div", { className: "flex flex-col" }, [
-          (0, import_jsx_dom_cjs.h)("hr", { className: "!my-2 border" }),
-          (0, import_jsx_dom_cjs.h)("div", { className: "text-foreground text-sm" }, item.label),
-          (0, import_jsx_dom_cjs.h)(
-            "div",
-            { className: "grid grid-cols-6 gap-x-1 gap-y-2.5 mt-2" },
-            Object.entries(colors).map(
-              ([_, colorValue]) => {
-                var _a;
-                return (0, import_jsx_dom_cjs.h)("button", {
-                  // @ts-expect-error JSX
-                  type: "button",
-                  className: "grid place-items-center size-6 rounded outline-none ring-offset-2 focus-visible:ring",
-                  style: `background-color:${colorValue.backgroundColor};color:${colorValue.textColor || "inherit"};`,
-                  innerHTML: (_a = colorValue.icon) != null ? _a : `<span class="text-md" style="color:${colorValue.textColor || "inherit"}">A</span>`,
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    onSelectColor(colorValue);
-                  }
-                });
-              }
-            )
-          ),
-          (0, import_jsx_dom_cjs.h)("hr", { className: "!my-2 border" })
-        ]);
-      }
-      return (0, import_jsx_dom_cjs.h)(
-        "button",
-        {
-          // @ts-expect-error JSX
-          type: "button",
-          className: "w-full flex items-center gap-2 px-1 py-1.5 bg-background hover:bg-muted text-sm text-foreground rounded",
-          onClick: (e) => {
-            e.stopPropagation();
-            onClickItem(item);
-          }
-        },
-        [
-          (0, import_jsx_dom_cjs.h)("span", { className: "h-3 w-3 shrink-0", innerHTML: item.icon }),
-          (0, import_jsx_dom_cjs.h)("div", { className: "label" }, item.label)
-        ]
-      );
-    })
-  );
-}
-function createToolbox({
-  triggerButton,
-  items,
-  onSelectColor,
-  onClickItem,
-  colors,
-  appendTo
-}) {
-  if (!triggerButton) {
-    return null;
-  }
-  const content = buildToolboxContent({
-    items,
-    onClickItem,
-    onSelectColor,
-    colors
-  });
-  const pop = new Popover(content, {
-    reference: triggerButton,
-    container: appendTo != null ? appendTo : void 0,
-    placement: "right",
-    offsetPx: 6,
-    interactive: true
-  });
-  const onTrigger = (e) => {
-    e.stopPropagation();
-    pop.toggle();
-  };
-  triggerButton.addEventListener("click", onTrigger);
-  return {
-    show: () => pop.show(),
-    hide: () => pop.hide(),
-    destroy: () => {
-      pop.destroy();
-      triggerButton.removeEventListener("click", onTrigger);
-    }
-  };
-}
-var TableView = class {
-  constructor(node, cellMinWidth, decorations, editor, getPos) {
-    __publicField(this, "node");
-    __publicField(this, "cellMinWidth");
-    __publicField(this, "decorations");
-    __publicField(this, "editor");
-    __publicField(this, "getPos");
-    __publicField(this, "hoveredCell", null);
-    __publicField(this, "map");
-    __publicField(this, "root");
-    __publicField(this, "table");
-    __publicField(this, "colgroup");
-    __publicField(this, "tbody");
-    __publicField(this, "rowsControl");
-    __publicField(this, "columnsControl");
-    __publicField(this, "columnsToolbox");
-    __publicField(this, "rowsToolbox");
-    __publicField(this, "controls");
-    var _a, _b, _c, _d;
-    this.node = node;
-    this.cellMinWidth = cellMinWidth;
-    this.decorations = decorations.slice();
-    this.editor = editor;
-    this.getPos = getPos;
-    this.hoveredCell = null;
-    this.map = import_tables.TableMap.get(node);
-    if (editor.isEditable) {
-      this.rowsControl = (0, import_jsx_dom_cjs.h)(
-        "div",
-        { className: "rows-control" },
-        (0, import_jsx_dom_cjs.h)("button", {
-          // @ts-expect-error JSX
-          type: "button",
-          className: "rows-control-div",
-          onClick: () => this.selectRow(),
-          "aria-label": "Row actions"
-        })
-      );
-      this.columnsControl = (0, import_jsx_dom_cjs.h)(
-        "div",
-        { className: "columns-control" },
-        (0, import_jsx_dom_cjs.h)("button", {
-          // @ts-expect-error JSX
-          type: "button",
-          className: "columns-control-div",
-          onClick: () => this.selectColumn(),
-          "aria-label": "Column actions"
-        })
-      );
-      this.controls = (0, import_jsx_dom_cjs.h)(
-        "div",
-        { className: "table-controls", contentEditable: "false" },
-        this.rowsControl,
-        this.columnsControl
-      );
-      const palette = {
-        Blue: { backgroundColor: "#D9E4FF", textColor: "#171717" },
-        Orange: { backgroundColor: "#FFEDD5", textColor: "#171717" },
-        Grey: { backgroundColor: "#F1F1F1", textColor: "#171717" },
-        Yellow: { backgroundColor: "#FEF3C7", textColor: "#171717" },
-        Green: { backgroundColor: "#DCFCE7", textColor: "#171717" },
-        Red: { backgroundColor: "#FFDDDD", textColor: "#171717" },
-        Pink: { backgroundColor: "#FFE8FA", textColor: "#171717" },
-        Purple: { backgroundColor: "#E8DAFB", textColor: "#171717" },
-        None: {
-          backgroundColor: "transparent",
-          textColor: "inherit",
-          icon: `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="gray" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ban"><circle cx="12" cy="12" r="10"/><path d="m4.9 4.9 14.2 14.2"/></svg>`
-        }
-      };
-      this.columnsToolbox = createToolbox({
-        triggerButton: (_a = this.columnsControl) == null ? void 0 : _a.querySelector(
-          ".columns-control-div"
-        ),
-        items: columnsToolboxItems,
-        colors: palette,
-        appendTo: (_b = this.controls) != null ? _b : null,
-        onSelectColor: (color) => setCellsBackgroundColor(this.editor, color),
-        onClickItem: (item) => {
-          var _a2, _b2;
-          item.action({
-            editor: this.editor,
-            triggerButton: (_a2 = this.columnsControl) == null ? void 0 : _a2.firstElementChild,
-            controlsContainer: this.controls
-          });
-          (_b2 = this.columnsToolbox) == null ? void 0 : _b2.hide();
-        }
-      });
-      this.rowsToolbox = createToolbox({
-        triggerButton: (_c = this.rowsControl) == null ? void 0 : _c.querySelector(
-          ".rows-control-div"
-        ),
-        items: rowsToolboxItems,
-        colors: palette,
-        appendTo: (_d = this.controls) != null ? _d : null,
-        onSelectColor: (color) => setTableRowBackgroundColor(editor, color),
-        onClickItem: (item) => {
-          var _a2, _b2;
-          item.action({
-            editor: this.editor,
-            triggerButton: (_a2 = this.rowsControl) == null ? void 0 : _a2.firstElementChild,
-            controlsContainer: this.controls
-          });
-          (_b2 = this.rowsToolbox) == null ? void 0 : _b2.hide();
-        }
-      });
-    }
-    this.colgroup = (0, import_jsx_dom_cjs.h)(
-      "colgroup",
-      null,
-      Array.from({ length: this.map.width }, () => 1).map(() => (0, import_jsx_dom_cjs.h)("col"))
-    );
-    this.tbody = (0, import_jsx_dom_cjs.h)("tbody");
-    this.table = (0, import_jsx_dom_cjs.h)(
-      "table",
-      null,
-      this.colgroup,
-      this.tbody
-    );
-    this.root = (0, import_jsx_dom_cjs.h)(
-      "div",
-      {
-        className: "table-wrapper horizontal-scrollbar scrollbar-md controls--disabled"
-      },
-      this.controls,
-      this.table
-    );
-    this.render();
-  }
-  get dom() {
-    return this.root;
-  }
-  get contentDOM() {
-    return this.tbody;
-  }
-  update(node, decorations) {
-    if (node.type !== this.node.type) return false;
-    this.node = node;
-    this.decorations = [...decorations];
-    this.map = import_tables.TableMap.get(this.node);
-    if (this.editor.isEditable) this.updateControls();
-    this.render();
-    return true;
-  }
-  render() {
-    if (this.colgroup.children.length !== this.map.width) {
-      const cols = Array.from({ length: this.map.width }, () => 1).map(
-        () => (0, import_jsx_dom_cjs.h)("col")
-      );
-      this.colgroup.replaceChildren(...cols);
-    }
-    (0, import_tables.updateColumnsOnResize)(
-      this.node,
-      this.colgroup,
-      this.table,
-      this.cellMinWidth
-    );
-  }
-  ignoreMutation() {
-    return true;
-  }
-  updateControls() {
-    var _a;
-    const { hoveredTable: table, hoveredCell: cell } = Object.values(
-      this.decorations
-    ).reduce(
-      (acc, curr) => {
-        if (curr.spec.hoveredCell !== void 0)
-          acc.hoveredCell = curr.spec.hoveredCell;
-        if (curr.spec.hoveredTable !== void 0)
-          acc.hoveredTable = curr.spec.hoveredTable;
-        return acc;
-      },
-      {}
-    );
-    if (table === void 0 || cell === void 0) {
-      this.root.classList.add("controls--disabled");
-      return;
-    }
-    this.root.classList.remove("controls--disabled");
-    this.hoveredCell = cell;
-    const cellDom = this.editor.view.nodeDOM(cell.pos);
-    if (!this.table || !cellDom) return;
-    const tableRect = this.table.getBoundingClientRect();
-    const cellRect = cellDom.getBoundingClientRect();
-    if (this.columnsControl) {
-      this.columnsControl.style.left = `${cellRect.left - tableRect.left - (((_a = this.table.parentElement) == null ? void 0 : _a.scrollLeft) || 0)}px`;
-      this.columnsControl.style.width = `${cellRect.width}px`;
-    }
-    if (this.rowsControl) {
-      this.rowsControl.style.top = `${cellRect.top - tableRect.top}px`;
-      this.rowsControl.style.height = `${cellRect.height}px`;
-    }
-  }
-  selectColumn() {
-    if (!this.hoveredCell) return;
-    const colIndex = this.map.colCount(
-      this.hoveredCell.pos - (this.getPos() + 1)
-    );
-    const anchorCellPos = this.hoveredCell.pos;
-    const headCellPos = this.map.map[colIndex + this.map.width * (this.map.height - 1)] + (this.getPos() + 1);
-    const cellSelection = import_tables.CellSelection.create(
-      this.editor.view.state.doc,
-      anchorCellPos,
-      headCellPos
-    );
-    this.editor.view.dispatch(this.editor.state.tr.setSelection(cellSelection));
-  }
-  selectRow() {
-    if (!this.hoveredCell) return;
-    const anchorCellPos = this.hoveredCell.pos;
-    const anchorCellIndex = this.map.map.indexOf(
-      anchorCellPos - (this.getPos() + 1)
-    );
-    const headCellPos = this.map.map[anchorCellIndex + (this.map.width - 1)] + (this.getPos() + 1);
-    const cellSelection = import_tables.CellSelection.create(
-      this.editor.state.doc,
-      anchorCellPos,
-      headCellPos
-    );
-    this.editor.view.dispatch(
-      this.editor.view.state.tr.setSelection(cellSelection)
-    );
-  }
-};
-
-// src/utils/index.ts
-var import_state4 = require("@tiptap/pm/state");
-var MAX_FILE_SIZE = 5 * 1024 * 1024;
-var isMarkInSchema = (markName, editor) => {
-  if (!(editor == null ? void 0 : editor.schema)) return false;
-  return editor.schema.spec.marks.get(markName) !== void 0;
-};
-var isNodeInSchema = (nodeName, editor) => {
-  if (!(editor == null ? void 0 : editor.schema)) return false;
-  return editor.schema.spec.nodes.get(nodeName) !== void 0;
-};
-function findNodePosition(props) {
-  var _a;
-  const { editor, node, nodePos } = props;
-  if (!editor || !((_a = editor.state) == null ? void 0 : _a.doc)) return null;
-  const hasValidNode = node !== void 0 && node !== null;
-  const hasValidPos = nodePos !== void 0 && nodePos !== null;
-  if (!hasValidNode && !hasValidPos) {
-    return null;
-  }
-  if (hasValidPos) {
-    try {
-      const nodeAtPos = editor.state.doc.nodeAt(nodePos);
-      if (nodeAtPos) {
-        return { pos: nodePos, node: nodeAtPos };
-      }
-    } catch (error) {
-      console.error("Error checking node at position:", error);
-      return null;
-    }
-  }
-  let foundPos = -1;
-  let foundNode = null;
-  editor.state.doc.descendants((currentNode, pos) => {
-    if (currentNode === node) {
-      foundPos = pos;
-      foundNode = currentNode;
-      return false;
-    }
-    return true;
-  });
-  return foundPos !== -1 && foundNode !== null ? { pos: foundPos, node: foundNode } : null;
-}
-var ATTR_WHITESPACE = (
-  // eslint-disable-next-line no-control-regex
-  // biome-ignore lint/suspicious/noControlCharactersInRegex: we can do this yay
-  /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g
-);
-function isAllowedUri(uri, protocols) {
-  const allowedProtocols = [
-    "http",
-    "https",
-    "ftp",
-    "ftps",
-    "mailto",
-    "tel",
-    "callto",
-    "sms",
-    "cid",
-    "xmpp"
-  ];
-  if (protocols) {
-    for (const protocol of protocols) {
-      const nextProtocol = typeof protocol === "string" ? protocol : protocol.scheme;
-      if (nextProtocol) {
-        allowedProtocols.push(nextProtocol);
-      }
-    }
-  }
-  return !uri || uri.replace(ATTR_WHITESPACE, "").match(
-    new RegExp(
-      // eslint-disable-next-line no-useless-escape
-      `^(?:(?:${allowedProtocols.join("|")}):|[^a-z]|[a-z0-9+.-]+(?:[^a-z+.-:]|$))`,
-      "i"
-    )
-  );
-}
-function sanitizeUrl(inputUrl, baseUrl, protocols) {
-  try {
-    const url = new URL(inputUrl, baseUrl);
-    if (isAllowedUri(url.href, protocols)) {
-      return url.href;
-    }
-  } catch {
-  }
-  return "#";
-}
-function isNodeTypeSelected(editor, types = []) {
-  if (!editor || !editor.state.selection) return false;
-  const { state } = editor;
-  const { selection } = state;
-  if (selection.empty) return false;
-  if (selection instanceof import_state4.NodeSelection) {
-    const node = selection.node;
-    return node ? types.includes(node.type.name) : false;
-  }
-  return false;
-}
-function isExtensionAvailable(editor, extensionNames) {
-  if (!editor) return false;
-  const names = Array.isArray(extensionNames) ? extensionNames : [extensionNames];
-  const found = names.some(
-    (name) => editor.extensionManager.extensions.some((ext) => ext.name === name)
-  );
-  if (!found) {
-    console.warn(
-      `None of the extensions [${names.join(", ")}] were found in the editor schema. Ensure they are included in the editor configuration.`
-    );
-  }
-  return found;
-}
-function getEditorExtension(editor, extensionName) {
-  if (!editor) return null;
-  const extension = editor.extensionManager.extensions.find(
-    (ext) => ext.name === extensionName
-  );
-  if (!extension) {
-    console.warn(
-      `Extension "${extensionName}" not found in the editor schema. Ensure it is included in the editor configuration.`
-    );
-    return null;
-  }
-  return extension;
-}
-function hasContentAbove(editor) {
-  if (!editor) return { hasContent: false, content: "" };
-  const { state } = editor;
-  const { $from } = state.selection;
-  for (let i = $from.index(0) - 1; i >= 0; i--) {
-    const node = state.doc.child(i);
-    const content = node.textContent.trim();
-    if (content) {
-      return { hasContent: true, content };
-    }
-  }
-  return { hasContent: false, content: "" };
-}
-function findSelectionPosition(params) {
-  const { editor, node, nodePos } = params;
-  if (isValidPosition(nodePos)) return nodePos;
-  if (node) {
-    const found = findNodePosition({ editor, node });
-    if (found) return found.pos;
-  }
-  const { selection } = editor.state;
-  if (!selection.empty) return null;
-  const resolvedPos = selection.$anchor;
-  const nodeDepth = 1;
-  const selectedNode = resolvedPos.node(nodeDepth);
-  return selectedNode ? resolvedPos.before(nodeDepth) : null;
-}
-function isValidPosition(pos) {
-  return typeof pos === "number" && pos >= 0;
-}
-function getElementOverflowPosition(targetElement, containerElement) {
-  const targetBounds = targetElement.getBoundingClientRect();
-  const containerBounds = containerElement.getBoundingClientRect();
-  const isOverflowingTop = targetBounds.top < containerBounds.top;
-  const isOverflowingBottom = targetBounds.bottom > containerBounds.bottom;
-  if (isOverflowingTop && isOverflowingBottom) return "both";
-  if (isOverflowingTop) return "top";
-  if (isOverflowingBottom) return "bottom";
-  return "none";
-}
-function findParentNodeOfType(selection, typeName) {
-  let depth = selection.$anchor.depth;
-  while (depth > 0) {
-    const node = selection.$anchor.node(depth);
-    if (node.type.name === typeName) {
-      return { node, pos: selection.$anchor.start(depth) - 1 };
-    }
-    depth--;
-  }
-  return null;
-}
-
-// src/extensions/table/table/utilities/insert-line-above-table-action.ts
-var insertLineAboveTableAction = ({
-  editor
-}) => {
-  if (!editor.isActive("table")) return false;
-  try {
-    const { selection } = editor.state;
-    const tableNode = findParentNodeOfType(selection, "table");
-    if (!tableNode) return false;
-    const tablePos = tableNode.pos;
-    const firstRow = tableNode.node.child(0);
-    const selectionPath = selection.$anchor.path;
-    const selectionInFirstRow = selectionPath.includes(firstRow);
-    if (!selectionInFirstRow) return false;
-    if (tablePos === 0) {
-      editor.chain().insertContentAt(tablePos, { type: "paragraph" }).run();
-      editor.chain().setTextSelection(tablePos + 1).run();
-    } else {
-      const prevNodePos = tablePos - 1;
-      if (prevNodePos <= 0) return false;
-      const prevNode = editor.state.doc.nodeAt(prevNodePos - 1);
-      if (prevNode && prevNode.type.name === "paragraph") {
-        const endOfParagraphPos = tablePos - prevNode.nodeSize;
-        editor.chain().setTextSelection(endOfParagraphPos).run();
-      } else {
-        return false;
-      }
-    }
-    return true;
-  } catch (e) {
-    console.error("failed to insert line above table", e);
-    return false;
-  }
-};
-
-// src/extensions/table/table/utilities/insert-line-below-table-action.ts
-var insertLineBelowTableAction = ({
-  editor
-}) => {
-  if (!editor.isActive("table")) return false;
-  try {
-    const { selection } = editor.state;
-    const tableNode = findParentNodeOfType(selection, "table");
-    if (!tableNode) return false;
-    const tablePos = tableNode.pos;
-    const table = tableNode.node;
-    const rowCount = table.childCount;
-    const lastRow = table.child(rowCount - 1);
-    const selectionPath = selection.$anchor.path;
-    const selectionInLastRow = selectionPath.includes(lastRow);
-    if (!selectionInLastRow) return false;
-    const nextNodePos = tablePos + table.nodeSize;
-    const nextNode = editor.state.doc.nodeAt(nextNodePos);
-    if (nextNode && nextNode.type.name === "paragraph") {
-      const endOfParagraphPos = nextNodePos + nextNode.nodeSize - 1;
-      editor.chain().setTextSelection(endOfParagraphPos).run();
-    } else if (!nextNode) {
-      editor.chain().insertContentAt(nextNodePos, { type: "paragraph" }).run();
-      editor.chain().setTextSelection(nextNodePos + 1).run();
-    } else {
-      return false;
-    }
-    return true;
-  } catch (e) {
-    console.error("failed to insert line above table", e);
-    return false;
-  }
-};
-
-// src/extensions/table/table/table.ts
-var Table = import_extension_table.Table.extend({
-  addOptions() {
-    var _a;
-    return {
-      ...(_a = this.parent) == null ? void 0 : _a.call(this),
-      HTMLAttributes: {},
-      resizable: true,
-      handleWidth: 5,
-      cellMinWidth: 100,
-      lastColumnResizable: true,
-      allowTableNodeSelection: true
-    };
-  },
-  addKeyboardShortcuts() {
-    var _a;
-    return {
-      ...(_a = this.parent) == null ? void 0 : _a.call(this),
-      Tab: () => {
-        if (this.editor.isActive("table")) {
-          if (this.editor.isActive("listItem") || this.editor.isActive("taskItem")) {
-            return false;
-          }
-          if (this.editor.commands.goToNextCell()) {
-            return true;
-          }
-          if (!this.editor.can().addRowAfter()) {
-            return false;
-          }
-          return this.editor.chain().addRowAfter().goToNextCell().run();
-        }
-        return false;
-      },
-      ArrowDown: insertLineBelowTableAction,
-      ArrowUp: insertLineAboveTableAction
-    };
-  },
-  addNodeView() {
-    return ({ editor, getPos, node, decorations }) => {
-      const { cellMinWidth } = this.options;
-      return new TableView(
-        node,
-        cellMinWidth,
-        // biome-ignore lint/suspicious/noExplicitAny: prosemirror
-        decorations,
-        editor,
-        getPos
-      );
-    };
-  },
-  addProseMirrorPlugins() {
-    const isResizable = this.options.resizable && this.editor.isEditable;
-    const plugins = [
-      (0, import_tables2.tableEditing)({
-        allowTableNodeSelection: this.options.allowTableNodeSelection
-      }),
-      tableControls()
-    ];
-    if (isResizable) {
-      plugins.unshift(
-        (0, import_tables2.columnResizing)({
-          handleWidth: this.options.handleWidth,
-          cellMinWidth: this.options.cellMinWidth,
-          // View: TableView,
-          lastColumnResizable: this.options.lastColumnResizable
-        })
-      );
-    }
-    return plugins;
-  }
-});
-
-// src/extensions/table/table-cell.ts
-var import_core2 = require("@tiptap/core");
-var TableCell = import_core2.Node.create({
-  name: "tableCell",
-  content: "block+",
-  // DONT allow table in table.
-  tableRole: "cell",
-  isolating: true,
-  addOptions() {
-    return {
-      HTMLAttributes: {}
-    };
-  },
-  parseHTML() {
-    return [{ tag: "td" }];
-  },
-  renderHTML({ node, HTMLAttributes }) {
-    return [
-      "td",
-      (0, import_core2.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes, {
-        style: `background-color: ${node.attrs.background}; color: ${node.attrs.textColor}`
-      }),
-      0
-    ];
-  },
-  addAttributes() {
-    return {
-      colspan: {
-        default: 1,
-        parseHTML: (element) => {
-          const colspan = element.getAttribute("colspan");
-          const value = colspan ? Number.parseInt(colspan, 10) : 1;
-          return value;
-        }
-      },
-      rowspan: {
-        default: 1,
-        parseHTML: (element) => {
-          const rowspan = element.getAttribute("rowspan");
-          const value = rowspan ? Number.parseInt(rowspan, 10) : 1;
-          return value;
-        }
-      },
-      colwidth: {
-        default: null,
-        parseHTML: (element) => {
-          const colwidth = element.getAttribute("colwidth");
-          const value = colwidth ? [Number.parseInt(colwidth, 10)] : null;
-          return value;
-        }
-      },
-      background: {
-        default: null
-      },
-      textColor: {
-        default: null
-      },
-      style: {
-        default: null
-      }
-    };
-  }
-  // addProseMirrorPlugins() {
-  // 	return [
-  // 		new Plugin({
-  // 			props: {
-  // 				decorations: (state) => {
-  // 					const { isEditable } = this.editor;
-  // 					if (!isEditable) {
-  // 						return DecorationSet.empty;
-  // 					}
-  // 					const { doc, selection } = state;
-  // 					const decorations: Decoration[] = [];
-  // 					const cells = getCellsInColumn(0)(selection);
-  // 					if (cells) {
-  // 						cells.forEach(({ pos }: { pos: number }, index: number) => {
-  // 							decorations.push(
-  // 								Decoration.widget(pos + 1, () => {
-  // 									const rowSelected = isRowSelected(index)(selection);
-  // 									let className = "grip-row";
-  // 									if (rowSelected) {
-  // 										className += " selected";
-  // 									}
-  // 									if (index === 0) {
-  // 										className += " first";
-  // 									}
-  // 									if (index === cells.length - 1) {
-  // 										className += " last";
-  // 									}
-  // 									const grip = document.createElement("a");
-  // 									grip.className = className;
-  // 									grip.addEventListener("mousedown", (event) => {
-  // 										event.preventDefault();
-  // 										event.stopImmediatePropagation();
-  // 										this.editor.view.dispatch(
-  // 											selectRow(index)(this.editor.state.tr),
-  // 										);
-  // 									});
-  // 									return grip;
-  // 								}),
-  // 							);
-  // 						});
-  // 					}
-  // 					return DecorationSet.create(doc, decorations);
-  // 				},
-  // 			},
-  // 		}),
-  // 	];
-  // },
-});
-
-// src/extensions/table/table-header.ts
-var import_extension_table2 = require("@tiptap/extension-table");
-var TableHeader = import_extension_table2.TableHeader.extend({
-  addAttributes() {
-    return {
-      colspan: {
-        default: 1
-      },
-      rowspan: {
-        default: 1
-      },
-      colwidth: {
-        default: null,
-        parseHTML: (element) => {
-          const colwidth = element.getAttribute("colwidth");
-          const value = colwidth ? [Number.parseInt(colwidth, 10)] : null;
-          return value;
-        }
-      },
-      background: {
-        default: "none"
-      },
-      style: {
-        default: null
-      }
-    };
-  }
-  // addProseMirrorPlugins() {
-  // 	return [
-  // 		new Plugin({
-  // 			props: {
-  // 				decorations: (state) => {
-  // 					const { isEditable } = this.editor;
-  // 					if (!isEditable) {
-  // 						return DecorationSet.empty;
-  // 					}
-  // 					const { doc, selection } = state;
-  // 					const decorations: Decoration[] = [];
-  // 					const cells = getCellsInRow(0)(selection);
-  // 					if (cells) {
-  // 						cells.forEach(({ pos }, index) => {
-  // 							decorations.push(
-  // 								Decoration.widget(pos + 1, () => {
-  // 									const colSelected = isColumnSelected(index)(selection);
-  // 									let className = "grip-column";
-  // 									if (colSelected) {
-  // 										className += " selected";
-  // 									}
-  // 									if (index === 0) {
-  // 										className += " first";
-  // 									}
-  // 									if (index === cells.length - 1) {
-  // 										className += " last";
-  // 									}
-  // 									const grip = document.createElement("a");
-  // 									grip.className = className;
-  // 									grip.addEventListener("mousedown", (event) => {
-  // 										event.preventDefault();
-  // 										event.stopImmediatePropagation();
-  // 										this.editor.view.dispatch(
-  // 											selectColumn(index)(this.editor.state.tr),
-  // 										);
-  // 									});
-  // 									return grip;
-  // 								}),
-  // 							);
-  // 						});
-  // 					}
-  // 					return DecorationSet.create(doc, decorations);
-  // 				},
-  // 			},
-  // 		}),
-  // 	];
-  // },
-});
-
-// src/extensions/table/table-row.ts
-var import_extension_table3 = require("@tiptap/extension-table");
-var TableRow = import_extension_table3.TableRow.extend({
-  allowGapCursor: false,
-  content: "(tableCell | tableHeader)*"
-});
-
-// src/extensions/table/kit.ts
-var TableKit = import_react3.Extension.create({
-  name: "tableKit",
-  addExtensions() {
-    const extensions = [];
-    if (this.options.table !== false) {
-      extensions.push(Table.configure(this.options.table));
-    }
-    if (this.options.tableCell !== false) {
-      extensions.push(TableCell.configure(this.options.tableCell));
-    }
-    if (this.options.tableHeader !== false) {
-      extensions.push(TableHeader.configure(this.options.tableHeader));
-    }
-    if (this.options.tableRow !== false) {
-      extensions.push(TableRow.configure(this.options.tableRow));
-    }
-    return extensions;
-  }
-});
-
 // src/extensions/trailing-node/index.ts
-var import_state5 = require("@tiptap/pm/state");
-var import_react4 = require("@tiptap/react");
+var import_state3 = require("@tiptap/pm/state");
+var import_react3 = require("@tiptap/react");
 function nodeEqualsType({
   types,
   node
@@ -1327,7 +164,7 @@ function nodeEqualsType({
   }
   return node.type === types;
 }
-var TrailingNode = import_react4.Extension.create({
+var TrailingNode = import_react3.Extension.create({
   name: "trailingNode",
   addOptions() {
     return {
@@ -1336,10 +173,10 @@ var TrailingNode = import_react4.Extension.create({
     };
   },
   addProseMirrorPlugins() {
-    const plugin = new import_state5.PluginKey(this.name);
+    const plugin = new import_state3.PluginKey(this.name);
     const disabledNodes = Object.entries(this.editor.schema.nodes).map(([, value]) => value).filter((node) => this.options.notAfter.includes(node.name));
     return [
-      new import_state5.Plugin({
+      new import_state3.Plugin({
         key: plugin,
         appendTransaction: (_, __, state) => {
           const { doc, tr, schema } = state;
@@ -1373,7 +210,7 @@ var TrailingNode = import_react4.Extension.create({
 });
 
 // src/extensions/ui-state/index.ts
-var import_core3 = require("@tiptap/core");
+var import_core = require("@tiptap/core");
 var defaultUiState = {
   aiGenerationIsSelection: false,
   aiGenerationIsLoading: false,
@@ -1383,7 +220,7 @@ var defaultUiState = {
   lockDragHandle: false,
   isDragging: false
 };
-var UiState = import_core3.Extension.create({
+var UiState = import_core.Extension.create({
   name: "uiState",
   addStorage() {
     return {
@@ -1391,12 +228,12 @@ var UiState = import_core3.Extension.create({
     };
   },
   addCommands() {
-    const createBooleanSetter = (key2) => (value) => () => {
-      this.storage[key2] = value;
+    const createBooleanSetter = (key) => (value) => () => {
+      this.storage[key] = value;
       return true;
     };
-    const createToggle = (key2, value) => () => () => {
-      this.storage[key2] = value;
+    const createToggle = (key, value) => () => () => {
+      this.storage[key] = value;
       return true;
     };
     return {
@@ -1487,9 +324,10 @@ var useCreateEditor = ({
   editable = true,
   placeholder = "Write, type '/' for commands\u2026",
   onChange,
+  controlResolver,
   ...options
 }) => {
-  const editor = (0, import_react5.useEditor)({
+  const editor = (0, import_react4.useEditor)({
     editorProps: {
       attributes: {
         autocomplete: "off",
@@ -1500,44 +338,7 @@ var useCreateEditor = ({
     },
     immediatelyRender: false,
     shouldRerenderOnTransaction: false,
-    extensions: [
-      import_starter_kit.StarterKit.configure({
-        trailingNode: false,
-        // we use our custom trailing node extension
-        link: false
-        // we use our custom link extension
-      }),
-      import_extension_text_align.TextAlign.configure({ types: ["heading", "paragraph"] }),
-      import_extension_task_list.TaskList,
-      import_extension_task_item.TaskItem.configure({ nested: true }),
-      import_extension_highlight.Highlight.configure({ multicolor: true }),
-      import_extension_typography.Typography,
-      import_extension_superscript.Superscript,
-      import_extension_subscript.Subscript,
-      Selection,
-      TrailingNode,
-      Link.configure({ openOnClick: !editable }),
-      // disable link click when editing
-      import_extension_unique_id.UniqueID.configure({
-        types: [
-          "paragraph",
-          "bulletList",
-          "orderedList",
-          "taskList",
-          "heading",
-          "blockquote",
-          "codeBlock"
-        ]
-        //	filterTransaction: (transaction) => !isChangeOrigin(transaction),
-      }),
-      UiState,
-      TableKit,
-      import_extensions.Placeholder.configure({
-        placeholder,
-        emptyNodeClass: "is-empty with-slash"
-      }),
-      import_extension_controlref.ControlKit
-    ],
+    extensions: getExtensions({ editable, placeholder, controlResolver }),
     editable,
     onUpdate: ({ editor: editor2 }) => {
       onChange == null ? void 0 : onChange(editor2.getJSON());
@@ -1547,12 +348,70 @@ var useCreateEditor = ({
   });
   return editor;
 };
+function getExtensions({
+  editable,
+  placeholder,
+  controlResolver
+}) {
+  return [
+    import_starter_kit.StarterKit.configure({
+      trailingNode: false,
+      // we use our custom trailing node extension
+      link: false,
+      // we use our custom link extension
+      code: false,
+      // we use our own
+      codeBlock: false
+      // we use our own
+      // undoRedo should be dynamic based on collaboration, later.^
+    }),
+    import_extension_text_align.TextAlign.configure({ types: ["heading", "paragraph"] }),
+    import_extension_list.TaskList,
+    import_extension_list.TaskItem.configure({ nested: true }),
+    import_extension_invisible_characters.default.configure({
+      visible: false
+    }),
+    import_extension_table_of_contents.TableOfContents.configure({
+      getIndex: import_extension_table_of_contents.getHierarchicalIndexes
+    }),
+    Selection,
+    Link.configure({ openOnClick: !editable }),
+    // disable link click when editing
+    import_extension_text_style.TextStyleKit,
+    import_extension_highlight.Highlight.configure({ multicolor: true }),
+    import_extensions.CharacterCount,
+    import_extension_typography.Typography,
+    import_extension_superscript.Superscript,
+    import_extension_subscript.Subscript,
+    import_extension_code.CodeKit,
+    TrailingNode,
+    import_extension_unique_id.UniqueID.configure({
+      types: [
+        "paragraph",
+        "bulletList",
+        "orderedList",
+        "taskList",
+        "heading",
+        "blockquote",
+        "codeBlock"
+      ]
+      //	filterTransaction: (transaction) => !isChangeOrigin(transaction),
+    }),
+    UiState,
+    import_extension_table.TableKit,
+    import_extensions.Placeholder.configure({
+      placeholder,
+      emptyNodeClass: "is-empty with-slash"
+    }),
+    import_extension_controlref.ControlKit.configure({ resolver: controlResolver })
+  ];
+}
 
 // src/hooks/use-ui-editor-state.ts
-var import_react6 = require("@tiptap/react");
+var import_react5 = require("@tiptap/react");
 function useUiEditorState(editor) {
   var _a;
-  return (_a = (0, import_react6.useEditorState)({
+  return (_a = (0, import_react5.useEditorState)({
     editor,
     selector: ({ editor: editor2 }) => {
       if (!editor2) return defaultUiState;
@@ -1569,31 +428,32 @@ function useUiEditorState(editor) {
 }
 
 // src/ui/copy-anchor-link-button/use-scroll-to-hash.ts
+var import_editor_utils = require("@kopexa/editor-utils");
 var React2 = __toESM(require("react"));
 
 // src/hooks/use-floating-toolbar-visibility.ts
-var import_state6 = require("@tiptap/pm/state");
-var import_react7 = require("@tiptap/react");
+var import_state4 = require("@tiptap/pm/state");
+var import_react6 = require("@tiptap/react");
 var React = __toESM(require("react"));
 var HIDE_FLOATING_META = "hideFloatingToolbar";
 var selectNodeAndHideFloating = (editor, pos) => {
   if (!editor) return;
   const { state, view } = editor;
   view.dispatch(
-    state.tr.setSelection(import_state6.NodeSelection.create(state.doc, pos)).setMeta(HIDE_FLOATING_META, true)
+    state.tr.setSelection(import_state4.NodeSelection.create(state.doc, pos)).setMeta(HIDE_FLOATING_META, true)
   );
 };
 
 // src/hooks/use-tiptap-editor.ts
-var import_react8 = require("@tiptap/react");
-var import_react9 = require("react");
+var import_react7 = require("@tiptap/react");
+var import_react8 = require("react");
 function useTiptapEditor(providedEditor) {
-  const { editor: coreEditor } = (0, import_react8.useCurrentEditor)();
-  const mainEditor = (0, import_react9.useMemo)(
+  const { editor: coreEditor } = (0, import_react7.useCurrentEditor)();
+  const mainEditor = (0, import_react8.useMemo)(
     () => providedEditor || coreEditor,
     [providedEditor, coreEditor]
   );
-  const editorState = (0, import_react8.useEditorState)({
+  const editorState = (0, import_react7.useEditorState)({
     editor: mainEditor,
     selector(context) {
       if (!context.editor) {
@@ -1627,7 +487,7 @@ function useScrollToHash(config = {}) {
     (id) => {
       var _a, _b, _c;
       if (!editor) return false;
-      const attributeName = (_c = (_b = (_a = getEditorExtension(editor, "uniqueID")) == null ? void 0 : _a.options) == null ? void 0 : _b.attributeName) != null ? _c : "data-id";
+      const attributeName = (_c = (_b = (_a = (0, import_editor_utils.getEditorExtension)(editor, "uniqueID")) == null ? void 0 : _a.options) == null ? void 0 : _b.attributeName) != null ? _c : "data-id";
       let position = null;
       editor.state.doc.descendants((node, pos) => {
         var _a2;
@@ -1701,28 +561,29 @@ function useScrollToHash(config = {}) {
 
 // src/ui/slash-dropdown-menu/slash-dropdown-menu.tsx
 var import_button = require("@kopexa/button");
+var import_editor_utils4 = require("@kopexa/editor-utils");
 var import_separator = require("@kopexa/separator");
 var import_theme = require("@kopexa/theme");
 var React7 = __toESM(require("react"));
 
 // src/ui/suggestion-menu/suggestion-menu.tsx
-var import_react11 = require("@floating-ui/react");
-var import_state7 = require("@tiptap/pm/state");
+var import_react10 = require("@floating-ui/react");
+var import_state5 = require("@tiptap/pm/state");
 var import_suggestion = require("@tiptap/suggestion");
 var React5 = __toESM(require("react"));
 
 // src/hooks/use-floating-element.ts
-var import_react10 = require("@floating-ui/react");
+var import_react9 = require("@floating-ui/react");
 var React3 = __toESM(require("react"));
 function useFloatingElement(show, referencePos, zIndex, options) {
   const { dismissOptions, ...floatingOptions } = options || {};
-  const { refs, update, context, floatingStyles } = (0, import_react10.useFloating)({
+  const { refs, update, context, floatingStyles } = (0, import_react9.useFloating)({
     open: show,
     ...floatingOptions
   });
-  const { isMounted, styles } = (0, import_react10.useTransitionStyles)(context);
-  const dismiss = (0, import_react10.useDismiss)(context, dismissOptions);
-  const { getReferenceProps, getFloatingProps } = (0, import_react10.useInteractions)([dismiss]);
+  const { isMounted, styles } = (0, import_react9.useTransitionStyles)(context);
+  const dismiss = (0, import_react9.useDismiss)(context, dismissOptions);
+  const { getReferenceProps, getFloatingProps } = (0, import_react9.useInteractions)([dismiss]);
   React3.useEffect(() => {
     update();
   }, [referencePos, update]);
@@ -1956,13 +817,13 @@ var SuggestionMenu = ({
     {
       placement: "bottom-start",
       middleware: [
-        (0, import_react11.offset)(10),
-        (0, import_react11.flip)({
+        (0, import_react10.offset)(10),
+        (0, import_react10.flip)({
           mainAxis: true,
           crossAxis: false
         }),
-        (0, import_react11.shift)(),
-        (0, import_react11.size)({
+        (0, import_react10.shift)(),
+        (0, import_react10.size)({
           apply({ availableHeight, elements }) {
             if (elements.floating) {
               const maxHeightValue = maxHeight ? Math.min(maxHeight, availableHeight) : availableHeight;
@@ -2000,7 +861,7 @@ var SuggestionMenu = ({
       editor.unregisterPlugin(pluginKey);
     }
     const suggestion = (0, import_suggestion.Suggestion)({
-      pluginKey: pluginKey instanceof import_state7.PluginKey ? pluginKey : new import_state7.PluginKey(pluginKey),
+      pluginKey: pluginKey instanceof import_state5.PluginKey ? pluginKey : new import_state5.PluginKey(pluginKey),
       editor,
       command({ editor: editor2, range, props }) {
         var _a, _b;
@@ -2122,16 +983,18 @@ var SuggestionMenu = ({
 };
 
 // src/ui/slash-dropdown-menu/use-slash-dropdown-menu.ts
-var import_icons3 = require("@kopexa/icons");
+var import_editor_utils3 = require("@kopexa/editor-utils");
+var import_icons2 = require("@kopexa/icons");
 var React6 = __toESM(require("react"));
 
 // src/ui/table-button/use-table.ts
-var import_icons2 = require("@kopexa/icons");
-var import_react12 = require("@tiptap/react");
-var import_react13 = require("react");
+var import_editor_utils2 = require("@kopexa/editor-utils");
+var import_icons = require("@kopexa/icons");
+var import_react11 = require("@tiptap/react");
+var import_react12 = require("react");
 function canToggle(editor) {
   if (!editor || !editor.isEditable) return false;
-  if (!isNodeInSchema("table", editor) || isNodeTypeSelected(editor, ["image"])) {
+  if (!(0, import_editor_utils2.isNodeInSchema)("table", editor) || (0, import_editor_utils2.isNodeTypeSelected)(editor, ["image"])) {
     return false;
   }
   try {
@@ -2157,9 +1020,9 @@ function toggleTable(editor, config) {
 function shouldShowButton(props) {
   const { editor, hideWhenUnavailable } = props;
   if (!editor || !editor.isEditable) return false;
-  if (!isNodeInSchema("table", editor)) return false;
+  if (!(0, import_editor_utils2.isNodeInSchema)("table", editor)) return false;
   if (hideWhenUnavailable) {
-    if ((0, import_react12.isNodeSelection)(editor.state.selection) || !canToggle) {
+    if ((0, import_react11.isNodeSelection)(editor.state.selection) || !canToggle) {
       return false;
     }
   }
@@ -2172,10 +1035,10 @@ function useTableBlock(config) {
     onToggled
   } = config || {};
   const { editor } = useTiptapEditor(providedEditor);
-  const [isVisible, setIsVisible] = (0, import_react13.useState)(true);
+  const [isVisible, setIsVisible] = (0, import_react12.useState)(true);
   const canToggleState = canToggle(editor);
   const isActive = (editor == null ? void 0 : editor.isActive("table")) || false;
-  (0, import_react13.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setIsVisible(shouldShowButton({ editor, hideWhenUnavailable }));
@@ -2186,7 +1049,7 @@ function useTableBlock(config) {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
   }, [editor, hideWhenUnavailable]);
-  const handleToggle = (0, import_react13.useCallback)(() => {
+  const handleToggle = (0, import_react12.useCallback)(() => {
     if (!editor) return false;
     const success = toggleTable(editor);
     if (success) {
@@ -2201,7 +1064,7 @@ function useTableBlock(config) {
     canToggle: canToggleState,
     label: "Table",
     // shortcutKeys: CODE_BLOCK_SHORTCUT_KEY,
-    Icon: import_icons2.TableIcon
+    Icon: import_icons.TableIcon
   };
 }
 
@@ -2212,14 +1075,14 @@ var texts = {
     title: "Continue Writing",
     subtext: "Continue writing from the current position",
     keywords: ["continue", "write", "continue writing", "ai"],
-    badge: import_icons3.AiSparklesIcon,
+    badge: import_icons2.AiSparklesIcon,
     group: "AI"
   },
   ai_ask_button: {
     title: "Ask AI",
     subtext: "Ask AI to generate content",
     keywords: ["ai", "ask", "generate"],
-    badge: import_icons3.AiSparklesIcon,
+    badge: import_icons2.AiSparklesIcon,
     group: "AI"
   },
   // Style
@@ -2227,63 +1090,63 @@ var texts = {
     title: "Text",
     subtext: "Regular text paragraph",
     keywords: ["p", "paragraph", "text"],
-    badge: import_icons3.TypeIcon,
+    badge: import_icons2.TypeIcon,
     group: "Style"
   },
   heading_1: {
     title: "Heading 1",
     subtext: "Top-level heading",
     keywords: ["h", "heading1", "h1"],
-    badge: import_icons3.HeadingOneIcon,
+    badge: import_icons2.HeadingOneIcon,
     group: "Style"
   },
   heading_2: {
     title: "Heading 2",
     subtext: "Key section heading",
     keywords: ["h2", "heading2", "subheading"],
-    badge: import_icons3.HeadingTwoIcon,
+    badge: import_icons2.HeadingTwoIcon,
     group: "Style"
   },
   heading_3: {
     title: "Heading 3",
     subtext: "Subsection and group heading",
     keywords: ["h3", "heading3", "subheading"],
-    badge: import_icons3.HeadingThreeIcon,
+    badge: import_icons2.HeadingThreeIcon,
     group: "Style"
   },
   bullet_list: {
     title: "Bullet List",
     subtext: "List with unordered items",
     keywords: ["ul", "li", "list", "bulletlist", "bullet list"],
-    badge: import_icons3.ListIcon,
+    badge: import_icons2.ListIcon,
     group: "Style"
   },
   ordered_list: {
     title: "Numbered List",
     subtext: "List with ordered items",
     keywords: ["ol", "li", "list", "numberedlist", "numbered list"],
-    badge: import_icons3.ListOrderedIcon,
+    badge: import_icons2.ListOrderedIcon,
     group: "Style"
   },
   task_list: {
     title: "To-do list",
     subtext: "List with tasks",
     keywords: ["tasklist", "task list", "todo", "checklist"],
-    badge: import_icons3.ListTodoIcon,
+    badge: import_icons2.ListTodoIcon,
     group: "Style"
   },
   quote: {
     title: "Blockquote",
     subtext: "Blockquote block",
     keywords: ["quote", "blockquote"],
-    badge: import_icons3.BlockquoteIcon,
+    badge: import_icons2.BlockquoteIcon,
     group: "Style"
   },
   code_block: {
     title: "Code Block",
     subtext: "Code block with syntax highlighting",
     keywords: ["code", "pre"],
-    badge: import_icons3.CodeBlockIcon,
+    badge: import_icons2.CodeBlockIcon,
     group: "Style"
   },
   // Insert
@@ -2305,21 +1168,21 @@ var texts = {
     title: "Control",
     subtext: "Insert a control block",
     keywords: ["control"],
-    badge: import_icons3.ControlsIcon,
+    badge: import_icons2.ControlsIcon,
     group: "Insert"
   },
   divider: {
     title: "Separator",
     subtext: "Horizontal line to separate content",
     keywords: ["hr", "horizontalRule", "line", "separator"],
-    badge: import_icons3.MinusIcon,
+    badge: import_icons2.MinusIcon,
     group: "Insert"
   },
   table: {
     title: "Table",
     subtext: "Insert a table",
     keywords: ["table", "grid", "spreadsheet"],
-    badge: import_icons3.TableIcon,
+    badge: import_icons2.TableIcon,
     group: "Insert"
   },
   // Upload
@@ -2335,7 +1198,7 @@ var texts = {
       "media",
       "url"
     ],
-    badge: import_icons3.ImageIcon,
+    badge: import_icons2.ImageIcon,
     group: "Upload"
   }
 };
@@ -2344,8 +1207,8 @@ var getItemImplementations = () => {
     // AI
     continue_writing: {
       check: (editor) => {
-        const { hasContent } = hasContentAbove(editor);
-        const extensionsReady = isExtensionAvailable(editor, [
+        const { hasContent } = (0, import_editor_utils3.hasContentAbove)(editor);
+        const extensionsReady = (0, import_editor_utils3.isExtensionAvailable)(editor, [
           "ai",
           "aiAdvanced"
         ]);
@@ -2353,14 +1216,14 @@ var getItemImplementations = () => {
       },
       action: ({ editor }) => {
         const editorChain = editor.chain().focus();
-        const nodeSelectionPosition = findSelectionPosition({ editor });
+        const nodeSelectionPosition = (0, import_editor_utils3.findSelectionPosition)({ editor });
         if (nodeSelectionPosition !== null) {
           editorChain.setNodeSelection(nodeSelectionPosition);
         }
         editorChain.run();
         editor.chain().focus().aiGenerationShow().run();
         requestAnimationFrame(() => {
-          const { hasContent, content } = hasContentAbove(editor);
+          const { hasContent, content } = (0, import_editor_utils3.hasContentAbove)(editor);
           const snippet = content.length > 500 ? `...${content.slice(-500)}` : content;
           const prompt = hasContent ? `Context: ${snippet}
 
@@ -2374,10 +1237,10 @@ Continue writing from where the text above ends. Write ONLY ONE SENTENCE. DONT R
       }
     },
     ai_ask_button: {
-      check: (editor) => isExtensionAvailable(editor, ["ai", "aiAdvanced"]),
+      check: (editor) => (0, import_editor_utils3.isExtensionAvailable)(editor, ["ai", "aiAdvanced"]),
       action: ({ editor }) => {
         const editorChain = editor.chain().focus();
-        const nodeSelectionPosition = findSelectionPosition({ editor });
+        const nodeSelectionPosition = (0, import_editor_utils3.findSelectionPosition)({ editor });
         if (nodeSelectionPosition !== null) {
           editorChain.setNodeSelection(nodeSelectionPosition);
         }
@@ -2387,55 +1250,55 @@ Continue writing from where the text above ends. Write ONLY ONE SENTENCE. DONT R
     },
     // Style
     text: {
-      check: (editor) => isNodeInSchema("paragraph", editor),
+      check: (editor) => (0, import_editor_utils3.isNodeInSchema)("paragraph", editor),
       action: ({ editor }) => {
         editor.chain().focus().setParagraph().run();
       }
     },
     heading_1: {
-      check: (editor) => isNodeInSchema("heading", editor),
+      check: (editor) => (0, import_editor_utils3.isNodeInSchema)("heading", editor),
       action: ({ editor }) => {
         editor.chain().focus().toggleHeading({ level: 1 }).run();
       }
     },
     heading_2: {
-      check: (editor) => isNodeInSchema("heading", editor),
+      check: (editor) => (0, import_editor_utils3.isNodeInSchema)("heading", editor),
       action: ({ editor }) => {
         editor.chain().focus().toggleHeading({ level: 2 }).run();
       }
     },
     heading_3: {
-      check: (editor) => isNodeInSchema("heading", editor),
+      check: (editor) => (0, import_editor_utils3.isNodeInSchema)("heading", editor),
       action: ({ editor }) => {
         editor.chain().focus().toggleHeading({ level: 3 }).run();
       }
     },
     bullet_list: {
-      check: (editor) => isNodeInSchema("bulletList", editor),
+      check: (editor) => (0, import_editor_utils3.isNodeInSchema)("bulletList", editor),
       action: ({ editor }) => {
         editor.chain().focus().toggleBulletList().run();
       }
     },
     ordered_list: {
-      check: (editor) => isNodeInSchema("orderedList", editor),
+      check: (editor) => (0, import_editor_utils3.isNodeInSchema)("orderedList", editor),
       action: ({ editor }) => {
         editor.chain().focus().toggleOrderedList().run();
       }
     },
     task_list: {
-      check: (editor) => isNodeInSchema("taskList", editor),
+      check: (editor) => (0, import_editor_utils3.isNodeInSchema)("taskList", editor),
       action: ({ editor }) => {
         editor.chain().focus().toggleTaskList().run();
       }
     },
     quote: {
-      check: (editor) => isNodeInSchema("blockquote", editor),
+      check: (editor) => (0, import_editor_utils3.isNodeInSchema)("blockquote", editor),
       action: ({ editor }) => {
         editor.chain().focus().toggleBlockquote().run();
       }
     },
     code_block: {
-      check: (editor) => isNodeInSchema("codeBlock", editor),
+      check: (editor) => (0, import_editor_utils3.isNodeInSchema)("codeBlock", editor),
       action: ({ editor }) => {
         editor.chain().focus().toggleNode("codeBlock", "paragraph").run();
       }
@@ -2452,21 +1315,20 @@ Continue writing from where the text above ends. Write ONLY ONE SENTENCE. DONT R
     //   action: ({ editor }: { editor: Editor }) => addEmojiTrigger(editor),
     // },
     divider: {
-      check: (editor) => isNodeInSchema("horizontalRule", editor),
+      check: (editor) => (0, import_editor_utils3.isNodeInSchema)("horizontalRule", editor),
       action: ({ editor }) => {
         editor.chain().focus().setHorizontalRule().run();
       }
     },
     table: {
-      check: (editor) => isNodeInSchema("table", editor),
+      check: (editor) => (0, import_editor_utils3.isNodeInSchema)("table", editor),
       action: ({ editor }) => toggleTable(editor, { rows: 3, cols: 3, withHeaderRow: true })
     },
     control: {
-      check: (editor) => isNodeInSchema("controlRef", editor),
+      check: (editor) => (0, import_editor_utils3.isNodeInSchema)("controlBlock", editor),
       action: ({ editor }) => {
-        console.log("hoho");
         try {
-          return editor.chain().focus().insertControlRef().run();
+          return editor.chain().focus().insertControlBlock().run();
         } catch (e) {
           console.error(e);
         }
@@ -2474,7 +1336,7 @@ Continue writing from where the text above ends. Write ONLY ONE SENTENCE. DONT R
     },
     // Upload
     image: {
-      check: (editor) => isNodeInSchema("image", editor),
+      check: (editor) => (0, import_editor_utils3.isNodeInSchema)("image", editor),
       action: ({ editor }) => {
         editor.chain().focus().insertContent({
           type: "imageUpload"
@@ -2565,7 +1427,7 @@ var Item = (props) => {
       '[data-selector="tiptap-slash-dropdown-menu"]'
     );
     if (!itemRef.current || !isSelected || !selector) return;
-    const overflow = getElementOverflowPosition(itemRef.current, selector);
+    const overflow = (0, import_editor_utils4.getElementOverflowPosition)(itemRef.current, selector);
     if (overflow === "top") {
       itemRef.current.scrollIntoView(true);
     } else if (overflow === "bottom") {
@@ -2683,11 +1545,11 @@ var List = ({
 };
 
 // src/presets/basic/editor-header.tsx
-var import_icons18 = require("@kopexa/icons");
+var import_icons17 = require("@kopexa/icons");
 var import_popover3 = require("@kopexa/popover");
 var import_toolbar9 = require("@kopexa/toolbar");
 var import_use_is_mobile2 = require("@kopexa/use-is-mobile");
-var import_react31 = require("react");
+var import_react30 = require("react");
 
 // src/hooks/use-cursor-visibility.ts
 var React9 = __toESM(require("react"));
@@ -2796,14 +1658,15 @@ var import_toolbar = require("@kopexa/toolbar");
 var React11 = __toESM(require("react"));
 
 // src/ui/blockquote-button/use-blockquote.ts
-var import_icons4 = require("@kopexa/icons");
-var import_state8 = require("@tiptap/pm/state");
+var import_editor_utils5 = require("@kopexa/editor-utils");
+var import_icons3 = require("@kopexa/icons");
+var import_state6 = require("@tiptap/pm/state");
 var React10 = __toESM(require("react"));
 var BLOCKQUOTE_SHORTCUT_KEY = "mod+shift+b";
 function canToggleBlockquote(editor, turnInto = true) {
   var _a;
   if (!editor || !editor.isEditable) return false;
-  if (!isNodeInSchema("blockquote", editor) || isNodeTypeSelected(editor, ["image"]))
+  if (!(0, import_editor_utils5.isNodeInSchema)("blockquote", editor) || (0, import_editor_utils5.isNodeTypeSelected)(editor, ["image"]))
     return false;
   if (!turnInto) {
     return editor.can().toggleWrap("blockquote");
@@ -2812,12 +1675,12 @@ function canToggleBlockquote(editor, turnInto = true) {
     const view = editor.view;
     const state = view.state;
     const selection = state.selection;
-    if (selection.empty || selection instanceof import_state8.TextSelection) {
-      const pos = (_a = findNodePosition({
+    if (selection.empty || selection instanceof import_state6.TextSelection) {
+      const pos = (_a = (0, import_editor_utils5.findNodePosition)({
         editor,
         node: state.selection.$anchor.node(1)
       })) == null ? void 0 : _a.pos;
-      if (!isValidPosition(pos)) return false;
+      if (!(0, import_editor_utils5.isValidPosition)(pos)) return false;
     }
     return true;
   } catch {
@@ -2832,19 +1695,19 @@ function toggleBlockquote(editor) {
     const view = editor.view;
     let state = view.state;
     let tr = state.tr;
-    if (state.selection.empty || state.selection instanceof import_state8.TextSelection) {
-      const pos = (_a = findNodePosition({
+    if (state.selection.empty || state.selection instanceof import_state6.TextSelection) {
+      const pos = (_a = (0, import_editor_utils5.findNodePosition)({
         editor,
         node: state.selection.$anchor.node(1)
       })) == null ? void 0 : _a.pos;
-      if (!isValidPosition(pos)) return false;
-      tr = tr.setSelection(import_state8.NodeSelection.create(state.doc, pos));
+      if (!(0, import_editor_utils5.isValidPosition)(pos)) return false;
+      tr = tr.setSelection(import_state6.NodeSelection.create(state.doc, pos));
       view.dispatch(tr);
       state = view.state;
     }
     const selection = state.selection;
     let chain = editor.chain().focus();
-    if (selection instanceof import_state8.NodeSelection) {
+    if (selection instanceof import_state6.NodeSelection) {
       const firstChild = (_b = selection.node.firstChild) == null ? void 0 : _b.firstChild;
       const lastChild = (_c = selection.node.lastChild) == null ? void 0 : _c.lastChild;
       const from = firstChild ? selection.from + firstChild.nodeSize : selection.from + 1;
@@ -2862,7 +1725,7 @@ function toggleBlockquote(editor) {
 function shouldShowButton2(props) {
   const { editor, hideWhenUnavailable } = props;
   if (!editor || !editor.isEditable) return false;
-  if (!isNodeInSchema("blockquote", editor)) return false;
+  if (!(0, import_editor_utils5.isNodeInSchema)("blockquote", editor)) return false;
   if (hideWhenUnavailable && !editor.isActive("code")) {
     return canToggleBlockquote(editor);
   }
@@ -2904,7 +1767,7 @@ function useBlockquote(config) {
     canToggle: canToggle3,
     label: "Blockquote",
     shortcutKeys: BLOCKQUOTE_SHORTCUT_KEY,
-    Icon: import_icons4.BlockquoteIcon
+    Icon: import_icons3.BlockquoteIcon
   };
 }
 
@@ -2971,19 +1834,20 @@ var BlockquoteButton = ({
 };
 
 // src/ui/codeblock-button/code-block-button.tsx
-var import_icons6 = require("@kopexa/icons");
+var import_icons5 = require("@kopexa/icons");
 var import_toolbar2 = require("@kopexa/toolbar");
-var import_react14 = require("react");
+var import_react13 = require("react");
 
 // src/ui/codeblock-button/use-code-block.ts
-var import_icons5 = require("@kopexa/icons");
-var import_state9 = require("@tiptap/pm/state");
+var import_editor_utils6 = require("@kopexa/editor-utils");
+var import_icons4 = require("@kopexa/icons");
+var import_state7 = require("@tiptap/pm/state");
 var React12 = __toESM(require("react"));
 var CODE_BLOCK_SHORTCUT_KEY = "mod+alt+c";
 function canToggle2(editor, turnInto = true) {
   var _a;
   if (!editor || !editor.isEditable) return false;
-  if (!isNodeInSchema("codeBlock", editor) || isNodeTypeSelected(editor, ["image"]))
+  if (!(0, import_editor_utils6.isNodeInSchema)("codeBlock", editor) || (0, import_editor_utils6.isNodeTypeSelected)(editor, ["image"]))
     return false;
   if (!turnInto) {
     return editor.can().toggleNode("codeBlock", "paragraph");
@@ -2992,12 +1856,12 @@ function canToggle2(editor, turnInto = true) {
     const view = editor.view;
     const state = view.state;
     const selection = state.selection;
-    if (selection.empty || selection instanceof import_state9.TextSelection) {
-      const pos = (_a = findNodePosition({
+    if (selection.empty || selection instanceof import_state7.TextSelection) {
+      const pos = (_a = (0, import_editor_utils6.findNodePosition)({
         editor,
         node: state.selection.$anchor.node(1)
       })) == null ? void 0 : _a.pos;
-      if (!isValidPosition(pos)) return false;
+      if (!(0, import_editor_utils6.isValidPosition)(pos)) return false;
     }
     return true;
   } catch {
@@ -3012,19 +1876,19 @@ function toggleCodeBlock(editor) {
     const view = editor.view;
     let state = view.state;
     let tr = state.tr;
-    if (state.selection.empty || state.selection instanceof import_state9.TextSelection) {
-      const pos = (_a = findNodePosition({
+    if (state.selection.empty || state.selection instanceof import_state7.TextSelection) {
+      const pos = (_a = (0, import_editor_utils6.findNodePosition)({
         editor,
         node: state.selection.$anchor.node(1)
       })) == null ? void 0 : _a.pos;
-      if (!isValidPosition(pos)) return false;
-      tr = tr.setSelection(import_state9.NodeSelection.create(state.doc, pos));
+      if (!(0, import_editor_utils6.isValidPosition)(pos)) return false;
+      tr = tr.setSelection(import_state7.NodeSelection.create(state.doc, pos));
       view.dispatch(tr);
       state = view.state;
     }
     const selection = state.selection;
     let chain = editor.chain().focus();
-    if (selection instanceof import_state9.NodeSelection) {
+    if (selection instanceof import_state7.NodeSelection) {
       const firstChild = (_b = selection.node.firstChild) == null ? void 0 : _b.firstChild;
       const lastChild = (_c = selection.node.lastChild) == null ? void 0 : _c.lastChild;
       const from = firstChild ? selection.from + firstChild.nodeSize : selection.from + 1;
@@ -3042,7 +1906,7 @@ function toggleCodeBlock(editor) {
 function shouldShowButton3(props) {
   const { editor, hideWhenUnavailable } = props;
   if (!editor || !editor.isEditable) return false;
-  if (!isNodeInSchema("codeBlock", editor)) return false;
+  if (!(0, import_editor_utils6.isNodeInSchema)("codeBlock", editor)) return false;
   if (hideWhenUnavailable && !editor.isActive("code")) {
     return canToggle2(editor);
   }
@@ -3084,7 +1948,7 @@ function useCodeBlock(config) {
     canToggle: canToggleState,
     label: "Code Block",
     shortcutKeys: CODE_BLOCK_SHORTCUT_KEY,
-    Icon: import_icons5.CodeblockIcon
+    Icon: import_icons4.CodeblockIcon
   };
 }
 
@@ -3101,20 +1965,12 @@ var CodeBlockButton = ({
   ...buttonProps
 }) => {
   const { editor } = useTiptapEditor(providedEditor);
-  const {
-    isVisible,
-    canToggle: canToggle3,
-    isActive,
-    handleToggle,
-    label,
-    shortcutKeys,
-    Icon
-  } = useCodeBlock({
+  const { isVisible, canToggle: canToggle3, isActive, handleToggle, label, shortcutKeys } = useCodeBlock({
     editor,
     hideWhenUnavailable,
     onToggled
   });
-  const handleClick = (0, import_react14.useCallback)(
+  const handleClick = (0, import_react13.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -3142,25 +1998,26 @@ var CodeBlockButton = ({
       onClick: handleClick,
       isIconOnly: true,
       ...buttonProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons6.CodeblockIcon, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons5.CodeblockIcon, {})
     }
   );
 };
 
 // src/ui/color-highlight-popover/color-highlight-popover.tsx
 var import_button2 = require("@kopexa/button");
-var import_icons8 = require("@kopexa/icons");
+var import_icons7 = require("@kopexa/icons");
 var import_popover = require("@kopexa/popover");
 var import_toolbar4 = require("@kopexa/toolbar");
-var import_react16 = require("react");
+var import_react15 = require("react");
 
 // src/ui/color-highlight-button/color-highlight-button.tsx
 var import_theme2 = require("@kopexa/theme");
 var import_toolbar3 = require("@kopexa/toolbar");
-var import_react15 = require("react");
+var import_react14 = require("react");
 
 // src/ui/color-highlight-button/use-color-highlight.ts
-var import_icons7 = require("@kopexa/icons");
+var import_editor_utils7 = require("@kopexa/editor-utils");
+var import_icons6 = require("@kopexa/icons");
 var import_use_is_mobile = require("@kopexa/use-is-mobile");
 var React13 = __toESM(require("react"));
 var import_react_hotkeys_hook = require("react-hotkeys-hook");
@@ -3225,7 +2082,7 @@ function pickHighlightColorsByValue(values) {
 }
 function canColorHighlight(editor) {
   if (!editor || !editor.isEditable) return false;
-  if (!isMarkInSchema("highlight", editor) || isNodeTypeSelected(editor, ["image"]))
+  if (!(0, import_editor_utils7.isMarkInSchema)("highlight", editor) || (0, import_editor_utils7.isNodeTypeSelected)(editor, ["image"]))
     return false;
   return editor.can().setMark("highlight");
 }
@@ -3241,7 +2098,7 @@ function removeHighlight(editor) {
 function shouldShowButton4(props) {
   const { editor, hideWhenUnavailable } = props;
   if (!editor || !editor.isEditable) return false;
-  if (!isMarkInSchema("highlight", editor)) return false;
+  if (!(0, import_editor_utils7.isMarkInSchema)("highlight", editor)) return false;
   if (hideWhenUnavailable && !editor.isActive("code")) {
     return canColorHighlight(editor);
   }
@@ -3317,7 +2174,7 @@ function useColorHighlight(config) {
     canColorHighlight: canColorHighlightState,
     label: label || `Highlight`,
     shortcutKeys: COLOR_HIGHLIGHT_SHORTCUT_KEY,
-    Icon: import_icons7.HighlighterIcon
+    Icon: import_icons6.HighlighterIcon
   };
 }
 
@@ -3351,7 +2208,7 @@ var ColorHighlightButton = ({
     hideWhenUnavailable,
     onApplied
   });
-  const handleClick = (0, import_react15.useCallback)(
+  const handleClick = (0, import_react14.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -3359,7 +2216,7 @@ var ColorHighlightButton = ({
     },
     [handleColorHighlight, onClick]
   );
-  const buttonStyle = (0, import_react15.useMemo)(
+  const buttonStyle = (0, import_react14.useMemo)(
     () => ({
       ...style,
       "--highlight-color": highlightColor
@@ -3428,7 +2285,7 @@ var ColorHighlightPopoverButton = ({
     tooltip: "Highlight",
     isIconOnly: !children,
     ...props,
-    children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons8.HighlighterIcon, {})
+    children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons7.HighlighterIcon, {})
   }
 );
 function ColorHighlightPopoverContent({
@@ -3442,8 +2299,8 @@ function ColorHighlightPopoverContent({
   ])
 }) {
   const { handleRemoveHighlight } = useColorHighlight({ editor });
-  const containerRef = (0, import_react16.useRef)(null);
-  const menuItems = (0, import_react16.useMemo)(
+  const containerRef = (0, import_react15.useRef)(null);
+  const menuItems = (0, import_react15.useMemo)(
     () => [...colors, { label: "Remove highlight", value: "none" }],
     [colors]
   );
@@ -3492,7 +2349,7 @@ function ColorHighlightPopoverContent({
         variant: "ghost",
         color: "default",
         "data-highlighted": selectedIndex === colors.length,
-        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons8.BanIcon, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons7.BanIcon, {})
       }
     ) })
   ] });
@@ -3511,8 +2368,8 @@ function ColorHighlightPopover({
   ...props
 }) {
   const { editor } = useTiptapEditor(providedEditor);
-  const [isOpen, setIsOpen] = (0, import_react16.useState)(false);
-  const { isVisible, canColorHighlight: canColorHighlight2, isActive, label, Icon } = useColorHighlight({
+  const [isOpen, setIsOpen] = (0, import_react15.useState)(false);
+  const { isVisible, canColorHighlight: canColorHighlight2, isActive, label } = useColorHighlight({
     editor,
     hideWhenUnavailable,
     onApplied
@@ -3543,17 +2400,19 @@ function ColorHighlightPopover({
 // src/ui/heading-dropdown-menu/index.tsx
 var import_button4 = require("@kopexa/button");
 var import_dropdown_menu = require("@kopexa/dropdown-menu");
-var import_icons10 = require("@kopexa/icons");
-var import_react18 = require("@tiptap/react");
+var import_editor_utils9 = require("@kopexa/editor-utils");
+var import_icons9 = require("@kopexa/icons");
+var import_react17 = require("@tiptap/react");
 var React15 = __toESM(require("react"));
 
 // src/ui/heading-button/index.tsx
 var import_button3 = require("@kopexa/button");
-var import_icons9 = require("@kopexa/icons");
+var import_editor_utils8 = require("@kopexa/editor-utils");
+var import_icons8 = require("@kopexa/icons");
 var React14 = __toESM(require("react"));
 
 // src/ui/heading-button/utils.ts
-var import_react17 = require("@tiptap/react");
+var import_react16 = require("@tiptap/react");
 var headingShortcutKeys = {
   1: "Ctrl-Alt-1",
   2: "Ctrl-Alt-2",
@@ -3594,7 +2453,7 @@ function shouldShowHeadingButton(params) {
     return false;
   }
   if (hideWhenUnavailable) {
-    if ((0, import_react17.isNodeSelection)(editor.state.selection)) {
+    if ((0, import_react16.isNodeSelection)(editor.state.selection)) {
       return false;
     }
   }
@@ -3607,15 +2466,15 @@ function getFormattedHeadingName(level) {
 // src/ui/heading-button/index.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var headingIcons = {
-  1: import_icons9.HeadingOneIcon,
-  2: import_icons9.HeadingTwoIcon,
-  3: import_icons9.HeadingThreeIcon,
-  4: import_icons9.HeadingFourIcon,
-  5: import_icons9.HeadingFiveIcon,
-  6: import_icons9.HeadingSixIcon
+  1: import_icons8.HeadingOneIcon,
+  2: import_icons8.HeadingTwoIcon,
+  3: import_icons8.HeadingThreeIcon,
+  4: import_icons8.HeadingFourIcon,
+  5: import_icons8.HeadingFiveIcon,
+  6: import_icons8.HeadingSixIcon
 };
 function useHeadingState(editor, level, disabled = false) {
-  const headingInSchema = isNodeInSchema("heading", editor);
+  const headingInSchema = (0, import_editor_utils8.isNodeInSchema)("heading", editor);
   const isDisabled = isHeadingButtonDisabled(editor, level, disabled);
   const isActive = isHeadingActive(editor, level);
   const Icon = headingIcons[level];
@@ -3707,7 +2566,7 @@ function HeadingDropdownMenu({
   var _a;
   const [isOpen, setIsOpen] = React15.useState(false);
   const { editor } = useTiptapEditor(providedEditor);
-  const headingInSchema = isNodeInSchema("heading", editor);
+  const headingInSchema = (0, import_editor_utils9.isNodeInSchema)("heading", editor);
   const handleOnOpenChange = React15.useCallback(
     (open) => {
       setIsOpen(open);
@@ -3716,11 +2575,11 @@ function HeadingDropdownMenu({
     [onOpenChange]
   );
   const getActiveIcon = React15.useCallback(() => {
-    if (!editor) return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons10.HeadingIcon, {});
+    if (!editor) return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons9.HeadingIcon, {});
     const activeLevel = levels.find(
       (level) => editor.isActive("heading", { level })
     );
-    if (!activeLevel) return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons10.HeadingIcon, {});
+    if (!activeLevel) return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons9.HeadingIcon, {});
     const ActiveIcon = headingIcons[activeLevel];
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ActiveIcon, {});
   }, [editor, levels]);
@@ -3737,7 +2596,7 @@ function HeadingDropdownMenu({
       return false;
     }
     if (hideWhenUnavailable) {
-      if ((0, import_react18.isNodeSelection)(editor.state.selection) || !canToggleAnyHeading()) {
+      if ((0, import_react17.isNodeSelection)(editor.state.selection) || !canToggleAnyHeading()) {
         return false;
       }
     }
@@ -3760,7 +2619,7 @@ function HeadingDropdownMenu({
         "aria-label": "Format text as heading",
         "aria-pressed": isAnyHeadingActive,
         tooltip: "Heading",
-        endContent: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons10.ChevronDownIcon, {}),
+        endContent: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons9.ChevronDownIcon, {}),
         ...props,
         children: getActiveIcon()
       }
@@ -3781,16 +2640,66 @@ function HeadingDropdownMenu({
 
 // src/ui/link-popover/link-popover.tsx
 var import_button5 = require("@kopexa/button");
-var import_icons12 = require("@kopexa/icons");
+var import_icons11 = require("@kopexa/icons");
 var import_input = require("@kopexa/input");
 var import_popover2 = require("@kopexa/popover");
 var import_separator2 = require("@kopexa/separator");
 var import_toolbar5 = require("@kopexa/toolbar");
-var import_react19 = require("react");
+var import_react18 = require("react");
 
 // src/ui/link-popover/use-link-popover.ts
-var import_icons11 = require("@kopexa/icons");
+var import_editor_utils10 = require("@kopexa/editor-utils");
+var import_icons10 = require("@kopexa/icons");
 var React16 = __toESM(require("react"));
+
+// src/utils/index.ts
+var MAX_FILE_SIZE = 5 * 1024 * 1024;
+var ATTR_WHITESPACE = (
+  // eslint-disable-next-line no-control-regex
+  // biome-ignore lint/suspicious/noControlCharactersInRegex: we can do this yay
+  /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g
+);
+function isAllowedUri(uri, protocols) {
+  const allowedProtocols = [
+    "http",
+    "https",
+    "ftp",
+    "ftps",
+    "mailto",
+    "tel",
+    "callto",
+    "sms",
+    "cid",
+    "xmpp"
+  ];
+  if (protocols) {
+    for (const protocol of protocols) {
+      const nextProtocol = typeof protocol === "string" ? protocol : protocol.scheme;
+      if (nextProtocol) {
+        allowedProtocols.push(nextProtocol);
+      }
+    }
+  }
+  return !uri || uri.replace(ATTR_WHITESPACE, "").match(
+    new RegExp(
+      // eslint-disable-next-line no-useless-escape
+      `^(?:(?:${allowedProtocols.join("|")}):|[^a-z]|[a-z0-9+.-]+(?:[^a-z+.-:]|$))`,
+      "i"
+    )
+  );
+}
+function sanitizeUrl(inputUrl, baseUrl, protocols) {
+  try {
+    const url = new URL(inputUrl, baseUrl);
+    if (isAllowedUri(url.href, protocols)) {
+      return url.href;
+    }
+  } catch {
+  }
+  return "#";
+}
+
+// src/ui/link-popover/use-link-popover.ts
 function canSetLink(editor) {
   if (!editor || !editor.isEditable) return false;
   return editor.can().setMark("link");
@@ -3801,7 +2710,7 @@ function isLinkActive(editor) {
 }
 function shouldShowLinkButton(props) {
   const { editor, hideWhenUnavailable } = props;
-  const linkInSchema = isMarkInSchema("link", editor);
+  const linkInSchema = (0, import_editor_utils10.isMarkInSchema)("link", editor);
   if (!linkInSchema || !editor) {
     return false;
   }
@@ -3914,7 +2823,7 @@ function useLinkPopover(config) {
     canSet,
     isActive,
     label: "Link",
-    Icon: import_icons11.LinkIcon,
+    Icon: import_icons10.LinkIcon,
     ...linkHandler
   };
 }
@@ -3934,7 +2843,7 @@ var LinkButton = ({ className, children, ...props }) => {
       title: "Link",
       isIconOnly: !children,
       ...props,
-      children: children || /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons12.LinkIcon, {})
+      children: children || /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons11.LinkIcon, {})
     }
   );
 };
@@ -3977,7 +2886,7 @@ var LinkMain = ({
           disabled: !url && !isActive,
           variant: "ghost",
           color: "default",
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons12.CornerDownLeftIcon, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons11.CornerDownLeftIcon, {})
         }
       )
     ] }),
@@ -3992,7 +2901,7 @@ var LinkMain = ({
           disabled: !url && !isActive,
           variant: "ghost",
           color: "default",
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons12.ExternalLinkIcon, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons11.ExternalLinkIcon, {})
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -4004,7 +2913,7 @@ var LinkMain = ({
           disabled: !url && !isActive,
           variant: "ghost",
           color: "default",
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons12.TrashIcon, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons11.TrashIcon, {})
         }
       )
     ] })
@@ -4021,7 +2930,7 @@ function LinkPopover({
   ...buttonProps
 }) {
   const { editor } = useTiptapEditor(providedEditor);
-  const [isOpen, setIsOpen] = (0, import_react19.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react18.useState)(false);
   const {
     isVisible,
     canSet,
@@ -4037,18 +2946,18 @@ function LinkPopover({
     hideWhenUnavailable,
     onSetLink
   });
-  const handleOnOpenChange = (0, import_react19.useCallback)(
+  const handleOnOpenChange = (0, import_react18.useCallback)(
     (nextIsOpen) => {
       setIsOpen(nextIsOpen);
       onOpenChange == null ? void 0 : onOpenChange(nextIsOpen);
     },
     [onOpenChange]
   );
-  const handleSetLink = (0, import_react19.useCallback)(() => {
+  const handleSetLink = (0, import_react18.useCallback)(() => {
     setLink();
     setIsOpen(false);
   }, [setLink]);
-  const handleClick = (0, import_react19.useCallback)(
+  const handleClick = (0, import_react18.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -4056,7 +2965,7 @@ function LinkPopover({
     },
     [onClick, isOpen]
   );
-  (0, import_react19.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (autoOpenOnLinkActive && isActive) {
       setIsOpen(true);
     }
@@ -4108,31 +3017,33 @@ LinkButton.displayName = "LinkButton";
 // src/ui/list-dropdown-menu/index.tsx
 var import_button7 = require("@kopexa/button");
 var import_dropdown_menu2 = require("@kopexa/dropdown-menu");
-var import_icons14 = require("@kopexa/icons");
-var import_react22 = require("@tiptap/react");
-var import_react23 = require("react");
+var import_editor_utils12 = require("@kopexa/editor-utils");
+var import_icons13 = require("@kopexa/icons");
+var import_react21 = require("@tiptap/react");
+var import_react22 = require("react");
 
 // src/ui/list-button/index.tsx
 var import_button6 = require("@kopexa/button");
-var import_icons13 = require("@kopexa/icons");
-var import_react20 = require("@tiptap/react");
-var import_react21 = require("react");
+var import_editor_utils11 = require("@kopexa/editor-utils");
+var import_icons12 = require("@kopexa/icons");
+var import_react19 = require("@tiptap/react");
+var import_react20 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var listOptions = [
   {
     label: "Bullet List",
     type: "bulletList",
-    icon: import_icons13.ListIcon
+    icon: import_icons12.ListIcon
   },
   {
     label: "Ordered List",
     type: "orderedList",
-    icon: import_icons13.ListOrderedIcon
+    icon: import_icons12.ListOrderedIcon
   },
   {
     label: "Task List",
     type: "taskList",
-    icon: import_icons13.ListTodoIcon
+    icon: import_icons12.ListTodoIcon
   }
 ];
 var listShortcutKeys = {
@@ -4191,14 +3102,14 @@ function shouldShowListButton(params) {
     return false;
   }
   if (hideWhenUnavailable) {
-    if ((0, import_react20.isNodeSelection)(editor.state.selection) || !canToggleList(editor, type)) {
+    if ((0, import_react19.isNodeSelection)(editor.state.selection) || !canToggleList(editor, type)) {
       return false;
     }
   }
   return true;
 }
 function useListState(editor, type) {
-  const listInSchema = isNodeInSchema(type, editor);
+  const listInSchema = (0, import_editor_utils11.isNodeInSchema)(type, editor);
   const listOption = getListOption(type);
   const isActive = isListActive(editor, type);
   const shortcutKey = listShortcutKeys[type];
@@ -4225,8 +3136,8 @@ var ListButton = ({
     editor,
     type
   );
-  const Icon = (listOption == null ? void 0 : listOption.icon) || import_icons13.ListIcon;
-  const handleClick = (0, import_react21.useCallback)(
+  const Icon = (listOption == null ? void 0 : listOption.icon) || import_icons12.ListIcon;
+  const handleClick = (0, import_react20.useCallback)(
     (e) => {
       onClick == null ? void 0 : onClick(e);
       if (!e.defaultPrevented && editor) {
@@ -4235,7 +3146,7 @@ var ListButton = ({
     },
     [onClick, editor, type]
   );
-  const show = (0, import_react21.useMemo)(() => {
+  const show = (0, import_react20.useMemo)(() => {
     return shouldShowListButton({
       editor,
       type,
@@ -4289,24 +3200,24 @@ function shouldShowListDropdown(params) {
     return false;
   }
   if (hideWhenUnavailable) {
-    if ((0, import_react22.isNodeSelection)(editor.state.selection) || !canToggleAny) {
+    if ((0, import_react21.isNodeSelection)(editor.state.selection) || !canToggleAny) {
       return false;
     }
   }
   return true;
 }
 function useListDropdownState(editor, availableTypes) {
-  const [isOpen, setIsOpen] = (0, import_react23.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react22.useState)(false);
   const listInSchema = availableTypes.some(
-    (type) => isNodeInSchema(type, editor)
+    (type) => (0, import_editor_utils12.isNodeInSchema)(type, editor)
   );
-  const filteredLists = (0, import_react23.useMemo)(
+  const filteredLists = (0, import_react22.useMemo)(
     () => getFilteredListOptions(availableTypes),
     [availableTypes]
   );
   const canToggleAny = canToggleAnyList(editor, availableTypes);
   const isAnyActive = isAnyListActive(editor, availableTypes);
-  const handleOpenChange = (0, import_react23.useCallback)(
+  const handleOpenChange = (0, import_react22.useCallback)(
     (open, callback) => {
       setIsOpen(open);
       callback == null ? void 0 : callback(open);
@@ -4324,11 +3235,11 @@ function useListDropdownState(editor, availableTypes) {
   };
 }
 function useActiveListIcon(editor, filteredLists) {
-  return (0, import_react23.useCallback)(() => {
+  return (0, import_react22.useCallback)(() => {
     const activeOption = filteredLists.find(
       (option) => isListActive(editor, option.type)
     );
-    return activeOption ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(activeOption.icon, {}) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons14.ListIcon, {});
+    return activeOption ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(activeOption.icon, {}) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons13.ListIcon, {});
   }, [editor, filteredLists]);
 }
 function ListDropdownMenu({
@@ -4348,7 +3259,7 @@ function ListDropdownMenu({
     handleOpenChange
   } = useListDropdownState(editor, types);
   const getActiveIcon = useActiveListIcon(editor, filteredLists);
-  const show = (0, import_react23.useMemo)(() => {
+  const show = (0, import_react22.useMemo)(() => {
     return shouldShowListDropdown({
       editor,
       listTypes: types,
@@ -4357,7 +3268,7 @@ function ListDropdownMenu({
       canToggleAny
     });
   }, [editor, types, hideWhenUnavailable, listInSchema, canToggleAny]);
-  const handleOnOpenChange = (0, import_react23.useCallback)(
+  const handleOnOpenChange = (0, import_react22.useCallback)(
     (open) => handleOpenChange(open, onOpenChange),
     [handleOpenChange, onOpenChange]
   );
@@ -4375,7 +3286,7 @@ function ListDropdownMenu({
         tabIndex: -1,
         "aria-label": "List options",
         tooltip: "List",
-        endContent: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons14.ChevronDownIcon, {}),
+        endContent: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons13.ChevronDownIcon, {}),
         ...props,
         children: getActiveIcon()
       }
@@ -4396,19 +3307,20 @@ function ListDropdownMenu({
 }
 
 // src/ui/mark-button/index.tsx
-var import_icons15 = require("@kopexa/icons");
+var import_editor_utils13 = require("@kopexa/editor-utils");
+var import_icons14 = require("@kopexa/icons");
 var import_toolbar6 = require("@kopexa/toolbar");
-var import_react24 = require("@tiptap/react");
-var import_react25 = require("react");
+var import_react23 = require("@tiptap/react");
+var import_react24 = require("react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var markIcons = {
-  bold: import_icons15.BoldIcon,
-  italic: import_icons15.ItalicIcon,
-  underline: import_icons15.UnderlineIcon,
-  strike: import_icons15.StrikeIcon,
-  code: import_icons15.CodeIcon,
-  superscript: import_icons15.SuperscriptIcon,
-  subscript: import_icons15.SubscriptIcon
+  bold: import_icons14.BoldIcon,
+  italic: import_icons14.ItalicIcon,
+  underline: import_icons14.UnderlineIcon,
+  strike: import_icons14.StrikeIcon,
+  code: import_icons14.CodeIcon,
+  superscript: import_icons14.SuperscriptIcon,
+  subscript: import_icons14.SubscriptIcon
 };
 var markShortcutKeys = {
   bold: "mod+b",
@@ -4421,7 +3333,7 @@ var markShortcutKeys = {
 };
 function canToggleMark(editor, type) {
   if (!editor || !editor.isEditable) return false;
-  if (!isMarkInSchema(type, editor) || isNodeTypeSelected(editor, ["image"]))
+  if (!(0, import_editor_utils13.isMarkInSchema)(type, editor) || (0, import_editor_utils13.isNodeTypeSelected)(editor, ["image"]))
     return false;
   return editor.can().toggleMark(type);
 }
@@ -4446,7 +3358,7 @@ function shouldShowMarkButton(params) {
     return false;
   }
   if (hideWhenUnavailable) {
-    if ((0, import_react24.isNodeSelection)(editor.state.selection) || !canToggleMark(editor, type)) {
+    if ((0, import_react23.isNodeSelection)(editor.state.selection) || !canToggleMark(editor, type)) {
       return false;
     }
   }
@@ -4456,7 +3368,7 @@ function getFormattedMarkName(type) {
   return type.charAt(0).toUpperCase() + type.slice(1);
 }
 function useMarkState(editor, type, disabled = false) {
-  const markInSchema = isMarkInSchema(type, editor);
+  const markInSchema = (0, import_editor_utils13.isMarkInSchema)(type, editor);
   const isDisabled = isMarkButtonDisabled(editor, type, disabled);
   const isActive = isMarkActive(editor, type);
   const Icon = markIcons[type];
@@ -4491,7 +3403,7 @@ var MarkButton = ({
     shortcutKey,
     formattedName
   } = useMarkState(editor, type, disabled);
-  const handleClick = (0, import_react25.useCallback)(
+  const handleClick = (0, import_react24.useCallback)(
     (e) => {
       onClick == null ? void 0 : onClick(e);
       if (!e.defaultPrevented && !isDisabled && editor) {
@@ -4500,7 +3412,7 @@ var MarkButton = ({
     },
     [onClick, isDisabled, editor, type]
   );
-  const show = (0, import_react25.useMemo)(() => {
+  const show = (0, import_react24.useMemo)(() => {
     return shouldShowMarkButton({
       editor,
       type,
@@ -4536,7 +3448,7 @@ var MarkButton = ({
 
 // src/ui/table-button/index.tsx
 var import_toolbar7 = require("@kopexa/toolbar");
-var import_react26 = require("react");
+var import_react25 = require("react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var TableButton = ({
   editor: providedEditor,
@@ -4561,7 +3473,7 @@ var TableButton = ({
     hideWhenUnavailable,
     onToggled
   });
-  const handleClick = (0, import_react26.useCallback)(
+  const handleClick = (0, import_react25.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -4584,7 +3496,7 @@ var TableButton = ({
       tabIndex: -1,
       "aria-label": label,
       "aria-pressed": isActive,
-      tooltip: label,
+      title: label,
       onClick: handleClick,
       isIconOnly: !text && !children,
       ...buttonProps,
@@ -4598,11 +3510,12 @@ var TableButton = ({
 
 // src/ui/text-align-button/text-align-button.tsx
 var import_button8 = require("@kopexa/button");
-var import_react28 = require("react");
+var import_react27 = require("react");
 
 // src/ui/text-align-button/use-text-align.ts
-var import_icons16 = require("@kopexa/icons");
-var import_react27 = require("react");
+var import_editor_utils14 = require("@kopexa/editor-utils");
+var import_icons15 = require("@kopexa/icons");
+var import_react26 = require("react");
 var TEXT_ALIGN_SHORTCUT_KEYS = {
   left: "mod+shift+l",
   center: "mod+shift+e",
@@ -4610,10 +3523,10 @@ var TEXT_ALIGN_SHORTCUT_KEYS = {
   justify: "mod+shift+j"
 };
 var textAlignIcons = {
-  left: import_icons16.AlignLeftIcon,
-  center: import_icons16.AlignCenterIcon,
-  right: import_icons16.AlignRightIcon,
-  justify: import_icons16.AlignJustifyIcon
+  left: import_icons15.AlignLeftIcon,
+  center: import_icons15.AlignCenterIcon,
+  right: import_icons15.AlignRightIcon,
+  justify: import_icons15.AlignJustifyIcon
 };
 var textAlignLabels = {
   left: "Align left",
@@ -4623,7 +3536,7 @@ var textAlignLabels = {
 };
 function canSetTextAlign(editor, align) {
   if (!editor || !editor.isEditable) return false;
-  if (!isExtensionAvailable(editor, "textAlign") || isNodeTypeSelected(editor, ["image"]))
+  if (!(0, import_editor_utils14.isExtensionAvailable)(editor, "textAlign") || (0, import_editor_utils14.isNodeTypeSelected)(editor, ["image"]))
     return false;
   return editor.can().setTextAlign(align);
 }
@@ -4646,7 +3559,7 @@ function setTextAlign(editor, align) {
 function shouldShowButton5(props) {
   const { editor, hideWhenUnavailable, align } = props;
   if (!editor || !editor.isEditable) return false;
-  if (!isExtensionAvailable(editor, "textAlign")) return false;
+  if (!(0, import_editor_utils14.isExtensionAvailable)(editor, "textAlign")) return false;
   if (hideWhenUnavailable && !editor.isActive("code")) {
     return canSetTextAlign(editor, align);
   }
@@ -4660,10 +3573,10 @@ function useTextAlign(config) {
     onAligned
   } = config;
   const { editor } = useTiptapEditor(providedEditor);
-  const [isVisible, setIsVisible] = (0, import_react27.useState)(true);
+  const [isVisible, setIsVisible] = (0, import_react26.useState)(true);
   const canAlign = canSetTextAlign(editor, align);
   const isActive = isTextAlignActive(editor, align);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setIsVisible(shouldShowButton5({ editor, align, hideWhenUnavailable }));
@@ -4674,7 +3587,7 @@ function useTextAlign(config) {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
   }, [editor, hideWhenUnavailable, align]);
-  const handleTextAlign = (0, import_react27.useCallback)(() => {
+  const handleTextAlign = (0, import_react26.useCallback)(() => {
     if (!editor) return false;
     const success = setTextAlign(editor, align);
     if (success) {
@@ -4721,7 +3634,7 @@ var TextAlignButton = ({
     hideWhenUnavailable,
     onAligned
   });
-  const handleClick = (0, import_react28.useCallback)(
+  const handleClick = (0, import_react27.useCallback)(
     (e) => {
       onClick == null ? void 0 : onClick(e);
       if (e.defaultPrevented) return;
@@ -4755,11 +3668,12 @@ var TextAlignButton = ({
 
 // src/ui/undo-redo-button/undo-redo-button.tsx
 var import_toolbar8 = require("@kopexa/toolbar");
-var import_react30 = require("react");
+var import_react29 = require("react");
 
 // src/ui/undo-redo-button/use-undo-redo.ts
-var import_icons17 = require("@kopexa/icons");
-var import_react29 = require("react");
+var import_editor_utils15 = require("@kopexa/editor-utils");
+var import_icons16 = require("@kopexa/icons");
+var import_react28 = require("react");
 var UNDO_REDO_SHORTCUT_KEYS = {
   undo: "mod+z",
   redo: "mod+shift+z"
@@ -4769,12 +3683,12 @@ var historyActionLabels = {
   redo: "Redo"
 };
 var historyIcons = {
-  undo: import_icons17.UndoIcon,
-  redo: import_icons17.RedoIcon
+  undo: import_icons16.UndoIcon,
+  redo: import_icons16.RedoIcon
 };
 function canExecuteUndoRedoAction(editor, action) {
   if (!editor || !editor.isEditable) return false;
-  if (isNodeTypeSelected(editor, ["image"])) return false;
+  if ((0, import_editor_utils15.isNodeTypeSelected)(editor, ["image"])) return false;
   return action === "undo" ? editor.can().undo() : editor.can().redo();
 }
 function executeUndoRedoAction(editor, action) {
@@ -4799,9 +3713,9 @@ function useUndoRedo(config) {
     onExecuted
   } = config;
   const { editor } = useTiptapEditor(providedEditor);
-  const [isVisible, setIsVisible] = (0, import_react29.useState)(true);
+  const [isVisible, setIsVisible] = (0, import_react28.useState)(true);
   const canExecute = canExecuteUndoRedoAction(editor, action);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (!editor) return;
     const handleUpdate = () => {
       setIsVisible(shouldShowButton6({ editor, hideWhenUnavailable, action }));
@@ -4812,7 +3726,7 @@ function useUndoRedo(config) {
       editor.off("transaction", handleUpdate);
     };
   }, [editor, hideWhenUnavailable, action]);
-  const handleAction = (0, import_react29.useCallback)(() => {
+  const handleAction = (0, import_react28.useCallback)(() => {
     if (!editor) return false;
     const success = executeUndoRedoAction(editor, action);
     if (success) {
@@ -4850,7 +3764,7 @@ var UndoRedoButton = ({
     hideWhenUnavailable,
     onExecuted
   });
-  const handleClick = (0, import_react30.useCallback)(
+  const handleClick = (0, import_react29.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -4888,7 +3802,8 @@ var EditorHeader = ({ editor: providedEditor }) => {
   const { editor } = useTiptapEditor(providedEditor);
   const isMobile = (0, import_use_is_mobile2.useIsMobile)();
   const windowSize = useWindowSize();
-  const toolbarRef = (0, import_react31.useRef)(null);
+  const { styles } = useEditorUIContext();
+  const toolbarRef = (0, import_react30.useRef)(null);
   const bodyRect = useCursorVisibility({
     editor,
     overlayHeight: (_b = (_a = toolbarRef.current) == null ? void 0 : _a.getBoundingClientRect().height) != null ? _b : 0
@@ -4896,15 +3811,18 @@ var EditorHeader = ({ editor: providedEditor }) => {
   if (!(editor == null ? void 0 : editor.isEditable)) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: styles.toolbar(), "data-slot": "editor-toolbar", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     import_toolbar9.Toolbar,
     {
+      sticky: true,
+      radius: "none",
+      border: "none",
       style: isMobile ? {
         bottom: `calc(100% - ${windowSize.height - bodyRect.y}px)`
       } : {},
       children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MainToolbarContent, {})
     }
-  );
+  ) });
 };
 var MainToolbarContent = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
   /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_toolbar9.ToolbarGroup, { children: [
@@ -4938,8 +3856,8 @@ function MoreOptions({
   ...props
 }) {
   const { editor } = useTiptapEditor(providedEditor);
-  const [show, setShow] = (0, import_react31.useState)(false);
-  (0, import_react31.useEffect)(() => {
+  const [show, setShow] = (0, import_react30.useState)(false);
+  (0, import_react30.useEffect)(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setShow(
@@ -4971,11 +3889,12 @@ function MoreOptions({
               variant: "ghost",
               color: "default",
               tabIndex: -1,
+              size: "md",
               "aria-label": "More options",
               title: "More options",
               isIconOnly: true,
               ...props,
-              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons18.MoreVerticalIcon, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons17.MoreVerticalIcon, {})
             }
           )
         }
@@ -4987,7 +3906,7 @@ function MoreOptions({
           align: "end",
           alignOffset: 4,
           sideOffset: 4,
-          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_toolbar9.Toolbar, { tabIndex: 0, children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_toolbar9.Toolbar, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_toolbar9.ToolbarGroup, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MarkButton, { type: "superscript" }),
               /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MarkButton, { type: "subscript" })
@@ -5031,31 +3950,30 @@ function shouldShowMoreOptions(params) {
 // src/presets/basic/index.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var BasicEditor = ({
+  variant,
   content,
-  editable,
-  onChange,
-  locale
+  ...options
 }) => {
-  const styles = (0, import_theme3.editorBasic)();
-  const editor = useCreateEditor({ content, editable, onChange });
+  const editor = useCreateEditor({ content, ...options });
+  const styles = (0, import_theme3.editorBasic)({ variant });
   if (!editor) {
     return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(LoadingSpinner, {});
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(EditorWrapperProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react32.EditorContext.Provider, { value: { editor }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(EditorUIProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: styles.root(), "data-slot": "editor", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react31.EditorContext.Provider, { value: { editor }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(EditorHeader, { editor }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(EditorContentArea, {})
-  ] }) });
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(EditorContentArea, { variant })
+  ] }) }) });
 };
-var EditorContentArea = () => {
-  const { styles } = useEditorWrapper();
-  const { editor } = (0, import_react33.useContext)(import_react32.EditorContext);
+var EditorContentArea = ({ variant }) => {
+  const styles = (0, import_theme3.editorBasic)({ variant });
+  const { editor } = (0, import_react32.useContext)(import_react31.EditorContext);
   const { isDragging } = useUiEditorState(editor);
   useScrollToHash();
   if (!editor) {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: styles.wrapper(), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    import_react32.EditorContent,
+    import_react31.EditorContent,
     {
       editor,
       role: "presentation",