payload-richtext-tiptap 0.0.95 → 0.0.97

package/dist/src/fields/TiptapEditor/features/BlockEditor/OneLineEditor.d.ts

@@ -0,0 +1,9 @@
+import { AdditionalContextType, TiptapProps } from "./types.js";
+export declare const OneLineEditor: ({ handleChange, content, additionalContext, isEditable, autoFocus, dir, }: TiptapProps & {
+    additionalContext?: AdditionalContextType;
+    autoFocus?: boolean;
+    isEditable?: boolean;
+    dir?: "ltr" | "rtl" | "auto";
+}) => import("react").JSX.Element;
+export default OneLineEditor;
+//# sourceMappingURL=OneLineEditor.d.ts.map

package/dist/src/fields/TiptapEditor/features/BlockEditor/OneLineEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OneLineEditor.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/features/BlockEditor/OneLineEditor.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAKhE,eAAO,MAAM,aAAa,8EAOvB,WAAW,GAAG;IACf,iBAAiB,CAAC,EAAE,qBAAqB,CAAC;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;CAC9B,gCA8GA,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/src/fields/TiptapEditor/features/BlockEditor/OneLineEditor.js

@@ -0,0 +1,110 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { EditorContent, useEditor } from "@tiptap/react";
+import i18n from "i18next";
+import { useEffect, useMemo, useRef } from "react";
+import { EditorContext } from "../../context/EditorContext.js";
+import i18next from "i18next";
+import Text from '@tiptap/extension-text';
+import Highlight from '@tiptap/extension-highlight';
+import { AICommand, Paragraph } from "../../extensions/index.js";
+import OneLiner from "./components/OneLiner.js";
+import { AITextMenu } from "../menus/TextMenu/AITextMenu.js";
+const DEFAULT_LANG = "en";
+export const OneLineEditor = ({ handleChange, content, additionalContext, isEditable = true, autoFocus = true, dir })=>{
+    const menuContainerRef = useRef(null);
+    const editorRef = useRef(null);
+    const editor = useEditor({
+        content: content?.json ?? content ?? {},
+        immediatelyRender: false,
+        autofocus: autoFocus ?? true,
+        editable: isEditable ?? true,
+        onCreate: ({ editor })=>({
+            }),
+        extensions: [
+            OneLiner,
+            Text,
+            Paragraph,
+            AICommand,
+            Highlight
+        ],
+        editorProps: {
+            attributes: {
+                languages: i18next.language,
+                autocomplete: "off",
+                autocorrect: "off",
+                autocapitalize: "off",
+                class: "min-h-full"
+            }
+        },
+        onUpdate: ({ editor })=>{
+            handleChange(editor?.getJSON() ?? {});
+        }
+    }, []);
+    const providerValue = useMemo(()=>{
+        return {};
+    }, []);
+    useEffect(()=>{
+        if (!additionalContext) {
+            i18n.init({
+                fallbackLng: DEFAULT_LANG,
+                lng: DEFAULT_LANG,
+                returnEmptyString: true,
+                resources: {}
+            });
+            return;
+        }
+        if (additionalContext.language && additionalContext.translations) {
+            i18n.init({
+                fallbackLng: additionalContext.language,
+                lng: additionalContext.language,
+                returnEmptyString: true,
+                resources: {
+                    [additionalContext.language]: {
+                        translation: additionalContext.translations
+                    }
+                }
+            });
+            return;
+        }
+        if (additionalContext.language) {
+            i18n.init({
+                fallbackLng: additionalContext?.language,
+                lng: additionalContext?.language,
+                returnEmptyString: true,
+                resources: {}
+            });
+        }
+    }, []);
+    return editor && /*#__PURE__*/ _jsx(EditorContext.Provider, {
+        value: providerValue,
+        children: /*#__PURE__*/ _jsx("div", {
+            className: "flex h-full overflow-visible",
+            ref: menuContainerRef,
+            dir: i18next.dir(),
+            children: /*#__PURE__*/ _jsxs("div", {
+                className: "one-liner relative flex flex-col flex-1 h-full  justify-center items-center ",
+                children: [
+                    /*#__PURE__*/ _jsx(EditorContent, {
+                        dir: i18next.dir(),
+                        editor: editor,
+                        ref: editorRef,
+                        className: "flex-1 overflow-y-visible w-full h-full outline-none outline-offset-0",
+                        style: {
+                            outline: "none"
+                        }
+                    }),
+                    isEditable && /*#__PURE__*/ _jsx(_Fragment, {
+                        children: /*#__PURE__*/ _jsx(AITextMenu, {
+                            editor: editor,
+                            dir: i18next.dir()
+                        })
+                    })
+                ]
+            })
+        })
+    });
+};
+export default OneLineEditor;
+
+//# sourceMappingURL=OneLineEditor.js.map

package/dist/src/fields/TiptapEditor/features/BlockEditor/OneLineEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/features/BlockEditor/OneLineEditor.tsx"],"sourcesContent":["\"use client\";\nimport { EditorContent, useEditor } from \"@tiptap/react\";\nimport i18n from \"i18next\";\nimport { useEffect, useMemo, useRef } from \"react\";\n\nimport { EditorContext } from \"../../context/EditorContext.js\";\n\nimport i18next from \"i18next\";\nimport Text from '@tiptap/extension-text'\nimport Highlight from '@tiptap/extension-highlight'\nimport { AICommand, Heading, Paragraph, StarterKit } from \"../../extensions/index.js\";\nimport OneLiner from \"./components/OneLiner.js\";\nimport { AdditionalContextType, TiptapProps } from \"./types.js\";\nimport { AITextMenu } from \"../menus/TextMenu/AITextMenu.js\";\n\nconst DEFAULT_LANG = \"en\"\n\nexport const OneLineEditor = ({\n  handleChange,\n  content,\n  additionalContext,\n  isEditable = true,\n  autoFocus = true,\n  dir,\n}: TiptapProps & {\n  additionalContext?: AdditionalContextType;\n  autoFocus?: boolean;\n  isEditable?: boolean;\n  dir?: \"ltr\" | \"rtl\" | \"auto\";\n}) => {\n  const menuContainerRef = useRef(null);\n  const editorRef = useRef<HTMLDivElement>(null);\n\n  const editor = useEditor(\n    {\n      content: content?.json ?? content ?? {},\n      immediatelyRender: false,\n      autofocus: autoFocus ?? true,\n      editable: isEditable ?? true,\n      onCreate: ({ editor }) => ({\n        // provider?.on('synced', () => {\n        //   if (editor.isEmpty) {\n        //     editor.commands.setContent(initialContent)\n        //   }\n        // })\n      }),\n      extensions: [\n        OneLiner,\n        Text,\n        Paragraph,\n        AICommand,\n        Highlight\n\n      ],\n      editorProps: {\n        attributes: {\n          languages: i18next.language,\n          autocomplete: \"off\",\n          autocorrect: \"off\",\n          autocapitalize: \"off\",\n          class: \"min-h-full\",\n        },\n      },\n      onUpdate: ({ editor }) => {\n        handleChange(editor?.getJSON() ?? {});\n      },\n    },\n    []\n  );\n\n\n  const providerValue = useMemo(() => {\n    return {};\n  }, []);\n  useEffect(() => {\n    if (!additionalContext) {\n      i18n.init({\n        fallbackLng: DEFAULT_LANG,\n        lng: DEFAULT_LANG,\n        returnEmptyString: true,\n        resources: {},\n      });\n      return\n    }\n\n    if (additionalContext.language && additionalContext.translations) {\n      i18n.init({\n        fallbackLng: additionalContext.language,\n        lng: additionalContext.language,\n        returnEmptyString: true,\n        resources: {\n          [additionalContext.language]: {\n            translation: additionalContext.translations,\n          },\n        },\n      });\n      return\n    }\n    if (additionalContext.language) {\n      i18n.init({\n        fallbackLng: additionalContext?.language,\n        lng: additionalContext?.language,\n        returnEmptyString: true,\n        resources: {},\n      });\n    }\n  }, []);\n\n  return (\n    editor && (\n      <EditorContext.Provider value={providerValue}>\n        <div\n          className=\"flex h-full overflow-visible\"\n          ref={menuContainerRef}\n          dir={i18next.dir()}\n        >\n          <div className=\"one-liner relative flex flex-col flex-1 h-full  justify-center items-center \">\n            <EditorContent\n              dir={i18next.dir()}\n              editor={editor}\n              ref={editorRef}\n              className=\"flex-1 overflow-y-visible w-full h-full outline-none outline-offset-0\"\n              style={{\n                outline: \"none\",\n              }}\n            />\n            {isEditable && (\n              <>\n                <AITextMenu\n                  editor={editor}\n                  dir={i18next.dir()}\n                />\n              </>\n            )}\n          </div>\n        </div>\n      </EditorContext.Provider>\n    )\n  );\n};\n\nexport default OneLineEditor;\n"],"names":["EditorContent","useEditor","i18n","useEffect","useMemo","useRef","EditorContext","i18next","Text","Highlight","AICommand","Paragraph","OneLiner","AITextMenu","DEFAULT_LANG","OneLineEditor","handleChange","content","additionalContext","isEditable","autoFocus","dir","menuContainerRef","editorRef","editor","json","immediatelyRender","autofocus","editable","onCreate","extensions","editorProps","attributes","languages","language","autocomplete","autocorrect","autocapitalize","class","onUpdate","getJSON","providerValue","init","fallbackLng","lng","returnEmptyString","resources","translations","translation","Provider","value","div","className","ref","style","outline"],"mappings":"AAAA;;AACA,SAASA,aAAa,EAAEC,SAAS,QAAQ,gBAAgB;AACzD,OAAOC,UAAU,UAAU;AAC3B,SAASC,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,QAAQ;AAEnD,SAASC,aAAa,QAAQ,iCAAiC;AAE/D,OAAOC,aAAa,UAAU;AAC9B,OAAOC,UAAU,yBAAwB;AACzC,OAAOC,eAAe,8BAA6B;AACnD,SAASC,SAAS,EAAWC,SAAS,QAAoB,4BAA4B;AACtF,OAAOC,cAAc,2BAA2B;AAEhD,SAASC,UAAU,QAAQ,kCAAkC;AAE7D,MAAMC,eAAe;AAErB,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,YAAY,EACZC,OAAO,EACPC,iBAAiB,EACjBC,aAAa,IAAI,EACjBC,YAAY,IAAI,EAChBC,GAAG,EAMJ;IACC,MAAMC,mBAAmBjB,OAAO;IAChC,MAAMkB,YAAYlB,OAAuB;IAEzC,MAAMmB,SAASvB,UACb;QACEgB,SAASA,SAASQ,QAAQR,WAAW,CAAC;QACtCS,mBAAmB;QACnBC,WAAWP,aAAa;QACxBQ,UAAUT,cAAc;QACxBU,UAAU,CAAC,EAAEL,MAAM,EAAE,GAAM,CAAA;YAM3B,CAAA;QACAM,YAAY;YACVlB;YACAJ;YACAG;YACAD;YACAD;SAED;QACDsB,aAAa;YACXC,YAAY;gBACVC,WAAW1B,QAAQ2B,QAAQ;gBAC3BC,cAAc;gBACdC,aAAa;gBACbC,gBAAgB;gBAChBC,OAAO;YACT;QACF;QACAC,UAAU,CAAC,EAAEf,MAAM,EAAE;YACnBR,aAAaQ,QAAQgB,aAAa,CAAC;QACrC;IACF,GACA,EAAE;IAIJ,MAAMC,gBAAgBrC,QAAQ;QAC5B,OAAO,CAAC;IACV,GAAG,EAAE;IACLD,UAAU;QACR,IAAI,CAACe,mBAAmB;YACtBhB,KAAKwC,IAAI,CAAC;gBACRC,aAAa7B;gBACb8B,KAAK9B;gBACL+B,mBAAmB;gBACnBC,WAAW,CAAC;YACd;YACA;QACF;QAEA,IAAI5B,kBAAkBgB,QAAQ,IAAIhB,kBAAkB6B,YAAY,EAAE;YAChE7C,KAAKwC,IAAI,CAAC;gBACRC,aAAazB,kBAAkBgB,QAAQ;gBACvCU,KAAK1B,kBAAkBgB,QAAQ;gBAC/BW,mBAAmB;gBACnBC,WAAW;oBACT,CAAC5B,kBAAkBgB,QAAQ,CAAC,EAAE;wBAC5Bc,aAAa9B,kBAAkB6B,YAAY;oBAC7C;gBACF;YACF;YACA;QACF;QACA,IAAI7B,kBAAkBgB,QAAQ,EAAE;YAC9BhC,KAAKwC,IAAI,CAAC;gBACRC,aAAazB,mBAAmBgB;gBAChCU,KAAK1B,mBAAmBgB;gBACxBW,mBAAmB;gBACnBC,WAAW,CAAC;YACd;QACF;IACF,GAAG,EAAE;IAEL,OACEtB,wBACE,KAAClB,cAAc2C,QAAQ;QAACC,OAAOT;kBAC7B,cAAA,KAACU;YACCC,WAAU;YACVC,KAAK/B;YACLD,KAAKd,QAAQc,GAAG;sBAEhB,cAAA,MAAC8B;gBAAIC,WAAU;;kCACb,KAACpD;wBACCqB,KAAKd,QAAQc,GAAG;wBAChBG,QAAQA;wBACR6B,KAAK9B;wBACL6B,WAAU;wBACVE,OAAO;4BACLC,SAAS;wBACX;;oBAEDpC,4BACC;kCACE,cAAA,KAACN;4BACCW,QAAQA;4BACRH,KAAKd,QAAQc,GAAG;;;;;;;AASlC,EAAE;AAEF,eAAeN,cAAc"}

package/dist/src/fields/TiptapEditor/features/BlockEditor/components/OneLiner.d.ts

@@ -0,0 +1,4 @@
+import { Node } from "@tiptap/core";
+declare const OneLiner: Node<any, any>;
+export default OneLiner;
+//# sourceMappingURL=OneLiner.d.ts.map

package/dist/src/fields/TiptapEditor/features/BlockEditor/components/OneLiner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OneLiner.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/features/BlockEditor/components/OneLiner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,QAAA,MAAM,QAAQ,gBAIZ,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/dist/src/fields/TiptapEditor/features/BlockEditor/components/OneLiner.js

@@ -0,0 +1,9 @@
+import { Node } from "@tiptap/core";
+const OneLiner = Node.create({
+    name: "oneLiner",
+    topNode: true,
+    content: "block"
+});
+export default OneLiner;
+
+//# sourceMappingURL=OneLiner.js.map

package/dist/src/fields/TiptapEditor/features/BlockEditor/components/OneLiner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/BlockEditor/components/OneLiner.tsx"],"sourcesContent":["import { Node } from \"@tiptap/core\";\n\nconst OneLiner = Node.create({\n    name: \"oneLiner\",\n    topNode: true,\n    content: \"block\",\n});\n\nexport default OneLiner;"],"names":["Node","OneLiner","create","name","topNode","content"],"mappings":"AAAA,SAASA,IAAI,QAAQ,eAAe;AAEpC,MAAMC,WAAWD,KAAKE,MAAM,CAAC;IACzBC,MAAM;IACNC,SAAS;IACTC,SAAS;AACb;AAEA,eAAeJ,SAAS"}

package/dist/src/fields/TiptapEditor/features/menus/TextMenu/AITextMenu.d.ts

@@ -0,0 +1,7 @@
+import { Editor } from "@tiptap/react";
+export type TextMenuProps = {
+    editor: Editor;
+    dir: "rtl" | "ltr" | "auto";
+};
+export declare const AITextMenu: ({ editor, dir }: TextMenuProps) => import("react").JSX.Element;
+//# sourceMappingURL=AITextMenu.d.ts.map

package/dist/src/fields/TiptapEditor/features/menus/TextMenu/AITextMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AITextMenu.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/features/menus/TextMenu/AITextMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,MAAM,EAAE,MAAM,eAAe,CAAC;AAkBnD,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,UAAU,oBAAqB,aAAa,gCA2CxD,CAAC"}

package/dist/src/fields/TiptapEditor/features/menus/TextMenu/AITextMenu.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BubbleMenu } from "@tiptap/react";
+import { Sparkles } from "lucide-react";
+import { useState } from "react";
+import { AIEditorPanel } from "../../panels/AIEditorPanel/AIEditorPanel.js";
+import { Icon } from "../../ui/Icon.js";
+import { Toolbar } from "../../ui/Toolbar.js";
+// import { FontFamilyPicker } from "./components/FontFamilyPicker.js";
+import i18next from "i18next";
+import { useTextmenuCommands } from "./hooks/useTextmenuCommands.js";
+import { useTextmenuContentTypes } from "./hooks/useTextmenuContentTypes.js";
+import { useTextmenuStates } from "./hooks/useTextmenuStates.js";
+export const AITextMenu = ({ editor, dir })=>{
+    const commands = useTextmenuCommands(editor);
+    const states = useTextmenuStates(editor);
+    const blockOptions = useTextmenuContentTypes(editor);
+    const [openAi, setOpenAi] = useState(false);
+    return /*#__PURE__*/ _jsx(BubbleMenu, {
+        tippyOptions: {
+            placement: "auto",
+            popperOptions: {
+                placement: "auto"
+            },
+            onHide: ()=>{
+                setOpenAi(false);
+            }
+        },
+        editor: editor,
+        pluginKey: "textMenu",
+        shouldShow: states.shouldShow,
+        updateDelay: 100,
+        children: openAi ? /*#__PURE__*/ _jsx(AIEditorPanel, {
+            editor: editor,
+            onOpenChange: (value)=>{
+                setOpenAi(value);
+            }
+        }) : /*#__PURE__*/ _jsx(Toolbar.Wrapper, {
+            children: /*#__PURE__*/ _jsxs(Toolbar.Button, {
+                className: "text-purple-500 hover:text-purple-600 active:text-purple-600 dark:text-purple-400 dark:hover:text-purple-300 dark:active:text-purple-400",
+                activeClassname: "text-purple-600 hover:text-purple-600 dark:text-purple-400 dark:hover:text-purple-200",
+                onClick: ()=>setOpenAi(true),
+                children: [
+                    /*#__PURE__*/ _jsx(Icon, {
+                        icon: Sparkles,
+                        className: "mr-1"
+                    }),
+                    i18next.t("aiTools") || "AI Tools"
+                ]
+            })
+        })
+    });
+};
+
+//# sourceMappingURL=AITextMenu.js.map

package/dist/src/fields/TiptapEditor/features/menus/TextMenu/AITextMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/menus/TextMenu/AITextMenu.tsx"],"sourcesContent":["import { BubbleMenu, Editor } from \"@tiptap/react\";\nimport {\n  Sparkles\n} from \"lucide-react\";\nimport { memo, useState } from \"react\";\nimport { AIEditorPanel } from \"../../panels/AIEditorPanel/AIEditorPanel.js\";\nimport { ColorPicker } from \"../../panels/index.js\";\nimport { Icon } from \"../../ui/Icon.js\";\nimport { Toolbar } from \"../../ui/Toolbar.js\";\nimport { ContentTypePicker } from \"./components/ContentTypePicker.js\";\n// import { FontFamilyPicker } from \"./components/FontFamilyPicker.js\";\nimport i18next from \"i18next\";\nimport { FontSizePicker } from \"./components/FontSizePicker.js\";\nimport { useTextmenuCommands } from \"./hooks/useTextmenuCommands.js\";\nimport { useTextmenuContentTypes } from \"./hooks/useTextmenuContentTypes.js\";\nimport { useTextmenuStates } from \"./hooks/useTextmenuStates.js\";\n\n\nexport type TextMenuProps = {\n  editor: Editor;\n  dir: \"rtl\" | \"ltr\" | \"auto\";\n};\n\nexport const AITextMenu = ({ editor, dir }: TextMenuProps) => {\n  const commands = useTextmenuCommands(editor);\n  const states = useTextmenuStates(editor);\n  const blockOptions = useTextmenuContentTypes(editor);\n  const [openAi, setOpenAi] = useState(false);\n\n  return (\n    <BubbleMenu\n      tippyOptions={{\n        placement: \"auto\",\n        popperOptions: {\n          placement: \"auto\",\n        },\n        onHide: () => {\n          setOpenAi(false);\n        },\n      }}\n      editor={editor}\n      pluginKey=\"textMenu\"\n      shouldShow={states.shouldShow}\n      updateDelay={100}\n    >\n      {openAi ? (\n        <AIEditorPanel\n          editor={editor}\n          onOpenChange={(value) => {\n            setOpenAi(value);\n          }}\n        />\n      ) : (\n        <Toolbar.Wrapper>\n          <Toolbar.Button\n            className=\"text-purple-500 hover:text-purple-600 active:text-purple-600 dark:text-purple-400 dark:hover:text-purple-300 dark:active:text-purple-400\"\n            activeClassname=\"text-purple-600 hover:text-purple-600 dark:text-purple-400 dark:hover:text-purple-200\"\n            onClick={() => setOpenAi(true)}\n          >\n            <Icon icon={Sparkles} className=\"mr-1\" />\n            {i18next.t(\"aiTools\") || \"AI Tools\"}\n          </Toolbar.Button>\n        </Toolbar.Wrapper>\n      )}\n    </BubbleMenu>\n  );\n};\n"],"names":["BubbleMenu","Sparkles","useState","AIEditorPanel","Icon","Toolbar","i18next","useTextmenuCommands","useTextmenuContentTypes","useTextmenuStates","AITextMenu","editor","dir","commands","states","blockOptions","openAi","setOpenAi","tippyOptions","placement","popperOptions","onHide","pluginKey","shouldShow","updateDelay","onOpenChange","value","Wrapper","Button","className","activeClassname","onClick","icon","t"],"mappings":";AAAA,SAASA,UAAU,QAAgB,gBAAgB;AACnD,SACEC,QAAQ,QACH,eAAe;AACtB,SAAeC,QAAQ,QAAQ,QAAQ;AACvC,SAASC,aAAa,QAAQ,8CAA8C;AAE5E,SAASC,IAAI,QAAQ,mBAAmB;AACxC,SAASC,OAAO,QAAQ,sBAAsB;AAE9C,uEAAuE;AACvE,OAAOC,aAAa,UAAU;AAE9B,SAASC,mBAAmB,QAAQ,iCAAiC;AACrE,SAASC,uBAAuB,QAAQ,qCAAqC;AAC7E,SAASC,iBAAiB,QAAQ,+BAA+B;AAQjE,OAAO,MAAMC,aAAa,CAAC,EAAEC,MAAM,EAAEC,GAAG,EAAiB;IACvD,MAAMC,WAAWN,oBAAoBI;IACrC,MAAMG,SAASL,kBAAkBE;IACjC,MAAMI,eAAeP,wBAAwBG;IAC7C,MAAM,CAACK,QAAQC,UAAU,GAAGf,SAAS;IAErC,qBACE,KAACF;QACCkB,cAAc;YACZC,WAAW;YACXC,eAAe;gBACbD,WAAW;YACb;YACAE,QAAQ;gBACNJ,UAAU;YACZ;QACF;QACAN,QAAQA;QACRW,WAAU;QACVC,YAAYT,OAAOS,UAAU;QAC7BC,aAAa;kBAEZR,uBACC,KAACb;YACCQ,QAAQA;YACRc,cAAc,CAACC;gBACbT,UAAUS;YACZ;2BAGF,KAACrB,QAAQsB,OAAO;sBACd,cAAA,MAACtB,QAAQuB,MAAM;gBACbC,WAAU;gBACVC,iBAAgB;gBAChBC,SAAS,IAAMd,UAAU;;kCAEzB,KAACb;wBAAK4B,MAAM/B;wBAAU4B,WAAU;;oBAC/BvB,QAAQ2B,CAAC,CAAC,cAAc;;;;;AAMrC,EAAE"}

package/dist/src/fields/TiptapEditor/features/menus/TextMenu/components/ai-completion-command.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Check, TextQuote, TrashIcon } from "lucide-react";
-import { Toolbar } from "../../../ui/Toolbar.js";
 import { checkJsonCompletion, formatCompletion } from "../../../panels/AIEditorPanel/utils.js";
+import { Toolbar } from "../../../ui/Toolbar.js";
 const AICompletionCommands = ({ completion, onDiscard, editor })=>{
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [

package/dist/src/fields/TiptapEditor/features/menus/TextMenu/components/ai-completion-command.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../src/fields/TiptapEditor/features/menus/TextMenu/components/ai-completion-command.tsx"],"sourcesContent":["import { Editor } from \"@tiptap/react\";\nimport { Check, TextQuote, TrashIcon } from \"lucide-react\";\nimport { Toolbar } from \"../../../ui/Toolbar.js\";\nimport { checkJsonCompletion, formatCompletion } from \"../../../panels/AIEditorPanel/utils.js\";\n\nconst AICompletionCommands = ({\n  completion,\n  onDiscard,\n  editor,\n}: {\n  editor: Editor;\n  completion: string;\n  onDiscard: () => void;\n}) => {\n  return (\n    <>\n      <Toolbar.Button\n        className=\"gap-2 px-4 w-full flex justify-start \"\n        value=\"replace\"\n        onClick={() => {\n          const selection = editor.view.state.selection;\n\n          editor\n            .chain()\n            .focus()\n            .insertContentAt(\n              {\n                from: selection.from,\n                to: selection.to,\n              },\n              checkJsonCompletion(completion) ? formatCompletion(completion) : completion\n            )\n            .run();\n        }}\n      >\n        <Check className=\"h-4 w-4 text-muted-foreground\" />\n        Replace selection\n      </Toolbar.Button>\n      <Toolbar.Button\n        className=\"gap-2 px-4 w-full flex justify-start\"\n        value=\"insert\"\n        onClick={() => {\n          const selection = editor.view.state.selection;\n          editor\n            .chain()\n            .focus()\n            .insertContentAt(selection.to + 1,\n              checkJsonCompletion(completion) ? formatCompletion(completion) : completion\n            )\n            .run();\n        }}\n      >\n        <TextQuote className=\"h-4 w-4 text-muted-foreground\" />\n        Insert below\n      </Toolbar.Button>\n      <Toolbar.Divider horizontal />\n\n      <Toolbar.Button\n        onClick={onDiscard}\n        value=\"thrash\"\n        className=\"w-full text-red-500 bg-red-500 dark:text-red-500 hover:bg-red-500 dark:hover:text-red-500 dark:hover:bg-red-500 bg-opacity-10 hover:bg-opacity-20 dark:hover:bg-opacity-20\"\n      >\n        <TrashIcon className=\"h-4 w-4 text-muted-foreground\" />\n        Discard\n      </Toolbar.Button>\n    </>\n  );\n};\n\nexport default AICompletionCommands;\n"],"names":["Check","TextQuote","TrashIcon","Toolbar","checkJsonCompletion","formatCompletion","AICompletionCommands","completion","onDiscard","editor","Button","className","value","onClick","selection","view","state","chain","focus","insertContentAt","from","to","run","Divider","horizontal"],"mappings":";AACA,SAASA,KAAK,EAAEC,SAAS,EAAEC,SAAS,QAAQ,eAAe;AAC3D,SAASC,OAAO,QAAQ,yBAAyB;AACjD,SAASC,mBAAmB,EAAEC,gBAAgB,QAAQ,yCAAyC;AAE/F,MAAMC,uBAAuB,CAAC,EAC5BC,UAAU,EACVC,SAAS,EACTC,MAAM,EAKP;IACC,qBACE;;0BACE,MAACN,QAAQO,MAAM;gBACbC,WAAU;gBACVC,OAAM;gBACNC,SAAS;oBACP,MAAMC,YAAYL,OAAOM,IAAI,CAACC,KAAK,CAACF,SAAS;oBAE7CL,OACGQ,KAAK,GACLC,KAAK,GACLC,eAAe,CACd;wBACEC,MAAMN,UAAUM,IAAI;wBACpBC,IAAIP,UAAUO,EAAE;oBAClB,GACAjB,oBAAoBG,cAAcF,iBAAiBE,cAAcA,YAElEe,GAAG;gBACR;;kCAEA,KAACtB;wBAAMW,WAAU;;oBAAkC;;;0BAGrD,MAACR,QAAQO,MAAM;gBACbC,WAAU;gBACVC,OAAM;gBACNC,SAAS;oBACP,MAAMC,YAAYL,OAAOM,IAAI,CAACC,KAAK,CAACF,SAAS;oBAC7CL,OACGQ,KAAK,GACLC,KAAK,GACLC,eAAe,CAACL,UAAUO,EAAE,GAAG,GAC9BjB,oBAAoBG,cAAcF,iBAAiBE,cAAcA,YAElEe,GAAG;gBACR;;kCAEA,KAACrB;wBAAUU,WAAU;;oBAAkC;;;0BAGzD,KAACR,QAAQoB,OAAO;gBAACC,UAAU;;0BAE3B,MAACrB,QAAQO,MAAM;gBACbG,SAASL;gBACTI,OAAM;gBACND,WAAU;;kCAEV,KAACT;wBAAUS,WAAU;;oBAAkC;;;;;AAK/D;AAEA,eAAeL,qBAAqB"}
+{"version":3,"sources":["../../../../../../../../src/fields/TiptapEditor/features/menus/TextMenu/components/ai-completion-command.tsx"],"sourcesContent":["import { Editor } from \"@tiptap/react\";\nimport { Check, TextQuote, TrashIcon } from \"lucide-react\";\nimport { checkJsonCompletion, formatCompletion } from \"../../../panels/AIEditorPanel/utils.js\";\nimport { Toolbar } from \"../../../ui/Toolbar.js\";\n\nconst AICompletionCommands = ({\n  completion,\n  onDiscard,\n  editor,\n}: {\n  editor: Editor;\n  completion: string;\n  onDiscard: () => void;\n}) => {\n  return (\n    <>\n      <Toolbar.Button\n        className=\"gap-2 px-4 w-full flex justify-start \"\n        value=\"replace\"\n        onClick={() => {\n          const selection = editor.view.state.selection;\n\n          editor\n            .chain()\n            .focus()\n            .insertContentAt(\n              {\n                from: selection.from,\n                to: selection.to,\n              },\n              checkJsonCompletion(completion) ? formatCompletion(completion) : completion\n            )\n            .run();\n        }}\n      >\n        <Check className=\"h-4 w-4 text-muted-foreground\" />\n        Replace selection\n      </Toolbar.Button>\n      <Toolbar.Button\n        className=\"gap-2 px-4 w-full flex justify-start\"\n        value=\"insert\"\n        onClick={() => {\n          const selection = editor.view.state.selection;\n          editor\n            .chain()\n            .focus()\n            .insertContentAt(selection.to + 1,\n              checkJsonCompletion(completion) ? formatCompletion(completion) : completion\n            )\n            .run();\n        }}\n      >\n        <TextQuote className=\"h-4 w-4 text-muted-foreground\" />\n        Insert below\n      </Toolbar.Button>\n      <Toolbar.Divider horizontal />\n\n      <Toolbar.Button\n        onClick={onDiscard}\n        value=\"thrash\"\n        className=\"w-full text-red-500 bg-red-500 dark:text-red-500 hover:bg-red-500 dark:hover:text-red-500 dark:hover:bg-red-500 bg-opacity-10 hover:bg-opacity-20 dark:hover:bg-opacity-20\"\n      >\n        <TrashIcon className=\"h-4 w-4 text-muted-foreground\" />\n        Discard\n      </Toolbar.Button>\n    </>\n  );\n};\n\nexport default AICompletionCommands;\n"],"names":["Check","TextQuote","TrashIcon","checkJsonCompletion","formatCompletion","Toolbar","AICompletionCommands","completion","onDiscard","editor","Button","className","value","onClick","selection","view","state","chain","focus","insertContentAt","from","to","run","Divider","horizontal"],"mappings":";AACA,SAASA,KAAK,EAAEC,SAAS,EAAEC,SAAS,QAAQ,eAAe;AAC3D,SAASC,mBAAmB,EAAEC,gBAAgB,QAAQ,yCAAyC;AAC/F,SAASC,OAAO,QAAQ,yBAAyB;AAEjD,MAAMC,uBAAuB,CAAC,EAC5BC,UAAU,EACVC,SAAS,EACTC,MAAM,EAKP;IACC,qBACE;;0BACE,MAACJ,QAAQK,MAAM;gBACbC,WAAU;gBACVC,OAAM;gBACNC,SAAS;oBACP,MAAMC,YAAYL,OAAOM,IAAI,CAACC,KAAK,CAACF,SAAS;oBAE7CL,OACGQ,KAAK,GACLC,KAAK,GACLC,eAAe,CACd;wBACEC,MAAMN,UAAUM,IAAI;wBACpBC,IAAIP,UAAUO,EAAE;oBAClB,GACAlB,oBAAoBI,cAAcH,iBAAiBG,cAAcA,YAElEe,GAAG;gBACR;;kCAEA,KAACtB;wBAAMW,WAAU;;oBAAkC;;;0BAGrD,MAACN,QAAQK,MAAM;gBACbC,WAAU;gBACVC,OAAM;gBACNC,SAAS;oBACP,MAAMC,YAAYL,OAAOM,IAAI,CAACC,KAAK,CAACF,SAAS;oBAC7CL,OACGQ,KAAK,GACLC,KAAK,GACLC,eAAe,CAACL,UAAUO,EAAE,GAAG,GAC9BlB,oBAAoBI,cAAcH,iBAAiBG,cAAcA,YAElEe,GAAG;gBACR;;kCAEA,KAACrB;wBAAUU,WAAU;;oBAAkC;;;0BAGzD,KAACN,QAAQkB,OAAO;gBAACC,UAAU;;0BAE3B,MAACnB,QAAQK,MAAM;gBACbG,SAASL;gBACTI,OAAM;gBACND,WAAU;;kCAEV,KAACT;wBAAUS,WAAU;;oBAAkC;;;;;AAK/D;AAEA,eAAeL,qBAAqB"}

package/dist/src/fields/TiptapEditor/features/menus/TextMenu/components/ai-selector-commands.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ai-selector-commands.d.ts","sourceRoot":"","sources":["../../../../../../../../src/fields/TiptapEditor/features/menus/TextMenu/components/ai-selector-commands.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAwDvC,UAAU,uBAAuB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CACR,KAAK,EAAE,MAAM,EACb,OAAO,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,IAAI,CAAA;KAAE,KAC7D,IAAI,CAAC;CACX;AAED,QAAA,MAAM,kBAAkB,oCAIrB,uBAAuB,gCA8FzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"ai-selector-commands.d.ts","sourceRoot":"","sources":["../../../../../../../../src/fields/TiptapEditor/features/menus/TextMenu/components/ai-selector-commands.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAyDvC,UAAU,uBAAuB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CACR,KAAK,EAAE,MAAM,EACb,OAAO,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,IAAI,CAAA;KAAE,KAC7D,IAAI,CAAC;CACX;AAED,QAAA,MAAM,kBAAkB,oCAIrB,uBAAuB,gCA8FzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/src/fields/TiptapEditor/features/menus/TextMenu/components/ai-selector-commands.js

@@ -9,6 +9,7 @@ import { Icon } from "../../../ui/Icon.js";
 import { Surface } from "../../../ui/Surface.js";
 import { Toolbar } from "../../../ui/Toolbar.js";
 import i18next from "i18next";
+import { formatCompletion } from "../../../panels/AIEditorPanel/utils.js";
 const options = [
     // {
     //   value: 'translate',
@@ -92,7 +93,7 @@ const AISelectorCommands = ({ messages, onSelect, editor })=>{
                                             onSelect("", {
                                                 option: "translate",
                                                 language: lang.value,
-                                                selection: editorSelection
+                                                selection: messages ? formatCompletion(messages) : editorSelection
                                             });
                                         },
                                         className: "gap-2 px-4 w-full flex justify-start ",
@@ -116,7 +117,7 @@ const AISelectorCommands = ({ messages, onSelect, editor })=>{
                         onSelect(content, {
                             option: option.value,
                             language: editor?.storage?.aiCommand?.language ?? code ?? "en",
-                            selection: editorSelection
+                            selection: messages ? formatCompletion(messages) : editorSelection
                         });
                     },
                     className: " gap-2 px-4 w-full flex justify-start",
@@ -143,7 +144,7 @@ const AISelectorCommands = ({ messages, onSelect, editor })=>{
                     onSelect(text, {
                         option: "continue",
                         language: editor?.storage?.aiCommand?.language ?? code ?? "en",
-                        selection: editorSelection
+                        selection: messages ? formatCompletion(messages) : editorSelection
                     });
                 },
                 value: "continue",

package/dist/src/fields/TiptapEditor/features/menus/TextMenu/components/ai-selector-commands.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../src/fields/TiptapEditor/features/menus/TextMenu/components/ai-selector-commands.tsx"],"sourcesContent":["import { useLocale } from \"@payloadcms/ui/providers/Locale\";\nimport * as Popover from \"@radix-ui/react-popover\";\nimport { Editor } from \"@tiptap/react\";\nimport {\n  ArrowDownWideNarrow,\n  CheckCheck,\n  ChevronDown,\n  Languages,\n  RefreshCcwDot,\n  StepForward,\n  WrapText,\n} from \"lucide-react\";\nimport { languages } from \"../../../../lib/constants.js\";\nimport { getPrevText } from \"../../../../lib/utils/index.js\";\nimport { DropdownCategoryTitle } from \"../../../ui/Dropdown/Dropdown.js\";\nimport { Icon } from \"../../../ui/Icon.js\";\nimport { Surface } from \"../../../ui/Surface.js\";\nimport { Toolbar } from \"../../../ui/Toolbar.js\";\nimport i18next from \"i18next\";\nconst options = [\n  // {\n  //   value: 'translate',\n  //   label: 'Translate text',\n  //   icon: WrapText,\n  // },\n  {\n    value: \"summarize\",\n    label: \"Summarize text\",\n    icon: WrapText,\n  },\n  {\n    value: \"rewrite\",\n    label: \"Rewrite into Axios\",\n    icon: WrapText,\n  },\n  {\n    value: \"improve\",\n    label: \"Improve writing\",\n    icon: RefreshCcwDot,\n  },\n\n  {\n    value: \"fix\",\n    label: \"Fix grammar\",\n    icon: CheckCheck,\n  },\n  {\n    value: \"shorter\",\n    label: \"Make shorter\",\n    icon: ArrowDownWideNarrow,\n  },\n  {\n    value: \"longer\",\n    label: \"Make longer\",\n    icon: WrapText,\n  },\n];\n\ninterface AISelectorCommandsProps {\n  editor: Editor;\n  messages?: string;\n  onSelect: (\n    value: string,\n    options: { option: string; language?: string, selection?: JSON }\n  ) => void;\n}\n\nconst AISelectorCommands = ({\n  messages,\n  onSelect,\n  editor,\n}: AISelectorCommandsProps) => {\n  const { code } = useLocale();\n  return (\n    <>\n      <DropdownCategoryTitle>Edit or review selection</DropdownCategoryTitle>\n      <Popover.Root>\n        <Popover.Trigger asChild>\n          <Toolbar.Button\n            className=\"gap-2 px-4 w-full flex justify-start \"\n            type=\"button\"\n            // active={!!states.currentHighlight}\n            tooltip={i18next.t(\"highlightText\") || \"Highlight text\"}\n          >\n            <Icon icon={Languages} className=\"h-4 w-4 text-blue-500\" />\n            Translate text\n            <Icon icon={ChevronDown} className=\"h-4 w-4 text-blue-500\" />\n          </Toolbar.Button>\n        </Popover.Trigger>\n        <Popover.Content side=\"right\" align=\"start\" sideOffset={8} asChild>\n          <Surface className=\"flex flex-col min-w-[15rem] p-2 max-h-[20rem] overflow-auto\">\n            <DropdownCategoryTitle>Languages</DropdownCategoryTitle>\n\n            {languages.map((lang) => (\n              <Toolbar.Button\n                onClick={() => {\n                  const editorSelection = editor.state.selection.content().content.toJSON()\n\n                  onSelect(\"\", {\n                    option: \"translate\",\n                    language: lang.value,\n                    selection: editorSelection\n                  });\n                }}\n                className=\"gap-2 px-4 w-full flex justify-start \"\n                key={lang.value}\n              >\n                {lang.label}\n              </Toolbar.Button>\n            ))}\n          </Surface>\n        </Popover.Content>\n      </Popover.Root>\n\n      {options.map((option) => (\n        <Toolbar.Button\n          // onSelect={(value) => {\n          //   const slice = editor.state.selection.content()\n          //   const text = editor?.storage?.markdown?.serializer.serialize(slice.content)\n          //   onSelect(text, option.value)\n          // }}\n          onClick={() => {\n            const { from, to, empty } = editor.state.selection;\n            const editorSelection = editor.state.selection.content().content.toJSON()\n\n            const content = messages\n              ? messages ?? \"\"\n              : editor.state.doc.textBetween(from, to, \" \");\n            onSelect(content, {\n              option: option.value,\n              language: editor?.storage?.aiCommand?.language ?? code ?? \"en\",\n              selection: editorSelection\n            });\n          }}\n          className=\" gap-2 px-4 w-full flex justify-start\"\n          key={option.value}\n          value={option.value}\n        >\n          <option.icon className=\"h-4 w-4 text-blue-500\" />\n          {option.label}\n        </Toolbar.Button>\n      ))}\n      <Toolbar.Divider horizontal />\n      <DropdownCategoryTitle>Use AI to do more</DropdownCategoryTitle>\n      <Toolbar.Button\n        onClick={() => {\n          const editorSelection = editor.state.selection.content().content.toJSON()\n\n          const text = messages\n            ? messages\n            : getPrevText(editor, { chars: 5000 });\n          onSelect(text, {\n            option: \"continue\",\n            language: editor?.storage?.aiCommand?.language ?? code ?? \"en\",\n            selection: editorSelection\n          });\n        }}\n        value=\"continue\"\n        className=\"gap-2 px-4 w-full flex justify-start\"\n      >\n        <StepForward className=\"h-4 w-4 text-blue-500\" />\n        Continue writing\n      </Toolbar.Button>\n    </>\n  );\n};\n\nexport default AISelectorCommands;\n"],"names":["useLocale","Popover","ArrowDownWideNarrow","CheckCheck","ChevronDown","Languages","RefreshCcwDot","StepForward","WrapText","languages","getPrevText","DropdownCategoryTitle","Icon","Surface","Toolbar","i18next","options","value","label","icon","AISelectorCommands","messages","onSelect","editor","code","Root","Trigger","asChild","Button","className","type","tooltip","t","Content","side","align","sideOffset","map","lang","onClick","editorSelection","state","selection","content","toJSON","option","language","from","to","empty","doc","textBetween","storage","aiCommand","Divider","horizontal","text","chars"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../../../src/fields/TiptapEditor/features/menus/TextMenu/components/ai-selector-commands.tsx"],"sourcesContent":["import { useLocale } from \"@payloadcms/ui/providers/Locale\";\nimport * as Popover from \"@radix-ui/react-popover\";\nimport { Editor } from \"@tiptap/react\";\nimport {\n  ArrowDownWideNarrow,\n  CheckCheck,\n  ChevronDown,\n  Languages,\n  RefreshCcwDot,\n  StepForward,\n  WrapText,\n} from \"lucide-react\";\nimport { languages } from \"../../../../lib/constants.js\";\nimport { getPrevText } from \"../../../../lib/utils/index.js\";\nimport { DropdownCategoryTitle } from \"../../../ui/Dropdown/Dropdown.js\";\nimport { Icon } from \"../../../ui/Icon.js\";\nimport { Surface } from \"../../../ui/Surface.js\";\nimport { Toolbar } from \"../../../ui/Toolbar.js\";\nimport i18next from \"i18next\";\nimport { formatCompletion } from \"../../../panels/AIEditorPanel/utils.js\";\nconst options = [\n  // {\n  //   value: 'translate',\n  //   label: 'Translate text',\n  //   icon: WrapText,\n  // },\n  {\n    value: \"summarize\",\n    label: \"Summarize text\",\n    icon: WrapText,\n  },\n  {\n    value: \"rewrite\",\n    label: \"Rewrite into Axios\",\n    icon: WrapText,\n  },\n  {\n    value: \"improve\",\n    label: \"Improve writing\",\n    icon: RefreshCcwDot,\n  },\n\n  {\n    value: \"fix\",\n    label: \"Fix grammar\",\n    icon: CheckCheck,\n  },\n  {\n    value: \"shorter\",\n    label: \"Make shorter\",\n    icon: ArrowDownWideNarrow,\n  },\n  {\n    value: \"longer\",\n    label: \"Make longer\",\n    icon: WrapText,\n  },\n];\n\ninterface AISelectorCommandsProps {\n  editor: Editor;\n  messages?: string;\n  onSelect: (\n    value: string,\n    options: { option: string; language?: string, selection?: JSON }\n  ) => void;\n}\n\nconst AISelectorCommands = ({\n  messages,\n  onSelect,\n  editor,\n}: AISelectorCommandsProps) => {\n  const { code } = useLocale();\n  return (\n    <>\n      <DropdownCategoryTitle>Edit or review selection</DropdownCategoryTitle>\n      <Popover.Root>\n        <Popover.Trigger asChild>\n          <Toolbar.Button\n            className=\"gap-2 px-4 w-full flex justify-start \"\n            type=\"button\"\n            // active={!!states.currentHighlight}\n            tooltip={i18next.t(\"highlightText\") || \"Highlight text\"}\n          >\n            <Icon icon={Languages} className=\"h-4 w-4 text-blue-500\" />\n            Translate text\n            <Icon icon={ChevronDown} className=\"h-4 w-4 text-blue-500\" />\n          </Toolbar.Button>\n        </Popover.Trigger>\n        <Popover.Content side=\"right\" align=\"start\" sideOffset={8} asChild>\n          <Surface className=\"flex flex-col min-w-[15rem] p-2 max-h-[20rem] overflow-auto\">\n            <DropdownCategoryTitle>Languages</DropdownCategoryTitle>\n\n            {languages.map((lang) => (\n              <Toolbar.Button\n                onClick={() => {\n                  const editorSelection = editor.state.selection.content().content.toJSON()\n\n                  onSelect(\"\", {\n                    option: \"translate\",\n                    language: lang.value,\n                    selection: messages ? formatCompletion(messages) : editorSelection\n                  });\n                }}\n                className=\"gap-2 px-4 w-full flex justify-start \"\n                key={lang.value}\n              >\n                {lang.label}\n              </Toolbar.Button>\n            ))}\n          </Surface>\n        </Popover.Content>\n      </Popover.Root>\n\n      {options.map((option) => (\n        <Toolbar.Button\n          // onSelect={(value) => {\n          //   const slice = editor.state.selection.content()\n          //   const text = editor?.storage?.markdown?.serializer.serialize(slice.content)\n          //   onSelect(text, option.value)\n          // }}\n          onClick={() => {\n            const { from, to, empty } = editor.state.selection;\n            const editorSelection = editor.state.selection.content().content.toJSON()\n\n            const content = messages\n              ? messages ?? \"\"\n              : editor.state.doc.textBetween(from, to, \" \");\n            onSelect(content, {\n              option: option.value,\n              language: editor?.storage?.aiCommand?.language ?? code ?? \"en\",\n              selection: messages ? formatCompletion(messages) : editorSelection\n            });\n          }}\n          className=\" gap-2 px-4 w-full flex justify-start\"\n          key={option.value}\n          value={option.value}\n        >\n          <option.icon className=\"h-4 w-4 text-blue-500\" />\n          {option.label}\n        </Toolbar.Button>\n      ))}\n      <Toolbar.Divider horizontal />\n      <DropdownCategoryTitle>Use AI to do more</DropdownCategoryTitle>\n      <Toolbar.Button\n        onClick={() => {\n          const editorSelection = editor.state.selection.content().content.toJSON()\n\n          const text = messages\n            ? messages\n            : getPrevText(editor, { chars: 5000 });\n          onSelect(text, {\n            option: \"continue\",\n            language: editor?.storage?.aiCommand?.language ?? code ?? \"en\",\n            selection: messages ? formatCompletion(messages) : editorSelection\n          });\n        }}\n        value=\"continue\"\n        className=\"gap-2 px-4 w-full flex justify-start\"\n      >\n        <StepForward className=\"h-4 w-4 text-blue-500\" />\n        Continue writing\n      </Toolbar.Button>\n    </>\n  );\n};\n\nexport default AISelectorCommands;\n"],"names":["useLocale","Popover","ArrowDownWideNarrow","CheckCheck","ChevronDown","Languages","RefreshCcwDot","StepForward","WrapText","languages","getPrevText","DropdownCategoryTitle","Icon","Surface","Toolbar","i18next","formatCompletion","options","value","label","icon","AISelectorCommands","messages","onSelect","editor","code","Root","Trigger","asChild","Button","className","type","tooltip","t","Content","side","align","sideOffset","map","lang","onClick","editorSelection","state","selection","content","toJSON","option","language","from","to","empty","doc","textBetween","storage","aiCommand","Divider","horizontal","text","chars"],"mappings":"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"}

package/dist/src/fields/TiptapEditor/features/panels/AICommandPanel/AICommandPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AICommandPanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/features/panels/AICommandPanel/AICommandPanel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAON,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEvC,OAAO,EAEL,KAAK,EACN,MAAM,uDAAuD,CAAC;AAW/D,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,KAAK,EAAE,KAAK,EAAE,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,cAAc,qFAuU1B,CAAC"}
+{"version":3,"file":"AICommandPanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/features/panels/AICommandPanel/AICommandPanel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAON,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAGvC,OAAO,EAEL,KAAK,EACN,MAAM,uDAAuD,CAAC;AAY/D,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,KAAK,EAAE,KAAK,EAAE,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,cAAc,qFAgU1B,CAAC"}

package/dist/src/fields/TiptapEditor/features/panels/AICommandPanel/AICommandPanel.js

@@ -6,15 +6,17 @@ import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef,
 import Markdown from "react-markdown";
 import TextareaAutosize from "react-textarea-autosize";
 import { useLocale } from "@payloadcms/ui/providers/Locale";
+import i18next from "i18next";
+import { extractMarkdown } from "../../../lib/extract.js";
 import { getPrevText } from "../../../lib/utils/index.js";
+import AISelectorCommands from "../../menus/TextMenu/components/ai-selector-commands.js";
 import CrazySpinner from "../../ui/crazy-spinner.js";
 import { DropdownButton } from "../../ui/Dropdown/Dropdown.js";
 import { Icon } from "../../ui/Icon.js";
 import { ScrollArea } from "../../ui/scroll-area.js";
 import { Surface } from "../../ui/Surface.js";
 import { Toolbar } from "../../ui/Toolbar.js";
-import AISelectorCommands from "../../menus/TextMenu/components/ai-selector-commands.js";
-import i18next from "i18next";
+import { checkJsonCompletion, formatCompletion } from "../AIEditorPanel/utils.js";
 export const AICommandPanel = /*#__PURE__*/ forwardRef(({ editor, onOpenChange, userPrompt, items, ...restProps }, ref)=>{
     const [inputValue, setInputValue] = useState(userPrompt ?? "");
     const { code } = useLocale();
@@ -48,7 +50,7 @@ export const AICommandPanel = /*#__PURE__*/ forwardRef(({ editor, onOpenChange,
                     option: "zap",
                     command: inputValue,
                     language: code ?? "en",
-                    selection: editorSelection
+                    selection: formatCompletion(completion)
                 }
             }).then(()=>setInputValue(""));
         }
@@ -65,7 +67,8 @@ export const AICommandPanel = /*#__PURE__*/ forwardRef(({ editor, onOpenChange,
         }).then(()=>setInputValue(""));
     }, [
         code,
-        inputValue
+        inputValue,
+        completion
     ]);
     useEffect(()=>{
         if (userPrompt) setInputValue(userPrompt);
@@ -73,16 +76,9 @@ export const AICommandPanel = /*#__PURE__*/ forwardRef(({ editor, onOpenChange,
         userPrompt
     ]);
     useEffect(()=>{
-        editor.storage.aiCommand.completion = completion;
-    // if (!isLoading && completion) {
-    // const selection = editor.state.selection;
-    // editor
-    //   .chain()
-    //   .focus()
-    //   .insertContentAt(selection.to - 1, completion)
-    //   .insertContentAt(selection.to, " ")
-    //   .run();
-    // }
+        if (!isLoading && hasCompletion) {
+            editor.storage.aiCommand.completion = checkJsonCompletion(completion) ? formatCompletion(completion) : completion;
+        }
     }, [
         completion,
         isLoading
@@ -177,14 +173,16 @@ export const AICommandPanel = /*#__PURE__*/ forwardRef(({ editor, onOpenChange,
                 },
                 children: /*#__PURE__*/ _jsxs(_Fragment, {
                     children: [
-                        hasCompletion && /*#__PURE__*/ _jsx("div", {
+                        hasCompletion && !isLoading && /*#__PURE__*/ _jsx("div", {
                             className: "flex  w-full",
                             children: /*#__PURE__*/ _jsx(ScrollArea, {
                                 className: "h-72 prose p-2 px-4 prose-sm w-full max-w-none",
                                 dir: i18next.dir(),
                                 children: /*#__PURE__*/ _jsx(Markdown, {
-                                    className: "w-full",
-                                    children: completion
+                                    children: checkJsonCompletion(completion) ? extractMarkdown({
+                                        type: 'doc',
+                                        content: formatCompletion(completion)
+                                    }) : completion
                                 })
                             })
                         }),

package/dist/src/fields/TiptapEditor/features/panels/AICommandPanel/AICommandPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/panels/AICommandPanel/AICommandPanel.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCompletion } from \"ai/react\";\nimport { ArrowUpCircle, Sparkles } from \"lucide-react\";\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from \"react\";\nimport Markdown from \"react-markdown\";\nimport TextareaAutosize from \"react-textarea-autosize\";\n\nimport { useLocale } from \"@payloadcms/ui/providers/Locale\";\nimport { Editor } from \"@tiptap/react\";\n\nimport {\n  Command,\n  Group,\n} from \"src/fields/TiptapEditor/extensions/AICommand/types.js\";\nimport { getPrevText } from \"../../../lib/utils/index.js\";\nimport CrazySpinner from \"../../ui/crazy-spinner.js\";\nimport { DropdownButton } from \"../../ui/Dropdown/Dropdown.js\";\nimport { Icon } from \"../../ui/Icon.js\";\nimport { ScrollArea } from \"../../ui/scroll-area.js\";\nimport { Surface } from \"../../ui/Surface.js\";\nimport { Toolbar } from \"../../ui/Toolbar.js\";\nimport AISelectorCommands from \"../../menus/TextMenu/components/ai-selector-commands.js\";\nimport i18next from \"i18next\";\n\nexport type AICommandPanelProps = {\n  editor: Editor;\n  userPrompt?: string;\n  onOpenChange: (value: boolean) => void;\n  items: Group[];\n};\n\nexport const AICommandPanel = forwardRef(\n  (\n    {\n      editor,\n      onOpenChange,\n      userPrompt,\n      items,\n      ...restProps\n    }: AICommandPanelProps,\n    ref\n  ) => {\n    const [inputValue, setInputValue] = useState(userPrompt ?? \"\");\n    const { code } = useLocale();\n    const { view } = editor;\n    const scrollContainer = useRef<HTMLDivElement>(null);\n    const activeItem = useRef<HTMLButtonElement>(null);\n    const [selectedGroupIndex, setSelectedGroupIndex] = useState(0);\n    const [selectedCommandIndex, setSelectedCommandIndex] = useState(0);\n\n    const editorNode = view.dom as HTMLElement;\n    const boundigClient = editorNode.getBoundingClientRect();\n    const inputRef = useRef<HTMLTextAreaElement>(null);\n\n\n    const { completion, complete, isLoading } = useCompletion({\n      // id: \"novel\",\n      api: \"/api/generate\",\n      onResponse: (response) => {\n        if (response.status === 429) {\n          console.log(\"You have reached your request limit for the day.\");\n\n          return;\n        }\n      },\n\n      onError: (e) => {\n        console.log(\"ERROR\", e.message);\n      },\n    });\n\n    const hasCompletion = completion.length > 0;\n    const handleClick = useCallback(() => {\n      const editorSelection = editor.state.selection.content().content.toJSON()\n\n      if (completion) {\n        return complete(completion, {\n          body: { option: \"zap\", command: inputValue, language: code ?? \"en\", selection: editorSelection },\n        }).then(() => setInputValue(\"\"));\n      }\n      const text = getPrevText(editor, { chars: 5000 });\n\n      complete(text, {\n        body: {\n          option: \"zap\",\n          command:\n            (editor.storage.aiCommand.title\n              ? \"Context Title:\" + editor.storage.aiCommand.title + \";\\n\"\n              : \"\") +\n            (editor.storage.aiCommand.language\n              ? \"Context language:\" + editor.storage.aiCommand.language + \";\\n\"\n              : \"\") +\n            inputValue,\n          language: editor.storage.aiCommand.language ?? code ?? \"en\",\n          selection: editorSelection\n        },\n      }).then(() => setInputValue(\"\"));\n    }, [code, inputValue]);\n\n    useEffect(() => {\n      if (userPrompt) setInputValue(userPrompt);\n    }, [userPrompt]);\n    useEffect(() => {\n      editor.storage.aiCommand.completion = completion;\n      // if (!isLoading && completion) {\n      // const selection = editor.state.selection;\n      // editor\n      //   .chain()\n      //   .focus()\n      //   .insertContentAt(selection.to - 1, completion)\n      //   .insertContentAt(selection.to, \" \")\n      //   .run();\n\n      // }\n    }, [completion, isLoading]);\n\n    // Anytime the groups change, i.e. the user types to narrow it down, we want to\n    // reset the current selection to the first menu item\n    useEffect(() => {\n      setSelectedGroupIndex(0);\n      setSelectedCommandIndex(0);\n    }, [items]);\n\n    const selectItem = useCallback(\n      (groupIndex: number, commandIndex: number) => {\n        const command = items[groupIndex].commands[commandIndex];\n\n        setInputValue(command.action(editor));\n        // props.command(command);\n      },\n      [items, editor]\n    );\n\n    useImperativeHandle(ref, () => ({\n      onKeyDown: ({ event }: { event: React.KeyboardEvent }) => {\n        if (event.key === \"ArrowDown\") {\n          if (!items.length) {\n            return false;\n          }\n\n          const commands = items[selectedGroupIndex].commands;\n\n          let newCommandIndex = selectedCommandIndex + 1;\n          let newGroupIndex = selectedGroupIndex;\n\n          if (commands.length - 1 < newCommandIndex) {\n            newCommandIndex = 0;\n            newGroupIndex = selectedGroupIndex + 1;\n          }\n\n          if (items.length - 1 < newGroupIndex) {\n            newGroupIndex = 0;\n          }\n\n          setSelectedCommandIndex(newCommandIndex);\n          setSelectedGroupIndex(newGroupIndex);\n\n          return true;\n        }\n\n        if (event.key === \"ArrowUp\") {\n          if (!items.length) {\n            return false;\n          }\n\n          let newCommandIndex = selectedCommandIndex - 1;\n          let newGroupIndex = selectedGroupIndex;\n\n          if (newCommandIndex < 0) {\n            newGroupIndex = selectedGroupIndex - 1;\n            newCommandIndex = items[newGroupIndex]?.commands.length - 1 || 0;\n          }\n\n          if (newGroupIndex < 0) {\n            newGroupIndex = items.length - 1;\n            newCommandIndex = items[newGroupIndex].commands.length - 1;\n          }\n\n          setSelectedCommandIndex(newCommandIndex);\n          setSelectedGroupIndex(newGroupIndex);\n\n          return true;\n        }\n\n        if (event.key === \"Enter\") {\n          if (\n            !items.length ||\n            selectedGroupIndex === -1 ||\n            selectedCommandIndex === -1\n          ) {\n            return false;\n          }\n\n          selectItem(selectedGroupIndex, selectedCommandIndex);\n\n          return true;\n        }\n\n        return false;\n      },\n    }));\n\n    useEffect(() => {\n      if (activeItem.current && scrollContainer.current) {\n        const offsetTop = activeItem.current.offsetTop;\n        const offsetHeight = activeItem.current.offsetHeight;\n\n        scrollContainer.current.scrollTop = offsetTop - offsetHeight;\n      }\n    }, [selectedCommandIndex, selectedGroupIndex]);\n\n    const createCommandClickHandler = useCallback(\n      (groupIndex: number, commandIndex: number) => {\n        return () => {\n          selectItem(groupIndex, commandIndex);\n        };\n      },\n      [selectItem]\n    );\n\n    return (\n      <>\n        <Surface\n          className={`p-2 min-w-[20rem] flex  flex-col gap-2 w-full ${hasCompletion ? \"-mt-72\" : \"\"\n            }`}\n          style={{\n            width: boundigClient?.width,\n          }}\n        >\n          <>\n            {hasCompletion && (\n              <div className=\"flex  w-full\">\n                <ScrollArea\n                  className=\"h-72 prose p-2 px-4 prose-sm w-full max-w-none\"\n                  dir={i18next.dir()}\n                >\n                  <Markdown className=\"w-full\">{completion}</Markdown>\n                </ScrollArea>\n              </div>\n            )}\n\n            {isLoading && (\n              <div\n                className=\"flex h-12 w-full items-center px-4 text-sm font-medium text-muted-foreground text-blue-500\"\n                style={{\n                  width: boundigClient?.width,\n                }}\n              >\n                <Sparkles className=\"mr-2 h-4 w-4 shrink-0  \" />\n                AI is thinking\n                <div className=\"ml-2 mt-1\">\n                  <CrazySpinner />\n                </div>\n              </div>\n            )}\n\n            {!isLoading && (\n              <>\n                <div className=\"flex justify-between items-center \">\n                  {/* <CommandInput\n                value={inputValue}\n                onValueChange={setInputValue}\n                autoFocus\n                placeholder={\n                  hasCompletion ? 'Tell AI what to do next' : 'Ask AI to edit or generate...'\n                }\n                // onFocus={() => addAIHighlight(editor)}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter') handleClick()\n                }}\n              /> */}\n                  <Sparkles className=\"mr-2 h-4 w-4 shrink-0 text-blue-500 \" />\n                  <TextareaAutosize\n                    ref={inputRef}\n                    style={{ resize: \"none\" }}\n                    className=\"w-full p-2 text-black bg-white  rounded dark:bg-black dark:text-white focus:outline-none outline-none border-0 \"\n                    value={inputValue}\n                    onChange={(e) => {\n                      editor.storage.aiCommand.userPrompt = e.target.value;\n\n                      setInputValue(e.target.value);\n                    }}\n                    placeholder={\n                      hasCompletion\n                        ? i18next.t(\"tellAiPlaceholder\") || \"Tell AI what to do next\"\n                        : i18next.t(\"askAiPlaceholder\") || \"Ask AI to edit or generate...\"\n                    }\n                    autoFocus\n                    // onFocus={() => {\n                    //   addAIHighlight(editor)}}\n\n                    onKeyDown={(e) => {\n                      if (e.key === \"Enter\") handleClick();\n                    }}\n                  />\n                  <Toolbar.Button\n                    // size=\"icon\"\n\n                    // className=\"absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2 rounded-full  bg-zinc-100 hover:bg-zinc-150\"\n                    onClick={handleClick}\n                  >\n                    <ArrowUpCircle />\n                  </Toolbar.Button>\n                </div>\n              </>\n            )}\n          </>\n        </Surface>\n        {!isLoading && (\n          <Surface\n            ref={scrollContainer}\n            className=\"text-black max-h-[min(80vh,24rem)] overflow-auto flex-wrap mb-8 p-2\"\n          >\n            <div className=\"grid grid-cols-1 gap-0.5\">\n              {hasCompletion ? (\n                <AISelectorCommands\n                  editor={editor}\n                  messages={completion}\n                  onSelect={(value, options) => {\n                    complete(value, { body: options });\n                  }}\n                />\n              ) : (\n                items.map((group, groupIndex: number) => (\n                  <React.Fragment key={`${group.title}-wrapper`}>\n                    <div\n                      className=\"text-neutral-500 text-[0.65rem] col-[1/-1] mx-2 mt-4 font-semibold tracking-wider select-none uppercase first:mt-0.5\"\n                      key={`${group.title}`}\n                    >\n                      {group.title}\n                    </div>\n                    {group.commands.map(\n                      (command: Command, commandIndex: number) => (\n                        <DropdownButton\n                          key={`${command.label}`}\n                          isActive={\n                            selectedGroupIndex === groupIndex &&\n                            selectedCommandIndex === commandIndex\n                          }\n                          onClick={createCommandClickHandler(\n                            groupIndex,\n                            commandIndex\n                          )}\n                        >\n                          <Icon icon={command.icon} className=\"mr-1\" />\n                          {command.label}\n                        </DropdownButton>\n                      )\n                    )}\n                  </React.Fragment>\n                ))\n              )}\n            </div>\n          </Surface>\n        )}\n      </>\n    );\n  }\n);\n"],"names":["useCompletion","ArrowUpCircle","Sparkles","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","Markdown","TextareaAutosize","useLocale","getPrevText","CrazySpinner","DropdownButton","Icon","ScrollArea","Surface","Toolbar","AISelectorCommands","i18next","AICommandPanel","editor","onOpenChange","userPrompt","items","restProps","ref","inputValue","setInputValue","code","view","scrollContainer","activeItem","selectedGroupIndex","setSelectedGroupIndex","selectedCommandIndex","setSelectedCommandIndex","editorNode","dom","boundigClient","getBoundingClientRect","inputRef","completion","complete","isLoading","api","onResponse","response","status","console","log","onError","e","message","hasCompletion","length","handleClick","editorSelection","state","selection","content","toJSON","body","option","command","language","then","text","chars","storage","aiCommand","title","selectItem","groupIndex","commandIndex","commands","action","onKeyDown","event","key","newCommandIndex","newGroupIndex","current","offsetTop","offsetHeight","scrollTop","createCommandClickHandler","className","style","width","div","dir","resize","value","onChange","target","placeholder","t","autoFocus","Button","onClick","messages","onSelect","options","map","group","Fragment","isActive","icon","label"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/panels/AICommandPanel/AICommandPanel.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCompletion } from \"ai/react\";\nimport { ArrowUpCircle, Sparkles } from \"lucide-react\";\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from \"react\";\nimport Markdown from \"react-markdown\";\nimport TextareaAutosize from \"react-textarea-autosize\";\n\nimport { useLocale } from \"@payloadcms/ui/providers/Locale\";\nimport { Editor } from \"@tiptap/react\";\n\nimport i18next from \"i18next\";\nimport {\n  Command,\n  Group,\n} from \"src/fields/TiptapEditor/extensions/AICommand/types.js\";\nimport { extractMarkdown } from \"../../../lib/extract.js\";\nimport { getPrevText } from \"../../../lib/utils/index.js\";\nimport AISelectorCommands from \"../../menus/TextMenu/components/ai-selector-commands.js\";\nimport CrazySpinner from \"../../ui/crazy-spinner.js\";\nimport { DropdownButton } from \"../../ui/Dropdown/Dropdown.js\";\nimport { Icon } from \"../../ui/Icon.js\";\nimport { ScrollArea } from \"../../ui/scroll-area.js\";\nimport { Surface } from \"../../ui/Surface.js\";\nimport { Toolbar } from \"../../ui/Toolbar.js\";\nimport { checkJsonCompletion, formatCompletion } from \"../AIEditorPanel/utils.js\";\n\nexport type AICommandPanelProps = {\n  editor: Editor;\n  userPrompt?: string;\n  onOpenChange: (value: boolean) => void;\n  items: Group[];\n};\n\nexport const AICommandPanel = forwardRef(\n  (\n    {\n      editor,\n      onOpenChange,\n      userPrompt,\n      items,\n      ...restProps\n    }: AICommandPanelProps,\n    ref\n  ) => {\n    const [inputValue, setInputValue] = useState(userPrompt ?? \"\");\n    const { code } = useLocale();\n    const { view } = editor;\n    const scrollContainer = useRef<HTMLDivElement>(null);\n    const activeItem = useRef<HTMLButtonElement>(null);\n    const [selectedGroupIndex, setSelectedGroupIndex] = useState(0);\n    const [selectedCommandIndex, setSelectedCommandIndex] = useState(0);\n\n    const editorNode = view.dom as HTMLElement;\n    const boundigClient = editorNode.getBoundingClientRect();\n    const inputRef = useRef<HTMLTextAreaElement>(null);\n\n\n    const { completion, complete, isLoading } = useCompletion({\n      // id: \"novel\",\n      api: \"/api/generate\",\n      onResponse: (response) => {\n        if (response.status === 429) {\n          console.log(\"You have reached your request limit for the day.\");\n\n          return;\n        }\n      },\n\n      onError: (e) => {\n        console.log(\"ERROR\", e.message);\n      },\n    });\n\n    const hasCompletion = completion.length > 0;\n    const handleClick = useCallback(() => {\n      const editorSelection = editor.state.selection.content().content.toJSON()\n\n      if (completion) {\n        return complete(completion, {\n          body: { option: \"zap\", command: inputValue, language: code ?? \"en\", selection: formatCompletion(completion) },\n        }).then(() => setInputValue(\"\"));\n      }\n      const text = getPrevText(editor, { chars: 5000 });\n\n      complete(text, {\n        body: {\n          option: \"zap\",\n          command:\n            (editor.storage.aiCommand.title\n              ? \"Context Title:\" + editor.storage.aiCommand.title + \";\\n\"\n              : \"\") +\n            (editor.storage.aiCommand.language\n              ? \"Context language:\" + editor.storage.aiCommand.language + \";\\n\"\n              : \"\") +\n            inputValue,\n          language: editor.storage.aiCommand.language ?? code ?? \"en\",\n          selection: editorSelection\n        },\n      }).then(() => setInputValue(\"\"));\n    }, [code, inputValue, completion]);\n\n    useEffect(() => {\n      if (userPrompt) setInputValue(userPrompt);\n    }, [userPrompt]);\n    useEffect(() => {\n      if (!isLoading && hasCompletion) {\n        editor.storage.aiCommand.completion = checkJsonCompletion(completion) ? formatCompletion(completion) : completion;\n      }\n    }, [completion, isLoading]);\n\n    // Anytime the groups change, i.e. the user types to narrow it down, we want to\n    // reset the current selection to the first menu item\n    useEffect(() => {\n      setSelectedGroupIndex(0);\n      setSelectedCommandIndex(0);\n    }, [items]);\n\n    const selectItem = useCallback(\n      (groupIndex: number, commandIndex: number) => {\n        const command = items[groupIndex].commands[commandIndex];\n\n        setInputValue(command.action(editor));\n        // props.command(command);\n      },\n      [items, editor]\n    );\n\n    useImperativeHandle(ref, () => ({\n      onKeyDown: ({ event }: { event: React.KeyboardEvent }) => {\n        if (event.key === \"ArrowDown\") {\n          if (!items.length) {\n            return false;\n          }\n\n          const commands = items[selectedGroupIndex].commands;\n\n          let newCommandIndex = selectedCommandIndex + 1;\n          let newGroupIndex = selectedGroupIndex;\n\n          if (commands.length - 1 < newCommandIndex) {\n            newCommandIndex = 0;\n            newGroupIndex = selectedGroupIndex + 1;\n          }\n\n          if (items.length - 1 < newGroupIndex) {\n            newGroupIndex = 0;\n          }\n\n          setSelectedCommandIndex(newCommandIndex);\n          setSelectedGroupIndex(newGroupIndex);\n\n          return true;\n        }\n\n        if (event.key === \"ArrowUp\") {\n          if (!items.length) {\n            return false;\n          }\n\n          let newCommandIndex = selectedCommandIndex - 1;\n          let newGroupIndex = selectedGroupIndex;\n\n          if (newCommandIndex < 0) {\n            newGroupIndex = selectedGroupIndex - 1;\n            newCommandIndex = items[newGroupIndex]?.commands.length - 1 || 0;\n          }\n\n          if (newGroupIndex < 0) {\n            newGroupIndex = items.length - 1;\n            newCommandIndex = items[newGroupIndex].commands.length - 1;\n          }\n\n          setSelectedCommandIndex(newCommandIndex);\n          setSelectedGroupIndex(newGroupIndex);\n\n          return true;\n        }\n\n        if (event.key === \"Enter\") {\n          if (\n            !items.length ||\n            selectedGroupIndex === -1 ||\n            selectedCommandIndex === -1\n          ) {\n            return false;\n          }\n\n          selectItem(selectedGroupIndex, selectedCommandIndex);\n\n          return true;\n        }\n\n        return false;\n      },\n    }));\n\n    useEffect(() => {\n      if (activeItem.current && scrollContainer.current) {\n        const offsetTop = activeItem.current.offsetTop;\n        const offsetHeight = activeItem.current.offsetHeight;\n\n        scrollContainer.current.scrollTop = offsetTop - offsetHeight;\n      }\n    }, [selectedCommandIndex, selectedGroupIndex]);\n\n    const createCommandClickHandler = useCallback(\n      (groupIndex: number, commandIndex: number) => {\n        return () => {\n          selectItem(groupIndex, commandIndex);\n        };\n      },\n      [selectItem]\n    );\n\n    return (\n      <>\n        <Surface\n          className={`p-2 min-w-[20rem] flex  flex-col gap-2 w-full ${hasCompletion ? \"-mt-72\" : \"\"\n            }`}\n          style={{\n            width: boundigClient?.width,\n          }}\n        >\n          <>\n            {hasCompletion && !isLoading && (\n              <div className=\"flex  w-full\">\n                <ScrollArea\n                  className=\"h-72 prose p-2 px-4 prose-sm w-full max-w-none\"\n                  dir={i18next.dir()}\n                >\n                  <Markdown>{checkJsonCompletion(completion) ? extractMarkdown({ type: 'doc', content: formatCompletion(completion) as any }) : completion}</Markdown>\n\n                </ScrollArea>\n              </div>\n            )}\n\n            {isLoading && (\n              <div\n                className=\"flex h-12 w-full items-center px-4 text-sm font-medium text-muted-foreground text-blue-500\"\n                style={{\n                  width: boundigClient?.width,\n                }}\n              >\n                <Sparkles className=\"mr-2 h-4 w-4 shrink-0  \" />\n                AI is thinking\n                <div className=\"ml-2 mt-1\">\n                  <CrazySpinner />\n                </div>\n              </div>\n            )}\n\n            {!isLoading && (\n              <>\n                <div className=\"flex justify-between items-center \">\n                  {/* <CommandInput\n                value={inputValue}\n                onValueChange={setInputValue}\n                autoFocus\n                placeholder={\n                  hasCompletion ? 'Tell AI what to do next' : 'Ask AI to edit or generate...'\n                }\n                // onFocus={() => addAIHighlight(editor)}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter') handleClick()\n                }}\n              /> */}\n                  <Sparkles className=\"mr-2 h-4 w-4 shrink-0 text-blue-500 \" />\n                  <TextareaAutosize\n                    ref={inputRef}\n                    style={{ resize: \"none\" }}\n                    className=\"w-full p-2 text-black bg-white  rounded dark:bg-black dark:text-white focus:outline-none outline-none border-0 \"\n                    value={inputValue}\n                    onChange={(e) => {\n                      editor.storage.aiCommand.userPrompt = e.target.value;\n\n                      setInputValue(e.target.value);\n                    }}\n                    placeholder={\n                      hasCompletion\n                        ? i18next.t(\"tellAiPlaceholder\") || \"Tell AI what to do next\"\n                        : i18next.t(\"askAiPlaceholder\") || \"Ask AI to edit or generate...\"\n                    }\n                    autoFocus\n                    // onFocus={() => {\n                    //   addAIHighlight(editor)}}\n\n                    onKeyDown={(e) => {\n                      if (e.key === \"Enter\") handleClick();\n                    }}\n                  />\n                  <Toolbar.Button\n                    // size=\"icon\"\n\n                    // className=\"absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2 rounded-full  bg-zinc-100 hover:bg-zinc-150\"\n                    onClick={handleClick}\n                  >\n                    <ArrowUpCircle />\n                  </Toolbar.Button>\n                </div>\n              </>\n            )}\n          </>\n        </Surface>\n        {!isLoading && (\n          <Surface\n            ref={scrollContainer}\n            className=\"text-black max-h-[min(80vh,24rem)] overflow-auto flex-wrap mb-8 p-2\"\n          >\n            <div className=\"grid grid-cols-1 gap-0.5\">\n              {hasCompletion ? (\n                <AISelectorCommands\n                  editor={editor}\n                  messages={completion}\n                  onSelect={(value, options) => {\n                    complete(value, { body: options });\n                  }}\n                />\n              ) : (\n                items.map((group, groupIndex: number) => (\n                  <React.Fragment key={`${group.title}-wrapper`}>\n                    <div\n                      className=\"text-neutral-500 text-[0.65rem] col-[1/-1] mx-2 mt-4 font-semibold tracking-wider select-none uppercase first:mt-0.5\"\n                      key={`${group.title}`}\n                    >\n                      {group.title}\n                    </div>\n                    {group.commands.map(\n                      (command: Command, commandIndex: number) => (\n                        <DropdownButton\n                          key={`${command.label}`}\n                          isActive={\n                            selectedGroupIndex === groupIndex &&\n                            selectedCommandIndex === commandIndex\n                          }\n                          onClick={createCommandClickHandler(\n                            groupIndex,\n                            commandIndex\n                          )}\n                        >\n                          <Icon icon={command.icon} className=\"mr-1\" />\n                          {command.label}\n                        </DropdownButton>\n                      )\n                    )}\n                  </React.Fragment>\n                ))\n              )}\n            </div>\n          </Surface>\n        )}\n      </>\n    );\n  }\n);\n"],"names":["useCompletion","ArrowUpCircle","Sparkles","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","Markdown","TextareaAutosize","useLocale","i18next","extractMarkdown","getPrevText","AISelectorCommands","CrazySpinner","DropdownButton","Icon","ScrollArea","Surface","Toolbar","checkJsonCompletion","formatCompletion","AICommandPanel","editor","onOpenChange","userPrompt","items","restProps","ref","inputValue","setInputValue","code","view","scrollContainer","activeItem","selectedGroupIndex","setSelectedGroupIndex","selectedCommandIndex","setSelectedCommandIndex","editorNode","dom","boundigClient","getBoundingClientRect","inputRef","completion","complete","isLoading","api","onResponse","response","status","console","log","onError","e","message","hasCompletion","length","handleClick","editorSelection","state","selection","content","toJSON","body","option","command","language","then","text","chars","storage","aiCommand","title","selectItem","groupIndex","commandIndex","commands","action","onKeyDown","event","key","newCommandIndex","newGroupIndex","current","offsetTop","offsetHeight","scrollTop","createCommandClickHandler","className","style","width","div","dir","type","resize","value","onChange","target","placeholder","t","autoFocus","Button","onClick","messages","onSelect","options","map","group","Fragment","isActive","icon","label"],"mappings":"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"}

package/dist/src/fields/TiptapEditor/features/panels/AIEditorPanel/AIEditorPanel.js

@@ -5,7 +5,9 @@ import { useCompletion } from "ai/react";
 import { ArrowRight, Sparkles } from "lucide-react";
 import { useCallback, useRef, useState } from "react";
 import TextareaAutosize from "react-textarea-autosize";
+import i18next from "i18next";
 import Markdown from "react-markdown";
+import { extractMarkdown } from "../../../lib/extract.js";
 import { getPrevText } from "../../../lib/utils/index.js";
 import AICompletionCommands from "../../menus/TextMenu/components/ai-completion-command.js";
 import AISelectorCommands from "../../menus/TextMenu/components/ai-selector-commands.js";
@@ -13,8 +15,6 @@ import { Surface } from "../../ui/Surface.js";
 import { Toolbar } from "../../ui/Toolbar.js";
 import CrazySpinner from "../../ui/crazy-spinner.js";
 import { ScrollArea } from "../../ui/scroll-area.js";
-import i18next from "i18next";
-import { extractMarkdown } from "../../../lib/extract.js";
 import { checkJsonCompletion, formatCompletion } from "./utils.js";
 export const AIEditorPanel = ({ editor, onOpenChange })=>{
     const [inputValue, setInputValue] = useState("");
@@ -57,12 +57,13 @@ export const AIEditorPanel = ({ editor, onOpenChange })=>{
                 option: "zap",
                 command: inputValue,
                 language: code ?? "en",
-                selection: editorSelection
+                selection: formatCompletion(completion)
             }
         }).then(()=>setInputValue(""));
     }, [
         code,
-        inputValue
+        inputValue,
+        completion
     ]);
     return /*#__PURE__*/ _jsx(Surface, {
         className: `p-2 min-w-[20rem] `,
@@ -133,7 +134,7 @@ export const AIEditorPanel = ({ editor, onOpenChange })=>{
                         hasCompletion ? /*#__PURE__*/ _jsx(AICompletionCommands, {
                             editor: editor,
                             onDiscard: ()=>{
-                                editor.chain().unsetHighlight().focus().run();
+                                editor?.chain()?.unsetHighlight()?.focus()?.run();
                                 onOpenChange(false);
                             },
                             completion: completion