fix: Gpt extension render (#519)

Author: ReFFaT

demo/stories/gpt/GPT.tsx

@@ -3,13 +3,12 @@ import React, {useState} from 'react';
 import cloneDeep from 'lodash/cloneDeep';
 
 import {
-    type MarkupString,
     gptExtension,
     logger,
     mGptExtension,
     mGptToolbarItem,
     markupToolbarConfigs,
-    wGptToolbarItem,
+    wGptItemData,
     wysiwygToolbarConfigs,
 } from '../../../src';
 import {Playground} from '../../components/Playground';
@@ -18,7 +17,7 @@ import {initialMdContent} from './content';
 import {gptWidgetProps} from './gptWidgetOptions';
 
 const wToolbarConfig = cloneDeep(wysiwygToolbarConfigs.wToolbarConfig);
-wToolbarConfig.unshift([wGptToolbarItem]);
+wToolbarConfig.unshift([wGptItemData]);
 wToolbarConfig.push([
     wysiwygToolbarConfigs.wMermaidItemData,
     wysiwygToolbarConfigs.wYfmHtmlBlockItemData,
@@ -37,7 +36,7 @@ const wCommandMenuConfig = wysiwygToolbarConfigs.wCommandMenuConfig.concat(
     wysiwygToolbarConfigs.wYfmHtmlBlockItemData,
 );
 
-wCommandMenuConfig.unshift(wysiwygToolbarConfigs.wGptItemData);
+wCommandMenuConfig.unshift(wGptItemData);
 
 const mToolbarConfig = cloneDeep(markupToolbarConfigs.mToolbarConfig);
 
@@ -49,24 +48,22 @@ mToolbarConfig.push([
 mToolbarConfig.unshift([mGptToolbarItem]);
 
 export const GPT = React.memo(() => {
-    const [yfmRaw, setYfmRaw] = React.useState<MarkupString>(initialMdContent);
-
     const [showedAlertGpt, setShowedAlertGpt] = useState(true);
 
-    const gptExtensionProps = gptWidgetProps(setYfmRaw, {
+    const gptExtensionProps = gptWidgetProps({
         showedGptAlert: Boolean(showedAlertGpt),
         onCloseGptAlert: () => {
             setShowedAlertGpt(false);
         },
     });
 
     const markupExtension = mGptExtension(gptExtensionProps);
-    const wSelectionMenuConfig = [[wGptToolbarItem], ...wysiwygToolbarConfigs.wSelectionMenuConfig];
+    const wSelectionMenuConfig = [[wGptItemData], ...wysiwygToolbarConfigs.wSelectionMenuConfig];
 
     return (
         <Playground
             settingsVisible
-            initial={yfmRaw}
+            initial={initialMdContent}
             extraExtensions={(builder) => builder.use(gptExtension, gptExtensionProps)}
             wysiwygCommandMenuConfig={wCommandMenuConfig}
             extensionOptions={{selectionContext: {config: wSelectionMenuConfig}}}

demo/stories/gpt/gptWidgetOptions.tsx

@@ -30,7 +30,6 @@ const gptRequestHandler = async ({
 };
 
 export const gptWidgetProps = (
-    setYfmRaw: (yfmRaw: string) => void,
     gptAlertProps?: GptWidgetOptions['gptAlertProps'],
 ): GptWidgetOptions => {
     return {
@@ -64,12 +63,10 @@ export const gptWidgetProps = (
         onLike: async () => {},
         onDislike: async () => {},
         onApplyResult: (markup) => {
-            setYfmRaw(markup);
+            console.log('onApplyResult:', markup);
         },
         onUpdate: (event) => {
-            if (event?.rawText) {
-                setYfmRaw(event.rawText);
-            }
+            console.log('update:', event);
         },
     };
 };

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

@@ -151,7 +151,7 @@ Add in tool bar
 ```ts
 import {
     ...
-    wGptToolbarItem,
+    wGptItemData,
     wysiwygToolbarConfigs,
 } from '@gravity-ui/markdown-editor';
 
@@ -160,7 +160,7 @@ import {cloneDeep} from '@gravity-ui/markdown-editor/_/lodash';
 export const Editor: React.FC<EditorProps> = (props) => {
     ...
     const wToolbarConfig = cloneDeep(wysiwygToolbarConfigs.wToolbarConfig);
-    wToolbarConfig.unshift([wGptToolbarItem]);
+    wToolbarConfig.unshift([wGptItemData]);
 
     ...
 
@@ -176,7 +176,7 @@ Add in menu bar
 ```ts
 export const Editor: React.FC<EditorProps> = (props) => {
     ...
-    const wSelectionMenuConfig = [[wGptToolbarItem], ...wysiwygToolbarConfigs.wSelectionMenuConfig];
+    const wSelectionMenuConfig = [[wGptItemData], ...wysiwygToolbarConfigs.wSelectionMenuConfig];
 
     const mdEditor = useMarkdownEditor({
         ...
@@ -195,7 +195,7 @@ Add in command menu config (/)
 export const Editor: React.FC<EditorProps> = (props) => {
     ...
     const wCommandMenuConfig = wysiwygToolbarConfigs.wCommandMenuConfig // main commands
-    wCommandMenuConfig.unshift(wysiwygToolbarConfigs.wGptItemData); // add GPT command
+    wCommandMenuConfig.unshift(wGptItemData); // add GPT command
 
     const mdEditor = useMarkdownEditor({
         ...
@@ -217,7 +217,6 @@ import React from 'react';
 import {
     gptExtension,
     MarkdownEditorView,
-    wGptToolbarItem,
     wysiwygToolbarConfigs,
     useMarkdownEditor,
 } from '@gravity-ui/markdown-editor';
@@ -227,12 +226,12 @@ import {gptWidgetProps} from './gptWidgetProps';
 
 export const Editor: React.FC<EditorProps> = (props) => {
     const wToolbarConfig = cloneDeep(wysiwygToolbarConfigs.wToolbarConfig);
-    wToolbarConfig.unshift([wGptToolbarItem]);
+    wToolbarConfig.unshift([wGptItemData]);
 
-    const wSelectionMenuConfig = [[wGptToolbarItem], ...wysiwygToolbarConfigs.wSelectionMenuConfig];
+    const wSelectionMenuConfig = [[wGptItemData], ...wysiwygToolbarConfigs.wSelectionMenuConfig];
 
     const wCommandMenuConfig = wysiwygToolbarConfigs.wCommandMenuConfig // main commands
-    wCommandMenuConfig.unshift(wysiwygToolbarConfigs.wGptItemData); // add GPT command
+    wCommandMenuConfig.unshift(wGptItemData); // add GPT command
 
     const mdEditor = useMarkdownEditor({
         // ...

src/bundle/config/wysiwyg.ts

@@ -1,7 +1,6 @@
 import {ActionStorage} from 'src/core';
 
 import {headingType, pType} from '../../extensions';
-import {gptHotKeys} from '../../extensions/additional/GPT/constants';
 // for typings from Math
 import type {} from '../../extensions/additional/Math';
 import type {
@@ -244,16 +243,7 @@ export const wYfmHtmlBlockItemData: WToolbarSingleItemData = {
     isActive: (e) => e.actions.createYfmHtmlBlock.isActive(),
     isEnable: (e) => e.actions.createYfmHtmlBlock.isEnable(),
 };
-export const wGptItemData: WToolbarSingleItemData = {
-    id: ActionName.gpt,
-    type: ToolbarDataType.SingleButton,
-    title: i18n.bind(null, 'gpt'),
-    hotkey: gptHotKeys.openGptKeyTooltip,
-    icon: icons.gpt,
-    exec: (e) => e.actions.addGptWidget.run({}),
-    isActive: (e) => e.actions.addGptWidget.isActive(),
-    isEnable: (e) => e.actions.addGptWidget.isEnable(),
-};
+
 export const wMermaidItemData: WToolbarSingleItemData = {
     id: ActionName.mermaid,
     type: ToolbarDataType.SingleButton,

src/extensions/additional/GPT/index.ts

@@ -1,3 +1,3 @@
-export * from './toolbar';
+export * from './wGptItemData';
 export * from './gptExtension/gptExtension';
 export * from './MarkupGpt';

src/extensions/additional/GPT/toolbar.ts renamed to src/extensions/additional/GPT/wGptItemData.ts

@@ -8,7 +8,7 @@ import {gptHotKeys} from './constants';
 
 export const cnGptButton = cn('gpt-button');
 
-export const wGptToolbarItem: WToolbarSingleItemData = {
+export const wGptItemData: WToolbarSingleItemData = {
     type: ToolbarDataType.SingleButton,
     id: 'gpt',
     title: () => `${i18n('help-with-text')}`,