From 89c9881331df2b0fae5968258a29b9c9eed179ef Mon Sep 17 00:00:00 2001 From: ReFFaT <102167552+ReFFaT@users.noreply.github.com> Date: Sun, 8 Dec 2024 22:39:06 +0300 Subject: [PATCH] fix: Gpt extension render (#519) --- demo/stories/gpt/GPT.tsx | 15 ++++++--------- demo/stories/gpt/gptWidgetOptions.tsx | 7 ++----- docs/how-to-connect-gpt-extensions.md | 15 +++++++-------- src/bundle/config/wysiwyg.ts | 12 +----------- src/extensions/additional/GPT/index.ts | 2 +- .../GPT/{toolbar.ts => wGptItemData.ts} | 2 +- 6 files changed, 18 insertions(+), 35 deletions(-) rename src/extensions/additional/GPT/{toolbar.ts => wGptItemData.ts} (93%) diff --git a/demo/stories/gpt/GPT.tsx b/demo/stories/gpt/GPT.tsx index 01635830..680d9a95 100644 --- a/demo/stories/gpt/GPT.tsx +++ b/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,11 +48,9 @@ mToolbarConfig.push([ mToolbarConfig.unshift([mGptToolbarItem]); export const GPT = React.memo(() => { - const [yfmRaw, setYfmRaw] = React.useState(initialMdContent); - const [showedAlertGpt, setShowedAlertGpt] = useState(true); - const gptExtensionProps = gptWidgetProps(setYfmRaw, { + const gptExtensionProps = gptWidgetProps({ showedGptAlert: Boolean(showedAlertGpt), onCloseGptAlert: () => { setShowedAlertGpt(false); @@ -61,12 +58,12 @@ export const GPT = React.memo(() => { }); const markupExtension = mGptExtension(gptExtensionProps); - const wSelectionMenuConfig = [[wGptToolbarItem], ...wysiwygToolbarConfigs.wSelectionMenuConfig]; + const wSelectionMenuConfig = [[wGptItemData], ...wysiwygToolbarConfigs.wSelectionMenuConfig]; return ( builder.use(gptExtension, gptExtensionProps)} wysiwygCommandMenuConfig={wCommandMenuConfig} extensionOptions={{selectionContext: {config: wSelectionMenuConfig}}} diff --git a/demo/stories/gpt/gptWidgetOptions.tsx b/demo/stories/gpt/gptWidgetOptions.tsx index ce1fdcdf..bc21ad7b 100644 --- a/demo/stories/gpt/gptWidgetOptions.tsx +++ b/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); }, }; }; diff --git a/docs/how-to-connect-gpt-extensions.md b/docs/how-to-connect-gpt-extensions.md index 15d3889d..97bd75b3 100644 --- a/docs/how-to-connect-gpt-extensions.md +++ b/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 = (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 = (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 = (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 = (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({ // ... diff --git a/src/bundle/config/wysiwyg.ts b/src/bundle/config/wysiwyg.ts index 41e0abd8..bc761b6a 100644 --- a/src/bundle/config/wysiwyg.ts +++ b/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, diff --git a/src/extensions/additional/GPT/index.ts b/src/extensions/additional/GPT/index.ts index 314f5100..40252beb 100644 --- a/src/extensions/additional/GPT/index.ts +++ b/src/extensions/additional/GPT/index.ts @@ -1,3 +1,3 @@ -export * from './toolbar'; +export * from './wGptItemData'; export * from './gptExtension/gptExtension'; export * from './MarkupGpt'; diff --git a/src/extensions/additional/GPT/toolbar.ts b/src/extensions/additional/GPT/wGptItemData.ts similarity index 93% rename from src/extensions/additional/GPT/toolbar.ts rename to src/extensions/additional/GPT/wGptItemData.ts index c5708595..64a1d67f 100644 --- a/src/extensions/additional/GPT/toolbar.ts +++ b/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')}`,