payload-richtext-tiptap 0.0.73 → 0.0.75
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/fields/TiptapEditor/extensions/InsideLinks/InsideLinksComponent.d.ts.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/InsideLinks/InsideLinksComponent.js +4 -3
- package/dist/src/fields/TiptapEditor/extensions/InsideLinks/InsideLinksComponent.js.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/SlashCommand/groups.js +21 -25
- package/dist/src/fields/TiptapEditor/extensions/SlashCommand/groups.js.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/extension-kit.d.ts +1 -2
- package/dist/src/fields/TiptapEditor/extensions/extension-kit.d.ts.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/extension-kit.js +3 -14
- package/dist/src/fields/TiptapEditor/extensions/extension-kit.js.map +1 -1
- package/dist/src/fields/TiptapEditor/features/BlockEditor/BlockEditor.d.ts.map +1 -1
- package/dist/src/fields/TiptapEditor/features/BlockEditor/BlockEditor.js +4 -3
- package/dist/src/fields/TiptapEditor/features/BlockEditor/BlockEditor.js.map +1 -1
- package/dist/src/fields/TiptapEditor/features/menus/TextMenu/TextMenu.js +2 -6
- package/dist/src/fields/TiptapEditor/features/menus/TextMenu/TextMenu.js.map +1 -1
- package/dist/src/fields/TiptapEditor/features/menus/TextMenu/hooks/useTextmenuCommands.d.ts +0 -1
- package/dist/src/fields/TiptapEditor/features/menus/TextMenu/hooks/useTextmenuCommands.d.ts.map +1 -1
- package/dist/src/fields/TiptapEditor/features/menus/TextMenu/hooks/useTextmenuCommands.js +10 -9
- package/dist/src/fields/TiptapEditor/features/menus/TextMenu/hooks/useTextmenuCommands.js.map +1 -1
- package/dist/src/fields/TiptapEditor/features/menus/TextMenu/hooks/useTextmenuContentTypes.js +1 -24
- package/dist/src/fields/TiptapEditor/features/menus/TextMenu/hooks/useTextmenuContentTypes.js.map +1 -1
- package/dist/src/fields/TiptapEditor/features/panels/AICommandPanel/AICommandPanel.d.ts.map +1 -1
- package/dist/src/fields/TiptapEditor/features/panels/AICommandPanel/AICommandPanel.js +1 -2
- package/dist/src/fields/TiptapEditor/features/panels/AICommandPanel/AICommandPanel.js.map +1 -1
- package/dist/src/fields/TiptapEditor/features/panels/AIEditorPanel/AIEditorPanel.d.ts.map +1 -1
- package/dist/src/fields/TiptapEditor/features/panels/AIEditorPanel/AIEditorPanel.js +1 -2
- package/dist/src/fields/TiptapEditor/features/panels/AIEditorPanel/AIEditorPanel.js.map +1 -1
- package/dist/src/styles.css +74 -74
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
package/dist/src/fields/TiptapEditor/features/menus/TextMenu/hooks/useTextmenuContentTypes.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useMemo } from "react";
|
|
2
|
-
import { Pilcrow, Heading1, Heading2, Heading3
|
|
2
|
+
import { Pilcrow, Heading1, Heading2, Heading3 } from "lucide-react";
|
|
3
3
|
import i18next from "i18next";
|
|
4
4
|
export const useTextmenuContentTypes = (editor)=>{
|
|
5
5
|
const options = useMemo(()=>{
|
|
@@ -62,29 +62,6 @@ export const useTextmenuContentTypes = (editor)=>{
|
|
|
62
62
|
}),
|
|
63
63
|
label: i18next.t("heading3") || "Heading 3",
|
|
64
64
|
type: "option"
|
|
65
|
-
},
|
|
66
|
-
{
|
|
67
|
-
type: "category",
|
|
68
|
-
label: i18next.t("lists") || "Lists",
|
|
69
|
-
id: "lists"
|
|
70
|
-
},
|
|
71
|
-
{
|
|
72
|
-
icon: List,
|
|
73
|
-
onClick: ()=>editor.chain().focus().toggleBulletList().run(),
|
|
74
|
-
id: "bulletList",
|
|
75
|
-
disabled: ()=>!editor.can().toggleBulletList(),
|
|
76
|
-
isActive: ()=>editor.isActive("bulletList"),
|
|
77
|
-
label: i18next.t("bulletList") || "Bullet list",
|
|
78
|
-
type: "option"
|
|
79
|
-
},
|
|
80
|
-
{
|
|
81
|
-
icon: ListOrdered,
|
|
82
|
-
onClick: ()=>editor.chain().focus().toggleOrderedList().run(),
|
|
83
|
-
id: "orderedList",
|
|
84
|
-
disabled: ()=>!editor.can().toggleOrderedList(),
|
|
85
|
-
isActive: ()=>editor.isActive("orderedList"),
|
|
86
|
-
label: i18next.t("numberedList") || "Numbered list",
|
|
87
|
-
type: "option"
|
|
88
65
|
}
|
|
89
66
|
];
|
|
90
67
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
package/dist/src/fields/TiptapEditor/features/menus/TextMenu/hooks/useTextmenuContentTypes.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../../../src/fields/TiptapEditor/features/menus/TextMenu/hooks/useTextmenuContentTypes.ts"],"sourcesContent":["import { Editor } from \"@tiptap/react\";\nimport { useMemo } from \"react\";\nimport { ContentPickerOptions } from \"../components/ContentTypePicker.js\";\nimport {\n Pilcrow,\n Heading1,\n Heading2,\n Heading3,\n List,\n ListOrdered,\n ListTodo,\n} from \"lucide-react\";\nimport i18next from \"i18next\";\n\nexport const useTextmenuContentTypes = (editor: Editor) => {\n const options = useMemo<ContentPickerOptions>(() => {\n return [\n {\n type: \"category\",\n label: i18next.t(\"hierarchy\") || \"Hierarchy\",\n id: \"hierarchy\",\n },\n {\n icon: Pilcrow,\n onClick: () =>\n editor\n .chain()\n .focus()\n .lift(\"taskItem\")\n .liftListItem(\"listItem\")\n .setParagraph()\n .run(),\n id: \"paragraph\",\n disabled: () => !editor.can().setParagraph(),\n isActive: () =>\n editor.isActive(\"paragraph\") &&\n !editor.isActive(\"orderedList\") &&\n !editor.isActive(\"bulletList\") &&\n !editor.isActive(\"taskList\"),\n label: i18next.t(\"paragraph\") || \"Paragraph\",\n type: \"option\",\n },\n {\n icon: Heading1,\n onClick: () =>\n editor\n .chain()\n .focus()\n .lift(\"taskItem\")\n .liftListItem(\"listItem\")\n .setHeading({ level: 1 })\n .run(),\n id: \"heading1\",\n disabled: () => !editor.can().setHeading({ level: 1 }),\n isActive: () => editor.isActive(\"heading\", { level: 1 }),\n label: i18next.t(\"heading1\") || \"Heading 1\",\n type: \"option\",\n },\n {\n icon: Heading2,\n onClick: () =>\n editor\n .chain()\n .focus()\n .lift(\"taskItem\")\n .liftListItem(\"listItem\")\n .setHeading({ level: 2 })\n .run(),\n id: \"heading2\",\n disabled: () => !editor.can().setHeading({ level: 2 }),\n isActive: () => editor.isActive(\"heading\", { level: 2 }),\n label: i18next.t(\"heading2\") || \"Heading 2\",\n type: \"option\",\n },\n {\n icon: Heading3,\n onClick: () =>\n editor\n .chain()\n .focus()\n .lift(\"taskItem\")\n .liftListItem(\"listItem\")\n .setHeading({ level: 3 })\n .run(),\n id: \"heading3\",\n disabled: () => !editor.can().setHeading({ level: 3 }),\n isActive: () => editor.isActive(\"heading\", { level: 3 }),\n label: i18next.t(\"heading3\") || \"Heading 3\",\n type: \"option\",\n },\n {\n
|
|
1
|
+
{"version":3,"sources":["../../../../../../../../src/fields/TiptapEditor/features/menus/TextMenu/hooks/useTextmenuContentTypes.ts"],"sourcesContent":["import { Editor } from \"@tiptap/react\";\nimport { useMemo } from \"react\";\nimport { ContentPickerOptions } from \"../components/ContentTypePicker.js\";\nimport {\n Pilcrow,\n Heading1,\n Heading2,\n Heading3,\n List,\n ListOrdered,\n ListTodo,\n} from \"lucide-react\";\nimport i18next from \"i18next\";\n\nexport const useTextmenuContentTypes = (editor: Editor) => {\n const options = useMemo<ContentPickerOptions>(() => {\n return [\n {\n type: \"category\",\n label: i18next.t(\"hierarchy\") || \"Hierarchy\",\n id: \"hierarchy\",\n },\n {\n icon: Pilcrow,\n onClick: () =>\n editor\n .chain()\n .focus()\n .lift(\"taskItem\")\n .liftListItem(\"listItem\")\n .setParagraph()\n .run(),\n id: \"paragraph\",\n disabled: () => !editor.can().setParagraph(),\n isActive: () =>\n editor.isActive(\"paragraph\") &&\n !editor.isActive(\"orderedList\") &&\n !editor.isActive(\"bulletList\") &&\n !editor.isActive(\"taskList\"),\n label: i18next.t(\"paragraph\") || \"Paragraph\",\n type: \"option\",\n },\n {\n icon: Heading1,\n onClick: () =>\n editor\n .chain()\n .focus()\n .lift(\"taskItem\")\n .liftListItem(\"listItem\")\n .setHeading({ level: 1 })\n .run(),\n id: \"heading1\",\n disabled: () => !editor.can().setHeading({ level: 1 }),\n isActive: () => editor.isActive(\"heading\", { level: 1 }),\n label: i18next.t(\"heading1\") || \"Heading 1\",\n type: \"option\",\n },\n {\n icon: Heading2,\n onClick: () =>\n editor\n .chain()\n .focus()\n .lift(\"taskItem\")\n .liftListItem(\"listItem\")\n .setHeading({ level: 2 })\n .run(),\n id: \"heading2\",\n disabled: () => !editor.can().setHeading({ level: 2 }),\n isActive: () => editor.isActive(\"heading\", { level: 2 }),\n label: i18next.t(\"heading2\") || \"Heading 2\",\n type: \"option\",\n },\n {\n icon: Heading3,\n onClick: () =>\n editor\n .chain()\n .focus()\n .lift(\"taskItem\")\n .liftListItem(\"listItem\")\n .setHeading({ level: 3 })\n .run(),\n id: \"heading3\",\n disabled: () => !editor.can().setHeading({ level: 3 }),\n isActive: () => editor.isActive(\"heading\", { level: 3 }),\n label: i18next.t(\"heading3\") || \"Heading 3\",\n type: \"option\",\n },\n // {\n // type: \"category\",\n // label: i18next.t(\"lists\") || \"Lists\",\n // id: \"lists\",\n // },\n // {\n // icon: List,\n // onClick: () => editor.chain().focus().toggleBulletList().run(),\n // id: \"bulletList\",\n // disabled: () => !editor.can().toggleBulletList(),\n // isActive: () => editor.isActive(\"bulletList\"),\n // label: i18next.t(\"bulletList\") || \"Bullet list\",\n // type: \"option\",\n // },\n // {\n // icon: ListOrdered,\n // onClick: () => editor.chain().focus().toggleOrderedList().run(),\n // id: \"orderedList\",\n // disabled: () => !editor.can().toggleOrderedList(),\n // isActive: () => editor.isActive(\"orderedList\"),\n // label: i18next.t(\"numberedList\") || \"Numbered list\",\n // type: \"option\",\n // },\n // {\n // icon: ListTodo,\n // onClick: () => editor.chain().focus().toggleTaskList().run(),\n // id: 'todoList',\n // disabled: () => !editor.can().toggleTaskList(),\n // isActive: () => editor.isActive('taskList'),\n // label: 'Todo list',\n // type: 'option',\n // },\n ];\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [editor, editor.state]);\n\n return options;\n};\n"],"names":["useMemo","Pilcrow","Heading1","Heading2","Heading3","i18next","useTextmenuContentTypes","editor","options","type","label","t","id","icon","onClick","chain","focus","lift","liftListItem","setParagraph","run","disabled","can","isActive","setHeading","level","state"],"mappings":"AACA,SAASA,OAAO,QAAQ,QAAQ;AAEhC,SACEC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,QAIH,eAAe;AACtB,OAAOC,aAAa,UAAU;AAE9B,OAAO,MAAMC,0BAA0B,CAACC;IACtC,MAAMC,UAAUR,QAA8B;QAC5C,OAAO;YACL;gBACES,MAAM;gBACNC,OAAOL,QAAQM,CAAC,CAAC,gBAAgB;gBACjCC,IAAI;YACN;YACA;gBACEC,MAAMZ;gBACNa,SAAS,IACPP,OACGQ,KAAK,GACLC,KAAK,GACLC,IAAI,CAAC,YACLC,YAAY,CAAC,YACbC,YAAY,GACZC,GAAG;gBACRR,IAAI;gBACJS,UAAU,IAAM,CAACd,OAAOe,GAAG,GAAGH,YAAY;gBAC1CI,UAAU,IACRhB,OAAOgB,QAAQ,CAAC,gBAChB,CAAChB,OAAOgB,QAAQ,CAAC,kBACjB,CAAChB,OAAOgB,QAAQ,CAAC,iBACjB,CAAChB,OAAOgB,QAAQ,CAAC;gBACnBb,OAAOL,QAAQM,CAAC,CAAC,gBAAgB;gBACjCF,MAAM;YACR;YACA;gBACEI,MAAMX;gBACNY,SAAS,IACPP,OACGQ,KAAK,GACLC,KAAK,GACLC,IAAI,CAAC,YACLC,YAAY,CAAC,YACbM,UAAU,CAAC;wBAAEC,OAAO;oBAAE,GACtBL,GAAG;gBACRR,IAAI;gBACJS,UAAU,IAAM,CAACd,OAAOe,GAAG,GAAGE,UAAU,CAAC;wBAAEC,OAAO;oBAAE;gBACpDF,UAAU,IAAMhB,OAAOgB,QAAQ,CAAC,WAAW;wBAAEE,OAAO;oBAAE;gBACtDf,OAAOL,QAAQM,CAAC,CAAC,eAAe;gBAChCF,MAAM;YACR;YACA;gBACEI,MAAMV;gBACNW,SAAS,IACPP,OACGQ,KAAK,GACLC,KAAK,GACLC,IAAI,CAAC,YACLC,YAAY,CAAC,YACbM,UAAU,CAAC;wBAAEC,OAAO;oBAAE,GACtBL,GAAG;gBACRR,IAAI;gBACJS,UAAU,IAAM,CAACd,OAAOe,GAAG,GAAGE,UAAU,CAAC;wBAAEC,OAAO;oBAAE;gBACpDF,UAAU,IAAMhB,OAAOgB,QAAQ,CAAC,WAAW;wBAAEE,OAAO;oBAAE;gBACtDf,OAAOL,QAAQM,CAAC,CAAC,eAAe;gBAChCF,MAAM;YACR;YACA;gBACEI,MAAMT;gBACNU,SAAS,IACPP,OACGQ,KAAK,GACLC,KAAK,GACLC,IAAI,CAAC,YACLC,YAAY,CAAC,YACbM,UAAU,CAAC;wBAAEC,OAAO;oBAAE,GACtBL,GAAG;gBACRR,IAAI;gBACJS,UAAU,IAAM,CAACd,OAAOe,GAAG,GAAGE,UAAU,CAAC;wBAAEC,OAAO;oBAAE;gBACpDF,UAAU,IAAMhB,OAAOgB,QAAQ,CAAC,WAAW;wBAAEE,OAAO;oBAAE;gBACtDf,OAAOL,QAAQM,CAAC,CAAC,eAAe;gBAChCF,MAAM;YACR;SAiCD;IACD,uDAAuD;IACzD,GAAG;QAACF;QAAQA,OAAOmB,KAAK;KAAC;IAEzB,OAAOlB;AACT,EAAE"}
|
|
@@ -1 +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;
|
|
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,qFAiV1B,CAAC"}
|
|
@@ -7,7 +7,6 @@ import Markdown from "react-markdown";
|
|
|
7
7
|
import TextareaAutosize from "react-textarea-autosize";
|
|
8
8
|
import { useLocale } from "@payloadcms/ui/providers/Locale";
|
|
9
9
|
import { getPrevText } from "../../../lib/utils/index.js";
|
|
10
|
-
import { isRTL } from "../../../lib/utils/isRtl.js";
|
|
11
10
|
import CrazySpinner from "../../ui/crazy-spinner.js";
|
|
12
11
|
import { DropdownButton } from "../../ui/Dropdown/Dropdown.js";
|
|
13
12
|
import { Icon } from "../../ui/Icon.js";
|
|
@@ -192,7 +191,7 @@ export const AICommandPanel = /*#__PURE__*/ forwardRef(({ editor, onOpenChange,
|
|
|
192
191
|
className: "flex w-full",
|
|
193
192
|
children: /*#__PURE__*/ _jsx(ScrollArea, {
|
|
194
193
|
className: "h-72 prose p-2 px-4 prose-sm w-full max-w-none",
|
|
195
|
-
dir:
|
|
194
|
+
dir: i18next.dir(),
|
|
196
195
|
children: /*#__PURE__*/ _jsx(Markdown, {
|
|
197
196
|
className: "w-full",
|
|
198
197
|
children: completion
|
|
@@ -1 +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 { isRTL } from \"../../../lib/utils/isRtl.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 // 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: {\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 },\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={isRTL(completion) ? \"rtl\" : \"ltr\"}\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","isRTL","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","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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"}
|
|
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 // 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: {\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 },\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","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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"}
|
|
@@ -1 +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;
|
|
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;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"}
|
|
@@ -7,7 +7,6 @@ import { useCallback, useRef, useState } from "react";
|
|
|
7
7
|
import TextareaAutosize from "react-textarea-autosize";
|
|
8
8
|
import Markdown from "react-markdown";
|
|
9
9
|
import { getPrevText } from "../../../lib/utils/index.js";
|
|
10
|
-
import { isRTL } from "../../../lib/utils/isRtl.js";
|
|
11
10
|
import AICompletionCommands from "../../menus/TextMenu/components/ai-completion-command.js";
|
|
12
11
|
import AISelectorCommands from "../../menus/TextMenu/components/ai-selector-commands.js";
|
|
13
12
|
import { Surface } from "../../ui/Surface.js";
|
|
@@ -85,7 +84,7 @@ export const AIEditorPanel = ({ editor, onOpenChange })=>{
|
|
|
85
84
|
children: /*#__PURE__*/ _jsx(ScrollArea, {
|
|
86
85
|
children: /*#__PURE__*/ _jsx("div", {
|
|
87
86
|
className: "prose p-2 px-4 prose-sm",
|
|
88
|
-
dir:
|
|
87
|
+
dir: i18next.dir(),
|
|
89
88
|
children: /*#__PURE__*/ _jsx(Markdown, {
|
|
90
89
|
children: completion
|
|
91
90
|
})
|
|
@@ -1 +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, 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
|
|
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, 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 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\";\nimport i18next from \"i18next\";\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={i18next.dir()}\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 ? 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 <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 messages={completion}\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","useRef","useState","TextareaAutosize","Markdown","getPrevText","AICompletionCommands","AISelectorCommands","Surface","Toolbar","CrazySpinner","ScrollArea","i18next","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","t","autoFocus","onKeyDown","key","Button","onClick","onDiscard","chain","unsetHighlight","focus","run","messages","onSelect","options"],"mappings":"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"}
|