payload-richtext-tiptap 0.0.96 → 0.0.98
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/fields/TiptapEditor/features/BlockEditor/OneLineEditor.d.ts +9 -0
- package/dist/src/fields/TiptapEditor/features/BlockEditor/OneLineEditor.d.ts.map +1 -0
- package/dist/src/fields/TiptapEditor/features/BlockEditor/OneLineEditor.js +110 -0
- package/dist/src/fields/TiptapEditor/features/BlockEditor/OneLineEditor.js.map +1 -0
- package/dist/src/fields/TiptapEditor/features/BlockEditor/components/OneLiner.d.ts +4 -0
- package/dist/src/fields/TiptapEditor/features/BlockEditor/components/OneLiner.d.ts.map +1 -0
- package/dist/src/fields/TiptapEditor/features/BlockEditor/components/OneLiner.js +9 -0
- package/dist/src/fields/TiptapEditor/features/BlockEditor/components/OneLiner.js.map +1 -0
- package/dist/src/fields/TiptapEditor/features/menus/TextMenu/AITextMenu.d.ts +7 -0
- package/dist/src/fields/TiptapEditor/features/menus/TextMenu/AITextMenu.d.ts.map +1 -0
- package/dist/src/fields/TiptapEditor/features/menus/TextMenu/AITextMenu.js +54 -0
- package/dist/src/fields/TiptapEditor/features/menus/TextMenu/AITextMenu.js.map +1 -0
- package/dist/src/fields/TiptapEditor/features/menus/TextMenu/components/ai-selector-commands.d.ts.map +1 -1
- package/dist/src/fields/TiptapEditor/features/menus/TextMenu/components/ai-selector-commands.js +6 -8
- package/dist/src/fields/TiptapEditor/features/menus/TextMenu/components/ai-selector-commands.js.map +1 -1
- package/dist/src/fields/TiptapEditor/features/panels/AICommandPanel/AICommandPanel.js +3 -4
- package/dist/src/fields/TiptapEditor/features/panels/AICommandPanel/AICommandPanel.js.map +1 -1
- package/dist/src/fields/TiptapEditor/features/panels/AIEditorPanel/AIEditorPanel.d.ts.map +1 -1
- package/dist/src/fields/TiptapEditor/features/panels/AIEditorPanel/AIEditorPanel.js +4 -7
- package/dist/src/fields/TiptapEditor/features/panels/AIEditorPanel/AIEditorPanel.js.map +1 -1
- package/dist/src/index.d.ts +1 -0
- package/dist/src/index.d.ts.map +1 -1
- package/dist/src/index.js +1 -0
- package/dist/src/index.js.map +1 -1
- package/dist/src/styles.css +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { AdditionalContextType, TiptapProps } from "./types.js";
|
|
2
|
+
export declare const OneLineEditor: ({ handleChange, content, additionalContext, isEditable, autoFocus, dir, }: TiptapProps & {
|
|
3
|
+
additionalContext?: AdditionalContextType;
|
|
4
|
+
autoFocus?: boolean;
|
|
5
|
+
isEditable?: boolean;
|
|
6
|
+
dir?: "ltr" | "rtl" | "auto";
|
|
7
|
+
}) => import("react").JSX.Element;
|
|
8
|
+
export default OneLineEditor;
|
|
9
|
+
//# sourceMappingURL=OneLineEditor.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"OneLineEditor.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/features/BlockEditor/OneLineEditor.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAKhE,eAAO,MAAM,aAAa,8EAOvB,WAAW,GAAG;IACf,iBAAiB,CAAC,EAAE,qBAAqB,CAAC;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;CAC9B,gCA8GA,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
+
import { EditorContent, useEditor } from "@tiptap/react";
|
|
4
|
+
import i18n from "i18next";
|
|
5
|
+
import { useEffect, useMemo, useRef } from "react";
|
|
6
|
+
import { EditorContext } from "../../context/EditorContext.js";
|
|
7
|
+
import i18next from "i18next";
|
|
8
|
+
import Text from '@tiptap/extension-text';
|
|
9
|
+
import Highlight from '@tiptap/extension-highlight';
|
|
10
|
+
import { AICommand, Paragraph } from "../../extensions/index.js";
|
|
11
|
+
import OneLiner from "./components/OneLiner.js";
|
|
12
|
+
import { AITextMenu } from "../menus/TextMenu/AITextMenu.js";
|
|
13
|
+
const DEFAULT_LANG = "en";
|
|
14
|
+
export const OneLineEditor = ({ handleChange, content, additionalContext, isEditable = true, autoFocus = true, dir })=>{
|
|
15
|
+
const menuContainerRef = useRef(null);
|
|
16
|
+
const editorRef = useRef(null);
|
|
17
|
+
const editor = useEditor({
|
|
18
|
+
content: content?.json ?? content ?? {},
|
|
19
|
+
immediatelyRender: false,
|
|
20
|
+
autofocus: autoFocus ?? true,
|
|
21
|
+
editable: isEditable ?? true,
|
|
22
|
+
onCreate: ({ editor })=>({
|
|
23
|
+
}),
|
|
24
|
+
extensions: [
|
|
25
|
+
OneLiner,
|
|
26
|
+
Text,
|
|
27
|
+
Paragraph,
|
|
28
|
+
AICommand,
|
|
29
|
+
Highlight
|
|
30
|
+
],
|
|
31
|
+
editorProps: {
|
|
32
|
+
attributes: {
|
|
33
|
+
languages: i18next.language,
|
|
34
|
+
autocomplete: "off",
|
|
35
|
+
autocorrect: "off",
|
|
36
|
+
autocapitalize: "off",
|
|
37
|
+
class: "min-h-full"
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
onUpdate: ({ editor })=>{
|
|
41
|
+
handleChange(editor?.getJSON() ?? {});
|
|
42
|
+
}
|
|
43
|
+
}, []);
|
|
44
|
+
const providerValue = useMemo(()=>{
|
|
45
|
+
return {};
|
|
46
|
+
}, []);
|
|
47
|
+
useEffect(()=>{
|
|
48
|
+
if (!additionalContext) {
|
|
49
|
+
i18n.init({
|
|
50
|
+
fallbackLng: DEFAULT_LANG,
|
|
51
|
+
lng: DEFAULT_LANG,
|
|
52
|
+
returnEmptyString: true,
|
|
53
|
+
resources: {}
|
|
54
|
+
});
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
if (additionalContext.language && additionalContext.translations) {
|
|
58
|
+
i18n.init({
|
|
59
|
+
fallbackLng: additionalContext.language,
|
|
60
|
+
lng: additionalContext.language,
|
|
61
|
+
returnEmptyString: true,
|
|
62
|
+
resources: {
|
|
63
|
+
[additionalContext.language]: {
|
|
64
|
+
translation: additionalContext.translations
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
});
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
70
|
+
if (additionalContext.language) {
|
|
71
|
+
i18n.init({
|
|
72
|
+
fallbackLng: additionalContext?.language,
|
|
73
|
+
lng: additionalContext?.language,
|
|
74
|
+
returnEmptyString: true,
|
|
75
|
+
resources: {}
|
|
76
|
+
});
|
|
77
|
+
}
|
|
78
|
+
}, []);
|
|
79
|
+
return editor && /*#__PURE__*/ _jsx(EditorContext.Provider, {
|
|
80
|
+
value: providerValue,
|
|
81
|
+
children: /*#__PURE__*/ _jsx("div", {
|
|
82
|
+
className: "flex h-full overflow-visible",
|
|
83
|
+
ref: menuContainerRef,
|
|
84
|
+
dir: i18next.dir(),
|
|
85
|
+
children: /*#__PURE__*/ _jsxs("div", {
|
|
86
|
+
className: "one-liner relative flex flex-col flex-1 h-full justify-center items-center ",
|
|
87
|
+
children: [
|
|
88
|
+
/*#__PURE__*/ _jsx(EditorContent, {
|
|
89
|
+
dir: i18next.dir(),
|
|
90
|
+
editor: editor,
|
|
91
|
+
ref: editorRef,
|
|
92
|
+
className: "flex-1 overflow-y-visible w-full h-full outline-none outline-offset-0",
|
|
93
|
+
style: {
|
|
94
|
+
outline: "none"
|
|
95
|
+
}
|
|
96
|
+
}),
|
|
97
|
+
isEditable && /*#__PURE__*/ _jsx(_Fragment, {
|
|
98
|
+
children: /*#__PURE__*/ _jsx(AITextMenu, {
|
|
99
|
+
editor: editor,
|
|
100
|
+
dir: i18next.dir()
|
|
101
|
+
})
|
|
102
|
+
})
|
|
103
|
+
]
|
|
104
|
+
})
|
|
105
|
+
})
|
|
106
|
+
});
|
|
107
|
+
};
|
|
108
|
+
export default OneLineEditor;
|
|
109
|
+
|
|
110
|
+
//# sourceMappingURL=OneLineEditor.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/features/BlockEditor/OneLineEditor.tsx"],"sourcesContent":["\"use client\";\nimport { EditorContent, useEditor } from \"@tiptap/react\";\nimport i18n from \"i18next\";\nimport { useEffect, useMemo, useRef } from \"react\";\n\nimport { EditorContext } from \"../../context/EditorContext.js\";\n\nimport i18next from \"i18next\";\nimport Text from '@tiptap/extension-text'\nimport Highlight from '@tiptap/extension-highlight'\nimport { AICommand, Heading, Paragraph, StarterKit } from \"../../extensions/index.js\";\nimport OneLiner from \"./components/OneLiner.js\";\nimport { AdditionalContextType, TiptapProps } from \"./types.js\";\nimport { AITextMenu } from \"../menus/TextMenu/AITextMenu.js\";\n\nconst DEFAULT_LANG = \"en\"\n\nexport const OneLineEditor = ({\n handleChange,\n content,\n additionalContext,\n isEditable = true,\n autoFocus = true,\n dir,\n}: TiptapProps & {\n additionalContext?: AdditionalContextType;\n autoFocus?: boolean;\n isEditable?: boolean;\n dir?: \"ltr\" | \"rtl\" | \"auto\";\n}) => {\n const menuContainerRef = useRef(null);\n const editorRef = useRef<HTMLDivElement>(null);\n\n const editor = useEditor(\n {\n content: content?.json ?? content ?? {},\n immediatelyRender: false,\n autofocus: autoFocus ?? true,\n editable: isEditable ?? true,\n onCreate: ({ editor }) => ({\n // provider?.on('synced', () => {\n // if (editor.isEmpty) {\n // editor.commands.setContent(initialContent)\n // }\n // })\n }),\n extensions: [\n OneLiner,\n Text,\n Paragraph,\n AICommand,\n Highlight\n\n ],\n editorProps: {\n attributes: {\n languages: i18next.language,\n autocomplete: \"off\",\n autocorrect: \"off\",\n autocapitalize: \"off\",\n class: \"min-h-full\",\n },\n },\n onUpdate: ({ editor }) => {\n handleChange(editor?.getJSON() ?? {});\n },\n },\n []\n );\n\n\n const providerValue = useMemo(() => {\n return {};\n }, []);\n useEffect(() => {\n if (!additionalContext) {\n i18n.init({\n fallbackLng: DEFAULT_LANG,\n lng: DEFAULT_LANG,\n returnEmptyString: true,\n resources: {},\n });\n return\n }\n\n if (additionalContext.language && additionalContext.translations) {\n i18n.init({\n fallbackLng: additionalContext.language,\n lng: additionalContext.language,\n returnEmptyString: true,\n resources: {\n [additionalContext.language]: {\n translation: additionalContext.translations,\n },\n },\n });\n return\n }\n if (additionalContext.language) {\n i18n.init({\n fallbackLng: additionalContext?.language,\n lng: additionalContext?.language,\n returnEmptyString: true,\n resources: {},\n });\n }\n }, []);\n\n return (\n editor && (\n <EditorContext.Provider value={providerValue}>\n <div\n className=\"flex h-full overflow-visible\"\n ref={menuContainerRef}\n dir={i18next.dir()}\n >\n <div className=\"one-liner relative flex flex-col flex-1 h-full justify-center items-center \">\n <EditorContent\n dir={i18next.dir()}\n editor={editor}\n ref={editorRef}\n className=\"flex-1 overflow-y-visible w-full h-full outline-none outline-offset-0\"\n style={{\n outline: \"none\",\n }}\n />\n {isEditable && (\n <>\n <AITextMenu\n editor={editor}\n dir={i18next.dir()}\n />\n </>\n )}\n </div>\n </div>\n </EditorContext.Provider>\n )\n );\n};\n\nexport default OneLineEditor;\n"],"names":["EditorContent","useEditor","i18n","useEffect","useMemo","useRef","EditorContext","i18next","Text","Highlight","AICommand","Paragraph","OneLiner","AITextMenu","DEFAULT_LANG","OneLineEditor","handleChange","content","additionalContext","isEditable","autoFocus","dir","menuContainerRef","editorRef","editor","json","immediatelyRender","autofocus","editable","onCreate","extensions","editorProps","attributes","languages","language","autocomplete","autocorrect","autocapitalize","class","onUpdate","getJSON","providerValue","init","fallbackLng","lng","returnEmptyString","resources","translations","translation","Provider","value","div","className","ref","style","outline"],"mappings":"AAAA;;AACA,SAASA,aAAa,EAAEC,SAAS,QAAQ,gBAAgB;AACzD,OAAOC,UAAU,UAAU;AAC3B,SAASC,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,QAAQ;AAEnD,SAASC,aAAa,QAAQ,iCAAiC;AAE/D,OAAOC,aAAa,UAAU;AAC9B,OAAOC,UAAU,yBAAwB;AACzC,OAAOC,eAAe,8BAA6B;AACnD,SAASC,SAAS,EAAWC,SAAS,QAAoB,4BAA4B;AACtF,OAAOC,cAAc,2BAA2B;AAEhD,SAASC,UAAU,QAAQ,kCAAkC;AAE7D,MAAMC,eAAe;AAErB,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,YAAY,EACZC,OAAO,EACPC,iBAAiB,EACjBC,aAAa,IAAI,EACjBC,YAAY,IAAI,EAChBC,GAAG,EAMJ;IACC,MAAMC,mBAAmBjB,OAAO;IAChC,MAAMkB,YAAYlB,OAAuB;IAEzC,MAAMmB,SAASvB,UACb;QACEgB,SAASA,SAASQ,QAAQR,WAAW,CAAC;QACtCS,mBAAmB;QACnBC,WAAWP,aAAa;QACxBQ,UAAUT,cAAc;QACxBU,UAAU,CAAC,EAAEL,MAAM,EAAE,GAAM,CAAA;YAM3B,CAAA;QACAM,YAAY;YACVlB;YACAJ;YACAG;YACAD;YACAD;SAED;QACDsB,aAAa;YACXC,YAAY;gBACVC,WAAW1B,QAAQ2B,QAAQ;gBAC3BC,cAAc;gBACdC,aAAa;gBACbC,gBAAgB;gBAChBC,OAAO;YACT;QACF;QACAC,UAAU,CAAC,EAAEf,MAAM,EAAE;YACnBR,aAAaQ,QAAQgB,aAAa,CAAC;QACrC;IACF,GACA,EAAE;IAIJ,MAAMC,gBAAgBrC,QAAQ;QAC5B,OAAO,CAAC;IACV,GAAG,EAAE;IACLD,UAAU;QACR,IAAI,CAACe,mBAAmB;YACtBhB,KAAKwC,IAAI,CAAC;gBACRC,aAAa7B;gBACb8B,KAAK9B;gBACL+B,mBAAmB;gBACnBC,WAAW,CAAC;YACd;YACA;QACF;QAEA,IAAI5B,kBAAkBgB,QAAQ,IAAIhB,kBAAkB6B,YAAY,EAAE;YAChE7C,KAAKwC,IAAI,CAAC;gBACRC,aAAazB,kBAAkBgB,QAAQ;gBACvCU,KAAK1B,kBAAkBgB,QAAQ;gBAC/BW,mBAAmB;gBACnBC,WAAW;oBACT,CAAC5B,kBAAkBgB,QAAQ,CAAC,EAAE;wBAC5Bc,aAAa9B,kBAAkB6B,YAAY;oBAC7C;gBACF;YACF;YACA;QACF;QACA,IAAI7B,kBAAkBgB,QAAQ,EAAE;YAC9BhC,KAAKwC,IAAI,CAAC;gBACRC,aAAazB,mBAAmBgB;gBAChCU,KAAK1B,mBAAmBgB;gBACxBW,mBAAmB;gBACnBC,WAAW,CAAC;YACd;QACF;IACF,GAAG,EAAE;IAEL,OACEtB,wBACE,KAAClB,cAAc2C,QAAQ;QAACC,OAAOT;kBAC7B,cAAA,KAACU;YACCC,WAAU;YACVC,KAAK/B;YACLD,KAAKd,QAAQc,GAAG;sBAEhB,cAAA,MAAC8B;gBAAIC,WAAU;;kCACb,KAACpD;wBACCqB,KAAKd,QAAQc,GAAG;wBAChBG,QAAQA;wBACR6B,KAAK9B;wBACL6B,WAAU;wBACVE,OAAO;4BACLC,SAAS;wBACX;;oBAEDpC,4BACC;kCACE,cAAA,KAACN;4BACCW,QAAQA;4BACRH,KAAKd,QAAQc,GAAG;;;;;;;AASlC,EAAE;AAEF,eAAeN,cAAc"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"OneLiner.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/features/BlockEditor/components/OneLiner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,QAAA,MAAM,QAAQ,gBAIZ,CAAC;AAEH,eAAe,QAAQ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/BlockEditor/components/OneLiner.tsx"],"sourcesContent":["import { Node } from \"@tiptap/core\";\n\nconst OneLiner = Node.create({\n name: \"oneLiner\",\n topNode: true,\n content: \"block\",\n});\n\nexport default OneLiner;"],"names":["Node","OneLiner","create","name","topNode","content"],"mappings":"AAAA,SAASA,IAAI,QAAQ,eAAe;AAEpC,MAAMC,WAAWD,KAAKE,MAAM,CAAC;IACzBC,MAAM;IACNC,SAAS;IACTC,SAAS;AACb;AAEA,eAAeJ,SAAS"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Editor } from "@tiptap/react";
|
|
2
|
+
export type TextMenuProps = {
|
|
3
|
+
editor: Editor;
|
|
4
|
+
dir: "rtl" | "ltr" | "auto";
|
|
5
|
+
};
|
|
6
|
+
export declare const AITextMenu: ({ editor, dir }: TextMenuProps) => import("react").JSX.Element;
|
|
7
|
+
//# sourceMappingURL=AITextMenu.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AITextMenu.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/features/menus/TextMenu/AITextMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,MAAM,EAAE,MAAM,eAAe,CAAC;AAkBnD,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,UAAU,oBAAqB,aAAa,gCA2CxD,CAAC"}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { BubbleMenu } from "@tiptap/react";
|
|
3
|
+
import { Sparkles } from "lucide-react";
|
|
4
|
+
import { useState } from "react";
|
|
5
|
+
import { AIEditorPanel } from "../../panels/AIEditorPanel/AIEditorPanel.js";
|
|
6
|
+
import { Icon } from "../../ui/Icon.js";
|
|
7
|
+
import { Toolbar } from "../../ui/Toolbar.js";
|
|
8
|
+
// import { FontFamilyPicker } from "./components/FontFamilyPicker.js";
|
|
9
|
+
import i18next from "i18next";
|
|
10
|
+
import { useTextmenuCommands } from "./hooks/useTextmenuCommands.js";
|
|
11
|
+
import { useTextmenuContentTypes } from "./hooks/useTextmenuContentTypes.js";
|
|
12
|
+
import { useTextmenuStates } from "./hooks/useTextmenuStates.js";
|
|
13
|
+
export const AITextMenu = ({ editor, dir })=>{
|
|
14
|
+
const commands = useTextmenuCommands(editor);
|
|
15
|
+
const states = useTextmenuStates(editor);
|
|
16
|
+
const blockOptions = useTextmenuContentTypes(editor);
|
|
17
|
+
const [openAi, setOpenAi] = useState(false);
|
|
18
|
+
return /*#__PURE__*/ _jsx(BubbleMenu, {
|
|
19
|
+
tippyOptions: {
|
|
20
|
+
placement: "auto",
|
|
21
|
+
popperOptions: {
|
|
22
|
+
placement: "auto"
|
|
23
|
+
},
|
|
24
|
+
onHide: ()=>{
|
|
25
|
+
setOpenAi(false);
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
editor: editor,
|
|
29
|
+
pluginKey: "textMenu",
|
|
30
|
+
shouldShow: states.shouldShow,
|
|
31
|
+
updateDelay: 100,
|
|
32
|
+
children: openAi ? /*#__PURE__*/ _jsx(AIEditorPanel, {
|
|
33
|
+
editor: editor,
|
|
34
|
+
onOpenChange: (value)=>{
|
|
35
|
+
setOpenAi(value);
|
|
36
|
+
}
|
|
37
|
+
}) : /*#__PURE__*/ _jsx(Toolbar.Wrapper, {
|
|
38
|
+
children: /*#__PURE__*/ _jsxs(Toolbar.Button, {
|
|
39
|
+
className: "text-purple-500 hover:text-purple-600 active:text-purple-600 dark:text-purple-400 dark:hover:text-purple-300 dark:active:text-purple-400",
|
|
40
|
+
activeClassname: "text-purple-600 hover:text-purple-600 dark:text-purple-400 dark:hover:text-purple-200",
|
|
41
|
+
onClick: ()=>setOpenAi(true),
|
|
42
|
+
children: [
|
|
43
|
+
/*#__PURE__*/ _jsx(Icon, {
|
|
44
|
+
icon: Sparkles,
|
|
45
|
+
className: "mr-1"
|
|
46
|
+
}),
|
|
47
|
+
i18next.t("aiTools") || "AI Tools"
|
|
48
|
+
]
|
|
49
|
+
})
|
|
50
|
+
})
|
|
51
|
+
});
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
//# sourceMappingURL=AITextMenu.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/menus/TextMenu/AITextMenu.tsx"],"sourcesContent":["import { BubbleMenu, Editor } from \"@tiptap/react\";\nimport {\n Sparkles\n} from \"lucide-react\";\nimport { memo, useState } from \"react\";\nimport { AIEditorPanel } from \"../../panels/AIEditorPanel/AIEditorPanel.js\";\nimport { ColorPicker } from \"../../panels/index.js\";\nimport { Icon } from \"../../ui/Icon.js\";\nimport { Toolbar } from \"../../ui/Toolbar.js\";\nimport { ContentTypePicker } from \"./components/ContentTypePicker.js\";\n// import { FontFamilyPicker } from \"./components/FontFamilyPicker.js\";\nimport i18next from \"i18next\";\nimport { FontSizePicker } from \"./components/FontSizePicker.js\";\nimport { useTextmenuCommands } from \"./hooks/useTextmenuCommands.js\";\nimport { useTextmenuContentTypes } from \"./hooks/useTextmenuContentTypes.js\";\nimport { useTextmenuStates } from \"./hooks/useTextmenuStates.js\";\n\n\nexport type TextMenuProps = {\n editor: Editor;\n dir: \"rtl\" | \"ltr\" | \"auto\";\n};\n\nexport const AITextMenu = ({ editor, dir }: TextMenuProps) => {\n const commands = useTextmenuCommands(editor);\n const states = useTextmenuStates(editor);\n const blockOptions = useTextmenuContentTypes(editor);\n const [openAi, setOpenAi] = useState(false);\n\n return (\n <BubbleMenu\n tippyOptions={{\n placement: \"auto\",\n popperOptions: {\n placement: \"auto\",\n },\n onHide: () => {\n setOpenAi(false);\n },\n }}\n editor={editor}\n pluginKey=\"textMenu\"\n shouldShow={states.shouldShow}\n updateDelay={100}\n >\n {openAi ? (\n <AIEditorPanel\n editor={editor}\n onOpenChange={(value) => {\n setOpenAi(value);\n }}\n />\n ) : (\n <Toolbar.Wrapper>\n <Toolbar.Button\n className=\"text-purple-500 hover:text-purple-600 active:text-purple-600 dark:text-purple-400 dark:hover:text-purple-300 dark:active:text-purple-400\"\n activeClassname=\"text-purple-600 hover:text-purple-600 dark:text-purple-400 dark:hover:text-purple-200\"\n onClick={() => setOpenAi(true)}\n >\n <Icon icon={Sparkles} className=\"mr-1\" />\n {i18next.t(\"aiTools\") || \"AI Tools\"}\n </Toolbar.Button>\n </Toolbar.Wrapper>\n )}\n </BubbleMenu>\n );\n};\n"],"names":["BubbleMenu","Sparkles","useState","AIEditorPanel","Icon","Toolbar","i18next","useTextmenuCommands","useTextmenuContentTypes","useTextmenuStates","AITextMenu","editor","dir","commands","states","blockOptions","openAi","setOpenAi","tippyOptions","placement","popperOptions","onHide","pluginKey","shouldShow","updateDelay","onOpenChange","value","Wrapper","Button","className","activeClassname","onClick","icon","t"],"mappings":";AAAA,SAASA,UAAU,QAAgB,gBAAgB;AACnD,SACEC,QAAQ,QACH,eAAe;AACtB,SAAeC,QAAQ,QAAQ,QAAQ;AACvC,SAASC,aAAa,QAAQ,8CAA8C;AAE5E,SAASC,IAAI,QAAQ,mBAAmB;AACxC,SAASC,OAAO,QAAQ,sBAAsB;AAE9C,uEAAuE;AACvE,OAAOC,aAAa,UAAU;AAE9B,SAASC,mBAAmB,QAAQ,iCAAiC;AACrE,SAASC,uBAAuB,QAAQ,qCAAqC;AAC7E,SAASC,iBAAiB,QAAQ,+BAA+B;AAQjE,OAAO,MAAMC,aAAa,CAAC,EAAEC,MAAM,EAAEC,GAAG,EAAiB;IACvD,MAAMC,WAAWN,oBAAoBI;IACrC,MAAMG,SAASL,kBAAkBE;IACjC,MAAMI,eAAeP,wBAAwBG;IAC7C,MAAM,CAACK,QAAQC,UAAU,GAAGf,SAAS;IAErC,qBACE,KAACF;QACCkB,cAAc;YACZC,WAAW;YACXC,eAAe;gBACbD,WAAW;YACb;YACAE,QAAQ;gBACNJ,UAAU;YACZ;QACF;QACAN,QAAQA;QACRW,WAAU;QACVC,YAAYT,OAAOS,UAAU;QAC7BC,aAAa;kBAEZR,uBACC,KAACb;YACCQ,QAAQA;YACRc,cAAc,CAACC;gBACbT,UAAUS;YACZ;2BAGF,KAACrB,QAAQsB,OAAO;sBACd,cAAA,MAACtB,QAAQuB,MAAM;gBACbC,WAAU;gBACVC,iBAAgB;gBAChBC,SAAS,IAAMd,UAAU;;kCAEzB,KAACb;wBAAK4B,MAAM/B;wBAAU4B,WAAU;;oBAC/BvB,QAAQ2B,CAAC,CAAC,cAAc;;;;;AAMrC,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ai-selector-commands.d.ts","sourceRoot":"","sources":["../../../../../../../../src/fields/TiptapEditor/features/menus/TextMenu/components/ai-selector-commands.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"ai-selector-commands.d.ts","sourceRoot":"","sources":["../../../../../../../../src/fields/TiptapEditor/features/menus/TextMenu/components/ai-selector-commands.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAwDvC,UAAU,uBAAuB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CACR,KAAK,EAAE,MAAM,EACb,OAAO,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,IAAI,CAAA;KAAE,KAC7D,IAAI,CAAC;CACX;AAED,QAAA,MAAM,kBAAkB,oCAIrB,uBAAuB,gCA8FzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
|
package/dist/src/fields/TiptapEditor/features/menus/TextMenu/components/ai-selector-commands.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { useLocale } from "@payloadcms/ui/providers/Locale";
|
|
3
3
|
import * as Popover from "@radix-ui/react-popover";
|
|
4
|
+
import i18next from "i18next";
|
|
4
5
|
import { ArrowDownWideNarrow, CheckCheck, ChevronDown, Languages, RefreshCcwDot, StepForward, WrapText } from "lucide-react";
|
|
5
6
|
import { languages } from "../../../../lib/constants.js";
|
|
6
7
|
import { getPrevText } from "../../../../lib/utils/index.js";
|
|
@@ -8,8 +9,6 @@ import { DropdownCategoryTitle } from "../../../ui/Dropdown/Dropdown.js";
|
|
|
8
9
|
import { Icon } from "../../../ui/Icon.js";
|
|
9
10
|
import { Surface } from "../../../ui/Surface.js";
|
|
10
11
|
import { Toolbar } from "../../../ui/Toolbar.js";
|
|
11
|
-
import i18next from "i18next";
|
|
12
|
-
import { formatCompletion } from "../../../panels/AIEditorPanel/utils.js";
|
|
13
12
|
const options = [
|
|
14
13
|
// {
|
|
15
14
|
// value: 'translate',
|
|
@@ -49,12 +48,13 @@ const options = [
|
|
|
49
48
|
];
|
|
50
49
|
const AISelectorCommands = ({ messages, onSelect, editor })=>{
|
|
51
50
|
const { code } = useLocale();
|
|
51
|
+
const editorSelection = editor?.state?.selection?.content?.()?.content?.toJSON();
|
|
52
52
|
return /*#__PURE__*/ _jsxs(_Fragment, {
|
|
53
53
|
children: [
|
|
54
54
|
/*#__PURE__*/ _jsx(DropdownCategoryTitle, {
|
|
55
55
|
children: "Edit or review selection"
|
|
56
56
|
}),
|
|
57
|
-
/*#__PURE__*/ _jsxs(Popover.Root, {
|
|
57
|
+
editorSelection && /*#__PURE__*/ _jsxs(Popover.Root, {
|
|
58
58
|
children: [
|
|
59
59
|
/*#__PURE__*/ _jsx(Popover.Trigger, {
|
|
60
60
|
asChild: true,
|
|
@@ -93,7 +93,7 @@ const AISelectorCommands = ({ messages, onSelect, editor })=>{
|
|
|
93
93
|
onSelect("", {
|
|
94
94
|
option: "translate",
|
|
95
95
|
language: lang.value,
|
|
96
|
-
selection:
|
|
96
|
+
selection: editorSelection
|
|
97
97
|
});
|
|
98
98
|
},
|
|
99
99
|
className: "gap-2 px-4 w-full flex justify-start ",
|
|
@@ -116,8 +116,7 @@ const AISelectorCommands = ({ messages, onSelect, editor })=>{
|
|
|
116
116
|
const content = messages ? messages ?? "" : editor.state.doc.textBetween(from, to, " ");
|
|
117
117
|
onSelect(content, {
|
|
118
118
|
option: option.value,
|
|
119
|
-
language: editor?.storage?.aiCommand?.language ?? code ?? "en"
|
|
120
|
-
selection: messages ? formatCompletion(messages) : editorSelection
|
|
119
|
+
language: editor?.storage?.aiCommand?.language ?? code ?? "en"
|
|
121
120
|
});
|
|
122
121
|
},
|
|
123
122
|
className: " gap-2 px-4 w-full flex justify-start",
|
|
@@ -143,8 +142,7 @@ const AISelectorCommands = ({ messages, onSelect, editor })=>{
|
|
|
143
142
|
});
|
|
144
143
|
onSelect(text, {
|
|
145
144
|
option: "continue",
|
|
146
|
-
language: editor?.storage?.aiCommand?.language ?? code ?? "en"
|
|
147
|
-
selection: messages ? formatCompletion(messages) : editorSelection
|
|
145
|
+
language: editor?.storage?.aiCommand?.language ?? code ?? "en"
|
|
148
146
|
});
|
|
149
147
|
},
|
|
150
148
|
value: "continue",
|
package/dist/src/fields/TiptapEditor/features/menus/TextMenu/components/ai-selector-commands.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../../../src/fields/TiptapEditor/features/menus/TextMenu/components/ai-selector-commands.tsx"],"sourcesContent":["import { useLocale } from \"@payloadcms/ui/providers/Locale\";\nimport * as Popover from \"@radix-ui/react-popover\";\nimport { Editor } from \"@tiptap/react\";\nimport {\n ArrowDownWideNarrow,\n CheckCheck,\n ChevronDown,\n Languages,\n RefreshCcwDot,\n StepForward,\n WrapText,\n} from \"lucide-react\";\nimport { languages } from \"../../../../lib/constants.js\";\nimport { getPrevText } from \"../../../../lib/utils/index.js\";\nimport { DropdownCategoryTitle } from \"../../../ui/Dropdown/Dropdown.js\";\nimport { Icon } from \"../../../ui/Icon.js\";\nimport { Surface } from \"../../../ui/Surface.js\";\nimport { Toolbar } from \"../../../ui/Toolbar.js\";\
|
|
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 i18next from \"i18next\";\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, selection?: JSON }\n ) => void;\n}\n\nconst AISelectorCommands = ({\n messages,\n onSelect,\n editor,\n}: AISelectorCommandsProps) => {\n const { code } = useLocale();\n const editorSelection = editor?.state?.selection?.content?.()?.content?.toJSON()\n\n return (\n <>\n <DropdownCategoryTitle>Edit or review selection</DropdownCategoryTitle>\n {editorSelection && <Popover.Root>\n <Popover.Trigger asChild>\n <Toolbar.Button\n className=\"gap-2 px-4 w-full flex justify-start \"\n type=\"button\"\n // active={!!states.currentHighlight}\n tooltip={i18next.t(\"highlightText\") || \"Highlight text\"}\n >\n <Icon icon={Languages} className=\"h-4 w-4 text-blue-500\" />\n Translate text\n <Icon icon={ChevronDown} className=\"h-4 w-4 text-blue-500\" />\n </Toolbar.Button>\n </Popover.Trigger>\n <Popover.Content side=\"right\" align=\"start\" sideOffset={8} asChild>\n <Surface className=\"flex flex-col min-w-[15rem] p-2 max-h-[20rem] overflow-auto\">\n <DropdownCategoryTitle>Languages</DropdownCategoryTitle>\n\n {languages.map((lang) => (\n <Toolbar.Button\n onClick={() => {\n const editorSelection = editor.state.selection.content().content.toJSON()\n\n onSelect(\"\", {\n option: \"translate\",\n language: lang.value,\n selection: editorSelection\n });\n }}\n className=\"gap-2 px-4 w-full flex justify-start \"\n key={lang.value}\n >\n {lang.label}\n </Toolbar.Button>\n ))}\n </Surface>\n </Popover.Content>\n </Popover.Root>}\n\n {options.map((option) => (\n <Toolbar.Button\n // onSelect={(value) => {\n // const slice = editor.state.selection.content()\n // const text = editor?.storage?.markdown?.serializer.serialize(slice.content)\n // onSelect(text, option.value)\n // }}\n onClick={() => {\n const { from, to, empty } = editor.state.selection;\n const editorSelection = editor.state.selection.content().content.toJSON()\n\n const content = messages\n ? messages ?? \"\"\n : editor.state.doc.textBetween(from, to, \" \");\n onSelect(content, {\n option: option.value,\n language: editor?.storage?.aiCommand?.language ?? code ?? \"en\",\n });\n }}\n className=\" gap-2 px-4 w-full flex justify-start\"\n key={option.value}\n value={option.value}\n >\n <option.icon className=\"h-4 w-4 text-blue-500\" />\n {option.label}\n </Toolbar.Button>\n ))}\n <Toolbar.Divider horizontal />\n <DropdownCategoryTitle>Use AI to do more</DropdownCategoryTitle>\n <Toolbar.Button\n onClick={() => {\n const editorSelection = editor.state.selection.content().content.toJSON()\n\n const text = messages\n ? messages\n : getPrevText(editor, { chars: 5000 });\n onSelect(text, {\n option: \"continue\",\n language: editor?.storage?.aiCommand?.language ?? code ?? \"en\",\n });\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","i18next","ArrowDownWideNarrow","CheckCheck","ChevronDown","Languages","RefreshCcwDot","StepForward","WrapText","languages","getPrevText","DropdownCategoryTitle","Icon","Surface","Toolbar","options","value","label","icon","AISelectorCommands","messages","onSelect","editor","code","editorSelection","state","selection","content","toJSON","Root","Trigger","asChild","Button","className","type","tooltip","t","Content","side","align","sideOffset","map","lang","onClick","option","language","from","to","empty","doc","textBetween","storage","aiCommand","Divider","horizontal","text","chars"],"mappings":";AAAA,SAASA,SAAS,QAAQ,kCAAkC;AAC5D,YAAYC,aAAa,0BAA0B;AAEnD,OAAOC,aAAa,UAAU;AAC9B,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,IAAI,EAAE,GAAGxB;IACjB,MAAMyB,kBAAkBF,QAAQG,OAAOC,WAAWC,aAAaA,SAASC;IAExE,qBACE;;0BACE,KAACjB;0BAAsB;;YACtBa,iCAAmB,MAACxB,QAAQ6B,IAAI;;kCAC/B,KAAC7B,QAAQ8B,OAAO;wBAACC,OAAO;kCACtB,cAAA,MAACjB,QAAQkB,MAAM;4BACbC,WAAU;4BACVC,MAAK;4BACL,qCAAqC;4BACrCC,SAASlC,QAAQmC,CAAC,CAAC,oBAAoB;;8CAEvC,KAACxB;oCAAKM,MAAMb;oCAAW4B,WAAU;;gCAA0B;8CAE3D,KAACrB;oCAAKM,MAAMd;oCAAa6B,WAAU;;;;;kCAGvC,KAACjC,QAAQqC,OAAO;wBAACC,MAAK;wBAAQC,OAAM;wBAAQC,YAAY;wBAAGT,OAAO;kCAChE,cAAA,MAAClB;4BAAQoB,WAAU;;8CACjB,KAACtB;8CAAsB;;gCAEtBF,UAAUgC,GAAG,CAAC,CAACC,qBACd,KAAC5B,QAAQkB,MAAM;wCACbW,SAAS;4CACP,MAAMnB,kBAAkBF,OAAOG,KAAK,CAACC,SAAS,CAACC,OAAO,GAAGA,OAAO,CAACC,MAAM;4CAEvEP,SAAS,IAAI;gDACXuB,QAAQ;gDACRC,UAAUH,KAAK1B,KAAK;gDACpBU,WAAWF;4CACb;wCACF;wCACAS,WAAU;kDAGTS,KAAKzB,KAAK;uCAFNyB,KAAK1B,KAAK;;;;;;YASxBD,QAAQ0B,GAAG,CAAC,CAACG,uBACZ,MAAC9B,QAAQkB,MAAM;oBACb,yBAAyB;oBACzB,mDAAmD;oBACnD,gFAAgF;oBAChF,iCAAiC;oBACjC,KAAK;oBACLW,SAAS;wBACP,MAAM,EAAEG,IAAI,EAAEC,EAAE,EAAEC,KAAK,EAAE,GAAG1B,OAAOG,KAAK,CAACC,SAAS;wBAClD,MAAMF,kBAAkBF,OAAOG,KAAK,CAACC,SAAS,CAACC,OAAO,GAAGA,OAAO,CAACC,MAAM;wBAEvE,MAAMD,UAAUP,WACZA,YAAY,KACZE,OAAOG,KAAK,CAACwB,GAAG,CAACC,WAAW,CAACJ,MAAMC,IAAI;wBAC3C1B,SAASM,SAAS;4BAChBiB,QAAQA,OAAO5B,KAAK;4BACpB6B,UAAUvB,QAAQ6B,SAASC,WAAWP,YAAYtB,QAAQ;wBAC5D;oBACF;oBACAU,WAAU;oBAEVjB,OAAO4B,OAAO5B,KAAK;;sCAEnB,KAAC4B,OAAO1B,IAAI;4BAACe,WAAU;;wBACtBW,OAAO3B,KAAK;;mBAJR2B,OAAO5B,KAAK;0BAOrB,KAACF,QAAQuC,OAAO;gBAACC,UAAU;;0BAC3B,KAAC3C;0BAAsB;;0BACvB,MAACG,QAAQkB,MAAM;gBACbW,SAAS;oBACP,MAAMnB,kBAAkBF,OAAOG,KAAK,CAACC,SAAS,CAACC,OAAO,GAAGA,OAAO,CAACC,MAAM;oBAEvE,MAAM2B,OAAOnC,WACTA,WACAV,YAAYY,QAAQ;wBAAEkC,OAAO;oBAAK;oBACtCnC,SAASkC,MAAM;wBACbX,QAAQ;wBACRC,UAAUvB,QAAQ6B,SAASC,WAAWP,YAAYtB,QAAQ;oBAC5D;gBACF;gBACAP,OAAM;gBACNiB,WAAU;;kCAEV,KAAC1B;wBAAY0B,WAAU;;oBAA0B;;;;;AAKzD;AAEA,eAAed,mBAAmB"}
|
|
@@ -49,8 +49,7 @@ export const AICommandPanel = /*#__PURE__*/ forwardRef(({ editor, onOpenChange,
|
|
|
49
49
|
body: {
|
|
50
50
|
option: "zap",
|
|
51
51
|
command: inputValue,
|
|
52
|
-
language: code ?? "en"
|
|
53
|
-
selection: formatCompletion(completion)
|
|
52
|
+
language: code ?? "en"
|
|
54
53
|
}
|
|
55
54
|
}).then(()=>setInputValue(""));
|
|
56
55
|
}
|
|
@@ -77,7 +76,7 @@ export const AICommandPanel = /*#__PURE__*/ forwardRef(({ editor, onOpenChange,
|
|
|
77
76
|
]);
|
|
78
77
|
useEffect(()=>{
|
|
79
78
|
if (!isLoading && hasCompletion) {
|
|
80
|
-
editor.storage.aiCommand.completion =
|
|
79
|
+
editor.storage.aiCommand.completion = completion;
|
|
81
80
|
}
|
|
82
81
|
}, [
|
|
83
82
|
completion,
|
|
@@ -173,7 +172,7 @@ export const AICommandPanel = /*#__PURE__*/ forwardRef(({ editor, onOpenChange,
|
|
|
173
172
|
},
|
|
174
173
|
children: /*#__PURE__*/ _jsxs(_Fragment, {
|
|
175
174
|
children: [
|
|
176
|
-
hasCompletion && !isLoading && /*#__PURE__*/ _jsx("div", {
|
|
175
|
+
hasCompletion && completion?.length > 10 && (checkJsonCompletion(completion) ? !isLoading : true) && /*#__PURE__*/ _jsx("div", {
|
|
177
176
|
className: "flex w-full",
|
|
178
177
|
children: /*#__PURE__*/ _jsx(ScrollArea, {
|
|
179
178
|
className: "h-72 prose p-2 px-4 prose-sm w-full max-w-none",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/panels/AICommandPanel/AICommandPanel.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCompletion } from \"ai/react\";\nimport { ArrowUpCircle, Sparkles } from \"lucide-react\";\nimport React, {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from \"react\";\nimport Markdown from \"react-markdown\";\nimport TextareaAutosize from \"react-textarea-autosize\";\n\nimport { useLocale } from \"@payloadcms/ui/providers/Locale\";\nimport { Editor } from \"@tiptap/react\";\n\nimport i18next from \"i18next\";\nimport {\n Command,\n Group,\n} from \"src/fields/TiptapEditor/extensions/AICommand/types.js\";\nimport { extractMarkdown } from \"../../../lib/extract.js\";\nimport { getPrevText } from \"../../../lib/utils/index.js\";\nimport AISelectorCommands from \"../../menus/TextMenu/components/ai-selector-commands.js\";\nimport CrazySpinner from \"../../ui/crazy-spinner.js\";\nimport { DropdownButton } from \"../../ui/Dropdown/Dropdown.js\";\nimport { Icon } from \"../../ui/Icon.js\";\nimport { ScrollArea } from \"../../ui/scroll-area.js\";\nimport { Surface } from \"../../ui/Surface.js\";\nimport { Toolbar } from \"../../ui/Toolbar.js\";\nimport { checkJsonCompletion, formatCompletion } from \"../AIEditorPanel/utils.js\";\n\nexport type AICommandPanelProps = {\n editor: Editor;\n userPrompt?: string;\n onOpenChange: (value: boolean) => void;\n items: Group[];\n};\n\nexport const AICommandPanel = forwardRef(\n (\n {\n editor,\n onOpenChange,\n userPrompt,\n items,\n ...restProps\n }: AICommandPanelProps,\n ref\n ) => {\n const [inputValue, setInputValue] = useState(userPrompt ?? \"\");\n const { code } = useLocale();\n const { view } = editor;\n const scrollContainer = useRef<HTMLDivElement>(null);\n const activeItem = useRef<HTMLButtonElement>(null);\n const [selectedGroupIndex, setSelectedGroupIndex] = useState(0);\n const [selectedCommandIndex, setSelectedCommandIndex] = useState(0);\n\n const editorNode = view.dom as HTMLElement;\n const boundigClient = editorNode.getBoundingClientRect();\n const inputRef = useRef<HTMLTextAreaElement>(null);\n\n\n const { completion, complete, isLoading } = useCompletion({\n // id: \"novel\",\n api: \"/api/generate\",\n onResponse: (response) => {\n if (response.status === 429) {\n console.log(\"You have reached your request limit for the day.\");\n\n return;\n }\n },\n\n onError: (e) => {\n console.log(\"ERROR\", e.message);\n },\n });\n\n const hasCompletion = completion.length > 0;\n const handleClick = useCallback(() => {\n const editorSelection = editor.state.selection.content().content.toJSON()\n\n if (completion) {\n return complete(completion, {\n body: { option: \"zap\", command: inputValue, language: code ?? \"en\", selection: formatCompletion(completion) },\n }).then(() => setInputValue(\"\"));\n }\n const text = getPrevText(editor, { chars: 5000 });\n\n complete(text, {\n body: {\n option: \"zap\",\n command:\n (editor.storage.aiCommand.title\n ? \"Context Title:\" + editor.storage.aiCommand.title + \";\\n\"\n : \"\") +\n (editor.storage.aiCommand.language\n ? \"Context language:\" + editor.storage.aiCommand.language + \";\\n\"\n : \"\") +\n inputValue,\n language: editor.storage.aiCommand.language ?? code ?? \"en\",\n selection: editorSelection\n },\n }).then(() => setInputValue(\"\"));\n }, [code, inputValue, completion]);\n\n useEffect(() => {\n if (userPrompt) setInputValue(userPrompt);\n }, [userPrompt]);\n useEffect(() => {\n if (!isLoading && hasCompletion) {\n editor.storage.aiCommand.completion = checkJsonCompletion(completion) ? formatCompletion(completion) : completion;\n }\n }, [completion, isLoading]);\n\n // Anytime the groups change, i.e. the user types to narrow it down, we want to\n // reset the current selection to the first menu item\n useEffect(() => {\n setSelectedGroupIndex(0);\n setSelectedCommandIndex(0);\n }, [items]);\n\n const selectItem = useCallback(\n (groupIndex: number, commandIndex: number) => {\n const command = items[groupIndex].commands[commandIndex];\n\n setInputValue(command.action(editor));\n // props.command(command);\n },\n [items, editor]\n );\n\n useImperativeHandle(ref, () => ({\n onKeyDown: ({ event }: { event: React.KeyboardEvent }) => {\n if (event.key === \"ArrowDown\") {\n if (!items.length) {\n return false;\n }\n\n const commands = items[selectedGroupIndex].commands;\n\n let newCommandIndex = selectedCommandIndex + 1;\n let newGroupIndex = selectedGroupIndex;\n\n if (commands.length - 1 < newCommandIndex) {\n newCommandIndex = 0;\n newGroupIndex = selectedGroupIndex + 1;\n }\n\n if (items.length - 1 < newGroupIndex) {\n newGroupIndex = 0;\n }\n\n setSelectedCommandIndex(newCommandIndex);\n setSelectedGroupIndex(newGroupIndex);\n\n return true;\n }\n\n if (event.key === \"ArrowUp\") {\n if (!items.length) {\n return false;\n }\n\n let newCommandIndex = selectedCommandIndex - 1;\n let newGroupIndex = selectedGroupIndex;\n\n if (newCommandIndex < 0) {\n newGroupIndex = selectedGroupIndex - 1;\n newCommandIndex = items[newGroupIndex]?.commands.length - 1 || 0;\n }\n\n if (newGroupIndex < 0) {\n newGroupIndex = items.length - 1;\n newCommandIndex = items[newGroupIndex].commands.length - 1;\n }\n\n setSelectedCommandIndex(newCommandIndex);\n setSelectedGroupIndex(newGroupIndex);\n\n return true;\n }\n\n if (event.key === \"Enter\") {\n if (\n !items.length ||\n selectedGroupIndex === -1 ||\n selectedCommandIndex === -1\n ) {\n return false;\n }\n\n selectItem(selectedGroupIndex, selectedCommandIndex);\n\n return true;\n }\n\n return false;\n },\n }));\n\n useEffect(() => {\n if (activeItem.current && scrollContainer.current) {\n const offsetTop = activeItem.current.offsetTop;\n const offsetHeight = activeItem.current.offsetHeight;\n\n scrollContainer.current.scrollTop = offsetTop - offsetHeight;\n }\n }, [selectedCommandIndex, selectedGroupIndex]);\n\n const createCommandClickHandler = useCallback(\n (groupIndex: number, commandIndex: number) => {\n return () => {\n selectItem(groupIndex, commandIndex);\n };\n },\n [selectItem]\n );\n\n return (\n <>\n <Surface\n className={`p-2 min-w-[20rem] flex flex-col gap-2 w-full ${hasCompletion ? \"-mt-72\" : \"\"\n }`}\n style={{\n width: boundigClient?.width,\n }}\n >\n <>\n {hasCompletion && !isLoading && (\n <div className=\"flex w-full\">\n <ScrollArea\n className=\"h-72 prose p-2 px-4 prose-sm w-full max-w-none\"\n dir={i18next.dir()}\n >\n <Markdown>{checkJsonCompletion(completion) ? extractMarkdown({ type: 'doc', content: formatCompletion(completion) as any }) : completion}</Markdown>\n\n </ScrollArea>\n </div>\n )}\n\n {isLoading && (\n <div\n className=\"flex h-12 w-full items-center px-4 text-sm font-medium text-muted-foreground text-blue-500\"\n style={{\n width: boundigClient?.width,\n }}\n >\n <Sparkles className=\"mr-2 h-4 w-4 shrink-0 \" />\n AI is thinking\n <div className=\"ml-2 mt-1\">\n <CrazySpinner />\n </div>\n </div>\n )}\n\n {!isLoading && (\n <>\n <div className=\"flex justify-between items-center \">\n {/* <CommandInput\n value={inputValue}\n onValueChange={setInputValue}\n autoFocus\n placeholder={\n hasCompletion ? 'Tell AI what to do next' : 'Ask AI to edit or generate...'\n }\n // onFocus={() => addAIHighlight(editor)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') handleClick()\n }}\n /> */}\n <Sparkles className=\"mr-2 h-4 w-4 shrink-0 text-blue-500 \" />\n <TextareaAutosize\n ref={inputRef}\n style={{ resize: \"none\" }}\n className=\"w-full p-2 text-black bg-white rounded dark:bg-black dark:text-white focus:outline-none outline-none border-0 \"\n value={inputValue}\n onChange={(e) => {\n editor.storage.aiCommand.userPrompt = e.target.value;\n\n setInputValue(e.target.value);\n }}\n placeholder={\n hasCompletion\n ? i18next.t(\"tellAiPlaceholder\") || \"Tell AI what to do next\"\n : i18next.t(\"askAiPlaceholder\") || \"Ask AI to edit or generate...\"\n }\n autoFocus\n // onFocus={() => {\n // addAIHighlight(editor)}}\n\n onKeyDown={(e) => {\n if (e.key === \"Enter\") handleClick();\n }}\n />\n <Toolbar.Button\n // size=\"icon\"\n\n // className=\"absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2 rounded-full bg-zinc-100 hover:bg-zinc-150\"\n onClick={handleClick}\n >\n <ArrowUpCircle />\n </Toolbar.Button>\n </div>\n </>\n )}\n </>\n </Surface>\n {!isLoading && (\n <Surface\n ref={scrollContainer}\n className=\"text-black max-h-[min(80vh,24rem)] overflow-auto flex-wrap mb-8 p-2\"\n >\n <div className=\"grid grid-cols-1 gap-0.5\">\n {hasCompletion ? (\n <AISelectorCommands\n editor={editor}\n messages={completion}\n onSelect={(value, options) => {\n complete(value, { body: options });\n }}\n />\n ) : (\n items.map((group, groupIndex: number) => (\n <React.Fragment key={`${group.title}-wrapper`}>\n <div\n className=\"text-neutral-500 text-[0.65rem] col-[1/-1] mx-2 mt-4 font-semibold tracking-wider select-none uppercase first:mt-0.5\"\n key={`${group.title}`}\n >\n {group.title}\n </div>\n {group.commands.map(\n (command: Command, commandIndex: number) => (\n <DropdownButton\n key={`${command.label}`}\n isActive={\n selectedGroupIndex === groupIndex &&\n selectedCommandIndex === commandIndex\n }\n onClick={createCommandClickHandler(\n groupIndex,\n commandIndex\n )}\n >\n <Icon icon={command.icon} className=\"mr-1\" />\n {command.label}\n </DropdownButton>\n )\n )}\n </React.Fragment>\n ))\n )}\n </div>\n </Surface>\n )}\n </>\n );\n }\n);\n"],"names":["useCompletion","ArrowUpCircle","Sparkles","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","Markdown","TextareaAutosize","useLocale","i18next","extractMarkdown","getPrevText","AISelectorCommands","CrazySpinner","DropdownButton","Icon","ScrollArea","Surface","Toolbar","checkJsonCompletion","formatCompletion","AICommandPanel","editor","onOpenChange","userPrompt","items","restProps","ref","inputValue","setInputValue","code","view","scrollContainer","activeItem","selectedGroupIndex","setSelectedGroupIndex","selectedCommandIndex","setSelectedCommandIndex","editorNode","dom","boundigClient","getBoundingClientRect","inputRef","completion","complete","isLoading","api","onResponse","response","status","console","log","onError","e","message","hasCompletion","length","handleClick","editorSelection","state","selection","content","toJSON","body","option","command","language","then","text","chars","storage","aiCommand","title","selectItem","groupIndex","commandIndex","commands","action","onKeyDown","event","key","newCommandIndex","newGroupIndex","current","offsetTop","offsetHeight","scrollTop","createCommandClickHandler","className","style","width","div","dir","type","resize","value","onChange","target","placeholder","t","autoFocus","Button","onClick","messages","onSelect","options","map","group","Fragment","isActive","icon","label"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/panels/AICommandPanel/AICommandPanel.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCompletion } from \"ai/react\";\nimport { ArrowUpCircle, Sparkles } from \"lucide-react\";\nimport React, {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from \"react\";\nimport Markdown from \"react-markdown\";\nimport TextareaAutosize from \"react-textarea-autosize\";\n\nimport { useLocale } from \"@payloadcms/ui/providers/Locale\";\nimport { Editor } from \"@tiptap/react\";\n\nimport 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 is thinking\n <div className=\"ml-2 mt-1\">\n <CrazySpinner />\n </div>\n </div>\n )}\n\n {!isLoading && (\n <>\n <div className=\"flex justify-between items-center \">\n {/* <CommandInput\n value={inputValue}\n onValueChange={setInputValue}\n autoFocus\n placeholder={\n hasCompletion ? 'Tell AI what to do next' : 'Ask AI to edit or generate...'\n }\n // onFocus={() => addAIHighlight(editor)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') handleClick()\n }}\n /> */}\n <Sparkles className=\"mr-2 h-4 w-4 shrink-0 text-blue-500 \" />\n <TextareaAutosize\n ref={inputRef}\n style={{ resize: \"none\" }}\n className=\"w-full p-2 text-black bg-white rounded dark:bg-black dark:text-white focus:outline-none outline-none border-0 \"\n value={inputValue}\n onChange={(e) => {\n editor.storage.aiCommand.userPrompt = e.target.value;\n\n setInputValue(e.target.value);\n }}\n placeholder={\n hasCompletion\n ? i18next.t(\"tellAiPlaceholder\") || \"Tell AI what to do next\"\n : i18next.t(\"askAiPlaceholder\") || \"Ask AI to edit or generate...\"\n }\n autoFocus\n // onFocus={() => {\n // addAIHighlight(editor)}}\n\n onKeyDown={(e) => {\n if (e.key === \"Enter\") handleClick();\n }}\n />\n <Toolbar.Button\n // size=\"icon\"\n\n // className=\"absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2 rounded-full bg-zinc-100 hover:bg-zinc-150\"\n onClick={handleClick}\n >\n <ArrowUpCircle />\n </Toolbar.Button>\n </div>\n </>\n )}\n </>\n </Surface>\n {!isLoading && (\n <Surface\n ref={scrollContainer}\n className=\"text-black max-h-[min(80vh,24rem)] overflow-auto flex-wrap mb-8 p-2\"\n >\n <div className=\"grid grid-cols-1 gap-0.5\">\n {hasCompletion ? (\n <AISelectorCommands\n editor={editor}\n messages={completion}\n onSelect={(value, options) => {\n complete(value, { body: options });\n }}\n />\n ) : (\n items.map((group, groupIndex: number) => (\n <React.Fragment key={`${group.title}-wrapper`}>\n <div\n className=\"text-neutral-500 text-[0.65rem] col-[1/-1] mx-2 mt-4 font-semibold tracking-wider select-none uppercase first:mt-0.5\"\n key={`${group.title}`}\n >\n {group.title}\n </div>\n {group.commands.map(\n (command: Command, commandIndex: number) => (\n <DropdownButton\n key={`${command.label}`}\n isActive={\n selectedGroupIndex === groupIndex &&\n selectedCommandIndex === commandIndex\n }\n onClick={createCommandClickHandler(\n groupIndex,\n commandIndex\n )}\n >\n <Icon icon={command.icon} className=\"mr-1\" />\n {command.label}\n </DropdownButton>\n )\n )}\n </React.Fragment>\n ))\n )}\n </div>\n </Surface>\n )}\n </>\n );\n }\n);\n"],"names":["useCompletion","ArrowUpCircle","Sparkles","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","Markdown","TextareaAutosize","useLocale","i18next","extractMarkdown","getPrevText","AISelectorCommands","CrazySpinner","DropdownButton","Icon","ScrollArea","Surface","Toolbar","checkJsonCompletion","formatCompletion","AICommandPanel","editor","onOpenChange","userPrompt","items","restProps","ref","inputValue","setInputValue","code","view","scrollContainer","activeItem","selectedGroupIndex","setSelectedGroupIndex","selectedCommandIndex","setSelectedCommandIndex","editorNode","dom","boundigClient","getBoundingClientRect","inputRef","completion","complete","isLoading","api","onResponse","response","status","console","log","onError","e","message","hasCompletion","length","handleClick","editorSelection","state","selection","content","toJSON","body","option","command","language","then","text","chars","storage","aiCommand","title","selectItem","groupIndex","commandIndex","commands","action","onKeyDown","event","key","newCommandIndex","newGroupIndex","current","offsetTop","offsetHeight","scrollTop","createCommandClickHandler","className","style","width","div","dir","type","resize","value","onChange","target","placeholder","t","autoFocus","Button","onClick","messages","onSelect","options","map","group","Fragment","isActive","icon","label"],"mappings":"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"}
|
|
@@ -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,
|
|
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,gCA2IzE,CAAC"}
|
|
@@ -38,14 +38,12 @@ export const AIEditorPanel = ({ editor, onOpenChange })=>{
|
|
|
38
38
|
});
|
|
39
39
|
const hasCompletion = completion.length > 0;
|
|
40
40
|
const handleClick = useCallback(()=>{
|
|
41
|
-
const editorSelection = editor.state.selection.content().content.toJSON();
|
|
42
41
|
if (completion) {
|
|
43
42
|
return complete(completion, {
|
|
44
43
|
body: {
|
|
45
44
|
option: "zap",
|
|
46
45
|
command: inputValue,
|
|
47
|
-
language: code ?? "en"
|
|
48
|
-
selection: formatCompletion(completion)
|
|
46
|
+
language: code ?? "en"
|
|
49
47
|
}
|
|
50
48
|
}).then(()=>setInputValue(""));
|
|
51
49
|
}
|
|
@@ -56,8 +54,7 @@ export const AIEditorPanel = ({ editor, onOpenChange })=>{
|
|
|
56
54
|
body: {
|
|
57
55
|
option: "zap",
|
|
58
56
|
command: inputValue,
|
|
59
|
-
language: code ?? "en"
|
|
60
|
-
selection: formatCompletion(completion)
|
|
57
|
+
language: code ?? "en"
|
|
61
58
|
}
|
|
62
59
|
}).then(()=>setInputValue(""));
|
|
63
60
|
}, [
|
|
@@ -72,7 +69,7 @@ export const AIEditorPanel = ({ editor, onOpenChange })=>{
|
|
|
72
69
|
},
|
|
73
70
|
children: /*#__PURE__*/ _jsxs(_Fragment, {
|
|
74
71
|
children: [
|
|
75
|
-
hasCompletion && !isLoading && /*#__PURE__*/ _jsx("div", {
|
|
72
|
+
hasCompletion && completion?.length > 10 && (checkJsonCompletion(completion) ? !isLoading : true) && /*#__PURE__*/ _jsx("div", {
|
|
76
73
|
className: "flex w-full",
|
|
77
74
|
children: /*#__PURE__*/ _jsx(ScrollArea, {
|
|
78
75
|
children: /*#__PURE__*/ _jsx("div", {
|
|
@@ -134,7 +131,7 @@ export const AIEditorPanel = ({ editor, onOpenChange })=>{
|
|
|
134
131
|
hasCompletion ? /*#__PURE__*/ _jsx(AICompletionCommands, {
|
|
135
132
|
editor: editor,
|
|
136
133
|
onDiscard: ()=>{
|
|
137
|
-
editor
|
|
134
|
+
editor?.chain()?.unsetHighlight()?.focus()?.run();
|
|
138
135
|
onOpenChange(false);
|
|
139
136
|
},
|
|
140
137
|
completion: completion
|