payload-richtext-tiptap 0.0.46 → 0.0.48

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

@@ -46,8 +46,8 @@ const options = [
         icon: WrapText
     }
 ];
-const AISelectorCommands = ({ onSelect, editor })=>{
-    const { status, messages, input, submitMessage, handleInputChange } = useAssistant({
+const AISelectorCommands = ({ messages, onSelect, editor })=>{
+    const { status, input, submitMessage, handleInputChange } = useAssistant({
         api: "/api/assistant"
     });
     const { code } = useLocale();
@@ -92,7 +92,7 @@ const AISelectorCommands = ({ onSelect, editor })=>{
                                 languages.map((lang)=>/*#__PURE__*/ _jsx(Toolbar.Button, {
                                         onClick: ()=>{
                                             const { from, to, empty } = editor.state.selection;
-                                            const content = editor.state.doc.textBetween(from, to, " ");
+                                            const content = messages ? messages ?? "" : editor.state.doc.textBetween(from, to, " ");
                                             onSelect(content, {
                                                 option: "translate",
                                                 language: lang.value
@@ -114,7 +114,7 @@ const AISelectorCommands = ({ onSelect, editor })=>{
                     // }}
                     onClick: ()=>{
                         const { from, to, empty } = editor.state.selection;
-                        const content = editor.state.doc.textBetween(from, to, " ");
+                        const content = messages ? messages ?? "" : editor.state.doc.textBetween(from, to, " ");
                         onSelect(content, {
                             option: option.value,
                             language: code ?? "en"
@@ -137,7 +137,7 @@ const AISelectorCommands = ({ onSelect, editor })=>{
             }),
             /*#__PURE__*/ _jsxs(Toolbar.Button, {
                 onClick: ()=>{
-                    const text = getPrevText(editor, {
+                    const text = messages ? messages : getPrevText(editor, {
                         chars: 5000
                     });
                     onSelect(text, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../src/fields/TiptapEditor/features/menus/TextMenu/components/ai-selector-commands.tsx"],"sourcesContent":["import { useLocale } from \"@payloadcms/ui/providers/Locale\";\nimport * as Popover from \"@radix-ui/react-popover\";\nimport { Editor } from \"@tiptap/react\";\nimport { useAssistant } from \"ai/react\";\nimport {\n  ArrowDownWideNarrow,\n  CheckCheck,\n  ChevronDown,\n  Languages,\n  RefreshCcwDot,\n  StepForward,\n  WrapText,\n} from \"lucide-react\";\nimport { languages } from \"../../../../lib/constants.js\";\nimport { getPrevText } from \"../../../../lib/utils/index.js\";\nimport { DropdownCategoryTitle } from \"../../../ui/Dropdown/Dropdown.js\";\nimport { Icon } from \"../../../ui/Icon.js\";\nimport { Surface } from \"../../../ui/Surface.js\";\nimport { Toolbar } from \"../../../ui/Toolbar.js\";\nconst options = [\n  // {\n  //   value: 'translate',\n  //   label: 'Translate text',\n  //   icon: WrapText,\n  // },\n  {\n    value: \"summarize\",\n    label: \"Summarize text\",\n    icon: WrapText,\n  },\n  {\n    value: \"rewrite\",\n    label: \"Rewrite into Axios\",\n    icon: WrapText,\n  },\n  {\n    value: \"improve\",\n    label: \"Improve writing\",\n    icon: RefreshCcwDot,\n  },\n\n  {\n    value: \"fix\",\n    label: \"Fix grammar\",\n    icon: CheckCheck,\n  },\n  {\n    value: \"shorter\",\n    label: \"Make shorter\",\n    icon: ArrowDownWideNarrow,\n  },\n  {\n    value: \"longer\",\n    label: \"Make longer\",\n    icon: WrapText,\n  },\n];\n\ninterface AISelectorCommandsProps {\n  editor: Editor;\n  onSelect: (\n    value: string,\n    options: { option: string; language?: string }\n  ) => void;\n}\n\nconst AISelectorCommands = ({ onSelect, editor }: AISelectorCommandsProps) => {\n  const { status, messages, input, submitMessage, handleInputChange } =\n    useAssistant({\n      api: \"/api/assistant\",\n    });\n  const { code } = useLocale();\n\n  return (\n    <>\n      <DropdownCategoryTitle>Edit or review selection</DropdownCategoryTitle>\n      <Popover.Root>\n        <Popover.Trigger asChild>\n          <Toolbar.Button\n            className=\"gap-2 px-4 w-full flex justify-start \"\n            type=\"button\"\n            // active={!!states.currentHighlight}\n            tooltip=\"Highlight text\"\n          >\n            <Icon icon={Languages} className=\"h-4 w-4 text-blue-500\" />\n            Translate text\n            <Icon icon={ChevronDown} className=\"h-4 w-4 text-blue-500\" />\n          </Toolbar.Button>\n        </Popover.Trigger>\n        <Popover.Content side=\"right\" align=\"start\" sideOffset={8} asChild>\n          <Surface className=\"flex flex-col min-w-[15rem] p-2 max-h-[20rem] overflow-auto\">\n            <DropdownCategoryTitle>Languages</DropdownCategoryTitle>\n\n            {languages.map((lang) => (\n              <Toolbar.Button\n                onClick={() => {\n                  const { from, to, empty } = editor.state.selection;\n                  const content = editor.state.doc.textBetween(from, to, \" \");\n                  onSelect(content, {\n                    option: \"translate\",\n                    language: lang.value,\n                  });\n                }}\n                className=\"gap-2 px-4 w-full flex justify-start \"\n                key={lang.value}\n              >\n                {lang.label}\n              </Toolbar.Button>\n            ))}\n          </Surface>\n        </Popover.Content>\n      </Popover.Root>\n\n      {options.map((option) => (\n        <Toolbar.Button\n          // onSelect={(value) => {\n          //   const slice = editor.state.selection.content()\n          //   const text = editor.storage.markdown.serializer.serialize(slice.content)\n          //   onSelect(text, option.value)\n          // }}\n          onClick={() => {\n            const { from, to, empty } = editor.state.selection;\n            const content = editor.state.doc.textBetween(from, to, \" \");\n            onSelect(content, { option: option.value, language: code ?? \"en\" });\n          }}\n          className=\" gap-2 px-4 w-full flex justify-start\"\n          key={option.value}\n          value={option.value}\n        >\n          <option.icon className=\"h-4 w-4 text-blue-500\" />\n          {option.label}\n        </Toolbar.Button>\n      ))}\n      <Toolbar.Divider horizontal />\n      <DropdownCategoryTitle>Use AI to do more</DropdownCategoryTitle>\n      <Toolbar.Button\n        onClick={() => {\n          const text = getPrevText(editor, { chars: 5000 });\n          onSelect(text, { option: \"continue\", language: code ?? \"en\" });\n        }}\n        value=\"continue\"\n        className=\"gap-2 px-4 w-full flex justify-start\"\n      >\n        <StepForward className=\"h-4 w-4 text-blue-500\" />\n        Continue writing\n      </Toolbar.Button>\n    </>\n  );\n};\n\nexport default AISelectorCommands;\n"],"names":["useLocale","Popover","useAssistant","ArrowDownWideNarrow","CheckCheck","ChevronDown","Languages","RefreshCcwDot","StepForward","WrapText","languages","getPrevText","DropdownCategoryTitle","Icon","Surface","Toolbar","options","value","label","icon","AISelectorCommands","onSelect","editor","status","messages","input","submitMessage","handleInputChange","api","code","Root","Trigger","asChild","Button","className","type","tooltip","Content","side","align","sideOffset","map","lang","onClick","from","to","empty","state","selection","content","doc","textBetween","option","language","Divider","horizontal","text","chars"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../../../src/fields/TiptapEditor/features/menus/TextMenu/components/ai-selector-commands.tsx"],"sourcesContent":["import { useLocale } from \"@payloadcms/ui/providers/Locale\";\nimport * as Popover from \"@radix-ui/react-popover\";\nimport { Editor } from \"@tiptap/react\";\nimport { useAssistant } from \"ai/react\";\nimport {\n  ArrowDownWideNarrow,\n  CheckCheck,\n  ChevronDown,\n  Languages,\n  RefreshCcwDot,\n  StepForward,\n  WrapText,\n} from \"lucide-react\";\nimport { languages } from \"../../../../lib/constants.js\";\nimport { getPrevText } from \"../../../../lib/utils/index.js\";\nimport { DropdownCategoryTitle } from \"../../../ui/Dropdown/Dropdown.js\";\nimport { Icon } from \"../../../ui/Icon.js\";\nimport { Surface } from \"../../../ui/Surface.js\";\nimport { Toolbar } from \"../../../ui/Toolbar.js\";\nconst options = [\n  // {\n  //   value: 'translate',\n  //   label: 'Translate text',\n  //   icon: WrapText,\n  // },\n  {\n    value: \"summarize\",\n    label: \"Summarize text\",\n    icon: WrapText,\n  },\n  {\n    value: \"rewrite\",\n    label: \"Rewrite into Axios\",\n    icon: WrapText,\n  },\n  {\n    value: \"improve\",\n    label: \"Improve writing\",\n    icon: RefreshCcwDot,\n  },\n\n  {\n    value: \"fix\",\n    label: \"Fix grammar\",\n    icon: CheckCheck,\n  },\n  {\n    value: \"shorter\",\n    label: \"Make shorter\",\n    icon: ArrowDownWideNarrow,\n  },\n  {\n    value: \"longer\",\n    label: \"Make longer\",\n    icon: WrapText,\n  },\n];\n\ninterface AISelectorCommandsProps {\n  editor: Editor;\n  messages?: string;\n  onSelect: (\n    value: string,\n    options: { option: string; language?: string }\n  ) => void;\n}\n\nconst AISelectorCommands = ({\n  messages,\n  onSelect,\n  editor,\n}: AISelectorCommandsProps) => {\n  const { status, input, submitMessage, handleInputChange } = useAssistant({\n    api: \"/api/assistant\",\n  });\n  const { code } = useLocale();\n\n  return (\n    <>\n      <DropdownCategoryTitle>Edit or review selection</DropdownCategoryTitle>\n      <Popover.Root>\n        <Popover.Trigger asChild>\n          <Toolbar.Button\n            className=\"gap-2 px-4 w-full flex justify-start \"\n            type=\"button\"\n            // active={!!states.currentHighlight}\n            tooltip=\"Highlight text\"\n          >\n            <Icon icon={Languages} className=\"h-4 w-4 text-blue-500\" />\n            Translate text\n            <Icon icon={ChevronDown} className=\"h-4 w-4 text-blue-500\" />\n          </Toolbar.Button>\n        </Popover.Trigger>\n        <Popover.Content side=\"right\" align=\"start\" sideOffset={8} asChild>\n          <Surface className=\"flex flex-col min-w-[15rem] p-2 max-h-[20rem] overflow-auto\">\n            <DropdownCategoryTitle>Languages</DropdownCategoryTitle>\n\n            {languages.map((lang) => (\n              <Toolbar.Button\n                onClick={() => {\n                  const { from, to, empty } = editor.state.selection;\n                  const content = messages\n                    ? messages ?? \"\"\n                    : editor.state.doc.textBetween(from, to, \" \");\n                  onSelect(content, {\n                    option: \"translate\",\n                    language: lang.value,\n                  });\n                }}\n                className=\"gap-2 px-4 w-full flex justify-start \"\n                key={lang.value}\n              >\n                {lang.label}\n              </Toolbar.Button>\n            ))}\n          </Surface>\n        </Popover.Content>\n      </Popover.Root>\n\n      {options.map((option) => (\n        <Toolbar.Button\n          // onSelect={(value) => {\n          //   const slice = editor.state.selection.content()\n          //   const text = editor.storage.markdown.serializer.serialize(slice.content)\n          //   onSelect(text, option.value)\n          // }}\n          onClick={() => {\n            const { from, to, empty } = editor.state.selection;\n            const content = messages\n              ? messages ?? \"\"\n              : editor.state.doc.textBetween(from, to, \" \");\n            onSelect(content, {\n              option: option.value,\n              language: code ?? \"en\",\n            });\n          }}\n          className=\" gap-2 px-4 w-full flex justify-start\"\n          key={option.value}\n          value={option.value}\n        >\n          <option.icon className=\"h-4 w-4 text-blue-500\" />\n          {option.label}\n        </Toolbar.Button>\n      ))}\n      <Toolbar.Divider horizontal />\n      <DropdownCategoryTitle>Use AI to do more</DropdownCategoryTitle>\n      <Toolbar.Button\n        onClick={() => {\n          const text = messages\n            ? messages\n            : getPrevText(editor, { chars: 5000 });\n          onSelect(text, { option: \"continue\", language: code ?? \"en\" });\n        }}\n        value=\"continue\"\n        className=\"gap-2 px-4 w-full flex justify-start\"\n      >\n        <StepForward className=\"h-4 w-4 text-blue-500\" />\n        Continue writing\n      </Toolbar.Button>\n    </>\n  );\n};\n\nexport default AISelectorCommands;\n"],"names":["useLocale","Popover","useAssistant","ArrowDownWideNarrow","CheckCheck","ChevronDown","Languages","RefreshCcwDot","StepForward","WrapText","languages","getPrevText","DropdownCategoryTitle","Icon","Surface","Toolbar","options","value","label","icon","AISelectorCommands","messages","onSelect","editor","status","input","submitMessage","handleInputChange","api","code","Root","Trigger","asChild","Button","className","type","tooltip","Content","side","align","sideOffset","map","lang","onClick","from","to","empty","state","selection","content","doc","textBetween","option","language","Divider","horizontal","text","chars"],"mappings":";AAAA,SAASA,SAAS,QAAQ,kCAAkC;AAC5D,YAAYC,aAAa,0BAA0B;AAEnD,SAASC,YAAY,QAAQ,WAAW;AACxC,SACEC,mBAAmB,EACnBC,UAAU,EACVC,WAAW,EACXC,SAAS,EACTC,aAAa,EACbC,WAAW,EACXC,QAAQ,QACH,eAAe;AACtB,SAASC,SAAS,QAAQ,+BAA+B;AACzD,SAASC,WAAW,QAAQ,iCAAiC;AAC7D,SAASC,qBAAqB,QAAQ,mCAAmC;AACzE,SAASC,IAAI,QAAQ,sBAAsB;AAC3C,SAASC,OAAO,QAAQ,yBAAyB;AACjD,SAASC,OAAO,QAAQ,yBAAyB;AACjD,MAAMC,UAAU;IACd,IAAI;IACJ,wBAAwB;IACxB,6BAA6B;IAC7B,oBAAoB;IACpB,KAAK;IACL;QACEC,OAAO;QACPC,OAAO;QACPC,MAAMV;IACR;IACA;QACEQ,OAAO;QACPC,OAAO;QACPC,MAAMV;IACR;IACA;QACEQ,OAAO;QACPC,OAAO;QACPC,MAAMZ;IACR;IAEA;QACEU,OAAO;QACPC,OAAO;QACPC,MAAMf;IACR;IACA;QACEa,OAAO;QACPC,OAAO;QACPC,MAAMhB;IACR;IACA;QACEc,OAAO;QACPC,OAAO;QACPC,MAAMV;IACR;CACD;AAWD,MAAMW,qBAAqB,CAAC,EAC1BC,QAAQ,EACRC,QAAQ,EACRC,MAAM,EACkB;IACxB,MAAM,EAAEC,MAAM,EAAEC,KAAK,EAAEC,aAAa,EAAEC,iBAAiB,EAAE,GAAGzB,aAAa;QACvE0B,KAAK;IACP;IACA,MAAM,EAAEC,IAAI,EAAE,GAAG7B;IAEjB,qBACE;;0BACE,KAACY;0BAAsB;;0BACvB,MAACX,QAAQ6B,IAAI;;kCACX,KAAC7B,QAAQ8B,OAAO;wBAACC,OAAO;kCACtB,cAAA,MAACjB,QAAQkB,MAAM;4BACbC,WAAU;4BACVC,MAAK;4BACL,qCAAqC;4BACrCC,SAAQ;;8CAER,KAACvB;oCAAKM,MAAMb;oCAAW4B,WAAU;;gCAA0B;8CAE3D,KAACrB;oCAAKM,MAAMd;oCAAa6B,WAAU;;;;;kCAGvC,KAACjC,QAAQoC,OAAO;wBAACC,MAAK;wBAAQC,OAAM;wBAAQC,YAAY;wBAAGR,OAAO;kCAChE,cAAA,MAAClB;4BAAQoB,WAAU;;8CACjB,KAACtB;8CAAsB;;gCAEtBF,UAAU+B,GAAG,CAAC,CAACC,qBACd,KAAC3B,QAAQkB,MAAM;wCACbU,SAAS;4CACP,MAAM,EAAEC,IAAI,EAAEC,EAAE,EAAEC,KAAK,EAAE,GAAGvB,OAAOwB,KAAK,CAACC,SAAS;4CAClD,MAAMC,UAAU5B,WACZA,YAAY,KACZE,OAAOwB,KAAK,CAACG,GAAG,CAACC,WAAW,CAACP,MAAMC,IAAI;4CAC3CvB,SAAS2B,SAAS;gDAChBG,QAAQ;gDACRC,UAAUX,KAAKzB,KAAK;4CACtB;wCACF;wCACAiB,WAAU;kDAGTQ,KAAKxB,KAAK;uCAFNwB,KAAKzB,KAAK;;;;;;YASxBD,QAAQyB,GAAG,CAAC,CAACW,uBACZ,MAACrC,QAAQkB,MAAM;oBACb,yBAAyB;oBACzB,mDAAmD;oBACnD,6EAA6E;oBAC7E,iCAAiC;oBACjC,KAAK;oBACLU,SAAS;wBACP,MAAM,EAAEC,IAAI,EAAEC,EAAE,EAAEC,KAAK,EAAE,GAAGvB,OAAOwB,KAAK,CAACC,SAAS;wBAClD,MAAMC,UAAU5B,WACZA,YAAY,KACZE,OAAOwB,KAAK,CAACG,GAAG,CAACC,WAAW,CAACP,MAAMC,IAAI;wBAC3CvB,SAAS2B,SAAS;4BAChBG,QAAQA,OAAOnC,KAAK;4BACpBoC,UAAUxB,QAAQ;wBACpB;oBACF;oBACAK,WAAU;oBAEVjB,OAAOmC,OAAOnC,KAAK;;sCAEnB,KAACmC,OAAOjC,IAAI;4BAACe,WAAU;;wBACtBkB,OAAOlC,KAAK;;mBAJRkC,OAAOnC,KAAK;0BAOrB,KAACF,QAAQuC,OAAO;gBAACC,UAAU;;0BAC3B,KAAC3C;0BAAsB;;0BACvB,MAACG,QAAQkB,MAAM;gBACbU,SAAS;oBACP,MAAMa,OAAOnC,WACTA,WACAV,YAAYY,QAAQ;wBAAEkC,OAAO;oBAAK;oBACtCnC,SAASkC,MAAM;wBAAEJ,QAAQ;wBAAYC,UAAUxB,QAAQ;oBAAK;gBAC9D;gBACAZ,OAAM;gBACNiB,WAAU;;kCAEV,KAAC1B;wBAAY0B,WAAU;;oBAA0B;;;;;AAKzD;AAEA,eAAed,mBAAmB"}

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

@@ -1,8 +1,11 @@
+import React from "react";
 import { Editor } from "@tiptap/react";
+import { Group } from "src/fields/TiptapEditor/extensions/AICommand/types.js";
 export type AICommandPanelProps = {
     editor: Editor;
     userPrompt?: string;
     onOpenChange: (value: boolean) => void;
+    items: Group[];
 };
-export declare const AICommandPanel: ({ editor, onOpenChange, userPrompt, ...restProps }: AICommandPanelProps) => import("react").JSX.Element;
+export declare const AICommandPanel: React.ForwardRefExoticComponent<AICommandPanelProps & React.RefAttributes<unknown>>;
 //# sourceMappingURL=AICommandPanel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AICommandPanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/features/panels/AICommandPanel/AICommandPanel.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,MAAM,EAA4B,MAAM,eAAe,CAAC;AAajE,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;CACxC,CAAC;AAEF,eAAO,MAAM,cAAc,uDAKxB,mBAAmB,gCA+KrB,CAAC"}
+{"version":3,"file":"AICommandPanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/features/panels/AICommandPanel/AICommandPanel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAON,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;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,qFAsU1B,CAAC"}

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

@@ -2,20 +2,27 @@
 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 React, { forwardRef, useCallback, useEffect, useImperativeHandle, 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 { DropdownButton } from "../../ui/Dropdown/Dropdown.js";
+import { Icon } from "../../ui/Icon.js";
 import { ScrollArea } from "../../ui/scroll-area.js";
 import { Surface } from "../../ui/Surface.js";
 import { Toolbar } from "../../ui/Toolbar.js";
-export const AICommandPanel = ({ editor, onOpenChange, userPrompt, ...restProps })=>{
+import AISelectorCommands from "../../menus/TextMenu/components/ai-selector-commands.js";
+export const AICommandPanel = /*#__PURE__*/ forwardRef(({ editor, onOpenChange, userPrompt, items, ...restProps }, ref)=>{
     const [inputValue, setInputValue] = useState(userPrompt ?? "");
     const { code } = useLocale();
     const { view } = editor;
+    const scrollContainer = useRef(null);
+    const activeItem = useRef(null);
+    const [selectedGroupIndex, setSelectedGroupIndex] = useState(0);
+    const [selectedCommandIndex, setSelectedCommandIndex] = useState(0);
     const editorNode = view.dom;
     const boundigClient = editorNode.getBoundingClientRect();
     const inputRef = useRef(null);
@@ -90,78 +97,198 @@ export const AICommandPanel = ({ editor, onOpenChange, userPrompt, ...restProps
         completion,
         isLoading
     ]);
-    return /*#__PURE__*/ _jsx(Surface, {
-        className: `p-2 min-w-[20rem] flex  flex-col gap-2 w-full`,
-        style: {
-            width: boundigClient?.width
-        },
-        children: /*#__PURE__*/ _jsxs(_Fragment, {
-            children: [
-                hasCompletion && /*#__PURE__*/ _jsx("div", {
-                    className: "flex  w-full",
-                    children: /*#__PURE__*/ _jsx(ScrollArea, {
-                        className: "h-72 prose p-2 px-4 prose-sm w-full max-w-none",
-                        dir: isRTL(completion) ? "rtl" : "ltr",
-                        children: /*#__PURE__*/ _jsx(Markdown, {
-                            className: "w-full",
-                            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
-                    },
+    // Anytime the groups change, i.e. the user types to narrow it down, we want to
+    // reset the current selection to the first menu item
+    useEffect(()=>{
+        setSelectedGroupIndex(0);
+        setSelectedCommandIndex(0);
+    }, [
+        items
+    ]);
+    const selectItem = useCallback((groupIndex, commandIndex)=>{
+        const command = items[groupIndex].commands[commandIndex];
+        setInputValue(command.action(editor));
+    // props.command(command);
+    }, [
+        items,
+        editor
+    ]);
+    useImperativeHandle(ref, ()=>({
+            onKeyDown: ({ event })=>{
+                if (event.key === "ArrowDown") {
+                    if (!items.length) {
+                        return false;
+                    }
+                    const commands = items[selectedGroupIndex].commands;
+                    let newCommandIndex = selectedCommandIndex + 1;
+                    let newGroupIndex = selectedGroupIndex;
+                    if (commands.length - 1 < newCommandIndex) {
+                        newCommandIndex = 0;
+                        newGroupIndex = selectedGroupIndex + 1;
+                    }
+                    if (items.length - 1 < newGroupIndex) {
+                        newGroupIndex = 0;
+                    }
+                    setSelectedCommandIndex(newCommandIndex);
+                    setSelectedGroupIndex(newGroupIndex);
+                    return true;
+                }
+                if (event.key === "ArrowUp") {
+                    if (!items.length) {
+                        return false;
+                    }
+                    let newCommandIndex = selectedCommandIndex - 1;
+                    let newGroupIndex = selectedGroupIndex;
+                    if (newCommandIndex < 0) {
+                        newGroupIndex = selectedGroupIndex - 1;
+                        newCommandIndex = items[newGroupIndex]?.commands.length - 1 || 0;
+                    }
+                    if (newGroupIndex < 0) {
+                        newGroupIndex = items.length - 1;
+                        newCommandIndex = items[newGroupIndex].commands.length - 1;
+                    }
+                    setSelectedCommandIndex(newCommandIndex);
+                    setSelectedGroupIndex(newGroupIndex);
+                    return true;
+                }
+                if (event.key === "Enter") {
+                    if (!items.length || selectedGroupIndex === -1 || selectedCommandIndex === -1) {
+                        return false;
+                    }
+                    selectItem(selectedGroupIndex, selectedCommandIndex);
+                    return true;
+                }
+                return false;
+            }
+        }));
+    useEffect(()=>{
+        if (activeItem.current && scrollContainer.current) {
+            const offsetTop = activeItem.current.offsetTop;
+            const offsetHeight = activeItem.current.offsetHeight;
+            scrollContainer.current.scrollTop = offsetTop - offsetHeight;
+        }
+    }, [
+        selectedCommandIndex,
+        selectedGroupIndex
+    ]);
+    const createCommandClickHandler = useCallback((groupIndex, commandIndex)=>{
+        return ()=>{
+            selectItem(groupIndex, commandIndex);
+        };
+    }, [
+        selectItem
+    ]);
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Surface, {
+                className: `p-2 min-w-[20rem] flex  flex-col gap-2 w-full`,
+                style: {
+                    width: boundigClient?.width
+                },
+                children: /*#__PURE__*/ _jsxs(_Fragment, {
                     children: [
-                        /*#__PURE__*/ _jsx(Sparkles, {
-                            className: "mr-2 h-4 w-4 shrink-0  "
+                        hasCompletion && /*#__PURE__*/ _jsx("div", {
+                            className: "flex  w-full",
+                            children: /*#__PURE__*/ _jsx(ScrollArea, {
+                                className: "h-72 prose p-2 px-4 prose-sm w-full max-w-none",
+                                dir: isRTL(completion) ? "rtl" : "ltr",
+                                children: /*#__PURE__*/ _jsx(Markdown, {
+                                    className: "w-full",
+                                    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, {})
+                                })
+                            ]
                         }),
-                        "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, {})
+                                    })
+                                ]
+                            })
                         })
                     ]
-                }),
-                !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, {})
-                            })
-                        ]
-                    })
                 })
-            ]
-        })
+            }),
+            !isLoading && /*#__PURE__*/ _jsx(Surface, {
+                ref: scrollContainer,
+                className: "text-black max-h-[min(80vh,24rem)] overflow-auto flex-wrap mb-8 p-2",
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: "grid grid-cols-1 gap-0.5",
+                    children: hasCompletion ? /*#__PURE__*/ _jsx(AISelectorCommands, {
+                        editor: editor,
+                        messages: completion,
+                        onSelect: (value, options)=>{
+                            console.log("VALUE", value, options);
+                            complete(value, {
+                                body: options
+                            });
+                        }
+                    }) : items.map((group, groupIndex)=>/*#__PURE__*/ _jsxs(React.Fragment, {
+                            children: [
+                                /*#__PURE__*/ _jsx("div", {
+                                    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",
+                                    children: group.title
+                                }, `${group.title}`),
+                                group.commands.map((command, commandIndex)=>/*#__PURE__*/ _jsxs(DropdownButton, {
+                                        isActive: selectedGroupIndex === groupIndex && selectedCommandIndex === commandIndex,
+                                        onClick: createCommandClickHandler(groupIndex, commandIndex),
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Icon, {
+                                                icon: command.icon,
+                                                className: "mr-1"
+                                            }),
+                                            command.label
+                                        ]
+                                    }, `${command.label}`))
+                            ]
+                        }, `${group.title}-wrapper`))
+                })
+            })
+        ]
     });
-};
+});
 
 //# sourceMappingURL=AICommandPanel.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/panels/AICommandPanel/AICommandPanel.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCompletion } from \"ai/react\";\nimport { 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 w-full`}\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                    ? \"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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"}
+{"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\";\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: { 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    // 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`}\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                        ? \"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              </>\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                    console.log(\"VALUE\", 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","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","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","autoFocus","Button","onClick","messages","onSelect","options","map","group","Fragment","title","isActive","icon","label"],"mappings":"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"}

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

@@ -143,10 +143,12 @@ export const AIEditorPanel = ({ editor, onOpenChange })=>{
                             },
                             completion: completion
                         }) : /*#__PURE__*/ _jsx(AISelectorCommands, {
+                            messages: completion,
                             editor: editor,
-                            onSelect: (value)=>{
-                                setInputValue(value);
-                                inputRef.current.focus();
+                            onSelect: (value, options)=>{
+                                complete(value, {
+                                    body: options
+                                });
                             }
                         })
                     ]

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, 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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"}
+{"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                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","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","messages","onSelect","options"],"mappings":"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"}

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

@@ -5,7 +5,6 @@ export const extractTiptapJson = (markdownValue)=>{
         content: markdownValue,
         extensions: [
             ...ExtensionKit({
-                // provider,
                 openAssetHQHandler: ()=>{}
             })
         ]

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 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"}
+{"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        openAssetHQHandler: () => {},\n        // provider,\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;gBACdM,oBAAoB,KAAO;YAE7B;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.map

@@ -1 +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"}
+{"version":3,"sources":["../../../../src/fields/TiptapEditor/types.d.ts"],"sourcesContent":["export type openAssetHQType = (\n  listener: (asset: AssetReturnType) => void,\n  file?: File\n) => void;\n\nexport type HitItem = {\n  caption: string;\n  description: string;\n  fileName: string;\n  fileSize: number;\n  id: string;\n  s3key: string;\n  source: string;\n  title: string;\n  type: \"VIDEO\" | \"IMAGE\";\n  updated_at: string;\n  created_at: string;\n  userId: string;\n  tags: string[];\n  celebrities: string[];\n  videos: {\n    aspectRatio: string;\n    assetId: string;\n    averageBitrate: number;\n    createdAt: Date;\n    downloaded: boolean;\n    s3Key: string;\n    duration: number;\n    fileName: string;\n    fileSize: number | null;\n    frameRate: number;\n    height: number;\n    id: string;\n    mimeType: string;\n    newsAgencyVideoAssetId: string;\n    providerSubId: string;\n    sampleRate: number;\n    updatedAt: Date;\n    videoCodec: string;\n    width: number;\n  }[];\n};\nexport type SelectedAssetInModal = HitItem & {\n  selectedVideo?: HitItem[\"videos\"][0];\n};\nexport type AssetReturnType = SelectedAssetInModal & {\n  fullUrl: string;\n  videoUrl?: string;\n  renditions: Record<number, string>;\n};\n"],"names":[],"mappings":"AA6CA,WAIE"}