@firecms/editor 3.0.0-rc.1 → 3.0.0-rc.2

package/dist/components/editor-bubble.d.ts

@@ -1,7 +1,10 @@
-import { type BubbleMenuProps } from "@tiptap/react";
 import { type ReactNode } from "react";
+import { type BubbleMenuProps } from "@tiptap/react/menus";
 export interface EditorBubbleProps extends Omit<BubbleMenuProps, "editor"> {
     children: ReactNode;
+    tippyOptions?: {
+        placement?: any;
+    };
 }
-export declare const EditorBubble: import("react").ForwardRefExoticComponent<EditorBubbleProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const EditorBubble: import("react").ForwardRefExoticComponent<Omit<EditorBubbleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export default EditorBubble;

package/dist/editor_extensions.d.ts

@@ -1,11 +1,11 @@
-export declare const placeholder: import("@tiptap/core").Extension<import("@tiptap/extension-placeholder").PlaceholderOptions, any>;
+export declare const placeholder: import("@tiptap/core").Extension<import("@tiptap/extensions").PlaceholderOptions, any>;
 export declare const tiptapLink: import("@tiptap/core").Mark<import("@tiptap/extension-link").LinkOptions, any>;
-export declare const taskList: import("@tiptap/core").Node<import("@tiptap/extension-task-list").TaskListOptions, any>;
-export declare const taskItem: import("@tiptap/core").Node<import("@tiptap/extension-task-item").TaskItemOptions, any>;
+export declare const taskList: import("@tiptap/core").Node<import("@tiptap/extension-list").TaskListOptions, any>;
+export declare const taskItem: import("@tiptap/core").Node<import("@tiptap/extension-list").TaskItemOptions, any>;
 export declare const horizontalRule: import("@tiptap/core").Node<import("@tiptap/extension-horizontal-rule").HorizontalRuleOptions, any>;
-export declare const bulletList: import("@tiptap/core").Node<import("@tiptap/extension-bullet-list").BulletListOptions, any>;
-export declare const orderedList: import("@tiptap/core").Node<import("@tiptap/extension-ordered-list").OrderedListOptions, any>;
-export declare const listItem: import("@tiptap/core").Node<import("@tiptap/extension-list-item").ListItemOptions, any>;
+export declare const bulletList: import("@tiptap/core").Node<import("@tiptap/extension-list").BulletListOptions, any>;
+export declare const orderedList: import("@tiptap/core").Node<import("@tiptap/extension-list").OrderedListOptions, any>;
+export declare const listItem: import("@tiptap/core").Node<import("@tiptap/extension-list").ListItemOptions, any>;
 export declare const blockquote: import("@tiptap/core").Node<import("@tiptap/extension-blockquote").BlockquoteOptions, any>;
 export declare const codeBlock: import("@tiptap/core").Node<import("@tiptap/extension-code-block").CodeBlockOptions, any>;
 export declare const code: import("@tiptap/core").Mark<import("@tiptap/extension-code").CodeOptions, any>;

package/dist/extensions/index.d.ts

@@ -4,7 +4,7 @@ import TiptapImage from "@tiptap/extension-image";
 import { TaskItem } from "@tiptap/extension-task-item";
 import { TaskList } from "@tiptap/extension-task-list";
 import { InputRule } from "@tiptap/core";
-declare const PlaceholderExtension: import("@tiptap/core").Extension<import("@tiptap/extension-placeholder").PlaceholderOptions, any>;
+declare const PlaceholderExtension: import("@tiptap/core").Extension<import("@tiptap/extensions").PlaceholderOptions, any>;
 declare const Horizontal: import("@tiptap/core").Node<import("@tiptap/extension-horizontal-rule").HorizontalRuleOptions, any>;
 export { PlaceholderExtension as Placeholder, StarterKit, Horizontal as HorizontalRule, TiptapLink, TiptapImage, TaskItem, TaskList, InputRule };
 export { getPrevText } from "../utils/utils";

package/dist/extensions/slashCommand.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react";
-import { Editor, Node, Range } from "@tiptap/react";
+import { Editor, Node, Range } from "@tiptap/core";
 import { DOMOutputSpec, Node as ProseMirrorNode } from "@tiptap/pm/model";
 import { PluginKey } from "@tiptap/pm/state";
 import { SuggestionOptions } from "@tiptap/suggestion";

package/dist/index.es.js

@@ -1,18 +1,20 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 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, BubbleMenu, isNodeSelection, Node, mergeAttributes, ReactRenderer, EditorProvider } from "@tiptap/react";
+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 TextStyle from "@tiptap/extension-text-style";
+import { TextStyleKit } 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 { BubbleMenu } from "@tiptap/react/menus";
+import { NodeSelection, PluginKey, Plugin } from "@tiptap/pm/state";
 import { Slot } from "@radix-ui/react-slot";
 import StarterKit from "@tiptap/starter-kit";
 import HorizontalRule from "@tiptap/extension-horizontal-rule";
@@ -21,8 +23,7 @@ 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, NodeSelection } from "@tiptap/pm/state";
+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";
@@ -32,118 +33,89 @@ 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 { computePosition, offset, flip, shift, autoUpdate } from "@floating-ui/dom";
 const EditorBubble = forwardRef((t0, ref) => {
-  const $ = c(21);
+  const $ = c(18);
   let children;
+  let options;
   let rest;
   let tippyOptions;
   if ($[0] !== t0) {
     ({
       children,
       tippyOptions,
+      options,
       ...rest
     } = t0);
     $[0] = t0;
     $[1] = children;
-    $[2] = rest;
-    $[3] = tippyOptions;
+    $[2] = options;
+    $[3] = rest;
+    $[4] = tippyOptions;
   } else {
     children = $[1];
-    rest = $[2];
-    tippyOptions = $[3];
+    options = $[2];
+    rest = $[3];
+    tippyOptions = $[4];
   }
   const {
     editor
   } = useCurrentEditor();
-  const instanceRef = useRef(null);
+  tippyOptions?.placement;
   let t1;
-  if ($[4] !== tippyOptions) {
-    t1 = () => {
-      if (!instanceRef.current || !tippyOptions?.placement) {
-        return;
-      }
-      instanceRef.current.setProps({
-        placement: tippyOptions.placement
-      });
-      instanceRef.current.popperInstance?.update();
-    };
-    $[4] = tippyOptions;
-    $[5] = t1;
-  } else {
-    t1 = $[5];
-  }
-  const t2 = tippyOptions?.placement;
+  const shouldShow = _temp$1;
+  const t2 = tippyOptions?.placement ?? options?.placement;
   let t3;
-  if ($[6] !== t2) {
-    t3 = [t2];
+  if ($[5] !== options || $[6] !== t2) {
+    t3 = {
+      ...options,
+      placement: t2
+    };
+    $[5] = options;
     $[6] = t2;
     $[7] = t3;
   } else {
     t3 = $[7];
   }
-  useEffect(t1, t3);
+  const mergedOptions = t3;
   let t4;
-  const shouldShow = _temp$1;
-  let t5;
-  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-    t5 = (val) => {
-      instanceRef.current = val;
-    };
-    $[8] = t5;
-  } else {
-    t5 = $[8];
-  }
-  let t6;
-  if ($[9] !== tippyOptions) {
-    t6 = {
-      onCreate: t5,
-      moveTransition: "transform 0.15s ease-out",
-      ...tippyOptions
-    };
-    $[9] = tippyOptions;
-    $[10] = t6;
-  } else {
-    t6 = $[10];
-  }
-  let t7;
-  if ($[11] !== rest || $[12] !== t6) {
-    t7 = {
+  if ($[8] !== mergedOptions || $[9] !== rest) {
+    t4 = {
       shouldShow,
-      tippyOptions: t6,
+      options: mergedOptions,
       ...rest
     };
-    $[11] = rest;
-    $[12] = t6;
-    $[13] = t7;
+    $[8] = mergedOptions;
+    $[9] = rest;
+    $[10] = t4;
   } else {
-    t7 = $[13];
+    t4 = $[10];
   }
-  t4 = t7;
-  const bubbleMenuProps = t4;
+  t1 = t4;
+  const bubbleMenuProps = t1;
   if (!editor) {
     return null;
   }
-  let t8;
-  if ($[14] !== bubbleMenuProps || $[15] !== children || $[16] !== editor) {
-    t8 = /* @__PURE__ */ jsx(BubbleMenu, { editor, ...bubbleMenuProps, children });
-    $[14] = bubbleMenuProps;
-    $[15] = children;
-    $[16] = editor;
-    $[17] = t8;
+  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 {
-    t8 = $[17];
+    t5 = $[14];
   }
-  let t9;
-  if ($[18] !== ref || $[19] !== t8) {
-    t9 = /* @__PURE__ */ jsx("div", { ref, children: t8 });
-    $[18] = ref;
-    $[19] = t8;
-    $[20] = t9;
+  let t6;
+  if ($[15] !== ref || $[16] !== t5) {
+    t6 = /* @__PURE__ */ jsx("div", { ref, children: t5 });
+    $[15] = ref;
+    $[16] = t5;
+    $[17] = t6;
   } else {
-    t9 = $[20];
+    t6 = $[17];
   }
-  return t9;
+  return t6;
 });
 function _temp$1(t0) {
   const {
@@ -156,7 +128,7 @@ function _temp$1(t0) {
   const {
     empty
   } = selection;
-  if (editor_0.isActive("image") || empty || isNodeSelection(selection)) {
+  if (editor_0.isActive("image") || empty || selection instanceof NodeSelection) {
     return false;
   }
   return true;
@@ -1324,8 +1296,7 @@ const SlashCommand = Node.create({
         }) => {
           const $from = state.doc.resolve(range.from);
           const type = state.schema.nodes[this.name];
-          const allow = !!$from.parent.type.contentMatch.matchType(type);
-          return allow;
+          return !!$from.parent.type.contentMatch.matchType(type);
         }
       }
     };
@@ -1455,13 +1426,14 @@ const suggestion = (ref, {
     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;
+      return item.searchTerms?.some((term) => term.toLowerCase().startsWith(query.toLowerCase()));
     });
   },
   render: () => {
     let component;
-    let popup;
+    let containerEl = null;
+    let cleanupAutoUpdate = null;
+    let reference = null;
     return {
       onStart: (props) => {
         component = new ReactRenderer(CommandList, {
@@ -1475,35 +1447,69 @@ const suggestion = (ref, {
         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"
+        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) {
+        if (!props.clientRect || !containerEl || !reference) {
           return;
         }
-        popup[0].setProps({
-          getReferenceClientRect: props.clientRect
+        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") {
-          popup[0].hide();
           props.event.preventDefault();
           return true;
         }
         return component.ref?.onKeyDown(props);
       },
       onExit() {
-        if (popup && popup[0]) popup[0].destroy();
+        if (cleanupAutoUpdate) cleanupAutoUpdate();
+        if (containerEl && containerEl.parentNode) {
+          containerEl.parentNode.removeChild(containerEl);
+        }
+        containerEl = null;
+        reference = null;
         component?.destroy();
       }
     };
@@ -1865,14 +1871,12 @@ const suggestionItems = [{
     input.click();
   }
 }];
-const CustomDocument = Document.extend({
-  // content: 'heading block*',
-});
 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,
@@ -1933,7 +1937,7 @@ const FireCMSEditor = ({
     }
   };
   const proseClass = proseClasses[textSize];
-  const extensions = useMemo(() => [starterKit, CustomDocument, HighlightDecorationExtension(highlight), TextLoadingDecorationExtension, Underline, Bold, TextStyle, Italic, Strike, Color, Highlight.configure({
+  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
@@ -1946,7 +1950,7 @@ const FireCMSEditor = ({
       aiController
     })
   })], []);
-  return /* @__PURE__ */ jsx("div", { ref, className: "relative min-h-[300px] w-full", children: /* @__PURE__ */ jsx(EditorProvider, { content: content ?? "", extensions, editorProps: {
+  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")
@@ -1960,8 +1964,9 @@ const FireCMSEditor = ({
     editor: editor_1
   }) => {
     onEditorUpdate(editor_1);
-  }, children: /* @__PURE__ */ jsxs(EditorBubble, { tippyOptions: {
-    placement: "top"
+  }, 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" }),
@@ -2134,7 +2139,7 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
   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;