Merge branch 'main' into add-empty-row-placeholder

gravity-ui · Dec 17, 2024 · 88d0c49 · 88d0c49
2 parents e70b7cb + 4355519
commit 88d0c49
Show file tree

Hide file tree

Showing 21 changed files with 207 additions and 123 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,26 @@
 # Changelog
 
+## [14.6.0](https://github.com/gravity-ui/markdown-editor/compare/v14.5.1...v14.6.0) (2024-12-10)
+
+
+### Features
+
+* **bundle:** update view of text color action item in toolbar ([#514](https://github.com/gravity-ui/markdown-editor/issues/514)) ([54ac0d3](https://github.com/gravity-ui/markdown-editor/commit/54ac0d36499e572844e42cfff8f7781387731b00))
+
+
+### Bug Fixes
+
+* **Cursor:** input-rules does not work when cursor in virtual selection (GapCursorSelection) ([#515](https://github.com/gravity-ui/markdown-editor/issues/515)) ([9126756](https://github.com/gravity-ui/markdown-editor/commit/9126756fe5e241c6ab2badec4689b1df8f0009c3))
+* **deps:** bumped @lezer/markdown to fix large text hang ([#512](https://github.com/gravity-ui/markdown-editor/issues/512)) ([8a8fce8](https://github.com/gravity-ui/markdown-editor/commit/8a8fce8ff5f9603f6e755264fc474c03a36d6bb7))
+* Gpt extension render ([#519](https://github.com/gravity-ui/markdown-editor/issues/519)) ([89c9881](https://github.com/gravity-ui/markdown-editor/commit/89c9881331df2b0fae5968258a29b9c9eed179ef))
+
+## [14.5.1](https://github.com/gravity-ui/markdown-editor/compare/v14.5.0...v14.5.1) (2024-12-02)
+
+
+### Bug Fixes
+
+* **Checkbox:** correct handling of checkbox click ([#510](https://github.com/gravity-ui/markdown-editor/issues/510)) ([c214076](https://github.com/gravity-ui/markdown-editor/commit/c2140766a32f9820498345d4eab907fcb803c9fc))
+
 ## [14.5.0](https://github.com/gravity-ui/markdown-editor/compare/v14.4.0...v14.5.0) (2024-11-28)
 
 

diff --git 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,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}}}

diff --git 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
@@ -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({
         // ...

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/markdown-editor",
-  "version": "14.5.0",
+  "version": "14.6.0",
   "description": "Markdown wysiwyg and markup editor",
   "license": "MIT",
   "repository": {
@@ -170,7 +170,7 @@
     "@gravity-ui/i18n": "^1.1.0",
     "@gravity-ui/icons": "^2.10.0",
     "@lezer/highlight": "~1.2.1",
-    "@lezer/markdown": "~1.3.1",
+    "@lezer/markdown": "~1.3.2",
     "@types/is-number": "^7.0.1",
     "@types/markdown-it": "^12.2.3",
     "base64-arraybuffer": "1.0.2",
@@ -300,8 +300,8 @@
     "lodash": "^4.17.20",
     "lowlight": "^3.0.0",
     "markdown-it": "^13.0.0",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "lint-staged": {
     "*.{css,scss}": [

diff --git 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/bundle/toolbar/ToolbarButtonWithPopupMenu.tsx b/src/bundle/toolbar/ToolbarButtonWithPopupMenu.tsx
@@ -26,8 +26,12 @@ export type MenuItem = {
 export type ToolbarButtonWithPopupMenuProps = Omit<
     ToolbarBaseProps<ActionStorage> & {
         icon: ToolbarIconData;
+        iconClassName?: string;
+        chevronIconClassName?: string;
         title: string | (() => string);
         menuItems: MenuItem[];
+        /** @default 'classic' */
+        _selectionType?: 'classic' | 'light';
     },
     'editor'
 >;
@@ -37,8 +41,11 @@ export const ToolbarButtonWithPopupMenu: React.FC<ToolbarButtonWithPopupMenuProp
     focus,
     onClick,
     icon,
+    iconClassName,
+    chevronIconClassName,
     title,
     menuItems,
+    _selectionType,
 }) => {
     const buttonRef = React.useRef<HTMLButtonElement>(null);
     const [open, , hide, toggleOpen] = useBooleanState(false);
@@ -48,7 +55,7 @@ export const ToolbarButtonWithPopupMenu: React.FC<ToolbarButtonWithPopupMenuProp
                 menuItems.map((i) => ({...i, group: i.group || ''})),
                 'group',
             ),
-        [menuItems, groupBy],
+        [menuItems],
     );
 
     const someActive = menuItems.some(
@@ -64,6 +71,14 @@ export const ToolbarButtonWithPopupMenu: React.FC<ToolbarButtonWithPopupMenuProp
         }
     }, [hide, shouldForceHide]);
 
+    const [btnView, btnSelected] =
+        _selectionType === 'light'
+            ? ([
+                  popupOpen ? 'normal' : someActive ? 'flat-action' : 'flat',
+                  popupOpen && someActive,
+              ] as const)
+            : ([someActive || popupOpen ? 'normal' : 'flat', someActive] as const);
+
     return (
         <>
             <ActionTooltip
@@ -75,15 +90,15 @@ export const ToolbarButtonWithPopupMenu: React.FC<ToolbarButtonWithPopupMenuProp
                 <Button
                     size="m"
                     ref={buttonRef}
-                    view={someActive || popupOpen ? 'normal' : 'flat'}
-                    selected={someActive}
+                    view={btnView}
+                    selected={btnSelected}
                     disabled={everyDisabled}
                     className={b(null, [className])}
                     onClick={toggleOpen}
                 >
-                    <Icon data={icon.data} size={icon.size} />
+                    <Icon data={icon.data} size={icon.size} className={iconClassName} />
                     {''}
-                    <Icon data={ChevronDown} />
+                    <Icon data={ChevronDown} className={chevronIconClassName} />
                 </Button>
             </ActionTooltip>
             <Popup anchorRef={buttonRef} open={popupOpen} onClose={hide}>

diff --git a/src/bundle/toolbar/custom/ToolbarColors.scss b/src/bundle/toolbar/custom/ToolbarColors.scss
@@ -2,10 +2,19 @@ $colors: ('gray', 'yellow', 'orange', 'red', 'green', 'blue', 'violet');
 
 .g-md-toolbar-colors {
     @each $name in $colors {
+        &__menu-icon_color_#{$name} {
+            color: var(--yfm-colorify-#{$name});
+        }
+
+        &__chevron-icon_color_#{$name} {
+            color: var(--yfm-colorify-#{$name});
+        }
+
         &__item-icon_color_#{$name} {
             color: var(--yfm-colorify-#{$name});
         }
     }
+
     &__item-icon_color_default {
         color: var(--g-color-text-primary);
     }

diff --git a/src/bundle/toolbar/custom/ToolbarColors.tsx b/src/bundle/toolbar/custom/ToolbarColors.tsx
@@ -77,6 +77,9 @@ export const ToolbarColors: React.FC<ToolbarColorsProps> = (props) => {
             title={i18n('colorify')}
             menuItems={items}
             icon={textColorIcon}
+            _selectionType="light"
+            iconClassName={b('menu-icon', {color: currentColor})}
+            chevronIconClassName={b('chevron-icon', {color: currentColor})}
         />
     );
 };
diff --git 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 → ...extensions/additional/GPT/wGptItemData.ts b/src/extensions/additional/GPT/toolbar.ts → ...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')}`,