@firecms/editor 3.0.0-canary.113 → 3.0.0-canary.114

package/dist/extensions/HighlightDecorationExtension.d.ts

@@ -0,0 +1,35 @@
+import { Extension } from "@tiptap/core";
+import { PluginKey } from "@tiptap/pm/state";
+import { DecorationSet } from "@tiptap/pm/view";
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        highlightDecoration: {
+            toggleAutocompleteHighlight: (range?: {
+                from: number;
+                to: number;
+            }) => ReturnType;
+            removeAutocompleteHighlight: () => ReturnType;
+        };
+    }
+}
+export interface HighlightRange {
+    from: number;
+    to: number;
+}
+interface AutocompleteHighlightState {
+    highlight?: HighlightRange;
+    decorationSet?: DecorationSet;
+}
+export interface HighlightDecorationOptions {
+    pluginKey: PluginKey<AutocompleteHighlightState>;
+    highlight?: {
+        from: number;
+        to: number;
+    };
+}
+/**
+ * This plugin is used to highlight the current autocomplete suggestion.
+ * It allows to set a range and remove it.
+ */
+export declare const HighlightDecorationExtension: (initialHighlight?: HighlightRange) => Extension<HighlightDecorationOptions, any>;
+export {};

package/dist/extensions/TextLoadingDecorationExtension.d.ts

@@ -0,0 +1,18 @@
+import { PluginKey } from "prosemirror-state";
+import { DecorationSet } from "prosemirror-view";
+import { Extension } from "@tiptap/core";
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        textLoadingDecoration: {
+            toggleLoadingDecoration: (loadingHtml?: string) => ReturnType;
+            removeLoadingDecoration: () => ReturnType;
+        };
+    }
+}
+export declare const loadingDecorationKey: PluginKey<LoadingDecorationState>;
+interface LoadingDecorationState {
+    decorationSet: DecorationSet;
+    hasDecoration: boolean;
+}
+declare const TextLoadingDecorationExtension: Extension<any, any>;
+export default TextLoadingDecorationExtension;

package/dist/index.es.js

@@ -1,13 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import React, { forwardRef, useRef, useEffect, useMemo, useState, useImperativeHandle, useDeferredValue } from "react";
-import TiptapUnderline from "@tiptap/extension-underline";
+import { Underline } from "@tiptap/extension-underline";
 import TextStyle from "@tiptap/extension-text-style";
 import { Color } from "@tiptap/extension-color";
 import BulletList from "@tiptap/extension-bullet-list";
 import Highlight from "@tiptap/extension-highlight";
 import { useCurrentEditor, BubbleMenu, isNodeSelection, Node, mergeAttributes, ReactRenderer, EditorProvider } from "@tiptap/react";
 import { Slot } from "@radix-ui/react-slot";
-import { Popover, Button, ExpandMoreIcon, CheckIcon, TextFieldsIcon, LooksOneIcon, LooksTwoIcon, Looks3Icon, CheckBoxIcon, FormatListBulletedIcon, FormatListNumberedIcon, FormatQuoteIcon, CodeIcon, cls, DeleteIcon, FormatBoldIcon, FormatItalicIcon, FormatUnderlinedIcon, FormatStrikethroughIcon, defaultBorderMixin, AutoAwesomeIcon, ImageIcon, useInjectStyles, Separator } from "@firecms/ui";
+import { Popover, Button, ExpandMoreIcon, CheckIcon, TextFieldsIcon, LooksOneIcon, LooksTwoIcon, Looks3Icon, CheckBoxIcon, FormatListBulletedIcon, FormatListNumberedIcon, FormatQuoteIcon, CodeIcon, cls, focusedDisabled, DeleteIcon, FormatBoldIcon, FormatItalicIcon, FormatUnderlinedIcon, FormatStrikethroughIcon, defaultBorderMixin, AutoAwesomeIcon, ImageIcon, useInjectStyles, Separator } from "@firecms/ui";
 import StarterKit from "@tiptap/starter-kit";
 import HorizontalRule from "@tiptap/extension-horizontal-rule";
 import TiptapLink from "@tiptap/extension-link";
@@ -15,7 +15,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, Node as Node$1 } from "@tiptap/core";
+import { Extension, InputRule } from "@tiptap/core";
 import { PluginKey, Plugin } from "prosemirror-state";
 import { DecorationSet, Decoration } from "prosemirror-view";
 import { Markdown } from "tiptap-markdown";
@@ -243,7 +243,7 @@ const LinkSelector = ({
                 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"
+                className: cls("text-gray-900 dark:text-white flex-grow bg-transparent p-1 text-sm outline-none", focusedDisabled)
               }
             ),
             editor.getAttributes("link").href ? /* @__PURE__ */ jsx(
@@ -350,7 +350,7 @@ function removeClassesFromJson(jsonObj) {
   return jsonObj;
 }
 const loadingDecorationKey = new PluginKey("loadingDecoration");
-const LoadingDecoration = Extension.create({
+const TextLoadingDecorationExtension = Extension.create({
   name: "loadingDecoration",
   addOptions() {
     return {
@@ -410,7 +410,6 @@ const LoadingDecoration = Extension.create({
       })
     ];
   },
-  // @ts-ignore
   addCommands() {
     return {
       toggleLoadingDecoration: (loadingHtml) => ({ state, dispatch }) => {
@@ -418,8 +417,6 @@ const LoadingDecoration = Extension.create({
         const pos = selection.from;
         if (!dispatch) return false;
         const pluginKey = this.options.pluginKey;
-        const pluginState = pluginKey.get(state);
-        pluginState?.getState(state)?.hasDecoration ?? false;
         const tr = state.tr.setMeta(pluginKey, {
           pos,
           type: "loadingDecoration",
@@ -1379,72 +1376,109 @@ const suggestionItems = [
     }
   }
 ];
-const AiContentExtensionKey = new PluginKey$1("AiContentExtension");
-const AiContentExtension = Node$1.create({
-  name: "aiContent",
+function buildDecorationSet(highlight, doc) {
+  const decorations = [];
+  if (highlight) {
+    decorations.push(
+      Decoration$1.inline(highlight.from, highlight.to, {
+        class: "dark:bg-slate-700 bg-slate-300"
+      })
+    );
+  }
+  const decorationSet = DecorationSet$1.create(doc, decorations);
+  return decorationSet;
+}
+const HighlightDecorationExtension = (initialHighlight) => Extension.create({
+  name: "highlightDecoration",
+  addOptions() {
+    return {
+      pluginKey: new PluginKey$1("highlightDecoration"),
+      highlight: initialHighlight
+    };
+  },
   addProseMirrorPlugins() {
-    const pluginKey = AiContentExtensionKey;
-    const plugin = new Plugin$1({
-      key: pluginKey,
-      state: {
-        init() {
-          return DecorationSet$1.empty;
+    const pluginKey = this.options.pluginKey;
+    return [
+      new Plugin$1({
+        key: pluginKey,
+        state: {
+          init: (_, { doc }) => {
+            const highlight = this.options.highlight;
+            const decorationSet = highlight && doc ? buildDecorationSet(highlight, doc) : DecorationSet$1.empty;
+            return {
+              decorationSet,
+              highlight
+            };
+          },
+          apply(transaction, oldState) {
+            const action = transaction.getMeta(pluginKey);
+            const highlight = action?.range;
+            if (action?.type === "highlightDecoration") {
+              const doc = transaction.doc;
+              const { remove } = action;
+              if (remove) {
+                return {
+                  decorationSet: DecorationSet$1.empty
+                };
+              }
+              const decorationSet = buildDecorationSet(highlight, doc);
+              return {
+                decorationSet,
+                highlight
+              };
+            } else {
+              return oldState;
+            }
+          }
         },
-        apply(tr, oldValue) {
-          return tr.getMeta(pluginKey) || oldValue;
-        }
-      },
-      view() {
-        return {
-          update(view, prevState) {
-            const prevDecos = plugin.getState(prevState);
-            const newDecos = plugin.getState(view.state);
-            if (prevDecos !== newDecos) {
-              view.updateState(view.state);
+        props: {
+          decorations(state) {
+            const autocompleteState = this.getState(state);
+            if (autocompleteState?.decorationSet) {
+              return autocompleteState.decorationSet;
+            } else {
+              return DecorationSet$1.empty;
             }
           }
-        };
+        }
+      })
+    ];
+  },
+  addCommands() {
+    return {
+      toggleAutocompleteHighlight: (range) => ({
+        state,
+        dispatch
+      }) => {
+        const { selection } = state;
+        const pos = selection.from;
+        if (!dispatch) return false;
+        const pluginKey = this.options.pluginKey;
+        const tr = state.tr.setMeta(pluginKey, {
+          pos,
+          type: "highlightDecoration",
+          remove: false,
+          range
+        });
+        dispatch(tr);
+        return true;
+      },
+      removeAutocompleteHighlight: () => ({
+        state,
+        dispatch
+      }) => {
+        if (!dispatch) return false;
+        const pluginKey = this.options.pluginKey;
+        const tr = state.tr.setMeta(pluginKey, {
+          pos: 0,
+          // We can pass any position as it will remove the entire decoration set
+          type: "highlightDecoration",
+          remove: true
+        });
+        dispatch(tr);
+        return true;
       }
-      // props: {
-      //     decorations(editorState) {
-      //         return pluginKey.getState(editorState);
-      //     },
-      //     handleKeyDown(view, event) {
-      //         const pluginState = pluginKey.getState(view.state);
-      //         if (!pluginState) return false;
-      //
-      //         if (event.key === "Tab") {
-      //             const selection = view.state.selection;
-      //             const cursorPos = selection.$head.pos;
-      //
-      //             // Find the suggestion decoration
-      //             const decoration = pluginState.find(cursorPos)?.[0];
-      //             console.log(decoration);
-      //             // @ts-ignore
-      //             if (decoration && decoration.type?.spec?.suggestionText) {
-      //                 // @ts-ignore
-      //                 const suggestionText = decoration.type.spec.suggestionText;
-      //                 const tr = view.state.tr;
-      //                 tr.insertText(suggestionText, cursorPos);
-      //
-      //                 // Dispatch the transaction
-      //                 view.dispatch(tr.setMeta("addToHistory", true));
-      //
-      //                 // Clear decorations after applying suggestion
-      //                 const clearDecoTr = view.state.tr;
-      //                 clearDecoTr.setMeta(pluginKey, { decorations: DecorationSet.empty });
-      //                 view.dispatch(clearDecoTr);
-      //
-      //                 // Prevent default behavior of the keypress
-      //                 event.preventDefault();
-      //                 return true;
-      //             }
-      //         }
-      //         return false;
-      //     }
-      // }
-    });
-    return [plugin];
+    };
   }
 });
 const CustomDocument = Document.extend({
@@ -1477,40 +1511,21 @@ const FireCMSEditor = ({
   const deferredHighlight = useDeferredValue(highlight);
   useEffect(() => {
     if (version === void 0) return;
-    if (version > 0 && editorRef.current) {
+    if (version > -1 && editorRef.current) {
       editorRef.current?.commands.setContent(content ?? "");
     }
   }, [version]);
-  const currentHighlight = useRef(deferredHighlight);
   useEffect(() => {
     if (version === void 0) return;
     if (editorRef.current && version > 0) {
-      const {
-        from: selectionFrom,
-        to: selectionTo
-      } = editorRef.current.state.selection;
       const chain = editorRef.current.chain();
-      const currentContent = editorRef.current.storage.markdown.getMarkdown();
-      if (currentContent !== content) {
-        chain.setContent(content ?? "");
-      }
       if (deferredHighlight) {
-        if (currentHighlight.current?.from !== deferredHighlight.from || currentHighlight.current?.to !== deferredHighlight.to) {
-          chain.focus().setTextSelection({
-            from: deferredHighlight?.from,
-            to: deferredHighlight?.to
-          }).toggleHighlight({ color: "#64748B68" });
-        }
+        chain.focus().toggleAutocompleteHighlight(deferredHighlight).run();
       } else {
-        chain.focus().selectAll().unsetHighlight();
+        chain.focus().removeAutocompleteHighlight().run();
       }
-      currentHighlight.current = deferredHighlight;
-      chain.focus().setTextSelection({
-        from: selectionFrom,
-        to: selectionTo
-      }).run();
     }
-  }, [editorRef.current, deferredHighlight]);
+  }, [deferredHighlight?.from, deferredHighlight?.to]);
   const onEditorUpdate = (editor) => {
     editorRef.current = editor;
     if (onMarkdownContentChange) {
@@ -1527,19 +1542,19 @@ const FireCMSEditor = ({
   };
   const proseClass = proseClasses[textSize];
   const extensions = useMemo(() => [
-    // AutocompleteExtension,
-    LoadingDecoration,
-    TiptapUnderline,
+    starterKit,
+    CustomDocument,
+    HighlightDecorationExtension(highlight),
+    TextLoadingDecorationExtension,
+    Underline,
     TextStyle,
     Color,
     BulletList,
-    CustomDocument,
     Highlight.configure({
       multicolor: true
     }),
     CustomKeymap,
     DragAndDrop,
-    starterKit,
     placeholder,
     tiptapLink,
     imageExtension,
@@ -1547,9 +1562,6 @@ const FireCMSEditor = ({
     taskItem,
     markdownExtension,
     horizontalRule,
-    AiContentExtension.configure({
-      aiController
-    }),
     SlashCommand.configure({
       HTMLAttributes: {
         class: "mention"