@firecms/editor 3.0.0-canary.18 → 3.0.0-canary.180

package/dist/index.es.js

@@ -1,973 +1,1960 @@
-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;
-        },
-        moveTransition: "transform 0.15s ease-out",
-        ...o
-      },
-      ...t
-    }), [t, o]);
-    return a ? (
-      //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;
-  }
-), 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;
-});
-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 })
-        );
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { forwardRef, useRef, useEffect, useState, useImperativeHandle, useMemo, useDeferredValue } from "react";
+import { CheckIcon, TextFieldsIcon, LooksOneIcon, LooksTwoIcon, Looks3Icon, CheckBoxIcon, FormatListBulletedIcon, FormatListNumberedIcon, FormatQuoteIcon, CodeIcon, KeyboardArrowDownIcon, Button, Popover, cls, focusedDisabled, DeleteIcon, FormatBoldIcon, FormatItalicIcon, FormatUnderlinedIcon, FormatStrikethroughIcon, defaultBorderMixin, AutoFixHighIcon, ImageIcon, useInjectStyles, Separator } from "@firecms/ui";
+import { useCurrentEditor, BubbleMenu, isNodeSelection, Node, mergeAttributes, ReactRenderer, EditorProvider } from "@tiptap/react";
+import Document from "@tiptap/extension-document";
+import { Markdown } from "tiptap-markdown";
+import Underline from "@tiptap/extension-underline";
+import Heading from "@tiptap/extension-heading";
+import TextStyle from "@tiptap/extension-text-style";
+import Color from "@tiptap/extension-color";
+import Highlight from "@tiptap/extension-highlight";
+import Bold from "@tiptap/extension-bold";
+import Italic from "@tiptap/extension-italic";
+import Strike from "@tiptap/extension-strike";
+import { c } from "react-compiler-runtime";
+import { Slot } from "@radix-ui/react-slot";
+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 OrderedList from "@tiptap/extension-ordered-list";
+import BulletList from "@tiptap/extension-bullet-list";
+import ListItem from "@tiptap/extension-list-item";
+import CodeBlock from "@tiptap/extension-code-block";
+import Blockquote from "@tiptap/extension-blockquote";
+import Code from "@tiptap/extension-code";
+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 Suggestion from "@tiptap/suggestion";
+import tippy from "tippy.js";
+const EditorBubble = forwardRef((t0, ref) => {
+  const $ = c(21);
+  let children;
+  let rest;
+  let tippyOptions;
+  if ($[0] !== t0) {
+    ({
+      children,
+      tippyOptions,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = rest;
+    $[3] = tippyOptions;
+  } else {
+    children = $[1];
+    rest = $[2];
+    tippyOptions = $[3];
+  }
+  const {
+    editor
+  } = useCurrentEditor();
+  const instanceRef = useRef(null);
+  let t1;
+  if ($[4] !== tippyOptions) {
+    t1 = () => {
+      if (!instanceRef.current || !tippyOptions?.placement) {
+        return;
       }
+      instanceRef.current.setProps({
+        placement: tippyOptions.placement
+      });
+      instanceRef.current.popperInstance?.update();
     };
-    return document.addEventListener("keydown", c), () => {
-      document.removeEventListener("keydown", c);
+    $[4] = tippyOptions;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  const t2 = tippyOptions?.placement;
+  let t3;
+  if ($[6] !== t2) {
+    t3 = [t2];
+    $[6] = t2;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  useEffect(t1, t3);
+  let t4;
+  const shouldShow = _temp$1;
+  let t5;
+  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = (val) => {
+      instanceRef.current = val;
     };
-  }, []), /* @__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 })
-        ]
-      }
-    ) });
+    $[8] = t5;
+  } else {
+    t5 = $[8];
   }
-), 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 });
-        }
-      }
+  let t6;
+  if ($[9] !== tippyOptions) {
+    t6 = {
+      onCreate: t5,
+      moveTransition: "transform 0.15s ease-out",
+      ...tippyOptions
     };
-  },
-  addProseMirrorPlugins() {
-    return [
-      ze({
-        editor: this.editor,
-        ...this.options.suggestion
-      })
-    ];
+    $[9] = tippyOptions;
+    $[10] = t6;
+  } else {
+    t6 = $[10];
   }
-}), 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 = [
-  {
-    name: "Text",
-    icon: X,
-    command: (e) => e?.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
-  },
-  {
-    name: "Heading 1",
-    icon: Y,
-    command: (e) => e?.chain().focus().toggleHeading({ level: 1 }).run(),
-    isActive: (e) => e?.isActive("heading", { level: 1 }) ?? !1
-  },
-  {
-    name: "Heading 2",
-    icon: J,
-    command: (e) => e?.chain().focus().toggleHeading({ level: 2 }).run(),
-    isActive: (e) => e?.isActive("heading", { level: 2 }) ?? !1
-  },
-  {
-    name: "Heading 3",
-    icon: G,
-    command: (e) => e?.chain().focus().toggleHeading({ level: 3 }).run(),
-    isActive: (e) => e?.isActive("heading", { level: 3 }) ?? !1
-  },
-  {
-    name: "To-do List",
-    icon: j,
-    command: (e) => e?.chain().focus().toggleTaskList().run(),
-    isActive: (e) => e?.isActive("taskItem") ?? !1
-  },
-  {
-    name: "Bullet List",
-    icon: ee,
-    command: (e) => e?.chain().focus().toggleBulletList().run(),
-    isActive: (e) => e?.isActive("bulletList") ?? !1
-  },
-  {
-    name: "Numbered List",
-    icon: te,
-    command: (e) => e?.chain().focus().toggleOrderedList().run(),
-    isActive: (e) => e?.isActive("orderedList") ?? !1
-  },
-  {
-    name: "Quote",
-    icon: oe,
-    command: (e) => e?.chain().focus().toggleNode("paragraph", "paragraph").toggleBlockquote().run(),
-    isActive: (e) => e?.isActive("blockquote") ?? !1
-  },
-  {
-    name: "Code",
-    icon: z,
-    command: (e) => e?.chain().focus().toggleCodeBlock().run(),
-    isActive: (e) => e?.isActive("codeBlock") ?? !1
-  }
-], ct = ({
-  open: e,
-  onOpenChange: o
-}) => {
-  const { editor: t } = y();
-  if (!t)
+  let t7;
+  if ($[11] !== rest || $[12] !== t6) {
+    t7 = {
+      shouldShow,
+      tippyOptions: t6,
+      ...rest
+    };
+    $[11] = rest;
+    $[12] = t6;
+    $[13] = t7;
+  } else {
+    t7 = $[13];
+  }
+  t4 = t7;
+  const bubbleMenuProps = t4;
+  if (!editor) {
     return null;
-  const r = q.filter((a) => a.isActive(t)).pop() ?? {
-    name: "Multiple"
-  };
-  return /* @__PURE__ */ s(
-    Q,
-    {
-      sideOffset: 5,
-      align: "start",
-      className: "w-48 p-1",
-      trigger: /* @__PURE__ */ b(
-        w,
-        {
-          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" })
-          ]
-        }
-      ),
-      modal: !0,
-      open: e,
-      onOpenChange: o,
-      children: q.map((a, c) => /* @__PURE__ */ b(
-        F,
-        {
-          onSelect: (n) => {
-            a.command(n), o(!1);
-          },
-          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 })
-            ] }),
-            r.name === a.name && /* @__PURE__ */ s(V, { size: "smallest" })
-          ]
-        },
-        c
-      ))
-    }
-  );
+  }
+  let t8;
+  if ($[14] !== bubbleMenuProps || $[15] !== children || $[16] !== editor) {
+    t8 = /* @__PURE__ */ jsx(BubbleMenu, { editor, ...bubbleMenuProps, children });
+    $[14] = bubbleMenuProps;
+    $[15] = children;
+    $[16] = editor;
+    $[17] = t8;
+  } else {
+    t8 = $[17];
+  }
+  let t9;
+  if ($[18] !== ref || $[19] !== t8) {
+    t9 = /* @__PURE__ */ jsx("div", { ref, children: t8 });
+    $[18] = ref;
+    $[19] = t8;
+    $[20] = t9;
+  } else {
+    t9 = $[20];
+  }
+  return t9;
+});
+function _temp$1(t0) {
+  const {
+    editor: editor_0,
+    state
+  } = t0;
+  const {
+    selection
+  } = state;
+  const {
+    empty
+  } = selection;
+  if (editor_0.isActive("image") || empty || isNodeSelection(selection)) {
+    return false;
+  }
+  return true;
+}
+const EditorBubbleItem = forwardRef((t0, ref) => {
+  const $ = c(14);
+  let asChild;
+  let children;
+  let onSelect;
+  let rest;
+  if ($[0] !== t0) {
+    ({
+      children,
+      asChild,
+      onSelect,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = asChild;
+    $[2] = children;
+    $[3] = onSelect;
+    $[4] = rest;
+  } else {
+    asChild = $[1];
+    children = $[2];
+    onSelect = $[3];
+    rest = $[4];
+  }
+  const {
+    editor
+  } = useCurrentEditor();
+  const Comp = asChild ? Slot : "div";
+  if (!editor) {
+    return null;
+  }
+  let t1;
+  if ($[5] !== editor || $[6] !== onSelect) {
+    t1 = () => onSelect?.(editor);
+    $[5] = editor;
+    $[6] = onSelect;
+    $[7] = t1;
+  } else {
+    t1 = $[7];
+  }
+  let t2;
+  if ($[8] !== Comp || $[9] !== children || $[10] !== ref || $[11] !== rest || $[12] !== t1) {
+    t2 = /* @__PURE__ */ jsx(Comp, { ref, ...rest, onClick: t1, children });
+    $[8] = Comp;
+    $[9] = children;
+    $[10] = ref;
+    $[11] = rest;
+    $[12] = t1;
+    $[13] = t2;
+  } else {
+    t2 = $[13];
+  }
+  return t2;
+});
+EditorBubbleItem.displayName = "EditorBubbleItem";
+const items = [{
+  name: "Text",
+  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: (editor) => (editor?.isActive("paragraph") && !editor?.isActive("bulletList") && !editor?.isActive("orderedList")) ?? false
+}, {
+  name: "Heading 1",
+  icon: LooksOneIcon,
+  command: (editor) => editor?.chain().focus().toggleHeading({
+    level: 1
+  }).run(),
+  isActive: (editor) => editor?.isActive("heading", {
+    level: 1
+  }) ?? false
+}, {
+  name: "Heading 2",
+  icon: LooksTwoIcon,
+  command: (editor) => editor?.chain().focus().toggleHeading({
+    level: 2
+  }).run(),
+  isActive: (editor) => editor?.isActive("heading", {
+    level: 2
+  }) ?? false
+}, {
+  name: "Heading 3",
+  icon: Looks3Icon,
+  command: (editor) => editor?.chain().focus().toggleHeading({
+    level: 3
+  }).run(),
+  isActive: (editor) => editor?.isActive("heading", {
+    level: 3
+  }) ?? false
+}, {
+  name: "To-do List",
+  icon: CheckBoxIcon,
+  command: (editor) => editor?.chain().focus().toggleTaskList().run(),
+  isActive: (editor) => editor?.isActive("taskItem") ?? false
+}, {
+  name: "Bullet List",
+  icon: FormatListBulletedIcon,
+  command: (editor) => editor?.chain().focus().toggleBulletList().run(),
+  isActive: (editor) => editor?.isActive("bulletList") ?? false
+}, {
+  name: "Numbered List",
+  icon: FormatListNumberedIcon,
+  command: (editor) => editor?.chain().focus().toggleOrderedList().run(),
+  isActive: (editor) => editor?.isActive("orderedList") ?? false
+}, {
+  name: "Quote",
+  icon: FormatQuoteIcon,
+  command: (editor) => editor?.chain().focus().toggleNode("paragraph", "paragraph").toggleBlockquote().run(),
+  isActive: (editor) => editor?.isActive("blockquote") ?? false
+}, {
+  name: "Code",
+  icon: CodeIcon,
+  command: (editor) => editor?.chain().focus().toggleCodeBlock().run(),
+  isActive: (editor) => editor?.isActive("codeBlock") ?? false
+}];
+const NodeSelector = (t0) => {
+  const $ = c(16);
+  const {
+    open,
+    onOpenChange,
+    portalContainer
+  } = t0;
+  const {
+    editor
+  } = useCurrentEditor();
+  if (!editor) {
+    return null;
+  }
+  let t1;
+  if ($[0] !== editor) {
+    t1 = items.filter((item) => item.isActive(editor)).pop() ?? {
+      name: "Multiple"
+    };
+    $[0] = editor;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const activeItem = t1;
+  let t2;
+  if ($[2] !== activeItem.name) {
+    t2 = /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap text-sm", children: activeItem.name });
+    $[2] = activeItem.name;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = /* @__PURE__ */ jsx(KeyboardArrowDownIcon, { size: "small" });
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  let t4;
+  if ($[5] !== t2) {
+    t4 = /* @__PURE__ */ jsxs(Button, { variant: "text", className: "gap-2 rounded-none", color: "text", children: [
+      t2,
+      t3
+    ] });
+    $[5] = t2;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  let t5;
+  if ($[7] !== activeItem.name || $[8] !== onOpenChange) {
+    t5 = items.map((item_0, index) => /* @__PURE__ */ jsxs(EditorBubbleItem, { onSelect: (editor_0) => {
+      item_0.command(editor_0);
+      onOpenChange(false);
+    }, className: "flex cursor-pointer items-center justify-between rounded px-2 py-1 text-sm hover:bg-blue-50 hover:dark:bg-surface-700 text-surface-900 dark:text-white", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ jsx(item_0.icon, { size: "smallest" }),
+        /* @__PURE__ */ jsx("span", { children: item_0.name })
+      ] }),
+      activeItem.name === item_0.name && /* @__PURE__ */ jsx(CheckIcon, { size: "smallest" })
+    ] }, index));
+    $[7] = activeItem.name;
+    $[8] = onOpenChange;
+    $[9] = t5;
+  } else {
+    t5 = $[9];
+  }
+  let t6;
+  if ($[10] !== onOpenChange || $[11] !== open || $[12] !== portalContainer || $[13] !== t4 || $[14] !== t5) {
+    t6 = /* @__PURE__ */ jsx(Popover, { sideOffset: 5, align: "start", portalContainer, className: "w-48 p-1", trigger: t4, modal: true, open, onOpenChange, children: t5 });
+    $[10] = onOpenChange;
+    $[11] = open;
+    $[12] = portalContainer;
+    $[13] = t4;
+    $[14] = t5;
+    $[15] = t6;
+  } else {
+    t6 = $[15];
+  }
+  return t6;
 };
-function 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 t = D(null), { editor: r } = y();
-  return C(() => {
-    t.current && t.current?.focus();
-  }), r ? /* @__PURE__ */ s(
-    Q,
-    {
-      modal: !0,
-      open: e,
-      onOpenChange: o,
-      trigger: /* @__PURE__ */ s(
-        w,
-        {
-          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: "Link" })
-        }
-      ),
-      children: /* @__PURE__ */ b(
-        "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();
-          },
-          className: "flex p-1",
-          children: [
-            /* @__PURE__ */ s(
-              "input",
-              {
-                ref: t,
-                autoFocus: e,
-                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"
-              }
-            ),
-            r.getAttributes("link").href ? /* @__PURE__ */ s(
-              w,
-              {
-                size: "small",
-                variant: "text",
-                type: "button",
-                color: "text",
-                className: "flex items-center",
-                onClick: () => {
-                  r.chain().focus().unsetLink().run();
-                },
-                children: /* @__PURE__ */ s(Ke, { size: "small" })
-              }
-            ) : /* @__PURE__ */ s(
-              w,
-              {
-                size: "small",
-                variant: "text",
-                children: /* @__PURE__ */ s(V, { size: "small" })
-              }
-            )
-          ]
-        }
-      )
-    }
-  ) : null;
-}, mt = () => {
-  const { editor: e } = y();
-  return e ? /* @__PURE__ */ s("div", { className: "flex", children: [
-    {
+const LinkSelector = (t0) => {
+  const $ = c(24);
+  const {
+    open,
+    onOpenChange
+  } = t0;
+  const inputRef = useRef(null);
+  const {
+    editor
+  } = useCurrentEditor();
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => {
+      inputRef.current && inputRef.current?.focus();
+    };
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  useEffect(t1);
+  if (!editor) {
+    return null;
+  }
+  let t2;
+  if ($[1] !== editor) {
+    t2 = cls("underline decoration-stone-400 underline-offset-4", {
+      "text-blue-500": editor.isActive("link")
+    });
+    $[1] = editor;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  if ($[3] !== t2) {
+    t3 = /* @__PURE__ */ jsx(Button, { variant: "text", className: "gap-2 rounded-none", color: "text", children: /* @__PURE__ */ jsx("p", { className: t2, children: "Link" }) });
+    $[3] = t2;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  let t4;
+  if ($[5] !== editor) {
+    t4 = (e) => {
+      const target = e.currentTarget;
+      e.preventDefault();
+      const input = target[0];
+      const url = getUrlFromString(input.value);
+      url && editor.chain().focus().setLink({
+        href: url
+      }).run();
+    };
+    $[5] = editor;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  let t5;
+  if ($[7] !== editor) {
+    t5 = editor.getAttributes("link").href || "";
+    $[7] = editor;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  let t6;
+  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = cls("text-surface-900 dark:text-white flex-grow bg-transparent p-1 text-sm outline-none", focusedDisabled);
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  let t7;
+  if ($[10] !== open || $[11] !== t5) {
+    t7 = /* @__PURE__ */ jsx("input", { ref: inputRef, autoFocus: open, placeholder: "Paste a link", defaultValue: t5, className: t6 });
+    $[10] = open;
+    $[11] = t5;
+    $[12] = t7;
+  } else {
+    t7 = $[12];
+  }
+  let t8;
+  if ($[13] !== editor) {
+    t8 = editor.getAttributes("link").href ? /* @__PURE__ */ jsx(Button, { size: "small", variant: "text", type: "button", color: "text", className: "flex items-center", onClick: () => {
+      editor.chain().focus().unsetLink().run();
+    }, children: /* @__PURE__ */ jsx(DeleteIcon, { size: "small" }) }) : /* @__PURE__ */ jsx(Button, { size: "small", variant: "text", children: /* @__PURE__ */ jsx(CheckIcon, { size: "small" }) });
+    $[13] = editor;
+    $[14] = t8;
+  } else {
+    t8 = $[14];
+  }
+  let t9;
+  if ($[15] !== t4 || $[16] !== t7 || $[17] !== t8) {
+    t9 = /* @__PURE__ */ jsxs("form", { onSubmit: t4, className: "flex p-1", children: [
+      t7,
+      t8
+    ] });
+    $[15] = t4;
+    $[16] = t7;
+    $[17] = t8;
+    $[18] = t9;
+  } else {
+    t9 = $[18];
+  }
+  let t10;
+  if ($[19] !== onOpenChange || $[20] !== open || $[21] !== t3 || $[22] !== t9) {
+    t10 = /* @__PURE__ */ jsx(Popover, { modal: true, open, onOpenChange, trigger: t3, children: t9 });
+    $[19] = onOpenChange;
+    $[20] = open;
+    $[21] = t3;
+    $[22] = t9;
+    $[23] = t10;
+  } else {
+    t10 = $[23];
+  }
+  return t10;
+};
+const TextButtons = () => {
+  const $ = c(2);
+  const {
+    editor
+  } = useCurrentEditor();
+  if (!editor) {
+    return null;
+  }
+  let t0;
+  if ($[0] !== editor) {
+    const items2 = [{
       name: "bold",
-      isActive: (t) => t?.isActive("bold") ?? !1,
-      command: (t) => t?.chain().focus().toggleBold().run(),
-      icon: $e
-    },
-    {
+      isActive: _temp,
+      command: _temp2,
+      icon: FormatBoldIcon
+    }, {
       name: "italic",
-      isActive: (t) => t?.isActive("italic") ?? !1,
-      command: (t) => t?.chain().focus().toggleItalic().run(),
-      icon: qe
-    },
-    {
+      isActive: _temp3,
+      command: _temp4,
+      icon: FormatItalicIcon
+    }, {
       name: "underline",
-      isActive: (t) => t?.isActive("underline") ?? !1,
-      command: (t) => t?.chain().focus().toggleUnderline().run(),
-      icon: We
-    },
-    {
+      isActive: _temp5,
+      command: _temp6,
+      icon: FormatUnderlinedIcon
+    }, {
       name: "strike",
-      isActive: (t) => t?.isActive("strike") ?? !1,
-      command: (t) => t?.chain().focus().toggleStrike().run(),
-      icon: Oe
-    },
-    {
+      isActive: _temp7,
+      command: _temp8,
+      icon: FormatStrikethroughIcon
+    }, {
       name: "code",
-      isActive: (t) => t?.isActive("code") ?? !1,
-      command: (t) => t?.chain().focus().toggleCode().run(),
-      icon: z
-    }
-  ].map((t, r) => /* @__PURE__ */ s(
-    F,
-    {
-      onSelect: (a) => {
-        t.command(a);
-      },
-      children: /* @__PURE__ */ s(
-        w,
-        {
-          size: "small",
-          color: "text",
-          className: "gap-2 rounded-none h-full",
-          variant: "text",
-          children: /* @__PURE__ */ s(
-            t.icon,
-            {
-              className: g({
-                "text-inherit": !t.isActive(e),
-                "text-blue-500": t.isActive(e)
-              })
-            }
-          )
-        }
-      )
-    },
-    r
-  )) }) : null;
+      isActive: _temp9,
+      command: _temp10,
+      icon: CodeIcon
+    }];
+    t0 = /* @__PURE__ */ jsx("div", { className: "flex", children: items2.map((item, index) => /* @__PURE__ */ jsx(EditorBubbleItem, { onSelect: (editor_10) => {
+      item.command(editor_10);
+    }, children: /* @__PURE__ */ jsx(Button, { size: "small", color: "text", className: "gap-2 rounded-none h-full", variant: "text", children: /* @__PURE__ */ jsx(item.icon, { className: cls({
+      "text-inherit": !item.isActive(editor),
+      "text-blue-500": item.isActive(editor)
+    }) }) }) }, index)) });
+    $[0] = editor;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
 };
-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 _temp(editor_0) {
+  return editor_0?.isActive("bold") ?? false;
 }
-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 _temp2(editor_1) {
+  return editor_1?.chain().focus().toggleBold().run();
 }
-const gt = st, pt = Re.configure({
-  HTMLAttributes: {
-    class: g(
-      "text-gray-600 dark:text-slate-300 underline underline-offset-[3px] hover:text-primary transition-colors cursor-pointer"
-    )
-  }
-}), ft = De.configure({
-  HTMLAttributes: {
-    class: g("not-prose")
+function _temp3(editor_2) {
+  return editor_2?.isActive("italic") ?? false;
+}
+function _temp4(editor_3) {
+  return editor_3?.chain().focus().toggleItalic().run();
+}
+function _temp5(editor_4) {
+  return editor_4?.isActive("underline") ?? false;
+}
+function _temp6(editor_5) {
+  return editor_5?.chain().focus().toggleUnderline().run();
+}
+function _temp7(editor_6) {
+  return editor_6?.isActive("strike") ?? false;
+}
+function _temp8(editor_7) {
+  return editor_7?.chain().focus().toggleStrike().run();
+}
+function _temp9(editor_8) {
+  return editor_8?.isActive("code") ?? false;
+}
+function _temp10(editor_9) {
+  return editor_9?.chain().focus().toggleCode().run();
+}
+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]);
+    });
   }
-}), ht = He.configure({
-  HTMLAttributes: {
-    class: g("flex items-start my-4")
+  return jsonObj;
+}
+const loadingDecorationKey = new PluginKey("loadingDecoration");
+const TextLoadingDecorationExtension = Extension.create({
+  name: "loadingDecoration",
+  addOptions() {
+    return {
+      pluginKey: loadingDecorationKey
+    };
   },
-  nested: !0
-}), bt = it.configure({
-  HTMLAttributes: {
-    class: g("mt-4 mb-6 border-t", x)
-  }
-}), kt = Ne.configure({
-  bulletList: {
-    HTMLAttributes: {
-      class: g("list-disc list-outside leading-3 -mt-2")
-    }
+  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;
+        }
+      }
+    })];
   },
-  orderedList: {
-    HTMLAttributes: {
-      class: g("list-decimal list-outside leading-3 -mt-2")
+  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;
     }
-  },
-  listItem: {
-    HTMLAttributes: {
-      class: g("leading-normal -mb-2")
+    const hasDecoration = hasLoadingDecoration(editor);
+    if (hasDecoration) {
+      return "";
     }
-  },
-  blockquote: {
-    HTMLAttributes: {
-      class: g("border-l-4 border-primary")
+    if (node.type.name === "heading") {
+      return `Heading ${node.attrs.level}`;
     }
-  },
-  codeBlock: {
-    HTMLAttributes: {
-      class: g("rounded bg-blue-50 dark:bg-gray-700 border p-5 font-mono font-medium", x)
+    if (node.type.name === "paragraph") {
+      return "Press '/' for commands";
     }
+    return "";
   },
-  code: {
-    HTMLAttributes: {
-      class: g("rounded-md bg-slate-50 dark:bg-gray-700 px-1.5 py-1 font-mono font-medium"),
-      spellcheck: "false"
-    }
+  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: cls("text-surface-700 dark:text-surface-accent-200 underline underline-offset-[3px] hover:text-primary transition-colors cursor-pointer")
+  }
+});
+const taskList = TaskList.configure({
+  HTMLAttributes: {
+    class: cls("not-prose")
+  }
+});
+const taskItem = TaskItem.configure({
+  HTMLAttributes: {
+    class: cls("flex items-start my-4")
   },
-  horizontalRule: !1,
+  nested: true
+});
+const horizontalRule = Horizontal.configure({
+  HTMLAttributes: {
+    class: cls("mt-4 mb-6 border-t", defaultBorderMixin)
+  }
+});
+const bulletList = BulletList.configure({
+  HTMLAttributes: {
+    class: cls("list-disc list-outside leading-3 -mt-2")
+  }
+});
+const orderedList = OrderedList.configure({
+  HTMLAttributes: {
+    class: cls("list-decimal list-outside leading-3 -mt-2")
+  }
+});
+const listItem = ListItem.configure({
+  HTMLAttributes: {
+    class: cls("leading-normal -mb-2")
+  }
+});
+const blockquote = Blockquote.configure({
+  HTMLAttributes: {
+    class: cls("border-l-4 border-primary")
+  }
+});
+const codeBlock = CodeBlock.configure({
+  HTMLAttributes: {
+    class: cls("rounded bg-blue-50 dark:bg-surface-700 border p-5 font-mono font-medium", defaultBorderMixin)
+  }
+});
+const code = Code.configure({
+  HTMLAttributes: {
+    class: cls("rounded-md bg-surface-accent-50 dark:bg-surface-700 px-1.5 py-1 font-mono font-medium"),
+    spellcheck: "false"
+  }
+});
+const starterKit = StarterKit.configure({
+  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(
-      ["li", "p:not(:first-child)", "pre", "blockquote", "h1, h2, h3, h4, h5, h6"].join(", ")
-    )
-  );
+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 };
-  }
-  function t(n, i) {
-    i.focus(), i.dom.classList.remove("dragging");
-    const d = I({
-      x: n.clientX + 50 + e.dragHandleWidth,
-      y: n.clientY
+    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 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)));
-  }
-  let r = null;
-  function a() {
-    r && r.classList.add("hide");
-  }
-  function c() {
-    r && r.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;
-      }
-    }),
+    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 dragHandleElement = null;
+  function hideDragHandle() {
+    if (dragHandleElement) {
+      dragHandleElement.classList.add("hide");
+    }
+  }
+  function showDragHandle() {
+    if (dragHandleElement) {
+      dragHandleElement.classList.remove("hide");
+    }
+  }
+  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({
-        dragHandleWidth: 24
+    return [DragHandle({
+      dragHandleWidth: 24
+    })];
+  }
+});
+function buildDecorationSet(highlight, doc) {
+  const decorations = [];
+  if (highlight) {
+    decorations.push(Decoration$1.inline(highlight.from, highlight.to, {
+      class: "dark:bg-surface-accent-700 bg-surface-accent-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;
+          }
+        }
+      }
+    })];
+  },
+  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 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;
+        }
+      }
+    };
+  },
+  group: "inline",
+  inline: true,
+  selectable: false,
+  atom: true,
+  addAttributes() {
+    return {
+      id: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-id"),
+        renderHTML: (attributes) => {
+          if (!attributes.id) {
+            return {};
+          }
+          return {
+            "data-id": attributes.id
+          };
+        }
+      },
+      label: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-label"),
+        renderHTML: (attributes) => {
+          if (!attributes.label) {
+            return {};
+          }
+          return {
+            "data-label": attributes.label
+          };
+        }
+      }
+    };
+  },
+  parseHTML() {
+    return [{
+      tag: `span[data-type="${this.name}"]`
+    }];
+  },
+  renderHTML({
+    node,
+    HTMLAttributes
+  }) {
+    if (this.options.renderLabel !== void 0) {
+      console.warn("renderLabel is deprecated use renderText and renderHTML instead");
+      return ["span", 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;
       })
-    ];
-  }
-}), 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"))
+    };
+  },
+  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(AutoFixHighIcon, { size: 18 }),
+        command: onDisabledAutocompleteClick
+      });
     }
-    // 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();
+    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: "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();
+    };
+  }
+});
+const CommandList = forwardRef((props, ref) => {
+  const $ = c(33);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const {
+    editor
+  } = useCurrentEditor();
+  let t0;
+  if ($[0] !== editor || $[1] !== props.aiController || $[2] !== props.range || $[3] !== props.upload) {
+    t0 = (item) => {
+      if (!editor) {
+        return;
       }
-    },
-    {
-      title: "Heading 1",
-      description: "Big section heading.",
-      searchTerms: ["title", "big", "large"],
-      icon: /* @__PURE__ */ s(Y, { size: 18 }),
-      command: ({ editor: l, range: m }) => {
-        l.chain().focus().deleteRange(m).setNode("heading", { level: 1 }).run();
+      item?.command?.({
+        editor,
+        range: props.range,
+        upload: props.upload,
+        aiController: props.aiController
+      });
+    };
+    $[0] = editor;
+    $[1] = props.aiController;
+    $[2] = props.range;
+    $[3] = props.upload;
+    $[4] = t0;
+  } else {
+    t0 = $[4];
+  }
+  const selectItem = t0;
+  let t1;
+  if ($[5] !== props.items.length || $[6] !== selectedIndex) {
+    t1 = () => {
+      setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length);
+    };
+    $[5] = props.items.length;
+    $[6] = selectedIndex;
+    $[7] = t1;
+  } else {
+    t1 = $[7];
+  }
+  const upHandler = t1;
+  let t2;
+  if ($[8] !== props.items.length || $[9] !== selectedIndex) {
+    t2 = () => {
+      setSelectedIndex((selectedIndex + 1) % props.items.length);
+    };
+    $[8] = props.items.length;
+    $[9] = selectedIndex;
+    $[10] = t2;
+  } else {
+    t2 = $[10];
+  }
+  const downHandler = t2;
+  let t3;
+  if ($[11] !== props.items || $[12] !== selectItem || $[13] !== selectedIndex) {
+    t3 = () => {
+      const item_0 = props.items[selectedIndex];
+      selectItem(item_0);
+    };
+    $[11] = props.items;
+    $[12] = selectItem;
+    $[13] = selectedIndex;
+    $[14] = t3;
+  } else {
+    t3 = $[14];
+  }
+  const enterHandler = t3;
+  let t4;
+  if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = () => setSelectedIndex(0);
+    $[15] = t4;
+  } else {
+    t4 = $[15];
+  }
+  let t5;
+  if ($[16] !== props.items) {
+    t5 = [props.items];
+    $[16] = props.items;
+    $[17] = t5;
+  } else {
+    t5 = $[17];
+  }
+  useEffect(t4, t5);
+  let t6;
+  if ($[18] !== downHandler || $[19] !== enterHandler || $[20] !== upHandler) {
+    t6 = () => ({
+      onKeyDown: (t72) => {
+        const {
+          event
+        } = t72;
+        if (event.key === "ArrowUp") {
+          upHandler();
+          return true;
+        }
+        if (event.key === "ArrowDown") {
+          downHandler();
+          return true;
+        }
+        if (event.key === "Enter") {
+          enterHandler();
+          return true;
+        }
+        return false;
       }
-    },
-    {
-      title: "Heading 2",
-      description: "Medium section heading.",
-      searchTerms: ["subtitle", "medium"],
-      icon: /* @__PURE__ */ s(J, { size: 18 }),
-      command: ({ editor: l, range: m }) => {
-        l.chain().focus().deleteRange(m).setNode("heading", { level: 2 }).run();
+    });
+    $[18] = downHandler;
+    $[19] = enterHandler;
+    $[20] = upHandler;
+    $[21] = t6;
+  } else {
+    t6 = $[21];
+  }
+  useImperativeHandle(ref, t6);
+  let t7;
+  if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = [];
+    $[22] = t7;
+  } else {
+    t7 = $[22];
+  }
+  const itemRefs = useRef(t7);
+  let t8;
+  let t9;
+  if ($[23] !== selectedIndex) {
+    t8 = () => {
+      if (itemRefs.current[selectedIndex]) {
+        itemRefs.current[selectedIndex].scrollIntoView({
+          block: "nearest"
+        });
       }
-    },
-    {
-      title: "Heading 3",
-      description: "Small section heading.",
-      searchTerms: ["subtitle", "small"],
-      icon: /* @__PURE__ */ s(G, { size: 18 }),
-      command: ({ editor: l, range: m }) => {
-        l.chain().focus().deleteRange(m).setNode("heading", { level: 3 }).run();
+    };
+    t9 = [selectedIndex];
+    $[23] = selectedIndex;
+    $[24] = t8;
+    $[25] = t9;
+  } else {
+    t8 = $[24];
+    t9 = $[25];
+  }
+  useEffect(t8, t9);
+  let t10;
+  if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = cls("text-surface-900 dark:text-white z-50 max-h-[280px] h-auto w-72 overflow-y-auto rounded-md border bg-white dark:bg-surface-900 px-1 py-2 shadow transition-all", defaultBorderMixin);
+    $[26] = t10;
+  } else {
+    t10 = $[26];
+  }
+  let t11;
+  if ($[27] !== props.items || $[28] !== selectItem || $[29] !== selectedIndex) {
+    t11 = props.items.length ? props.items.map((item_1, index) => /* @__PURE__ */ jsxs("button", { value: item_1.title, ref: (el) => {
+      if (!el) {
+        return;
       }
-    },
-    {
-      title: "Bullet List",
-      description: "Create a simple bullet list.",
-      searchTerms: ["unordered", "point"],
-      icon: /* @__PURE__ */ s(ee, { size: 18 }),
-      command: ({ editor: l, range: m }) => {
-        l.chain().focus().deleteRange(m).toggleBulletList().run();
+      itemRefs.current[index] = el;
+    }, onClick: () => selectItem(item_1), 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-surface-700 aria-selected:bg-blue-50 aria-selected:dark:bg-surface-700", index === selectedIndex ? "bg-blue-100 dark:bg-surface-accent-950" : ""), children: [
+      /* @__PURE__ */ jsx("div", { className: cls("flex h-10 w-10 items-center justify-center rounded-md border bg-white dark:bg-surface-900", defaultBorderMixin), children: item_1.icon }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "font-medium", children: item_1.title }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-surface-700 dark:text-surface-accent-300", children: item_1.description })
+      ] })
+    ] }, item_1.title)) : /* @__PURE__ */ jsx("div", { className: "item", children: "No result" });
+    $[27] = props.items;
+    $[28] = selectItem;
+    $[29] = selectedIndex;
+    $[30] = t11;
+  } else {
+    t11 = $[30];
+  }
+  let t12;
+  if ($[31] !== t11) {
+    t12 = /* @__PURE__ */ jsx("div", { className: t10, children: t11 });
+    $[31] = t11;
+    $[32] = t12;
+  } else {
+    t12 = $[32];
+  }
+  return t12;
+});
+const autocompleteSuggestionItem = {
+  title: "Autocomplete",
+  description: "Add text based on the context.",
+  searchTerms: ["ai"],
+  icon: /* @__PURE__ */ jsx(AutoFixHighIcon, { size: 18 }),
+  command: async ({
+    editor,
+    range,
+    aiController
+  }) => {
+    if (!aiController) throw Error("No AiController");
+    editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").run();
+    const {
+      state
+    } = 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();
       }
-    },
-    {
-      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();
+    });
+    editor.chain().focus().insertContent(result, {
+      applyInputRules: false,
+      applyPasteRules: false,
+      parseOptions: {
+        preserveWhitespace: false
       }
-    },
-    {
-      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()
-    },
-    {
-      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;
-          }
-        }, k.click();
+    }).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();
+  }
+}];
+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
+    if (onJsonContentChange) {
+      const jsonContent = removeClassesFromJson(editor.getJSON());
+      onJsonContentChange(jsonContent);
+    }
+    if (onHtmlContentChange) {
+      onHtmlContentChange?.(editor.getHTML());
+    }
+  };
+  const proseClass = proseClasses[textSize];
+  const extensions = useMemo(() => [
+    starterKit,
+    CustomDocument,
+    HighlightDecorationExtension(highlight),
+    TextLoadingDecorationExtension,
+    Underline,
+    Bold,
+    TextStyle,
+    Italic,
+    Strike,
+    Color,
+    Highlight.configure({
+      multicolor: true
     }),
-    fe.configure({
-      html: !1,
-      transformCopiedText: !0
+    // CustomBlock.configure({
+    //     component: CustomComponent,
+    //     delimiter: "```custom"
+    // }),
+    Heading,
+    CustomKeymap,
+    DragAndDrop,
+    placeholder,
+    tiptapLink,
+    imageExtension,
+    taskList,
+    taskItem,
+    Markdown.configure({
+      html: true
     }),
-    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));
-    }
-  }, !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(
-    "div",
-    {
-      className: "relative min-h-[500px] w-full bg-white dark:bg-gray-950 rounded-lg",
-      children: /* @__PURE__ */ b(
-        ye,
-        {
-          content: o,
-          extensions: u,
-          editorProps: {
-            ...c,
-            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);
-          },
-          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, {})
-                ]
-              }
-            )
-          ]
-        }
-      )
+    horizontalRule,
+    bulletList,
+    orderedList,
+    listItem,
+    blockquote,
+    codeBlock,
+    code,
+    SlashCommand.configure({
+      HTMLAttributes: {
+        class: "mention"
+      },
+      suggestion: suggestion(ref, {
+        upload: handleImageUpload,
+        aiController,
+        onDisabledAutocompleteClick
+      })
+    })
+  ], []);
+  return /* @__PURE__ */ jsx("div", { ref, className: "relative min-h-[300px] w-full", children: /* @__PURE__ */ jsx(EditorProvider, { content: content ?? "", extensions, editorProps: {
+    attributes: {
+      class: cls(proseClass, "prose-headings:font-title font-default focus:outline-none max-w-full p-12")
     }
-  ) }) }) : null;
+  }, onCreate: ({
+    editor: editor_0
+  }) => {
+    editorRef.current = editor_0;
+  }, onUpdate: ({
+    editor: editor_1
+  }) => {
+    onEditorUpdate(editor_1);
+  }, 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-surface-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, {})
+  ] }) }) });
 };
-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 {
+    box-shadow: none !important;
+}
 .ProseMirror .is-editor-empty:first-child::before {
   content: attr(data-placeholder);
   float: left;
@@ -990,6 +1977,7 @@ const Tt = `
 }
 
 .is-empty {
+  cursor: text;
   color: rgb(100 116 139); //500
 }
 
@@ -1007,6 +1995,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 +2023,7 @@ ul[data-type="taskList"] li > label {
     }
   
     &:active {
-      background-color: rgb(71 85 105);;
+      background-color: rgb(71 85 105);
     }
   }
 }
@@ -1101,7 +2090,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;
@@ -1111,8 +2100,12 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
   background-color:  rgb(51 65 85); // 700
 }
 
+.prose-base table p {
+    margin: 0;
+}
+
 .drag-handle {
-  position: fixed;
+  position: absolute;
   opacity: 1;
   transition: opacity ease-in 0.2s;
   border-radius: 0.25rem;
@@ -1123,7 +2116,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 +2151,6 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
 }
 `;
 export {
-  eo as FireCMSEditor
+  FireCMSEditor
 };
 //# sourceMappingURL=index.es.js.map