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

package/dist/index.es.js

@@ -1,15 +1,21 @@
 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 React, { forwardRef, useRef, useEffect, useState, useImperativeHandle, useMemo, useDeferredValue } from "react";
+import { TextFieldsIcon, LooksOneIcon, LooksTwoIcon, Looks3Icon, CheckBoxIcon, FormatListBulletedIcon, FormatListNumberedIcon, FormatQuoteIcon, CodeIcon, CheckIcon, KeyboardArrowDownIcon, Button, Popover, cls, focusedDisabled, DeleteIcon, FormatBoldIcon, FormatItalicIcon, FormatUnderlinedIcon, FormatStrikethroughIcon, defaultBorderMixin, ImageIcon, AutoFixHighIcon, useInjectStyles, Separator } from "@firecms/ui";
+import { useCurrentEditor, 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 { TextStyleKit } from "@tiptap/extension-text-style";
+import Color from "@tiptap/extension-color";
 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 Bold from "@tiptap/extension-bold";
+import Italic from "@tiptap/extension-italic";
+import Strike from "@tiptap/extension-strike";
+import { c } from "react-compiler-runtime";
+import { BubbleMenu } from "@tiptap/react/menus";
+import { NodeSelection, PluginKey, Plugin } from "@tiptap/pm/state";
 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";
@@ -17,320 +23,311 @@ 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 { Extension, InputRule, Node, mergeAttributes } from "@tiptap/core";
+import { DecorationSet, Decoration } from "@tiptap/pm/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 { DOMSerializer } from "@tiptap/pm/model";
 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
-        },
-        ...rest
-      };
-    }, [rest, tippyOptions]);
-    if (!editor) return null;
-    return (
-      //We need to add this because of https://github.com/ueberdosis/tiptap/issues/2658
-      /* @__PURE__ */ jsx("div", { ref, children: /* @__PURE__ */ jsx(BubbleMenu, { editor, ...bubbleMenuProps, children }) })
-    );
-  }
-);
-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 });
-});
-EditorBubbleItem.displayName = "EditorBubbleItem";
-const t = tunnel();
-const queryAtom = atom("");
-const rangeAtom = atom(null);
-const EditorCommandOut = ({
-  query,
-  range
-}) => {
-  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 })
-          );
-      }
-    };
-    document.addEventListener("keydown", onKeyDown);
-    return () => {
-      document.removeEventListener("keydown", onKeyDown);
+import { computePosition, offset, flip, shift, autoUpdate } from "@floating-ui/dom";
+const EditorBubble = forwardRef((t0, ref) => {
+  const $ = c(18);
+  let children;
+  let options;
+  let rest;
+  let tippyOptions;
+  if ($[0] !== t0) {
+    ({
+      children,
+      tippyOptions,
+      options,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = options;
+    $[3] = rest;
+    $[4] = tippyOptions;
+  } else {
+    children = $[1];
+    options = $[2];
+    rest = $[3];
+    tippyOptions = $[4];
+  }
+  const {
+    editor
+  } = useCurrentEditor();
+  tippyOptions?.placement;
+  let t1;
+  const shouldShow = _temp$1;
+  const t2 = tippyOptions?.placement ?? options?.placement;
+  let t3;
+  if ($[5] !== options || $[6] !== t2) {
+    t3 = {
+      ...options,
+      placement: t2
     };
-  }, []);
-  return /* @__PURE__ */ 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,
-        onKeyDown: (e) => {
-          e.stopPropagation();
-        },
-        id: "slash-command",
-        className,
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsx(Command$1.Input, { value: query, onValueChange: setQuery, style: { display: "none" } }),
-          /* @__PURE__ */ jsx(Command$1.List, { ref: commandListRef, children })
-        ]
-      }
-    ) });
-  }
-);
-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 });
-});
-EditorCommandItem.displayName = "EditorCommandItem";
-const EditorCommandEmpty = CommandEmpty;
-const Command = Extension.create({
-  name: "slash-command",
-  addOptions() {
-    return {
-      suggestion: {
-        char: "/",
-        command: ({ editor, range, props }) => {
-          props.command({ editor, range });
-        }
-      }
+    $[5] = options;
+    $[6] = t2;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  const mergedOptions = t3;
+  let t4;
+  if ($[8] !== mergedOptions || $[9] !== rest) {
+    t4 = {
+      shouldShow,
+      options: mergedOptions,
+      ...rest
     };
-  },
-  addProseMirrorPlugins() {
-    return [
-      Suggestion({
-        editor: this.editor,
-        ...this.options.suggestion
-      })
-    ];
+    $[8] = mergedOptions;
+    $[9] = rest;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
   }
+  t1 = t4;
+  const bubbleMenuProps = t1;
+  if (!editor) {
+    return null;
+  }
+  let t5;
+  if ($[11] !== bubbleMenuProps || $[12] !== children || $[13] !== editor) {
+    t5 = /* @__PURE__ */ jsx(BubbleMenu, { editor, ...bubbleMenuProps, children });
+    $[11] = bubbleMenuProps;
+    $[12] = children;
+    $[13] = editor;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
+  let t6;
+  if ($[15] !== ref || $[16] !== t5) {
+    t6 = /* @__PURE__ */ jsx("div", { ref, children: t5 });
+    $[15] = ref;
+    $[16] = t5;
+    $[17] = t6;
+  } else {
+    t6 = $[17];
+  }
+  return t6;
 });
-const renderItems = () => {
-  let component = null;
-  let popup = null;
-  return {
-    onStart: (props) => {
-      component = new ReactRenderer(EditorCommandOut, {
-        props,
-        editor: props.editor
-      });
-      popup = tippy("body", {
-        getReferenceClientRect: props.clientRect,
-        appendTo: () => document.body,
-        content: component.element,
-        showOnCreate: true,
-        interactive: true,
-        trigger: "manual",
-        placement: "bottom-start"
-      });
-    },
-    onUpdate: (props) => {
-      component?.updateProps(props);
-      popup && popup[0].setProps({
-        getReferenceClientRect: props.clientRect
-      });
-    },
-    onKeyDown: (props) => {
-      if (props.event.key === "Escape") {
-        popup?.[0].hide();
-        return true;
-      }
-      return component?.ref?.onKeyDown(props);
-    },
-    onExit: () => {
-      popup?.[0].destroy();
-      component?.destroy();
-    }
-  };
-};
-const createSuggestionItems = (items2) => items2;
-const PlaceholderExtension = Placeholder.configure({
-  placeholder: ({ node }) => {
-    if (node.type.name === "heading") {
-      return `Heading ${node.attrs.level}`;
-    }
-    return "Press '/' for commands";
-  },
-  includeChildren: true
-});
-const Horizontal = HorizontalRule.extend({
-  addInputRules() {
-    return [
-      new 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)
-          );
-        }
-      })
-    ];
+function _temp$1(t0) {
+  const {
+    editor: editor_0,
+    state
+  } = t0;
+  const {
+    selection
+  } = state;
+  const {
+    empty
+  } = selection;
+  if (editor_0.isActive("image") || empty || selection instanceof NodeSelection) {
+    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;
 });
-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 = ({
-  open,
-  onOpenChange
-}) => {
-  const { editor } = useCurrentEditor();
-  if (!editor) return null;
-  const activeItem = items.filter((item) => item.isActive(editor)).pop() ?? {
-    name: "Multiple"
-  };
-  return /* @__PURE__ */ jsx(
-    Popover,
-    {
-      sideOffset: 5,
-      align: "start",
-      className: "w-48 p-1",
-      trigger: /* @__PURE__ */ jsxs(
-        Button,
-        {
-          variant: "text",
-          className: "gap-2 rounded-none",
-          color: "text",
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap text-sm", children: activeItem.name }),
-            /* @__PURE__ */ jsx(ExpandMoreIcon, { size: "small" })
-          ]
-        }
-      ),
-      modal: true,
-      open,
-      onOpenChange,
-      children: items.map((item, index) => /* @__PURE__ */ jsxs(
-        EditorBubbleItem,
-        {
-          onSelect: (editor2) => {
-            item.command(editor2);
-            onOpenChange(false);
-          },
-          className: "flex cursor-pointer items-center justify-between rounded px-2 py-1 text-sm hover:bg-blue-50 hover:dark:bg-gray-700 text-gray-900 dark:text-white",
-          children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
-              /* @__PURE__ */ jsx(item.icon, { size: "smallest" }),
-              /* @__PURE__ */ jsx("span", { children: item.name })
-            ] }),
-            activeItem.name === item.name && /* @__PURE__ */ jsx(CheckIcon, { size: "smallest" })
-          ]
-        },
-        index
-      ))
-    }
-  );
+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 isValidUrl(url) {
   try {
@@ -351,162 +348,201 @@ function getUrlFromString(str) {
     return null;
   }
 }
-const LinkSelector = ({
-  open,
-  onOpenChange
-}) => {
+const LinkSelector = (t0) => {
+  const $ = c(24);
+  const {
+    open,
+    onOpenChange
+  } = t0;
   const inputRef = useRef(null);
-  const { editor } = useCurrentEditor();
-  useEffect(() => {
-    inputRef.current && inputRef.current?.focus();
-  });
-  if (!editor) return null;
-  return /* @__PURE__ */ jsx(
-    Popover,
-    {
-      modal: true,
-      open,
-      onOpenChange,
-      trigger: /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "text",
-          className: "gap-2 rounded-none",
-          color: "text",
-          children: /* @__PURE__ */ jsx("p", { className: cls("underline decoration-stone-400 underline-offset-4", {
-            "text-blue-500": editor.isActive("link")
-          }), children: "Link" })
-        }
-      ),
-      children: /* @__PURE__ */ jsxs(
-        "form",
-        {
-          onSubmit: (e) => {
-            const target = e.currentTarget;
-            e.preventDefault();
-            const input = target[0];
-            const url = getUrlFromString(input.value);
-            url && editor.chain().focus().setLink({ href: url }).run();
-          },
-          className: "flex p-1",
-          children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                ref: inputRef,
-                autoFocus: open,
-                placeholder: "Paste a link",
-                defaultValue: editor.getAttributes("link").href || "",
-                className: "text-gray-900 dark:text-white flex-grow bg-transparent p-1 text-sm outline-none"
-              }
-            ),
-            editor.getAttributes("link").href ? /* @__PURE__ */ 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" })
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
+  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 { editor } = useCurrentEditor();
-  if (!editor) return null;
-  const items2 = [
-    {
+  const $ = c(2);
+  const {
+    editor
+  } = useCurrentEditor();
+  if (!editor) {
+    return null;
+  }
+  let t0;
+  if ($[0] !== editor) {
+    const items2 = [{
       name: "bold",
-      isActive: (editor2) => editor2?.isActive("bold") ?? false,
-      command: (editor2) => editor2?.chain().focus().toggleBold().run(),
+      isActive: _temp,
+      command: _temp2,
       icon: FormatBoldIcon
-    },
-    {
+    }, {
       name: "italic",
-      isActive: (editor2) => editor2?.isActive("italic") ?? false,
-      command: (editor2) => editor2?.chain().focus().toggleItalic().run(),
+      isActive: _temp3,
+      command: _temp4,
       icon: FormatItalicIcon
-    },
-    {
+    }, {
       name: "underline",
-      isActive: (editor2) => editor2?.isActive("underline") ?? false,
-      command: (editor2) => editor2?.chain().focus().toggleUnderline().run(),
+      isActive: _temp5,
+      command: _temp6,
       icon: FormatUnderlinedIcon
-    },
-    {
+    }, {
       name: "strike",
-      isActive: (editor2) => editor2?.isActive("strike") ?? false,
-      command: (editor2) => editor2?.chain().focus().toggleStrike().run(),
+      isActive: _temp7,
+      command: _temp8,
       icon: FormatStrikethroughIcon
-    },
-    {
+    }, {
       name: "code",
-      isActive: (editor2) => editor2?.isActive("code") ?? false,
-      command: (editor2) => editor2?.chain().focus().toggleCode().run(),
+      isActive: _temp9,
+      command: _temp0,
       icon: CodeIcon
-    }
-  ];
-  return /* @__PURE__ */ jsx("div", { className: "flex", children: items2.map((item, index) => /* @__PURE__ */ jsx(
-    EditorBubbleItem,
-    {
-      onSelect: (editor2) => {
-        item.command(editor2);
-      },
-      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
-  )) });
+    }];
+    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 useDebouncedCallback(value, callback, immediate, timeoutMs = 300) {
-  const pendingUpdate = React.useRef(false);
-  const performUpdate = () => {
-    callback();
-    pendingUpdate.current = false;
-  };
-  const handlerRef = React.useRef(void 0);
-  React.useEffect(
-    () => {
-      pendingUpdate.current = true;
-      clearTimeout(handlerRef.current);
-      handlerRef.current = setTimeout(performUpdate, timeoutMs);
-      return () => {
-      };
-    },
-    [immediate, value]
-  );
+function _temp(editor_0) {
+  return editor_0?.isActive("bold") ?? false;
+}
+function _temp2(editor_1) {
+  return editor_1?.chain().focus().toggleBold().run();
+}
+function _temp3(editor_2) {
+  return editor_2?.isActive("italic") ?? false;
+}
+function _temp4(editor_3) {
+  return editor_3?.chain().focus().toggleItalic().run();
+}
+function _temp5(editor_4) {
+  return editor_4?.isActive("underline") ?? false;
+}
+function _temp6(editor_5) {
+  return editor_5?.chain().focus().toggleUnderline().run();
+}
+function _temp7(editor_6) {
+  return editor_6?.isActive("strike") ?? false;
+}
+function _temp8(editor_7) {
+  return editor_7?.chain().focus().toggleStrike().run();
+}
+function _temp9(editor_8) {
+  return editor_8?.isActive("code") ?? false;
+}
+function _temp0(editor_9) {
+  return editor_9?.chain().focus().toggleCode().run();
 }
 function removeClassesFromJson(jsonObj) {
   if (Array.isArray(jsonObj)) {
@@ -521,12 +557,158 @@ function removeClassesFromJson(jsonObj) {
   }
   return jsonObj;
 }
+const loadingDecorationKey = new PluginKey("loadingDecoration");
+const TextLoadingDecorationExtension = Extension.create({
+  name: "loadingDecoration",
+  addOptions() {
+    return {
+      pluginKey: loadingDecorationKey
+    };
+  },
+  addProseMirrorPlugins() {
+    const pluginKey = this.options.pluginKey;
+    return [new Plugin({
+      key: pluginKey,
+      state: {
+        init() {
+          return {
+            decorationSet: DecorationSet.empty,
+            hasDecoration: false
+          };
+        },
+        apply(tr, oldState) {
+          const action = tr.getMeta(pluginKey);
+          if (action?.type === "loadingDecoration") {
+            const {
+              pos,
+              remove,
+              loadingHtml
+            } = action;
+            if (remove) {
+              return {
+                decorationSet: DecorationSet.empty,
+                hasDecoration: false
+              };
+            }
+            const decoration = Decoration.widget(pos, () => {
+              const container = document.createElement("span");
+              container.className = "loading-decoration";
+              if (loadingHtml) {
+                container.innerHTML = loadingHtml;
+              } else {
+                const span = document.createElement("span");
+                span.innerText = "loading...";
+                container.appendChild(span);
+              }
+              return container;
+            });
+            return {
+              decorationSet: DecorationSet.empty.add(tr.doc, [decoration]),
+              hasDecoration: true
+            };
+          }
+          return {
+            decorationSet: oldState.decorationSet.map(tr.mapping, tr.doc),
+            hasDecoration: oldState.hasDecoration
+          };
+        }
+      },
+      props: {
+        decorations(state) {
+          return this.getState(state)?.decorationSet || DecorationSet.empty;
+        }
+      }
+    })];
+  },
+  addCommands() {
+    return {
+      toggleLoadingDecoration: (loadingHtml) => ({
+        state,
+        dispatch
+      }) => {
+        const {
+          selection
+        } = state;
+        const pos = selection.from;
+        if (!dispatch) return false;
+        const pluginKey = this.options.pluginKey;
+        const tr = state.tr.setMeta(pluginKey, {
+          pos,
+          type: "loadingDecoration",
+          remove: false,
+          loadingHtml
+        });
+        dispatch(tr);
+        return true;
+      },
+      removeLoadingDecoration: () => ({
+        state,
+        dispatch
+      }) => {
+        if (!dispatch) return false;
+        const pluginKey = this.options.pluginKey;
+        const tr = state.tr.setMeta(pluginKey, {
+          pos: 0,
+          // We can pass any position as it will remove the entire decoration set
+          type: "loadingDecoration",
+          remove: true
+        });
+        dispatch(tr);
+        return true;
+      }
+    };
+  }
+});
+const PlaceholderExtension = Placeholder.configure({
+  placeholder: ({
+    node,
+    editor
+  }) => {
+    const {
+      from,
+      to
+    } = editor.state.selection;
+    function hasLoadingDecoration(editor2) {
+      const pluginState = loadingDecorationKey.get(editor2.state);
+      return pluginState?.getState(editor2.state)?.hasDecoration ?? false;
+    }
+    const hasDecoration = hasLoadingDecoration(editor);
+    if (hasDecoration) {
+      return "";
+    }
+    if (node.type.name === "heading") {
+      return `Heading ${node.attrs.level}`;
+    }
+    if (node.type.name === "paragraph") {
+      return "Press '/' for commands";
+    }
+    return "";
+  },
+  includeChildren: true
+});
+const Horizontal = HorizontalRule.extend({
+  addInputRules() {
+    return [new 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-gray-600 dark:text-slate-300 underline underline-offset-[3px] hover:text-primary transition-colors cursor-pointer"
-    )
+    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({
@@ -545,38 +727,39 @@ const horizontalRule = Horizontal.configure({
     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({
-  bulletList: {
-    HTMLAttributes: {
-      class: cls("list-disc list-outside leading-3 -mt-2")
-    }
-  },
-  orderedList: {
-    HTMLAttributes: {
-      class: cls("list-decimal list-outside leading-3 -mt-2")
-    }
-  },
-  listItem: {
-    HTMLAttributes: {
-      class: cls("leading-normal -mb-2")
-    }
-  },
-  blockquote: {
-    HTMLAttributes: {
-      class: cls("border-l-4 border-primary")
-    }
-  },
-  codeBlock: {
-    HTMLAttributes: {
-      class: cls("rounded bg-blue-50 dark:bg-gray-700 border p-5 font-mono font-medium", defaultBorderMixin)
-    }
-  },
-  code: {
-    HTMLAttributes: {
-      class: cls("rounded-md bg-slate-50 dark:bg-gray-700 px-1.5 py-1 font-mono font-medium"),
-      spellcheck: "false"
-    }
-  },
+  document: false,
   horizontalRule: false,
   dropcursor: {
     color: "#DBEAFE",
@@ -584,27 +767,42 @@ const starterKit = StarterKit.configure({
   },
   gapcursor: false
 });
-async function onFileRead(plugin, view, readerEvent, pos, upload, image) {
-  const { schema } = view.state;
+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 border-stone-200");
+  imageElement.setAttribute("class", "opacity-40 rounded-lg border " + defaultBorderMixin);
   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 }));
+  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 });
+  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 });
+  tr.setMeta(plugin, {
+    decorationSet
+  });
   view.dispatch(tr);
 }
-const dropImagePlugin = (upload) => {
+const ImagePluginKey = new PluginKey("imagePlugin");
+const createDropImagePlugin = (upload) => {
   const plugin = new Plugin({
+    key: ImagePluginKey,
     state: {
       // Initialize the plugin state with an empty DecorationSet
       init: () => DecorationSet.empty,
@@ -620,20 +818,25 @@ const dropImagePlugin = (upload) => {
     props: {
       handleDOMEvents: {
         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;
+          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 });
+            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);
+              await onFileRead(view, readerEvent, position.pos, upload, image);
             };
             reader.readAsDataURL(image);
           });
@@ -643,16 +846,14 @@ const dropImagePlugin = (upload) => {
       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);
+              await onFileRead(view, readerEvent, pos, upload, image);
             };
             reader.readAsDataURL(image);
           }
@@ -677,10 +878,10 @@ const dropImagePlugin = (upload) => {
   });
   return plugin;
 };
-const createImageExtension = (uploadFn) => {
+const createImageExtension = (dropImagePlugin) => {
   return TiptapImage.extend({
     addProseMirrorPlugins() {
-      return [dropImagePlugin(uploadFn)];
+      return [dropImagePlugin];
     }
   }).configure({
     allowBase64: true,
@@ -693,9 +894,16 @@ const CustomKeymap = Extension.create({
   name: "CustomKeymap",
   addCommands() {
     return {
-      selectTextWithinNodeBoundaries: () => ({ editor, commands }) => {
-        const { state } = editor;
-        const { tr } = state;
+      selectTextWithinNodeBoundaries: () => ({
+        editor,
+        commands
+      }) => {
+        const {
+          state
+        } = editor;
+        const {
+          tr
+        } = state;
         const startNodePos = tr.selection.$from.start();
         const endNodePos = tr.selection.$to.end();
         return commands.setTextSelection({
@@ -707,9 +915,15 @@ const CustomKeymap = Extension.create({
   },
   addKeyboardShortcuts() {
     return {
-      "Mod-a": ({ editor }) => {
-        const { state } = editor;
-        const { tr } = state;
+      "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();
@@ -724,20 +938,76 @@ const CustomKeymap = Extension.create({
     };
   }
 });
-function absoluteRect(node) {
-  const data = node.getBoundingClientRect();
+function serializeForClipboard(view, slice) {
+  view.someProp("transformCopied", (f) => {
+    slice = f(slice, view);
+  });
+  const context = [];
+  let {
+    content,
+    openStart,
+    openEnd
+  } = slice;
+  while (openStart > 1 && openEnd > 1 && content.childCount == 1 && content.firstChild.childCount == 1) {
+    openStart--;
+    openEnd--;
+    const node = content.firstChild;
+    context.push(node.type.name, node.attrs != node.type.defaultAttrs ? node.attrs : null);
+    content = node.content;
+  }
+  const serializer = view.someProp("clipboardSerializer") || DOMSerializer.fromSchema(view.state.schema);
+  const doc = detachedDoc(), wrap = doc.createElement("div");
+  wrap.appendChild(serializer.serializeFragment(content, {
+    document: doc
+  }));
+  let firstChild = wrap.firstChild, needsWrap, wrappers = 0;
+  while (firstChild && firstChild.nodeType == 1 && (needsWrap = wrapMap[firstChild.nodeName.toLowerCase()])) {
+    for (let i = needsWrap.length - 1; i >= 0; i--) {
+      const wrapper = doc.createElement(needsWrap[i]);
+      while (wrap.firstChild) wrapper.appendChild(wrap.firstChild);
+      wrap.appendChild(wrapper);
+      wrappers++;
+    }
+    firstChild = wrap.firstChild;
+  }
+  if (firstChild && firstChild.nodeType == 1) firstChild.setAttribute("data-pm-slice", `${openStart} ${openEnd}${wrappers ? ` -${wrappers}` : ""} ${JSON.stringify(context)}`);
+  const text = view.someProp("clipboardTextSerializer", (f) => f(slice, view)) || slice.content.textBetween(0, slice.content.size, "\n\n");
   return {
-    top: data.top,
-    left: data.left,
+    dom: wrap,
+    text,
+    slice
+  };
+}
+const wrapMap = {
+  thead: ["table"],
+  tbody: ["table"],
+  tfoot: ["table"],
+  caption: ["table"],
+  colgroup: ["table"],
+  col: ["table", "colgroup"],
+  tr: ["table", "tbody"],
+  td: ["table", "tbody", "tr"],
+  th: ["table", "tbody", "tr"]
+};
+let _detachedDoc = null;
+function detachedDoc() {
+  return _detachedDoc || (_detachedDoc = document.implementation.createHTMLDocument("title"));
+}
+function absoluteRect(element) {
+  const data = element.getBoundingClientRect();
+  let ancestor = element.parentElement;
+  while (ancestor && window.getComputedStyle(ancestor).position === "static") {
+    ancestor = ancestor.parentElement;
+  }
+  const ancestorRect = ancestor?.getBoundingClientRect();
+  return {
+    top: data.top - (ancestorRect?.top ?? 0),
+    left: data.left - (ancestorRect?.left ?? 0),
     width: data.width
   };
 }
 function nodeDOMAtCoords(coords) {
-  return document.elementsFromPoint(coords.x, coords.y).find(
-    (elem) => elem.parentElement?.matches?.(".ProseMirror") || elem.matches(
-      ["li", "p:not(:first-child)", "pre", "blockquote", "h1, h2, h3, h4, h5, h6"].join(", ")
-    )
-  );
+  return document.elementsFromPoint(coords.x, coords.y).find((elem) => elem.parentElement?.matches?.(".ProseMirror") || elem.matches(["li", "p:not(:first-child)", "pre", "blockquote", "h1, h2, h3, h4, h5, h6"].join(", ")));
 }
 function nodePosAtDOM(node, view, options) {
   const boundingRect = node.getBoundingClientRect();
@@ -759,13 +1029,19 @@ function DragHandle(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);
+    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 };
+    view.dragging = {
+      slice,
+      move: event.ctrlKey
+    };
   }
   function handleClick(event, view) {
     view.focus();
@@ -790,7 +1066,7 @@ function DragHandle(options) {
       dragHandleElement.classList.remove("hide");
     }
   }
-  return new Plugin$1({
+  return new Plugin({
     view: (view) => {
       dragHandleElement = document.createElement("div");
       dragHandleElement.draggable = true;
@@ -806,8 +1082,6 @@ function DragHandle(options) {
       view?.dom?.parentElement?.appendChild(dragHandleElement);
       return {
         destroy: () => {
-          dragHandleElement?.remove?.();
-          dragHandleElement = null;
         }
       };
     },
@@ -863,301 +1137,843 @@ function DragHandle(options) {
 const DragAndDrop = Extension.create({
   name: "dragAndDrop",
   addProseMirrorPlugins() {
-    return [
-      DragHandle({
-        dragHandleWidth: 24
-      })
-    ];
+    return [DragHandle({
+      dragHandleWidth: 24
+    })];
   }
 });
-const FireCMSEditor = ({
-  handleImageUpload,
-  initialContent,
-  onJsonContentChange,
-  onHtmlContentChange,
-  onMarkdownContentChange
-}) => {
-  const defaultEditorProps = {
-    handleDOMEvents: {
-      keydown: (_view, event) => {
-        if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
-          const slashCommand2 = document.querySelector("#slash-command");
-          if (slashCommand2) {
-            return true;
+function buildDecorationSet(highlight, doc) {
+  const decorations = [];
+  if (highlight) {
+    decorations.push(Decoration.inline(highlight.from, highlight.to, {
+      class: "dark:bg-surface-accent-700 bg-surface-accent-300"
+    }));
+  }
+  const decorationSet = DecorationSet.create(doc, decorations);
+  return decorationSet;
+}
+const HighlightDecorationExtension = (initialHighlight) => Extension.create({
+  name: "highlightDecoration",
+  addOptions() {
+    return {
+      pluginKey: new PluginKey("highlightDecoration"),
+      highlight: initialHighlight
+    };
+  },
+  addProseMirrorPlugins() {
+    const pluginKey = this.options.pluginKey;
+    return [new Plugin({
+      key: pluginKey,
+      state: {
+        init: (_, {
+          doc
+        }) => {
+          const highlight = this.options.highlight;
+          const decorationSet = highlight && doc ? buildDecorationSet(highlight, doc) : DecorationSet.empty;
+          return {
+            decorationSet,
+            highlight
+          };
+        },
+        apply(transaction, oldState) {
+          const action = transaction.getMeta(pluginKey);
+          const highlight = action?.range;
+          if (action?.type === "highlightDecoration") {
+            const doc = transaction.doc;
+            const {
+              remove
+            } = action;
+            if (remove) {
+              return {
+                decorationSet: DecorationSet.empty
+              };
+            }
+            const decorationSet = buildDecorationSet(highlight, doc);
+            return {
+              decorationSet,
+              highlight
+            };
+          } else {
+            return oldState;
           }
         }
-        return false;
+      },
+      props: {
+        decorations(state) {
+          const autocompleteState = this.getState(state);
+          if (autocompleteState?.decorationSet) {
+            return autocompleteState.decorationSet;
+          } else {
+            return DecorationSet.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("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];
+          return !!$from.parent.type.contentMatch.matchType(type);
+        }
+      }
+    };
+  },
+  group: "inline",
+  inline: true,
+  selectable: false,
+  atom: true,
+  addAttributes() {
+    return {
+      id: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-id"),
+        renderHTML: (attributes) => {
+          if (!attributes.id) {
+            return {};
+          }
+          return {
+            "data-id": attributes.id
+          };
+        }
+      },
+      label: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-label"),
+        renderHTML: (attributes) => {
+          if (!attributes.label) {
+            return {};
+          }
+          return {
+            "data-label": attributes.label
+          };
+        }
+      }
+    };
+  },
+  parseHTML() {
+    return [{
+      tag: `span[data-type="${this.name}"]`
+    }];
+  },
+  renderHTML({
+    node,
+    HTMLAttributes
+  }) {
+    if (this.options.renderLabel !== void 0) {
+      console.warn("renderLabel is deprecated use renderText and renderHTML instead");
+      return ["span", mergeAttributes({
+        "data-type": this.name
+      }, this.options.HTMLAttributes, HTMLAttributes), this.options.renderLabel({
+        options: this.options,
+        node
+      })];
     }
-    // handlePaste: (view, event) => {
-    //     if (event.clipboardData && event.clipboardData.files && event.clipboardData.files[0]) {
-    //         event.preventDefault();
-    //         const file = event.clipboardData.files[0];
-    //         const pos = view.state.selection.from;
-    //
-    //         // startImageUpload({ file, view, pos, handleImageUpload });
-    //         return true;
-    //     }
-    //     return false;
-    // },
-    // handleDrop: (view, event, _slice, moved) => {
-    //     console.log("handleDrop", { event, moved });
-    //     if (!moved && event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {
-    //         console.log("handleDrop!!!", { event, moved });
-    //         event.preventDefault();
-    //         const file = event.dataTransfer.files[0];
-    //         const coordinates = view.posAtCoords({
-    //             left: event.clientX,
-    //             top: event.clientY
-    //         });
-    //         // here we deduct 1 from the pos or else the image will create an extra node
-    //         startImageUpload({
-    //             file,
-    //             view,
-    //             pos: coordinates?.pos || 0 - 1,
-    //             handleImageUpload,
-    //         });
-    //         return true;
-    //     }
-    //     return false;
-    // }
-  };
-  const suggestionItems = createSuggestionItems([
-    {
-      title: "Text",
-      description: "Just start typing with plain text.",
-      searchTerms: ["p", "paragraph"],
-      icon: /* @__PURE__ */ jsx(TextFieldsIcon, { size: 18 }),
-      command: ({ editor, range }) => {
-        editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").run();
+    const mergedOptions = {
+      ...this.options
+    };
+    mergedOptions.HTMLAttributes = mergeAttributes({
+      "data-type": this.name
+    }, this.options.HTMLAttributes, HTMLAttributes);
+    const html = this.options.renderHTML({
+      options: mergedOptions,
+      node
+    });
+    if (typeof html === "string") {
+      return ["span", mergeAttributes({
+        "data-type": this.name
+      }, this.options.HTMLAttributes, HTMLAttributes), html];
+    }
+    return html;
+  },
+  renderText({
+    node
+  }) {
+    return this.options.renderText({
+      options: this.options,
+      node
+    });
+  },
+  addKeyboardShortcuts() {
+    return {
+      Backspace: () => this.editor.commands.command(({
+        tr,
+        state
+      }) => {
+        let isCommand = false;
+        const {
+          selection
+        } = state;
+        const {
+          empty,
+          anchor
+        } = selection;
+        if (!empty) {
+          return false;
+        }
+        state.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {
+          if (node.type.name === this.name) {
+            isCommand = true;
+            tr.insertText(this.options.deleteTriggerWithBackspace ? "" : this.options.suggestion.char || "", pos, pos + node.nodeSize);
+            return false;
+          }
+          return true;
+        });
+        return isCommand;
+      })
+    };
+  },
+  addProseMirrorPlugins() {
+    return [Suggestion({
+      editor: this.editor,
+      ...this.options.suggestion
+    })];
+  }
+});
+const suggestion = (ref, {
+  upload,
+  aiController
+}) => ({
+  items: ({
+    query
+  }) => {
+    const availableSuggestionItems = [...suggestionItems];
+    if (aiController) {
+      availableSuggestionItems.push(autocompleteSuggestionItem);
+    }
+    return availableSuggestionItems.filter((item) => {
+      const inTitle = item.title.toLowerCase().startsWith(query.toLowerCase());
+      if (inTitle) return inTitle;
+      return item.searchTerms?.some((term) => term.toLowerCase().startsWith(query.toLowerCase()));
+    });
+  },
+  render: () => {
+    let component;
+    let containerEl = null;
+    let cleanupAutoUpdate = null;
+    let reference = null;
+    return {
+      onStart: (props) => {
+        component = new ReactRenderer(CommandList, {
+          props: {
+            ...props,
+            upload,
+            aiController
+          },
+          editor: props.editor
+        });
+        if (!props.clientRect) {
+          return;
+        }
+        containerEl = document.createElement("div");
+        containerEl.style.position = "fixed";
+        containerEl.style.left = "0px";
+        containerEl.style.top = "0px";
+        containerEl.style.zIndex = "9999";
+        (ref?.current || document.body).appendChild(containerEl);
+        containerEl.appendChild(component.element);
+        reference = {
+          getBoundingClientRect: props.clientRect
+        };
+        cleanupAutoUpdate = autoUpdate(reference, containerEl, () => {
+          if (!reference) return;
+          computePosition(reference, containerEl, {
+            placement: "bottom-start",
+            middleware: [offset(4), flip(), shift()],
+            strategy: "fixed"
+          }).then(({
+            x,
+            y
+          }) => {
+            Object.assign(containerEl.style, {
+              left: `${x}px`,
+              top: `${y}px`,
+              visibility: "visible"
+            });
+          });
+        });
+      },
+      onUpdate(props) {
+        component.updateProps(props);
+        if (!props.clientRect || !containerEl || !reference) {
+          return;
+        }
+        reference.getBoundingClientRect = props.clientRect;
+        computePosition(reference, containerEl, {
+          placement: "bottom-start",
+          middleware: [offset(4), flip(), shift()],
+          strategy: "fixed"
+        }).then(({
+          x,
+          y
+        }) => {
+          Object.assign(containerEl.style, {
+            left: `${x}px`,
+            top: `${y}px`,
+            visibility: "visible"
+          });
+        });
+      },
+      onKeyDown(props) {
+        if (props.event.key === "Escape") {
+          props.event.preventDefault();
+          return true;
+        }
+        return component.ref?.onKeyDown(props);
+      },
+      onExit() {
+        if (cleanupAutoUpdate) cleanupAutoUpdate();
+        if (containerEl && containerEl.parentNode) {
+          containerEl.parentNode.removeChild(containerEl);
+        }
+        containerEl = null;
+        reference = null;
+        component?.destroy();
       }
-    },
-    {
-      title: "To-do List",
-      description: "Track tasks with a to-do list.",
-      searchTerms: ["todo", "task", "list", "check", "checkbox"],
-      icon: /* @__PURE__ */ jsx(CheckBoxIcon, { size: 18 }),
-      command: ({ editor, range }) => {
-        editor.chain().focus().deleteRange(range).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__ */ jsx(LooksOneIcon, { size: 18 }),
-      command: ({ editor, range }) => {
-        editor.chain().focus().deleteRange(range).setNode("heading", { level: 1 }).run();
+      item?.command?.({
+        editor,
+        range: props.range,
+        upload: props.upload,
+        aiController: props.aiController
+      });
+    };
+    $[0] = editor;
+    $[1] = props.aiController;
+    $[2] = props.range;
+    $[3] = props.upload;
+    $[4] = t0;
+  } else {
+    t0 = $[4];
+  }
+  const selectItem = t0;
+  let t1;
+  if ($[5] !== props.items.length || $[6] !== selectedIndex) {
+    t1 = () => {
+      setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length);
+    };
+    $[5] = props.items.length;
+    $[6] = selectedIndex;
+    $[7] = t1;
+  } else {
+    t1 = $[7];
+  }
+  const upHandler = t1;
+  let t2;
+  if ($[8] !== props.items.length || $[9] !== selectedIndex) {
+    t2 = () => {
+      setSelectedIndex((selectedIndex + 1) % props.items.length);
+    };
+    $[8] = props.items.length;
+    $[9] = selectedIndex;
+    $[10] = t2;
+  } else {
+    t2 = $[10];
+  }
+  const downHandler = t2;
+  let t3;
+  if ($[11] !== props.items || $[12] !== selectItem || $[13] !== selectedIndex) {
+    t3 = () => {
+      const item_0 = props.items[selectedIndex];
+      selectItem(item_0);
+    };
+    $[11] = props.items;
+    $[12] = selectItem;
+    $[13] = selectedIndex;
+    $[14] = t3;
+  } else {
+    t3 = $[14];
+  }
+  const enterHandler = t3;
+  let t4;
+  if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = () => setSelectedIndex(0);
+    $[15] = t4;
+  } else {
+    t4 = $[15];
+  }
+  let t5;
+  if ($[16] !== props.items) {
+    t5 = [props.items];
+    $[16] = props.items;
+    $[17] = t5;
+  } else {
+    t5 = $[17];
+  }
+  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__ */ jsx(LooksTwoIcon, { size: 18 }),
-      command: ({ editor, range }) => {
-        editor.chain().focus().deleteRange(range).setNode("heading", { level: 2 }).run();
+    });
+    $[18] = downHandler;
+    $[19] = enterHandler;
+    $[20] = upHandler;
+    $[21] = t6;
+  } else {
+    t6 = $[21];
+  }
+  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__ */ jsx(Looks3Icon, { size: 18 }),
-      command: ({ editor, range }) => {
-        editor.chain().focus().deleteRange(range).setNode("heading", { level: 3 }).run();
+    };
+    t9 = [selectedIndex];
+    $[23] = selectedIndex;
+    $[24] = t8;
+    $[25] = t9;
+  } else {
+    t8 = $[24];
+    t9 = $[25];
+  }
+  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__ */ jsx(FormatListBulletedIcon, { size: 18 }),
-      command: ({ editor, range }) => {
-        editor.chain().focus().deleteRange(range).toggleBulletList().run();
+      itemRefs.current[index] = el;
+    }, onClick: () => selectItem(item_1), tabIndex: index === selectedIndex ? 0 : -1, "aria-selected": index === selectedIndex, className: 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;
+});
+CommandList.displayName = "CommandList";
+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__ */ jsx(FormatListNumberedIcon, { size: 18 }),
-      command: ({ editor, range }) => {
-        editor.chain().focus().deleteRange(range).toggleOrderedList().run();
+    });
+    editor.chain().focus().insertContent(result, {
+      applyInputRules: false,
+      applyPasteRules: false,
+      parseOptions: {
+        preserveWhitespace: false
       }
-    },
-    {
-      title: "Quote",
-      description: "Capture a quote.",
-      searchTerms: ["blockquote"],
-      icon: /* @__PURE__ */ 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"],
-      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;
-          }
-        };
-        input.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);
+        });
       }
-    }
-  ]);
-  const slashCommand = Command.configure({
-    suggestion: {
-      items: () => suggestionItems,
-      render: renderItems
-    }
-  });
-  const imageExtension = useMemo(() => createImageExtension(handleImageUpload), []);
-  const extensions = [
-    TiptapUnderline,
-    TextStyle,
-    Color,
-    Highlight.configure({
-      multicolor: true
-    }),
-    Markdown.configure({
-      html: false,
-      transformCopiedText: true
-    }),
-    CustomKeymap,
-    DragAndDrop,
-    starterKit,
-    placeholder,
-    tiptapLink,
-    // tiptapImage,
-    imageExtension,
-    // updatedImage,
-    taskList,
-    taskItem,
-    horizontalRule,
-    slashCommand
-  ];
+      return true;
+    };
+    input.click();
+  }
+}];
+const proseClasses = {
+  "sm": "prose-sm",
+  "base": "prose-base",
+  "lg": "prose-lg"
+};
+const canUseDOM = Boolean(typeof window !== "undefined" && window.document && window.document.createElement);
+const FireCMSEditor = ({
+  content,
+  onJsonContentChange,
+  onHtmlContentChange,
+  onMarkdownContentChange,
+  version,
+  textSize = "base",
+  highlight,
+  handleImageUpload,
+  aiController,
+  disabled
+}) => {
+  const ref = React.useRef(null);
+  const editorRef = React.useRef(null);
+  const imagePlugin = createDropImagePlugin(handleImageUpload);
+  const imageExtension = useMemo(() => createImageExtension(imagePlugin), []);
   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 deferredHighlight = useDeferredValue(highlight);
+  useEffect(() => {
+    if (version === void 0) return;
+    if (version > -1 && editorRef.current) {
+      editorRef.current?.commands.setContent(content ?? "");
+    }
+  }, [version]);
+  useEffect(() => {
+    editorRef?.current?.setEditable(!disabled);
+  }, [disabled]);
+  useEffect(() => {
+    if (version === void 0) return;
+    if (editorRef.current && version > 0) {
+      const chain = editorRef.current.chain();
+      if (deferredHighlight) {
+        chain.focus().toggleAutocompleteHighlight(deferredHighlight).run();
+      } else {
+        chain.focus().removeAutocompleteHighlight().run();
+      }
+    }
+  }, [deferredHighlight?.from, deferredHighlight?.to]);
+  const firstUpdateRef = React.useRef(true);
   const onEditorUpdate = (editor) => {
     editorRef.current = editor;
+    if (firstUpdateRef.current) {
+      firstUpdateRef.current = false;
+      return;
+    }
     if (onMarkdownContentChange) {
-      setMarkdownContent(editor.storage.markdown.getMarkdown());
+      const markdown = editorRef.current.storage.markdown.getMarkdown();
+      onMarkdownContentChange?.(addLineBreakAfterImages(markdown));
     }
     if (onJsonContentChange) {
-      setJsonContent(removeClassesFromJson(editor.getJSON()));
+      const jsonContent = removeClassesFromJson(editor.getJSON());
+      onJsonContentChange(jsonContent);
     }
     if (onHtmlContentChange) {
-      setHtmlContent(editor.getHTML());
+      onHtmlContentChange?.(editor.getHTML());
     }
   };
-  useDebouncedCallback(markdownContent, () => {
-    if (editorRef.current) {
-      const markdown = editorRef.current.storage.markdown.getMarkdown();
-      onMarkdownContentChange?.(addLineBreakAfterImages(markdown));
-    }
-  }, false, 500);
-  useDebouncedCallback(jsonContent, () => {
-    if (jsonContent)
-      onJsonContentChange?.(jsonContent);
-  }, false, 500);
-  useDebouncedCallback(htmlContent, () => {
-    if (htmlContent)
-      onHtmlContentChange?.(htmlContent);
-  }, false, 500);
-  if (!initialContent) return null;
-  return /* @__PURE__ */ 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__ */ jsxs(
-        EditorProvider,
-        {
-          content: initialContent,
-          extensions,
-          editorProps: {
-            ...defaultEditorProps,
-            attributes: {
-              class: "prose-lg prose-headings:font-title font-default focus:outline-none max-w-full p-12"
-            }
-          },
-          onUpdate: ({ editor }) => {
-            console.debug("Editor updated");
-            onEditorUpdate(editor);
-          },
-          children: [
-            /* @__PURE__ */ jsxs(
-              EditorCommand,
-              {
-                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__ */ jsx(EditorCommandEmpty, { className: "px-2 text-gray-700 dark:text-slate-300", children: "No results" }),
-                  suggestionItems.map((item) => /* @__PURE__ */ jsxs(
-                    EditorCommandItem,
-                    {
-                      value: item.title,
-                      onCommand: (val) => item?.command?.(val),
-                      className: "flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm hover:bg-blue-50 hover:dark:bg-gray-700 aria-selected:bg-blue-50 aria-selected:dark:bg-gray-700",
-                      children: [
-                        /* @__PURE__ */ jsx(
-                          "div",
-                          {
-                            className: cls("flex h-10 w-10 items-center justify-center rounded-md border bg-white dark:bg-gray-900", defaultBorderMixin),
-                            children: item.icon
-                          }
-                        ),
-                        /* @__PURE__ */ jsxs("div", { children: [
-                          /* @__PURE__ */ jsx("p", { className: "font-medium", children: item.title }),
-                          /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-700 dark:text-slate-300", children: item.description })
-                        ] })
-                      ]
-                    },
-                    item.title
-                  ))
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              EditorBubble,
-              {
-                tippyOptions: {
-                  placement: "top"
-                },
-                className: cls("flex w-fit max-w-[90vw] h-10 overflow-hidden rounded border bg-white dark:bg-gray-900 shadow", defaultBorderMixin),
-                children: [
-                  /* @__PURE__ */ jsx(NodeSelector, { open: openNode, onOpenChange: setOpenNode }),
-                  /* @__PURE__ */ jsx(Separator, { orientation: "vertical" }),
-                  /* @__PURE__ */ jsx(LinkSelector, { open: openLink, onOpenChange: setOpenLink }),
-                  /* @__PURE__ */ jsx(Separator, { orientation: "vertical" }),
-                  /* @__PURE__ */ jsx(TextButtons, {})
-                ]
-              }
-            )
-          ]
-        }
-      )
+  const proseClass = proseClasses[textSize];
+  const extensions = useMemo(() => [starterKit, Document.extend({}), HighlightDecorationExtension(highlight), TextLoadingDecorationExtension, Underline, Bold, TextStyleKit, Italic, Strike, Color, Highlight.configure({
+    multicolor: true
+  }), Heading, CustomKeymap, DragAndDrop, placeholder, tiptapLink, imageExtension, taskList, taskItem, Markdown.configure({
+    html: true
+  }), horizontalRule, bulletList, orderedList, listItem, blockquote, codeBlock, code, SlashCommand.configure({
+    HTMLAttributes: {
+      class: "mention"
+    },
+    suggestion: suggestion(ref, {
+      upload: handleImageUpload,
+      aiController
+    })
+  })], []);
+  return /* @__PURE__ */ jsx("div", { ref, className: "relative min-h-[300px] w-full", children: /* @__PURE__ */ jsx(EditorProvider, { content: content ?? "", extensions, immediatelyRender: canUseDOM, editorProps: {
+    editable: () => !disabled,
+    attributes: {
+      class: cls(proseClass, "prose-headings:font-title font-default focus:outline-none max-w-full p-12")
     }
-  ) }) });
+  }, onCreate: ({
+    editor: editor_0
+  }) => {
+    editorRef.current = editor_0;
+    editor_0.setEditable(!disabled);
+  }, onUpdate: ({
+    editor: editor_1
+  }) => {
+    onEditorUpdate(editor_1);
+  }, children: /* @__PURE__ */ jsxs(EditorBubble, { options: {
+    placement: "top",
+    offset: 6
+  }, 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 addLineBreakAfterImages(markdown) {
   const imageRegex = /!\[.*?\]\(.*?\)/g;
@@ -1165,7 +1981,9 @@ function addLineBreakAfterImages(markdown) {
 `);
 }
 const cssStyles = `
-
+.ProseMirror {
+    box-shadow: none !important;
+}
 .ProseMirror .is-editor-empty:first-child::before {
   content: attr(data-placeholder);
   float: left;
@@ -1188,6 +2006,7 @@ const cssStyles = `
 }
 
 .is-empty {
+  cursor: text;
   color: rgb(100 116 139); //500
 }
 
@@ -1205,6 +2024,7 @@ const cssStyles = `
   &.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;
   }
 }
 
@@ -1232,7 +2052,7 @@ ul[data-type="taskList"] li > label {
     }
   
     &:active {
-      background-color: rgb(71 85 105);;
+      background-color: rgb(71 85 105);
     }
   }
 }
@@ -1299,7 +2119,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;
@@ -1309,19 +2129,23 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
   background-color:  rgb(51 65 85); // 700
 }
 
+.prose-base table p {
+    margin: 0;
+}
+
 .drag-handle {
-  position: fixed;
+  position: absolute;
   opacity: 1;
   transition: opacity ease-in 0.2s;
   border-radius: 0.25rem;
 
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' style='fill: rgba(128, 128, 128, 0.9)'%3E%3Cpath d='M3,2 C2.44771525,2 2,1.55228475 2,1 C2,0.44771525 2.44771525,0 3,0 C3.55228475,0 4,0.44771525 4,1 C4,1.55228475 3.55228475,2 3,2 Z M3,6 C2.44771525,6 2,5.55228475 2,5 C2,4.44771525 2.44771525,4 3,4 C3.55228475,4 4,4.44771525 4,5 C4,5.55228475 3.55228475,6 3,6 Z M3,10 C2.44771525,10 2,9.55228475 2,9 C2,8.44771525 2.44771525,8 3,8 C3.55228475,8 4,8.44771525 4,9 C4,9.55228475 3.55228475,10 3,10 Z M7,2 C6.44771525,2 6,1.55228475 6,1 C6,0.44771525 6.44771525,0 7,0 C7.55228475,0 8,0.44771525 8,1 C8,1.55228475 7.55228475,2 7,2 Z M7,6 C6.44771525,6 6,5.55228475 6,5 C6,4.44771525 6.44771525,4 7,4 C7.55228475,4 8,4.44771525 8,5 C8,5.55228475 7.55228475,6 7,6 Z M7,10 C6.44771525,10 6,9.55228475 6,9 C6,8.44771525 6.44771525,8 7,8 C7.55228475,8 8,8.44771525 8,9 C8,9.55228475 7.55228475,10 7,10 Z'%3E%3C/path%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' style='fill: rgba(128, 128, 128, 0.9)'%3E%3Cpath d='M3,2 C2.44771525,2 2,1.55228475 2,1 C2,0.44771525 2.44771525,0 3,0 C3.55228475,0 4,0.44771525 4,1 C4,1.55228475 3.55228475,2 3,2 Z M3,6 C2.44771525,6 2,5.55228475 2,5 C2,4.44771525 2.44771525,4 3,4 C3.55228475,4 4,4.44771525 4,5 C4,5.55228475 3.55228475,6 3,6 Z M3,10 C2.44771525,10 2,9.55228475 2,9 C2,8.44771525 2.44771525,8 3,8 C3.55228475,8 4,8.44771525 4,9 C4,9.55228475 3.55228475,10 3,10 Z M7,2 C6.44771525,2 6,1.55228475 6,1 C6,0.44771525 6.44771525,0 7,0 C7.55228475,0 8,0.44771525 8,1 C8,1.55228475 7.55228475,2 7,2 Z M7,6 C6.44771525,6 6,5.55228475 6,5 C6,4.44771525 6.44771525,4 7,4 C7.55228475,4 8,4.44771525 8,5 C8,5.55228475 7.55228475,6 7,6 Z M7,10 C6.44771525,10 6,9.55228475 6,9 C6,8.44771525 6.44771525,8 7,8 C7,8.44771525 7,9 7,9 C7,9.55228475 7,10 7,10 Z'%3E%3C/path%3E%3C/svg%3E");
   background-size: calc(0.5em + 0.375rem) calc(0.5em + 0.375rem);
   background-repeat: no-repeat;
   background-position: center;
   width: 1.2rem;
   height: 1.5rem;
-  z-index: 50;
+  z-index: 100;
   cursor: grab;
 
   &:hover {