@gravity-ui/markdown-editor 13.18.0 → 13.18.2

package/README.md

@@ -1,3 +1,5 @@
+![Markdown Editor](https://github.com/user-attachments/assets/40be2902-a683-4167-bd8d-ffd8bff26e69)
+
 # @gravity-ui/markdown-editor · [![npm package](https://img.shields.io/npm/v/@gravity-ui/markdown-editor)](https://www.npmjs.com/package/@gravity-ui/markdown-editor) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/markdown-editor/ci.yml?branch=main&label=CI)](https://github.com/gravity-ui/markdown-editor/actions/workflows/ci.yml?query=branch:main) [![Release](https://img.shields.io/github/actions/workflow/status/gravity-ui/markdown-editor/release.yml?branch=main&label=Release)](https://github.com/gravity-ui/markdown-editor/actions/workflows/release.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/md-editor/)
 
 ## Markdown wysiwyg and markup editor
@@ -56,7 +58,7 @@ Read more:
 - [How to add Latex extension](docs/how-to-connect-latex-extension.md)
 - [How to add Mermaid extension](docs/how-to-connect-mermaid-extension.md)
 - [How to write extension](docs/how-to-create-extension.md)
-- [How to add gpt extension](docs/how-to-connect-gpt-extensions.md)
+- [How to add GPT extension](docs/how-to-connect-gpt-extensions.md)
 
 
 ### i18n

package/build/cjs/extensions/behavior/Clipboard/clipboard.js

@@ -92,7 +92,10 @@ const clipboard = ({ textParser, mdParser, serializer, pasteFileHandler, }) => {
                         const codeType = (0, code_1.isInsideCode)(view.state);
                         if (codeType) {
                             const schema = view.state.schema;
-                            view.dispatch((0, core_1.trackTransactionMetrics)(view.state.tr.replaceSelectionWith(schema.text(codeType === 'inline' ? data.trim() : data)), 'paste', { clipboardDataFormat: dataFormat, code: codeType }));
+                            const insideCodeData = e.clipboardData.getData(utils_1.DataTransferType.Text);
+                            view.dispatch((0, core_1.trackTransactionMetrics)(view.state.tr.replaceSelectionWith(schema.text(codeType === 'inline'
+                                ? insideCodeData.trim()
+                                : insideCodeData)), 'paste', { clipboardDataFormat: utils_1.DataTransferType.Text, code: codeType }));
                             isPasteHandled = true;
                         }
                         else {

package/build/cjs/extensions/markdown/Lists/commands.d.ts

@@ -1,5 +1,4 @@
 import type { NodeType } from 'prosemirror-model';
 import type { Command } from 'prosemirror-state';
 export declare function toList(listType: NodeType): Command;
-export declare const liftIfCursorIsAtBeginningOfItem: Command;
 export declare const joinPrevList: Command;

package/build/cjs/extensions/markdown/Lists/commands.js

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.joinPrevList = exports.liftIfCursorIsAtBeginningOfItem = exports.toList = void 0;
+exports.joinPrevList = exports.toList = void 0;
 const prosemirror_schema_list_1 = require("prosemirror-schema-list");
 const join_1 = require("../../../commands/join");
-const selection_1 = require("../../../utils/selection");
 const utils_1 = require("./utils");
 function toList(listType) {
     return (state, dispatch) => {
@@ -18,18 +17,6 @@ function toList(listType) {
     };
 }
 exports.toList = toList;
-const liftIfCursorIsAtBeginningOfItem = (state, dispatch) => {
-    const $cursor = (0, selection_1.get$CursorAtBlockStart)(state.selection);
-    if (!$cursor)
-        return false;
-    const { schema } = state;
-    const parentBlock = $cursor.node($cursor.depth - 1);
-    if (parentBlock.firstChild === $cursor.parent && (0, utils_1.isListItemNode)(parentBlock)) {
-        return (0, prosemirror_schema_list_1.liftListItem)((0, utils_1.liType)(schema))(state, dispatch);
-    }
-    return false;
-};
-exports.liftIfCursorIsAtBeginningOfItem = liftIfCursorIsAtBeginningOfItem;
 exports.joinPrevList = (0, join_1.joinPreviousBlock)({
     checkPrevNode: utils_1.isListNode,
     skipNode: utils_1.isListOrItemNode,

package/build/cjs/extensions/markdown/Lists/index.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Lists = exports.olType = exports.liType = exports.blType = exports.ListsAttr = exports.ListNode = void 0;
-const prosemirror_commands_1 = require("prosemirror-commands");
 const prosemirror_schema_list_1 = require("prosemirror-schema-list");
 const keymap_1 = require("../../../utils/keymap");
 const ListsSpecs_1 = require("./ListsSpecs");
@@ -29,7 +28,7 @@ const Lists = (builder, opts) => {
     }, builder.Priority.High);
     builder.addKeymap(({ schema }) => ({
         Enter: (0, prosemirror_schema_list_1.splitListItem)((0, ListsSpecs_1.liType)(schema)),
-        Backspace: (0, prosemirror_commands_1.chainCommands)(commands_1.liftIfCursorIsAtBeginningOfItem, commands_1.joinPrevList),
+        Backspace: commands_1.joinPrevList,
     }), builder.Priority.Low);
     builder.use(inputrules_1.ListsInputRulesExtension, { bulletListInputRule: opts === null || opts === void 0 ? void 0 : opts.ulInputRules });
     builder.addPlugin(MergeListsPlugin_1.mergeListsPlugin);

package/build/cjs/extensions/markdown/Lists/plugins/MergeListsPlugin.js

@@ -21,11 +21,15 @@ const mergeListsPlugin = () => new prosemirror_state_1.Plugin({
 });
 exports.mergeListsPlugin = mergeListsPlugin;
 function mergeAdjacentNodesWithSameType(tr, nodes) {
-    for (let i = nodes.length - 1; i > 0; i--) {
-        const prev = nodes[i - 1];
-        const next = nodes[i];
-        if (prev.node.type === next.node.type && prev.pos + prev.node.nodeSize === next.pos) {
-            tr.join(next.pos);
+    const posAfterMap = {};
+    for (const item of nodes) {
+        const posBefore = item.pos;
+        const posAfter = posBefore + item.node.nodeSize;
+        posAfterMap[posAfter] = item.node;
+        const nodeBefore = posAfterMap[posBefore];
+        if ((nodeBefore === null || nodeBefore === void 0 ? void 0 : nodeBefore.type) === item.node.type) {
+            tr.join(tr.mapping.map(posBefore));
+            posAfterMap[posBefore] = undefined;
         }
     }
 }

package/build/cjs/extensions/yfm/GPT/GptDialog/LoadingScreen/LoadingScreen.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoadingScreen = exports.cnGptDialogLoadingScreen = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const classname_1 = require("@bem-react/classname");
 const uikit_1 = require("@gravity-ui/uikit");
+const classname_1 = require("../../../../../classname");
 const loading_1 = require("../../../../../i18n/gpt/loading");
 const GPTLoading_1 = tslib_1.__importDefault(require("../../../../../icons/GPTLoading"));
 const IconRefuge_1 = require("../../IconRefuge/IconRefuge");

package/build/cjs/extensions/yfm/GPT/PresetList/PresetList.js

@@ -13,7 +13,7 @@ exports.cnGptDialogPresetList = (0, classname_1.cn)('gpt-dialog-preset-list');
 const PresetItem = ({ preset, onPresetClick, disablePromptPresets, hotKey }) => {
     (0, useGptHotKeys_1.useGptHotKeys)(hotKey, () => {
         onPresetClick(preset.data);
-    }, { enableOnFormTags: true });
+    }, { enableOnFormTags: true, enableOnContentEditable: true });
     return (react_1.default.createElement(uikit_1.ActionTooltip, { title: preset.display, hotkey: hotKey },
         react_1.default.createElement(uikit_1.Button, { className: (0, exports.cnGptDialogPresetList)('preset'), view: "normal", size: "m", disabled: disablePromptPresets, onClick: () => onPresetClick(preset.data) }, preset.display)));
 };

package/build/cjs/extensions/yfm/GPT/gptExtension/view.js

@@ -150,10 +150,6 @@ class GptWidgetDecoView {
 }
 exports.GptWidgetDecoView = GptWidgetDecoView;
 function Widget({ markup, anchorRef, answerRender, promptPresets, disablePromptPresets, customPromptPlaceholder, disabledPromptPlaceholder, onCustomPromptApply, onApplyResult, onPromptPresetClick, onTryAgain, onLike, onDislike, onClose, onUpdate, container, gptAlertProps, }) {
-    (0, react_1.useEffect)(() => {
-        // rerender the popup
-        window.dispatchEvent(new CustomEvent('scroll'));
-    }, [anchorRef]);
     (0, react_use_1.useMount)(() => {
         if ((anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && 'scrollIntoView' in anchorRef.current) {
             anchorRef.current.scrollIntoView({
@@ -166,6 +162,6 @@ function Widget({ markup, anchorRef, answerRender, promptPresets, disablePromptP
         onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(result);
     }, [onUpdate]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(uikit_1.Popup, { className: (0, exports.cnGptPopup)(), contentClassName: (0, exports.cnGptPopup)('content'), open: true, anchorRef: anchorRef, placement: constants_1.gptPopupPlacement, onOutsideClick: onClose, focusTrap: true, strategy: "absolute", container: container, onEscapeKeyDown: onClose },
+        react_1.default.createElement(uikit_1.Popup, { className: (0, exports.cnGptPopup)(), contentClassName: (0, exports.cnGptPopup)('content'), open: true, anchorRef: anchorRef, placement: constants_1.gptPopupPlacement, onOutsideClick: onClose, focusTrap: true, autoFocus: !onCustomPromptApply && true, strategy: "absolute", container: container, onEscapeKeyDown: onClose },
             react_1.default.createElement(GptDialog_1.GptDialog, { markup: markup, answerRender: answerRender, promptPresets: promptPresets, disablePromptPresets: disablePromptPresets, customPromptPlaceholder: customPromptPlaceholder, disabledPromptPlaceholder: disabledPromptPlaceholder, onApplyResult: onApplyResult, onCustomPromptApply: onCustomPromptApply, onPromptPresetClick: onPromptPresetClick, onTryAgain: onTryAgain, onLike: onLike, onDislike: onDislike, onClose: onClose, onUpdate: handleUpdate, gptAlertProps: gptAlertProps }))));
 }

package/build/cjs/extensions/yfm/GPT/hooks/useGpt.js

@@ -32,6 +32,13 @@ const useGpt = ({ markup, promptPresets, onCustomPromptApply, onPromptPresetClic
         }
         finally {
             setLoading(false);
+            setTimeout(() => {
+                // hack for popup rerender
+                // When a lot of text is entered into the GPT popup,
+                // it expands and goes beyond the boundaries. However,
+                // the popup does not handle height changes.
+                window.dispatchEvent(new CustomEvent('scroll'));
+            });
             onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(result);
         }
     }, [onUpdate]);

package/build/cjs/react-utils/useNodeResizing.js

@@ -51,9 +51,14 @@ const useNodeResizing = ({ width, height, onResize, ref, delay = RESIZE_DELAY, t
                     const newHeight = (startHeight / startWidth) * newWidth;
                     setCurrentWidth(newWidth);
                     setCurrentHeight(newHeight);
+                    // If neither width nor height are provided, the width is set automatically.
+                    const shouldSetWidth = !initialWidth &&
+                        initialWidth !== 0 &&
+                        !(initialWidth === null && initialHeight === null);
+                    const shouldSetHeight = !initialHeight && initialHeight !== 0;
                     onResize === null || onResize === void 0 ? void 0 : onResize({
-                        width: !initialWidth && initialWidth !== 0 ? undefined : newWidth,
-                        height: !initialHeight && initialHeight !== 0 ? undefined : newHeight,
+                        width: shouldSetWidth ? undefined : newWidth,
+                        height: shouldSetHeight ? undefined : newHeight,
                     });
                 }
             });

package/build/cjs/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
 /** During build process, the current version will be injected here */
-exports.VERSION = typeof '13.18.0' !== 'undefined' ? '13.18.0' : 'unknown';
+exports.VERSION = typeof '13.18.2' !== 'undefined' ? '13.18.2' : 'unknown';

package/build/esm/extensions/behavior/Clipboard/clipboard.js

@@ -89,7 +89,10 @@ export const clipboard = ({ textParser, mdParser, serializer, pasteFileHandler,
                         const codeType = isInsideCode(view.state);
                         if (codeType) {
                             const schema = view.state.schema;
-                            view.dispatch(trackTransactionMetrics(view.state.tr.replaceSelectionWith(schema.text(codeType === 'inline' ? data.trim() : data)), 'paste', { clipboardDataFormat: dataFormat, code: codeType }));
+                            const insideCodeData = e.clipboardData.getData(DataTransferType.Text);
+                            view.dispatch(trackTransactionMetrics(view.state.tr.replaceSelectionWith(schema.text(codeType === 'inline'
+                                ? insideCodeData.trim()
+                                : insideCodeData)), 'paste', { clipboardDataFormat: DataTransferType.Text, code: codeType }));
                             isPasteHandled = true;
                         }
                         else {

package/build/esm/extensions/markdown/Lists/commands.d.ts

@@ -1,5 +1,4 @@
 import type { NodeType } from 'prosemirror-model';
 import type { Command } from 'prosemirror-state';
 export declare function toList(listType: NodeType): Command;
-export declare const liftIfCursorIsAtBeginningOfItem: Command;
 export declare const joinPrevList: Command;

package/build/esm/extensions/markdown/Lists/commands.js

@@ -1,7 +1,6 @@
-import { liftListItem, wrapInList } from 'prosemirror-schema-list';
+import { wrapInList } from 'prosemirror-schema-list';
 import { joinPreviousBlock } from '../../../commands/join';
-import { get$CursorAtBlockStart } from '../../../utils/selection';
-import { findAnyParentList, isListItemNode, isListNode, isListOrItemNode, liType } from './utils';
+import { findAnyParentList, isListNode, isListOrItemNode } from './utils';
 export function toList(listType) {
     return (state, dispatch) => {
         const parentList = findAnyParentList(state.schema)(state.selection);
@@ -14,17 +13,6 @@ export function toList(listType) {
         return wrapInList(listType)(state, dispatch);
     };
 }
-export const liftIfCursorIsAtBeginningOfItem = (state, dispatch) => {
-    const $cursor = get$CursorAtBlockStart(state.selection);
-    if (!$cursor)
-        return false;
-    const { schema } = state;
-    const parentBlock = $cursor.node($cursor.depth - 1);
-    if (parentBlock.firstChild === $cursor.parent && isListItemNode(parentBlock)) {
-        return liftListItem(liType(schema))(state, dispatch);
-    }
-    return false;
-};
 export const joinPrevList = joinPreviousBlock({
     checkPrevNode: isListNode,
     skipNode: isListOrItemNode,

package/build/esm/extensions/markdown/Lists/index.js

@@ -1,9 +1,8 @@
-import { chainCommands } from 'prosemirror-commands';
 import { liftListItem, sinkListItem, splitListItem } from 'prosemirror-schema-list';
 import { withLogAction } from '../../../utils/keymap';
 import { ListsSpecs, blType, liType, olType } from './ListsSpecs';
 import { actions } from './actions';
-import { joinPrevList, liftIfCursorIsAtBeginningOfItem, toList } from './commands';
+import { joinPrevList, toList } from './commands';
 import { ListAction } from './const';
 import { ListsInputRulesExtension } from './inputrules';
 import { mergeListsPlugin } from './plugins/MergeListsPlugin';
@@ -21,7 +20,7 @@ export const Lists = (builder, opts) => {
     }, builder.Priority.High);
     builder.addKeymap(({ schema }) => ({
         Enter: splitListItem(liType(schema)),
-        Backspace: chainCommands(liftIfCursorIsAtBeginningOfItem, joinPrevList),
+        Backspace: joinPrevList,
     }), builder.Priority.Low);
     builder.use(ListsInputRulesExtension, { bulletListInputRule: opts === null || opts === void 0 ? void 0 : opts.ulInputRules });
     builder.addPlugin(mergeListsPlugin);

package/build/esm/extensions/markdown/Lists/plugins/MergeListsPlugin.js

@@ -17,11 +17,15 @@ export const mergeListsPlugin = () => new Plugin({
     },
 });
 function mergeAdjacentNodesWithSameType(tr, nodes) {
-    for (let i = nodes.length - 1; i > 0; i--) {
-        const prev = nodes[i - 1];
-        const next = nodes[i];
-        if (prev.node.type === next.node.type && prev.pos + prev.node.nodeSize === next.pos) {
-            tr.join(next.pos);
+    const posAfterMap = {};
+    for (const item of nodes) {
+        const posBefore = item.pos;
+        const posAfter = posBefore + item.node.nodeSize;
+        posAfterMap[posAfter] = item.node;
+        const nodeBefore = posAfterMap[posBefore];
+        if ((nodeBefore === null || nodeBefore === void 0 ? void 0 : nodeBefore.type) === item.node.type) {
+            tr.join(tr.mapping.map(posBefore));
+            posAfterMap[posBefore] = undefined;
         }
     }
 }

package/build/esm/extensions/yfm/GPT/GptDialog/LoadingScreen/LoadingScreen.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { cn } from '@bem-react/classname';
 import { Skeleton } from '@gravity-ui/uikit';
+import { cn } from '../../../../../classname';
 import { i18n } from '../../../../../i18n/gpt/loading';
 import GPTLoading from '../../../../../icons/GPTLoading';
 import { IconRefuge } from '../../IconRefuge/IconRefuge';

package/build/esm/extensions/yfm/GPT/PresetList/PresetList.js

@@ -10,7 +10,7 @@ export const cnGptDialogPresetList = cn('gpt-dialog-preset-list');
 const PresetItem = ({ preset, onPresetClick, disablePromptPresets, hotKey }) => {
     useGptHotKeys(hotKey, () => {
         onPresetClick(preset.data);
-    }, { enableOnFormTags: true });
+    }, { enableOnFormTags: true, enableOnContentEditable: true });
     return (React.createElement(ActionTooltip, { title: preset.display, hotkey: hotKey },
         React.createElement(Button, { className: cnGptDialogPresetList('preset'), view: "normal", size: "m", disabled: disablePromptPresets, onClick: () => onPresetClick(preset.data) }, preset.display)));
 };

package/build/esm/extensions/yfm/GPT/gptExtension/view.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback } from 'react';
 import { Popup } from '@gravity-ui/uikit';
 import { Slice } from 'prosemirror-model';
 import { TextSelection } from 'prosemirror-state';
@@ -146,10 +146,6 @@ export class GptWidgetDecoView {
     }
 }
 function Widget({ markup, anchorRef, answerRender, promptPresets, disablePromptPresets, customPromptPlaceholder, disabledPromptPlaceholder, onCustomPromptApply, onApplyResult, onPromptPresetClick, onTryAgain, onLike, onDislike, onClose, onUpdate, container, gptAlertProps, }) {
-    useEffect(() => {
-        // rerender the popup
-        window.dispatchEvent(new CustomEvent('scroll'));
-    }, [anchorRef]);
     useMount(() => {
         if ((anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && 'scrollIntoView' in anchorRef.current) {
             anchorRef.current.scrollIntoView({
@@ -162,6 +158,6 @@ function Widget({ markup, anchorRef, answerRender, promptPresets, disablePromptP
         onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(result);
     }, [onUpdate]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Popup, { className: cnGptPopup(), contentClassName: cnGptPopup('content'), open: true, anchorRef: anchorRef, placement: gptPopupPlacement, onOutsideClick: onClose, focusTrap: true, strategy: "absolute", container: container, onEscapeKeyDown: onClose },
+        React.createElement(Popup, { className: cnGptPopup(), contentClassName: cnGptPopup('content'), open: true, anchorRef: anchorRef, placement: gptPopupPlacement, onOutsideClick: onClose, focusTrap: true, autoFocus: !onCustomPromptApply && true, strategy: "absolute", container: container, onEscapeKeyDown: onClose },
             React.createElement(GptDialog, { markup: markup, answerRender: answerRender, promptPresets: promptPresets, disablePromptPresets: disablePromptPresets, customPromptPlaceholder: customPromptPlaceholder, disabledPromptPlaceholder: disabledPromptPlaceholder, onApplyResult: onApplyResult, onCustomPromptApply: onCustomPromptApply, onPromptPresetClick: onPromptPresetClick, onTryAgain: onTryAgain, onLike: onLike, onDislike: onDislike, onClose: onClose, onUpdate: handleUpdate, gptAlertProps: gptAlertProps }))));
 }

package/build/esm/extensions/yfm/GPT/hooks/useGpt.js

@@ -29,6 +29,13 @@ export const useGpt = ({ markup, promptPresets, onCustomPromptApply, onPromptPre
         }
         finally {
             setLoading(false);
+            setTimeout(() => {
+                // hack for popup rerender
+                // When a lot of text is entered into the GPT popup,
+                // it expands and goes beyond the boundaries. However,
+                // the popup does not handle height changes.
+                window.dispatchEvent(new CustomEvent('scroll'));
+            });
             onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(result);
         }
     }, [onUpdate]);

package/build/esm/react-utils/useNodeResizing.js

@@ -47,9 +47,14 @@ export const useNodeResizing = ({ width, height, onResize, ref, delay = RESIZE_D
                     const newHeight = (startHeight / startWidth) * newWidth;
                     setCurrentWidth(newWidth);
                     setCurrentHeight(newHeight);
+                    // If neither width nor height are provided, the width is set automatically.
+                    const shouldSetWidth = !initialWidth &&
+                        initialWidth !== 0 &&
+                        !(initialWidth === null && initialHeight === null);
+                    const shouldSetHeight = !initialHeight && initialHeight !== 0;
                     onResize === null || onResize === void 0 ? void 0 : onResize({
-                        width: !initialWidth && initialWidth !== 0 ? undefined : newWidth,
-                        height: !initialHeight && initialHeight !== 0 ? undefined : newHeight,
+                        width: shouldSetWidth ? undefined : newWidth,
+                        height: shouldSetHeight ? undefined : newHeight,
                     });
                 }
             });

package/build/esm/version.js

@@ -1,2 +1,2 @@
 /** During build process, the current version will be injected here */
-export const VERSION = typeof '13.18.0' !== 'undefined' ? '13.18.0' : 'unknown';
+export const VERSION = typeof '13.18.2' !== 'undefined' ? '13.18.2' : 'unknown';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/markdown-editor",
-  "version": "13.18.0",
+  "version": "13.18.2",
   "description": "Markdown wysiwyg and markup editor",
   "license": "MIT",
   "repository": {