@firecms/editor 3.0.0-beta.7 → 3.0.0-beta.9

package/dist/index.es.js

@@ -1,342 +1,253 @@
-import { jsx as s, jsxs as b } from "react/jsx-runtime";
-import L, { forwardRef as T, useRef as D, useEffect as C, useMemo as Z, useState as v } from "react";
-import me from "@tiptap/extension-underline";
-import ge from "@tiptap/extension-text-style";
-import { Color as pe } from "@tiptap/extension-color";
-import { Markdown as fe } from "tiptap-markdown";
-import he from "@tiptap/extension-highlight";
-import { useCurrentEditor as y, BubbleMenu as be, isNodeSelection as ke, ReactRenderer as xe, EditorProvider as ye } from "@tiptap/react";
-import { createStore as ve, Provider as Ce, atom as _, useAtom as we, useSetAtom as U, useAtomValue as Ae } from "jotai";
-import { Slot as Le } from "@radix-ui/react-slot";
-import Te from "tunnel-rat";
-import { Command as S, CommandItem as Ee, CommandEmpty as Me } from "cmdk";
-import Ne from "@tiptap/starter-kit";
-import Se from "@tiptap/extension-horizontal-rule";
-import Re from "@tiptap/extension-link";
-import Ie from "@tiptap/extension-image";
-import Pe from "@tiptap/extension-placeholder";
-import { TaskItem as He } from "@tiptap/extension-task-item";
-import { TaskList as De } from "@tiptap/extension-task-list";
-import { Extension as B, InputRule as Be } from "@tiptap/core";
-import ze from "@tiptap/suggestion";
-import Fe from "tippy.js";
-import { Popover as Q, Button as w, ExpandMoreIcon as Ue, CheckIcon as V, TextFieldsIcon as X, LooksOneIcon as Y, LooksTwoIcon as J, Looks3Icon as G, CheckBoxIcon as j, FormatListBulletedIcon as ee, FormatListNumberedIcon as te, FormatQuoteIcon as oe, CodeIcon as z, cls as g, DeleteIcon as Ke, FormatBoldIcon as $e, FormatItalicIcon as qe, FormatUnderlinedIcon as We, FormatStrikethroughIcon as Oe, defaultBorderMixin as x, useInjectStyles as Ze, Separator as K, ImageIcon as _e } from "@firecms/ui";
-import { Plugin as Qe } from "prosemirror-state";
-import { DecorationSet as Ve, Decoration as Xe, __serializeForClipboard as Ye } from "@tiptap/pm/view";
-import { Plugin as Je, NodeSelection as $ } from "@tiptap/pm/state";
-const P = ve(), Ge = ({ children: e }) => /* @__PURE__ */ s(Ce, { store: P, children: e }), je = T(
-  ({ children: e, tippyOptions: o, ...t }, r) => {
-    const { editor: a } = y(), c = D(null);
-    C(() => {
-      !c.current || !o?.placement || (c.current.setProps({ placement: o.placement }), c.current.popperInstance?.update());
-    }, [o?.placement]);
-    const n = Z(() => ({
-      shouldShow: ({ editor: d, state: u }) => {
-        const { selection: p } = u, { empty: h } = p;
-        return !(d.isActive("image") || h || ke(p));
-      },
-      tippyOptions: {
-        onCreate: (d) => {
-          c.current = d;
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { forwardRef, useRef, useEffect, useMemo, useState, useImperativeHandle, useDeferredValue } from "react";
+import { Underline } from "@tiptap/extension-underline";
+import TextStyle from "@tiptap/extension-text-style";
+import { Color } from "@tiptap/extension-color";
+import BulletList from "@tiptap/extension-bullet-list";
+import Highlight from "@tiptap/extension-highlight";
+import { useCurrentEditor, BubbleMenu, isNodeSelection, Node, mergeAttributes, ReactRenderer, EditorProvider } from "@tiptap/react";
+import { Slot } from "@radix-ui/react-slot";
+import { Popover, Button, ExpandMoreIcon, CheckIcon, TextFieldsIcon, LooksOneIcon, LooksTwoIcon, Looks3Icon, CheckBoxIcon, FormatListBulletedIcon, FormatListNumberedIcon, FormatQuoteIcon, CodeIcon, cls, focusedDisabled, DeleteIcon, FormatBoldIcon, FormatItalicIcon, FormatUnderlinedIcon, FormatStrikethroughIcon, defaultBorderMixin, AutoAwesomeIcon, ImageIcon, useInjectStyles, Separator } from "@firecms/ui";
+import StarterKit from "@tiptap/starter-kit";
+import HorizontalRule from "@tiptap/extension-horizontal-rule";
+import TiptapLink from "@tiptap/extension-link";
+import TiptapImage from "@tiptap/extension-image";
+import Placeholder from "@tiptap/extension-placeholder";
+import { TaskItem } from "@tiptap/extension-task-item";
+import { TaskList } from "@tiptap/extension-task-list";
+import { Extension, InputRule } from "@tiptap/core";
+import { PluginKey, Plugin } from "prosemirror-state";
+import { DecorationSet, Decoration } from "prosemirror-view";
+import { Markdown } from "tiptap-markdown";
+import { DecorationSet as DecorationSet$1, Decoration as Decoration$1, __serializeForClipboard } from "@tiptap/pm/view";
+import { PluginKey as PluginKey$1, Plugin as Plugin$1, NodeSelection } from "@tiptap/pm/state";
+import Document from "@tiptap/extension-document";
+import Suggestion from "@tiptap/suggestion";
+import tippy from "tippy.js";
+const EditorBubble = forwardRef(
+  ({ children, tippyOptions, ...rest }, ref) => {
+    const { editor } = useCurrentEditor();
+    const instanceRef = useRef(null);
+    useEffect(() => {
+      if (!instanceRef.current || !tippyOptions?.placement) return;
+      instanceRef.current.setProps({ placement: tippyOptions.placement });
+      instanceRef.current.popperInstance?.update();
+    }, [tippyOptions?.placement]);
+    const bubbleMenuProps = useMemo(() => {
+      const shouldShow = ({ editor: editor2, state }) => {
+        const { selection } = state;
+        const { empty } = selection;
+        if (editor2.isActive("image") || empty || isNodeSelection(selection)) {
+          return false;
+        }
+        return true;
+      };
+      return {
+        shouldShow,
+        tippyOptions: {
+          onCreate: (val) => {
+            instanceRef.current = val;
+          },
+          moveTransition: "transform 0.15s ease-out",
+          ...tippyOptions
         },
-        moveTransition: "transform 0.15s ease-out",
-        ...o
-      },
-      ...t
-    }), [t, o]);
-    return a ? (
+        ...rest
+      };
+    }, [rest, tippyOptions]);
+    if (!editor) return null;
+    return (
       //We need to add this because of https://github.com/ueberdosis/tiptap/issues/2658
-      /* @__PURE__ */ s("div", { ref: r, children: /* @__PURE__ */ s(be, { editor: a, ...n, children: e }) })
-    ) : null;
+      /* @__PURE__ */ jsx("div", { ref, children: /* @__PURE__ */ jsx(BubbleMenu, { editor, ...bubbleMenuProps, children }) })
+    );
   }
-), F = T(({ children: e, asChild: o, onSelect: t, ...r }, a) => {
-  const { editor: c } = y(), n = o ? Le : "div";
-  return c ? /* @__PURE__ */ s(n, { ref: a, ...r, onClick: () => t?.(c), children: e }) : null;
+);
+const EditorBubbleItem = forwardRef(({ children, asChild, onSelect, ...rest }, ref) => {
+  const { editor } = useCurrentEditor();
+  const Comp = asChild ? Slot : "div";
+  if (!editor) return null;
+  return /* @__PURE__ */ jsx(Comp, { ref, ...rest, onClick: () => onSelect?.(editor), children });
 });
-F.displayName = "EditorBubbleItem";
-const re = Te(), ne = _(""), ae = _(null), et = ({
-  query: e,
-  range: o
-}) => {
-  const t = U(ne, { store: P }), r = U(ae, { store: P });
-  return C(() => {
-    t(e);
-  }, [e, t]), C(() => {
-    r(o);
-  }, [o, r]), C(() => {
-    const a = ["ArrowUp", "ArrowDown", "Enter"], c = (n) => {
-      if (a.includes(n.key)) {
-        n.preventDefault();
-        const i = document.querySelector("#slash-command");
-        i && i.dispatchEvent(
-          new KeyboardEvent("keydown", { key: n.key, cancelable: !0, bubbles: !0 })
-        );
-      }
-    };
-    return document.addEventListener("keydown", c), () => {
-      document.removeEventListener("keydown", c);
-    };
-  }, []), /* @__PURE__ */ s(re.Out, {});
-}, tt = T(
-  ({ children: e, className: o, ...t }, r) => {
-    const a = D(null), [c, n] = we(ne);
-    return /* @__PURE__ */ s(re.In, { children: /* @__PURE__ */ b(
-      S,
-      {
-        ref: r,
-        onKeyDown: (i) => {
-          i.stopPropagation();
-        },
-        id: "slash-command",
-        className: o,
-        ...t,
-        children: [
-          /* @__PURE__ */ s(S.Input, { value: c, onValueChange: n, style: { display: "none" } }),
-          /* @__PURE__ */ s(S.List, { ref: a, children: e })
-        ]
-      }
-    ) });
-  }
-), se = T(({ children: e, onCommand: o, ...t }, r) => {
-  const { editor: a } = y(), c = Ae(ae);
-  return !a || !c ? null : /* @__PURE__ */ s(Ee, { ref: r, ...t, onSelect: () => o({ editor: a, range: c }), children: e });
-});
-se.displayName = "EditorCommandItem";
-const ot = Me, rt = B.create({
-  name: "slash-command",
-  addOptions() {
-    return {
-      suggestion: {
-        char: "/",
-        command: ({ editor: e, range: o, props: t }) => {
-          t.command({ editor: e, range: o });
-        }
-      }
-    };
-  },
-  addProseMirrorPlugins() {
-    return [
-      ze({
-        editor: this.editor,
-        ...this.options.suggestion
-      })
-    ];
-  }
-}), nt = () => {
-  let e = null, o = null;
-  return {
-    onStart: (t) => {
-      e = new xe(et, {
-        props: t,
-        editor: t.editor
-      }), o = Fe("body", {
-        getReferenceClientRect: t.clientRect,
-        appendTo: () => document.body,
-        content: e.element,
-        showOnCreate: !0,
-        interactive: !0,
-        trigger: "manual",
-        placement: "bottom-start"
-      });
-    },
-    onUpdate: (t) => {
-      e?.updateProps(t), o && o[0].setProps({
-        getReferenceClientRect: t.clientRect
-      });
-    },
-    onKeyDown: (t) => t.event.key === "Escape" ? (o?.[0].hide(), !0) : e?.ref?.onKeyDown(t),
-    onExit: () => {
-      o?.[0].destroy(), e?.destroy();
-    }
-  };
-}, at = (e) => e, st = Pe.configure({
-  placeholder: ({ node: e }) => e.type.name === "heading" ? `Heading ${e.attrs.level}` : "Press '/' for commands",
-  includeChildren: !0
-}), it = Se.extend({
-  addInputRules() {
-    return [
-      new Be({
-        find: /^(?:---|—-|___\s|\*\*\*\s)$/,
-        handler: ({ state: e, range: o }) => {
-          const t = {}, { tr: r } = e, a = o.from, c = o.to;
-          r.insert(a - 1, this.type.create(t)).delete(
-            r.mapping.map(a),
-            r.mapping.map(c)
-          );
-        }
-      })
-    ];
-  }
-}), q = [
+EditorBubbleItem.displayName = "EditorBubbleItem";
+const items = [
   {
     name: "Text",
-    icon: X,
-    command: (e) => e?.chain().focus().toggleNode("paragraph", "paragraph").run(),
+    icon: 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: (e) => (e?.isActive("paragraph") && !e?.isActive("bulletList") && !e?.isActive("orderedList")) ?? !1
+    isActive: (editor) => (editor?.isActive("paragraph") && !editor?.isActive("bulletList") && !editor?.isActive("orderedList")) ?? false
   },
   {
     name: "Heading 1",
-    icon: Y,
-    command: (e) => e?.chain().focus().toggleHeading({ level: 1 }).run(),
-    isActive: (e) => e?.isActive("heading", { level: 1 }) ?? !1
+    icon: LooksOneIcon,
+    command: (editor) => editor?.chain().focus().toggleHeading({ level: 1 }).run(),
+    isActive: (editor) => editor?.isActive("heading", { level: 1 }) ?? false
   },
   {
     name: "Heading 2",
-    icon: J,
-    command: (e) => e?.chain().focus().toggleHeading({ level: 2 }).run(),
-    isActive: (e) => e?.isActive("heading", { level: 2 }) ?? !1
+    icon: LooksTwoIcon,
+    command: (editor) => editor?.chain().focus().toggleHeading({ level: 2 }).run(),
+    isActive: (editor) => editor?.isActive("heading", { level: 2 }) ?? false
   },
   {
     name: "Heading 3",
-    icon: G,
-    command: (e) => e?.chain().focus().toggleHeading({ level: 3 }).run(),
-    isActive: (e) => e?.isActive("heading", { level: 3 }) ?? !1
+    icon: Looks3Icon,
+    command: (editor) => editor?.chain().focus().toggleHeading({ level: 3 }).run(),
+    isActive: (editor) => editor?.isActive("heading", { level: 3 }) ?? false
   },
   {
     name: "To-do List",
-    icon: j,
-    command: (e) => e?.chain().focus().toggleTaskList().run(),
-    isActive: (e) => e?.isActive("taskItem") ?? !1
+    icon: CheckBoxIcon,
+    command: (editor) => editor?.chain().focus().toggleTaskList().run(),
+    isActive: (editor) => editor?.isActive("taskItem") ?? false
   },
   {
     name: "Bullet List",
-    icon: ee,
-    command: (e) => e?.chain().focus().toggleBulletList().run(),
-    isActive: (e) => e?.isActive("bulletList") ?? !1
+    icon: FormatListBulletedIcon,
+    command: (editor) => editor?.chain().focus().toggleBulletList().run(),
+    isActive: (editor) => editor?.isActive("bulletList") ?? false
   },
   {
     name: "Numbered List",
-    icon: te,
-    command: (e) => e?.chain().focus().toggleOrderedList().run(),
-    isActive: (e) => e?.isActive("orderedList") ?? !1
+    icon: FormatListNumberedIcon,
+    command: (editor) => editor?.chain().focus().toggleOrderedList().run(),
+    isActive: (editor) => editor?.isActive("orderedList") ?? false
   },
   {
     name: "Quote",
-    icon: oe,
-    command: (e) => e?.chain().focus().toggleNode("paragraph", "paragraph").toggleBlockquote().run(),
-    isActive: (e) => e?.isActive("blockquote") ?? !1
+    icon: FormatQuoteIcon,
+    command: (editor) => editor?.chain().focus().toggleNode("paragraph", "paragraph").toggleBlockquote().run(),
+    isActive: (editor) => editor?.isActive("blockquote") ?? false
   },
   {
     name: "Code",
-    icon: z,
-    command: (e) => e?.chain().focus().toggleCodeBlock().run(),
-    isActive: (e) => e?.isActive("codeBlock") ?? !1
+    icon: CodeIcon,
+    command: (editor) => editor?.chain().focus().toggleCodeBlock().run(),
+    isActive: (editor) => editor?.isActive("codeBlock") ?? false
   }
-], ct = ({
-  open: e,
-  onOpenChange: o
+];
+const NodeSelector = ({
+  open,
+  onOpenChange,
+  portalContainer
 }) => {
-  const { editor: t } = y();
-  if (!t)
-    return null;
-  const r = q.filter((a) => a.isActive(t)).pop() ?? {
+  const { editor } = useCurrentEditor();
+  if (!editor) return null;
+  const activeItem = items.filter((item) => item.isActive(editor)).pop() ?? {
     name: "Multiple"
   };
-  return /* @__PURE__ */ s(
-    Q,
+  return /* @__PURE__ */ jsx(
+    Popover,
     {
       sideOffset: 5,
       align: "start",
+      portalContainer,
       className: "w-48 p-1",
-      trigger: /* @__PURE__ */ b(
-        w,
+      trigger: /* @__PURE__ */ jsxs(
+        Button,
         {
           variant: "text",
           className: "gap-2 rounded-none",
           color: "text",
           children: [
-            /* @__PURE__ */ s("span", { className: "whitespace-nowrap text-sm", children: r.name }),
-            /* @__PURE__ */ s(Ue, { size: "small" })
+            /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap text-sm", children: activeItem.name }),
+            /* @__PURE__ */ jsx(ExpandMoreIcon, { size: "small" })
           ]
         }
       ),
-      modal: !0,
-      open: e,
-      onOpenChange: o,
-      children: q.map((a, c) => /* @__PURE__ */ b(
-        F,
+      modal: true,
+      open,
+      onOpenChange,
+      children: items.map((item, index) => /* @__PURE__ */ jsxs(
+        EditorBubbleItem,
         {
-          onSelect: (n) => {
-            a.command(n), o(!1);
+          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__ */ b("div", { className: "flex items-center space-x-2", children: [
-              /* @__PURE__ */ s(a.icon, { size: "smallest" }),
-              /* @__PURE__ */ s("span", { children: a.name })
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ jsx(item.icon, { size: "smallest" }),
+              /* @__PURE__ */ jsx("span", { children: item.name })
             ] }),
-            r.name === a.name && /* @__PURE__ */ s(V, { size: "smallest" })
+            activeItem.name === item.name && /* @__PURE__ */ jsx(CheckIcon, { size: "smallest" })
           ]
         },
-        c
+        index
       ))
     }
   );
 };
-function lt(e) {
+function isValidUrl(url) {
   try {
-    return new URL(e), !0;
-  } catch {
-    return !1;
+    new URL(url);
+    return true;
+  } catch (e) {
+    return false;
   }
 }
-function dt(e) {
-  if (lt(e))
-    return e;
+function getUrlFromString(str) {
+  if (isValidUrl(str)) return str;
   try {
-    return e.includes(".") && !e.includes(" ") ? new URL(`https://${e}`).toString() : null;
-  } catch {
+    if (str.includes(".") && !str.includes(" ")) {
+      return new URL(`https://${str}`).toString();
+    }
+    return null;
+  } catch (e) {
     return null;
   }
 }
-const ut = ({
-  open: e,
-  onOpenChange: o
+const LinkSelector = ({
+  open,
+  onOpenChange
 }) => {
-  const t = D(null), { editor: r } = y();
-  return C(() => {
-    t.current && t.current?.focus();
-  }), r ? /* @__PURE__ */ s(
-    Q,
+  const inputRef = useRef(null);
+  const { editor } = useCurrentEditor();
+  useEffect(() => {
+    inputRef.current && inputRef.current?.focus();
+  });
+  if (!editor) return null;
+  return /* @__PURE__ */ jsx(
+    Popover,
     {
-      modal: !0,
-      open: e,
-      onOpenChange: o,
-      trigger: /* @__PURE__ */ s(
-        w,
+      modal: true,
+      open,
+      onOpenChange,
+      trigger: /* @__PURE__ */ jsx(
+        Button,
         {
           variant: "text",
           className: "gap-2 rounded-none",
           color: "text",
-          children: /* @__PURE__ */ s("p", { className: g("underline decoration-stone-400 underline-offset-4", {
-            "text-blue-500": r.isActive("link")
+          children: /* @__PURE__ */ jsx("p", { className: cls("underline decoration-stone-400 underline-offset-4", {
+            "text-blue-500": editor.isActive("link")
           }), children: "Link" })
         }
       ),
-      children: /* @__PURE__ */ b(
+      children: /* @__PURE__ */ jsxs(
         "form",
         {
-          onSubmit: (a) => {
-            const c = a.currentTarget;
-            a.preventDefault();
-            const n = c[0], i = dt(n.value);
-            i && r.chain().focus().setLink({ href: i }).run();
+          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__ */ s(
+            /* @__PURE__ */ jsx(
               "input",
               {
-                ref: t,
-                autoFocus: e,
+                ref: inputRef,
+                autoFocus: open,
                 placeholder: "Paste a link",
-                defaultValue: r.getAttributes("link").href || "",
-                className: "text-gray-900 dark:text-white flex-grow bg-transparent p-1 text-sm outline-none"
+                defaultValue: editor.getAttributes("link").href || "",
+                className: cls("text-gray-900 dark:text-white flex-grow bg-transparent p-1 text-sm outline-none", focusedDisabled)
               }
             ),
-            r.getAttributes("link").href ? /* @__PURE__ */ s(
-              w,
+            editor.getAttributes("link").href ? /* @__PURE__ */ jsx(
+              Button,
               {
                 size: "small",
                 variant: "text",
@@ -344,630 +255,1374 @@ const ut = ({
                 color: "text",
                 className: "flex items-center",
                 onClick: () => {
-                  r.chain().focus().unsetLink().run();
+                  editor.chain().focus().unsetLink().run();
                 },
-                children: /* @__PURE__ */ s(Ke, { size: "small" })
+                children: /* @__PURE__ */ jsx(DeleteIcon, { size: "small" })
               }
-            ) : /* @__PURE__ */ s(
-              w,
+            ) : /* @__PURE__ */ jsx(
+              Button,
               {
                 size: "small",
                 variant: "text",
-                children: /* @__PURE__ */ s(V, { size: "small" })
+                children: /* @__PURE__ */ jsx(CheckIcon, { size: "small" })
               }
             )
           ]
         }
       )
     }
-  ) : null;
-}, mt = () => {
-  const { editor: e } = y();
-  return e ? /* @__PURE__ */ s("div", { className: "flex", children: [
+  );
+};
+const TextButtons = () => {
+  const { editor } = useCurrentEditor();
+  if (!editor) return null;
+  const items2 = [
     {
       name: "bold",
-      isActive: (t) => t?.isActive("bold") ?? !1,
-      command: (t) => t?.chain().focus().toggleBold().run(),
-      icon: $e
+      isActive: (editor2) => editor2?.isActive("bold") ?? false,
+      command: (editor2) => editor2?.chain().focus().toggleBold().run(),
+      icon: FormatBoldIcon
     },
     {
       name: "italic",
-      isActive: (t) => t?.isActive("italic") ?? !1,
-      command: (t) => t?.chain().focus().toggleItalic().run(),
-      icon: qe
+      isActive: (editor2) => editor2?.isActive("italic") ?? false,
+      command: (editor2) => editor2?.chain().focus().toggleItalic().run(),
+      icon: FormatItalicIcon
     },
     {
       name: "underline",
-      isActive: (t) => t?.isActive("underline") ?? !1,
-      command: (t) => t?.chain().focus().toggleUnderline().run(),
-      icon: We
+      isActive: (editor2) => editor2?.isActive("underline") ?? false,
+      command: (editor2) => editor2?.chain().focus().toggleUnderline().run(),
+      icon: FormatUnderlinedIcon
     },
     {
       name: "strike",
-      isActive: (t) => t?.isActive("strike") ?? !1,
-      command: (t) => t?.chain().focus().toggleStrike().run(),
-      icon: Oe
+      isActive: (editor2) => editor2?.isActive("strike") ?? false,
+      command: (editor2) => editor2?.chain().focus().toggleStrike().run(),
+      icon: FormatStrikethroughIcon
     },
     {
       name: "code",
-      isActive: (t) => t?.isActive("code") ?? !1,
-      command: (t) => t?.chain().focus().toggleCode().run(),
-      icon: z
+      isActive: (editor2) => editor2?.isActive("code") ?? false,
+      command: (editor2) => editor2?.chain().focus().toggleCode().run(),
+      icon: CodeIcon
     }
-  ].map((t, r) => /* @__PURE__ */ s(
-    F,
+  ];
+  return /* @__PURE__ */ jsx("div", { className: "flex", children: items2.map((item, index) => /* @__PURE__ */ jsx(
+    EditorBubbleItem,
     {
-      onSelect: (a) => {
-        t.command(a);
+      onSelect: (editor2) => {
+        item.command(editor2);
       },
-      children: /* @__PURE__ */ s(
-        w,
+      children: /* @__PURE__ */ jsx(
+        Button,
         {
           size: "small",
           color: "text",
           className: "gap-2 rounded-none h-full",
           variant: "text",
-          children: /* @__PURE__ */ s(
-            t.icon,
+          children: /* @__PURE__ */ jsx(
+            item.icon,
             {
-              className: g({
-                "text-inherit": !t.isActive(e),
-                "text-blue-500": t.isActive(e)
+              className: cls({
+                "text-inherit": !item.isActive(editor),
+                "text-blue-500": item.isActive(editor)
               })
             }
           )
         }
       )
     },
-    r
-  )) }) : null;
+    index
+  )) });
 };
-function R(e, o, t, r = 300) {
-  const a = L.useRef(!1), c = () => {
-    o(), a.current = !1;
-  }, n = L.useRef(void 0);
-  L.useEffect(
-    () => (a.current = !0, clearTimeout(n.current), n.current = setTimeout(c, r), () => {
-      t && c();
-    }),
-    [t, e]
-  );
-}
-function H(e) {
-  return Array.isArray(e) ? e.map((o) => H(o)) : (typeof e == "object" && e !== null && (e.attrs && typeof e.attrs == "object" && "class" in e.attrs && delete e.attrs.class, Object.keys(e).forEach((o) => {
-    e[o] = H(e[o]);
-  })), e);
+function removeClassesFromJson(jsonObj) {
+  if (Array.isArray(jsonObj)) {
+    return jsonObj.map((item) => removeClassesFromJson(item));
+  } else if (typeof jsonObj === "object" && jsonObj !== null) {
+    if (jsonObj.attrs && typeof jsonObj.attrs === "object" && "class" in jsonObj.attrs) {
+      delete jsonObj.attrs.class;
+    }
+    Object.keys(jsonObj).forEach((key) => {
+      jsonObj[key] = removeClassesFromJson(jsonObj[key]);
+    });
+  }
+  return jsonObj;
 }
-const gt = st, pt = Re.configure({
+const loadingDecorationKey = new PluginKey("loadingDecoration");
+const TextLoadingDecorationExtension = Extension.create({
+  name: "loadingDecoration",
+  addOptions() {
+    return {
+      pluginKey: loadingDecorationKey
+    };
+  },
+  addProseMirrorPlugins() {
+    const pluginKey = this.options.pluginKey;
+    return [
+      new Plugin({
+        key: pluginKey,
+        state: {
+          init() {
+            return {
+              decorationSet: 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: DecorationSet.empty,
+                  hasDecoration: false
+                };
+              }
+              const decoration = 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: DecorationSet.empty.add(tr.doc, [decoration]),
+                hasDecoration: true
+              };
+            }
+            return {
+              decorationSet: oldState.decorationSet.map(tr.mapping, tr.doc),
+              hasDecoration: oldState.hasDecoration
+            };
+          }
+        },
+        props: {
+          decorations(state) {
+            return this.getState(state)?.decorationSet || DecorationSet.empty;
+          }
+        }
+      })
+    ];
+  },
+  addCommands() {
+    return {
+      toggleLoadingDecoration: (loadingHtml) => ({ state, dispatch }) => {
+        const { selection } = state;
+        const pos = selection.from;
+        if (!dispatch) return false;
+        const pluginKey = this.options.pluginKey;
+        const tr = state.tr.setMeta(pluginKey, {
+          pos,
+          type: "loadingDecoration",
+          remove: false,
+          loadingHtml
+        });
+        dispatch(tr);
+        return true;
+      },
+      removeLoadingDecoration: () => ({ state, dispatch }) => {
+        if (!dispatch) return false;
+        const pluginKey = this.options.pluginKey;
+        const tr = state.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
+  }) => {
+    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}`;
+    }
+    return "Press '/' for commands";
+  },
+  includeChildren: true
+});
+const Horizontal = HorizontalRule.extend({
+  addInputRules() {
+    return [
+      new InputRule({
+        find: /^(?:---|—-|___\s|\*\*\*\s)$/,
+        handler: ({
+          state,
+          range
+        }) => {
+          const attributes = {};
+          const { tr } = state;
+          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: g(
+    class: cls(
       "text-gray-600 dark:text-slate-300 underline underline-offset-[3px] hover:text-primary transition-colors cursor-pointer"
     )
   }
-}), ft = De.configure({
+});
+const taskList = TaskList.configure({
   HTMLAttributes: {
-    class: g("not-prose")
+    class: cls("not-prose")
   }
-}), ht = He.configure({
+});
+const taskItem = TaskItem.configure({
   HTMLAttributes: {
-    class: g("flex items-start my-4")
+    class: cls("flex items-start my-4")
   },
-  nested: !0
-}), bt = it.configure({
+  nested: true
+});
+const markdownExtension = Markdown.configure({
+  html: true
+});
+const horizontalRule = Horizontal.configure({
   HTMLAttributes: {
-    class: g("mt-4 mb-6 border-t", x)
+    class: cls("mt-4 mb-6 border-t", defaultBorderMixin)
   }
-}), kt = Ne.configure({
+});
+const starterKit = StarterKit.configure({
   bulletList: {
     HTMLAttributes: {
-      class: g("list-disc list-outside leading-3 -mt-2")
+      class: cls("list-disc list-outside leading-3 -mt-2")
     }
   },
   orderedList: {
     HTMLAttributes: {
-      class: g("list-decimal list-outside leading-3 -mt-2")
+      class: cls("list-decimal list-outside leading-3 -mt-2")
     }
   },
   listItem: {
     HTMLAttributes: {
-      class: g("leading-normal -mb-2")
+      class: cls("leading-normal -mb-2")
     }
   },
   blockquote: {
     HTMLAttributes: {
-      class: g("border-l-4 border-primary")
+      class: cls("border-l-4 border-primary")
     }
   },
   codeBlock: {
     HTMLAttributes: {
-      class: g("rounded bg-blue-50 dark:bg-gray-700 border p-5 font-mono font-medium", x)
+      class: cls("rounded bg-blue-50 dark:bg-gray-700 border p-5 font-mono font-medium", defaultBorderMixin)
     }
   },
   code: {
     HTMLAttributes: {
-      class: g("rounded-md bg-slate-50 dark:bg-gray-700 px-1.5 py-1 font-mono font-medium"),
+      class: cls("rounded-md bg-slate-50 dark:bg-gray-700 px-1.5 py-1 font-mono font-medium"),
       spellcheck: "false"
     }
   },
-  horizontalRule: !1,
+  document: false,
+  horizontalRule: false,
   dropcursor: {
     color: "#DBEAFE",
     width: 4
   },
-  gapcursor: !1
+  gapcursor: false
 });
-async function W(e, o, t, r, a, c) {
-  const { schema: n } = o.state;
-  let i = e.getState(o.state);
-  const d = document.createElement("div"), u = document.createElement("img");
-  u.setAttribute("class", "opacity-40 rounded-lg border border-stone-200"), u.src = t.target?.result, d.appendChild(u);
-  const p = Xe.widget(r, d);
-  i = i?.add(o.state.doc, [p]), o.dispatch(o.state.tr.setMeta(e, { decorationSet: i }));
-  const h = await a(c);
-  console.log("uploaded image", h);
-  const f = n.nodes.image.create({ src: h }), A = o.state.tr.replaceWith(r, r, f);
-  i = i?.remove([p]), A.setMeta(e, { decorationSet: i }), o.dispatch(A);
+async function onFileRead(view, readerEvent, pos, upload, image) {
+  const { schema } = view.state;
+  const plugin = view.state.plugins.find((p) => p.key === ImagePluginKey.key);
+  if (!plugin) {
+    console.error("Image plugin not found");
+    return;
+  }
+  let decorationSet = plugin.getState(view.state);
+  const placeholder2 = document.createElement("div");
+  const imageElement = document.createElement("img");
+  imageElement.setAttribute("class", "opacity-40 rounded-lg border " + defaultBorderMixin);
+  imageElement.src = readerEvent.target?.result;
+  placeholder2.appendChild(imageElement);
+  const deco = Decoration$1.widget(pos, placeholder2);
+  decorationSet = decorationSet?.add(view.state.doc, [deco]);
+  view.dispatch(view.state.tr.setMeta(plugin, { decorationSet }));
+  const src = await upload(image);
+  console.debug("Uploaded image", src);
+  const imageNode = schema.nodes.image.create({ src });
+  const tr = view.state.tr.replaceWith(pos, pos, imageNode);
+  decorationSet = decorationSet?.remove([deco]);
+  tr.setMeta(plugin, { decorationSet });
+  view.dispatch(tr);
 }
-const xt = (e) => {
-  const o = new Qe({
+const ImagePluginKey = new PluginKey$1("imagePlugin");
+const createDropImagePlugin = (upload) => {
+  const plugin = new Plugin$1({
+    key: ImagePluginKey,
     state: {
       // Initialize the plugin state with an empty DecorationSet
-      init: () => Ve.empty,
+      init: () => DecorationSet$1.empty,
       // Apply transactions to update the state
-      apply: (t, r) => {
-        const a = t.getMeta(o);
-        return a && a.decorationSet ? a.decorationSet : r.map(t.mapping, t.doc);
+      apply: (tr, old) => {
+        const meta = tr.getMeta(plugin);
+        if (meta && meta.decorationSet) {
+          return meta.decorationSet;
+        }
+        return old.map(tr.mapping, tr.doc);
       }
     },
     props: {
       handleDOMEvents: {
-        drop: (t, r) => {
-          if (console.log("drop event", r), !r.dataTransfer?.files || r.dataTransfer?.files.length === 0)
-            return !1;
-          r.preventDefault();
-          const c = Array.from(r.dataTransfer.files).filter((n) => /image/i.test(n.type));
-          return c.length === 0 ? !1 : (c.forEach((n) => {
-            const i = t.posAtCoords({ left: r.clientX, top: r.clientY });
-            if (!i)
-              return;
-            const d = new FileReader();
-            d.onload = async (u) => {
-              await W(o, t, u, i.pos, e, n);
-            }, d.readAsDataURL(n);
-          }), !0);
+        drop: (view, 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) {
+            console.log("No images found in dropped files");
+            return false;
+          }
+          images.forEach((image) => {
+            const position = view.posAtCoords({
+              left: event.clientX,
+              top: event.clientY
+            });
+            if (!position) return;
+            const reader = new FileReader();
+            reader.onload = async (readerEvent) => {
+              await onFileRead(view, readerEvent, position.pos, upload, image);
+            };
+            reader.readAsDataURL(image);
+          });
+          return true;
         }
       },
-      handlePaste(t, r, a) {
-        const c = Array.from(r.clipboardData?.items || []), n = t.state.selection.from;
-        console.log("pos", n);
-        let i = !1;
-        return c.forEach((d) => {
-          const u = d.getAsFile();
-          if (console.log("image", u), u) {
-            i = !0;
-            const p = new FileReader();
-            p.onload = async (h) => {
-              await W(o, t, h, n, e, u);
-            }, p.readAsDataURL(u);
+      handlePaste(view, event, slice) {
+        const items2 = Array.from(event.clipboardData?.items || []);
+        const pos = view.state.selection.from;
+        let anyImageFound = false;
+        items2.forEach((item) => {
+          const image = item.getAsFile();
+          if (image) {
+            anyImageFound = true;
+            const reader = new FileReader();
+            reader.onload = async (readerEvent) => {
+              await onFileRead(view, readerEvent, pos, upload, image);
+            };
+            reader.readAsDataURL(image);
           }
-        }), i;
+        });
+        return anyImageFound;
       },
-      decorations(t) {
-        return o.getState(t);
+      decorations(state) {
+        return plugin.getState(state);
       }
     },
-    view(t) {
+    view(editorView) {
       return {
-        update(r, a) {
-          const c = o.getState(a), n = o.getState(r.state);
-          c !== n && r.updateState(r.state);
+        update(view, prevState) {
+          const prevDecos = plugin.getState(prevState);
+          const newDecos = plugin.getState(view.state);
+          if (prevDecos !== newDecos) {
+            view.updateState(view.state);
+          }
         }
       };
     }
   });
-  return o;
-}, yt = (e) => Ie.extend({
-  addProseMirrorPlugins() {
-    return [xt(e)];
-  }
-}).configure({
-  allowBase64: !0,
-  HTMLAttributes: {
-    class: g("rounded-lg border", x)
-  }
-}), vt = B.create({
+  return plugin;
+};
+const createImageExtension = (dropImagePlugin) => {
+  return TiptapImage.extend({
+    addProseMirrorPlugins() {
+      return [dropImagePlugin];
+    }
+  }).configure({
+    allowBase64: true,
+    HTMLAttributes: {
+      class: cls("rounded-lg border", defaultBorderMixin)
+    }
+  });
+};
+const CustomKeymap = Extension.create({
   name: "CustomKeymap",
   addCommands() {
     return {
-      selectTextWithinNodeBoundaries: () => ({ editor: e, commands: o }) => {
-        const { state: t } = e, { tr: r } = t, a = r.selection.$from.start(), c = r.selection.$to.end();
-        return o.setTextSelection({
-          from: a,
-          to: c
+      selectTextWithinNodeBoundaries: () => ({ editor, commands }) => {
+        const { state } = editor;
+        const { tr } = state;
+        const startNodePos = tr.selection.$from.start();
+        const endNodePos = tr.selection.$to.end();
+        return commands.setTextSelection({
+          from: startNodePos,
+          to: endNodePos
         });
       }
     };
   },
   addKeyboardShortcuts() {
     return {
-      "Mod-a": ({ editor: e }) => {
-        const { state: o } = e, { tr: t } = o, r = t.selection.from, a = t.selection.to, c = t.selection.$from.start(), n = t.selection.$to.end();
-        return r > c || a < n ? (e.chain().selectTextWithinNodeBoundaries().run(), !0) : !1;
+      "Mod-a": ({ editor }) => {
+        const { state } = editor;
+        const { tr } = state;
+        const startSelectionPos = tr.selection.from;
+        const endSelectionPos = tr.selection.to;
+        const startNodePos = tr.selection.$from.start();
+        const endNodePos = tr.selection.$to.end();
+        const isCurrentTextSelectionNotExtendedToNodeBoundaries = startSelectionPos > startNodePos || endSelectionPos < endNodePos;
+        if (isCurrentTextSelectionNotExtendedToNodeBoundaries) {
+          editor.chain().selectTextWithinNodeBoundaries().run();
+          return true;
+        }
+        return false;
       }
     };
   }
 });
-function Ct(e) {
-  const o = e.getBoundingClientRect();
+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: o.top,
-    left: o.left,
-    width: o.width
+    top: data.top - (ancestorRect?.top ?? 0),
+    left: data.left - (ancestorRect?.left ?? 0),
+    width: data.width
   };
 }
-function I(e) {
-  return document.elementsFromPoint(e.x, e.y).find(
-    (o) => o.parentElement?.matches?.(".ProseMirror") || o.matches(
+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(", ")
     )
   );
 }
-function O(e, o, t) {
-  const r = e.getBoundingClientRect();
-  return o.posAtCoords({
-    left: r.left + 50 + t.dragHandleWidth,
-    top: r.top + 1
+function nodePosAtDOM(node, view, options) {
+  const boundingRect = node.getBoundingClientRect();
+  return view.posAtCoords({
+    left: boundingRect.left + 50 + options.dragHandleWidth,
+    top: boundingRect.top + 1
   })?.inside;
 }
-function wt(e) {
-  function o(n, i) {
-    if (i.focus(), !n.dataTransfer)
-      return;
-    const d = I({
-      x: n.clientX + 50 + e.dragHandleWidth,
-      y: n.clientY
+function DragHandle(options) {
+  function handleDragStart(event, view) {
+    view.focus();
+    if (!event.dataTransfer) return;
+    const node = nodeDOMAtCoords({
+      x: event.clientX + 50 + options.dragHandleWidth,
+      y: event.clientY
     });
-    if (!(d instanceof Element))
-      return;
-    const u = O(d, i, e);
-    if (u == null || u < 0)
-      return;
-    i.dispatch(i.state.tr.setSelection($.create(i.state.doc, u)));
-    const p = i.state.selection.content(), { dom: h, text: f } = Ye(i, p);
-    n.dataTransfer.clearData(), n.dataTransfer.setData("text/html", h.innerHTML), n.dataTransfer.setData("text/plain", f), n.dataTransfer.effectAllowed = "copyMove", n.dataTransfer.setDragImage(d, 0, 0), i.dragging = { slice: p, move: n.ctrlKey };
+    if (!(node instanceof Element)) return;
+    const nodePos = nodePosAtDOM(node, view, options);
+    if (nodePos == null || nodePos < 0) return;
+    view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, nodePos)));
+    const slice = view.state.selection.content();
+    const {
+      dom,
+      text
+    } = __serializeForClipboard(view, slice);
+    event.dataTransfer.clearData();
+    event.dataTransfer.setData("text/html", dom.innerHTML);
+    event.dataTransfer.setData("text/plain", text);
+    event.dataTransfer.effectAllowed = "copyMove";
+    event.dataTransfer.setDragImage(node, 0, 0);
+    view.dragging = {
+      slice,
+      move: event.ctrlKey
+    };
   }
-  function t(n, i) {
-    i.focus(), i.dom.classList.remove("dragging");
-    const d = I({
-      x: n.clientX + 50 + e.dragHandleWidth,
-      y: n.clientY
+  function handleClick(event, view) {
+    view.focus();
+    view.dom.classList.remove("dragging");
+    const node = nodeDOMAtCoords({
+      x: event.clientX + 50 + options.dragHandleWidth,
+      y: event.clientY
     });
-    if (!(d instanceof Element))
-      return;
-    const u = O(d, i, e);
-    u && i.dispatch(i.state.tr.setSelection($.create(i.state.doc, u)));
+    if (!(node instanceof Element)) return;
+    const nodePos = nodePosAtDOM(node, view, options);
+    if (!nodePos) return;
+    view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, nodePos)));
   }
-  let r = null;
-  function a() {
-    r && r.classList.add("hide");
+  let dragHandleElement = null;
+  function hideDragHandle() {
+    if (dragHandleElement) {
+      dragHandleElement.classList.add("hide");
+    }
   }
-  function c() {
-    r && r.classList.remove("hide");
+  function showDragHandle() {
+    if (dragHandleElement) {
+      dragHandleElement.classList.remove("hide");
+    }
   }
-  return new Je({
-    view: (n) => (r = document.createElement("div"), r.draggable = !0, r.dataset.dragHandle = "", r.classList.add("drag-handle"), r.addEventListener("dragstart", (i) => {
-      o(i, n);
-    }), r.addEventListener("click", (i) => {
-      t(i, n);
-    }), a(), n?.dom?.parentElement?.appendChild(r), {
-      destroy: () => {
-        r?.remove?.(), r = null;
-      }
-    }),
+  return new Plugin$1({
+    view: (view) => {
+      dragHandleElement = document.createElement("div");
+      dragHandleElement.draggable = true;
+      dragHandleElement.dataset.dragHandle = "";
+      dragHandleElement.classList.add("drag-handle");
+      dragHandleElement.addEventListener("dragstart", (e) => {
+        handleDragStart(e, view);
+      });
+      dragHandleElement.addEventListener("click", (e) => {
+        handleClick(e, view);
+      });
+      hideDragHandle();
+      view?.dom?.parentElement?.appendChild(dragHandleElement);
+      return {
+        destroy: () => {
+        }
+      };
+    },
     props: {
       handleDOMEvents: {
-        mousemove: (n, i) => {
-          if (!n.editable)
+        mousemove: (view, event) => {
+          if (!view.editable) {
             return;
-          const d = I({
-            x: i.clientX + 50 + e.dragHandleWidth,
-            y: i.clientY
+          }
+          const node = nodeDOMAtCoords({
+            x: event.clientX + 50 + options.dragHandleWidth,
+            y: event.clientY
           });
-          if (!(d instanceof Element)) {
-            a();
+          if (!(node instanceof Element)) {
+            hideDragHandle();
             return;
           }
-          const u = window.getComputedStyle(d), p = parseInt(u.lineHeight, 10), h = parseInt(u.paddingTop, 10), f = Ct(d);
-          f.top += (p - 24) / 2, f.top += h, d.matches("ul:not([data-type=taskList]) li, ol li") && (f.left -= e.dragHandleWidth), f.width = e.dragHandleWidth, r && (r.style.left = `${f.left - f.width}px`, r.style.top = `${f.top}px`, c());
+          const compStyle = window.getComputedStyle(node);
+          const lineHeight = parseInt(compStyle.lineHeight, 10);
+          const paddingTop = parseInt(compStyle.paddingTop, 10);
+          const rect = absoluteRect(node);
+          rect.top += (lineHeight - 24) / 2;
+          rect.top += paddingTop;
+          if (node.matches("ul:not([data-type=taskList]) li, ol li")) {
+            rect.left -= options.dragHandleWidth;
+          }
+          rect.width = options.dragHandleWidth;
+          if (!dragHandleElement) return;
+          dragHandleElement.style.left = `${rect.left - rect.width}px`;
+          dragHandleElement.style.top = `${rect.top}px`;
+          showDragHandle();
         },
         keydown: () => {
-          a();
+          hideDragHandle();
         },
         mousewheel: () => {
-          a();
+          hideDragHandle();
         },
         // dragging class is used for CSS
-        dragstart: (n) => {
-          n.dom.classList.add("dragging");
+        dragstart: (view) => {
+          view.dom.classList.add("dragging");
         },
-        drop: (n) => {
-          n.dom.classList.remove("dragging");
+        drop: (view) => {
+          view.dom.classList.remove("dragging");
         },
-        dragend: (n) => {
-          n.dom.classList.remove("dragging");
+        dragend: (view) => {
+          view.dom.classList.remove("dragging");
         }
       }
     }
   });
 }
-const At = B.create({
+const DragAndDrop = Extension.create({
   name: "dragAndDrop",
   addProseMirrorPlugins() {
     return [
-      wt({
+      DragHandle({
         dragHandleWidth: 24
       })
     ];
   }
-}), eo = ({
-  handleImageUpload: e,
-  initialContent: o,
-  onJsonContentChange: t,
-  onHtmlContentChange: r,
-  onMarkdownContentChange: a
-}) => {
-  const c = {
-    handleDOMEvents: {
-      keydown: (l, m) => !!(["ArrowUp", "ArrowDown", "Enter"].includes(m.key) && document.querySelector("#slash-command"))
-    }
-    // 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;
-    // }
-  }, n = at([
-    {
-      title: "Text",
-      description: "Just start typing with plain text.",
-      searchTerms: ["p", "paragraph"],
-      icon: /* @__PURE__ */ s(X, { size: 18 }),
-      command: ({ editor: l, range: m }) => {
-        l.chain().focus().deleteRange(m).toggleNode("paragraph", "paragraph").run();
+});
+const CommandPluginKey = new PluginKey$1("slash-command");
+const SlashCommand = 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",
+          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,
+          range
+        }) => {
+          const $from = state.doc.resolve(range.from);
+          const type = state.schema.nodes[this.name];
+          const allow = !!$from.parent.type.contentMatch.matchType(type);
+          return allow;
+        }
       }
-    },
-    {
-      title: "To-do List",
-      description: "Track tasks with a to-do list.",
-      searchTerms: ["todo", "task", "list", "check", "checkbox"],
-      icon: /* @__PURE__ */ s(j, { size: 18 }),
-      command: ({ editor: l, range: m }) => {
-        l.chain().focus().deleteRange(m).toggleTaskList().run();
+    };
+  },
+  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
+          };
+        }
       }
-    },
-    {
-      title: "Heading 1",
-      description: "Big section heading.",
-      searchTerms: ["title", "big", "large"],
-      icon: /* @__PURE__ */ s(Y, { size: 18 }),
-      command: ({ editor: l, range: m }) => {
-        l.chain().focus().deleteRange(m).setNode("heading", { level: 1 }).run();
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: `span[data-type="${this.name}"]`
       }
-    },
-    {
-      title: "Heading 2",
-      description: "Medium section heading.",
-      searchTerms: ["subtitle", "medium"],
-      icon: /* @__PURE__ */ s(J, { size: 18 }),
-      command: ({ editor: l, range: m }) => {
-        l.chain().focus().deleteRange(m).setNode("heading", { level: 2 }).run();
+    ];
+  },
+  renderHTML({
+    node,
+    HTMLAttributes
+  }) {
+    if (this.options.renderLabel !== void 0) {
+      console.warn("renderLabel is deprecated use renderText and renderHTML instead");
+      return [
+        "span",
+        mergeAttributes({ "data-type": this.name }, this.options.HTMLAttributes, HTMLAttributes),
+        this.options.renderLabel({
+          options: this.options,
+          node
+        })
+      ];
+    }
+    const mergedOptions = { ...this.options };
+    mergedOptions.HTMLAttributes = mergeAttributes({ "data-type": this.name }, this.options.HTMLAttributes, HTMLAttributes);
+    const html = this.options.renderHTML({
+      options: mergedOptions,
+      node
+    });
+    if (typeof html === "string") {
+      return [
+        "span",
+        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
+      }) => {
+        let isCommand = false;
+        const { selection } = state;
+        const {
+          empty,
+          anchor
+        } = selection;
+        if (!empty) {
+          return false;
+        }
+        state.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,
+  onDisabledAutocompleteClick,
+  aiController
+}) => ({
+  items: ({ query }) => {
+    const availableSuggestionItems = [...suggestionItems];
+    if (!onDisabledAutocompleteClick && aiController) {
+      availableSuggestionItems.push(autocompleteSuggestionItem);
+    }
+    if (onDisabledAutocompleteClick) {
+      availableSuggestionItems.push({
+        title: "Autocomplete",
+        description: "Add text based on the context.",
+        searchTerms: ["ai"],
+        icon: /* @__PURE__ */ jsx(AutoAwesomeIcon, { size: 18 }),
+        command: onDisabledAutocompleteClick
+      });
+    }
+    return availableSuggestionItems.filter((item) => {
+      const inTitle = item.title.toLowerCase().startsWith(query.toLowerCase());
+      if (inTitle) return inTitle;
+      const inSearchTerms = item.searchTerms?.some((term) => term.toLowerCase().startsWith(query.toLowerCase()));
+      return inSearchTerms;
+    });
+  },
+  render: () => {
+    let component;
+    let popup;
+    return {
+      onStart: (props) => {
+        component = new ReactRenderer(CommandList, {
+          props: {
+            ...props,
+            upload,
+            aiController
+          },
+          editor: props.editor
+        });
+        if (!props.clientRect) {
+          return;
+        }
+        popup = tippy("body", {
+          getReferenceClientRect: props.clientRect,
+          appendTo: ref?.current,
+          content: component.element,
+          showOnCreate: true,
+          interactive: true,
+          trigger: "manual",
+          placement: "bottom-start"
+        });
+      },
+      onUpdate(props) {
+        component.updateProps(props);
+        if (!props.clientRect) {
+          return;
+        }
+        popup[0].setProps({
+          getReferenceClientRect: props.clientRect
+        });
+      },
+      onKeyDown(props) {
+        if (props.event.key === "Escape") {
+          popup[0].hide();
+          props.event.preventDefault();
+          return true;
+        }
+        return component.ref?.onKeyDown(props);
+      },
+      onExit() {
+        if (popup && popup[0])
+          popup[0].destroy();
+        component?.destroy();
       }
-    },
-    {
-      title: "Heading 3",
-      description: "Small section heading.",
-      searchTerms: ["subtitle", "small"],
-      icon: /* @__PURE__ */ s(G, { size: 18 }),
-      command: ({ editor: l, range: m }) => {
-        l.chain().focus().deleteRange(m).setNode("heading", { level: 3 }).run();
+    };
+  }
+});
+const CommandList = forwardRef((props, ref) => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const { editor } = useCurrentEditor();
+  const selectItem = (item) => {
+    if (!editor) return;
+    item?.command?.({
+      editor,
+      range: props.range,
+      upload: props.upload,
+      aiController: props.aiController
+    });
+  };
+  const upHandler = () => {
+    setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length);
+  };
+  const downHandler = () => {
+    setSelectedIndex((selectedIndex + 1) % props.items.length);
+  };
+  const enterHandler = () => {
+    const item = props.items[selectedIndex];
+    selectItem(item);
+  };
+  useEffect(() => setSelectedIndex(0), [props.items]);
+  useImperativeHandle(ref, () => ({
+    onKeyDown: ({ event }) => {
+      if (event.key === "ArrowUp") {
+        upHandler();
+        return true;
       }
-    },
-    {
-      title: "Bullet List",
-      description: "Create a simple bullet list.",
-      searchTerms: ["unordered", "point"],
-      icon: /* @__PURE__ */ s(ee, { size: 18 }),
-      command: ({ editor: l, range: m }) => {
-        l.chain().focus().deleteRange(m).toggleBulletList().run();
+      if (event.key === "ArrowDown") {
+        downHandler();
+        return true;
       }
-    },
-    {
-      title: "Numbered List",
-      description: "Create a list with numbering.",
-      searchTerms: ["ordered"],
-      icon: /* @__PURE__ */ s(te, { size: 18 }),
-      command: ({ editor: l, range: m }) => {
-        l.chain().focus().deleteRange(m).toggleOrderedList().run();
+      if (event.key === "Enter") {
+        enterHandler();
+        return true;
       }
-    },
-    {
-      title: "Quote",
-      description: "Capture a quote.",
-      searchTerms: ["blockquote"],
-      icon: /* @__PURE__ */ s(oe, { size: 18 }),
-      command: ({ editor: l, range: m }) => l.chain().focus().deleteRange(m).toggleNode("paragraph", "paragraph").toggleBlockquote().run()
-    },
-    {
-      title: "Code",
-      description: "Capture a code snippet.",
-      searchTerms: ["codeblock"],
-      icon: /* @__PURE__ */ s(z, { size: 18 }),
-      command: ({ editor: l, range: m }) => l.chain().focus().deleteRange(m).toggleCodeBlock().run()
-    },
+      return false;
+    }
+  }));
+  const itemRefs = useRef([]);
+  useEffect(() => {
+    if (itemRefs.current[selectedIndex]) {
+      itemRefs.current[selectedIndex].scrollIntoView({
+        block: "nearest"
+      });
+    }
+  }, [selectedIndex]);
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      title: "Image",
-      description: "Upload an image from your computer.",
-      searchTerms: ["photo", "picture", "media"],
-      icon: /* @__PURE__ */ s(_e, { size: 18 }),
-      command: ({ editor: l, range: m }) => {
-        l.chain().focus().deleteRange(m).run();
-        const k = document.createElement("input");
-        k.type = "file", k.accept = "image/*", k.onchange = async () => {
-          if (k.files?.length) {
-            if (!k.files[0])
-              return;
-            l.view.state.selection.from;
+      className: cls("text-gray-900 dark:text-white z-50 max-h-[280px] h-auto w-72 overflow-y-auto rounded-md border bg-white dark:bg-gray-900 px-1 py-2 shadow transition-all", defaultBorderMixin),
+      children: props.items.length ? props.items.map((item, index) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          value: item.title,
+          ref: (el) => {
+            if (!el) return;
+            return itemRefs.current[index] = el;
+          },
+          onClick: () => selectItem(item),
+          tabIndex: index === selectedIndex ? 0 : -1,
+          "aria-selected": index === selectedIndex,
+          className: 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-gray-700 aria-selected:bg-blue-50 aria-selected:dark:bg-gray-700",
+            index === selectedIndex ? "bg-blue-100 dark:bg-slate-950" : ""
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cls("flex h-10 w-10 items-center justify-center rounded-md border bg-white dark:bg-gray-900", defaultBorderMixin),
+                children: item.icon
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "font-medium", children: item.title }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-700 dark:text-slate-300", children: item.description })
+            ] })
+          ]
+        },
+        item.title
+      )) : /* @__PURE__ */ jsx("div", { className: "item", children: "No result" })
+    }
+  );
+});
+const autocompleteSuggestionItem = {
+  title: "Autocomplete",
+  description: "Add text based on the context.",
+  searchTerms: ["ai"],
+  icon: /* @__PURE__ */ jsx(AutoAwesomeIcon, { size: 18 }),
+  command: async ({
+    editor,
+    range,
+    aiController
+  }) => {
+    if (!aiController)
+      throw Error("No AiController");
+    editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").run();
+    const { state } = editor;
+    const {
+      from,
+      to
+    } = state.selection;
+    const textBeforeCursor = state.doc.textBetween(0, from, "\n");
+    const textAfterCursor = state.doc.textBetween(to, state.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();
+      }
+    });
+    editor.chain().focus().insertContent(result, {
+      applyInputRules: false,
+      applyPasteRules: false,
+      parseOptions: {
+        preserveWhitespace: false
+      }
+    }).run();
+  }
+};
+const suggestionItems = [
+  {
+    title: "Text",
+    description: "Just start typing with plain text.",
+    searchTerms: ["p", "paragraph"],
+    icon: /* @__PURE__ */ jsx(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__ */ jsx(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__ */ jsx(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__ */ jsx(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__ */ jsx(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__ */ jsx(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__ */ jsx(FormatListNumberedIcon, { size: 18 }),
+    command: ({
+      editor,
+      range
+    }) => {
+      editor.chain().focus().deleteRange(range).toggleOrderedList().run();
+    }
+  },
+  {
+    title: "Quote",
+    description: "Capture a quote.",
+    searchTerms: ["blockquote"],
+    icon: /* @__PURE__ */ jsx(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__ */ jsx(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__ */ jsx(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 view = editor.view;
+          images.forEach((image) => {
+            const reader = new FileReader();
+            reader.onload = async (readerEvent) => {
+              await onFileRead(view, readerEvent, pos, upload, image);
+            };
+            reader.readAsDataURL(image);
+          });
+        }
+        return true;
+      };
+      input.click();
+    }
+  }
+];
+function buildDecorationSet(highlight, doc) {
+  const decorations = [];
+  if (highlight) {
+    decorations.push(
+      Decoration$1.inline(highlight.from, highlight.to, {
+        class: "dark:bg-slate-700 bg-slate-300"
+      })
+    );
+  }
+  const decorationSet = DecorationSet$1.create(doc, decorations);
+  return decorationSet;
+}
+const HighlightDecorationExtension = (initialHighlight) => Extension.create({
+  name: "highlightDecoration",
+  addOptions() {
+    return {
+      pluginKey: new PluginKey$1("highlightDecoration"),
+      highlight: initialHighlight
+    };
+  },
+  addProseMirrorPlugins() {
+    const pluginKey = this.options.pluginKey;
+    return [
+      new Plugin$1({
+        key: pluginKey,
+        state: {
+          init: (_, { doc }) => {
+            const highlight = this.options.highlight;
+            const decorationSet = highlight && doc ? buildDecorationSet(highlight, doc) : DecorationSet$1.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: DecorationSet$1.empty
+                };
+              }
+              const decorationSet = buildDecorationSet(highlight, doc);
+              return {
+                decorationSet,
+                highlight
+              };
+            } else {
+              return oldState;
+            }
+          }
+        },
+        props: {
+          decorations(state) {
+            const autocompleteState = this.getState(state);
+            if (autocompleteState?.decorationSet) {
+              return autocompleteState.decorationSet;
+            } else {
+              return DecorationSet$1.empty;
+            }
           }
-        }, k.click();
+        }
+      })
+    ];
+  },
+  addCommands() {
+    return {
+      toggleAutocompleteHighlight: (range) => ({
+        state,
+        dispatch
+      }) => {
+        const { selection } = state;
+        const pos = selection.from;
+        if (!dispatch) return false;
+        const pluginKey = this.options.pluginKey;
+        const tr = state.tr.setMeta(pluginKey, {
+          pos,
+          type: "highlightDecoration",
+          remove: false,
+          range
+        });
+        dispatch(tr);
+        return true;
+      },
+      removeAutocompleteHighlight: () => ({
+        state,
+        dispatch
+      }) => {
+        if (!dispatch) return false;
+        const pluginKey = this.options.pluginKey;
+        const tr = state.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 CustomDocument = Document.extend({
+  // content: 'heading block*',
+});
+const proseClasses = {
+  "sm": "prose-sm",
+  "base": "prose-base",
+  "lg": "prose-lg"
+};
+const FireCMSEditor = ({
+  content,
+  onJsonContentChange,
+  onHtmlContentChange,
+  onMarkdownContentChange,
+  version,
+  textSize = "base",
+  highlight,
+  handleImageUpload,
+  aiController,
+  onDisabledAutocompleteClick
+}) => {
+  const ref = React.useRef(null);
+  const editorRef = React.useRef(null);
+  const imagePlugin = createDropImagePlugin(handleImageUpload);
+  const imageExtension = useMemo(() => createImageExtension(imagePlugin), []);
+  const [openNode, setOpenNode] = useState(false);
+  const [openLink, setOpenLink] = useState(false);
+  useInjectStyles("Editor", cssStyles);
+  const deferredHighlight = useDeferredValue(highlight);
+  useEffect(() => {
+    if (version === void 0) return;
+    if (version > -1 && editorRef.current) {
+      editorRef.current?.commands.setContent(content ?? "");
+    }
+  }, [version]);
+  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();
       }
     }
-  ]), i = rt.configure({
-    suggestion: {
-      items: () => n,
-      render: nt
+  }, [deferredHighlight?.from, deferredHighlight?.to]);
+  const onEditorUpdate = (editor) => {
+    editorRef.current = editor;
+    if (onMarkdownContentChange) {
+      const markdown = editorRef.current.storage.markdown.getMarkdown();
+      onMarkdownContentChange?.(addLineBreakAfterImages(markdown));
     }
-  }), d = Z(() => yt(e), []), u = [
-    me,
-    ge,
-    pe,
-    he.configure({
-      multicolor: !0
-    }),
-    fe.configure({
-      html: !1,
-      transformCopiedText: !0
-    }),
-    vt,
-    At,
-    kt,
-    gt,
-    pt,
-    // tiptapImage,
-    d,
-    // updatedImage,
-    ft,
-    ht,
-    bt,
-    i
-  ], [p, h] = v(!1), [f, A] = v(!1);
-  Ze("Editor", Tt);
-  const E = L.useRef(null), [ie, ce] = v(null), [M, le] = v(null), [N, de] = v(null), ue = (l) => {
-    E.current = l, a && ce(l.storage.markdown.getMarkdown()), t && le(H(l.getJSON())), r && de(l.getHTML());
-  };
-  return R(ie, () => {
-    if (E.current) {
-      const l = E.current.storage.markdown.getMarkdown();
-      a?.(Lt(l));
+    if (onJsonContentChange) {
+      const jsonContent = removeClassesFromJson(editor.getJSON());
+      onJsonContentChange(jsonContent);
+    }
+    if (onHtmlContentChange) {
+      onHtmlContentChange?.(editor.getHTML());
     }
-  }, !1, 500), R(M, () => {
-    M && t?.(M);
-  }, !1, 500), R(N, () => {
-    N && r?.(N);
-  }, !1, 500), o ? /* @__PURE__ */ s("div", { className: "relative w-full p-8", children: /* @__PURE__ */ s(Ge, { children: /* @__PURE__ */ s(
+  };
+  const proseClass = proseClasses[textSize];
+  const extensions = useMemo(() => [
+    starterKit,
+    CustomDocument,
+    HighlightDecorationExtension(highlight),
+    TextLoadingDecorationExtension,
+    Underline,
+    TextStyle,
+    Color,
+    BulletList,
+    Highlight.configure({
+      multicolor: true
+    }),
+    CustomKeymap,
+    DragAndDrop,
+    placeholder,
+    tiptapLink,
+    imageExtension,
+    taskList,
+    taskItem,
+    markdownExtension,
+    horizontalRule,
+    SlashCommand.configure({
+      HTMLAttributes: {
+        class: "mention"
+      },
+      suggestion: suggestion(ref, {
+        upload: handleImageUpload,
+        aiController,
+        onDisabledAutocompleteClick
+      })
+    })
+  ], []);
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      className: "relative min-h-[500px] w-full bg-white dark:bg-gray-950 rounded-lg",
-      children: /* @__PURE__ */ b(
-        ye,
+      ref,
+      className: "relative min-h-[300px] w-full",
+      children: /* @__PURE__ */ jsx(
+        EditorProvider,
         {
-          content: o,
-          extensions: u,
+          content: content ?? "",
+          extensions,
           editorProps: {
-            ...c,
             attributes: {
-              class: "prose-lg prose-headings:font-title font-default focus:outline-none max-w-full p-12"
+              class: cls(proseClass, "prose-headings:font-title font-default focus:outline-none max-w-full p-12")
             }
           },
-          onUpdate: ({ editor: l }) => {
-            console.debug("Editor updated"), ue(l);
+          onCreate: ({ editor }) => {
+            editorRef.current = editor;
           },
-          children: [
-            /* @__PURE__ */ b(
-              tt,
-              {
-                className: g("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", x),
-                children: [
-                  /* @__PURE__ */ s(ot, { className: "px-2 text-gray-700 dark:text-slate-300", children: "No results" }),
-                  n.map((l) => /* @__PURE__ */ b(
-                    se,
-                    {
-                      value: l.title,
-                      onCommand: (m) => l?.command?.(m),
-                      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__ */ s(
-                          "div",
-                          {
-                            className: g("flex h-10 w-10 items-center justify-center rounded-md border bg-white dark:bg-gray-900", x),
-                            children: l.icon
-                          }
-                        ),
-                        /* @__PURE__ */ b("div", { children: [
-                          /* @__PURE__ */ s("p", { className: "font-medium", children: l.title }),
-                          /* @__PURE__ */ s("p", { className: "text-xs text-gray-700 dark:text-slate-300", children: l.description })
-                        ] })
-                      ]
-                    },
-                    l.title
-                  ))
-                ]
-              }
-            ),
-            /* @__PURE__ */ b(
-              je,
-              {
-                tippyOptions: {
-                  placement: "top"
-                },
-                className: g("flex w-fit max-w-[90vw] h-10 overflow-hidden rounded border bg-white dark:bg-gray-900 shadow", x),
-                children: [
-                  /* @__PURE__ */ s(ct, { open: p, onOpenChange: h }),
-                  /* @__PURE__ */ s(K, { orientation: "vertical" }),
-                  /* @__PURE__ */ s(ut, { open: f, onOpenChange: A }),
-                  /* @__PURE__ */ s(K, { orientation: "vertical" }),
-                  /* @__PURE__ */ s(mt, {})
-                ]
-              }
-            )
-          ]
+          onUpdate: ({ editor }) => {
+            onEditorUpdate(editor);
+          },
+          children: /* @__PURE__ */ jsxs(
+            EditorBubble,
+            {
+              tippyOptions: {
+                placement: "top"
+              },
+              className: cls("flex w-fit max-w-[90vw] h-10 overflow-hidden rounded border bg-white dark:bg-gray-900 shadow", defaultBorderMixin),
+              children: [
+                /* @__PURE__ */ jsx(NodeSelector, { portalContainer: ref.current, open: openNode, onOpenChange: setOpenNode }),
+                /* @__PURE__ */ jsx(Separator, { orientation: "vertical" }),
+                /* @__PURE__ */ jsx(LinkSelector, { open: openLink, onOpenChange: setOpenLink }),
+                /* @__PURE__ */ jsx(Separator, { orientation: "vertical" }),
+                /* @__PURE__ */ jsx(TextButtons, {})
+              ]
+            }
+          )
         }
       )
     }
-  ) }) }) : null;
+  );
 };
-function Lt(e) {
-  const o = /!\[.*?\]\(.*?\)/g;
-  return e.replace(o, (t) => `${t}
-`);
+function addLineBreakAfterImages(markdown) {
+  const imageRegex = /!\[.*?\]\(.*?\)/g;
+  return markdown.replace(imageRegex, (match) => `${match}`);
+}
+const cssStyles = `
+.ProseMirror {
+    box-shadow: none !important;
 }
-const Tt = `
-
 .ProseMirror .is-editor-empty:first-child::before {
   content: attr(data-placeholder);
   float: left;
@@ -990,6 +1645,7 @@ const Tt = `
 }
 
 .is-empty {
+  cursor: text;
   color: rgb(100 116 139); //500
 }
 
@@ -1007,6 +1663,7 @@ const Tt = `
   &.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;
   }
 }
 
@@ -1034,7 +1691,7 @@ ul[data-type="taskList"] li > label {
     }
   
     &:active {
-      background-color: rgb(71 85 105);;
+      background-color: rgb(71 85 105);
     }
   }
 }
@@ -1101,7 +1758,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;
@@ -1112,7 +1769,7 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
 }
 
 .drag-handle {
-  position: fixed;
+  position: absolute;
   opacity: 1;
   transition: opacity ease-in 0.2s;
   border-radius: 0.25rem;
@@ -1123,7 +1780,7 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
   background-position: center;
   width: 1.2rem;
   height: 1.5rem;
-  z-index: 50;
+  z-index: 100;
   cursor: grab;
 
   &:hover {
@@ -1158,6 +1815,6 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
 }
 `;
 export {
-  eo as FireCMSEditor
+  FireCMSEditor
 };
 //# sourceMappingURL=index.es.js.map