payload-richtext-tiptap 0.0.119 → 0.0.121

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.
@@ -10,7 +10,7 @@ export const ImageUploadBuilder = (openAssetHQHandler)=>{
10
10
  if (asset && !done) {
11
11
  if (asset.type === "IMAGE") {
12
12
  let title = asset.title;
13
- if (i18next.language !== "en") {
13
+ if (i18next.language !== "en" && !!asset.title_locale[i18next.language.toUpperCase()]) {
14
14
  title = asset.title_locale[i18next.language.toUpperCase()];
15
15
  }
16
16
  editor.chain().focus().setImageBlock({
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/ImageUpload/view/ImageUpload.tsx"],"sourcesContent":["import { Editor, NodeViewWrapper } from \"@tiptap/react\";\nimport i18next from \"i18next\";\nimport { ImagePlus } from \"lucide-react\";\nimport { useCallback, useState } from \"react\";\nimport {\n AssetReturnType,\n AssetType,\n openAssetHQType,\n} from \"src/fields/TiptapEditor/types.js\";\nexport const ImageUploadBuilder = (openAssetHQHandler: openAssetHQType) => {\n const ImageUpload = ({\n getPos,\n editor,\n node,\n }: {\n getPos: () => number;\n editor: Editor;\n node: { attrs: { type?: AssetType } };\n }) => {\n const [done, setDone] = useState(false);\n const onUpload = useCallback(\n (asset: AssetReturnType) => {\n if (asset && !done) {\n if (asset.type === \"IMAGE\") {\n let title = asset.title;\n if (i18next.language !== \"en\") {\n title = asset.title_locale[i18next.language.toUpperCase()];\n }\n editor\n .chain()\n .focus()\n .setImageBlock({\n src: asset?.optimizedImageUrl || asset.fullUrl,\n assetId: asset.id,\n caption: title,\n })\n .deleteRange({ from: getPos(), to: getPos() })\n .focus()\n .run();\n setDone(true);\n } else {\n console.log(\"calling editor setVideoBlock.\", {\n src: asset.videoUrl,\n poster: asset.fullUrl,\n assetId: asset.id,\n playlistUrl: asset.playlistUrl,\n });\n editor\n .chain()\n .focus()\n .setVideoBlock({\n src: asset.videoUrl,\n poster: asset.fullUrl,\n assetId: asset.id,\n playlistUrl: asset.playlistUrl,\n })\n .deleteRange({ from: getPos(), to: getPos() })\n .focus()\n .run();\n setDone(true);\n }\n } else {\n console.info(\n \"ImageUpload onUpload called but this is a finished component.\"\n );\n }\n },\n [getPos, editor]\n );\n\n return (\n <NodeViewWrapper>\n <div className=\"p-0 m-0\" data-drag-handle>\n <a\n href=\"#\"\n className=\"text-black text-sm font-medium uppercase hover:cursor-pointer p-2.5 bg-white rounded-[7px] transition ease-in-out delay-150 hover:scale-110 hover:bg-amber-600 shadow justify-between items-center flex flex-row\"\n onClick={(e) => {\n e.preventDefault();\n openAssetHQHandler(onUpload, null, node?.attrs?.type ?? \"image\");\n }}\n >\n <ImagePlus className=\"mr-2\" />\n Select an asset\n </a>\n </div>\n </NodeViewWrapper>\n );\n };\n\n return ImageUpload;\n};\n"],"names":["NodeViewWrapper","i18next","ImagePlus","useCallback","useState","ImageUploadBuilder","openAssetHQHandler","ImageUpload","getPos","editor","node","done","setDone","onUpload","asset","type","title","language","title_locale","toUpperCase","chain","focus","setImageBlock","src","optimizedImageUrl","fullUrl","assetId","id","caption","deleteRange","from","to","run","console","log","videoUrl","poster","playlistUrl","setVideoBlock","info","div","className","data-drag-handle","a","href","onClick","e","preventDefault","attrs"],"mappings":";AAAA,SAAiBA,eAAe,QAAQ,gBAAgB;AACxD,OAAOC,aAAa,UAAU;AAC9B,SAASC,SAAS,QAAQ,eAAe;AACzC,SAASC,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAM9C,OAAO,MAAMC,qBAAqB,CAACC;IACjC,MAAMC,cAAc,CAAC,EACnBC,MAAM,EACNC,MAAM,EACNC,IAAI,EAKL;QACC,MAAM,CAACC,MAAMC,QAAQ,GAAGR,SAAS;QACjC,MAAMS,WAAWV,YACf,CAACW;YACC,IAAIA,SAAS,CAACH,MAAM;gBAClB,IAAIG,MAAMC,IAAI,KAAK,SAAS;oBAC1B,IAAIC,QAAQF,MAAME,KAAK;oBACvB,IAAIf,QAAQgB,QAAQ,KAAK,MAAM;wBAC7BD,QAAQF,MAAMI,YAAY,CAACjB,QAAQgB,QAAQ,CAACE,WAAW,GAAG;oBAC5D;oBACAV,OACGW,KAAK,GACLC,KAAK,GACLC,aAAa,CAAC;wBACbC,KAAKT,OAAOU,qBAAqBV,MAAMW,OAAO;wBAC9CC,SAASZ,MAAMa,EAAE;wBACjBC,SAASZ;oBACX,GACCa,WAAW,CAAC;wBAAEC,MAAMtB;wBAAUuB,IAAIvB;oBAAS,GAC3Ca,KAAK,GACLW,GAAG;oBACNpB,QAAQ;gBACV,OAAO;oBACLqB,QAAQC,GAAG,CAAC,iCAAiC;wBAC3CX,KAAKT,MAAMqB,QAAQ;wBACnBC,QAAQtB,MAAMW,OAAO;wBACrBC,SAASZ,MAAMa,EAAE;wBACjBU,aAAavB,MAAMuB,WAAW;oBAChC;oBACA5B,OACGW,KAAK,GACLC,KAAK,GACLiB,aAAa,CAAC;wBACbf,KAAKT,MAAMqB,QAAQ;wBACnBC,QAAQtB,MAAMW,OAAO;wBACrBC,SAASZ,MAAMa,EAAE;wBACjBU,aAAavB,MAAMuB,WAAW;oBAChC,GACCR,WAAW,CAAC;wBAAEC,MAAMtB;wBAAUuB,IAAIvB;oBAAS,GAC3Ca,KAAK,GACLW,GAAG;oBACNpB,QAAQ;gBACV;YACF,OAAO;gBACLqB,QAAQM,IAAI,CACV;YAEJ;QACF,GACA;YAAC/B;YAAQC;SAAO;QAGlB,qBACE,KAACT;sBACC,cAAA,KAACwC;gBAAIC,WAAU;gBAAUC,kBAAgB;0BACvC,cAAA,MAACC;oBACCC,MAAK;oBACLH,WAAU;oBACVI,SAAS,CAACC;wBACRA,EAAEC,cAAc;wBAChBzC,mBAAmBO,UAAU,MAAMH,MAAMsC,OAAOjC,QAAQ;oBAC1D;;sCAEA,KAACb;4BAAUuC,WAAU;;wBAAS;;;;;IAMxC;IAEA,OAAOlC;AACT,EAAE"}
1
+ {"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/ImageUpload/view/ImageUpload.tsx"],"sourcesContent":["import { Editor, NodeViewWrapper } from \"@tiptap/react\";\nimport i18next from \"i18next\";\nimport { ImagePlus } from \"lucide-react\";\nimport { useCallback, useState } from \"react\";\nimport {\n AssetReturnType,\n AssetType,\n openAssetHQType,\n} from \"src/fields/TiptapEditor/types.js\";\nexport const ImageUploadBuilder = (openAssetHQHandler: openAssetHQType) => {\n const ImageUpload = ({\n getPos,\n editor,\n node,\n }: {\n getPos: () => number;\n editor: Editor;\n node: { attrs: { type?: AssetType } };\n }) => {\n const [done, setDone] = useState(false);\n const onUpload = useCallback(\n (asset: AssetReturnType) => {\n if (asset && !done) {\n if (asset.type === \"IMAGE\") {\n let title = asset.title;\n if (i18next.language !== \"en\" && !!asset.title_locale[i18next.language.toUpperCase()]) {\n title = asset.title_locale[i18next.language.toUpperCase()];\n }\n editor\n .chain()\n .focus()\n .setImageBlock({\n src: asset?.optimizedImageUrl || asset.fullUrl,\n assetId: asset.id,\n caption: title,\n })\n .deleteRange({ from: getPos(), to: getPos() })\n .focus()\n .run();\n setDone(true);\n } else {\n console.log(\"calling editor setVideoBlock.\", {\n src: asset.videoUrl,\n poster: asset.fullUrl,\n assetId: asset.id,\n playlistUrl: asset.playlistUrl,\n });\n editor\n .chain()\n .focus()\n .setVideoBlock({\n src: asset.videoUrl,\n poster: asset.fullUrl,\n assetId: asset.id,\n playlistUrl: asset.playlistUrl,\n })\n .deleteRange({ from: getPos(), to: getPos() })\n .focus()\n .run();\n setDone(true);\n }\n } else {\n console.info(\n \"ImageUpload onUpload called but this is a finished component.\"\n );\n }\n },\n [getPos, editor]\n );\n\n return (\n <NodeViewWrapper>\n <div className=\"p-0 m-0\" data-drag-handle>\n <a\n href=\"#\"\n className=\"text-black text-sm font-medium uppercase hover:cursor-pointer p-2.5 bg-white rounded-[7px] transition ease-in-out delay-150 hover:scale-110 hover:bg-amber-600 shadow justify-between items-center flex flex-row\"\n onClick={(e) => {\n e.preventDefault();\n openAssetHQHandler(onUpload, null, node?.attrs?.type ?? \"image\");\n }}\n >\n <ImagePlus className=\"mr-2\" />\n Select an asset\n </a>\n </div>\n </NodeViewWrapper>\n );\n };\n\n return ImageUpload;\n};\n"],"names":["NodeViewWrapper","i18next","ImagePlus","useCallback","useState","ImageUploadBuilder","openAssetHQHandler","ImageUpload","getPos","editor","node","done","setDone","onUpload","asset","type","title","language","title_locale","toUpperCase","chain","focus","setImageBlock","src","optimizedImageUrl","fullUrl","assetId","id","caption","deleteRange","from","to","run","console","log","videoUrl","poster","playlistUrl","setVideoBlock","info","div","className","data-drag-handle","a","href","onClick","e","preventDefault","attrs"],"mappings":";AAAA,SAAiBA,eAAe,QAAQ,gBAAgB;AACxD,OAAOC,aAAa,UAAU;AAC9B,SAASC,SAAS,QAAQ,eAAe;AACzC,SAASC,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAM9C,OAAO,MAAMC,qBAAqB,CAACC;IACjC,MAAMC,cAAc,CAAC,EACnBC,MAAM,EACNC,MAAM,EACNC,IAAI,EAKL;QACC,MAAM,CAACC,MAAMC,QAAQ,GAAGR,SAAS;QACjC,MAAMS,WAAWV,YACf,CAACW;YACC,IAAIA,SAAS,CAACH,MAAM;gBAClB,IAAIG,MAAMC,IAAI,KAAK,SAAS;oBAC1B,IAAIC,QAAQF,MAAME,KAAK;oBACvB,IAAIf,QAAQgB,QAAQ,KAAK,QAAQ,CAAC,CAACH,MAAMI,YAAY,CAACjB,QAAQgB,QAAQ,CAACE,WAAW,GAAG,EAAE;wBACrFH,QAAQF,MAAMI,YAAY,CAACjB,QAAQgB,QAAQ,CAACE,WAAW,GAAG;oBAC5D;oBACAV,OACGW,KAAK,GACLC,KAAK,GACLC,aAAa,CAAC;wBACbC,KAAKT,OAAOU,qBAAqBV,MAAMW,OAAO;wBAC9CC,SAASZ,MAAMa,EAAE;wBACjBC,SAASZ;oBACX,GACCa,WAAW,CAAC;wBAAEC,MAAMtB;wBAAUuB,IAAIvB;oBAAS,GAC3Ca,KAAK,GACLW,GAAG;oBACNpB,QAAQ;gBACV,OAAO;oBACLqB,QAAQC,GAAG,CAAC,iCAAiC;wBAC3CX,KAAKT,MAAMqB,QAAQ;wBACnBC,QAAQtB,MAAMW,OAAO;wBACrBC,SAASZ,MAAMa,EAAE;wBACjBU,aAAavB,MAAMuB,WAAW;oBAChC;oBACA5B,OACGW,KAAK,GACLC,KAAK,GACLiB,aAAa,CAAC;wBACbf,KAAKT,MAAMqB,QAAQ;wBACnBC,QAAQtB,MAAMW,OAAO;wBACrBC,SAASZ,MAAMa,EAAE;wBACjBU,aAAavB,MAAMuB,WAAW;oBAChC,GACCR,WAAW,CAAC;wBAAEC,MAAMtB;wBAAUuB,IAAIvB;oBAAS,GAC3Ca,KAAK,GACLW,GAAG;oBACNpB,QAAQ;gBACV;YACF,OAAO;gBACLqB,QAAQM,IAAI,CACV;YAEJ;QACF,GACA;YAAC/B;YAAQC;SAAO;QAGlB,qBACE,KAACT;sBACC,cAAA,KAACwC;gBAAIC,WAAU;gBAAUC,kBAAgB;0BACvC,cAAA,MAACC;oBACCC,MAAK;oBACLH,WAAU;oBACVI,SAAS,CAACC;wBACRA,EAAEC,cAAc;wBAChBzC,mBAAmBO,UAAU,MAAMH,MAAMsC,OAAOjC,QAAQ;oBAC1D;;sCAEA,KAACb;4BAAUuC,WAAU;;wBAAS;;;;;IAMxC;IAEA,OAAOlC;AACT,EAAE"}
@@ -63,7 +63,7 @@ export const ExtensionKit = ({ dir = "ltr", openAssetHQHandler })=>[
63
63
  (async ()=>{
64
64
  openAssetHQHandler((asset)=>{
65
65
  let title = asset.title;
66
- if (i18next.language !== "en") {
66
+ if (i18next.language !== "en" && !!asset.title_locale[i18next.language.toUpperCase()]) {
67
67
  title = asset.title_locale[i18next.language.toUpperCase()];
68
68
  }
69
69
  currentEditor.chain().setImageBlockAt({
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../src/fields/TiptapEditor/extensions/extension-kit.ts"],"sourcesContent":["import {\n AICommand,\n AudioBlock,\n BlockquoteFigure,\n CharacterCount,\n Color,\n Document,\n Dropcursor,\n Facebook,\n Figcaption,\n FileHandler,\n Focus,\n FontFamily,\n FontSize,\n Heading,\n Highlight,\n HorizontalRule,\n LinkPreview,\n ImageBlock,\n InsideLinks,\n Instagram,\n Link,\n Linkedin,\n Placeholder,\n Selection,\n SlashCommand,\n StarterKit,\n Subscript,\n Superscript,\n TaskItem,\n TaskList,\n TextAlign,\n TextStyle,\n Tiktok,\n TrailingNode,\n Twitter,\n Typography,\n Underline,\n VideoBlock,\n Youtube,\n Iframe,\n} from \"./index.js\";\n\nimport { ImageUpload } from \"./ImageUpload/ImageUpload.js\";\n\nimport History from \"@tiptap/extension-history\";\nimport { Markdown } from \"tiptap-markdown\";\nimport API from \"../lib/api.js\";\nimport { openAssetHQType } from \"../types.js\";\nimport i18next from \"i18next\";\n\ninterface ExtensionKitProps {\n openAssetHQHandler: openAssetHQType;\n dir?: \"ltr\" | \"rtl\";\n}\n\nexport const ExtensionKit = ({\n dir = \"ltr\",\n openAssetHQHandler,\n}: ExtensionKitProps) => [\n Markdown,\n Document,\n TaskList,\n TaskItem.configure({\n nested: true,\n }),\n Selection,\n Heading.configure({\n levels: [1, 2, 3, 4, 5, 6],\n }),\n HorizontalRule,\n StarterKit.configure({\n document: false,\n dropcursor: false,\n heading: false,\n horizontalRule: false,\n blockquote: false,\n history: false,\n codeBlock: false,\n }),\n TextStyle,\n // FontSize,\n // FontFamily,\n // Color,\n TrailingNode,\n Link.configure({\n openOnClick: false,\n }),\n // Highlight.configure({ multicolor: true }),\n Underline,\n CharacterCount.configure({ limit: 50000 }),\n ImageUpload.configure({\n openAssetHQHandler,\n }),\n ImageBlock,\n VideoBlock,\n AudioBlock,\n FileHandler.configure({\n allowedMimeTypes: [\"image/png\", \"image/jpeg\", \"image/gif\", \"image/webp\"],\n onDrop: (currentEditor, files, pos) => {\n const file = files[0];\n (async () => {\n openAssetHQHandler(\n (asset) => {\n let title = asset.title;\n if (i18next.language !== \"en\") {\n title = asset.title_locale[i18next.language.toUpperCase()];\n }\n currentEditor\n .chain()\n .setImageBlockAt({\n pos,\n src: asset?.optimizedImageUrl || asset.fullUrl,\n caption: title,\n })\n .focus()\n .run();\n },\n file,\n \"image\"\n );\n })();\n },\n onPaste: (currentEditor, files) => {\n files.forEach(async () => {\n const url = await API.uploadImage();\n\n return currentEditor\n .chain()\n .setImageBlockAt({\n pos: currentEditor.state.selection.anchor,\n src: url,\n })\n .focus()\n .run();\n });\n },\n }),\n // Emoji.configure({\n // enableEmoticons: true,\n // suggestion: emojiSuggestion,\n // }),\n TextAlign.extend({\n addKeyboardShortcuts() {\n return {};\n },\n }).configure({\n defaultAlignment: dir === \"rtl\" ? \"right\" : \"left\",\n types: [\"heading\", \"paragraph\"],\n }),\n Subscript,\n Superscript,\n Typography,\n Placeholder.configure({\n includeChildren: true,\n showOnlyCurrent: false,\n placeholder: () => \"\",\n }),\n SlashCommand,\n Focus,\n Figcaption,\n BlockquoteFigure,\n Dropcursor.configure({\n width: 2,\n class: \"ProseMirror-dropcursor border-black\",\n }),\n History,\n Twitter,\n Tiktok,\n Instagram,\n Facebook,\n Linkedin,\n Youtube,\n InsideLinks,\n Iframe,\n AICommand,\n LinkPreview,\n];\n\nexport default ExtensionKit;\n"],"names":["AICommand","AudioBlock","BlockquoteFigure","CharacterCount","Document","Dropcursor","Facebook","Figcaption","FileHandler","Focus","Heading","HorizontalRule","LinkPreview","ImageBlock","InsideLinks","Instagram","Link","Linkedin","Placeholder","Selection","SlashCommand","StarterKit","Subscript","Superscript","TaskItem","TaskList","TextAlign","TextStyle","Tiktok","TrailingNode","Twitter","Typography","Underline","VideoBlock","Youtube","Iframe","ImageUpload","History","Markdown","API","i18next","ExtensionKit","dir","openAssetHQHandler","configure","nested","levels","document","dropcursor","heading","horizontalRule","blockquote","history","codeBlock","openOnClick","limit","allowedMimeTypes","onDrop","currentEditor","files","pos","file","asset","title","language","title_locale","toUpperCase","chain","setImageBlockAt","src","optimizedImageUrl","fullUrl","caption","focus","run","onPaste","forEach","url","uploadImage","state","selection","anchor","extend","addKeyboardShortcuts","defaultAlignment","types","includeChildren","showOnlyCurrent","placeholder","width","class"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../../../src/fields/TiptapEditor/extensions/extension-kit.ts"],"sourcesContent":["import {\n AICommand,\n AudioBlock,\n BlockquoteFigure,\n CharacterCount,\n Color,\n Document,\n Dropcursor,\n Facebook,\n Figcaption,\n FileHandler,\n Focus,\n FontFamily,\n FontSize,\n Heading,\n Highlight,\n HorizontalRule,\n LinkPreview,\n ImageBlock,\n InsideLinks,\n Instagram,\n Link,\n Linkedin,\n Placeholder,\n Selection,\n SlashCommand,\n StarterKit,\n Subscript,\n Superscript,\n TaskItem,\n TaskList,\n TextAlign,\n TextStyle,\n Tiktok,\n TrailingNode,\n Twitter,\n Typography,\n Underline,\n VideoBlock,\n Youtube,\n Iframe,\n} from \"./index.js\";\n\nimport { ImageUpload } from \"./ImageUpload/ImageUpload.js\";\n\nimport History from \"@tiptap/extension-history\";\nimport { Markdown } from \"tiptap-markdown\";\nimport API from \"../lib/api.js\";\nimport { openAssetHQType } from \"../types.js\";\nimport i18next from \"i18next\";\n\ninterface ExtensionKitProps {\n openAssetHQHandler: openAssetHQType;\n dir?: \"ltr\" | \"rtl\";\n}\n\nexport const ExtensionKit = ({\n dir = \"ltr\",\n openAssetHQHandler,\n}: ExtensionKitProps) => [\n Markdown,\n Document,\n TaskList,\n TaskItem.configure({\n nested: true,\n }),\n Selection,\n Heading.configure({\n levels: [1, 2, 3, 4, 5, 6],\n }),\n HorizontalRule,\n StarterKit.configure({\n document: false,\n dropcursor: false,\n heading: false,\n horizontalRule: false,\n blockquote: false,\n history: false,\n codeBlock: false,\n }),\n TextStyle,\n // FontSize,\n // FontFamily,\n // Color,\n TrailingNode,\n Link.configure({\n openOnClick: false,\n }),\n // Highlight.configure({ multicolor: true }),\n Underline,\n CharacterCount.configure({ limit: 50000 }),\n ImageUpload.configure({\n openAssetHQHandler,\n }),\n ImageBlock,\n VideoBlock,\n AudioBlock,\n FileHandler.configure({\n allowedMimeTypes: [\"image/png\", \"image/jpeg\", \"image/gif\", \"image/webp\"],\n onDrop: (currentEditor, files, pos) => {\n const file = files[0];\n (async () => {\n openAssetHQHandler(\n (asset) => {\n let title = asset.title;\n if (i18next.language !== \"en\" && !!asset.title_locale[i18next.language.toUpperCase()]) {\n title = asset.title_locale[i18next.language.toUpperCase()];\n }\n currentEditor\n .chain()\n .setImageBlockAt({\n pos,\n src: asset?.optimizedImageUrl || asset.fullUrl,\n caption: title,\n })\n .focus()\n .run();\n },\n file,\n \"image\"\n );\n })();\n },\n onPaste: (currentEditor, files) => {\n files.forEach(async () => {\n const url = await API.uploadImage();\n\n return currentEditor\n .chain()\n .setImageBlockAt({\n pos: currentEditor.state.selection.anchor,\n src: url,\n })\n .focus()\n .run();\n });\n },\n }),\n // Emoji.configure({\n // enableEmoticons: true,\n // suggestion: emojiSuggestion,\n // }),\n TextAlign.extend({\n addKeyboardShortcuts() {\n return {};\n },\n }).configure({\n defaultAlignment: dir === \"rtl\" ? \"right\" : \"left\",\n types: [\"heading\", \"paragraph\"],\n }),\n Subscript,\n Superscript,\n Typography,\n Placeholder.configure({\n includeChildren: true,\n showOnlyCurrent: false,\n placeholder: () => \"\",\n }),\n SlashCommand,\n Focus,\n Figcaption,\n BlockquoteFigure,\n Dropcursor.configure({\n width: 2,\n class: \"ProseMirror-dropcursor border-black\",\n }),\n History,\n Twitter,\n Tiktok,\n Instagram,\n Facebook,\n Linkedin,\n Youtube,\n InsideLinks,\n Iframe,\n AICommand,\n LinkPreview,\n];\n\nexport default ExtensionKit;\n"],"names":["AICommand","AudioBlock","BlockquoteFigure","CharacterCount","Document","Dropcursor","Facebook","Figcaption","FileHandler","Focus","Heading","HorizontalRule","LinkPreview","ImageBlock","InsideLinks","Instagram","Link","Linkedin","Placeholder","Selection","SlashCommand","StarterKit","Subscript","Superscript","TaskItem","TaskList","TextAlign","TextStyle","Tiktok","TrailingNode","Twitter","Typography","Underline","VideoBlock","Youtube","Iframe","ImageUpload","History","Markdown","API","i18next","ExtensionKit","dir","openAssetHQHandler","configure","nested","levels","document","dropcursor","heading","horizontalRule","blockquote","history","codeBlock","openOnClick","limit","allowedMimeTypes","onDrop","currentEditor","files","pos","file","asset","title","language","title_locale","toUpperCase","chain","setImageBlockAt","src","optimizedImageUrl","fullUrl","caption","focus","run","onPaste","forEach","url","uploadImage","state","selection","anchor","extend","addKeyboardShortcuts","defaultAlignment","types","includeChildren","showOnlyCurrent","placeholder","width","class"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"AICommandPanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/features/panels/AICommandPanel/AICommandPanel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAON,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAGvC,OAAO,EAEL,KAAK,EACN,MAAM,uDAAuD,CAAC;AAY/D,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,KAAK,EAAE,KAAK,EAAE,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,cAAc,qFA0T1B,CAAC"}
1
+ {"version":3,"file":"AICommandPanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/features/panels/AICommandPanel/AICommandPanel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAON,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAGvC,OAAO,EAEL,KAAK,EACN,MAAM,uDAAuD,CAAC;AAY/D,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,KAAK,EAAE,KAAK,EAAE,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,cAAc,qFAsT1B,CAAC"}
@@ -1,6 +1,6 @@
1
1
  "use client";
2
2
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
- import { useCompletion } from '@ai-sdk/react';
3
+ import { useAssistant } from '@ai-sdk/react';
4
4
  import { ArrowUpCircle, Sparkles } from "lucide-react";
5
5
  import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
6
6
  import Markdown from "react-markdown";
@@ -28,25 +28,25 @@ export const AICommandPanel = /*#__PURE__*/ forwardRef(({ editor, onOpenChange,
28
28
  const editorNode = view.dom;
29
29
  const boundigClient = editorNode.getBoundingClientRect();
30
30
  const inputRef = useRef(null);
31
- const { completion, complete, isLoading } = useCompletion({
32
- // id: "novel",
33
- api: "/api/generate",
34
- onResponse: (response)=>{
35
- if (response.status === 429) {
36
- console.log("You have reached your request limit for the day.");
37
- return;
38
- }
39
- },
40
- onError: (e)=>{
41
- console.log("ERROR", e.message);
42
- }
31
+ const { status, messages, append, input, submitMessage, handleInputChange } = useAssistant({
32
+ api: '/api/generate'
33
+ });
34
+ const isLoading = status === 'in_progress';
35
+ const assistantMessages = messages?.filter((message)=>{
36
+ return message?.role === 'assistant';
43
37
  });
38
+ const completion = [
39
+ ...assistantMessages
40
+ ]?.pop()?.content ?? "";
44
41
  const hasCompletion = completion.length > 0;
45
42
  const handleClick = useCallback(()=>{
46
43
  const editorSelection = editor.state.selection.content().content.toJSON();
47
44
  if (completion) {
48
- return complete(completion, {
49
- body: {
45
+ return append({
46
+ role: 'user',
47
+ content: completion
48
+ }, {
49
+ data: {
50
50
  option: "zap",
51
51
  command: inputValue,
52
52
  language: code ?? "en"
@@ -56,8 +56,11 @@ export const AICommandPanel = /*#__PURE__*/ forwardRef(({ editor, onOpenChange,
56
56
  const text = getPrevText(editor, {
57
57
  chars: 5000
58
58
  });
59
- complete(text, {
60
- body: {
59
+ append({
60
+ role: "user",
61
+ content: text
62
+ }, {
63
+ data: {
61
64
  option: "zap",
62
65
  command: (editor.storage.aiCommand.title ? "Context Title:" + editor.storage.aiCommand.title + ";\n" : "") + (editor.storage.aiCommand.language ? "Context language:" + editor.storage.aiCommand.language + ";\n" : "") + inputValue,
63
66
  language: editor.storage.aiCommand.language ?? code ?? "en",
@@ -249,12 +252,18 @@ export const AICommandPanel = /*#__PURE__*/ forwardRef(({ editor, onOpenChange,
249
252
  messages: completion,
250
253
  onSelect: (value, options)=>{
251
254
  if (options?.option === 'translate') {
252
- complete(value, {
253
- body: options
255
+ append({
256
+ role: 'user',
257
+ content: value
258
+ }, {
259
+ data: options
254
260
  });
255
261
  } else {
256
- complete(value, {
257
- body: {
262
+ append({
263
+ role: 'user',
264
+ content: value
265
+ }, {
266
+ data: {
258
267
  ...options,
259
268
  source: code
260
269
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/panels/AICommandPanel/AICommandPanel.tsx"],"sourcesContent":["\"use client\";\nimport { useCompletion } from '@ai-sdk/react';\nimport { ArrowUpCircle, Sparkles } from \"lucide-react\";\nimport React, {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from \"react\";\nimport Markdown from \"react-markdown\";\nimport TextareaAutosize from \"react-textarea-autosize\";\n\nimport { useLocale } from \"@payloadcms/ui/providers/Locale\";\nimport { Editor } from \"@tiptap/react\";\n\nimport i18next from \"i18next\";\nimport {\n Command,\n Group,\n} from \"src/fields/TiptapEditor/extensions/AICommand/types.js\";\nimport { extractMarkdown } from \"../../../lib/extract.js\";\nimport { getPrevText } from \"../../../lib/utils/index.js\";\nimport AISelectorCommands from \"../../menus/TextMenu/components/ai-selector-commands.js\";\nimport CrazySpinner from \"../../ui/crazy-spinner.js\";\nimport { DropdownButton } from \"../../ui/Dropdown/Dropdown.js\";\nimport { Icon } from \"../../ui/Icon.js\";\nimport { ScrollArea } from \"../../ui/scroll-area.js\";\nimport { Surface } from \"../../ui/Surface.js\";\nimport { Toolbar } from \"../../ui/Toolbar.js\";\nimport { checkJsonCompletion, formatCompletion } from \"../AIEditorPanel/utils.js\";\n\nexport type AICommandPanelProps = {\n editor: Editor;\n userPrompt?: string;\n onOpenChange: (value: boolean) => void;\n items: Group[];\n};\n\nexport const AICommandPanel = forwardRef(\n (\n {\n editor,\n onOpenChange,\n userPrompt,\n items,\n ...restProps\n }: AICommandPanelProps,\n ref\n ) => {\n const [inputValue, setInputValue] = useState(userPrompt ?? \"\");\n const { code } = useLocale();\n const { view } = editor;\n const scrollContainer = useRef<HTMLDivElement>(null);\n const activeItem = useRef<HTMLButtonElement>(null);\n const [selectedGroupIndex, setSelectedGroupIndex] = useState(0);\n const [selectedCommandIndex, setSelectedCommandIndex] = useState(0);\n\n const editorNode = view.dom as HTMLElement;\n const boundigClient = editorNode.getBoundingClientRect();\n const inputRef = useRef<HTMLTextAreaElement>(null);\n\n\n const { completion, complete, isLoading } = useCompletion({\n // id: \"novel\",\n api: \"/api/generate\",\n onResponse: (response) => {\n if (response.status === 429) {\n console.log(\"You have reached your request limit for the day.\");\n\n return;\n }\n },\n\n onError: (e) => {\n console.log(\"ERROR\", e.message);\n },\n });\n\n const hasCompletion = completion.length > 0;\n const handleClick = useCallback(() => {\n const editorSelection = editor.state.selection.content().content.toJSON()\n\n if (completion) {\n return complete(completion, {\n body: { option: \"zap\", command: inputValue, language: code ?? \"en\" },\n }).then(() => setInputValue(\"\"));\n }\n const text = getPrevText(editor, { chars: 5000 });\n\n complete(text, {\n body: {\n option: \"zap\",\n command:\n (editor.storage.aiCommand.title\n ? \"Context Title:\" + editor.storage.aiCommand.title + \";\\n\"\n : \"\") +\n (editor.storage.aiCommand.language\n ? \"Context language:\" + editor.storage.aiCommand.language + \";\\n\"\n : \"\") +\n inputValue,\n language: editor.storage.aiCommand.language ?? code ?? \"en\",\n selection: editorSelection\n },\n }).then(() => setInputValue(\"\"));\n }, [code, inputValue, completion]);\n\n useEffect(() => {\n if (userPrompt) setInputValue(userPrompt);\n }, [userPrompt]);\n useEffect(() => {\n if (!isLoading && hasCompletion) {\n editor.storage.aiCommand.completion = completion;\n }\n }, [completion, isLoading]);\n\n // Anytime the groups change, i.e. the user types to narrow it down, we want to\n // reset the current selection to the first menu item\n useEffect(() => {\n setSelectedGroupIndex(0);\n setSelectedCommandIndex(0);\n }, [items]);\n\n const selectItem = useCallback(\n (groupIndex: number, commandIndex: number) => {\n const command = items[groupIndex].commands[commandIndex];\n\n setInputValue(command.action(editor));\n // props.command(command);\n },\n [items, editor]\n );\n\n useImperativeHandle(ref, () => ({\n onKeyDown: ({ event }: { event: React.KeyboardEvent }) => {\n if (event.key === \"ArrowDown\") {\n if (!items.length) {\n return false;\n }\n\n const commands = items[selectedGroupIndex].commands;\n\n let newCommandIndex = selectedCommandIndex + 1;\n let newGroupIndex = selectedGroupIndex;\n\n if (commands.length - 1 < newCommandIndex) {\n newCommandIndex = 0;\n newGroupIndex = selectedGroupIndex + 1;\n }\n\n if (items.length - 1 < newGroupIndex) {\n newGroupIndex = 0;\n }\n\n setSelectedCommandIndex(newCommandIndex);\n setSelectedGroupIndex(newGroupIndex);\n\n return true;\n }\n\n if (event.key === \"ArrowUp\") {\n if (!items.length) {\n return false;\n }\n\n let newCommandIndex = selectedCommandIndex - 1;\n let newGroupIndex = selectedGroupIndex;\n\n if (newCommandIndex < 0) {\n newGroupIndex = selectedGroupIndex - 1;\n newCommandIndex = items[newGroupIndex]?.commands.length - 1 || 0;\n }\n\n if (newGroupIndex < 0) {\n newGroupIndex = items.length - 1;\n newCommandIndex = items[newGroupIndex].commands.length - 1;\n }\n\n setSelectedCommandIndex(newCommandIndex);\n setSelectedGroupIndex(newGroupIndex);\n\n return true;\n }\n\n if (event.key === \"Enter\") {\n if (\n !items.length ||\n selectedGroupIndex === -1 ||\n selectedCommandIndex === -1\n ) {\n return false;\n }\n\n selectItem(selectedGroupIndex, selectedCommandIndex);\n\n return true;\n }\n\n return false;\n },\n }));\n\n useEffect(() => {\n if (activeItem.current && scrollContainer.current) {\n const offsetTop = activeItem.current.offsetTop;\n const offsetHeight = activeItem.current.offsetHeight;\n\n scrollContainer.current.scrollTop = offsetTop - offsetHeight;\n }\n }, [selectedCommandIndex, selectedGroupIndex]);\n\n const createCommandClickHandler = useCallback(\n (groupIndex: number, commandIndex: number) => {\n return () => {\n selectItem(groupIndex, commandIndex);\n };\n },\n [selectItem]\n );\n\n return (\n <>\n <Surface\n className={`p-2 min-w-[20rem] flex flex-col gap-2 w-full ${hasCompletion ? \"-mt-72\" : \"\"\n }`}\n style={{\n width: boundigClient?.width,\n }}\n >\n <>\n {(hasCompletion && completion?.length > 10 && (checkJsonCompletion(completion) ? !isLoading : true)) && (\n <div className=\"flex w-full\">\n <ScrollArea\n className=\"h-72 prose p-2 px-4 prose-sm w-full max-w-none\"\n dir={i18next.dir()}\n >\n <Markdown>{checkJsonCompletion(completion) ? extractMarkdown({ type: 'doc', content: formatCompletion(completion) as any }) : completion}</Markdown>\n\n </ScrollArea>\n </div>\n )}\n\n {isLoading && (\n <div\n className=\"flex h-12 w-full items-center px-4 text-sm font-medium text-muted-foreground text-blue-500\"\n style={{\n width: boundigClient?.width,\n }}\n >\n <Sparkles className=\"mr-2 h-4 w-4 shrink-0 \" />\n AI (Beta) 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 <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 (Beta) what to do next\"\n : i18next.t(\"askAiPlaceholder\") || \"Ask AI (Beta) 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 if(options?.option === 'translate'){\n\n complete(value, { body: options });\n }else{\n complete(value, { body: {...options, source: code} });\n \n }\n }}\n />\n ) : (\n items.map((group, groupIndex: number) => (\n <React.Fragment key={`${group.title}-wrapper`}>\n <div\n className=\"text-neutral-500 text-[0.65rem] col-[1/-1] mx-2 mt-4 font-semibold tracking-wider select-none uppercase first:mt-0.5\"\n key={`${group.title}`}\n >\n {group.title}\n </div>\n {group.commands.map(\n (command: Command, commandIndex: number) => (\n <DropdownButton\n key={`${command.label}`}\n isActive={\n selectedGroupIndex === groupIndex &&\n selectedCommandIndex === commandIndex\n }\n onClick={createCommandClickHandler(\n groupIndex,\n commandIndex\n )}\n >\n <Icon icon={command.icon} className=\"mr-1\" />\n {command.label}\n </DropdownButton>\n )\n )}\n </React.Fragment>\n ))\n )}\n </div>\n </Surface>\n )}\n </>\n );\n }\n);\n"],"names":["useCompletion","ArrowUpCircle","Sparkles","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","Markdown","TextareaAutosize","useLocale","i18next","extractMarkdown","getPrevText","AISelectorCommands","CrazySpinner","DropdownButton","Icon","ScrollArea","Surface","Toolbar","checkJsonCompletion","formatCompletion","AICommandPanel","editor","onOpenChange","userPrompt","items","restProps","ref","inputValue","setInputValue","code","view","scrollContainer","activeItem","selectedGroupIndex","setSelectedGroupIndex","selectedCommandIndex","setSelectedCommandIndex","editorNode","dom","boundigClient","getBoundingClientRect","inputRef","completion","complete","isLoading","api","onResponse","response","status","console","log","onError","e","message","hasCompletion","length","handleClick","editorSelection","state","selection","content","toJSON","body","option","command","language","then","text","chars","storage","aiCommand","title","selectItem","groupIndex","commandIndex","commands","action","onKeyDown","event","key","newCommandIndex","newGroupIndex","current","offsetTop","offsetHeight","scrollTop","createCommandClickHandler","className","style","width","div","dir","type","resize","value","onChange","target","placeholder","t","autoFocus","Button","onClick","messages","onSelect","options","source","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\";\nimport { useAssistant } from '@ai-sdk/react';\nimport { ArrowUpCircle, Sparkles } from \"lucide-react\";\nimport React, {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from \"react\";\nimport Markdown from \"react-markdown\";\nimport TextareaAutosize from \"react-textarea-autosize\";\n\nimport { useLocale } from \"@payloadcms/ui/providers/Locale\";\nimport { Editor } from \"@tiptap/react\";\n\nimport i18next from \"i18next\";\nimport {\n Command,\n Group,\n} from \"src/fields/TiptapEditor/extensions/AICommand/types.js\";\nimport { extractMarkdown } from \"../../../lib/extract.js\";\nimport { getPrevText } from \"../../../lib/utils/index.js\";\nimport AISelectorCommands from \"../../menus/TextMenu/components/ai-selector-commands.js\";\nimport CrazySpinner from \"../../ui/crazy-spinner.js\";\nimport { DropdownButton } from \"../../ui/Dropdown/Dropdown.js\";\nimport { Icon } from \"../../ui/Icon.js\";\nimport { ScrollArea } from \"../../ui/scroll-area.js\";\nimport { Surface } from \"../../ui/Surface.js\";\nimport { Toolbar } from \"../../ui/Toolbar.js\";\nimport { checkJsonCompletion, formatCompletion } from \"../AIEditorPanel/utils.js\";\n\nexport type AICommandPanelProps = {\n editor: Editor;\n userPrompt?: string;\n onOpenChange: (value: boolean) => void;\n items: Group[];\n};\n\nexport const AICommandPanel = forwardRef(\n (\n {\n editor,\n onOpenChange,\n userPrompt,\n items,\n ...restProps\n }: AICommandPanelProps,\n ref\n ) => {\n const [inputValue, setInputValue] = useState(userPrompt ?? \"\");\n const { code } = useLocale();\n const { view } = editor;\n const scrollContainer = useRef<HTMLDivElement>(null);\n const activeItem = useRef<HTMLButtonElement>(null);\n const [selectedGroupIndex, setSelectedGroupIndex] = useState(0);\n const [selectedCommandIndex, setSelectedCommandIndex] = useState(0);\n\n const editorNode = view.dom as HTMLElement;\n const boundigClient = editorNode.getBoundingClientRect();\n const inputRef = useRef<HTMLTextAreaElement>(null);\n\n\n \n const { status, messages, append,input, submitMessage, handleInputChange } =\n useAssistant({ api: '/api/generate' });\n\n\n \n const isLoading = status === 'in_progress'\n const assistantMessages = messages?.filter((message) => {\n return message?.role === 'assistant'\n }) \n const completion = ([...assistantMessages]?.pop())?.content ?? \"\"\n\n const hasCompletion = completion.length > 0;\n const handleClick = useCallback(() => {\n const editorSelection = editor.state.selection.content().content.toJSON()\n\n if (completion) {\n return append({role: 'user', content:completion}, {\n data: { option: \"zap\", command: inputValue, language: code ?? \"en\" },\n }).then(() => setInputValue(\"\"));\n }\n const text = getPrevText(editor, { chars: 5000 });\n\n append({role: \"user\",content:text}, {\n data: {\n option: \"zap\",\n command:\n (editor.storage.aiCommand.title\n ? \"Context Title:\" + editor.storage.aiCommand.title + \";\\n\"\n : \"\") +\n (editor.storage.aiCommand.language\n ? \"Context language:\" + editor.storage.aiCommand.language + \";\\n\"\n : \"\") +\n inputValue,\n language: editor.storage.aiCommand.language ?? code ?? \"en\",\n selection: editorSelection\n },\n }).then(() => setInputValue(\"\"));\n }, [code, inputValue, completion]);\n\n useEffect(() => {\n if (userPrompt) setInputValue(userPrompt);\n }, [userPrompt]);\n useEffect(() => {\n if (!isLoading && hasCompletion) {\n editor.storage.aiCommand.completion = completion;\n }\n }, [completion, isLoading]);\n\n // Anytime the groups change, i.e. the user types to narrow it down, we want to\n // reset the current selection to the first menu item\n useEffect(() => {\n setSelectedGroupIndex(0);\n setSelectedCommandIndex(0);\n }, [items]);\n\n const selectItem = useCallback(\n (groupIndex: number, commandIndex: number) => {\n const command = items[groupIndex].commands[commandIndex];\n\n setInputValue(command.action(editor));\n // props.command(command);\n },\n [items, editor]\n );\n\n useImperativeHandle(ref, () => ({\n onKeyDown: ({ event }: { event: React.KeyboardEvent }) => {\n if (event.key === \"ArrowDown\") {\n if (!items.length) {\n return false;\n }\n\n const commands = items[selectedGroupIndex].commands;\n\n let newCommandIndex = selectedCommandIndex + 1;\n let newGroupIndex = selectedGroupIndex;\n\n if (commands.length - 1 < newCommandIndex) {\n newCommandIndex = 0;\n newGroupIndex = selectedGroupIndex + 1;\n }\n\n if (items.length - 1 < newGroupIndex) {\n newGroupIndex = 0;\n }\n\n setSelectedCommandIndex(newCommandIndex);\n setSelectedGroupIndex(newGroupIndex);\n\n return true;\n }\n\n if (event.key === \"ArrowUp\") {\n if (!items.length) {\n return false;\n }\n\n let newCommandIndex = selectedCommandIndex - 1;\n let newGroupIndex = selectedGroupIndex;\n\n if (newCommandIndex < 0) {\n newGroupIndex = selectedGroupIndex - 1;\n newCommandIndex = items[newGroupIndex]?.commands.length - 1 || 0;\n }\n\n if (newGroupIndex < 0) {\n newGroupIndex = items.length - 1;\n newCommandIndex = items[newGroupIndex].commands.length - 1;\n }\n\n setSelectedCommandIndex(newCommandIndex);\n setSelectedGroupIndex(newGroupIndex);\n\n return true;\n }\n\n if (event.key === \"Enter\") {\n if (\n !items.length ||\n selectedGroupIndex === -1 ||\n selectedCommandIndex === -1\n ) {\n return false;\n }\n\n selectItem(selectedGroupIndex, selectedCommandIndex);\n\n return true;\n }\n\n return false;\n },\n }));\n\n useEffect(() => {\n if (activeItem.current && scrollContainer.current) {\n const offsetTop = activeItem.current.offsetTop;\n const offsetHeight = activeItem.current.offsetHeight;\n\n scrollContainer.current.scrollTop = offsetTop - offsetHeight;\n }\n }, [selectedCommandIndex, selectedGroupIndex]);\n\n const createCommandClickHandler = useCallback(\n (groupIndex: number, commandIndex: number) => {\n return () => {\n selectItem(groupIndex, commandIndex);\n };\n },\n [selectItem]\n );\n\n return (\n <>\n <Surface\n className={`p-2 min-w-[20rem] flex flex-col gap-2 w-full ${hasCompletion ? \"-mt-72\" : \"\"\n }`}\n style={{\n width: boundigClient?.width,\n }}\n >\n <>\n {(hasCompletion && completion?.length > 10 && (checkJsonCompletion(completion) ? !isLoading : true)) && (\n <div className=\"flex w-full\">\n <ScrollArea\n className=\"h-72 prose p-2 px-4 prose-sm w-full max-w-none\"\n dir={i18next.dir()}\n >\n <Markdown>{checkJsonCompletion(completion) ? extractMarkdown({ type: 'doc', content: formatCompletion(completion) as any }) : completion}</Markdown>\n\n </ScrollArea>\n </div>\n )}\n\n {isLoading && (\n <div\n className=\"flex h-12 w-full items-center px-4 text-sm font-medium text-muted-foreground text-blue-500\"\n style={{\n width: boundigClient?.width,\n }}\n >\n <Sparkles className=\"mr-2 h-4 w-4 shrink-0 \" />\n AI (Beta) 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 <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 (Beta) what to do next\"\n : i18next.t(\"askAiPlaceholder\") || \"Ask AI (Beta) 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 if(options?.option === 'translate'){\n\n append({role: 'user', content:value}, { data: options as any });\n }else{\n append({role: 'user', content:value}, { data: {...options, source: code} as any });\n \n }\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":["useAssistant","ArrowUpCircle","Sparkles","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","Markdown","TextareaAutosize","useLocale","i18next","extractMarkdown","getPrevText","AISelectorCommands","CrazySpinner","DropdownButton","Icon","ScrollArea","Surface","Toolbar","checkJsonCompletion","formatCompletion","AICommandPanel","editor","onOpenChange","userPrompt","items","restProps","ref","inputValue","setInputValue","code","view","scrollContainer","activeItem","selectedGroupIndex","setSelectedGroupIndex","selectedCommandIndex","setSelectedCommandIndex","editorNode","dom","boundigClient","getBoundingClientRect","inputRef","status","messages","append","input","submitMessage","handleInputChange","api","isLoading","assistantMessages","filter","message","role","completion","pop","content","hasCompletion","length","handleClick","editorSelection","state","selection","toJSON","data","option","command","language","then","text","chars","storage","aiCommand","title","selectItem","groupIndex","commandIndex","commands","action","onKeyDown","event","key","newCommandIndex","newGroupIndex","current","offsetTop","offsetHeight","scrollTop","createCommandClickHandler","className","style","width","div","dir","type","resize","value","onChange","e","target","placeholder","t","autoFocus","Button","onClick","onSelect","options","source","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;AAiBvC,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,gCA+HzE,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;AAkBvC,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,gCA2HzE,CAAA"}
@@ -1,10 +1,10 @@
1
1
  "use client";
2
2
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
3
  import { useLocale } from "@payloadcms/ui/providers/Locale";
4
- import { useCompletion } from "ai/react";
5
4
  import { ArrowRight, Sparkles } from "lucide-react";
6
5
  import { useCallback, useRef, useState } from "react";
7
6
  import TextareaAutosize from "react-textarea-autosize";
7
+ import { useAssistant } from "@ai-sdk/react";
8
8
  import i18next from "i18next";
9
9
  import Markdown from "react-markdown";
10
10
  import { extractMarkdown } from "../../../lib/extract.js";
@@ -23,24 +23,24 @@ export const AIEditorPanel = ({ editor, onOpenChange })=>{
23
23
  const editorNode = view.dom;
24
24
  const boundigClient = editorNode.getBoundingClientRect();
25
25
  const inputRef = useRef(null);
26
- const { completion, complete, isLoading } = useCompletion({
27
- // id: "novel",
28
- api: "/api/generate",
29
- onResponse: (response)=>{
30
- if (response.status === 429) {
31
- console.log("You have reached your request limit for the day.");
32
- return;
33
- }
34
- },
35
- onError: (e)=>{
36
- console.log("ERROR", e.message);
37
- }
26
+ const { status, messages, append, input, submitMessage, handleInputChange } = useAssistant({
27
+ api: '/api/generate'
28
+ });
29
+ const isLoading = status === 'in_progress';
30
+ const assistantMessages = messages?.filter((message)=>{
31
+ return message?.role === 'assistant';
38
32
  });
33
+ const completion = [
34
+ ...assistantMessages
35
+ ]?.pop()?.content ?? "";
39
36
  const hasCompletion = completion.length > 0;
40
37
  const handleClick = useCallback(()=>{
41
38
  if (completion) {
42
- return complete(completion, {
43
- body: {
39
+ return append({
40
+ role: 'user',
41
+ content: completion
42
+ }, {
43
+ data: {
44
44
  option: "zap",
45
45
  command: inputValue,
46
46
  language: code ?? "en"
@@ -50,8 +50,11 @@ export const AIEditorPanel = ({ editor, onOpenChange })=>{
50
50
  const text = getPrevText(editor, {
51
51
  chars: 5000
52
52
  });
53
- complete(text, {
54
- body: {
53
+ append({
54
+ content: text,
55
+ role: "user"
56
+ }, {
57
+ data: {
55
58
  option: "zap",
56
59
  command: inputValue,
57
60
  language: code ?? "en"
@@ -139,8 +142,11 @@ export const AIEditorPanel = ({ editor, onOpenChange })=>{
139
142
  messages: completion,
140
143
  editor: editor,
141
144
  onSelect: (value, options)=>{
142
- complete(value, {
143
- body: options
145
+ append({
146
+ role: "user",
147
+ content: value
148
+ }, {
149
+ data: options
144
150
  });
145
151
  }
146
152
  })
@@ -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, useRef, useState } from \"react\";\nimport TextareaAutosize from \"react-textarea-autosize\";\n\nimport i18next from \"i18next\";\nimport Markdown from \"react-markdown\";\nimport { extractMarkdown } from \"../../../lib/extract.js\";\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 { checkJsonCompletion, formatCompletion } from \"./utils.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\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, completion]);\n\n return (\n <Surface\n className={`p-2 min-w-[20rem] `}\n style={{\n width: boundigClient?.width,\n }}\n >\n <>\n {(hasCompletion && completion?.length > 10 && (checkJsonCompletion(completion) ? !isLoading : true)) && (\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>{checkJsonCompletion(completion) ? extractMarkdown({ type: 'doc', content: formatCompletion(completion) as any }) : 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 (Beta) 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 <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 (Beta) what to do next\"\n : i18next.t(\"askAiPlaceholder\") || \"Ask AI (Beta) 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()?.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\n"],"names":["useLocale","useCompletion","ArrowRight","Sparkles","useCallback","useRef","useState","TextareaAutosize","i18next","Markdown","extractMarkdown","getPrevText","AICompletionCommands","AISelectorCommands","Surface","Toolbar","CrazySpinner","ScrollArea","checkJsonCompletion","formatCompletion","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","type","content","ref","value","onChange","target","placeholder","t","autoFocus","onKeyDown","key","Button","onClick","onDiscard","chain","focus","run","messages","onSelect","options"],"mappings":"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"}
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 { ArrowRight, Sparkles } from \"lucide-react\";\nimport { useCallback, useRef, useState } from \"react\";\nimport TextareaAutosize from \"react-textarea-autosize\";\n\nimport { useAssistant } from \"@ai-sdk/react\";\nimport i18next from \"i18next\";\nimport Markdown from \"react-markdown\";\nimport { extractMarkdown } from \"../../../lib/extract.js\";\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 { checkJsonCompletion, formatCompletion } from \"./utils.js\";\n\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\n const { status, messages, append,input, submitMessage, handleInputChange } =\n useAssistant({ api: '/api/generate' });\n\n const isLoading = status === 'in_progress'\n const assistantMessages = messages?.filter((message) => {\n return message?.role === 'assistant'\n }) \n const completion = ([...assistantMessages]?.pop())?.content ?? \"\"\n\n const hasCompletion = completion.length > 0;\n const handleClick = useCallback(() => {\n if (completion) {\n return append({ role: 'user',content: completion}, {\n data: { option: \"zap\", command: inputValue, language: code ?? \"en\" },\n }).then(() => setInputValue(\"\"));\n }\n const text = getPrevText(editor, { chars: 5000 });\n\n append({content:text, role: \"user\"}, {\n data: { option: \"zap\", command: inputValue, language: code ?? \"en\" },\n }).then(() => setInputValue(\"\"));\n }, [code, inputValue, completion]);\n\n return (\n <Surface\n className={`p-2 min-w-[20rem] `}\n style={{\n width: boundigClient?.width,\n }}\n >\n <>\n {(hasCompletion && completion?.length > 10 && (checkJsonCompletion(completion) ? !isLoading : true)) && (\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>{checkJsonCompletion(completion) ? extractMarkdown({ type: 'doc', content: formatCompletion(completion) as any }) : 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 (Beta) 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 <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 (Beta) what to do next\"\n : i18next.t(\"askAiPlaceholder\") || \"Ask AI (Beta) 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()?.focus()?.run();\n onOpenChange(false);\n }}\n completion={completion}\n />\n ) : (\n <AISelectorCommands\n messages={completion}\n editor={editor}\n onSelect={(value, options) => {\n append({\n role: \"user\",\n content: value\n }, { data: options as any});\n }}\n />\n )}\n </>\n )}\n </>\n </Surface>\n );\n}\n\n"],"names":["useLocale","ArrowRight","Sparkles","useCallback","useRef","useState","TextareaAutosize","useAssistant","i18next","Markdown","extractMarkdown","getPrevText","AICompletionCommands","AISelectorCommands","Surface","Toolbar","CrazySpinner","ScrollArea","checkJsonCompletion","formatCompletion","AIEditorPanel","editor","onOpenChange","inputValue","setInputValue","code","view","editorNode","dom","boundigClient","getBoundingClientRect","inputRef","status","messages","append","input","submitMessage","handleInputChange","api","isLoading","assistantMessages","filter","message","role","completion","pop","content","hasCompletion","length","handleClick","data","option","command","language","then","text","chars","className","style","width","div","dir","type","ref","value","onChange","e","target","placeholder","t","autoFocus","onKeyDown","key","Button","onClick","onDiscard","chain","focus","run","onSelect","options"],"mappings":"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"}