@firecms/editor 3.0.0-canary.99 → 3.0.0-rc.2

package/dist/index.umd.js

@@ -1,314 +1,301 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react"), require("@tiptap/extension-underline"), require("@tiptap/extension-text-style"), require("@tiptap/extension-color"), require("tiptap-markdown"), require("@tiptap/extension-highlight"), require("@tiptap/react"), require("jotai"), require("@radix-ui/react-slot"), require("tunnel-rat"), require("cmdk"), require("@tiptap/starter-kit"), require("@tiptap/extension-horizontal-rule"), require("@tiptap/extension-link"), require("@tiptap/extension-image"), require("@tiptap/extension-placeholder"), require("@tiptap/extension-task-item"), require("@tiptap/extension-task-list"), require("@tiptap/core"), require("@tiptap/suggestion"), require("tippy.js"), require("@firecms/ui"), require("prosemirror-state"), require("@tiptap/pm/view"), require("@tiptap/pm/state")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react", "@tiptap/extension-underline", "@tiptap/extension-text-style", "@tiptap/extension-color", "tiptap-markdown", "@tiptap/extension-highlight", "@tiptap/react", "jotai", "@radix-ui/react-slot", "tunnel-rat", "cmdk", "@tiptap/starter-kit", "@tiptap/extension-horizontal-rule", "@tiptap/extension-link", "@tiptap/extension-image", "@tiptap/extension-placeholder", "@tiptap/extension-task-item", "@tiptap/extension-task-list", "@tiptap/core", "@tiptap/suggestion", "tippy.js", "@firecms/ui", "prosemirror-state", "@tiptap/pm/view", "@tiptap/pm/state"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["FireCMS Editor"] = {}, global.jsxRuntime, global.React, global.TiptapUnderline, global.TextStyle, global.extensionColor, global.tiptapMarkdown, global.Highlight, global.react, global.jotai, global.reactSlot, global.tunnel, global.cmdk, global.StarterKit, global.HorizontalRule, global.TiptapLink, global.TiptapImage, global.Placeholder, global.extensionTaskItem, global.extensionTaskList, global.core, global.Suggestion, global.tippy, global.ui, global.prosemirrorState, global.view, global.state));
-})(this, function(exports2, jsxRuntime, React, TiptapUnderline, TextStyle, extensionColor, tiptapMarkdown, Highlight, react, jotai, reactSlot, tunnel, cmdk, StarterKit, HorizontalRule, TiptapLink, TiptapImage, Placeholder, extensionTaskItem, extensionTaskList, core, Suggestion, tippy, ui, prosemirrorState, view, state) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react"), require("@firecms/ui"), require("@tiptap/react"), require("@tiptap/extension-document"), require("tiptap-markdown"), require("@tiptap/extension-underline"), require("@tiptap/extension-heading"), require("@tiptap/extension-text-style"), require("@tiptap/extension-color"), require("@tiptap/extension-highlight"), require("@tiptap/extension-bold"), require("@tiptap/extension-italic"), require("@tiptap/extension-strike"), require("react-compiler-runtime"), require("@tiptap/react/menus"), require("@tiptap/pm/state"), require("@radix-ui/react-slot"), require("@tiptap/starter-kit"), require("@tiptap/extension-horizontal-rule"), require("@tiptap/extension-link"), require("@tiptap/extension-image"), require("@tiptap/extension-placeholder"), require("@tiptap/extension-task-item"), require("@tiptap/extension-task-list"), require("@tiptap/core"), require("@tiptap/pm/view"), require("@tiptap/extension-ordered-list"), require("@tiptap/extension-bullet-list"), require("@tiptap/extension-list-item"), require("@tiptap/extension-code-block"), require("@tiptap/extension-blockquote"), require("@tiptap/extension-code"), require("@tiptap/pm/model"), require("@tiptap/suggestion"), require("@floating-ui/dom")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react", "@firecms/ui", "@tiptap/react", "@tiptap/extension-document", "tiptap-markdown", "@tiptap/extension-underline", "@tiptap/extension-heading", "@tiptap/extension-text-style", "@tiptap/extension-color", "@tiptap/extension-highlight", "@tiptap/extension-bold", "@tiptap/extension-italic", "@tiptap/extension-strike", "react-compiler-runtime", "@tiptap/react/menus", "@tiptap/pm/state", "@radix-ui/react-slot", "@tiptap/starter-kit", "@tiptap/extension-horizontal-rule", "@tiptap/extension-link", "@tiptap/extension-image", "@tiptap/extension-placeholder", "@tiptap/extension-task-item", "@tiptap/extension-task-list", "@tiptap/core", "@tiptap/pm/view", "@tiptap/extension-ordered-list", "@tiptap/extension-bullet-list", "@tiptap/extension-list-item", "@tiptap/extension-code-block", "@tiptap/extension-blockquote", "@tiptap/extension-code", "@tiptap/pm/model", "@tiptap/suggestion", "@floating-ui/dom"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["FireCMS Editor"] = {}, global.jsxRuntime, global.React, global.ui, global.react, global.Document, global.tiptapMarkdown, global.Underline, global.Heading, global.extensionTextStyle, global.Color, global.Highlight, global.Bold, global.Italic, global.Strike, global.reactCompilerRuntime, global.menus, global.state, global.reactSlot, global.StarterKit, global.HorizontalRule, global.TiptapLink, global.TiptapImage, global.Placeholder, global.extensionTaskItem, global.extensionTaskList, global.core, global.view, global.OrderedList, global.BulletList, global.ListItem, global.CodeBlock, global.Blockquote, global.Code, global.model, global.Suggestion, global.dom));
+})(this, (function(exports2, jsxRuntime, React, ui, react, Document, tiptapMarkdown, Underline, Heading, extensionTextStyle, Color, Highlight, Bold, Italic, Strike, reactCompilerRuntime, menus, state, reactSlot, StarterKit, HorizontalRule, TiptapLink, TiptapImage, Placeholder, extensionTaskItem, extensionTaskList, core, view, OrderedList, BulletList, ListItem, CodeBlock, Blockquote, Code, model, Suggestion, dom) {
   "use strict";
-  const editorStore = jotai.createStore();
-  const EditorRoot = ({ children }) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(jotai.Provider, { store: editorStore, children });
-  };
-  const EditorBubble = React.forwardRef(
-    ({ children, tippyOptions, ...rest }, ref) => {
-      const { editor } = react.useCurrentEditor();
-      const instanceRef = React.useRef(null);
-      React.useEffect(() => {
-        if (!instanceRef.current || !tippyOptions?.placement) return;
-        instanceRef.current.setProps({ placement: tippyOptions.placement });
-        instanceRef.current.popperInstance?.update();
-      }, [tippyOptions?.placement]);
-      const bubbleMenuProps = React.useMemo(() => {
-        const shouldShow = ({ editor: editor2, state: state2 }) => {
-          const { selection } = state2;
-          const { empty } = selection;
-          if (editor2.isActive("image") || empty || react.isNodeSelection(selection)) {
-            return false;
-          }
-          return true;
-        };
-        return {
-          shouldShow,
-          tippyOptions: {
-            onCreate: (val) => {
-              instanceRef.current = val;
-            },
-            moveTransition: "transform 0.15s ease-out",
-            ...tippyOptions
-          },
-          ...rest
-        };
-      }, [rest, tippyOptions]);
-      if (!editor) return null;
-      return (
-        //We need to add this because of https://github.com/ueberdosis/tiptap/issues/2658
-        /* @__PURE__ */ jsxRuntime.jsx("div", { ref, children: /* @__PURE__ */ jsxRuntime.jsx(react.BubbleMenu, { editor, ...bubbleMenuProps, children }) })
-      );
-    }
-  );
-  const EditorBubbleItem = React.forwardRef(({ children, asChild, onSelect, ...rest }, ref) => {
-    const { editor } = react.useCurrentEditor();
-    const Comp = asChild ? reactSlot.Slot : "div";
-    if (!editor) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ref, ...rest, onClick: () => onSelect?.(editor), children });
-  });
-  EditorBubbleItem.displayName = "EditorBubbleItem";
-  const t = tunnel();
-  const queryAtom = jotai.atom("");
-  const rangeAtom = jotai.atom(null);
-  const EditorCommandOut = ({
-    query,
-    range
-  }) => {
-    const setQuery = jotai.useSetAtom(queryAtom, { store: editorStore });
-    const setRange = jotai.useSetAtom(rangeAtom, { store: editorStore });
-    React.useEffect(() => {
-      setQuery(query);
-    }, [query, setQuery]);
-    React.useEffect(() => {
-      setRange(range);
-    }, [range, setRange]);
-    React.useEffect(() => {
-      const navigationKeys = ["ArrowUp", "ArrowDown", "Enter"];
-      const onKeyDown = (e) => {
-        if (navigationKeys.includes(e.key)) {
-          e.preventDefault();
-          const commandRef = document.querySelector("#slash-command");
-          if (commandRef)
-            commandRef.dispatchEvent(
-              new KeyboardEvent("keydown", { key: e.key, cancelable: true, bubbles: true })
-            );
-        }
-      };
-      document.addEventListener("keydown", onKeyDown);
-      return () => {
-        document.removeEventListener("keydown", onKeyDown);
+  const EditorBubble = React.forwardRef((t0, ref) => {
+    const $ = reactCompilerRuntime.c(18);
+    let children;
+    let options;
+    let rest;
+    let tippyOptions;
+    if ($[0] !== t0) {
+      ({
+        children,
+        tippyOptions,
+        options,
+        ...rest
+      } = t0);
+      $[0] = t0;
+      $[1] = children;
+      $[2] = options;
+      $[3] = rest;
+      $[4] = tippyOptions;
+    } else {
+      children = $[1];
+      options = $[2];
+      rest = $[3];
+      tippyOptions = $[4];
+    }
+    const {
+      editor
+    } = react.useCurrentEditor();
+    tippyOptions?.placement;
+    let t1;
+    const shouldShow = _temp$1;
+    const t2 = tippyOptions?.placement ?? options?.placement;
+    let t3;
+    if ($[5] !== options || $[6] !== t2) {
+      t3 = {
+        ...options,
+        placement: t2
       };
-    }, []);
-    return /* @__PURE__ */ jsxRuntime.jsx(t.Out, {});
-  };
-  const EditorCommand = React.forwardRef(
-    ({ children, className, ...rest }, ref) => {
-      const commandListRef = React.useRef(null);
-      const [query, setQuery] = jotai.useAtom(queryAtom);
-      return /* @__PURE__ */ jsxRuntime.jsx(t.In, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-        cmdk.Command,
-        {
-          ref,
-          onKeyDown: (e) => {
-            e.stopPropagation();
-          },
-          id: "slash-command",
-          className,
-          ...rest,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Input, { value: query, onValueChange: setQuery, style: { display: "none" } }),
-            /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.List, { ref: commandListRef, children })
-          ]
-        }
-      ) });
-    }
-  );
-  const EditorCommandItem = React.forwardRef(({ children, onCommand, ...rest }, ref) => {
-    const { editor } = react.useCurrentEditor();
-    const range = jotai.useAtomValue(rangeAtom);
-    if (!editor || !range) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(cmdk.CommandItem, { ref, ...rest, onSelect: () => onCommand({ editor, range }), children });
-  });
-  EditorCommandItem.displayName = "EditorCommandItem";
-  const EditorCommandEmpty = cmdk.CommandEmpty;
-  const Command = core.Extension.create({
-    name: "slash-command",
-    addOptions() {
-      return {
-        suggestion: {
-          char: "/",
-          command: ({ editor, range, props }) => {
-            props.command({ editor, range });
-          }
-        }
+      $[5] = options;
+      $[6] = t2;
+      $[7] = t3;
+    } else {
+      t3 = $[7];
+    }
+    const mergedOptions = t3;
+    let t4;
+    if ($[8] !== mergedOptions || $[9] !== rest) {
+      t4 = {
+        shouldShow,
+        options: mergedOptions,
+        ...rest
       };
-    },
-    addProseMirrorPlugins() {
-      return [
-        Suggestion({
-          editor: this.editor,
-          ...this.options.suggestion
-        })
-      ];
+      $[8] = mergedOptions;
+      $[9] = rest;
+      $[10] = t4;
+    } else {
+      t4 = $[10];
     }
+    t1 = t4;
+    const bubbleMenuProps = t1;
+    if (!editor) {
+      return null;
+    }
+    let t5;
+    if ($[11] !== bubbleMenuProps || $[12] !== children || $[13] !== editor) {
+      t5 = /* @__PURE__ */ jsxRuntime.jsx(menus.BubbleMenu, { editor, ...bubbleMenuProps, children });
+      $[11] = bubbleMenuProps;
+      $[12] = children;
+      $[13] = editor;
+      $[14] = t5;
+    } else {
+      t5 = $[14];
+    }
+    let t6;
+    if ($[15] !== ref || $[16] !== t5) {
+      t6 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref, children: t5 });
+      $[15] = ref;
+      $[16] = t5;
+      $[17] = t6;
+    } else {
+      t6 = $[17];
+    }
+    return t6;
   });
-  const renderItems = () => {
-    let component = null;
-    let popup = null;
-    return {
-      onStart: (props) => {
-        component = new react.ReactRenderer(EditorCommandOut, {
-          props,
-          editor: props.editor
-        });
-        popup = tippy("body", {
-          getReferenceClientRect: props.clientRect,
-          appendTo: () => document.body,
-          content: component.element,
-          showOnCreate: true,
-          interactive: true,
-          trigger: "manual",
-          placement: "bottom-start"
-        });
-      },
-      onUpdate: (props) => {
-        component?.updateProps(props);
-        popup && popup[0].setProps({
-          getReferenceClientRect: props.clientRect
-        });
-      },
-      onKeyDown: (props) => {
-        if (props.event.key === "Escape") {
-          popup?.[0].hide();
-          return true;
-        }
-        return component?.ref?.onKeyDown(props);
-      },
-      onExit: () => {
-        popup?.[0].destroy();
-        component?.destroy();
-      }
-    };
-  };
-  const createSuggestionItems = (items2) => items2;
-  const PlaceholderExtension = Placeholder.configure({
-    placeholder: ({ node }) => {
-      if (node.type.name === "heading") {
-        return `Heading ${node.attrs.level}`;
-      }
-      return "Press '/' for commands";
-    },
-    includeChildren: true
-  });
-  const Horizontal = HorizontalRule.extend({
-    addInputRules() {
-      return [
-        new core.InputRule({
-          find: /^(?:---|—-|___\s|\*\*\*\s)$/,
-          handler: ({ state: state2, range }) => {
-            const attributes = {};
-            const { tr } = state2;
-            const start = range.from;
-            const end = range.to;
-            tr.insert(start - 1, this.type.create(attributes)).delete(
-              tr.mapping.map(start),
-              tr.mapping.map(end)
-            );
-          }
-        })
-      ];
+  function _temp$1(t0) {
+    const {
+      editor: editor_0,
+      state: state$1
+    } = t0;
+    const {
+      selection
+    } = state$1;
+    const {
+      empty
+    } = selection;
+    if (editor_0.isActive("image") || empty || selection instanceof state.NodeSelection) {
+      return false;
+    }
+    return true;
+  }
+  const EditorBubbleItem = React.forwardRef((t0, ref) => {
+    const $ = reactCompilerRuntime.c(14);
+    let asChild;
+    let children;
+    let onSelect;
+    let rest;
+    if ($[0] !== t0) {
+      ({
+        children,
+        asChild,
+        onSelect,
+        ...rest
+      } = t0);
+      $[0] = t0;
+      $[1] = asChild;
+      $[2] = children;
+      $[3] = onSelect;
+      $[4] = rest;
+    } else {
+      asChild = $[1];
+      children = $[2];
+      onSelect = $[3];
+      rest = $[4];
+    }
+    const {
+      editor
+    } = react.useCurrentEditor();
+    const Comp = asChild ? reactSlot.Slot : "div";
+    if (!editor) {
+      return null;
+    }
+    let t1;
+    if ($[5] !== editor || $[6] !== onSelect) {
+      t1 = () => onSelect?.(editor);
+      $[5] = editor;
+      $[6] = onSelect;
+      $[7] = t1;
+    } else {
+      t1 = $[7];
     }
+    let t2;
+    if ($[8] !== Comp || $[9] !== children || $[10] !== ref || $[11] !== rest || $[12] !== t1) {
+      t2 = /* @__PURE__ */ jsxRuntime.jsx(Comp, { ref, ...rest, onClick: t1, children });
+      $[8] = Comp;
+      $[9] = children;
+      $[10] = ref;
+      $[11] = rest;
+      $[12] = t1;
+      $[13] = t2;
+    } else {
+      t2 = $[13];
+    }
+    return t2;
   });
-  const items = [
-    {
-      name: "Text",
-      icon: ui.TextFieldsIcon,
-      command: (editor) => editor?.chain().focus().toggleNode("paragraph", "paragraph").run(),
-      // I feel like there has to be a more efficient way to do this – feel free to PR if you know how!
-      isActive: (editor) => (editor?.isActive("paragraph") && !editor?.isActive("bulletList") && !editor?.isActive("orderedList")) ?? false
-    },
-    {
-      name: "Heading 1",
-      icon: ui.LooksOneIcon,
-      command: (editor) => editor?.chain().focus().toggleHeading({ level: 1 }).run(),
-      isActive: (editor) => editor?.isActive("heading", { level: 1 }) ?? false
-    },
-    {
-      name: "Heading 2",
-      icon: ui.LooksTwoIcon,
-      command: (editor) => editor?.chain().focus().toggleHeading({ level: 2 }).run(),
-      isActive: (editor) => editor?.isActive("heading", { level: 2 }) ?? false
-    },
-    {
-      name: "Heading 3",
-      icon: ui.Looks3Icon,
-      command: (editor) => editor?.chain().focus().toggleHeading({ level: 3 }).run(),
-      isActive: (editor) => editor?.isActive("heading", { level: 3 }) ?? false
-    },
-    {
-      name: "To-do List",
-      icon: ui.CheckBoxIcon,
-      command: (editor) => editor?.chain().focus().toggleTaskList().run(),
-      isActive: (editor) => editor?.isActive("taskItem") ?? false
-    },
-    {
-      name: "Bullet List",
-      icon: ui.FormatListBulletedIcon,
-      command: (editor) => editor?.chain().focus().toggleBulletList().run(),
-      isActive: (editor) => editor?.isActive("bulletList") ?? false
-    },
-    {
-      name: "Numbered List",
-      icon: ui.FormatListNumberedIcon,
-      command: (editor) => editor?.chain().focus().toggleOrderedList().run(),
-      isActive: (editor) => editor?.isActive("orderedList") ?? false
-    },
-    {
-      name: "Quote",
-      icon: ui.FormatQuoteIcon,
-      command: (editor) => editor?.chain().focus().toggleNode("paragraph", "paragraph").toggleBlockquote().run(),
-      isActive: (editor) => editor?.isActive("blockquote") ?? false
-    },
-    {
-      name: "Code",
-      icon: ui.CodeIcon,
-      command: (editor) => editor?.chain().focus().toggleCodeBlock().run(),
-      isActive: (editor) => editor?.isActive("codeBlock") ?? false
-    }
-  ];
-  const NodeSelector = ({
-    open,
-    onOpenChange
-  }) => {
-    const { editor } = react.useCurrentEditor();
-    if (!editor) return null;
-    const activeItem = items.filter((item) => item.isActive(editor)).pop() ?? {
-      name: "Multiple"
-    };
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      ui.Popover,
-      {
-        sideOffset: 5,
-        align: "start",
-        className: "w-48 p-1",
-        trigger: /* @__PURE__ */ jsxRuntime.jsxs(
-          ui.Button,
-          {
-            variant: "text",
-            className: "gap-2 rounded-none",
-            color: "text",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap text-sm", children: activeItem.name }),
-              /* @__PURE__ */ jsxRuntime.jsx(ui.ExpandMoreIcon, { size: "small" })
-            ]
-          }
-        ),
-        modal: true,
-        open,
-        onOpenChange,
-        children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-          EditorBubbleItem,
-          {
-            onSelect: (editor2) => {
-              item.command(editor2);
-              onOpenChange(false);
-            },
-            className: "flex cursor-pointer items-center justify-between rounded px-2 py-1 text-sm hover:bg-blue-50 hover:dark:bg-gray-700 text-gray-900 dark:text-white",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(item.icon, { size: "smallest" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.name })
-              ] }),
-              activeItem.name === item.name && /* @__PURE__ */ jsxRuntime.jsx(ui.CheckIcon, { size: "smallest" })
-            ]
-          },
-          index
-        ))
-      }
-    );
+  EditorBubbleItem.displayName = "EditorBubbleItem";
+  const items = [{
+    name: "Text",
+    icon: ui.TextFieldsIcon,
+    command: (editor) => editor?.chain().focus().toggleNode("paragraph", "paragraph").run(),
+    // I feel like there has to be a more efficient way to do this – feel free to PR if you know how!
+    isActive: (editor) => (editor?.isActive("paragraph") && !editor?.isActive("bulletList") && !editor?.isActive("orderedList")) ?? false
+  }, {
+    name: "Heading 1",
+    icon: ui.LooksOneIcon,
+    command: (editor) => editor?.chain().focus().toggleHeading({
+      level: 1
+    }).run(),
+    isActive: (editor) => editor?.isActive("heading", {
+      level: 1
+    }) ?? false
+  }, {
+    name: "Heading 2",
+    icon: ui.LooksTwoIcon,
+    command: (editor) => editor?.chain().focus().toggleHeading({
+      level: 2
+    }).run(),
+    isActive: (editor) => editor?.isActive("heading", {
+      level: 2
+    }) ?? false
+  }, {
+    name: "Heading 3",
+    icon: ui.Looks3Icon,
+    command: (editor) => editor?.chain().focus().toggleHeading({
+      level: 3
+    }).run(),
+    isActive: (editor) => editor?.isActive("heading", {
+      level: 3
+    }) ?? false
+  }, {
+    name: "To-do List",
+    icon: ui.CheckBoxIcon,
+    command: (editor) => editor?.chain().focus().toggleTaskList().run(),
+    isActive: (editor) => editor?.isActive("taskItem") ?? false
+  }, {
+    name: "Bullet List",
+    icon: ui.FormatListBulletedIcon,
+    command: (editor) => editor?.chain().focus().toggleBulletList().run(),
+    isActive: (editor) => editor?.isActive("bulletList") ?? false
+  }, {
+    name: "Numbered List",
+    icon: ui.FormatListNumberedIcon,
+    command: (editor) => editor?.chain().focus().toggleOrderedList().run(),
+    isActive: (editor) => editor?.isActive("orderedList") ?? false
+  }, {
+    name: "Quote",
+    icon: ui.FormatQuoteIcon,
+    command: (editor) => editor?.chain().focus().toggleNode("paragraph", "paragraph").toggleBlockquote().run(),
+    isActive: (editor) => editor?.isActive("blockquote") ?? false
+  }, {
+    name: "Code",
+    icon: ui.CodeIcon,
+    command: (editor) => editor?.chain().focus().toggleCodeBlock().run(),
+    isActive: (editor) => editor?.isActive("codeBlock") ?? false
+  }];
+  const NodeSelector = (t0) => {
+    const $ = reactCompilerRuntime.c(16);
+    const {
+      open,
+      onOpenChange,
+      portalContainer
+    } = t0;
+    const {
+      editor
+    } = react.useCurrentEditor();
+    if (!editor) {
+      return null;
+    }
+    let t1;
+    if ($[0] !== editor) {
+      t1 = items.filter((item) => item.isActive(editor)).pop() ?? {
+        name: "Multiple"
+      };
+      $[0] = editor;
+      $[1] = t1;
+    } else {
+      t1 = $[1];
+    }
+    const activeItem = t1;
+    let t2;
+    if ($[2] !== activeItem.name) {
+      t2 = /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap text-sm", children: activeItem.name });
+      $[2] = activeItem.name;
+      $[3] = t2;
+    } else {
+      t2 = $[3];
+    }
+    let t3;
+    if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+      t3 = /* @__PURE__ */ jsxRuntime.jsx(ui.KeyboardArrowDownIcon, { size: "small" });
+      $[4] = t3;
+    } else {
+      t3 = $[4];
+    }
+    let t4;
+    if ($[5] !== t2) {
+      t4 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "text", className: "gap-2 rounded-none", color: "text", children: [
+        t2,
+        t3
+      ] });
+      $[5] = t2;
+      $[6] = t4;
+    } else {
+      t4 = $[6];
+    }
+    let t5;
+    if ($[7] !== activeItem.name || $[8] !== onOpenChange) {
+      t5 = items.map((item_0, index) => /* @__PURE__ */ jsxRuntime.jsxs(EditorBubbleItem, { onSelect: (editor_0) => {
+        item_0.command(editor_0);
+        onOpenChange(false);
+      }, className: "flex cursor-pointer items-center justify-between rounded px-2 py-1 text-sm hover:bg-blue-50 hover:dark:bg-surface-700 text-surface-900 dark:text-white", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(item_0.icon, { size: "smallest" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: item_0.name })
+        ] }),
+        activeItem.name === item_0.name && /* @__PURE__ */ jsxRuntime.jsx(ui.CheckIcon, { size: "smallest" })
+      ] }, index));
+      $[7] = activeItem.name;
+      $[8] = onOpenChange;
+      $[9] = t5;
+    } else {
+      t5 = $[9];
+    }
+    let t6;
+    if ($[10] !== onOpenChange || $[11] !== open || $[12] !== portalContainer || $[13] !== t4 || $[14] !== t5) {
+      t6 = /* @__PURE__ */ jsxRuntime.jsx(ui.Popover, { sideOffset: 5, align: "start", portalContainer, className: "w-48 p-1", trigger: t4, modal: true, open, onOpenChange, children: t5 });
+      $[10] = onOpenChange;
+      $[11] = open;
+      $[12] = portalContainer;
+      $[13] = t4;
+      $[14] = t5;
+      $[15] = t6;
+    } else {
+      t6 = $[15];
+    }
+    return t6;
   };
   function isValidUrl(url) {
     try {
@@ -329,162 +316,201 @@
       return null;
     }
   }
-  const LinkSelector = ({
-    open,
-    onOpenChange
-  }) => {
+  const LinkSelector = (t0) => {
+    const $ = reactCompilerRuntime.c(24);
+    const {
+      open,
+      onOpenChange
+    } = t0;
     const inputRef = React.useRef(null);
-    const { editor } = react.useCurrentEditor();
-    React.useEffect(() => {
-      inputRef.current && inputRef.current?.focus();
-    });
-    if (!editor) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      ui.Popover,
-      {
-        modal: true,
-        open,
-        onOpenChange,
-        trigger: /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Button,
-          {
-            variant: "text",
-            className: "gap-2 rounded-none",
-            color: "text",
-            children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: ui.cls("underline decoration-stone-400 underline-offset-4", {
-              "text-blue-500": editor.isActive("link")
-            }), children: "Link" })
-          }
-        ),
-        children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "form",
-          {
-            onSubmit: (e) => {
-              const target = e.currentTarget;
-              e.preventDefault();
-              const input = target[0];
-              const url = getUrlFromString(input.value);
-              url && editor.chain().focus().setLink({ href: url }).run();
-            },
-            className: "flex p-1",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
-                {
-                  ref: inputRef,
-                  autoFocus: open,
-                  placeholder: "Paste a link",
-                  defaultValue: editor.getAttributes("link").href || "",
-                  className: "text-gray-900 dark:text-white flex-grow bg-transparent p-1 text-sm outline-none"
-                }
-              ),
-              editor.getAttributes("link").href ? /* @__PURE__ */ jsxRuntime.jsx(
-                ui.Button,
-                {
-                  size: "small",
-                  variant: "text",
-                  type: "button",
-                  color: "text",
-                  className: "flex items-center",
-                  onClick: () => {
-                    editor.chain().focus().unsetLink().run();
-                  },
-                  children: /* @__PURE__ */ jsxRuntime.jsx(ui.DeleteIcon, { size: "small" })
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx(
-                ui.Button,
-                {
-                  size: "small",
-                  variant: "text",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(ui.CheckIcon, { size: "small" })
-                }
-              )
-            ]
-          }
-        )
-      }
-    );
+    const {
+      editor
+    } = react.useCurrentEditor();
+    let t1;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+      t1 = () => {
+        inputRef.current && inputRef.current?.focus();
+      };
+      $[0] = t1;
+    } else {
+      t1 = $[0];
+    }
+    React.useEffect(t1);
+    if (!editor) {
+      return null;
+    }
+    let t2;
+    if ($[1] !== editor) {
+      t2 = ui.cls("underline decoration-stone-400 underline-offset-4", {
+        "text-blue-500": editor.isActive("link")
+      });
+      $[1] = editor;
+      $[2] = t2;
+    } else {
+      t2 = $[2];
+    }
+    let t3;
+    if ($[3] !== t2) {
+      t3 = /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", className: "gap-2 rounded-none", color: "text", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: t2, children: "Link" }) });
+      $[3] = t2;
+      $[4] = t3;
+    } else {
+      t3 = $[4];
+    }
+    let t4;
+    if ($[5] !== editor) {
+      t4 = (e) => {
+        const target = e.currentTarget;
+        e.preventDefault();
+        const input = target[0];
+        const url = getUrlFromString(input.value);
+        url && editor.chain().focus().setLink({
+          href: url
+        }).run();
+      };
+      $[5] = editor;
+      $[6] = t4;
+    } else {
+      t4 = $[6];
+    }
+    let t5;
+    if ($[7] !== editor) {
+      t5 = editor.getAttributes("link").href || "";
+      $[7] = editor;
+      $[8] = t5;
+    } else {
+      t5 = $[8];
+    }
+    let t6;
+    if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+      t6 = ui.cls("text-surface-900 dark:text-white flex-grow bg-transparent p-1 text-sm outline-none", ui.focusedDisabled);
+      $[9] = t6;
+    } else {
+      t6 = $[9];
+    }
+    let t7;
+    if ($[10] !== open || $[11] !== t5) {
+      t7 = /* @__PURE__ */ jsxRuntime.jsx("input", { ref: inputRef, autoFocus: open, placeholder: "Paste a link", defaultValue: t5, className: t6 });
+      $[10] = open;
+      $[11] = t5;
+      $[12] = t7;
+    } else {
+      t7 = $[12];
+    }
+    let t8;
+    if ($[13] !== editor) {
+      t8 = editor.getAttributes("link").href ? /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "text", type: "button", color: "text", className: "flex items-center", onClick: () => {
+        editor.chain().focus().unsetLink().run();
+      }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.DeleteIcon, { size: "small" }) }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "text", children: /* @__PURE__ */ jsxRuntime.jsx(ui.CheckIcon, { size: "small" }) });
+      $[13] = editor;
+      $[14] = t8;
+    } else {
+      t8 = $[14];
+    }
+    let t9;
+    if ($[15] !== t4 || $[16] !== t7 || $[17] !== t8) {
+      t9 = /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: t4, className: "flex p-1", children: [
+        t7,
+        t8
+      ] });
+      $[15] = t4;
+      $[16] = t7;
+      $[17] = t8;
+      $[18] = t9;
+    } else {
+      t9 = $[18];
+    }
+    let t10;
+    if ($[19] !== onOpenChange || $[20] !== open || $[21] !== t3 || $[22] !== t9) {
+      t10 = /* @__PURE__ */ jsxRuntime.jsx(ui.Popover, { modal: true, open, onOpenChange, trigger: t3, children: t9 });
+      $[19] = onOpenChange;
+      $[20] = open;
+      $[21] = t3;
+      $[22] = t9;
+      $[23] = t10;
+    } else {
+      t10 = $[23];
+    }
+    return t10;
   };
   const TextButtons = () => {
-    const { editor } = react.useCurrentEditor();
-    if (!editor) return null;
-    const items2 = [
-      {
+    const $ = reactCompilerRuntime.c(2);
+    const {
+      editor
+    } = react.useCurrentEditor();
+    if (!editor) {
+      return null;
+    }
+    let t0;
+    if ($[0] !== editor) {
+      const items2 = [{
         name: "bold",
-        isActive: (editor2) => editor2?.isActive("bold") ?? false,
-        command: (editor2) => editor2?.chain().focus().toggleBold().run(),
+        isActive: _temp,
+        command: _temp2,
         icon: ui.FormatBoldIcon
-      },
-      {
+      }, {
         name: "italic",
-        isActive: (editor2) => editor2?.isActive("italic") ?? false,
-        command: (editor2) => editor2?.chain().focus().toggleItalic().run(),
+        isActive: _temp3,
+        command: _temp4,
         icon: ui.FormatItalicIcon
-      },
-      {
+      }, {
         name: "underline",
-        isActive: (editor2) => editor2?.isActive("underline") ?? false,
-        command: (editor2) => editor2?.chain().focus().toggleUnderline().run(),
+        isActive: _temp5,
+        command: _temp6,
         icon: ui.FormatUnderlinedIcon
-      },
-      {
+      }, {
         name: "strike",
-        isActive: (editor2) => editor2?.isActive("strike") ?? false,
-        command: (editor2) => editor2?.chain().focus().toggleStrike().run(),
+        isActive: _temp7,
+        command: _temp8,
         icon: ui.FormatStrikethroughIcon
-      },
-      {
+      }, {
         name: "code",
-        isActive: (editor2) => editor2?.isActive("code") ?? false,
-        command: (editor2) => editor2?.chain().focus().toggleCode().run(),
+        isActive: _temp9,
+        command: _temp0,
         icon: ui.CodeIcon
-      }
-    ];
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex", children: items2.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
-      EditorBubbleItem,
-      {
-        onSelect: (editor2) => {
-          item.command(editor2);
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Button,
-          {
-            size: "small",
-            color: "text",
-            className: "gap-2 rounded-none h-full",
-            variant: "text",
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              item.icon,
-              {
-                className: ui.cls({
-                  "text-inherit": !item.isActive(editor),
-                  "text-blue-500": item.isActive(editor)
-                })
-              }
-            )
-          }
-        )
-      },
-      index
-    )) });
+      }];
+      t0 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex", children: items2.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(EditorBubbleItem, { onSelect: (editor_10) => {
+        item.command(editor_10);
+      }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", color: "text", className: "gap-2 rounded-none h-full", variant: "text", children: /* @__PURE__ */ jsxRuntime.jsx(item.icon, { className: ui.cls({
+        "text-inherit": !item.isActive(editor),
+        "text-blue-500": item.isActive(editor)
+      }) }) }) }, index)) });
+      $[0] = editor;
+      $[1] = t0;
+    } else {
+      t0 = $[1];
+    }
+    return t0;
   };
-  function useDebouncedCallback(value, callback, immediate, timeoutMs = 300) {
-    const pendingUpdate = React.useRef(false);
-    const performUpdate = () => {
-      callback();
-      pendingUpdate.current = false;
-    };
-    const handlerRef = React.useRef(void 0);
-    React.useEffect(
-      () => {
-        pendingUpdate.current = true;
-        clearTimeout(handlerRef.current);
-        handlerRef.current = setTimeout(performUpdate, timeoutMs);
-        return () => {
-        };
-      },
-      [immediate, value]
-    );
+  function _temp(editor_0) {
+    return editor_0?.isActive("bold") ?? false;
+  }
+  function _temp2(editor_1) {
+    return editor_1?.chain().focus().toggleBold().run();
+  }
+  function _temp3(editor_2) {
+    return editor_2?.isActive("italic") ?? false;
+  }
+  function _temp4(editor_3) {
+    return editor_3?.chain().focus().toggleItalic().run();
+  }
+  function _temp5(editor_4) {
+    return editor_4?.isActive("underline") ?? false;
+  }
+  function _temp6(editor_5) {
+    return editor_5?.chain().focus().toggleUnderline().run();
+  }
+  function _temp7(editor_6) {
+    return editor_6?.isActive("strike") ?? false;
+  }
+  function _temp8(editor_7) {
+    return editor_7?.chain().focus().toggleStrike().run();
+  }
+  function _temp9(editor_8) {
+    return editor_8?.isActive("code") ?? false;
+  }
+  function _temp0(editor_9) {
+    return editor_9?.chain().focus().toggleCode().run();
   }
   function removeClassesFromJson(jsonObj) {
     if (Array.isArray(jsonObj)) {
@@ -499,12 +525,158 @@
     }
     return jsonObj;
   }
+  const loadingDecorationKey = new state.PluginKey("loadingDecoration");
+  const TextLoadingDecorationExtension = core.Extension.create({
+    name: "loadingDecoration",
+    addOptions() {
+      return {
+        pluginKey: loadingDecorationKey
+      };
+    },
+    addProseMirrorPlugins() {
+      const pluginKey = this.options.pluginKey;
+      return [new state.Plugin({
+        key: pluginKey,
+        state: {
+          init() {
+            return {
+              decorationSet: view.DecorationSet.empty,
+              hasDecoration: false
+            };
+          },
+          apply(tr, oldState) {
+            const action = tr.getMeta(pluginKey);
+            if (action?.type === "loadingDecoration") {
+              const {
+                pos,
+                remove,
+                loadingHtml
+              } = action;
+              if (remove) {
+                return {
+                  decorationSet: view.DecorationSet.empty,
+                  hasDecoration: false
+                };
+              }
+              const decoration = view.Decoration.widget(pos, () => {
+                const container = document.createElement("span");
+                container.className = "loading-decoration";
+                if (loadingHtml) {
+                  container.innerHTML = loadingHtml;
+                } else {
+                  const span = document.createElement("span");
+                  span.innerText = "loading...";
+                  container.appendChild(span);
+                }
+                return container;
+              });
+              return {
+                decorationSet: view.DecorationSet.empty.add(tr.doc, [decoration]),
+                hasDecoration: true
+              };
+            }
+            return {
+              decorationSet: oldState.decorationSet.map(tr.mapping, tr.doc),
+              hasDecoration: oldState.hasDecoration
+            };
+          }
+        },
+        props: {
+          decorations(state2) {
+            return this.getState(state2)?.decorationSet || view.DecorationSet.empty;
+          }
+        }
+      })];
+    },
+    addCommands() {
+      return {
+        toggleLoadingDecoration: (loadingHtml) => ({
+          state: state2,
+          dispatch
+        }) => {
+          const {
+            selection
+          } = state2;
+          const pos = selection.from;
+          if (!dispatch) return false;
+          const pluginKey = this.options.pluginKey;
+          const tr = state2.tr.setMeta(pluginKey, {
+            pos,
+            type: "loadingDecoration",
+            remove: false,
+            loadingHtml
+          });
+          dispatch(tr);
+          return true;
+        },
+        removeLoadingDecoration: () => ({
+          state: state2,
+          dispatch
+        }) => {
+          if (!dispatch) return false;
+          const pluginKey = this.options.pluginKey;
+          const tr = state2.tr.setMeta(pluginKey, {
+            pos: 0,
+            // We can pass any position as it will remove the entire decoration set
+            type: "loadingDecoration",
+            remove: true
+          });
+          dispatch(tr);
+          return true;
+        }
+      };
+    }
+  });
+  const PlaceholderExtension = Placeholder.configure({
+    placeholder: ({
+      node,
+      editor
+    }) => {
+      const {
+        from,
+        to
+      } = editor.state.selection;
+      function hasLoadingDecoration(editor2) {
+        const pluginState = loadingDecorationKey.get(editor2.state);
+        return pluginState?.getState(editor2.state)?.hasDecoration ?? false;
+      }
+      const hasDecoration = hasLoadingDecoration(editor);
+      if (hasDecoration) {
+        return "";
+      }
+      if (node.type.name === "heading") {
+        return `Heading ${node.attrs.level}`;
+      }
+      if (node.type.name === "paragraph") {
+        return "Press '/' for commands";
+      }
+      return "";
+    },
+    includeChildren: true
+  });
+  const Horizontal = HorizontalRule.extend({
+    addInputRules() {
+      return [new core.InputRule({
+        find: /^(?:---|—-|___\s|\*\*\*\s)$/,
+        handler: ({
+          state: state2,
+          range
+        }) => {
+          const attributes = {};
+          const {
+            tr
+          } = state2;
+          const start = range.from;
+          const end = range.to;
+          tr.insert(start - 1, this.type.create(attributes)).delete(tr.mapping.map(start), tr.mapping.map(end));
+        }
+      })];
+    }
+  });
   const placeholder = PlaceholderExtension;
   const tiptapLink = TiptapLink.configure({
     HTMLAttributes: {
-      class: ui.cls(
-        "text-gray-600 dark:text-slate-300 underline underline-offset-[3px] hover:text-primary transition-colors cursor-pointer"
-      )
+      class: ui.cls("text-surface-700 dark:text-surface-accent-200 underline underline-offset-[3px] hover:text-primary transition-colors cursor-pointer")
     }
   });
   const taskList = extensionTaskList.TaskList.configure({
@@ -523,38 +695,39 @@
       class: ui.cls("mt-4 mb-6 border-t", ui.defaultBorderMixin)
     }
   });
+  const bulletList = BulletList.configure({
+    HTMLAttributes: {
+      class: ui.cls("list-disc list-outside leading-3 -mt-2")
+    }
+  });
+  const orderedList = OrderedList.configure({
+    HTMLAttributes: {
+      class: ui.cls("list-decimal list-outside leading-3 -mt-2")
+    }
+  });
+  const listItem = ListItem.configure({
+    HTMLAttributes: {
+      class: ui.cls("leading-normal -mb-2")
+    }
+  });
+  const blockquote = Blockquote.configure({
+    HTMLAttributes: {
+      class: ui.cls("border-l-4 border-primary")
+    }
+  });
+  const codeBlock = CodeBlock.configure({
+    HTMLAttributes: {
+      class: ui.cls("rounded bg-blue-50 dark:bg-surface-700 border p-5 font-mono font-medium", ui.defaultBorderMixin)
+    }
+  });
+  const code = Code.configure({
+    HTMLAttributes: {
+      class: ui.cls("rounded-md bg-surface-accent-50 dark:bg-surface-700 px-1.5 py-1 font-mono font-medium"),
+      spellcheck: "false"
+    }
+  });
   const starterKit = StarterKit.configure({
-    bulletList: {
-      HTMLAttributes: {
-        class: ui.cls("list-disc list-outside leading-3 -mt-2")
-      }
-    },
-    orderedList: {
-      HTMLAttributes: {
-        class: ui.cls("list-decimal list-outside leading-3 -mt-2")
-      }
-    },
-    listItem: {
-      HTMLAttributes: {
-        class: ui.cls("leading-normal -mb-2")
-      }
-    },
-    blockquote: {
-      HTMLAttributes: {
-        class: ui.cls("border-l-4 border-primary")
-      }
-    },
-    codeBlock: {
-      HTMLAttributes: {
-        class: ui.cls("rounded bg-blue-50 dark:bg-gray-700 border p-5 font-mono font-medium", ui.defaultBorderMixin)
-      }
-    },
-    code: {
-      HTMLAttributes: {
-        class: ui.cls("rounded-md bg-slate-50 dark:bg-gray-700 px-1.5 py-1 font-mono font-medium"),
-        spellcheck: "false"
-      }
-    },
+    document: false,
     horizontalRule: false,
     dropcursor: {
       color: "#DBEAFE",
@@ -562,27 +735,42 @@
     },
     gapcursor: false
   });
-  async function onFileRead(plugin, view$1, readerEvent, pos, upload, image) {
-    const { schema } = view$1.state;
+  async function onFileRead(view$1, readerEvent, pos, upload, image) {
+    const {
+      schema
+    } = view$1.state;
+    const plugin = view$1.state.plugins.find((p) => p.key === ImagePluginKey.key);
+    if (!plugin) {
+      console.error("Image plugin not found");
+      return;
+    }
     let decorationSet = plugin.getState(view$1.state);
     const placeholder2 = document.createElement("div");
     const imageElement = document.createElement("img");
-    imageElement.setAttribute("class", "opacity-40 rounded-lg border border-stone-200");
+    imageElement.setAttribute("class", "opacity-40 rounded-lg border " + ui.defaultBorderMixin);
     imageElement.src = readerEvent.target?.result;
     placeholder2.appendChild(imageElement);
     const deco = view.Decoration.widget(pos, placeholder2);
     decorationSet = decorationSet?.add(view$1.state.doc, [deco]);
-    view$1.dispatch(view$1.state.tr.setMeta(plugin, { decorationSet }));
+    view$1.dispatch(view$1.state.tr.setMeta(plugin, {
+      decorationSet
+    }));
     const src = await upload(image);
-    console.log("uploaded image", src);
-    const imageNode = schema.nodes.image.create({ src });
+    console.debug("Uploaded image", src);
+    const imageNode = schema.nodes.image.create({
+      src
+    });
     const tr = view$1.state.tr.replaceWith(pos, pos, imageNode);
     decorationSet = decorationSet?.remove([deco]);
-    tr.setMeta(plugin, { decorationSet });
+    tr.setMeta(plugin, {
+      decorationSet
+    });
     view$1.dispatch(tr);
   }
-  const dropImagePlugin = (upload) => {
-    const plugin = new prosemirrorState.Plugin({
+  const ImagePluginKey = new state.PluginKey("imagePlugin");
+  const createDropImagePlugin = (upload) => {
+    const plugin = new state.Plugin({
+      key: ImagePluginKey,
       state: {
         // Initialize the plugin state with an empty DecorationSet
         init: () => view.DecorationSet.empty,
@@ -598,20 +786,25 @@
       props: {
         handleDOMEvents: {
           drop: (view2, event) => {
-            console.log("drop event", event);
             if (!event.dataTransfer?.files || event.dataTransfer?.files.length === 0) {
               return false;
             }
             event.preventDefault();
             const files = Array.from(event.dataTransfer.files);
             const images = files.filter((file) => /image/i.test(file.type));
-            if (images.length === 0) return false;
+            if (images.length === 0) {
+              console.log("No images found in dropped files");
+              return false;
+            }
             images.forEach((image) => {
-              const position = view2.posAtCoords({ left: event.clientX, top: event.clientY });
+              const position = view2.posAtCoords({
+                left: event.clientX,
+                top: event.clientY
+              });
               if (!position) return;
               const reader = new FileReader();
               reader.onload = async (readerEvent) => {
-                await onFileRead(plugin, view2, readerEvent, position.pos, upload, image);
+                await onFileRead(view2, readerEvent, position.pos, upload, image);
               };
               reader.readAsDataURL(image);
             });
@@ -621,16 +814,14 @@
         handlePaste(view2, event, slice) {
           const items2 = Array.from(event.clipboardData?.items || []);
           const pos = view2.state.selection.from;
-          console.log("pos", pos);
           let anyImageFound = false;
           items2.forEach((item) => {
             const image = item.getAsFile();
-            console.log("image", image);
             if (image) {
               anyImageFound = true;
               const reader = new FileReader();
               reader.onload = async (readerEvent) => {
-                await onFileRead(plugin, view2, readerEvent, pos, upload, image);
+                await onFileRead(view2, readerEvent, pos, upload, image);
               };
               reader.readAsDataURL(image);
             }
@@ -655,10 +846,10 @@
     });
     return plugin;
   };
-  const createImageExtension = (uploadFn) => {
+  const createImageExtension = (dropImagePlugin) => {
     return TiptapImage.extend({
       addProseMirrorPlugins() {
-        return [dropImagePlugin(uploadFn)];
+        return [dropImagePlugin];
       }
     }).configure({
       allowBase64: true,
@@ -671,9 +862,16 @@
     name: "CustomKeymap",
     addCommands() {
       return {
-        selectTextWithinNodeBoundaries: () => ({ editor, commands }) => {
-          const { state: state2 } = editor;
-          const { tr } = state2;
+        selectTextWithinNodeBoundaries: () => ({
+          editor,
+          commands
+        }) => {
+          const {
+            state: state2
+          } = editor;
+          const {
+            tr
+          } = state2;
           const startNodePos = tr.selection.$from.start();
           const endNodePos = tr.selection.$to.end();
           return commands.setTextSelection({
@@ -685,9 +883,15 @@
     },
     addKeyboardShortcuts() {
       return {
-        "Mod-a": ({ editor }) => {
-          const { state: state2 } = editor;
-          const { tr } = state2;
+        "Mod-a": ({
+          editor
+        }) => {
+          const {
+            state: state2
+          } = editor;
+          const {
+            tr
+          } = state2;
           const startSelectionPos = tr.selection.from;
           const endSelectionPos = tr.selection.to;
           const startNodePos = tr.selection.$from.start();
@@ -702,20 +906,76 @@
       };
     }
   });
-  function absoluteRect(node) {
-    const data = node.getBoundingClientRect();
+  function serializeForClipboard(view2, slice) {
+    view2.someProp("transformCopied", (f) => {
+      slice = f(slice, view2);
+    });
+    const context = [];
+    let {
+      content,
+      openStart,
+      openEnd
+    } = slice;
+    while (openStart > 1 && openEnd > 1 && content.childCount == 1 && content.firstChild.childCount == 1) {
+      openStart--;
+      openEnd--;
+      const node = content.firstChild;
+      context.push(node.type.name, node.attrs != node.type.defaultAttrs ? node.attrs : null);
+      content = node.content;
+    }
+    const serializer = view2.someProp("clipboardSerializer") || model.DOMSerializer.fromSchema(view2.state.schema);
+    const doc = detachedDoc(), wrap = doc.createElement("div");
+    wrap.appendChild(serializer.serializeFragment(content, {
+      document: doc
+    }));
+    let firstChild = wrap.firstChild, needsWrap, wrappers = 0;
+    while (firstChild && firstChild.nodeType == 1 && (needsWrap = wrapMap[firstChild.nodeName.toLowerCase()])) {
+      for (let i = needsWrap.length - 1; i >= 0; i--) {
+        const wrapper = doc.createElement(needsWrap[i]);
+        while (wrap.firstChild) wrapper.appendChild(wrap.firstChild);
+        wrap.appendChild(wrapper);
+        wrappers++;
+      }
+      firstChild = wrap.firstChild;
+    }
+    if (firstChild && firstChild.nodeType == 1) firstChild.setAttribute("data-pm-slice", `${openStart} ${openEnd}${wrappers ? ` -${wrappers}` : ""} ${JSON.stringify(context)}`);
+    const text = view2.someProp("clipboardTextSerializer", (f) => f(slice, view2)) || slice.content.textBetween(0, slice.content.size, "\n\n");
+    return {
+      dom: wrap,
+      text,
+      slice
+    };
+  }
+  const wrapMap = {
+    thead: ["table"],
+    tbody: ["table"],
+    tfoot: ["table"],
+    caption: ["table"],
+    colgroup: ["table"],
+    col: ["table", "colgroup"],
+    tr: ["table", "tbody"],
+    td: ["table", "tbody", "tr"],
+    th: ["table", "tbody", "tr"]
+  };
+  let _detachedDoc = null;
+  function detachedDoc() {
+    return _detachedDoc || (_detachedDoc = document.implementation.createHTMLDocument("title"));
+  }
+  function absoluteRect(element) {
+    const data = element.getBoundingClientRect();
+    let ancestor = element.parentElement;
+    while (ancestor && window.getComputedStyle(ancestor).position === "static") {
+      ancestor = ancestor.parentElement;
+    }
+    const ancestorRect = ancestor?.getBoundingClientRect();
     return {
-      top: data.top,
-      left: data.left,
+      top: data.top - (ancestorRect?.top ?? 0),
+      left: data.left - (ancestorRect?.left ?? 0),
       width: data.width
     };
   }
   function nodeDOMAtCoords(coords) {
-    return document.elementsFromPoint(coords.x, coords.y).find(
-      (elem) => elem.parentElement?.matches?.(".ProseMirror") || elem.matches(
-        ["li", "p:not(:first-child)", "pre", "blockquote", "h1, h2, h3, h4, h5, h6"].join(", ")
-      )
-    );
+    return document.elementsFromPoint(coords.x, coords.y).find((elem) => elem.parentElement?.matches?.(".ProseMirror") || elem.matches(["li", "p:not(:first-child)", "pre", "blockquote", "h1, h2, h3, h4, h5, h6"].join(", ")));
   }
   function nodePosAtDOM(node, view2, options) {
     const boundingRect = node.getBoundingClientRect();
@@ -725,25 +985,31 @@
     })?.inside;
   }
   function DragHandle(options) {
-    function handleDragStart(event, view$1) {
-      view$1.focus();
+    function handleDragStart(event, view2) {
+      view2.focus();
       if (!event.dataTransfer) return;
       const node = nodeDOMAtCoords({
         x: event.clientX + 50 + options.dragHandleWidth,
         y: event.clientY
       });
       if (!(node instanceof Element)) return;
-      const nodePos = nodePosAtDOM(node, view$1, options);
+      const nodePos = nodePosAtDOM(node, view2, options);
       if (nodePos == null || nodePos < 0) return;
-      view$1.dispatch(view$1.state.tr.setSelection(state.NodeSelection.create(view$1.state.doc, nodePos)));
-      const slice = view$1.state.selection.content();
-      const { dom, text } = view.__serializeForClipboard(view$1, slice);
+      view2.dispatch(view2.state.tr.setSelection(state.NodeSelection.create(view2.state.doc, nodePos)));
+      const slice = view2.state.selection.content();
+      const {
+        dom: dom2,
+        text
+      } = serializeForClipboard(view2, slice);
       event.dataTransfer.clearData();
-      event.dataTransfer.setData("text/html", dom.innerHTML);
+      event.dataTransfer.setData("text/html", dom2.innerHTML);
       event.dataTransfer.setData("text/plain", text);
       event.dataTransfer.effectAllowed = "copyMove";
       event.dataTransfer.setDragImage(node, 0, 0);
-      view$1.dragging = { slice, move: event.ctrlKey };
+      view2.dragging = {
+        slice,
+        move: event.ctrlKey
+      };
     }
     function handleClick(event, view2) {
       view2.focus();
@@ -784,8 +1050,6 @@
         view2?.dom?.parentElement?.appendChild(dragHandleElement);
         return {
           destroy: () => {
-            dragHandleElement?.remove?.();
-            dragHandleElement = null;
           }
         };
       },
@@ -841,301 +1105,843 @@
   const DragAndDrop = core.Extension.create({
     name: "dragAndDrop",
     addProseMirrorPlugins() {
-      return [
-        DragHandle({
-          dragHandleWidth: 24
-        })
-      ];
+      return [DragHandle({
+        dragHandleWidth: 24
+      })];
     }
   });
-  const FireCMSEditor = ({
-    handleImageUpload,
-    initialContent,
-    onJsonContentChange,
-    onHtmlContentChange,
-    onMarkdownContentChange
-  }) => {
-    const defaultEditorProps = {
-      handleDOMEvents: {
-        keydown: (_view, event) => {
-          if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
-            const slashCommand2 = document.querySelector("#slash-command");
-            if (slashCommand2) {
-              return true;
+  function buildDecorationSet(highlight, doc) {
+    const decorations = [];
+    if (highlight) {
+      decorations.push(view.Decoration.inline(highlight.from, highlight.to, {
+        class: "dark:bg-surface-accent-700 bg-surface-accent-300"
+      }));
+    }
+    const decorationSet = view.DecorationSet.create(doc, decorations);
+    return decorationSet;
+  }
+  const HighlightDecorationExtension = (initialHighlight) => core.Extension.create({
+    name: "highlightDecoration",
+    addOptions() {
+      return {
+        pluginKey: new state.PluginKey("highlightDecoration"),
+        highlight: initialHighlight
+      };
+    },
+    addProseMirrorPlugins() {
+      const pluginKey = this.options.pluginKey;
+      return [new state.Plugin({
+        key: pluginKey,
+        state: {
+          init: (_, {
+            doc
+          }) => {
+            const highlight = this.options.highlight;
+            const decorationSet = highlight && doc ? buildDecorationSet(highlight, doc) : view.DecorationSet.empty;
+            return {
+              decorationSet,
+              highlight
+            };
+          },
+          apply(transaction, oldState) {
+            const action = transaction.getMeta(pluginKey);
+            const highlight = action?.range;
+            if (action?.type === "highlightDecoration") {
+              const doc = transaction.doc;
+              const {
+                remove
+              } = action;
+              if (remove) {
+                return {
+                  decorationSet: view.DecorationSet.empty
+                };
+              }
+              const decorationSet = buildDecorationSet(highlight, doc);
+              return {
+                decorationSet,
+                highlight
+              };
+            } else {
+              return oldState;
             }
           }
-          return false;
+        },
+        props: {
+          decorations(state2) {
+            const autocompleteState = this.getState(state2);
+            if (autocompleteState?.decorationSet) {
+              return autocompleteState.decorationSet;
+            } else {
+              return view.DecorationSet.empty;
+            }
+          }
+        }
+      })];
+    },
+    addCommands() {
+      return {
+        toggleAutocompleteHighlight: (range) => ({
+          state: state2,
+          dispatch
+        }) => {
+          const {
+            selection
+          } = state2;
+          const pos = selection.from;
+          if (!dispatch) return false;
+          const pluginKey = this.options.pluginKey;
+          const tr = state2.tr.setMeta(pluginKey, {
+            pos,
+            type: "highlightDecoration",
+            remove: false,
+            range
+          });
+          dispatch(tr);
+          return true;
+        },
+        removeAutocompleteHighlight: () => ({
+          state: state2,
+          dispatch
+        }) => {
+          if (!dispatch) return false;
+          const pluginKey = this.options.pluginKey;
+          const tr = state2.tr.setMeta(pluginKey, {
+            pos: 0,
+            // We can pass any position as it will remove the entire decoration set
+            type: "highlightDecoration",
+            remove: true
+          });
+          dispatch(tr);
+          return true;
+        }
+      };
+    }
+  });
+  const CommandPluginKey = new state.PluginKey("slash-command");
+  const SlashCommand = core.Node.create({
+    name: "command",
+    addOptions() {
+      return {
+        HTMLAttributes: {},
+        renderText({
+          options,
+          node
+        }) {
+          return `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`;
+        },
+        deleteTriggerWithBackspace: false,
+        renderHTML({
+          options,
+          node
+        }) {
+          return ["span", core.mergeAttributes(this.HTMLAttributes, options.HTMLAttributes), `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`];
+        },
+        suggestion: {
+          char: "/",
+          pluginKey: CommandPluginKey,
+          command: ({
+            editor,
+            range,
+            props
+          }) => {
+            const nodeAfter = editor.view.state.selection.$to.nodeAfter;
+            const overrideSpace = nodeAfter?.text?.startsWith(" ");
+            if (overrideSpace) {
+              range.to += 1;
+            }
+            editor.chain().focus().insertContentAt(range, [{
+              type: this.name,
+              attrs: props
+            }, {
+              type: "text",
+              text: " "
+            }]).run();
+            window.getSelection()?.collapseToEnd();
+          },
+          allow: ({
+            state: state2,
+            range
+          }) => {
+            const $from = state2.doc.resolve(range.from);
+            const type = state2.schema.nodes[this.name];
+            return !!$from.parent.type.contentMatch.matchType(type);
+          }
         }
+      };
+    },
+    group: "inline",
+    inline: true,
+    selectable: false,
+    atom: true,
+    addAttributes() {
+      return {
+        id: {
+          default: null,
+          parseHTML: (element) => element.getAttribute("data-id"),
+          renderHTML: (attributes) => {
+            if (!attributes.id) {
+              return {};
+            }
+            return {
+              "data-id": attributes.id
+            };
+          }
+        },
+        label: {
+          default: null,
+          parseHTML: (element) => element.getAttribute("data-label"),
+          renderHTML: (attributes) => {
+            if (!attributes.label) {
+              return {};
+            }
+            return {
+              "data-label": attributes.label
+            };
+          }
+        }
+      };
+    },
+    parseHTML() {
+      return [{
+        tag: `span[data-type="${this.name}"]`
+      }];
+    },
+    renderHTML({
+      node,
+      HTMLAttributes
+    }) {
+      if (this.options.renderLabel !== void 0) {
+        console.warn("renderLabel is deprecated use renderText and renderHTML instead");
+        return ["span", core.mergeAttributes({
+          "data-type": this.name
+        }, this.options.HTMLAttributes, HTMLAttributes), this.options.renderLabel({
+          options: this.options,
+          node
+        })];
       }
-      // handlePaste: (view, event) => {
-      //     if (event.clipboardData && event.clipboardData.files && event.clipboardData.files[0]) {
-      //         event.preventDefault();
-      //         const file = event.clipboardData.files[0];
-      //         const pos = view.state.selection.from;
-      //
-      //         // startImageUpload({ file, view, pos, handleImageUpload });
-      //         return true;
-      //     }
-      //     return false;
-      // },
-      // handleDrop: (view, event, _slice, moved) => {
-      //     console.log("handleDrop", { event, moved });
-      //     if (!moved && event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {
-      //         console.log("handleDrop!!!", { event, moved });
-      //         event.preventDefault();
-      //         const file = event.dataTransfer.files[0];
-      //         const coordinates = view.posAtCoords({
-      //             left: event.clientX,
-      //             top: event.clientY
-      //         });
-      //         // here we deduct 1 from the pos or else the image will create an extra node
-      //         startImageUpload({
-      //             file,
-      //             view,
-      //             pos: coordinates?.pos || 0 - 1,
-      //             handleImageUpload,
-      //         });
-      //         return true;
-      //     }
-      //     return false;
-      // }
-    };
-    const suggestionItems = createSuggestionItems([
-      {
-        title: "Text",
-        description: "Just start typing with plain text.",
-        searchTerms: ["p", "paragraph"],
-        icon: /* @__PURE__ */ jsxRuntime.jsx(ui.TextFieldsIcon, { size: 18 }),
-        command: ({ editor, range }) => {
-          editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").run();
+      const mergedOptions = {
+        ...this.options
+      };
+      mergedOptions.HTMLAttributes = core.mergeAttributes({
+        "data-type": this.name
+      }, this.options.HTMLAttributes, HTMLAttributes);
+      const html = this.options.renderHTML({
+        options: mergedOptions,
+        node
+      });
+      if (typeof html === "string") {
+        return ["span", core.mergeAttributes({
+          "data-type": this.name
+        }, this.options.HTMLAttributes, HTMLAttributes), html];
+      }
+      return html;
+    },
+    renderText({
+      node
+    }) {
+      return this.options.renderText({
+        options: this.options,
+        node
+      });
+    },
+    addKeyboardShortcuts() {
+      return {
+        Backspace: () => this.editor.commands.command(({
+          tr,
+          state: state2
+        }) => {
+          let isCommand = false;
+          const {
+            selection
+          } = state2;
+          const {
+            empty,
+            anchor
+          } = selection;
+          if (!empty) {
+            return false;
+          }
+          state2.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {
+            if (node.type.name === this.name) {
+              isCommand = true;
+              tr.insertText(this.options.deleteTriggerWithBackspace ? "" : this.options.suggestion.char || "", pos, pos + node.nodeSize);
+              return false;
+            }
+            return true;
+          });
+          return isCommand;
+        })
+      };
+    },
+    addProseMirrorPlugins() {
+      return [Suggestion({
+        editor: this.editor,
+        ...this.options.suggestion
+      })];
+    }
+  });
+  const suggestion = (ref, {
+    upload,
+    aiController
+  }) => ({
+    items: ({
+      query
+    }) => {
+      const availableSuggestionItems = [...suggestionItems];
+      if (aiController) {
+        availableSuggestionItems.push(autocompleteSuggestionItem);
+      }
+      return availableSuggestionItems.filter((item) => {
+        const inTitle = item.title.toLowerCase().startsWith(query.toLowerCase());
+        if (inTitle) return inTitle;
+        return item.searchTerms?.some((term) => term.toLowerCase().startsWith(query.toLowerCase()));
+      });
+    },
+    render: () => {
+      let component;
+      let containerEl = null;
+      let cleanupAutoUpdate = null;
+      let reference = null;
+      return {
+        onStart: (props) => {
+          component = new react.ReactRenderer(CommandList, {
+            props: {
+              ...props,
+              upload,
+              aiController
+            },
+            editor: props.editor
+          });
+          if (!props.clientRect) {
+            return;
+          }
+          containerEl = document.createElement("div");
+          containerEl.style.position = "fixed";
+          containerEl.style.left = "0px";
+          containerEl.style.top = "0px";
+          containerEl.style.zIndex = "9999";
+          (ref?.current || document.body).appendChild(containerEl);
+          containerEl.appendChild(component.element);
+          reference = {
+            getBoundingClientRect: props.clientRect
+          };
+          cleanupAutoUpdate = dom.autoUpdate(reference, containerEl, () => {
+            if (!reference) return;
+            dom.computePosition(reference, containerEl, {
+              placement: "bottom-start",
+              middleware: [dom.offset(4), dom.flip(), dom.shift()],
+              strategy: "fixed"
+            }).then(({
+              x,
+              y
+            }) => {
+              Object.assign(containerEl.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+                visibility: "visible"
+              });
+            });
+          });
+        },
+        onUpdate(props) {
+          component.updateProps(props);
+          if (!props.clientRect || !containerEl || !reference) {
+            return;
+          }
+          reference.getBoundingClientRect = props.clientRect;
+          dom.computePosition(reference, containerEl, {
+            placement: "bottom-start",
+            middleware: [dom.offset(4), dom.flip(), dom.shift()],
+            strategy: "fixed"
+          }).then(({
+            x,
+            y
+          }) => {
+            Object.assign(containerEl.style, {
+              left: `${x}px`,
+              top: `${y}px`,
+              visibility: "visible"
+            });
+          });
+        },
+        onKeyDown(props) {
+          if (props.event.key === "Escape") {
+            props.event.preventDefault();
+            return true;
+          }
+          return component.ref?.onKeyDown(props);
+        },
+        onExit() {
+          if (cleanupAutoUpdate) cleanupAutoUpdate();
+          if (containerEl && containerEl.parentNode) {
+            containerEl.parentNode.removeChild(containerEl);
+          }
+          containerEl = null;
+          reference = null;
+          component?.destroy();
         }
-      },
-      {
-        title: "To-do List",
-        description: "Track tasks with a to-do list.",
-        searchTerms: ["todo", "task", "list", "check", "checkbox"],
-        icon: /* @__PURE__ */ jsxRuntime.jsx(ui.CheckBoxIcon, { size: 18 }),
-        command: ({ editor, range }) => {
-          editor.chain().focus().deleteRange(range).toggleTaskList().run();
+      };
+    }
+  });
+  const CommandList = React.forwardRef((props, ref) => {
+    const $ = reactCompilerRuntime.c(33);
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+    const {
+      editor
+    } = react.useCurrentEditor();
+    let t0;
+    if ($[0] !== editor || $[1] !== props.aiController || $[2] !== props.range || $[3] !== props.upload) {
+      t0 = (item) => {
+        if (!editor) {
+          return;
         }
-      },
-      {
-        title: "Heading 1",
-        description: "Big section heading.",
-        searchTerms: ["title", "big", "large"],
-        icon: /* @__PURE__ */ jsxRuntime.jsx(ui.LooksOneIcon, { size: 18 }),
-        command: ({ editor, range }) => {
-          editor.chain().focus().deleteRange(range).setNode("heading", { level: 1 }).run();
+        item?.command?.({
+          editor,
+          range: props.range,
+          upload: props.upload,
+          aiController: props.aiController
+        });
+      };
+      $[0] = editor;
+      $[1] = props.aiController;
+      $[2] = props.range;
+      $[3] = props.upload;
+      $[4] = t0;
+    } else {
+      t0 = $[4];
+    }
+    const selectItem = t0;
+    let t1;
+    if ($[5] !== props.items.length || $[6] !== selectedIndex) {
+      t1 = () => {
+        setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length);
+      };
+      $[5] = props.items.length;
+      $[6] = selectedIndex;
+      $[7] = t1;
+    } else {
+      t1 = $[7];
+    }
+    const upHandler = t1;
+    let t2;
+    if ($[8] !== props.items.length || $[9] !== selectedIndex) {
+      t2 = () => {
+        setSelectedIndex((selectedIndex + 1) % props.items.length);
+      };
+      $[8] = props.items.length;
+      $[9] = selectedIndex;
+      $[10] = t2;
+    } else {
+      t2 = $[10];
+    }
+    const downHandler = t2;
+    let t3;
+    if ($[11] !== props.items || $[12] !== selectItem || $[13] !== selectedIndex) {
+      t3 = () => {
+        const item_0 = props.items[selectedIndex];
+        selectItem(item_0);
+      };
+      $[11] = props.items;
+      $[12] = selectItem;
+      $[13] = selectedIndex;
+      $[14] = t3;
+    } else {
+      t3 = $[14];
+    }
+    const enterHandler = t3;
+    let t4;
+    if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+      t4 = () => setSelectedIndex(0);
+      $[15] = t4;
+    } else {
+      t4 = $[15];
+    }
+    let t5;
+    if ($[16] !== props.items) {
+      t5 = [props.items];
+      $[16] = props.items;
+      $[17] = t5;
+    } else {
+      t5 = $[17];
+    }
+    React.useEffect(t4, t5);
+    let t6;
+    if ($[18] !== downHandler || $[19] !== enterHandler || $[20] !== upHandler) {
+      t6 = () => ({
+        onKeyDown: (t72) => {
+          const {
+            event
+          } = t72;
+          if (event.key === "ArrowUp") {
+            upHandler();
+            return true;
+          }
+          if (event.key === "ArrowDown") {
+            downHandler();
+            return true;
+          }
+          if (event.key === "Enter") {
+            enterHandler();
+            return true;
+          }
+          return false;
         }
-      },
-      {
-        title: "Heading 2",
-        description: "Medium section heading.",
-        searchTerms: ["subtitle", "medium"],
-        icon: /* @__PURE__ */ jsxRuntime.jsx(ui.LooksTwoIcon, { size: 18 }),
-        command: ({ editor, range }) => {
-          editor.chain().focus().deleteRange(range).setNode("heading", { level: 2 }).run();
+      });
+      $[18] = downHandler;
+      $[19] = enterHandler;
+      $[20] = upHandler;
+      $[21] = t6;
+    } else {
+      t6 = $[21];
+    }
+    React.useImperativeHandle(ref, t6);
+    let t7;
+    if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+      t7 = [];
+      $[22] = t7;
+    } else {
+      t7 = $[22];
+    }
+    const itemRefs = React.useRef(t7);
+    let t8;
+    let t9;
+    if ($[23] !== selectedIndex) {
+      t8 = () => {
+        if (itemRefs.current[selectedIndex]) {
+          itemRefs.current[selectedIndex].scrollIntoView({
+            block: "nearest"
+          });
         }
-      },
-      {
-        title: "Heading 3",
-        description: "Small section heading.",
-        searchTerms: ["subtitle", "small"],
-        icon: /* @__PURE__ */ jsxRuntime.jsx(ui.Looks3Icon, { size: 18 }),
-        command: ({ editor, range }) => {
-          editor.chain().focus().deleteRange(range).setNode("heading", { level: 3 }).run();
+      };
+      t9 = [selectedIndex];
+      $[23] = selectedIndex;
+      $[24] = t8;
+      $[25] = t9;
+    } else {
+      t8 = $[24];
+      t9 = $[25];
+    }
+    React.useEffect(t8, t9);
+    let t10;
+    if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+      t10 = ui.cls("text-surface-900 dark:text-white z-50 max-h-[280px] h-auto w-72 overflow-y-auto rounded-md border bg-white dark:bg-surface-900 px-1 py-2 shadow transition-all", ui.defaultBorderMixin);
+      $[26] = t10;
+    } else {
+      t10 = $[26];
+    }
+    let t11;
+    if ($[27] !== props.items || $[28] !== selectItem || $[29] !== selectedIndex) {
+      t11 = props.items.length ? props.items.map((item_1, index) => /* @__PURE__ */ jsxRuntime.jsxs("button", { value: item_1.title, ref: (el) => {
+        if (!el) {
+          return;
         }
-      },
-      {
-        title: "Bullet List",
-        description: "Create a simple bullet list.",
-        searchTerms: ["unordered", "point"],
-        icon: /* @__PURE__ */ jsxRuntime.jsx(ui.FormatListBulletedIcon, { size: 18 }),
-        command: ({ editor, range }) => {
-          editor.chain().focus().deleteRange(range).toggleBulletList().run();
+        itemRefs.current[index] = el;
+      }, onClick: () => selectItem(item_1), tabIndex: index === selectedIndex ? 0 : -1, "aria-selected": index === selectedIndex, className: ui.cls("flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm hover:bg-blue-50 hover:dark:bg-surface-700 aria-selected:bg-blue-50 aria-selected:dark:bg-surface-700", index === selectedIndex ? "bg-blue-100 dark:bg-surface-accent-950" : ""), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls("flex h-10 w-10 items-center justify-center rounded-md border bg-white dark:bg-surface-900", ui.defaultBorderMixin), children: item_1.icon }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: item_1.title }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-surface-700 dark:text-surface-accent-300", children: item_1.description })
+        ] })
+      ] }, item_1.title)) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "item", children: "No result" });
+      $[27] = props.items;
+      $[28] = selectItem;
+      $[29] = selectedIndex;
+      $[30] = t11;
+    } else {
+      t11 = $[30];
+    }
+    let t12;
+    if ($[31] !== t11) {
+      t12 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: t10, children: t11 });
+      $[31] = t11;
+      $[32] = t12;
+    } else {
+      t12 = $[32];
+    }
+    return t12;
+  });
+  CommandList.displayName = "CommandList";
+  const autocompleteSuggestionItem = {
+    title: "Autocomplete",
+    description: "Add text based on the context.",
+    searchTerms: ["ai"],
+    icon: /* @__PURE__ */ jsxRuntime.jsx(ui.AutoFixHighIcon, { size: 18 }),
+    command: async ({
+      editor,
+      range,
+      aiController
+    }) => {
+      if (!aiController) throw Error("No AiController");
+      editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").run();
+      const {
+        state: state2
+      } = editor;
+      const {
+        from,
+        to
+      } = state2.selection;
+      const textBeforeCursor = state2.doc.textBetween(0, from, "\n");
+      const textAfterCursor = state2.doc.textBetween(to, state2.doc.content.size, "\n");
+      let buffer = "";
+      const result = await aiController.autocomplete(textBeforeCursor, textAfterCursor, (delta) => {
+        buffer += delta;
+        if (delta.length !== 0) {
+          editor.chain().focus().toggleLoadingDecoration(buffer).run();
         }
-      },
-      {
-        title: "Numbered List",
-        description: "Create a list with numbering.",
-        searchTerms: ["ordered"],
-        icon: /* @__PURE__ */ jsxRuntime.jsx(ui.FormatListNumberedIcon, { size: 18 }),
-        command: ({ editor, range }) => {
-          editor.chain().focus().deleteRange(range).toggleOrderedList().run();
+      });
+      editor.chain().focus().insertContent(result, {
+        applyInputRules: false,
+        applyPasteRules: false,
+        parseOptions: {
+          preserveWhitespace: false
         }
-      },
-      {
-        title: "Quote",
-        description: "Capture a quote.",
-        searchTerms: ["blockquote"],
-        icon: /* @__PURE__ */ jsxRuntime.jsx(ui.FormatQuoteIcon, { size: 18 }),
-        command: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").toggleBlockquote().run()
-      },
-      {
-        title: "Code",
-        description: "Capture a code snippet.",
-        searchTerms: ["codeblock"],
-        icon: /* @__PURE__ */ jsxRuntime.jsx(ui.CodeIcon, { size: 18 }),
-        command: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleCodeBlock().run()
-      },
-      {
-        title: "Image",
-        description: "Upload an image from your computer.",
-        searchTerms: ["photo", "picture", "media"],
-        icon: /* @__PURE__ */ jsxRuntime.jsx(ui.ImageIcon, { size: 18 }),
-        command: ({ editor, range }) => {
-          editor.chain().focus().deleteRange(range).run();
-          const input = document.createElement("input");
-          input.type = "file";
-          input.accept = "image/*";
-          input.onchange = async () => {
-            if (input.files?.length) {
-              const file = input.files[0];
-              if (!file) return;
-              editor.view.state.selection.from;
-            }
-          };
-          input.click();
+      }).run();
+    }
+  };
+  const suggestionItems = [{
+    title: "Text",
+    description: "Just start typing with plain text.",
+    searchTerms: ["p", "paragraph"],
+    icon: /* @__PURE__ */ jsxRuntime.jsx(ui.TextFieldsIcon, { size: 18 }),
+    command: ({
+      editor,
+      range
+    }) => {
+      editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").run();
+    }
+  }, {
+    title: "To-do List",
+    description: "Track tasks with a to-do list.",
+    searchTerms: ["todo", "task", "list", "check", "checkbox"],
+    icon: /* @__PURE__ */ jsxRuntime.jsx(ui.CheckBoxIcon, { size: 18 }),
+    command: ({
+      editor,
+      range
+    }) => {
+      editor.chain().focus().deleteRange(range).toggleTaskList().run();
+    }
+  }, {
+    title: "Heading 1",
+    description: "Big section heading.",
+    searchTerms: ["title", "big", "large"],
+    icon: /* @__PURE__ */ jsxRuntime.jsx(ui.LooksOneIcon, { size: 18 }),
+    command: ({
+      editor,
+      range
+    }) => {
+      editor.chain().focus().deleteRange(range).setNode("heading", {
+        level: 1
+      }).run();
+    }
+  }, {
+    title: "Heading 2",
+    description: "Medium section heading.",
+    searchTerms: ["subtitle", "medium"],
+    icon: /* @__PURE__ */ jsxRuntime.jsx(ui.LooksTwoIcon, { size: 18 }),
+    command: ({
+      editor,
+      range
+    }) => {
+      editor.chain().focus().deleteRange(range).setNode("heading", {
+        level: 2
+      }).run();
+    }
+  }, {
+    title: "Heading 3",
+    description: "Small section heading.",
+    searchTerms: ["subtitle", "small"],
+    icon: /* @__PURE__ */ jsxRuntime.jsx(ui.Looks3Icon, { size: 18 }),
+    command: ({
+      editor,
+      range
+    }) => {
+      editor.chain().focus().deleteRange(range).setNode("heading", {
+        level: 3
+      }).run();
+    }
+  }, {
+    title: "Bullet List",
+    description: "Create a simple bullet list.",
+    searchTerms: ["unordered", "point"],
+    icon: /* @__PURE__ */ jsxRuntime.jsx(ui.FormatListBulletedIcon, { size: 18 }),
+    command: ({
+      editor,
+      range
+    }) => {
+      editor.chain().focus().deleteRange(range).toggleBulletList().run();
+    }
+  }, {
+    title: "Numbered List",
+    description: "Create a list with numbering.",
+    searchTerms: ["ordered"],
+    icon: /* @__PURE__ */ jsxRuntime.jsx(ui.FormatListNumberedIcon, { size: 18 }),
+    command: ({
+      editor,
+      range
+    }) => {
+      editor.chain().focus().deleteRange(range).toggleOrderedList().run();
+    }
+  }, {
+    title: "Quote",
+    description: "Capture a quote.",
+    searchTerms: ["blockquote"],
+    icon: /* @__PURE__ */ jsxRuntime.jsx(ui.FormatQuoteIcon, { size: 18 }),
+    command: ({
+      editor,
+      range
+    }) => editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").toggleBlockquote().run()
+  }, {
+    title: "Code",
+    description: "Capture a code snippet.",
+    searchTerms: ["codeblock"],
+    icon: /* @__PURE__ */ jsxRuntime.jsx(ui.CodeIcon, { size: 18 }),
+    command: ({
+      editor,
+      range
+    }) => editor.chain().focus().deleteRange(range).toggleCodeBlock().run()
+  }, {
+    title: "Image",
+    description: "Upload an image from your computer.",
+    searchTerms: ["photo", "picture", "media", "upload", "file"],
+    icon: /* @__PURE__ */ jsxRuntime.jsx(ui.ImageIcon, { size: 18 }),
+    command: ({
+      editor,
+      range,
+      upload
+    }) => {
+      editor.chain().focus().deleteRange(range).run();
+      const input = document.createElement("input");
+      input.type = "file";
+      input.accept = "image/*";
+      input.onchange = async () => {
+        if (input.files?.length) {
+          const file = input.files[0];
+          if (!file) return;
+          const pos = editor.view.state.selection.from;
+          const fileList = input.files;
+          const files = Array.from(fileList);
+          const images = files.filter((file2) => /image/i.test(file2.type));
+          if (images.length === 0) {
+            console.log("No images found in uploaded files");
+            return false;
+          }
+          const view2 = editor.view;
+          images.forEach((image) => {
+            const reader = new FileReader();
+            reader.onload = async (readerEvent) => {
+              await onFileRead(view2, readerEvent, pos, upload, image);
+            };
+            reader.readAsDataURL(image);
+          });
         }
-      }
-    ]);
-    const slashCommand = Command.configure({
-      suggestion: {
-        items: () => suggestionItems,
-        render: renderItems
-      }
-    });
-    const imageExtension = React.useMemo(() => createImageExtension(handleImageUpload), []);
-    const extensions = [
-      TiptapUnderline,
-      TextStyle,
-      extensionColor.Color,
-      Highlight.configure({
-        multicolor: true
-      }),
-      tiptapMarkdown.Markdown.configure({
-        html: false,
-        transformCopiedText: true
-      }),
-      CustomKeymap,
-      DragAndDrop,
-      starterKit,
-      placeholder,
-      tiptapLink,
-      // tiptapImage,
-      imageExtension,
-      // updatedImage,
-      taskList,
-      taskItem,
-      horizontalRule,
-      slashCommand
-    ];
+        return true;
+      };
+      input.click();
+    }
+  }];
+  const proseClasses = {
+    "sm": "prose-sm",
+    "base": "prose-base",
+    "lg": "prose-lg"
+  };
+  const canUseDOM = Boolean(typeof window !== "undefined" && window.document && window.document.createElement);
+  const FireCMSEditor = ({
+    content,
+    onJsonContentChange,
+    onHtmlContentChange,
+    onMarkdownContentChange,
+    version,
+    textSize = "base",
+    highlight,
+    handleImageUpload,
+    aiController,
+    disabled
+  }) => {
+    const ref = React.useRef(null);
+    const editorRef = React.useRef(null);
+    const imagePlugin = createDropImagePlugin(handleImageUpload);
+    const imageExtension = React.useMemo(() => createImageExtension(imagePlugin), []);
     const [openNode, setOpenNode] = React.useState(false);
     const [openLink, setOpenLink] = React.useState(false);
     ui.useInjectStyles("Editor", cssStyles);
-    const editorRef = React.useRef(null);
-    const [markdownContent, setMarkdownContent] = React.useState(null);
-    const [jsonContent, setJsonContent] = React.useState(null);
-    const [htmlContent, setHtmlContent] = React.useState(null);
+    const deferredHighlight = React.useDeferredValue(highlight);
+    React.useEffect(() => {
+      if (version === void 0) return;
+      if (version > -1 && editorRef.current) {
+        editorRef.current?.commands.setContent(content ?? "");
+      }
+    }, [version]);
+    React.useEffect(() => {
+      editorRef?.current?.setEditable(!disabled);
+    }, [disabled]);
+    React.useEffect(() => {
+      if (version === void 0) return;
+      if (editorRef.current && version > 0) {
+        const chain = editorRef.current.chain();
+        if (deferredHighlight) {
+          chain.focus().toggleAutocompleteHighlight(deferredHighlight).run();
+        } else {
+          chain.focus().removeAutocompleteHighlight().run();
+        }
+      }
+    }, [deferredHighlight?.from, deferredHighlight?.to]);
+    const firstUpdateRef = React.useRef(true);
     const onEditorUpdate = (editor) => {
       editorRef.current = editor;
+      if (firstUpdateRef.current) {
+        firstUpdateRef.current = false;
+        return;
+      }
       if (onMarkdownContentChange) {
-        setMarkdownContent(editor.storage.markdown.getMarkdown());
+        const markdown = editorRef.current.storage.markdown.getMarkdown();
+        onMarkdownContentChange?.(addLineBreakAfterImages(markdown));
       }
       if (onJsonContentChange) {
-        setJsonContent(removeClassesFromJson(editor.getJSON()));
+        const jsonContent = removeClassesFromJson(editor.getJSON());
+        onJsonContentChange(jsonContent);
       }
       if (onHtmlContentChange) {
-        setHtmlContent(editor.getHTML());
+        onHtmlContentChange?.(editor.getHTML());
       }
     };
-    useDebouncedCallback(markdownContent, () => {
-      if (editorRef.current) {
-        const markdown = editorRef.current.storage.markdown.getMarkdown();
-        onMarkdownContentChange?.(addLineBreakAfterImages(markdown));
-      }
-    }, false, 500);
-    useDebouncedCallback(jsonContent, () => {
-      if (jsonContent)
-        onJsonContentChange?.(jsonContent);
-    }, false, 500);
-    useDebouncedCallback(htmlContent, () => {
-      if (htmlContent)
-        onHtmlContentChange?.(htmlContent);
-    }, false, 500);
-    if (!initialContent) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full p-8", children: /* @__PURE__ */ jsxRuntime.jsx(EditorRoot, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: "relative min-h-[500px] w-full bg-white dark:bg-gray-950 rounded-lg",
-        children: /* @__PURE__ */ jsxRuntime.jsxs(
-          react.EditorProvider,
-          {
-            content: initialContent,
-            extensions,
-            editorProps: {
-              ...defaultEditorProps,
-              attributes: {
-                class: "prose-lg prose-headings:font-title font-default focus:outline-none max-w-full p-12"
-              }
-            },
-            onUpdate: ({ editor }) => {
-              console.debug("Editor updated");
-              onEditorUpdate(editor);
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                EditorCommand,
-                {
-                  className: ui.cls("text-gray-900 dark:text-white z-50 h-auto max-h-[330px] w-72 overflow-y-auto rounded-md border bg-white dark:bg-gray-900 px-1 py-2 shadow transition-all", ui.defaultBorderMixin),
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(EditorCommandEmpty, { className: "px-2 text-gray-700 dark:text-slate-300", children: "No results" }),
-                    suggestionItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
-                      EditorCommandItem,
-                      {
-                        value: item.title,
-                        onCommand: (val) => item?.command?.(val),
-                        className: "flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm hover:bg-blue-50 hover:dark:bg-gray-700 aria-selected:bg-blue-50 aria-selected:dark:bg-gray-700",
-                        children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            "div",
-                            {
-                              className: ui.cls("flex h-10 w-10 items-center justify-center rounded-md border bg-white dark:bg-gray-900", ui.defaultBorderMixin),
-                              children: item.icon
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: item.title }),
-                            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-700 dark:text-slate-300", children: item.description })
-                          ] })
-                        ]
-                      },
-                      item.title
-                    ))
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                EditorBubble,
-                {
-                  tippyOptions: {
-                    placement: "top"
-                  },
-                  className: ui.cls("flex w-fit max-w-[90vw] h-10 overflow-hidden rounded border bg-white dark:bg-gray-900 shadow", ui.defaultBorderMixin),
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(NodeSelector, { open: openNode, onOpenChange: setOpenNode }),
-                    /* @__PURE__ */ jsxRuntime.jsx(ui.Separator, { orientation: "vertical" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(LinkSelector, { open: openLink, onOpenChange: setOpenLink }),
-                    /* @__PURE__ */ jsxRuntime.jsx(ui.Separator, { orientation: "vertical" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(TextButtons, {})
-                  ]
-                }
-              )
-            ]
-          }
-        )
+    const proseClass = proseClasses[textSize];
+    const extensions = React.useMemo(() => [starterKit, Document.extend({}), HighlightDecorationExtension(highlight), TextLoadingDecorationExtension, Underline, Bold, extensionTextStyle.TextStyleKit, Italic, Strike, Color, Highlight.configure({
+      multicolor: true
+    }), Heading, CustomKeymap, DragAndDrop, placeholder, tiptapLink, imageExtension, taskList, taskItem, tiptapMarkdown.Markdown.configure({
+      html: true
+    }), horizontalRule, bulletList, orderedList, listItem, blockquote, codeBlock, code, SlashCommand.configure({
+      HTMLAttributes: {
+        class: "mention"
+      },
+      suggestion: suggestion(ref, {
+        upload: handleImageUpload,
+        aiController
+      })
+    })], []);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: "relative min-h-[300px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(react.EditorProvider, { content: content ?? "", extensions, immediatelyRender: canUseDOM, editorProps: {
+      editable: () => !disabled,
+      attributes: {
+        class: ui.cls(proseClass, "prose-headings:font-title font-default focus:outline-none max-w-full p-12")
       }
-    ) }) });
+    }, onCreate: ({
+      editor: editor_0
+    }) => {
+      editorRef.current = editor_0;
+      editor_0.setEditable(!disabled);
+    }, onUpdate: ({
+      editor: editor_1
+    }) => {
+      onEditorUpdate(editor_1);
+    }, children: /* @__PURE__ */ jsxRuntime.jsxs(EditorBubble, { options: {
+      placement: "top",
+      offset: 6
+    }, className: ui.cls("flex w-fit max-w-[90vw] h-10 overflow-hidden rounded border bg-white dark:bg-surface-900 shadow", ui.defaultBorderMixin), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(NodeSelector, { portalContainer: ref.current, open: openNode, onOpenChange: setOpenNode }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Separator, { orientation: "vertical" }),
+      /* @__PURE__ */ jsxRuntime.jsx(LinkSelector, { open: openLink, onOpenChange: setOpenLink }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Separator, { orientation: "vertical" }),
+      /* @__PURE__ */ jsxRuntime.jsx(TextButtons, {})
+    ] }) }) });
   };
   function addLineBreakAfterImages(markdown) {
     const imageRegex = /!\[.*?\]\(.*?\)/g;
@@ -1143,7 +1949,9 @@
 `);
   }
   const cssStyles = `
-
+.ProseMirror {
+    box-shadow: none !important;
+}
 .ProseMirror .is-editor-empty:first-child::before {
   content: attr(data-placeholder);
   float: left;
@@ -1166,6 +1974,7 @@
 }
 
 .is-empty {
+  cursor: text;
   color: rgb(100 116 139); //500
 }
 
@@ -1183,6 +1992,7 @@
   &.ProseMirror-selectednode {
     outline: 3px solid #5abbf7;
     filter: brightness(90%);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
   }
 }
 
@@ -1210,7 +2020,7 @@ ul[data-type="taskList"] li > label {
     }
   
     &:active {
-      background-color: rgb(71 85 105);;
+      background-color: rgb(71 85 105);
     }
   }
 }
@@ -1277,7 +2087,7 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
 }
 
 .ProseMirror:not(.dragging) .ProseMirror-selectednode {
-  outline: none !important;
+  // outline: none !important;
   background-color: rgb(219 234 254); // blue 100
   transition: background-color 0.2s;
   box-shadow: none;
@@ -1287,19 +2097,23 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
   background-color:  rgb(51 65 85); // 700
 }
 
+.prose-base table p {
+    margin: 0;
+}
+
 .drag-handle {
-  position: fixed;
+  position: absolute;
   opacity: 1;
   transition: opacity ease-in 0.2s;
   border-radius: 0.25rem;
 
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' style='fill: rgba(128, 128, 128, 0.9)'%3E%3Cpath d='M3,2 C2.44771525,2 2,1.55228475 2,1 C2,0.44771525 2.44771525,0 3,0 C3.55228475,0 4,0.44771525 4,1 C4,1.55228475 3.55228475,2 3,2 Z M3,6 C2.44771525,6 2,5.55228475 2,5 C2,4.44771525 2.44771525,4 3,4 C3.55228475,4 4,4.44771525 4,5 C4,5.55228475 3.55228475,6 3,6 Z M3,10 C2.44771525,10 2,9.55228475 2,9 C2,8.44771525 2.44771525,8 3,8 C3.55228475,8 4,8.44771525 4,9 C4,9.55228475 3.55228475,10 3,10 Z M7,2 C6.44771525,2 6,1.55228475 6,1 C6,0.44771525 6.44771525,0 7,0 C7.55228475,0 8,0.44771525 8,1 C8,1.55228475 7.55228475,2 7,2 Z M7,6 C6.44771525,6 6,5.55228475 6,5 C6,4.44771525 6.44771525,4 7,4 C7.55228475,4 8,4.44771525 8,5 C8,5.55228475 7.55228475,6 7,6 Z M7,10 C6.44771525,10 6,9.55228475 6,9 C6,8.44771525 6.44771525,8 7,8 C7.55228475,8 8,8.44771525 8,9 C8,9.55228475 7.55228475,10 7,10 Z'%3E%3C/path%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' style='fill: rgba(128, 128, 128, 0.9)'%3E%3Cpath d='M3,2 C2.44771525,2 2,1.55228475 2,1 C2,0.44771525 2.44771525,0 3,0 C3.55228475,0 4,0.44771525 4,1 C4,1.55228475 3.55228475,2 3,2 Z M3,6 C2.44771525,6 2,5.55228475 2,5 C2,4.44771525 2.44771525,4 3,4 C3.55228475,4 4,4.44771525 4,5 C4,5.55228475 3.55228475,6 3,6 Z M3,10 C2.44771525,10 2,9.55228475 2,9 C2,8.44771525 2.44771525,8 3,8 C3.55228475,8 4,8.44771525 4,9 C4,9.55228475 3.55228475,10 3,10 Z M7,2 C6.44771525,2 6,1.55228475 6,1 C6,0.44771525 6.44771525,0 7,0 C7.55228475,0 8,0.44771525 8,1 C8,1.55228475 7.55228475,2 7,2 Z M7,6 C6.44771525,6 6,5.55228475 6,5 C6,4.44771525 6.44771525,4 7,4 C7.55228475,4 8,4.44771525 8,5 C8,5.55228475 7.55228475,6 7,6 Z M7,10 C6.44771525,10 6,9.55228475 6,9 C6,8.44771525 6.44771525,8 7,8 C7,8.44771525 7,9 7,9 C7,9.55228475 7,10 7,10 Z'%3E%3C/path%3E%3C/svg%3E");
   background-size: calc(0.5em + 0.375rem) calc(0.5em + 0.375rem);
   background-repeat: no-repeat;
   background-position: center;
   width: 1.2rem;
   height: 1.5rem;
-  z-index: 50;
+  z-index: 100;
   cursor: grab;
 
   &:hover {
@@ -1335,5 +2149,5 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
 `;
   exports2.FireCMSEditor = FireCMSEditor;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
-});
+}));
 //# sourceMappingURL=index.umd.js.map