Skip to content

Commit 2adfe7f

Browse files
ReFFaTReFFaT
authored
fix(yfm): correction of the gpt popup (#367)
1 parent f1f0068 commit 2adfe7f

File tree

8 files changed

+196
-149
lines changed

8 files changed

+196
-149
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ Read more:
5858
- [How to add Latex extension](docs/how-to-connect-latex-extension.md)
5959
- [How to add Mermaid extension](docs/how-to-connect-mermaid-extension.md)
6060
- [How to write extension](docs/how-to-create-extension.md)
61-
- [How to add gpt extension](docs/how-to-connect-gpt-extensions.md)
61+
- [How to add GPT extension](docs/how-to-connect-gpt-extensions.md)
6262

6363

6464
### i18n

‎docs/assets/gifs/custom-prompt-preset-gpt.gif‎

593 KB
Loading

‎docs/assets/gifs/prompt-preset-gpt.gif‎

929 KB
Loading

‎docs/how-to-connect-gpt-extensions.md‎

Lines changed: 184 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -4,151 +4,159 @@ First to integrate this extension, you need to use the following versions of the
44

55
@gravity-ui/markdown-editor version 13.18.0 or higher
66

7-
### 1. Add extension usage to extension builder
87

9-
```ts
10-
import {gptExtension} from '@gravity-ui/markdown-editor';
8+
Features:
119

12-
builder.use(
13-
gptExtension,
14-
// The next step add gptWidgetProps,
15-
)
16-
```
17-
### 2. Add gpt extensions props
10+
<img src="./assets/gifs/custom-prompt-preset-gpt.gif" width="470"/>
1811

19-
```ts
20-
import {gptExtension, type GptWidgetOptions} from '@gravity-ui/markdown-editor';
12+
<img src="./assets/gifs/prompt-preset-gpt.gif" width="470"/>
2113

22-
const gptWidgetProps: GptWidgetOptions = {
23-
// add params
24-
}
14+
### 1. Add extension usage and extensions props
2515

26-
builder.use(
27-
gptExtension,
28-
gptWidgetProps, // use params
29-
)
30-
```
16+
```ts
17+
import React from 'react';
3118

32-
#### Example of implementation
19+
import {
20+
gptExtension,
21+
MarkdownEditorView,
22+
useMarkdownEditor,
23+
} from '@gravity-ui/markdown-editor';
3324

34-
setYfmRaw - a setter to change the text in an editor
25+
export const Editor: React.FC<EditorProps> = (props) => {
26+
const mdEditor = useMarkdownEditor({
27+
// ...
28+
extraExtensions: (builder) =>
29+
builder.use(
30+
...
31+
// add GPT extension
32+
gptExtension,
33+
// The next step we show implementation gptWidgetProps
34+
gptWidgetProps,
35+
),
36+
});
37+
38+
return <MarkdownEditorView
39+
...
40+
editor={mdEditor}
41+
/>
42+
};
43+
```
44+
### 2. Implementation ```gptWidgetProps```
3545

36-
gptRequestHandler - your function to implement GPT response
37-
3846
```ts
39-
import {gptExtension, type GptWidgetOptions} from '@gravity-ui/markdown-editor';
40-
41-
const gptRequestHandler = async ({
42-
markup,
43-
customPrompt,
44-
promptData,
45-
}: {
46-
markup: string;
47-
customPrompt?: string;
48-
promptData: unknown;
49-
}) => {
50-
51-
await new Promise((resolve) => setTimeout(resolve, 1000));
52-
53-
let gptResponseMarkup = markup;
54-
55-
if (customPrompt) {
56-
gptResponseMarkup = markup + ` \`enhanced with ${customPrompt}\``;
57-
} else if (promptData === 'do-uno-reverse') {
58-
gptResponseMarkup = gptResponseMarkup.replace(/[\wа-яА-ЯёЁ]+/g, (match) =>
59-
match.split('').reverse().join(''),
60-
);
61-
} else if (promptData === 'do-shout-out') {
62-
gptResponseMarkup = gptResponseMarkup.toLocaleUpperCase();
63-
}
47+
import React from 'react';
48+
import {type GptWidgetOptions} from '@gravity-ui/markdown-editor';
49+
50+
// Your function to implement GPT response
51+
const gptRequestHandler = async ({
52+
markup,
53+
customPrompt,
54+
promptData,
55+
}: {
56+
markup: string;
57+
customPrompt?: string;
58+
promptData: unknown;
59+
}) => {
60+
await new Promise((resolve) => setTimeout(resolve, 1000));
61+
62+
let gptResponseMarkup = markup;
63+
64+
if (customPrompt) {
65+
gptResponseMarkup = markup + ` \`enhanced with ${customPrompt}\``;
66+
} else if (promptData === 'do-uno-reverse') {
67+
gptResponseMarkup = gptResponseMarkup.replace(/[\wа-яА-ЯёЁ]+/g, (match) =>
68+
match.split('').reverse().join(''),
69+
);
70+
} else if (promptData === 'do-shout-out') {
71+
gptResponseMarkup = gptResponseMarkup.toLocaleUpperCase();
72+
}
6473

65-
return {
66-
rawText: gptResponseMarkup,
67-
};
74+
return {
75+
rawText: gptResponseMarkup,
6876
};
69-
70-
const gptWidgetProps: GptWidgetOptions = {
71-
answerRender: (data) => <div>{data.rawText}</div>,
72-
customPromptPlaceholder: 'Ask Yandex GPT to edit the text highlighted text',
73-
disabledPromptPlaceholder: 'Ask Yandex GPT to generate the text',
74-
gptAlertProps: {
75-
showedGptAlert: true;
76-
onCloseGptAlert: () => {};
77+
};
78+
79+
function renderAnswer(data: {rawText: string}) {
80+
return <div>{data.rawText}</div>;
81+
}
82+
83+
export const gptWidgetProps: GptWidgetOptions = {
84+
answerRender: renderAnswer,
85+
customPromptPlaceholder: 'Ask Yandex GPT to edit the text highlighted text',
86+
disabledPromptPlaceholder: 'Ask Yandex GPT to generate the text',
87+
gptAlertProps: {
88+
showedGptAlert: true,
89+
onCloseGptAlert: () => {},
90+
},
91+
promptPresets: [
92+
{
93+
hotKey: 'control+3',
94+
data: 'do-uno-reverse',
95+
display: 'Use the uno card',
96+
key: 'do-uno-reverse',
7797
},
78-
promptPresets: [
79-
{
80-
hotKey: 'control+3',
81-
data: 'do-uno-reverse',
82-
display: 'Use the uno card',
83-
key: 'do-uno-reverse',
84-
},
85-
{
86-
hotKey: 'control+4',
87-
data: 'do-shout-out',
88-
display: 'Make the text flashy',
89-
key: 'do-shout-out',
90-
},
91-
],
92-
onCustomPromptApply: async ({markup, customPrompt, promptData}) => {
93-
return gptRequestHandler({markup, customPrompt, promptData});
98+
{
99+
hotKey: 'control+4',
100+
data: 'do-shout-out',
101+
display: 'Make the text flashy',
102+
key: 'do-shout-out',
94103
},
95-
onPromptPresetClick: async ({markup, customPrompt, promptData}) => {
96-
return gptRequestHandler({markup, customPrompt, promptData});
97-
},
98-
onTryAgain: async ({markup, customPrompt, promptData}) => {
99-
return gptRequestHandler({markup, customPrompt, promptData});
100-
},
101-
onApplyResult: (markup) => {
102-
setYfmRaw(markup);
103-
},
104-
onUpdate: (event) => {
105-
if (event?.rawText) {
106-
setYfmRaw(event.rawText);
107-
}
108-
},
109-
}
110-
111-
builder.use(
112-
gptExtension,
113-
gptWidgetProps,
114-
)
104+
],
105+
onCustomPromptApply: async ({markup, customPrompt, promptData}) => {
106+
return gptRequestHandler({markup, customPrompt, promptData});
107+
},
108+
onPromptPresetClick: async ({markup, customPrompt, promptData}) => {
109+
return gptRequestHandler({markup, customPrompt, promptData});
110+
},
111+
onTryAgain: async ({markup, customPrompt, promptData}) => {
112+
return gptRequestHandler({markup, customPrompt, promptData});
113+
},
114+
onApplyResult: (markup) => {
115+
// add your callback for apply GPT result text
116+
console.log(markup);
117+
},
118+
onUpdate: (event) => {
119+
if (event?.rawText) {
120+
// add your callback for any text updates
121+
console.log(event.rawText);
122+
}
123+
},
124+
onLike: async () => {}, // function to track feedback for good
125+
onDislike: async () => {}, // and bad GPT answers
126+
};
115127
```
116-
117128
### 3. Add extension to menubar and toolbar and command menu config for editor
118129

119-
#### Add in tool bar
130+
Add in tool bar
120131

121132
```ts
122-
import {
123-
wGptToolbarItem,
124-
wysiwygToolbarConfig,
125-
MarkdownEditorView,
126-
useMarkdownEditor
127-
} from '@gravity-ui/markdown-editor';
128-
129-
wysiwygToolbarConfig.unshift([wGptToolbarItem]);
133+
import {
134+
...
135+
wGptToolbarItem,
136+
wysiwygToolbarConfigs,
137+
} from '@gravity-ui/markdown-editor';
130138

131-
const mdEditor = useMarkdownEditor({
132-
// editor options
133-
})
139+
import {cloneDeep} from '@gravity-ui/markdown-editor/_/lodash';
140+
141+
export const Editor: React.FC<EditorProps> = (props) => {
142+
...
143+
const wToolbarConfig = cloneDeep(wysiwygToolbarConfigs.wToolbarConfig);
144+
wToolbarConfig.unshift([wGptToolbarItem]);
145+
146+
...
134147

135-
<MarkdownEditorView
148+
return <MarkdownEditorView
136149
...
137-
wysiwygToolbarConfig={wysiwygToolbarConfig}
138-
editor={mdEditor}
150+
wysiwygToolbarConfig={wToolbarConfig}
139151
...
140152
/>
153+
};
141154
```
142-
#### Add in menu bar
143-
```ts
144-
import {
145-
wGptToolbarItem,
146-
wysiwygToolbarConfig,
147-
wysiwygToolbarConfigs,
148-
MarkdownEditorView,
149-
useMarkdownEditor
150-
} from '@gravity-ui/markdown-editor';
155+
Add in menu bar
151156

157+
```ts
158+
export const Editor: React.FC<EditorProps> = (props) => {
159+
...
152160
const wSelectionMenuConfig = [[wGptToolbarItem], ...wysiwygToolbarConfigs.wSelectionMenuConfig];
153161

154162
const mdEditor = useMarkdownEditor({
@@ -158,40 +166,77 @@ First to integrate this extension, you need to use the following versions of the
158166
},
159167
...
160168
})
169+
...
170+
};
171+
```
161172

162-
<MarkdownEditorView
163-
...
164-
editor={mdEditor}
173+
Add in command menu config (/)
174+
175+
```ts
176+
export const Editor: React.FC<EditorProps> = (props) => {
177+
...
178+
const wCommandMenuConfig = wysiwygToolbarConfigs.wCommandMenuConfig // main commands
179+
wCommandMenuConfig.unshift(wysiwygToolbarConfigs.wGptItemData); // add GPT command
180+
181+
const mdEditor = useMarkdownEditor({
165182
...
166-
/>
183+
extensionOptions: {
184+
...
185+
commandMenu: {actions: wCommandMenuConfig},
186+
},
187+
})
188+
...
189+
};
167190
```
191+
### 4. Done, You can use the extension!
192+
193+
Вelow is an example of all code in one place
168194

169-
#### Add in command menu config (/)
170195
```ts
171-
import {
172-
wysiwygToolbarConfigs,
173-
MarkdownEditorView,
174-
useMarkdownEditor
175-
} from '@gravity-ui/markdown-editor';
196+
import React from 'react';
176197

177-
const wCommandMenuConfig = wysiwygToolbarConfigs.wCommandMenuConfig // main commands
198+
import {
199+
gptExtension,
200+
MarkdownEditorView,
201+
wGptToolbarItem,
202+
wysiwygToolbarConfigs,
203+
useMarkdownEditor,
204+
} from '@gravity-ui/markdown-editor';
205+
import {cloneDeep} from '@gravity-ui/markdown-editor/_/lodash';
206+
207+
import {gptWidgetProps} from './gptWidgetProps';
208+
209+
export const Editor: React.FC<EditorProps> = (props) => {
210+
const wToolbarConfig = cloneDeep(wysiwygToolbarConfigs.wToolbarConfig);
211+
wToolbarConfig.unshift([wGptToolbarItem]);
212+
213+
const wSelectionMenuConfig = [[wGptToolbarItem], ...wysiwygToolbarConfigs.wSelectionMenuConfig];
178214

179-
wCommandMenuConfig.unshift(wysiwygToolbarConfigs.wGptItemData); // add gpt command
215+
const wCommandMenuConfig = wysiwygToolbarConfigs.wCommandMenuConfig // main commands
216+
wCommandMenuConfig.unshift(wysiwygToolbarConfigs.wGptItemData); // add GPT command
180217

181218
const mdEditor = useMarkdownEditor({
182-
...
219+
// ...
220+
extraExtensions: (builder) => {
221+
builder.use(
222+
...
223+
// Add GPT extension
224+
gptExtension,
225+
// How to make gptWidgetProps, we will tell you in the next chapter
226+
gptWidgetProps,
227+
);
228+
},
183229
extensionOptions: {
230+
selectionContext: {config: wSelectionMenuConfig},
184231
commandMenu: {actions: wCommandMenuConfig},
185232
},
186-
...
187-
})
233+
});
188234

189-
<MarkdownEditorView
235+
return <MarkdownEditorView
190236
...
237+
wysiwygToolbarConfig={wToolbarConfig}
191238
editor={mdEditor}
192239
...
193240
/>
194-
241+
};
195242
```
196-
197-
### 4. Done, You can use the extension!

‎src/extensions/yfm/GPT/GptDialog/LoadingScreen/LoadingScreen.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from 'react';
22
import type {FC} from 'react';
33

4-
import {cn} from '@bem-react/classname';
54
import {Skeleton} from '@gravity-ui/uikit';
65

6+
import {cn} from '../../../../../classname';
77
import {i18n} from '../../../../../i18n/gpt/loading';
88
import GPTLoading from '../../../../../icons/GPTLoading';
99
import {IconRefuge} from '../../IconRefuge/IconRefuge';

0 commit comments

Comments
 (0)