payload-richtext-tiptap 0.0.41 → 0.0.43

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

@@ -0,0 +1,168 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCompletion } from "ai/react";
+import { ArrowUpCircle, Sparkles } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import Markdown from "react-markdown";
+import TextareaAutosize from "react-textarea-autosize";
+import { useLocale } from "@payloadcms/ui/providers/Locale";
+import { getPrevText } from "../../../lib/utils/index.js";
+import { isRTL } from "../../../lib/utils/isRtl.js";
+import CrazySpinner from "../../ui/crazy-spinner.js";
+import { ScrollArea } from "../../ui/scroll-area.js";
+import { Surface } from "../../ui/Surface.js";
+import { Toolbar } from "../../ui/Toolbar.js";
+export const AICommandPanel = ({ editor, onOpenChange, userPrompt, ...restProps })=>{
+    const [inputValue, setInputValue] = useState(userPrompt ?? "");
+    const { code } = useLocale();
+    const { view } = editor;
+    const editorNode = view.dom;
+    const boundigClient = editorNode.getBoundingClientRect();
+    const inputRef = useRef(null);
+    // const { status, messages, input, submitMessage, handleInputChange } = useAssistant({
+    //   // id: "novel",
+    //   api: "/api/assistant",
+    //   onResponse: (response) => {
+    //     if (response.status === 429) {
+    //       toast.error("You have reached your request limit for the day.");
+    //       return;
+    //     }
+    //   },
+    //   onError: (e) => {
+    //     toast.error(e.message);
+    //   },
+    // });
+    const { completion, complete, isLoading } = useCompletion({
+        // id: "novel",
+        api: "/api/generate",
+        onResponse: (response)=>{
+            if (response.status === 429) {
+                console.log("You have reached your request limit for the day.");
+                return;
+            }
+        },
+        onError: (e)=>{
+            console.log("ERROR", e.message);
+        }
+    });
+    const hasCompletion = completion.length > 0;
+    const handleClick = useCallback(()=>{
+        if (completion) {
+            return complete(completion, {
+                body: {
+                    option: "zap",
+                    command: inputValue,
+                    language: code ?? "en"
+                }
+            }).then(()=>setInputValue(""));
+        }
+        const text = getPrevText(editor, {
+            chars: 5000
+        });
+        complete(text, {
+            body: {
+                option: "zap",
+                command: inputValue,
+                language: code ?? "en"
+            }
+        }).then(()=>setInputValue(""));
+    }, [
+        code,
+        inputValue
+    ]);
+    useEffect(()=>{
+        if (userPrompt) setInputValue(userPrompt);
+    }, [
+        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();
+    // }
+    }, [
+        completion,
+        isLoading
+    ]);
+    return /*#__PURE__*/ _jsx(Surface, {
+        className: `p-2 min-w-[20rem] flex  flex-col gap-2 `,
+        style: {
+            width: boundigClient?.width
+        },
+        children: /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                hasCompletion && /*#__PURE__*/ _jsx("div", {
+                    className: "flex  w-full",
+                    children: /*#__PURE__*/ _jsx(ScrollArea, {
+                        children: /*#__PURE__*/ _jsx("div", {
+                            className: "prose p-2 px-4 prose-sm",
+                            dir: isRTL(completion) ? "rtl" : "ltr",
+                            children: /*#__PURE__*/ _jsx(Markdown, {
+                                children: completion
+                            })
+                        })
+                    })
+                }),
+                isLoading && /*#__PURE__*/ _jsxs("div", {
+                    className: "flex h-12 w-full items-center px-4 text-sm font-medium text-muted-foreground text-blue-500",
+                    style: {
+                        width: boundigClient?.width
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(Sparkles, {
+                            className: "mr-2 h-4 w-4 shrink-0  "
+                        }),
+                        "AI is thinking",
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "ml-2 mt-1",
+                            children: /*#__PURE__*/ _jsx(CrazySpinner, {})
+                        })
+                    ]
+                }),
+                !isLoading && /*#__PURE__*/ _jsx(_Fragment, {
+                    children: /*#__PURE__*/ _jsxs("div", {
+                        className: "flex justify-between items-center ",
+                        children: [
+                            /*#__PURE__*/ _jsx(Sparkles, {
+                                className: "mr-2 h-4 w-4 shrink-0 text-blue-500 "
+                            }),
+                            /*#__PURE__*/ _jsx(TextareaAutosize, {
+                                ref: inputRef,
+                                style: {
+                                    resize: "none"
+                                },
+                                className: "w-full p-2 text-black bg-white  rounded dark:bg-black dark:text-white focus:outline-none outline-none border-0 ",
+                                value: inputValue,
+                                onChange: (e)=>{
+                                    editor.storage.aiCommand.userPrompt = e.target.value;
+                                    setInputValue(e.target.value);
+                                },
+                                placeholder: hasCompletion ? "Tell AI what to do next" : "Ask AI to edit or generate...",
+                                autoFocus: true,
+                                // onFocus={() => {
+                                //   addAIHighlight(editor)}}
+                                onKeyDown: (e)=>{
+                                    if (e.key === "Enter") handleClick();
+                                }
+                            }),
+                            /*#__PURE__*/ _jsx(Toolbar.Button, {
+                                // size="icon"
+                                // className="absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2 rounded-full  bg-zinc-100 hover:bg-zinc-150"
+                                onClick: handleClick,
+                                children: /*#__PURE__*/ _jsx(ArrowUpCircle, {})
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
+    });
+};
+
+//# sourceMappingURL=AICommandPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/panels/AICommandPanel/AICommandPanel.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCompletion } from \"ai/react\";\nimport { ArrowRight, ArrowUpCircle, Sparkles } from \"lucide-react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport Markdown from \"react-markdown\";\nimport TextareaAutosize from \"react-textarea-autosize\";\n\nimport { useLocale } from \"@payloadcms/ui/providers/Locale\";\nimport { Editor, EditorContent, useEditor } from \"@tiptap/react\";\nimport StarterKit from \"@tiptap/starter-kit\";\n\nimport { getPrevText } from \"../../../lib/utils/index.js\";\nimport { isRTL } from \"../../../lib/utils/isRtl.js\";\nimport AICompletionCommands from \"../../menus/TextMenu/components/ai-completion-command.js\";\nimport AIDraftSelectorCommands from \"../../menus/TextMenu/components/ai-draft-selector-commands.js\";\nimport AISelectorCommands from \"../../menus/TextMenu/components/ai-selector-commands.js\";\nimport CrazySpinner from \"../../ui/crazy-spinner.js\";\nimport { ScrollArea } from \"../../ui/scroll-area.js\";\nimport { Surface } from \"../../ui/Surface.js\";\nimport { Toolbar } from \"../../ui/Toolbar.js\";\n\nexport type AICommandPanelProps = {\n  editor: Editor;\n  userPrompt?: string;\n  onOpenChange: (value: boolean) => void;\n};\n\nexport const AICommandPanel = ({\n  editor,\n  onOpenChange,\n  userPrompt,\n  ...restProps\n}: AICommandPanelProps) => {\n  const [inputValue, setInputValue] = useState(userPrompt ?? \"\");\n  const { code } = useLocale();\n  const { view } = editor;\n\n  const editorNode = view.dom as HTMLElement;\n  const boundigClient = editorNode.getBoundingClientRect();\n  const inputRef = useRef<HTMLTextAreaElement>(null);\n\n  // const { status, messages, input, submitMessage, handleInputChange } = useAssistant({\n  //   // id: \"novel\",\n  //   api: \"/api/assistant\",\n  //   onResponse: (response) => {\n  //     if (response.status === 429) {\n  //       toast.error(\"You have reached your request limit for the day.\");\n  //       return;\n  //     }\n  //   },\n  //   onError: (e) => {\n  //     toast.error(e.message);\n  //   },\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    if (completion) {\n      return complete(completion, {\n        body: { option: \"zap\", command: inputValue, language: code ?? \"en\" },\n      }).then(() => setInputValue(\"\"));\n    }\n    const text = getPrevText(editor, { chars: 5000 });\n\n    complete(text, {\n      body: { option: \"zap\", command: inputValue, language: code ?? \"en\" },\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  return (\n    <Surface\n      className={`p-2 min-w-[20rem] flex  flex-col gap-2 `}\n      style={{\n        width: boundigClient?.width,\n      }}\n    >\n      <>\n        {hasCompletion && (\n          <div className=\"flex  w-full\">\n            <ScrollArea>\n              <div\n                className=\"prose p-2 px-4 prose-sm\"\n                dir={isRTL(completion) ? \"rtl\" : \"ltr\"}\n              >\n                <Markdown>{completion}</Markdown>\n              </div>\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                    ? \"Tell AI what to do next\"\n                    : \"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            {/* {hasCompletion ? (\n              <AICompletionCommands\n                editor={editor}\n                onDiscard={() => {\n                  editor.chain().unsetHighlight().focus().run();\n                  onOpenChange(false);\n                }}\n                completion={completion}\n              />\n            ) : (\n              <AIDraftSelectorCommands\n                editor={editor}\n                onSelect={(value) => {\n                  setInputValue(value);\n                  inputRef.current.focus();\n                }}\n              />\n            )} */}\n          </>\n        )}\n      </>\n    </Surface>\n  );\n};\n"],"names":["useCompletion","ArrowUpCircle","Sparkles","useCallback","useEffect","useRef","useState","Markdown","TextareaAutosize","useLocale","getPrevText","isRTL","CrazySpinner","ScrollArea","Surface","Toolbar","AICommandPanel","editor","onOpenChange","userPrompt","restProps","inputValue","setInputValue","code","view","editorNode","dom","boundigClient","getBoundingClientRect","inputRef","completion","complete","isLoading","api","onResponse","response","status","console","log","onError","e","message","hasCompletion","length","handleClick","body","option","command","language","then","text","chars","storage","aiCommand","className","style","width","div","dir","ref","resize","value","onChange","target","placeholder","autoFocus","onKeyDown","key","Button","onClick"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+export * from "./AICommandPanel.js";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/features/panels/AICommandPanel/index.tsx"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}

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

@@ -0,0 +1,3 @@
+export * from "./AICommandPanel.js";
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/panels/AICommandPanel/index.tsx"],"sourcesContent":["export * from \"./AICommandPanel.js\";\n"],"names":[],"mappings":"AAAA,cAAc,sBAAsB"}

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

@@ -1 +1 @@
-{"version":3,"file":"AIEditorPanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/features/panels/AIEditorPanel/AIEditorPanel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAavC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,aAAa,6BAA8B,kBAAkB,gCAwIzE,CAAC"}
+{"version":3,"file":"AIEditorPanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/features/panels/AIEditorPanel/AIEditorPanel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAevC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,aAAa,6BAA8B,kBAAkB,gCAuJzE,CAAC"}

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

@@ -3,7 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useLocale } from "@payloadcms/ui/providers/Locale";
 import { useCompletion } from "ai/react";
 import { ArrowRight, Sparkles } from "lucide-react";
-import { useCallback, useState } from "react";
+import { useCallback, useRef, useState } from "react";
+import TextareaAutosize from "react-textarea-autosize";
 import Markdown from "react-markdown";
 import { getPrevText } from "../../../lib/utils/index.js";
 import { isRTL } from "../../../lib/utils/isRtl.js";
@@ -16,6 +17,10 @@ import { ScrollArea } from "../../ui/scroll-area.js";
 export const AIEditorPanel = ({ editor, onOpenChange })=>{
     const [inputValue, setInputValue] = useState("");
     const { code } = useLocale();
+    const { view } = editor;
+    const editorNode = view.dom;
+    const boundigClient = editorNode.getBoundingClientRect();
+    const inputRef = useRef(null);
     // const { status, messages, input, submitMessage, handleInputChange } = useAssistant({
     //   // id: "novel",
     //   api: "/api/assistant",
@@ -44,13 +49,15 @@ export const AIEditorPanel = ({ editor, onOpenChange })=>{
     });
     const hasCompletion = completion.length > 0;
     const handleClick = useCallback(()=>{
-        if (completion) return complete(completion, {
-            body: {
-                option: "zap",
-                command: inputValue,
-                language: code ?? "en"
-            }
-        }).then(()=>setInputValue(""));
+        if (completion) {
+            return complete(completion, {
+                body: {
+                    option: "zap",
+                    command: inputValue,
+                    language: code ?? "en"
+                }
+            }).then(()=>setInputValue(""));
+        }
         const text = getPrevText(editor, {
             chars: 5000
         });
@@ -62,14 +69,18 @@ export const AIEditorPanel = ({ editor, onOpenChange })=>{
             }
         }).then(()=>setInputValue(""));
     }, [
-        code
+        code,
+        inputValue
     ]);
     return /*#__PURE__*/ _jsx(Surface, {
-        className: "p-2 min-w-[20rem]",
+        className: `p-2 min-w-[20rem] `,
+        style: {
+            width: boundigClient?.width
+        },
         children: /*#__PURE__*/ _jsxs(_Fragment, {
             children: [
                 hasCompletion && /*#__PURE__*/ _jsx("div", {
-                    className: "flex max-h-[400px]",
+                    className: "flex  w-full",
                     children: /*#__PURE__*/ _jsx(ScrollArea, {
                         children: /*#__PURE__*/ _jsx("div", {
                             className: "prose p-2 px-4 prose-sm",
@@ -101,7 +112,8 @@ export const AIEditorPanel = ({ editor, onOpenChange })=>{
                                 /*#__PURE__*/ _jsx(Sparkles, {
                                     className: "mr-2 h-4 w-4 shrink-0 text-blue-500 "
                                 }),
-                                /*#__PURE__*/ _jsx("input", {
+                                /*#__PURE__*/ _jsx(TextareaAutosize, {
+                                    ref: inputRef,
                                     className: "w-full p-2 text-black bg-white  rounded dark:bg-black dark:text-white focus:outline-none",
                                     value: inputValue,
                                     onChange: (e)=>{
@@ -109,7 +121,8 @@ export const AIEditorPanel = ({ editor, onOpenChange })=>{
                                     },
                                     placeholder: hasCompletion ? "Tell AI what to do next" : "Ask AI to edit or generate...",
                                     autoFocus: true,
-                                    // onFocus={() => addAIHighlight(editor)}
+                                    // onFocus={() => {
+                                    //   addAIHighlight(editor)}}
                                     onKeyDown: (e)=>{
                                         if (e.key === "Enter") handleClick();
                                     }
@@ -131,10 +144,9 @@ export const AIEditorPanel = ({ editor, onOpenChange })=>{
                             completion: completion
                         }) : /*#__PURE__*/ _jsx(AISelectorCommands, {
                             editor: editor,
-                            onSelect: (value, options)=>{
-                                complete(value, {
-                                    body: options
-                                });
+                            onSelect: (value)=>{
+                                setInputValue(value);
+                                inputRef.current.focus();
                             }
                         })
                     ]

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/panels/AIEditorPanel/AIEditorPanel.tsx"],"sourcesContent":["\"use client\";\n\nimport { useLocale } from \"@payloadcms/ui/providers/Locale\";\nimport { Editor } from \"@tiptap/react\";\nimport { useCompletion } from \"ai/react\";\nimport { ArrowRight, Sparkles } from \"lucide-react\";\nimport { useCallback, useState } from \"react\";\nimport Markdown from \"react-markdown\";\nimport { getPrevText } from \"../../../lib/utils/index.js\";\nimport { isRTL } from \"../../../lib/utils/isRtl.js\";\nimport AICompletionCommands from \"../../menus/TextMenu/components/ai-completion-command.js\";\nimport AISelectorCommands from \"../../menus/TextMenu/components/ai-selector-commands.js\";\nimport { Surface } from \"../../ui/Surface.js\";\nimport { Toolbar } from \"../../ui/Toolbar.js\";\nimport CrazySpinner from \"../../ui/crazy-spinner.js\";\nimport { ScrollArea } from \"../../ui/scroll-area.js\";\nexport type AIEditorPanelProps = {\n  editor: Editor;\n  onOpenChange: (value: boolean) => void;\n};\n\nexport const AIEditorPanel = ({ editor, onOpenChange }: AIEditorPanelProps) => {\n  const [inputValue, setInputValue] = useState(\"\");\n  const { code } = useLocale();\n\n  // const { status, messages, input, submitMessage, handleInputChange } = useAssistant({\n  //   // id: \"novel\",\n  //   api: \"/api/assistant\",\n  //   onResponse: (response) => {\n  //     if (response.status === 429) {\n  //       toast.error(\"You have reached your request limit for the day.\");\n  //       return;\n  //     }\n  //   },\n  //   onError: (e) => {\n  //     toast.error(e.message);\n  //   },\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    onError: (e) => {\n      console.log(\"ERROR\", e.message);\n    },\n  });\n\n  const hasCompletion = completion.length > 0;\n  const handleClick = useCallback(() => {\n    if (completion)\n      return complete(completion, {\n        body: { option: \"zap\", command: inputValue, language: code ?? \"en\" },\n      }).then(() => setInputValue(\"\"));\n    const text = getPrevText(editor, { chars: 5000 });\n\n    complete(text, {\n      body: { option: \"zap\", command: inputValue, language: code ?? \"en\" },\n    }).then(() => setInputValue(\"\"));\n  }, [code]);\n  return (\n    <Surface className=\"p-2 min-w-[20rem]\">\n      <>\n        {hasCompletion && (\n          <div className=\"flex max-h-[400px]\">\n            <ScrollArea>\n              <div\n                className=\"prose p-2 px-4 prose-sm\"\n                dir={isRTL(completion) ? \"rtl\" : \"ltr\"}\n              >\n                <Markdown>{completion}</Markdown>\n              </div>\n            </ScrollArea>\n          </div>\n        )}\n\n        {isLoading && (\n          <div className=\"flex h-12 w-full items-center px-4 text-sm font-medium text-muted-foreground text-blue-500\">\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              <input\n                className=\"w-full p-2 text-black bg-white  rounded dark:bg-black dark:text-white focus:outline-none\"\n                value={inputValue}\n                onChange={(e) => {\n                  setInputValue(e.target.value);\n                }}\n                placeholder={\n                  hasCompletion\n                    ? \"Tell AI what to do next\"\n                    : \"Ask AI to edit or generate...\"\n                }\n                autoFocus\n                // onFocus={() => 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                <ArrowRight />\n              </Toolbar.Button>\n            </div>\n            {hasCompletion ? (\n              <AICompletionCommands\n                editor={editor}\n                onDiscard={() => {\n                  editor.chain().unsetHighlight().focus().run();\n                  onOpenChange(false);\n                }}\n                completion={completion}\n              />\n            ) : (\n              <AISelectorCommands\n                editor={editor}\n                onSelect={(value, options) => {\n                  complete(value, { body: options });\n                }}\n              />\n            )}\n          </>\n        )}\n      </>\n    </Surface>\n  );\n};\n"],"names":["useLocale","useCompletion","ArrowRight","Sparkles","useCallback","useState","Markdown","getPrevText","isRTL","AICompletionCommands","AISelectorCommands","Surface","Toolbar","CrazySpinner","ScrollArea","AIEditorPanel","editor","onOpenChange","inputValue","setInputValue","code","completion","complete","isLoading","api","onResponse","response","status","console","log","onError","e","message","hasCompletion","length","handleClick","body","option","command","language","then","text","chars","className","div","dir","input","value","onChange","target","placeholder","autoFocus","onKeyDown","key","Button","onClick","onDiscard","chain","unsetHighlight","focus","run","onSelect","options"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/panels/AIEditorPanel/AIEditorPanel.tsx"],"sourcesContent":["\"use client\";\n\nimport { useLocale } from \"@payloadcms/ui/providers/Locale\";\nimport { Editor } from \"@tiptap/react\";\nimport { useCompletion } from \"ai/react\";\nimport { ArrowRight, Sparkles } from \"lucide-react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport TextareaAutosize from \"react-textarea-autosize\";\n\nimport Markdown from \"react-markdown\";\nimport { getPrevText } from \"../../../lib/utils/index.js\";\nimport { isRTL } from \"../../../lib/utils/isRtl.js\";\nimport AICompletionCommands from \"../../menus/TextMenu/components/ai-completion-command.js\";\nimport AISelectorCommands from \"../../menus/TextMenu/components/ai-selector-commands.js\";\nimport { Surface } from \"../../ui/Surface.js\";\nimport { Toolbar } from \"../../ui/Toolbar.js\";\nimport CrazySpinner from \"../../ui/crazy-spinner.js\";\nimport { ScrollArea } from \"../../ui/scroll-area.js\";\nexport type AIEditorPanelProps = {\n  editor: Editor;\n  onOpenChange: (value: boolean) => void;\n};\n\nexport const AIEditorPanel = ({ editor, onOpenChange }: AIEditorPanelProps) => {\n  const [inputValue, setInputValue] = useState(\"\");\n  const { code } = useLocale();\n  const { view } = editor;\n\n  const editorNode = view.dom as HTMLElement;\n  const boundigClient = editorNode.getBoundingClientRect();\n  const inputRef = useRef<HTMLTextAreaElement>(null);\n\n  // const { status, messages, input, submitMessage, handleInputChange } = useAssistant({\n  //   // id: \"novel\",\n  //   api: \"/api/assistant\",\n  //   onResponse: (response) => {\n  //     if (response.status === 429) {\n  //       toast.error(\"You have reached your request limit for the day.\");\n  //       return;\n  //     }\n  //   },\n  //   onError: (e) => {\n  //     toast.error(e.message);\n  //   },\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    onError: (e) => {\n      console.log(\"ERROR\", e.message);\n    },\n  });\n\n  const hasCompletion = completion.length > 0;\n  const handleClick = useCallback(() => {\n    if (completion) {\n      return complete(completion, {\n        body: { option: \"zap\", command: inputValue, language: code ?? \"en\" },\n      }).then(() => setInputValue(\"\"));\n    }\n    const text = getPrevText(editor, { chars: 5000 });\n\n    complete(text, {\n      body: { option: \"zap\", command: inputValue, language: code ?? \"en\" },\n    }).then(() => setInputValue(\"\"));\n  }, [code, inputValue]);\n\n  return (\n    <Surface\n      className={`p-2 min-w-[20rem] `}\n      style={{\n        width: boundigClient?.width,\n      }}\n    >\n      <>\n        {hasCompletion && (\n          <div className=\"flex  w-full\">\n            <ScrollArea>\n              <div\n                className=\"prose p-2 px-4 prose-sm\"\n                dir={isRTL(completion) ? \"rtl\" : \"ltr\"}\n              >\n                <Markdown>{completion}</Markdown>\n              </div>\n            </ScrollArea>\n          </div>\n        )}\n\n        {isLoading && (\n          <div className=\"flex h-12 w-full items-center px-4 text-sm font-medium text-muted-foreground text-blue-500\">\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                className=\"w-full p-2 text-black bg-white  rounded dark:bg-black dark:text-white focus:outline-none\"\n                value={inputValue}\n                onChange={(e) => {\n                  setInputValue(e.target.value);\n                }}\n                placeholder={\n                  hasCompletion\n                    ? \"Tell AI what to do next\"\n                    : \"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                <ArrowRight />\n              </Toolbar.Button>\n            </div>\n            {hasCompletion ? (\n              <AICompletionCommands\n                editor={editor}\n                onDiscard={() => {\n                  editor.chain().unsetHighlight().focus().run();\n                  onOpenChange(false);\n                }}\n                completion={completion}\n              />\n            ) : (\n              <AISelectorCommands\n                editor={editor}\n                onSelect={(value) => {\n                  setInputValue(value);\n                  inputRef.current.focus();\n                }}\n              />\n            )}\n          </>\n        )}\n      </>\n    </Surface>\n  );\n};\n"],"names":["useLocale","useCompletion","ArrowRight","Sparkles","useCallback","useRef","useState","TextareaAutosize","Markdown","getPrevText","isRTL","AICompletionCommands","AISelectorCommands","Surface","Toolbar","CrazySpinner","ScrollArea","AIEditorPanel","editor","onOpenChange","inputValue","setInputValue","code","view","editorNode","dom","boundigClient","getBoundingClientRect","inputRef","completion","complete","isLoading","api","onResponse","response","status","console","log","onError","e","message","hasCompletion","length","handleClick","body","option","command","language","then","text","chars","className","style","width","div","dir","ref","value","onChange","target","placeholder","autoFocus","onKeyDown","key","Button","onClick","onDiscard","chain","unsetHighlight","focus","run","onSelect","current"],"mappings":"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"}

package/dist/src/fields/TiptapEditor/features/ui/Dropdown/Dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/features/ui/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,qBAAqB,kBAE/B;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,sBAMA,CAAC;AAEF,eAAO,MAAM,cAAc,0DAMxB;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,sBAsBA,CAAC"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/features/ui/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,qBAAqB,kBAE/B;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,sBAMA,CAAC;AAEF,eAAO,MAAM,cAAc,0DAMxB;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,sBA0BA,CAAC"}

package/dist/src/fields/TiptapEditor/features/ui/Dropdown/Dropdown.js

@@ -13,7 +13,11 @@ export const DropdownButton = ({ children, isActive, onClick, disabled, classNam
         type: "button",
         className: buttonClass,
         disabled: disabled,
-        onClick: onClick,
+        onClick: (e)=>{
+            e.preventDefault();
+            e.stopPropagation();
+            onClick();
+        },
         children: children
     });
 };

package/dist/src/fields/TiptapEditor/features/ui/Dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/ui/Dropdown/Dropdown.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"../../../lib/utils/index.js\";\n\nexport const DropdownCategoryTitle = ({\n  children,\n}: {\n  children: React.ReactNode;\n}) => {\n  return (\n    <div className=\"text-[.65rem] font-semibold mb-1 uppercase text-neutral-500 dark:text-neutral-400 px-1.5\">\n      {children}\n    </div>\n  );\n};\n\nexport const DropdownButton = ({\n  children,\n  isActive,\n  onClick,\n  disabled,\n  className,\n}: {\n  children: React.ReactNode;\n  isActive?: boolean;\n  onClick?: () => void;\n  disabled?: boolean;\n  className?: string;\n}) => {\n  const buttonClass = cn(\n    \"flex items-center gap-2 p-1.5 text-sm font-medium text-neutral-500 dark:text-neutral-400 text-left bg-transparent w-full rounded outline-none\",\n    !isActive && !disabled,\n    \"hover:bg-neutral-100 hover:text-neutral-800 dark:hover:bg-neutral-900 dark:hover:text-neutral-200\",\n    isActive &&\n      !disabled &&\n      \"bg-neutral-100 text-neutral-800 dark:bg-neutral-900 dark:text-neutral-200\",\n    disabled && \"text-neutral-400 cursor-not-allowed dark:text-neutral-600\",\n    className\n  );\n\n  return (\n    <button\n      type=\"button\"\n      className={buttonClass}\n      disabled={disabled}\n      onClick={onClick}\n    >\n      {children}\n    </button>\n  );\n};\n"],"names":["React","cn","DropdownCategoryTitle","children","div","className","DropdownButton","isActive","onClick","disabled","buttonClass","button","type"],"mappings":";AAAA,OAAOA,WAAW,QAAQ;AAC1B,SAASC,EAAE,QAAQ,8BAA8B;AAEjD,OAAO,MAAMC,wBAAwB,CAAC,EACpCC,QAAQ,EAGT;IACC,qBACE,KAACC;QAAIC,WAAU;kBACZF;;AAGP,EAAE;AAEF,OAAO,MAAMG,iBAAiB,CAAC,EAC7BH,QAAQ,EACRI,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRJ,SAAS,EAOV;IACC,MAAMK,cAAcT,GAClB,iJACA,CAACM,YAAY,CAACE,UACd,qGACAF,YACE,CAACE,YACD,6EACFA,YAAY,6DACZJ;IAGF,qBACE,KAACM;QACCC,MAAK;QACLP,WAAWK;QACXD,UAAUA;QACVD,SAASA;kBAERL;;AAGP,EAAE"}
+{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/ui/Dropdown/Dropdown.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"../../../lib/utils/index.js\";\n\nexport const DropdownCategoryTitle = ({\n  children,\n}: {\n  children: React.ReactNode;\n}) => {\n  return (\n    <div className=\"text-[.65rem] font-semibold mb-1 uppercase text-neutral-500 dark:text-neutral-400 px-1.5\">\n      {children}\n    </div>\n  );\n};\n\nexport const DropdownButton = ({\n  children,\n  isActive,\n  onClick,\n  disabled,\n  className,\n}: {\n  children: React.ReactNode;\n  isActive?: boolean;\n  onClick?: () => void;\n  disabled?: boolean;\n  className?: string;\n}) => {\n  const buttonClass = cn(\n    \"flex items-center gap-2 p-1.5 text-sm font-medium text-neutral-500 dark:text-neutral-400 text-left bg-transparent w-full rounded outline-none\",\n    !isActive && !disabled,\n    \"hover:bg-neutral-100 hover:text-neutral-800 dark:hover:bg-neutral-900 dark:hover:text-neutral-200\",\n    isActive &&\n      !disabled &&\n      \"bg-neutral-100 text-neutral-800 dark:bg-neutral-900 dark:text-neutral-200\",\n    disabled && \"text-neutral-400 cursor-not-allowed dark:text-neutral-600\",\n    className\n  );\n\n  return (\n    <button\n      type=\"button\"\n      className={buttonClass}\n      disabled={disabled}\n      onClick={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        onClick();\n      }}\n    >\n      {children}\n    </button>\n  );\n};\n"],"names":["React","cn","DropdownCategoryTitle","children","div","className","DropdownButton","isActive","onClick","disabled","buttonClass","button","type","e","preventDefault","stopPropagation"],"mappings":";AAAA,OAAOA,WAAW,QAAQ;AAC1B,SAASC,EAAE,QAAQ,8BAA8B;AAEjD,OAAO,MAAMC,wBAAwB,CAAC,EACpCC,QAAQ,EAGT;IACC,qBACE,KAACC;QAAIC,WAAU;kBACZF;;AAGP,EAAE;AAEF,OAAO,MAAMG,iBAAiB,CAAC,EAC7BH,QAAQ,EACRI,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRJ,SAAS,EAOV;IACC,MAAMK,cAAcT,GAClB,iJACA,CAACM,YAAY,CAACE,UACd,qGACAF,YACE,CAACE,YACD,6EACFA,YAAY,6DACZJ;IAGF,qBACE,KAACM;QACCC,MAAK;QACLP,WAAWK;QACXD,UAAUA;QACVD,SAAS,CAACK;YACRA,EAAEC,cAAc;YAChBD,EAAEE,eAAe;YACjBP;QACF;kBAECL;;AAGP,EAAE"}

package/dist/src/fields/TiptapEditor/hooks/useBlockEditor.d.ts

@@ -1,15 +1,17 @@
 import { Editor } from "@tiptap/react";
+import { openAssetHQType } from "../types.js";
 declare global {
     interface Window {
         editor: Editor | null;
     }
 }
-export declare const useBlockEditor: ({ content, handleChange, }: {
+export declare const useBlockEditor: ({ content, handleChange, openAssetHQHandler, }: {
     content: {
         html: string;
         json: any;
     };
     handleChange: (data: any) => void;
+    openAssetHQHandler: openAssetHQType;
 }) => {
     editor: Editor;
     users: any;

package/dist/src/fields/TiptapEditor/hooks/useBlockEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBlockEditor.d.ts","sourceRoot":"","sources":["../../../../../src/fields/TiptapEditor/hooks/useBlockEditor.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAa,MAAM,eAAe,CAAC;AASlD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;KACvB;CACF;AAED,eAAO,MAAM,cAAc,+BAGxB;IACD,OAAO,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,GAAG,CAAA;KAAE,CAAC;IACrC,YAAY,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;CACnC;;;;;CAoFA,CAAC"}
+{"version":3,"file":"useBlockEditor.d.ts","sourceRoot":"","sources":["../../../../../src/fields/TiptapEditor/hooks/useBlockEditor.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAa,MAAM,eAAe,CAAC;AASlD,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;KACvB;CACF;AAED,eAAO,MAAM,cAAc,mDAIxB;IACD,OAAO,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,GAAG,CAAA;KAAE,CAAC;IACrC,YAAY,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAClC,kBAAkB,EAAE,eAAe,CAAC;CACrC;;;;;CAqFA,CAAC"}

package/dist/src/fields/TiptapEditor/hooks/useBlockEditor.js

@@ -3,10 +3,10 @@ import { useMemo } from "react";
 import { useEditor } from "@tiptap/react";
 import ExtensionKit from "../extensions/extension-kit.js";
 import { useSidebar } from "./useSidebar.js";
+import { useTranslation } from "@payloadcms/ui/providers/Translation";
 import TurndownService from "turndown";
 import { gfm } from "turndown-plugin-gfm";
-import { useTranslation } from "@payloadcms/ui/providers/Translation";
-export const useBlockEditor = ({ content, handleChange })=>{
+export const useBlockEditor = ({ content, handleChange, openAssetHQHandler })=>{
     const leftSidebar = useSidebar();
     const turndownService = new TurndownService({});
     // Use the gfm plugin
@@ -30,6 +30,7 @@ export const useBlockEditor = ({ content, handleChange })=>{
         },
         extensions: [
             ...ExtensionKit({
+                openAssetHQHandler
             })
         ],
         editorProps: {
@@ -71,7 +72,7 @@ export const useBlockEditor = ({ content, handleChange })=>{
     //     setCollabState(event.status)
     //   })
     // }, [provider])
-    if (window) window.editor = editor;
+    if (typeof window != "undefined") window.editor = editor;
     return {
         editor,
         users,

package/dist/src/fields/TiptapEditor/hooks/useBlockEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/fields/TiptapEditor/hooks/useBlockEditor.ts"],"sourcesContent":["\"use client\";\nimport { useMemo } from \"react\";\n\nimport { Editor, useEditor } from \"@tiptap/react\";\n\nimport ExtensionKit from \"../extensions/extension-kit.js\";\nimport { EditorUser } from \"../features/BlockEditor/types.js\";\nimport { useSidebar } from \"./useSidebar.js\";\n\nimport TurndownService from \"turndown\";\nimport { gfm } from \"turndown-plugin-gfm\";\nimport { useTranslation } from \"@payloadcms/ui/providers/Translation\";\ndeclare global {\n  interface Window {\n    editor: Editor | null;\n  }\n}\n\nexport const useBlockEditor = ({\n  content,\n  handleChange,\n}: {\n  content: { html: string; json: any };\n  handleChange: (data: any) => void;\n}) => {\n  const leftSidebar = useSidebar();\n\n  const turndownService = new TurndownService({});\n  // Use the gfm plugin\n  turndownService.use(gfm);\n  turndownService.addRule(\"twitter\", {\n    filter: \"div\",\n    replacement: function (content) {\n      return \"\\n\\n\" + content + \"\\n\\n\";\n    },\n  });\n  const { t, i18n } = useTranslation();\n\n  const editor = useEditor(\n    {\n      content: content?.json ?? content ?? {},\n      autofocus: true,\n      onCreate: ({ editor }) => {\n        // provider?.on('synced', () => {\n        //   if (editor.isEmpty) {\n        //     editor.commands.setContent(initialContent)\n        //   }\n        // })\n      },\n      extensions: [\n        ...ExtensionKit({\n          // provider,\n        }),\n        // Collaboration.configure({\n        //   document: ydoc,\n        // }),\n        // CollaborationCursor.configure({\n        //   provider,\n        //   user: {\n        //     name: randomElement(userNames),\n        //     color: randomElement(userColors),\n        //   },\n        // }),\n      ],\n      editorProps: {\n        attributes: {\n          languages: i18n.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  const users = useMemo(() => {\n    if (!editor?.storage.collaborationCursor?.users) {\n      return [];\n    }\n\n    return editor.storage.collaborationCursor?.users.map((user: EditorUser) => {\n      const names = user.name?.split(\" \");\n      const firstName = names?.[0];\n      const lastName = names?.[names.length - 1];\n      const initials = `${firstName?.[0] || \"?\"}${lastName?.[0] || \"?\"}`;\n\n      return { ...user, initials: initials.length ? initials : \"?\" };\n    });\n  }, [editor?.storage.collaborationCursor?.users]);\n\n  const characterCount = editor?.storage.characterCount || {\n    characters: () => 0,\n    words: () => 0,\n  };\n\n  // useEffect(() => {\n  //   provider?.on('status', (event: { status: WebSocketStatus }) => {\n  //     setCollabState(event.status)\n  //   })\n  // }, [provider])\n\n  if (window) window.editor = editor;\n\n  return { editor, users, characterCount, leftSidebar };\n};\n"],"names":["useMemo","useEditor","ExtensionKit","useSidebar","TurndownService","gfm","useTranslation","useBlockEditor","content","handleChange","leftSidebar","turndownService","use","addRule","filter","replacement","t","i18n","editor","json","autofocus","onCreate","extensions","editorProps","attributes","languages","language","autocomplete","autocorrect","autocapitalize","class","onUpdate","getJSON","users","storage","collaborationCursor","map","user","names","name","split","firstName","lastName","length","initials","characterCount","characters","words","window"],"mappings":"AAAA;AACA,SAASA,OAAO,QAAQ,QAAQ;AAEhC,SAAiBC,SAAS,QAAQ,gBAAgB;AAElD,OAAOC,kBAAkB,iCAAiC;AAE1D,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,qBAAqB,WAAW;AACvC,SAASC,GAAG,QAAQ,sBAAsB;AAC1C,SAASC,cAAc,QAAQ,uCAAuC;AAOtE,OAAO,MAAMC,iBAAiB,CAAC,EAC7BC,OAAO,EACPC,YAAY,EAIb;IACC,MAAMC,cAAcP;IAEpB,MAAMQ,kBAAkB,IAAIP,gBAAgB,CAAC;IAC7C,qBAAqB;IACrBO,gBAAgBC,GAAG,CAACP;IACpBM,gBAAgBE,OAAO,CAAC,WAAW;QACjCC,QAAQ;QACRC,aAAa,SAAUP,OAAO;YAC5B,OAAO,SAASA,UAAU;QAC5B;IACF;IACA,MAAM,EAAEQ,CAAC,EAAEC,IAAI,EAAE,GAAGX;IAEpB,MAAMY,SAASjB,UACb;QACEO,SAASA,SAASW,QAAQX,WAAW,CAAC;QACtCY,WAAW;QACXC,UAAU,CAAC,EAAEH,MAAM,EAAE;QACnB,iCAAiC;QACjC,0BAA0B;QAC1B,iDAAiD;QACjD,MAAM;QACN,KAAK;QACP;QACAI,YAAY;eACPpB,aAAa;YAEhB;SAWD;QACDqB,aAAa;YACXC,YAAY;gBACVC,WAAWR,KAAKS,QAAQ;gBACxBC,cAAc;gBACdC,aAAa;gBACbC,gBAAgB;gBAChBC,OAAO;YACT;QACF;QACAC,UAAU,CAAC,EAAEb,MAAM,EAAE;YACnBT,aAAaS,QAAQc,aAAa,CAAC;QACrC;IACF,GACA,EAAE;IAEJ,MAAMC,QAAQjC,QAAQ;QACpB,IAAI,CAACkB,QAAQgB,QAAQC,qBAAqBF,OAAO;YAC/C,OAAO,EAAE;QACX;QAEA,OAAOf,OAAOgB,OAAO,CAACC,mBAAmB,EAAEF,MAAMG,IAAI,CAACC;YACpD,MAAMC,QAAQD,KAAKE,IAAI,EAAEC,MAAM;YAC/B,MAAMC,YAAYH,OAAO,CAAC,EAAE;YAC5B,MAAMI,WAAWJ,OAAO,CAACA,MAAMK,MAAM,GAAG,EAAE;YAC1C,MAAMC,WAAW,CAAC,EAAEH,WAAW,CAAC,EAAE,IAAI,IAAI,EAAEC,UAAU,CAAC,EAAE,IAAI,IAAI,CAAC;YAElE,OAAO;gBAAE,GAAGL,IAAI;gBAAEO,UAAUA,SAASD,MAAM,GAAGC,WAAW;YAAI;QAC/D;IACF,GAAG;QAAC1B,QAAQgB,QAAQC,qBAAqBF;KAAM;IAE/C,MAAMY,iBAAiB3B,QAAQgB,QAAQW,kBAAkB;QACvDC,YAAY,IAAM;QAClBC,OAAO,IAAM;IACf;IAEA,oBAAoB;IACpB,qEAAqE;IACrE,mCAAmC;IACnC,OAAO;IACP,iBAAiB;IAEjB,IAAIC,QAAQA,OAAO9B,MAAM,GAAGA;IAE5B,OAAO;QAAEA;QAAQe;QAAOY;QAAgBnC;IAAY;AACtD,EAAE"}
+{"version":3,"sources":["../../../../../src/fields/TiptapEditor/hooks/useBlockEditor.ts"],"sourcesContent":["\"use client\";\nimport { useMemo } from \"react\";\n\nimport { Editor, useEditor } from \"@tiptap/react\";\n\nimport ExtensionKit from \"../extensions/extension-kit.js\";\nimport { EditorUser } from \"../features/BlockEditor/types.js\";\nimport { useSidebar } from \"./useSidebar.js\";\n\nimport { useTranslation } from \"@payloadcms/ui/providers/Translation\";\nimport TurndownService from \"turndown\";\nimport { gfm } from \"turndown-plugin-gfm\";\nimport { openAssetHQType } from \"../types.js\";\ndeclare global {\n  interface Window {\n    editor: Editor | null;\n  }\n}\n\nexport const useBlockEditor = ({\n  content,\n  handleChange,\n  openAssetHQHandler,\n}: {\n  content: { html: string; json: any };\n  handleChange: (data: any) => void;\n  openAssetHQHandler: openAssetHQType;\n}) => {\n  const leftSidebar = useSidebar();\n\n  const turndownService = new TurndownService({});\n  // Use the gfm plugin\n  turndownService.use(gfm);\n  turndownService.addRule(\"twitter\", {\n    filter: \"div\",\n    replacement: function (content) {\n      return \"\\n\\n\" + content + \"\\n\\n\";\n    },\n  });\n  const { t, i18n } = useTranslation();\n\n  const editor = useEditor(\n    {\n      content: content?.json ?? content ?? {},\n      autofocus: true,\n      onCreate: ({ editor }) => {\n        // provider?.on('synced', () => {\n        //   if (editor.isEmpty) {\n        //     editor.commands.setContent(initialContent)\n        //   }\n        // })\n      },\n      extensions: [\n        ...ExtensionKit({\n          openAssetHQHandler,\n          // provider,\n        }),\n        // Collaboration.configure({\n        //   document: ydoc,\n        // }),\n        // CollaborationCursor.configure({\n        //   provider,\n        //   user: {\n        //     name: randomElement(userNames),\n        //     color: randomElement(userColors),\n        //   },\n        // }),\n      ],\n      editorProps: {\n        attributes: {\n          languages: i18n.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  const users = useMemo(() => {\n    if (!editor?.storage.collaborationCursor?.users) {\n      return [];\n    }\n\n    return editor.storage.collaborationCursor?.users.map((user: EditorUser) => {\n      const names = user.name?.split(\" \");\n      const firstName = names?.[0];\n      const lastName = names?.[names.length - 1];\n      const initials = `${firstName?.[0] || \"?\"}${lastName?.[0] || \"?\"}`;\n\n      return { ...user, initials: initials.length ? initials : \"?\" };\n    });\n  }, [editor?.storage.collaborationCursor?.users]);\n\n  const characterCount = editor?.storage.characterCount || {\n    characters: () => 0,\n    words: () => 0,\n  };\n\n  // useEffect(() => {\n  //   provider?.on('status', (event: { status: WebSocketStatus }) => {\n  //     setCollabState(event.status)\n  //   })\n  // }, [provider])\n\n  if (typeof window != \"undefined\") window.editor = editor;\n\n  return { editor, users, characterCount, leftSidebar };\n};\n"],"names":["useMemo","useEditor","ExtensionKit","useSidebar","useTranslation","TurndownService","gfm","useBlockEditor","content","handleChange","openAssetHQHandler","leftSidebar","turndownService","use","addRule","filter","replacement","t","i18n","editor","json","autofocus","onCreate","extensions","editorProps","attributes","languages","language","autocomplete","autocorrect","autocapitalize","class","onUpdate","getJSON","users","storage","collaborationCursor","map","user","names","name","split","firstName","lastName","length","initials","characterCount","characters","words","window"],"mappings":"AAAA;AACA,SAASA,OAAO,QAAQ,QAAQ;AAEhC,SAAiBC,SAAS,QAAQ,gBAAgB;AAElD,OAAOC,kBAAkB,iCAAiC;AAE1D,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,cAAc,QAAQ,uCAAuC;AACtE,OAAOC,qBAAqB,WAAW;AACvC,SAASC,GAAG,QAAQ,sBAAsB;AAQ1C,OAAO,MAAMC,iBAAiB,CAAC,EAC7BC,OAAO,EACPC,YAAY,EACZC,kBAAkB,EAKnB;IACC,MAAMC,cAAcR;IAEpB,MAAMS,kBAAkB,IAAIP,gBAAgB,CAAC;IAC7C,qBAAqB;IACrBO,gBAAgBC,GAAG,CAACP;IACpBM,gBAAgBE,OAAO,CAAC,WAAW;QACjCC,QAAQ;QACRC,aAAa,SAAUR,OAAO;YAC5B,OAAO,SAASA,UAAU;QAC5B;IACF;IACA,MAAM,EAAES,CAAC,EAAEC,IAAI,EAAE,GAAGd;IAEpB,MAAMe,SAASlB,UACb;QACEO,SAASA,SAASY,QAAQZ,WAAW,CAAC;QACtCa,WAAW;QACXC,UAAU,CAAC,EAAEH,MAAM,EAAE;QACnB,iCAAiC;QACjC,0BAA0B;QAC1B,iDAAiD;QACjD,MAAM;QACN,KAAK;QACP;QACAI,YAAY;eACPrB,aAAa;gBACdQ;YAEF;SAWD;QACDc,aAAa;YACXC,YAAY;gBACVC,WAAWR,KAAKS,QAAQ;gBACxBC,cAAc;gBACdC,aAAa;gBACbC,gBAAgB;gBAChBC,OAAO;YACT;QACF;QACAC,UAAU,CAAC,EAAEb,MAAM,EAAE;YACnBV,aAAaU,QAAQc,aAAa,CAAC;QACrC;IACF,GACA,EAAE;IAEJ,MAAMC,QAAQlC,QAAQ;QACpB,IAAI,CAACmB,QAAQgB,QAAQC,qBAAqBF,OAAO;YAC/C,OAAO,EAAE;QACX;QAEA,OAAOf,OAAOgB,OAAO,CAACC,mBAAmB,EAAEF,MAAMG,IAAI,CAACC;YACpD,MAAMC,QAAQD,KAAKE,IAAI,EAAEC,MAAM;YAC/B,MAAMC,YAAYH,OAAO,CAAC,EAAE;YAC5B,MAAMI,WAAWJ,OAAO,CAACA,MAAMK,MAAM,GAAG,EAAE;YAC1C,MAAMC,WAAW,CAAC,EAAEH,WAAW,CAAC,EAAE,IAAI,IAAI,EAAEC,UAAU,CAAC,EAAE,IAAI,IAAI,CAAC;YAElE,OAAO;gBAAE,GAAGL,IAAI;gBAAEO,UAAUA,SAASD,MAAM,GAAGC,WAAW;YAAI;QAC/D;IACF,GAAG;QAAC1B,QAAQgB,QAAQC,qBAAqBF;KAAM;IAE/C,MAAMY,iBAAiB3B,QAAQgB,QAAQW,kBAAkB;QACvDC,YAAY,IAAM;QAClBC,OAAO,IAAM;IACf;IAEA,oBAAoB;IACpB,qEAAqE;IACrE,mCAAmC;IACnC,OAAO;IACP,iBAAiB;IAEjB,IAAI,OAAOC,UAAU,aAAaA,OAAO9B,MAAM,GAAGA;IAElD,OAAO;QAAEA;QAAQe;QAAOY;QAAgBnC;IAAY;AACtD,EAAE"}

package/dist/src/fields/TiptapEditor/lib/extract.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"extract.d.ts","sourceRoot":"","sources":["../../../../../src/fields/TiptapEditor/lib/extract.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,iBAAiB,kBAAmB,MAAM,uCAWtD,CAAC;AAEF,eAAO,MAAM,eAAe,SAAU,GAAG,QAWxC,CAAC"}
+{"version":3,"file":"extract.d.ts","sourceRoot":"","sources":["../../../../../src/fields/TiptapEditor/lib/extract.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,kBAAmB,MAAM,uCAWtD,CAAC;AAEF,eAAO,MAAM,eAAe,SAAU,GAAG,QAWxC,CAAC"}

package/dist/src/fields/TiptapEditor/lib/extract.js

@@ -1,13 +1,13 @@
 import { Editor } from "@tiptap/core";
-import { Markdown } from "tiptap-markdown";
 import ExtensionKit from "../extensions/extension-kit.js";
 export const extractTiptapJson = (markdownValue)=>{
     const editor = new Editor({
         content: markdownValue,
         extensions: [
             ...ExtensionKit({
-            }),
-            Markdown
+                // provider,
+                openAssetHQHandler: ()=>{}
+            })
         ]
     });
     return editor.getJSON();
@@ -17,8 +17,9 @@ export const extractMarkdown = (json)=>{
         content: json,
         extensions: [
             ...ExtensionKit({
-            }),
-            Markdown
+                // provider,
+                openAssetHQHandler: ()=>{}
+            })
         ]
     });
     return editor.storage.markdown.getMarkdown();

package/dist/src/fields/TiptapEditor/lib/extract.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/fields/TiptapEditor/lib/extract.ts"],"sourcesContent":["import { Editor } from \"@tiptap/core\";\nimport { Markdown } from \"tiptap-markdown\";\nimport ExtensionKit from \"../extensions/extension-kit.js\";\n\nexport const extractTiptapJson = (markdownValue: string) => {\n  const editor = new Editor({\n    content: markdownValue,\n    extensions: [\n      ...ExtensionKit({\n        // provider,\n      }),\n      Markdown,\n    ],\n  });\n  return editor.getJSON();\n};\n\nexport const extractMarkdown = (json: any) => {\n  const editor = new Editor({\n    content: json,\n    extensions: [\n      ...ExtensionKit({\n        // provider,\n      }),\n      Markdown,\n    ],\n  });\n  return editor.storage.markdown.getMarkdown();\n};\n"],"names":["Editor","Markdown","ExtensionKit","extractTiptapJson","markdownValue","editor","content","extensions","getJSON","extractMarkdown","json","storage","markdown","getMarkdown"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,SAASC,QAAQ,QAAQ,kBAAkB;AAC3C,OAAOC,kBAAkB,iCAAiC;AAE1D,OAAO,MAAMC,oBAAoB,CAACC;IAChC,MAAMC,SAAS,IAAIL,OAAO;QACxBM,SAASF;QACTG,YAAY;eACPL,aAAa;YAEhB;YACAD;SACD;IACH;IACA,OAAOI,OAAOG,OAAO;AACvB,EAAE;AAEF,OAAO,MAAMC,kBAAkB,CAACC;IAC9B,MAAML,SAAS,IAAIL,OAAO;QACxBM,SAASI;QACTH,YAAY;eACPL,aAAa;YAEhB;YACAD;SACD;IACH;IACA,OAAOI,OAAOM,OAAO,CAACC,QAAQ,CAACC,WAAW;AAC5C,EAAE"}
+{"version":3,"sources":["../../../../../src/fields/TiptapEditor/lib/extract.ts"],"sourcesContent":["import { Editor } from \"@tiptap/core\";\nimport ExtensionKit from \"../extensions/extension-kit.js\";\n\nexport const extractTiptapJson = (markdownValue: string) => {\n  const editor = new Editor({\n    content: markdownValue,\n    extensions: [\n      ...ExtensionKit({\n        // provider,\n        openAssetHQHandler: () => {},\n      }),\n    ],\n  });\n  return editor.getJSON();\n};\n\nexport const extractMarkdown = (json: any) => {\n  const editor = new Editor({\n    content: json,\n    extensions: [\n      ...ExtensionKit({\n        // provider,\n        openAssetHQHandler: () => {},\n      }),\n    ],\n  });\n  return editor.storage.markdown.getMarkdown();\n};\n"],"names":["Editor","ExtensionKit","extractTiptapJson","markdownValue","editor","content","extensions","openAssetHQHandler","getJSON","extractMarkdown","json","storage","markdown","getMarkdown"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,kBAAkB,iCAAiC;AAE1D,OAAO,MAAMC,oBAAoB,CAACC;IAChC,MAAMC,SAAS,IAAIJ,OAAO;QACxBK,SAASF;QACTG,YAAY;eACPL,aAAa;gBACd,YAAY;gBACZM,oBAAoB,KAAO;YAC7B;SACD;IACH;IACA,OAAOH,OAAOI,OAAO;AACvB,EAAE;AAEF,OAAO,MAAMC,kBAAkB,CAACC;IAC9B,MAAMN,SAAS,IAAIJ,OAAO;QACxBK,SAASK;QACTJ,YAAY;eACPL,aAAa;gBACd,YAAY;gBACZM,oBAAoB,KAAO;YAC7B;SACD;IACH;IACA,OAAOH,OAAOO,OAAO,CAACC,QAAQ,CAACC,WAAW;AAC5C,EAAE"}

package/dist/src/fields/TiptapEditor/types.d.js

@@ -0,0 +1,3 @@
+export { };
+
+//# sourceMappingURL=types.d.js.map

package/dist/src/fields/TiptapEditor/types.d.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/fields/TiptapEditor/types.d.ts"],"sourcesContent":["export type openAssetHQType = (\n  listener: (linkOfAsset: string) => void,\n  file?: File\n) => void;\n"],"names":[],"mappings":"AAAA,WAGU"}

package/dist/src/styles.css

@@ -1841,10 +1841,6 @@ select {
   max-height: 20rem;
 }
 
-.max-h-\[400px\] {
-  max-height: 400px;
-}
-
 .max-h-\[min\(80vh\2c 24rem\)\] {
   max-height: min(80vh,24rem);
 }
@@ -2057,6 +2053,10 @@ select {
           user-select: none;
 }
 
+.resize {
+  resize: both;
+}
+
 .appearance-none {
   -webkit-appearance: none;
      -moz-appearance: none;