@gravity-ui/markdown-editor 14.11.2 → 14.12.0

package/build/esm/core/markdown/MarkdownSerializer.d.ts

@@ -1,13 +1,14 @@
 export class MarkdownSerializer {
-    constructor(nodes: any, marks: any);
+    constructor(nodes: any, marks: any, dynamicModifier: any);
     nodes: any;
     marks: any;
+    dynamicModifier: any;
     serialize(content: any, options: any): string;
     containsNode(nodeName: any): boolean;
     containsMark(markName: any): boolean;
 }
 export class MarkdownSerializerState {
-    constructor(nodes: any, marks: any, options: any);
+    constructor(nodes: any, marks: any, options: any, dynamicModifier: any);
     nodes: any;
     marks: any;
     delim: string;
@@ -20,6 +21,7 @@ export class MarkdownSerializerState {
     /** @type {Boolean} */
     escapeWhitespace: boolean;
     options: any;
+    dynamicModifier: any;
     setNoAutoBlank(): void;
     unsetNoAutoBlank(): void;
     flushClose(size: any): void;

package/build/esm/core/markdown/MarkdownSerializer.js

@@ -36,18 +36,19 @@ export class MarkdownSerializer {
     // outside the marks. This is necessary for emphasis marks as
     // CommonMark does not permit enclosing whitespace inside emphasis
     // marks, see: http://spec.commonmark.org/0.26/#example-330
-    constructor(nodes, marks) {
+    constructor(nodes, marks, dynamicModifier) {
         // :: Object<(MarkdownSerializerState, Node)> The node serializer
         // functions for this serializer.
         this.nodes = nodes;
         // :: Object The mark serializer info.
         this.marks = marks;
+        this.dynamicModifier = dynamicModifier;
     }
     // :: (Node, ?Object) → string
     // Serialize the content of the given node to
     // [CommonMark](http://commonmark.org/).
     serialize(content, options) {
-        const state = new MarkdownSerializerState(this.nodes, this.marks, options);
+        const state = new MarkdownSerializerState(this.nodes, this.marks, options, this.dynamicModifier);
         state.renderContent(content);
         return state.out;
     }
@@ -65,7 +66,7 @@ export class MarkdownSerializer {
 // node and mark serialization methods (see `toMarkdown`).
 // prettier-ignore
 export class MarkdownSerializerState {
-    constructor(nodes, marks, options) {
+    constructor(nodes, marks, options, dynamicModifier) {
         this.nodes = nodes;
         this.marks = marks;
         this.delim = this.out = '';
@@ -83,6 +84,7 @@ export class MarkdownSerializerState {
         //   on a node level by specifying a tight attribute on the node.
         //   Defaults to false.
         this.options = options || {};
+        this.dynamicModifier = dynamicModifier;
         if (typeof this.options.tightLists === 'undefined') {
             this.options.tightLists = false;
         }
@@ -173,11 +175,19 @@ export class MarkdownSerializerState {
     // :: (Node)
     // Render the given node as a block.
     render(node, parent, index) {
-        if (typeof parent === 'number')
+        if (typeof parent === 'number') {
             throw new Error('!');
-        if (!this.nodes[node.type.name])
+        }
+        if (!this.nodes[node.type.name]) {
             throw new Error('Token type `' + node.type.name + '` not supported by Markdown renderer');
-        this.nodes[node.type.name](this, node, parent, index);
+        }
+        const callback = this.nodes[node.type.name];
+        if (this.dynamicModifier) {
+            this.dynamicModifier.processNode(this, node, parent, index, callback);
+        }
+        else {
+            callback(this, node, parent, index);
+        }
     }
     // :: (Node)
     // Render the contents of `parent` as block nodes.

package/build/esm/core/markdown/MarkdownSerializerDynamicModifier.d.ts

@@ -0,0 +1 @@
+export {};

package/build/esm/core/markdown/MarkdownSerializerDynamicModifier.js

@@ -0,0 +1,43 @@
+/**
+ * Class MarkdownSerializerDynamicModifier
+ *
+ * Provides a mechanism for dynamic modification of node serialization during conversion of ProseMirror nodes
+ * to a markdown-like format. It allows sequential processing of nodes by applying a series of custom handlers:
+ *
+ *    - `processNode`: An array of handlers that process nodes sequentially, each modifying the output.
+ *
+ * Example:
+ * ```ts
+ * const serializerModifier = new MarkdownSerializerDynamicModifier({
+ *     paragraph: {
+ *         processNode: [
+ *             (state, node, parent, index, callback) => {
+ *                 // Custom modifications can be performed here.
+ *                 callback(state, node, parent, index);
+ *             },
+ *         ],
+ *     },
+ * });
+ * ```
+ *
+ * This class extends the functionality of a MarkdownSerializer for scenarios such as:
+ * - Customizing the serialization output.
+ * - Logging or modifying node content during serialization.
+ */
+/** @internal */
+export class MarkdownSerializerDynamicModifier {
+    constructor(config) {
+        this.nodeProcessors = new Map(Object.entries(config));
+    }
+    processNode(state, node, parent, index, callback) {
+        const nodeType = this.nodeProcessors.get(node.type.name);
+        if (!nodeType || !nodeType.processNode || nodeType.processNode.length === 0) {
+            callback(state, node, parent, index);
+        }
+        else {
+            nodeType.processNode.forEach((process) => {
+                process(state, node, parent, index, callback);
+            });
+        }
+    }
+}

package/build/esm/core/types/dynamicModifiers.d.ts

@@ -0,0 +1 @@
+export {};

package/build/esm/core/types/dynamicModifiers.js

@@ -0,0 +1 @@
+export {};

package/build/esm/core/utils/dynamicModifiers.d.ts

@@ -0,0 +1,9 @@
+import { SchemaDynamicModifierConfig } from '../SchemaDynamicModifier';
+import { MarkdownParserDynamicModifierConfig } from '../markdown/MarkdownParser';
+import { MarkdownSerializerDynamicModifierConfig } from '../markdown/MarkdownSerializerDynamicModifier';
+import { DynamicModifiers } from '../types/dynamicModifiers';
+export declare function convertDynamicModifiersConfigs(modifiers: DynamicModifiers[]): {
+    parser: MarkdownParserDynamicModifierConfig;
+    schema: SchemaDynamicModifierConfig;
+    serializer: MarkdownSerializerDynamicModifierConfig;
+};

package/build/esm/core/utils/dynamicModifiers.js

@@ -0,0 +1,44 @@
+export function convertDynamicModifiersConfigs(modifiers) {
+    const parser = {};
+    const schema = {};
+    const serializer = {};
+    modifiers.forEach((modifier) => {
+        var _a, _b, _c, _d;
+        switch (modifier.type) {
+            case 'parserToken': {
+                const { tokenName, process } = modifier;
+                parser[tokenName] = parser[tokenName] || {};
+                parser[tokenName].processToken = parser[tokenName].processToken || [];
+                (_a = parser[tokenName].processToken) === null || _a === void 0 ? void 0 : _a.push(process);
+                break;
+            }
+            case 'parserNodeAttrs': {
+                const { tokenName, process } = modifier;
+                parser[tokenName] = parser[tokenName] || {};
+                parser[tokenName].processNodeAttrs = parser[tokenName].processNodeAttrs || [];
+                (_b = parser[tokenName].processNodeAttrs) === null || _b === void 0 ? void 0 : _b.push(process);
+                break;
+            }
+            case 'parserNode': {
+                const { nodeName, process } = modifier;
+                parser[nodeName] = parser[nodeName] || {};
+                parser[nodeName].processNode = parser[nodeName].processNode || [];
+                (_c = parser[nodeName].processNode) === null || _c === void 0 ? void 0 : _c.push(process);
+                break;
+            }
+            case 'serializerNode': {
+                const { nodeName, process } = modifier;
+                serializer[nodeName] = serializer[nodeName] || {};
+                serializer[nodeName].processNode = serializer[nodeName].processNode || [];
+                (_d = serializer[nodeName].processNode) === null || _d === void 0 ? void 0 : _d.push(process);
+                break;
+            }
+            case 'schemaNodeSpec': {
+                const { nodeName, allowedAttrs } = modifier;
+                schema[nodeName] = { allowedAttrs };
+                break;
+            }
+        }
+    });
+    return { parser, schema, serializer };
+}

package/build/esm/extensions/behavior/CommandMenu/component.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { AutocompletePopupProps } from '../../../utils/autocomplete-popup';
 import type { CommandAction } from './types';
 import './component.css';
-export declare type CommandMenuItem = Pick<CommandAction, 'id' | 'title' | 'icon' | 'hotkey' | 'hint'>;
+export declare type CommandMenuItem = Pick<CommandAction, 'id' | 'title' | 'icon' | 'hotkey' | 'hint' | 'preview'>;
 export declare type CommandMenuComponentProps = AutocompletePopupProps & {
     currentIndex?: number;
     items: readonly CommandMenuItem[];

package/build/esm/extensions/behavior/CommandMenu/component.js

@@ -5,6 +5,7 @@ import { cn } from '../../../classname';
 import { i18n } from '../../../i18n/suggest';
 import { isFunction } from '../../../lodash';
 import { ErrorLoggerBoundary } from '../../../react-utils/ErrorBoundary';
+import { PreviewTooltip } from '../../../toolbar/PreviewTooltip';
 import './component.css';
 const b = cn('command-menu');
 const placement = ['bottom-start', 'top-start', 'bottom-end', 'top-end'];
@@ -23,16 +24,17 @@ export const CommandMenuComponent = ({ anchor, currentIndex, items, onClick, onE
         React.createElement("div", { className: b() },
             React.createElement(List, { virtualized: true, items: items, sortable: false, filterable: false, emptyPlaceholder: i18n('empty-msg'), itemHeight: ITEM_HEIGHT, itemsHeight: calcListHeight(items.length), renderItem: renderItem, deactivateOnLeave: false, activeItemIndex: currentIndex, onItemClick: (_item, index) => onClick(index), className: b('list'), itemClassName: b('list-item') }))));
 };
-function renderItem({ id, title, icon, hotkey, hint }) {
+function renderItem({ id, title, icon, hotkey, hint, preview }) {
     const titleText = isFunction(title) ? title() : title;
     const hintText = isFunction(hint) ? hint() : hint;
-    return (React.createElement("div", { key: id, className: b('item', { id }) },
-        React.createElement(Icon, { data: icon.data, size: 20, className: b('item-icon') }),
-        React.createElement("div", { className: b('item-body') },
-            React.createElement("span", { className: b('item-title') }, titleText),
-            React.createElement("div", { className: b('item-extra') },
-                hotkey && React.createElement(Hotkey, { value: hotkey, className: b('item-hotkey') }),
-                hintText && React.createElement(HelpPopover, { className: b('item- hint'), content: hintText })))));
+    return (React.createElement(PreviewTooltip, { preview: preview },
+        React.createElement("div", { key: id, className: b('item', { id }) },
+            React.createElement(Icon, { data: icon.data, size: 20, className: b('item-icon') }),
+            React.createElement("div", { className: b('item-body') },
+                React.createElement("span", { className: b('item-title') }, titleText),
+                React.createElement("div", { className: b('item-extra') },
+                    hotkey && React.createElement(Hotkey, { value: hotkey, className: b('item-hotkey') }),
+                    hintText && React.createElement(HelpPopover, { className: b('item-hint'), content: hintText }))))));
 }
 export function render(props) {
     return (React.createElement(ErrorLoggerBoundary, null,

package/build/esm/i18n/action-previews/en.json

@@ -0,0 +1,5 @@
+{
+  "text": "This is a text without a title. \nBoth the title and the text \nbelow it can be highlighted in bold, italics, color, \nstrikethrough, and underline. You can also add lists, \ntables, links, formulas, anchors, \nand code blocks.",
+  "text-with-head": "This is the text with the title. \nBoth the title and the text \nbelow it can be highlighted in bold, italics, color, \nstrikethrough, and underline. You can also add lists, \ntables, links, formulas, anchors, \nand code blocks.",
+  "heading": "Text"
+}

package/build/esm/i18n/action-previews/index.d.ts

@@ -0,0 +1,7 @@
+export declare const i18n: <G extends "text" | "heading" | "text-with-head", S extends string>(key: G | (string extends S ? S : never), params?: {
+    [key: string]: any;
+} | undefined) => S extends G ? {
+    text: string;
+    "text-with-head": string;
+    heading: string;
+}[G] : string;

package/build/esm/i18n/action-previews/index.js

@@ -0,0 +1,5 @@
+import { registerKeyset } from '../i18n';
+import en from './en.json';
+import ru from './ru.json';
+const KEYSET = 'action-previews';
+export const i18n = registerKeyset(KEYSET, { en, ru });

package/build/esm/i18n/action-previews/ru.json

@@ -0,0 +1,5 @@
+{
+  "text": "Это текст без заголовка. И заголовок, и \nтекст под ним можно выделять \nполужирным, курсивом, цветом, \nзачёркивать и подчёркивать. А ещё — \nдобавлять списки, таблицы, ссылки, \nформулы, якоря и блоки кода",
+  "text-with-head": "Это текст с заголовком. И заголовок, и \nтекст под ним можно выделять \nполужирным, курсивом, цветом, \nзачёркивать и подчёркивать. А ещё — \nдобавлять списки, таблицы, ссылки, \nформулы, якоря и блоки кода.",
+  "heading": "О тексте"
+}

package/build/esm/modules/toolbars/items.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import { icons } from '../../bundle/config/icons';
+import { HeadingPreview } from '../../bundle/config/previews/HeadingPreview';
+import { TextPreview } from '../../bundle/config/previews/TextPreview';
 import { MToolbarColors } from '../../bundle/toolbar/markup/MToolbarColors';
 import { MToolbarFilePopup } from '../../bundle/toolbar/markup/MToolbarFilePopup';
 import { MToolbarImagePopup } from '../../bundle/toolbar/markup/MToolbarImagePopup';
@@ -453,6 +455,7 @@ export const heading1ItemView = {
     title: i18n.bind(null, 'heading1'),
     icon: icons.h1,
     hotkey: f.toView(A.Heading1),
+    preview: React.createElement(HeadingPreview, { level: 1 }),
 };
 export const heading1ItemWysiwyg = {
     exec: (e) => e.actions.toH1.run(),
@@ -470,6 +473,7 @@ export const heading2ItemView = {
     title: i18n.bind(null, 'heading2'),
     icon: icons.h2,
     hotkey: f.toView(A.Heading2),
+    preview: React.createElement(HeadingPreview, { level: 2 }),
 };
 export const heading2ItemWysiwyg = {
     exec: (e) => e.actions.toH2.run(),
@@ -487,6 +491,7 @@ export const heading3ItemView = {
     title: i18n.bind(null, 'heading3'),
     icon: icons.h3,
     hotkey: f.toView(A.Heading3),
+    preview: React.createElement(HeadingPreview, { level: 3 }),
 };
 export const heading3ItemWysiwyg = {
     exec: (e) => e.actions.toH3.run(),
@@ -504,6 +509,7 @@ export const heading4ItemView = {
     title: i18n.bind(null, 'heading4'),
     icon: icons.h4,
     hotkey: f.toView(A.Heading4),
+    preview: React.createElement(HeadingPreview, { level: 4 }),
 };
 export const heading4ItemWysiwyg = {
     exec: (e) => e.actions.toH4.run(),
@@ -521,6 +527,7 @@ export const heading5ItemView = {
     title: i18n.bind(null, 'heading5'),
     icon: icons.h5,
     hotkey: f.toView(A.Heading5),
+    preview: React.createElement(HeadingPreview, { level: 5 }),
 };
 export const heading5ItemWysiwyg = {
     exec: (e) => e.actions.toH5.run(),
@@ -538,6 +545,7 @@ export const heading6ItemView = {
     title: i18n.bind(null, 'heading6'),
     icon: icons.h6,
     hotkey: f.toView(A.Heading6),
+    preview: React.createElement(HeadingPreview, { level: 6 }),
 };
 export const heading6ItemWysiwyg = {
     exec: (e) => e.actions.toH6.run(),
@@ -653,6 +661,7 @@ export const paragraphItemView = {
     icon: icons.text,
     hotkey: f.toView(A.Text),
     doNotActivateList: true,
+    preview: React.createElement(TextPreview, null),
 };
 export const paragraphItemWisywig = {
     exec: (e) => e.actions.toParagraph.run(),

package/build/esm/modules/toolbars/types.d.ts

@@ -22,6 +22,7 @@ export declare type ToolbarItemView<T extends ToolbarDataType = ToolbarDataType.
 } & (T extends ToolbarDataType.SingleButton ? {
     icon: ToolbarIconData;
     title: string | (() => string);
+    preview?: React.ReactNode;
 } : T extends ToolbarDataType.ListButton ? {
     withArrow?: boolean;
     icon: ToolbarIconData;

package/build/esm/toolbar/PreviewTooltip.css

@@ -0,0 +1,8 @@
+.g-md-preview-tooltip {
+  padding: var(--g-spacing-3);
+  border-radius: var(--g-border-radius-s);
+  background-color: var(--g-color-base-float-heavy);
+}
+.g-md-preview-tooltip .g-popup__content:first-child {
+  padding: 0 0 0 var(--g-spacing-2);
+}

package/build/esm/toolbar/PreviewTooltip.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './PreviewTooltip.css';
+declare type PreviewTooltipProps = {
+    preview?: React.ReactNode;
+    children: React.ReactElement;
+};
+export declare const PreviewTooltip: React.FC<PreviewTooltipProps>;
+export {};

package/build/esm/toolbar/PreviewTooltip.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Tooltip } from '@gravity-ui/uikit';
+import { cn } from '../classname';
+import { ToolbarTooltipDelay } from './const';
+import './PreviewTooltip.css';
+const b = cn('preview-tooltip');
+export const PreviewTooltip = ({ preview, children }) => {
+    return (React.createElement(Tooltip, { placement: "right", className: b(), contentClassName: b('content'), disabled: !preview, openDelay: ToolbarTooltipDelay.Open, closeDelay: ToolbarTooltipDelay.Close, content: preview }, children));
+};

package/build/esm/toolbar/ToolbarListButton.js

@@ -6,6 +6,7 @@ import { cn } from '../classname';
 import { i18n } from '../i18n/common';
 import { isFunction } from '../lodash';
 import { useBooleanState } from '../react-utils/hooks';
+import { PreviewTooltip } from './PreviewTooltip';
 import { ToolbarTooltipDelay } from './const';
 import './ToolbarListButton.css';
 const b = cn('toolbar-list-button');
@@ -46,7 +47,7 @@ export function ToolbarListButton({ className, editor, focus, onClick, icon, tit
             React.createElement(Menu, { size: "l", className: b('menu') }, data
                 .map((data) => {
                 var _a;
-                const { id, title, icon, hotkey, isActive, isEnable, exec, hint, hintWhenDisabled, disabledPopoverVisible = true, } = data;
+                const { id, title, icon, hotkey, isActive, isEnable, exec, hint, hintWhenDisabled, disabledPopoverVisible = true, preview, } = data;
                 const titleText = isFunction(title) ? title() : title;
                 const hintText = isFunction(hint) ? hint() : hint;
                 const disabled = !isEnable(editor);
@@ -56,24 +57,28 @@ export function ToolbarListButton({ className, editor, focus, onClick, icon, tit
                     : typeof hintWhenDisabled === 'function'
                         ? hintWhenDisabled()
                         : i18n('toolbar_action_disabled');
+                const handleClick = () => {
+                    hide();
+                    if (isPopupItem(data)) {
+                        setPopupItem(data);
+                    }
+                    else {
+                        setPopupItem(undefined);
+                        focus();
+                        exec(editor);
+                        onClick === null || onClick === void 0 ? void 0 : onClick(id);
+                    }
+                };
                 return (React.createElement(Popover, { className: b('action-disabled-popover'), tooltipContentClassName: b('action-disabled-tooltip'), content: hintWhenDisabledText, placement: 'left', disabled: hideHintWhenDisabled, key: id },
-                    React.createElement(Menu.Item, { key: id, active: isActive(editor), disabled: !isEnable(editor), onClick: () => {
-                            hide();
-                            if (isPopupItem(data)) {
-                                setPopupItem(data);
-                            }
-                            else {
-                                setPopupItem(undefined);
-                                focus();
-                                exec(editor);
-                                onClick === null || onClick === void 0 ? void 0 : onClick(id);
-                            }
-                        }, icon: React.createElement(Icon, { data: icon.data, size: (_a = icon.size) !== null && _a !== void 0 ? _a : 16 }), extraProps: { 'aria-label': titleText } },
-                        React.createElement("div", { className: b('item') },
-                            titleText,
-                            React.createElement("div", { className: b('extra') },
-                                hotkey && React.createElement(Hotkey, { value: hotkey }),
-                                hintText && (React.createElement(HelpPopover, { className: b('hint'), content: hintText })))))));
+                    React.createElement(PreviewTooltip, { preview: preview },
+                        React.createElement(Menu.Item, { key: id, active: isActive(editor), disabled: !isEnable(editor), onClick: handleClick, icon: React.createElement(Icon, { data: icon.data, size: (_a = icon.size) !== null && _a !== void 0 ? _a : 16 }), extraProps: {
+                                'aria-label': titleText,
+                            } },
+                            React.createElement("div", { className: b('item') },
+                                titleText,
+                                React.createElement("div", { className: b('extra') },
+                                    hotkey && React.createElement(Hotkey, { value: hotkey }),
+                                    hintText && (React.createElement(HelpPopover, { className: b('hint'), content: hintText }))))))));
             })
                 .filter(Boolean))),
         popupItem

package/build/esm/toolbar/types.d.ts

@@ -17,6 +17,7 @@ export declare type ToolbarItemData<E> = {
     title: string | (() => string);
     hint?: string | (() => string);
     hotkey?: HotkeyProps['value'];
+    preview?: React.ReactNode;
     /** @deprecated Use _hintWhenDisabled_ setting instead */
     disabledPopoverVisible?: boolean;
     /**

package/build/esm/version.js

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

package/build/styles.css

@@ -345,6 +345,14 @@
   display: flex;
   gap: 0 8px;
 }
+.g-md-preview-tooltip {
+  padding: var(--g-spacing-3);
+  border-radius: var(--g-border-radius-s);
+  background-color: var(--g-color-base-float-heavy);
+}
+.g-md-preview-tooltip .g-popup__content:first-child {
+  padding: 0 0 0 var(--g-spacing-2);
+}
 .g-md-toolbar {
   display: flex;
 }
@@ -583,6 +591,51 @@
 .g-md-base-tooltip__content__switch {
   margin-right: 28px;
 }
+:root {
+  --toolbar-item-preview-width: 144px;
+  --toolbar-item-preview-height: 104px;
+  --toolbar-item-preview-h1-margin: 10px 0 2px;
+  --toolbar-item-preview-h2-margin: 20px 0 4px;
+  --toolbar-item-preview-h3-margin: 24px 0 4px;
+  --toolbar-item-preview-h4-margin: 24px 0 4px;
+  --toolbar-item-preview-h5-margin: 26px 0 6px;
+  --toolbar-item-preview-h6-margin: 28px 0 6px;
+}
+
+.g-md-action-preview {
+  overflow: hidden;
+  width: var(--toolbar-item-preview-width);
+  height: var(--toolbar-item-preview-height);
+  white-space: pre;
+}
+.g-md-action-preview.yfm > *:not(h2):not(h3):not(h4):not(h5):not(h6):first-child {
+  /* stylelint-disable-next-line declaration-no-important */
+  margin: var(--toolbar-item-preview-h1-margin) !important;
+}
+.g-md-action-preview.yfm > h2 {
+  /* stylelint-disable-next-line declaration-no-important */
+  margin: var(--toolbar-item-preview-h2-margin) !important;
+}
+.g-md-action-preview.yfm > h3 {
+  /* stylelint-disable-next-line declaration-no-important */
+  margin: var(--toolbar-item-preview-h3-margin) !important;
+}
+.g-md-action-preview.yfm > h4 {
+  /* stylelint-disable-next-line declaration-no-important */
+  margin: var(--toolbar-item-preview-h4-margin) !important;
+}
+.g-md-action-preview.yfm > h5 {
+  /* stylelint-disable-next-line declaration-no-important */
+  margin: var(--toolbar-item-preview-h5-margin) !important;
+}
+.g-md-action-preview.yfm > h6 {
+  /* stylelint-disable-next-line declaration-no-important */
+  margin: var(--toolbar-item-preview-h6-margin) !important;
+}
+.g-md-action-preview__text-with-head {
+  margin-top: 0;
+  color: var(--g-color-text-hint);
+}
 .g-md-markdown-hints {
   min-width: 210px;
   line-height: var(--g-text-code-1-line-height);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/markdown-editor",
-  "version": "14.11.2",
+  "version": "14.12.0",
   "description": "Markdown wysiwyg and markup editor",
   "license": "MIT",
   "repository": {
@@ -199,7 +199,8 @@
     "react-error-boundary": "^3.1.4",
     "react-hotkeys-hook": "4.5.0",
     "react-use": "^17.3.2",
-    "tslib": "^2.3.1"
+    "tslib": "^2.3.1",
+    "uuid": "11.0.5"
   },
   "devDependencies": {
     "@diplodoc/cut-extension": "^0.6.1",