@firecms/editor 3.0.0-canary.9 → 3.0.0-canary.90

package/dist/index.es.js

@@ -1,342 +1,407 @@
-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, cn 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 } from "react";
+import TiptapUnderline from "@tiptap/extension-underline";
+import TextStyle from "@tiptap/extension-text-style";
+import { Color } from "@tiptap/extension-color";
+import { Markdown } from "tiptap-markdown";
+import Highlight from "@tiptap/extension-highlight";
+import { useCurrentEditor, BubbleMenu, isNodeSelection, ReactRenderer, EditorProvider } from "@tiptap/react";
+import { createStore, Provider, atom, useAtom, useSetAtom, useAtomValue } from "jotai";
+import { Slot } from "@radix-ui/react-slot";
+import tunnel from "tunnel-rat";
+import { Command as Command$1, CommandItem, CommandEmpty } from "cmdk";
+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 Suggestion from "@tiptap/suggestion";
+import tippy from "tippy.js";
+import { Popover, Button, ExpandMoreIcon, CheckIcon, TextFieldsIcon, LooksOneIcon, LooksTwoIcon, Looks3Icon, CheckBoxIcon, FormatListBulletedIcon, FormatListNumberedIcon, FormatQuoteIcon, CodeIcon, cls, DeleteIcon, FormatBoldIcon, FormatItalicIcon, FormatUnderlinedIcon, FormatStrikethroughIcon, defaultBorderMixin, useInjectStyles, Separator, ImageIcon } from "@firecms/ui";
+import { Plugin } from "prosemirror-state";
+import { DecorationSet, Decoration, __serializeForClipboard } from "@tiptap/pm/view";
+import { Plugin as Plugin$1, NodeSelection } from "@tiptap/pm/state";
+const editorStore = createStore();
+const EditorRoot = ({ children }) => {
+  return /* @__PURE__ */ jsx(Provider, { store: editorStore, children });
+};
+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
+EditorBubbleItem.displayName = "EditorBubbleItem";
+const t = tunnel();
+const queryAtom = atom("");
+const rangeAtom = atom(null);
+const EditorCommandOut = ({
+  query,
+  range
 }) => {
-  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 })
-        );
+  const setQuery = useSetAtom(queryAtom, { store: editorStore });
+  const setRange = useSetAtom(rangeAtom, { store: editorStore });
+  useEffect(() => {
+    setQuery(query);
+  }, [query, setQuery]);
+  useEffect(() => {
+    setRange(range);
+  }, [range, setRange]);
+  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 })
+          );
       }
     };
-    return document.addEventListener("keydown", c), () => {
-      document.removeEventListener("keydown", c);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
     };
-  }, []), /* @__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,
+  }, []);
+  return /* @__PURE__ */ jsx(t.Out, {});
+};
+const EditorCommand = forwardRef(
+  ({ children, className, ...rest }, ref) => {
+    const commandListRef = useRef(null);
+    const [query, setQuery] = useAtom(queryAtom);
+    return /* @__PURE__ */ jsx(t.In, { children: /* @__PURE__ */ jsxs(
+      Command$1,
       {
-        ref: r,
-        onKeyDown: (i) => {
-          i.stopPropagation();
+        ref,
+        onKeyDown: (e) => {
+          e.stopPropagation();
         },
         id: "slash-command",
-        className: o,
-        ...t,
+        className,
+        ...rest,
         children: [
-          /* @__PURE__ */ s(S.Input, { value: c, onValueChange: n, style: { display: "none" } }),
-          /* @__PURE__ */ s(S.List, { ref: a, children: e })
+          /* @__PURE__ */ jsx(Command$1.Input, { value: query, onValueChange: setQuery, style: { display: "none" } }),
+          /* @__PURE__ */ jsx(Command$1.List, { ref: commandListRef, children })
         ]
       }
     ) });
   }
-), 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 });
+);
+const EditorCommandItem = forwardRef(({ children, onCommand, ...rest }, ref) => {
+  const { editor } = useCurrentEditor();
+  const range = useAtomValue(rangeAtom);
+  if (!editor || !range) return null;
+  return /* @__PURE__ */ jsx(CommandItem, { ref, ...rest, onSelect: () => onCommand({ editor, range }), children });
 });
-se.displayName = "EditorCommandItem";
-const ot = Me, rt = B.create({
+EditorCommandItem.displayName = "EditorCommandItem";
+const EditorCommandEmpty = CommandEmpty;
+const Command = Extension.create({
   name: "slash-command",
   addOptions() {
     return {
       suggestion: {
         char: "/",
-        command: ({ editor: e, range: o, props: t }) => {
-          t.command({ editor: e, range: o });
+        command: ({ editor, range, props }) => {
+          props.command({ editor, range });
         }
       }
     };
   },
   addProseMirrorPlugins() {
     return [
-      ze({
+      Suggestion({
         editor: this.editor,
         ...this.options.suggestion
       })
     ];
   }
-}), nt = () => {
-  let e = null, o = null;
+});
+const renderItems = () => {
+  let component = null;
+  let popup = null;
   return {
-    onStart: (t) => {
-      e = new xe(et, {
-        props: t,
-        editor: t.editor
-      }), o = Fe("body", {
-        getReferenceClientRect: t.clientRect,
+    onStart: (props) => {
+      component = new ReactRenderer(EditorCommandOut, {
+        props,
+        editor: props.editor
+      });
+      popup = tippy("body", {
+        getReferenceClientRect: props.clientRect,
         appendTo: () => document.body,
-        content: e.element,
-        showOnCreate: !0,
-        interactive: !0,
+        content: component.element,
+        showOnCreate: true,
+        interactive: true,
         trigger: "manual",
         placement: "bottom-start"
       });
     },
-    onUpdate: (t) => {
-      e?.updateProps(t), o && o[0].setProps({
-        getReferenceClientRect: t.clientRect
+    onUpdate: (props) => {
+      component?.updateProps(props);
+      popup && popup[0].setProps({
+        getReferenceClientRect: props.clientRect
       });
     },
-    onKeyDown: (t) => t.event.key === "Escape" ? (o?.[0].hide(), !0) : e?.ref?.onKeyDown(t),
+    onKeyDown: (props) => {
+      if (props.event.key === "Escape") {
+        popup?.[0].hide();
+        return true;
+      }
+      return component?.ref?.onKeyDown(props);
+    },
     onExit: () => {
-      o?.[0].destroy(), e?.destroy();
+      popup?.[0].destroy();
+      component?.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({
+};
+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 Be({
+      new InputRule({
         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)
+        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)
           );
         }
       })
     ];
   }
-}), q = [
+});
+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
 }) => {
-  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",
       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 || "",
+                defaultValue: editor.getAttributes("link").href || "",
                 className: "text-gray-900 dark:text-white flex-grow bg-transparent p-1 text-sm outline-none"
               }
             ),
-            r.getAttributes("link").href ? /* @__PURE__ */ s(
-              w,
+            editor.getAttributes("link").href ? /* @__PURE__ */ jsx(
+              Button,
               {
                 size: "small",
                 variant: "text",
@@ -344,381 +409,485 @@ 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 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 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 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 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,
+  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(plugin, view, readerEvent, pos, upload, image) {
+  const { schema } = view.state;
+  let decorationSet = plugin.getState(view.state);
+  const placeholder2 = document.createElement("div");
+  const imageElement = document.createElement("img");
+  imageElement.setAttribute("class", "opacity-40 rounded-lg border border-stone-200");
+  imageElement.src = readerEvent.target?.result;
+  placeholder2.appendChild(imageElement);
+  const deco = Decoration.widget(pos, placeholder2);
+  decorationSet = decorationSet?.add(view.state.doc, [deco]);
+  view.dispatch(view.state.tr.setMeta(plugin, { decorationSet }));
+  const src = await upload(image);
+  console.log("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 dropImagePlugin = (upload) => {
+  const plugin = new Plugin({
     state: {
       // Initialize the plugin state with an empty DecorationSet
-      init: () => Ve.empty,
+      init: () => DecorationSet.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) => {
+          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;
+          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(plugin, 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;
+        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, 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 = (uploadFn) => {
+  return TiptapImage.extend({
+    addProseMirrorPlugins() {
+      return [dropImagePlugin(uploadFn)];
+    }
+  }).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(node) {
+  const data = node.getBoundingClientRect();
   return {
-    top: o.top,
-    left: o.left,
-    width: o.width
+    top: data.top,
+    left: data.left,
+    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: () => {
+          dragHandleElement?.remove?.();
+          dragHandleElement = null;
+        }
+      };
+    },
     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 FireCMSEditor = ({
+  handleImageUpload,
+  initialContent,
+  onJsonContentChange,
+  onHtmlContentChange,
+  onMarkdownContentChange
 }) => {
-  const c = {
+  const defaultEditorProps = {
     handleDOMEvents: {
-      keydown: (l, m) => !!(["ArrowUp", "ArrowDown", "Enter"].includes(m.key) && document.querySelector("#slash-command"))
+      keydown: (_view, event) => {
+        if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
+          const slashCommand2 = document.querySelector("#slash-command");
+          if (slashCommand2) {
+            return true;
+          }
+        }
+        return false;
+      }
     }
     // handlePaste: (view, event) => {
     //     if (event.clipboardData && event.clipboardData.files && event.clipboardData.files[0]) {
@@ -752,206 +921,235 @@ const At = B.create({
     //     }
     //     return false;
     // }
-  }, n = at([
+  };
+  const suggestionItems = createSuggestionItems([
     {
       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();
+      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__ */ s(j, { size: 18 }),
-      command: ({ editor: l, range: m }) => {
-        l.chain().focus().deleteRange(m).toggleTaskList().run();
+      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__ */ s(Y, { size: 18 }),
-      command: ({ editor: l, range: m }) => {
-        l.chain().focus().deleteRange(m).setNode("heading", { level: 1 }).run();
+      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__ */ s(J, { size: 18 }),
-      command: ({ editor: l, range: m }) => {
-        l.chain().focus().deleteRange(m).setNode("heading", { level: 2 }).run();
+      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__ */ s(G, { size: 18 }),
-      command: ({ editor: l, range: m }) => {
-        l.chain().focus().deleteRange(m).setNode("heading", { level: 3 }).run();
+      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__ */ s(ee, { size: 18 }),
-      command: ({ editor: l, range: m }) => {
-        l.chain().focus().deleteRange(m).toggleBulletList().run();
+      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__ */ s(te, { size: 18 }),
-      command: ({ editor: l, range: m }) => {
-        l.chain().focus().deleteRange(m).toggleOrderedList().run();
+      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__ */ s(oe, { size: 18 }),
-      command: ({ editor: l, range: m }) => l.chain().focus().deleteRange(m).toggleNode("paragraph", "paragraph").toggleBlockquote().run()
+      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__ */ s(z, { size: 18 }),
-      command: ({ editor: l, range: m }) => l.chain().focus().deleteRange(m).toggleCodeBlock().run()
+      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"],
-      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;
+      icon: /* @__PURE__ */ jsx(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;
           }
-        }, k.click();
+        };
+        input.click();
       }
     }
-  ]), i = rt.configure({
+  ]);
+  const slashCommand = Command.configure({
     suggestion: {
-      items: () => n,
-      render: nt
+      items: () => suggestionItems,
+      render: renderItems
     }
-  }), d = Z(() => yt(e), []), u = [
-    me,
-    ge,
-    pe,
-    he.configure({
-      multicolor: !0
+  });
+  const imageExtension = useMemo(() => createImageExtension(handleImageUpload), []);
+  const extensions = [
+    TiptapUnderline,
+    TextStyle,
+    Color,
+    Highlight.configure({
+      multicolor: true
     }),
-    fe.configure({
-      html: !1,
-      transformCopiedText: !0
+    Markdown.configure({
+      html: false,
+      transformCopiedText: true
     }),
-    vt,
-    At,
-    kt,
-    gt,
-    pt,
+    CustomKeymap,
+    DragAndDrop,
+    starterKit,
+    placeholder,
+    tiptapLink,
     // tiptapImage,
-    d,
+    imageExtension,
     // 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());
+    taskList,
+    taskItem,
+    horizontalRule,
+    slashCommand
+  ];
+  const [openNode, setOpenNode] = useState(false);
+  const [openLink, setOpenLink] = useState(false);
+  useInjectStyles("Editor", cssStyles);
+  const editorRef = React.useRef(null);
+  const [markdownContent, setMarkdownContent] = useState(null);
+  const [jsonContent, setJsonContent] = useState(null);
+  const [htmlContent, setHtmlContent] = useState(null);
+  const onEditorUpdate = (editor) => {
+    editorRef.current = editor;
+    if (onMarkdownContentChange) {
+      setMarkdownContent(editor.storage.markdown.getMarkdown());
+    }
+    if (onJsonContentChange) {
+      setJsonContent(removeClassesFromJson(editor.getJSON()));
+    }
+    if (onHtmlContentChange) {
+      setHtmlContent(editor.getHTML());
+    }
   };
-  return R(ie, () => {
-    if (E.current) {
-      const l = E.current.storage.markdown.getMarkdown();
-      a?.(Lt(l));
+  useDebouncedCallback(markdownContent, () => {
+    if (editorRef.current) {
+      const markdown = editorRef.current.storage.markdown.getMarkdown();
+      onMarkdownContentChange?.(addLineBreakAfterImages(markdown));
     }
-  }, !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(
+  }, false, 500);
+  useDebouncedCallback(jsonContent, () => {
+    if (jsonContent)
+      onJsonContentChange?.(jsonContent);
+  }, false, 500);
+  useDebouncedCallback(htmlContent, () => {
+    if (htmlContent)
+      onHtmlContentChange?.(htmlContent);
+  }, false, 500);
+  if (!initialContent) return null;
+  return /* @__PURE__ */ jsx("div", { className: "relative w-full p-8", children: /* @__PURE__ */ jsx(EditorRoot, { children: /* @__PURE__ */ jsx(
     "div",
     {
       className: "relative min-h-[500px] w-full bg-white dark:bg-gray-950 rounded-lg",
-      children: /* @__PURE__ */ b(
-        ye,
+      children: /* @__PURE__ */ jsxs(
+        EditorProvider,
         {
-          content: o,
-          extensions: u,
+          content: initialContent,
+          extensions,
           editorProps: {
-            ...c,
+            ...defaultEditorProps,
             attributes: {
               class: "prose-lg prose-headings:font-title font-default focus:outline-none max-w-full p-12"
             }
           },
-          onUpdate: ({ editor: l }) => {
-            console.log("editor updated"), ue(l);
+          onUpdate: ({ editor }) => {
+            console.debug("Editor updated");
+            onEditorUpdate(editor);
           },
           children: [
-            /* @__PURE__ */ b(
-              tt,
+            /* @__PURE__ */ jsxs(
+              EditorCommand,
               {
-                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),
+                className: 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", defaultBorderMixin),
                 children: [
-                  /* @__PURE__ */ s(ot, { className: "px-2 text-gray-700 dark:text-slate-300", children: "No results" }),
-                  n.map((l) => /* @__PURE__ */ b(
-                    se,
+                  /* @__PURE__ */ jsx(EditorCommandEmpty, { className: "px-2 text-gray-700 dark:text-slate-300", children: "No results" }),
+                  suggestionItems.map((item) => /* @__PURE__ */ jsxs(
+                    EditorCommandItem,
                     {
-                      value: l.title,
-                      onCommand: (m) => l?.command?.(m),
+                      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__ */ s(
+                        /* @__PURE__ */ jsx(
                           "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
+                            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__ */ 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 })
+                        /* @__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 })
                         ] })
                       ]
                     },
-                    l.title
+                    item.title
                   ))
                 ]
               }
             ),
-            /* @__PURE__ */ b(
-              je,
+            /* @__PURE__ */ jsxs(
+              EditorBubble,
               {
                 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),
+                className: cls("flex w-fit max-w-[90vw] h-10 overflow-hidden rounded border bg-white dark:bg-gray-900 shadow", defaultBorderMixin),
                 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, {})
+                  /* @__PURE__ */ jsx(NodeSelector, { open: openNode, onOpenChange: setOpenNode }),
+                  /* @__PURE__ */ jsx(Separator, { orientation: "vertical" }),
+                  /* @__PURE__ */ jsx(LinkSelector, { open: openLink, onOpenChange: setOpenLink }),
+                  /* @__PURE__ */ jsx(Separator, { orientation: "vertical" }),
+                  /* @__PURE__ */ jsx(TextButtons, {})
                 ]
               }
             )
@@ -959,14 +1157,14 @@ const At = B.create({
         }
       )
     }
-  ) }) }) : 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 Tt = `
+const cssStyles = `
 
 .ProseMirror .is-editor-empty:first-child::before {
   content: attr(data-placeholder);
@@ -1158,6 +1356,6 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
 }
 `;
 export {
-  eo as FireCMSEditor
+  FireCMSEditor
 };
 //# sourceMappingURL=index.es.js.map