Merge branch 'main' into dependabot/npm_and_yarn/mermaid-11.10.0

Author: makhnatkin

CHANGELOG.md

@@ -1,5 +1,121 @@
 # Changelog
 
+## [15.25.0](https://github.com/gravity-ui/markdown-editor/compare/v15.24.1...v15.25.0) (2025-11-14)
+
+
+### Features
+
+* **bundle:** improve cursor movement to specified line in wysiwyg mode ([fd04b7f](https://github.com/gravity-ui/markdown-editor/commit/fd04b7f57f14fa1c2d282eaf0b7f00e13b81f5c6))
+* **Checkbox:** add data-line attribute to checkbox ([283c7d1](https://github.com/gravity-ui/markdown-editor/commit/283c7d1e9f6e2e31b8f8f23260062fa4d6ec120e))
+* **CodeBlock:** add data-line attribute to code block ([783f099](https://github.com/gravity-ui/markdown-editor/commit/783f0997d26158f655b034fec44b83be1db0c261))
+* **Deflist:** add data-line attribute to term ([86347bc](https://github.com/gravity-ui/markdown-editor/commit/86347bc656e99924ac18f6ce75dd8cd06d85a6ea))
+* **Lists:** add data-line attribute to list item ([1077ae9](https://github.com/gravity-ui/markdown-editor/commit/1077ae994827b5ab4b98db40d844b602ffd7e4ce))
+* **Table:** add data-line attribute to table row ([b956c55](https://github.com/gravity-ui/markdown-editor/commit/b956c5500b1a3c776130435ef4a869d960b20765))
+* **YfmCut:** add data-line attribute to cut title ([426bfcf](https://github.com/gravity-ui/markdown-editor/commit/426bfcf541ea021251fdb544670ab3ff09ac0f9a))
+* **YfmNote:** add data-line attribute to note title ([f55d176](https://github.com/gravity-ui/markdown-editor/commit/f55d176c13d25ec5b0240955900e7a981369941a))
+
+## [15.24.1](https://github.com/gravity-ui/markdown-editor/compare/v15.24.0...v15.24.1) (2025-11-11)
+
+
+### Bug Fixes
+
+* **BaseSchema:** get paragraph attributes from token attributes ([#875](https://github.com/gravity-ui/markdown-editor/issues/875)) ([17a58e5](https://github.com/gravity-ui/markdown-editor/commit/17a58e53a86fc863638badbfa46aad579c43ccd1))
+
+## [15.24.0](https://github.com/gravity-ui/markdown-editor/compare/v15.23.0...v15.24.0) (2025-10-18)
+
+
+### Features
+
+* **toolbar:** add dynamic z-index sync via useTargetZIndex hook ([#863](https://github.com/gravity-ui/markdown-editor/issues/863)) ([d03f6c9](https://github.com/gravity-ui/markdown-editor/commit/d03f6c905250bc610d5cc30f611ec86f4a6fa170))
+* **YfmCut:** support diplodoc/cut-extension v1.x.x ([#869](https://github.com/gravity-ui/markdown-editor/issues/869)) ([14bf513](https://github.com/gravity-ui/markdown-editor/commit/14bf513f085203f5ecfbb967d981a2905ce196ca))
+
+
+### Bug Fixes
+
+* **imageSize:** fixed the insertion of the svg image ([#857](https://github.com/gravity-ui/markdown-editor/issues/857)) ([e70da1b](https://github.com/gravity-ui/markdown-editor/commit/e70da1be6deb09ef42041b0153c9522c747e3d97))
+* **Table:** go to next row when pressing Enter or Shift+Enter ([#871](https://github.com/gravity-ui/markdown-editor/issues/871)) ([5cbdf0a](https://github.com/gravity-ui/markdown-editor/commit/5cbdf0a338e6993b855daf00ccac8c886f1f4bc9))
+* **wysiwyg:** dont apply wrapping input rules within non-default textblocks ([#870](https://github.com/gravity-ui/markdown-editor/issues/870)) ([cd3cddd](https://github.com/gravity-ui/markdown-editor/commit/cd3cddd96944e4e70e4dc3454cb9aa7cfaed48e7))
+
+## [15.23.0](https://github.com/gravity-ui/markdown-editor/compare/v15.22.2...v15.23.0) (2025-10-14)
+
+
+### Features
+
+* add replace func to markup search ([#860](https://github.com/gravity-ui/markdown-editor/issues/860)) ([5c36b3d](https://github.com/gravity-ui/markdown-editor/commit/5c36b3df0c56db79c74715d537a9383c9131b03e))
+
+
+### Bug Fixes
+
+* **YfmTable:** fix clearing table cells when pressing backspace ([#866](https://github.com/gravity-ui/markdown-editor/issues/866)) ([776de5c](https://github.com/gravity-ui/markdown-editor/commit/776de5ca649479874280875297177bd3c9cb6a53))
+
+## [15.22.2](https://github.com/gravity-ui/markdown-editor/compare/v15.22.1...v15.22.2) (2025-10-09)
+
+
+### Bug Fixes
+
+* **toolbar:** revert broken z-index logic for popups ([#861](https://github.com/gravity-ui/markdown-editor/issues/861)) ([2859f7c](https://github.com/gravity-ui/markdown-editor/commit/2859f7cbb09bd9d24332e0bbe74f6816af84767c))
+
+## [15.22.1](https://github.com/gravity-ui/markdown-editor/compare/v15.22.0...v15.22.1) (2025-10-08)
+
+
+### Bug Fixes
+
+* **Mermaid, YfmHtmlBlock:** improve autosave UI behavior ([#858](https://github.com/gravity-ui/markdown-editor/issues/858)) ([6da142b](https://github.com/gravity-ui/markdown-editor/commit/6da142bc6ac6b9c59b3c80363d9de134eb9f9bfe))
+* **toolbar:** use helper to adjust z-index for popups ([#544](https://github.com/gravity-ui/markdown-editor/issues/544)) ([d452b02](https://github.com/gravity-ui/markdown-editor/commit/d452b0225d10de319a7181731ac2ac0042a16e0c))
+
+## [15.22.0](https://github.com/gravity-ui/markdown-editor/compare/v15.21.0...v15.22.0) (2025-10-02)
+
+
+### Features
+
+* add autosave while editing Mermaid and YfmHtmlblock ([#852](https://github.com/gravity-ui/markdown-editor/issues/852)) ([5ddd9d5](https://github.com/gravity-ui/markdown-editor/commit/5ddd9d5ee8c56510a380b9841c5a9d5971f76045))
+* **YfmTable:** add ghost when dragging rows and columns ([#849](https://github.com/gravity-ui/markdown-editor/issues/849)) ([b1ca9c6](https://github.com/gravity-ui/markdown-editor/commit/b1ca9c64c7b4610c3d12b5611c880278db228468))
+* **YfmTable:** change border color for selected cells ([#850](https://github.com/gravity-ui/markdown-editor/issues/850)) ([46f5168](https://github.com/gravity-ui/markdown-editor/commit/46f516883a25b3b5bf8bcd0026ccbcd68d0d4ee4))
+* **YfmTableControls:** update plus button styles ([#848](https://github.com/gravity-ui/markdown-editor/issues/848)) ([2482d89](https://github.com/gravity-ui/markdown-editor/commit/2482d8931a88f5ab6a9ebfe4ca77051905fb686a))
+
+
+### Bug Fixes
+
+* **BaseSchema:** fix serialization of empty paragraphs inside other blocks ([#846](https://github.com/gravity-ui/markdown-editor/issues/846)) ([196f9f6](https://github.com/gravity-ui/markdown-editor/commit/196f9f634a39b4b77d1be1d9f8b243abbc6052c7))
+* **FoldingHeading:** some blocks remained visible when heading was collapsed ([#845](https://github.com/gravity-ui/markdown-editor/issues/845)) ([1c0005d](https://github.com/gravity-ui/markdown-editor/commit/1c0005dd44edc4a480a8b6123ef2a428c50b2356))
+* **YfmTableControls:** fix drag-n-drop false positives ([#853](https://github.com/gravity-ui/markdown-editor/issues/853)) ([ea018a1](https://github.com/gravity-ui/markdown-editor/commit/ea018a1c9474ebf83c787532dd9128e78746805d))
+* **YfmTable:** fix button display while dragging ([#854](https://github.com/gravity-ui/markdown-editor/issues/854)) ([54bd192](https://github.com/gravity-ui/markdown-editor/commit/54bd1922dc1da8dfce74ec907776f5f50652c1b7))
+
+## [15.21.0](https://github.com/gravity-ui/markdown-editor/compare/v15.20.0...v15.21.0) (2025-09-23)
+
+
+### Features
+
+* **view:** support `no-stripe-table` modifier ([8f4cfb0](https://github.com/gravity-ui/markdown-editor/commit/8f4cfb048ccef957119f054a385c1f5f8f22032e))
+* **YfmConfigs:** support yfm modifiers ([26157cd](https://github.com/gravity-ui/markdown-editor/commit/26157cd73e7c44e20f0780a6c894ee71577b9759))
+
+
+### Bug Fixes
+
+* **YfmTableControls:** fix row deletion when dnd is enabled ([#844](https://github.com/gravity-ui/markdown-editor/issues/844)) ([b696dd3](https://github.com/gravity-ui/markdown-editor/commit/b696dd3c6cbdc2da6c798f9470c0e2893d76c38e))
+
+## [15.20.0](https://github.com/gravity-ui/markdown-editor/compare/v15.19.1...v15.20.0) (2025-09-15)
+
+
+### Features
+
+* **icons:** update monospace, tabs, mermaid and drawio icons ([#837](https://github.com/gravity-ui/markdown-editor/issues/837)) ([1acf377](https://github.com/gravity-ui/markdown-editor/commit/1acf3772166665be6458682ee5e175b462ff85ce))
+* **YfmTable:** rework table controls – add drag-n-drop, rows and columns insertion ([#831](https://github.com/gravity-ui/markdown-editor/issues/831)) ([f8fd37f](https://github.com/gravity-ui/markdown-editor/commit/f8fd37ff59ea2e318513c670f144bb6c956559bc))
+
+
+### Bug Fixes
+
+* **toolbar:** hide tooltip when menu open to prevent overlap ([#839](https://github.com/gravity-ui/markdown-editor/issues/839)) ([9c80b9d](https://github.com/gravity-ui/markdown-editor/commit/9c80b9d25ff24e500975e435e26edcaee9761b3f))
+
+## [15.19.1](https://github.com/gravity-ui/markdown-editor/compare/v15.19.0...v15.19.1) (2025-08-28)
+
+
+### Bug Fixes
+
+* **bundle:** dont pass invalid props to dom in ToolbarColors component ([#836](https://github.com/gravity-ui/markdown-editor/issues/836)) ([93a97b6](https://github.com/gravity-ui/markdown-editor/commit/93a97b645d1a1b1411b4b07804248302db620a07))
+* ellipsis rule in inline code ([#829](https://github.com/gravity-ui/markdown-editor/issues/829)) ([53cc46f](https://github.com/gravity-ui/markdown-editor/commit/53cc46f6b67b2667225d66453f4160dab304c8f6))
+* **Lists:** enable tight lists by default to eliminate unnecessary spacing ([#826](https://github.com/gravity-ui/markdown-editor/issues/826)) ([28b7368](https://github.com/gravity-ui/markdown-editor/commit/28b736899b9de7198a9d53e2fa6826cc7b6fdee8))
+
 ## [15.19.0](https://github.com/gravity-ui/markdown-editor/compare/v15.18.0...v15.19.0) (2025-08-12)
 
 

demo/components/MoveToLine.tsx

@@ -0,0 +1,26 @@
+import {useState} from 'react';
+
+import {Button, type DOMProps, Flex} from '@gravity-ui/uikit';
+
+import {NumberInput} from 'src/index';
+
+export type MoveToLineProps = DOMProps & {
+    onClick: (value: number | undefined) => void;
+};
+
+export const MoveToLine: React.FC<MoveToLineProps> = function MoveToLine({
+    style,
+    className,
+    onClick,
+}) {
+    const [line, setLine] = useState<number | undefined>(0);
+
+    return (
+        <Flex gap="1" style={style} className={className}>
+            <NumberInput size="s" value={line} onUpdate={setLine} min={0} style={{width: '56px'}} />
+            <Button size="s" onClick={() => onClick(line)}>
+                Move to line
+            </Button>
+        </Flex>
+    );
+};

demo/components/Playground.tsx

@@ -56,6 +56,7 @@ const wCommandMenuConfig = wysiwygToolbarConfigs.wCommandMenuConfig.concat(
 );
 
 export type PlaygroundProps = {
+    mobile?: boolean;
     initial?: MarkupString;
     allowHTML?: boolean;
     settingsVisible?: boolean | SettingItems[];
@@ -85,6 +86,7 @@ export type PlaygroundProps = {
     disableMarkdownItAttrs?: boolean;
     markupParseHtmlOnPaste?: boolean;
     style?: React.CSSProperties;
+    storyAdditionalControls?: Record<string, any>;
 } & Pick<UseMarkdownEditorProps, 'experimental' | 'wysiwygConfig'> &
     Pick<
         MarkdownEditorViewProps,
@@ -107,6 +109,7 @@ logger.setLogger({
 
 export const Playground = memo<PlaygroundProps>((props) => {
     const {
+        mobile,
         initial,
         initialEditor,
         initialSplitModeEnabled,
@@ -139,6 +142,7 @@ export const Playground = memo<PlaygroundProps>((props) => {
         disableMarkdownItAttrs,
         markupParseHtmlOnPaste,
         style,
+        storyAdditionalControls,
     } = props;
     const [editorMode, setEditorMode] = useState<MarkdownEditorMode>(initialEditor ?? 'wysiwyg');
     const [mdRaw, setMdRaw] = useState<MarkupString>(initial || '');
@@ -174,6 +178,7 @@ export const Playground = memo<PlaygroundProps>((props) => {
     const mdEditor = useMarkdownEditor(
         {
             logger,
+            mobile,
             preset: 'full',
             wysiwygConfig: {
                 placeholderOptions: placeholderOptions,
@@ -197,11 +202,20 @@ export const Playground = memo<PlaygroundProps>((props) => {
                                     /* webpackChunkName: "mermaid-runtime" */ '@diplodoc/mermaid-extension/runtime'
                                 );
                             },
+                            autoSave: {
+                                enabled: storyAdditionalControls?.mermaidAutoSaveEnabled ?? true,
+                                delay: storyAdditionalControls?.mermaidAutoSaveDelay ?? 1000,
+                            },
                         })
                         .use(FoldingHeading)
                         .use(YfmHtmlBlock, {
                             useConfig: useYfmHtmlBlockStyles,
                             sanitize: getSanitizeYfmHtmlBlock({options: defaultOptions}),
+                            autoSave: {
+                                enabled:
+                                    storyAdditionalControls?.yfmHtmlBlockAutoSaveEnabled ?? true,
+                                delay: storyAdditionalControls?.yfmHtmlBlockAutoSaveDelay ?? 1000,
+                            },
                             head: `
                         <base target="_blank" />
                         <style>
@@ -261,6 +275,7 @@ export const Playground = memo<PlaygroundProps>((props) => {
             },
         },
         [
+            mobile,
             allowHTML,
             linkify,
             linkifyTlds,

demo/components/PlaygroundMini.tsx

@@ -6,6 +6,7 @@ import {Playground, type PlaygroundProps} from './Playground';
 
 export type PlaygroundMiniProps = Pick<
     PlaygroundProps,
+    | 'mobile'
     | 'initialEditor'
     | 'settingsVisible'
     | 'breaks'
@@ -27,6 +28,7 @@ export type PlaygroundMiniProps = Pick<
     | 'directiveSyntax'
     | 'disabledHTMLBlockModes'
     | 'disableMarkdownItAttrs'
+    | 'storyAdditionalControls'
 > & {withDefaultInitialContent?: boolean};
 
 export const PlaygroundMini = memo<PlaygroundMiniProps>(

demo/defaults/args.ts

@@ -5,6 +5,7 @@ import type {PlaygroundMiniProps} from '../components/PlaygroundMini';
 export const args: Meta<PlaygroundMiniProps>['args'] = {
     initialEditor: 'wysiwyg',
     settingsVisible: true,
+    mobile: false,
     allowHTML: true,
     breaks: true,
     linkify: true,

demo/stories/examples/line-numbers/Editor.tsx

@@ -0,0 +1,55 @@
+import {memo} from 'react';
+
+import {MarkdownEditorView, useMarkdownEditor} from 'src/index';
+
+import {MoveToLine} from '../../../components/MoveToLine';
+import {PlaygroundLayout} from '../../../components/PlaygroundLayout';
+import {markup} from '../../../defaults/content';
+
+import {lineNumbersPlugin} from './md-plugin';
+
+export type EditorWithLineNumbersProps = {};
+
+export const EditorWithLineNumbers = memo<EditorWithLineNumbersProps>(
+    function EditorWithLineNumbers() {
+        const editor = useMarkdownEditor(
+            {
+                initial: {
+                    mode: 'wysiwyg',
+                    markup,
+                },
+                wysiwygConfig: {
+                    extensions: (builder) =>
+                        builder.configureMd((md) => md.use(lineNumbersPlugin), {text: false}),
+                },
+            },
+            [],
+        );
+
+        return (
+            <PlaygroundLayout
+                title="Line numbers example"
+                editor={editor}
+                actions={({className}) => (
+                    <MoveToLine
+                        className={className}
+                        onClick={(line) => {
+                            if (typeof line !== 'number' || Number.isNaN(line)) return;
+                            editor.moveCursor({line});
+                            editor.focus();
+                        }}
+                    />
+                )}
+                view={({className}) => (
+                    <MarkdownEditorView
+                        autofocus
+                        stickyToolbar
+                        settingsVisible
+                        editor={editor}
+                        className={className}
+                    />
+                )}
+            />
+        );
+    },
+);

demo/stories/examples/line-numbers/LineNumbers.stories.tsx

@@ -0,0 +1,13 @@
+import type {StoryObj} from '@storybook/react';
+
+import {EditorWithLineNumbers as component} from './Editor';
+
+export const Story: StoryObj<typeof component> = {
+    args: {},
+};
+Story.storyName = 'Line Numbers';
+
+export default {
+    title: 'Examples / Line Numbers',
+    component,
+};

demo/stories/examples/line-numbers/md-plugin.ts

@@ -0,0 +1,32 @@
+import type {PluginSimple} from 'markdown-it';
+import type {RuleCore} from 'markdown-it/lib/parser_core';
+
+const RULE_NAME = 'line_numbers';
+
+const TOKENS: readonly string[] = [
+    'paragraph_open',
+    'heading_open',
+    'code_block',
+    'fence',
+    'list_item_open',
+    'tr_open',
+    'dt_open',
+    'checkbox_open',
+    'yfm_note_open',
+    'yfm_cut_open',
+];
+
+export const lineNumbersPlugin: PluginSimple = (md) => {
+    const rule: RuleCore = ({tokens}) => {
+        for (let i = 0; i < tokens.length; i++) {
+            const token = tokens[i];
+
+            if (token.map && TOKENS.includes(token.type)) {
+                const line = token.map[0];
+                token.attrPush(['data-line', String(line)]);
+            }
+        }
+    };
+
+    md.core.ruler.push(RULE_NAME, rule);
+};

demo/stories/examples/yfm-table-dnd/YfmTableDnD.stories.tsx

@@ -0,0 +1,16 @@
+import type {StoryObj} from '@storybook/react';
+
+import {YfmTableDnDDemo as component} from './YfmTableDnD';
+
+export const Story: StoryObj<typeof component> = {
+    args: {
+        mobile: false,
+        dnd: true,
+    },
+};
+Story.storyName = "YFM Table D'n'D";
+
+export default {
+    title: "Examples / YFM Table D'n'D",
+    component,
+};