@gravity-ui/markdown-editor 14.11.2 → 14.12.0

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

@@ -9,6 +9,7 @@ const classname_1 = require("../../../classname");
 const suggest_1 = require("../../../i18n/suggest");
 const lodash_1 = require("../../../lodash");
 const ErrorBoundary_1 = require("../../../react-utils/ErrorBoundary");
+const PreviewTooltip_1 = require("../../../toolbar/PreviewTooltip");
 const b = (0, classname_1.cn)('command-menu');
 const placement = ['bottom-start', 'top-start', 'bottom-end', 'top-end'];
 const ITEM_HEIGHT = 28; // px
@@ -27,16 +28,17 @@ const CommandMenuComponent = ({ anchor, currentIndex, items, onClick, onEnterKey
             react_1.default.createElement(uikit_1.List, { virtualized: true, items: items, sortable: false, filterable: false, emptyPlaceholder: (0, suggest_1.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') }))));
 };
 exports.CommandMenuComponent = CommandMenuComponent;
-function renderItem({ id, title, icon, hotkey, hint }) {
+function renderItem({ id, title, icon, hotkey, hint, preview }) {
     const titleText = (0, lodash_1.isFunction)(title) ? title() : title;
     const hintText = (0, lodash_1.isFunction)(hint) ? hint() : hint;
-    return (react_1.default.createElement("div", { key: id, className: b('item', { id }) },
-        react_1.default.createElement(uikit_1.Icon, { data: icon.data, size: 20, className: b('item-icon') }),
-        react_1.default.createElement("div", { className: b('item-body') },
-            react_1.default.createElement("span", { className: b('item-title') }, titleText),
-            react_1.default.createElement("div", { className: b('item-extra') },
-                hotkey && react_1.default.createElement(uikit_1.Hotkey, { value: hotkey, className: b('item-hotkey') }),
-                hintText && react_1.default.createElement(components_1.HelpPopover, { className: b('item- hint'), content: hintText })))));
+    return (react_1.default.createElement(PreviewTooltip_1.PreviewTooltip, { preview: preview },
+        react_1.default.createElement("div", { key: id, className: b('item', { id }) },
+            react_1.default.createElement(uikit_1.Icon, { data: icon.data, size: 20, className: b('item-icon') }),
+            react_1.default.createElement("div", { className: b('item-body') },
+                react_1.default.createElement("span", { className: b('item-title') }, titleText),
+                react_1.default.createElement("div", { className: b('item-extra') },
+                    hotkey && react_1.default.createElement(uikit_1.Hotkey, { value: hotkey, className: b('item-hotkey') }),
+                    hintText && react_1.default.createElement(components_1.HelpPopover, { className: b('item-hint'), content: hintText }))))));
 }
 function render(props) {
     return (react_1.default.createElement(ErrorBoundary_1.ErrorLoggerBoundary, null,

package/build/cjs/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/cjs/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/cjs/i18n/action-previews/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.i18n = void 0;
+const tslib_1 = require("tslib");
+const i18n_1 = require("../i18n");
+const en_json_1 = tslib_1.__importDefault(require("./en.json"));
+const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
+const KEYSET = 'action-previews';
+exports.i18n = (0, i18n_1.registerKeyset)(KEYSET, { en: en_json_1.default, ru: ru_json_1.default });

package/build/cjs/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/cjs/modules/toolbars/items.js

@@ -6,6 +6,8 @@ exports.mathListItemView = exports.codeBlocksListItemView = exports.moveListItem
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const icons_1 = require("../../bundle/config/icons");
+const HeadingPreview_1 = require("../../bundle/config/previews/HeadingPreview");
+const TextPreview_1 = require("../../bundle/config/previews/TextPreview");
 const MToolbarColors_1 = require("../../bundle/toolbar/markup/MToolbarColors");
 const MToolbarFilePopup_1 = require("../../bundle/toolbar/markup/MToolbarFilePopup");
 const MToolbarImagePopup_1 = require("../../bundle/toolbar/markup/MToolbarImagePopup");
@@ -459,6 +461,7 @@ exports.heading1ItemView = {
     title: menubar_1.i18n.bind(null, 'heading1'),
     icon: icons_1.icons.h1,
     hotkey: shortcuts_1.formatter.toView(shortcuts_1.Action.Heading1),
+    preview: react_1.default.createElement(HeadingPreview_1.HeadingPreview, { level: 1 }),
 };
 exports.heading1ItemWysiwyg = {
     exec: (e) => e.actions.toH1.run(),
@@ -476,6 +479,7 @@ exports.heading2ItemView = {
     title: menubar_1.i18n.bind(null, 'heading2'),
     icon: icons_1.icons.h2,
     hotkey: shortcuts_1.formatter.toView(shortcuts_1.Action.Heading2),
+    preview: react_1.default.createElement(HeadingPreview_1.HeadingPreview, { level: 2 }),
 };
 exports.heading2ItemWysiwyg = {
     exec: (e) => e.actions.toH2.run(),
@@ -493,6 +497,7 @@ exports.heading3ItemView = {
     title: menubar_1.i18n.bind(null, 'heading3'),
     icon: icons_1.icons.h3,
     hotkey: shortcuts_1.formatter.toView(shortcuts_1.Action.Heading3),
+    preview: react_1.default.createElement(HeadingPreview_1.HeadingPreview, { level: 3 }),
 };
 exports.heading3ItemWysiwyg = {
     exec: (e) => e.actions.toH3.run(),
@@ -510,6 +515,7 @@ exports.heading4ItemView = {
     title: menubar_1.i18n.bind(null, 'heading4'),
     icon: icons_1.icons.h4,
     hotkey: shortcuts_1.formatter.toView(shortcuts_1.Action.Heading4),
+    preview: react_1.default.createElement(HeadingPreview_1.HeadingPreview, { level: 4 }),
 };
 exports.heading4ItemWysiwyg = {
     exec: (e) => e.actions.toH4.run(),
@@ -527,6 +533,7 @@ exports.heading5ItemView = {
     title: menubar_1.i18n.bind(null, 'heading5'),
     icon: icons_1.icons.h5,
     hotkey: shortcuts_1.formatter.toView(shortcuts_1.Action.Heading5),
+    preview: react_1.default.createElement(HeadingPreview_1.HeadingPreview, { level: 5 }),
 };
 exports.heading5ItemWysiwyg = {
     exec: (e) => e.actions.toH5.run(),
@@ -544,6 +551,7 @@ exports.heading6ItemView = {
     title: menubar_1.i18n.bind(null, 'heading6'),
     icon: icons_1.icons.h6,
     hotkey: shortcuts_1.formatter.toView(shortcuts_1.Action.Heading6),
+    preview: react_1.default.createElement(HeadingPreview_1.HeadingPreview, { level: 6 }),
 };
 exports.heading6ItemWysiwyg = {
     exec: (e) => e.actions.toH6.run(),
@@ -659,6 +667,7 @@ exports.paragraphItemView = {
     icon: icons_1.icons.text,
     hotkey: shortcuts_1.formatter.toView(shortcuts_1.Action.Text),
     doNotActivateList: true,
+    preview: react_1.default.createElement(TextPreview_1.TextPreview, null),
 };
 exports.paragraphItemWisywig = {
     exec: (e) => e.actions.toParagraph.run(),

package/build/cjs/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/cjs/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/cjs/toolbar/PreviewTooltip.d.ts

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

package/build/cjs/toolbar/PreviewTooltip.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PreviewTooltip = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const classname_1 = require("../classname");
+const const_1 = require("./const");
+const b = (0, classname_1.cn)('preview-tooltip');
+const PreviewTooltip = ({ preview, children }) => {
+    return (react_1.default.createElement(uikit_1.Tooltip, { placement: "right", className: b(), contentClassName: b('content'), disabled: !preview, openDelay: const_1.ToolbarTooltipDelay.Open, closeDelay: const_1.ToolbarTooltipDelay.Close, content: preview }, children));
+};
+exports.PreviewTooltip = PreviewTooltip;

package/build/cjs/toolbar/ToolbarListButton.js

@@ -10,6 +10,7 @@ const classname_1 = require("../classname");
 const common_1 = require("../i18n/common");
 const lodash_1 = require("../lodash");
 const hooks_1 = require("../react-utils/hooks");
+const PreviewTooltip_1 = require("./PreviewTooltip");
 const const_1 = require("./const");
 const b = (0, classname_1.cn)('toolbar-list-button');
 function ToolbarListButton({ className, editor, focus, onClick, icon, title, withArrow, data, alwaysActive, }) {
@@ -49,7 +50,7 @@ function ToolbarListButton({ className, editor, focus, onClick, icon, title, wit
             react_1.default.createElement(uikit_1.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 = (0, lodash_1.isFunction)(title) ? title() : title;
                 const hintText = (0, lodash_1.isFunction)(hint) ? hint() : hint;
                 const disabled = !isEnable(editor);
@@ -59,24 +60,28 @@ function ToolbarListButton({ className, editor, focus, onClick, icon, title, wit
                     : typeof hintWhenDisabled === 'function'
                         ? hintWhenDisabled()
                         : (0, common_1.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_1.default.createElement(uikit_1.Popover, { className: b('action-disabled-popover'), tooltipContentClassName: b('action-disabled-tooltip'), content: hintWhenDisabledText, placement: 'left', disabled: hideHintWhenDisabled, key: id },
-                    react_1.default.createElement(uikit_1.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_1.default.createElement(uikit_1.Icon, { data: icon.data, size: (_a = icon.size) !== null && _a !== void 0 ? _a : 16 }), extraProps: { 'aria-label': titleText } },
-                        react_1.default.createElement("div", { className: b('item') },
-                            titleText,
-                            react_1.default.createElement("div", { className: b('extra') },
-                                hotkey && react_1.default.createElement(uikit_1.Hotkey, { value: hotkey }),
-                                hintText && (react_1.default.createElement(components_1.HelpPopover, { className: b('hint'), content: hintText })))))));
+                    react_1.default.createElement(PreviewTooltip_1.PreviewTooltip, { preview: preview },
+                        react_1.default.createElement(uikit_1.Menu.Item, { key: id, active: isActive(editor), disabled: !isEnable(editor), onClick: handleClick, icon: react_1.default.createElement(uikit_1.Icon, { data: icon.data, size: (_a = icon.size) !== null && _a !== void 0 ? _a : 16 }), extraProps: {
+                                'aria-label': titleText,
+                            } },
+                            react_1.default.createElement("div", { className: b('item') },
+                                titleText,
+                                react_1.default.createElement("div", { className: b('extra') },
+                                    hotkey && react_1.default.createElement(uikit_1.Hotkey, { value: hotkey }),
+                                    hintText && (react_1.default.createElement(components_1.HelpPopover, { className: b('hint'), content: hintText }))))))));
             })
                 .filter(Boolean))),
         popupItem

package/build/cjs/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/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 '14.11.2' !== 'undefined' ? '14.11.2' : 'unknown';
+exports.VERSION = typeof '14.12.0' !== 'undefined' ? '14.12.0' : 'unknown';

package/build/esm/bundle/Editor.js

@@ -1,4 +1,4 @@
-var _EditorImpl_markup, _EditorImpl_editorMode, _EditorImpl_toolbarVisible, _EditorImpl_splitModeEnabled, _EditorImpl_splitMode, _EditorImpl_renderPreview, _EditorImpl_wysiwygEditor, _EditorImpl_markupEditor, _EditorImpl_markupConfig, _EditorImpl_escapeConfig, _EditorImpl_mdOptions, _EditorImpl_pmTransformers, _EditorImpl_preserveEmptyRows, _EditorImpl_preset, _EditorImpl_extensions, _EditorImpl_renderStorage, _EditorImpl_fileUploadHandler, _EditorImpl_parseInsertedUrlAsImage, _EditorImpl_needToSetDimensionsForUploadedImages, _EditorImpl_enableNewImageSizeCalculation, _EditorImpl_directiveSyntax, _EditorImpl_prepareRawMarkup, _EditorImpl_beforeEditorModeChange;
+var _EditorImpl_markup, _EditorImpl_editorMode, _EditorImpl_toolbarVisible, _EditorImpl_splitModeEnabled, _EditorImpl_splitMode, _EditorImpl_renderPreview, _EditorImpl_wysiwygEditor, _EditorImpl_markupEditor, _EditorImpl_markupConfig, _EditorImpl_escapeConfig, _EditorImpl_mdOptions, _EditorImpl_pmTransformers, _EditorImpl_preserveEmptyRows, _EditorImpl_modifiers, _EditorImpl_preset, _EditorImpl_extensions, _EditorImpl_renderStorage, _EditorImpl_fileUploadHandler, _EditorImpl_parseInsertedUrlAsImage, _EditorImpl_needToSetDimensionsForUploadedImages, _EditorImpl_enableNewImageSizeCalculation, _EditorImpl_directiveSyntax, _EditorImpl_prepareRawMarkup, _EditorImpl_beforeEditorModeChange;
 import { __classPrivateFieldGet, __classPrivateFieldSet, __rest } from "tslib";
 import { EditorView as CMEditorView } from '@codemirror/view';
 import { TextSelection } from 'prosemirror-state';
@@ -9,6 +9,8 @@ import { createCodemirror } from '../markup';
 import { getAutocompleteConfig } from '../markup/codemirror/autocomplete';
 import { Editor as MarkupEditor } from '../markup/editor';
 import { SafeEventEmitter } from '../utils';
+import { MarkupManager } from './MarkupManager';
+import { createDynamicModifiers } from './config/dynamicModifiers';
 /** @internal */
 export class EditorImpl extends SafeEventEmitter {
     constructor(opts) {
@@ -27,6 +29,7 @@ export class EditorImpl extends SafeEventEmitter {
         _EditorImpl_mdOptions.set(this, void 0);
         _EditorImpl_pmTransformers.set(this, []);
         _EditorImpl_preserveEmptyRows.set(this, void 0);
+        _EditorImpl_modifiers.set(this, void 0);
         _EditorImpl_preset.set(this, void 0);
         _EditorImpl_extensions.set(this, void 0);
         _EditorImpl_renderStorage.set(this, void 0);
@@ -39,6 +42,9 @@ export class EditorImpl extends SafeEventEmitter {
         _EditorImpl_beforeEditorModeChange.set(this, void 0);
         this.getValue = () => this.currentEditor.getValue();
         const { md = {}, initial = {}, handlers = {}, experimental = {}, markupConfig = {}, wysiwygConfig = {}, } = opts;
+        __classPrivateFieldSet(this, _EditorImpl_modifiers, experimental.preserveMarkupFormatting
+            ? createDynamicModifiers(new MarkupManager())
+            : undefined, "f");
         __classPrivateFieldSet(this, _EditorImpl_editorMode, (_a = initial.mode) !== null && _a !== void 0 ? _a : 'wysiwyg', "f");
         __classPrivateFieldSet(this, _EditorImpl_toolbarVisible, (_b = initial.toolbarVisible) !== null && _b !== void 0 ? _b : true, "f");
         __classPrivateFieldSet(this, _EditorImpl_splitMode, (_c = (markupConfig.renderPreview && markupConfig.splitMode)) !== null && _c !== void 0 ? _c : false, "f");
@@ -149,6 +155,7 @@ export class EditorImpl extends SafeEventEmitter {
                 initialContent: __classPrivateFieldGet(this, _EditorImpl_markup, "f"),
                 extensions: __classPrivateFieldGet(this, _EditorImpl_extensions, "f"),
                 pmTransformers: __classPrivateFieldGet(this, _EditorImpl_pmTransformers, "f"),
+                modifiers: __classPrivateFieldGet(this, _EditorImpl_modifiers, "f"),
                 allowHTML: __classPrivateFieldGet(this, _EditorImpl_mdOptions, "f").html,
                 linkify: __classPrivateFieldGet(this, _EditorImpl_mdOptions, "f").linkify,
                 linkifyTlds: __classPrivateFieldGet(this, _EditorImpl_mdOptions, "f").linkifyTlds,
@@ -326,7 +333,7 @@ export class EditorImpl extends SafeEventEmitter {
         return (serializedEditorMarkup === null || serializedEditorMarkup === void 0 ? void 0 : serializedEditorMarkup.trim()) !== wysiwygValue.trim();
     }
 }
-_EditorImpl_markup = new WeakMap(), _EditorImpl_editorMode = new WeakMap(), _EditorImpl_toolbarVisible = new WeakMap(), _EditorImpl_splitModeEnabled = new WeakMap(), _EditorImpl_splitMode = new WeakMap(), _EditorImpl_renderPreview = new WeakMap(), _EditorImpl_wysiwygEditor = new WeakMap(), _EditorImpl_markupEditor = new WeakMap(), _EditorImpl_markupConfig = new WeakMap(), _EditorImpl_escapeConfig = new WeakMap(), _EditorImpl_mdOptions = new WeakMap(), _EditorImpl_pmTransformers = new WeakMap(), _EditorImpl_preserveEmptyRows = new WeakMap(), _EditorImpl_preset = new WeakMap(), _EditorImpl_extensions = new WeakMap(), _EditorImpl_renderStorage = new WeakMap(), _EditorImpl_fileUploadHandler = new WeakMap(), _EditorImpl_parseInsertedUrlAsImage = new WeakMap(), _EditorImpl_needToSetDimensionsForUploadedImages = new WeakMap(), _EditorImpl_enableNewImageSizeCalculation = new WeakMap(), _EditorImpl_directiveSyntax = new WeakMap(), _EditorImpl_prepareRawMarkup = new WeakMap(), _EditorImpl_beforeEditorModeChange = new WeakMap();
+_EditorImpl_markup = new WeakMap(), _EditorImpl_editorMode = new WeakMap(), _EditorImpl_toolbarVisible = new WeakMap(), _EditorImpl_splitModeEnabled = new WeakMap(), _EditorImpl_splitMode = new WeakMap(), _EditorImpl_renderPreview = new WeakMap(), _EditorImpl_wysiwygEditor = new WeakMap(), _EditorImpl_markupEditor = new WeakMap(), _EditorImpl_markupConfig = new WeakMap(), _EditorImpl_escapeConfig = new WeakMap(), _EditorImpl_mdOptions = new WeakMap(), _EditorImpl_pmTransformers = new WeakMap(), _EditorImpl_preserveEmptyRows = new WeakMap(), _EditorImpl_modifiers = new WeakMap(), _EditorImpl_preset = new WeakMap(), _EditorImpl_extensions = new WeakMap(), _EditorImpl_renderStorage = new WeakMap(), _EditorImpl_fileUploadHandler = new WeakMap(), _EditorImpl_parseInsertedUrlAsImage = new WeakMap(), _EditorImpl_needToSetDimensionsForUploadedImages = new WeakMap(), _EditorImpl_enableNewImageSizeCalculation = new WeakMap(), _EditorImpl_directiveSyntax = new WeakMap(), _EditorImpl_prepareRawMarkup = new WeakMap(), _EditorImpl_beforeEditorModeChange = new WeakMap();
 function getTopOffset(elem) {
     const TOOLBAR_HEIGHT = 36; //px
     const TOOLBAR_BOTTOM_OFFSET = 8; // px

package/build/esm/bundle/MarkupManager.d.ts

@@ -0,0 +1,54 @@
+import { Node } from 'prosemirror-model';
+import { SafeEventEmitter } from '../utils';
+export interface IMarkupManager {
+    setMarkup(id: string, rawMarkup: string): void;
+    setNode(id: string, node: Node): void;
+    getMarkup(id: string): string | null;
+    getNode(id: string): Node | null;
+    reset(): void;
+    on<K extends keyof Events>(event: K, listener: (value: Events[K]) => void): void;
+}
+export interface Logger {
+    log(message: string): void;
+    error(message: string): void;
+}
+interface Events {
+    markupChanged: {
+        id: string;
+        rawMarkup: string;
+    };
+    nodeChanged: {
+        id: string;
+        node: Node;
+    };
+    reset: {};
+}
+export declare class MarkupManager extends SafeEventEmitter<Events> implements IMarkupManager {
+    private _markups;
+    private _nodes;
+    private _namespace;
+    private readonly logger?;
+    constructor(logger?: Logger);
+    /**
+     * Set raw markup for a specific id
+     */
+    setMarkup(id: string, rawMarkup: string): void;
+    /**
+     * Set a node for a specific id
+     */
+    setNode(id: string, node: Node): void;
+    /**
+     * Get raw markup for a specific id
+     */
+    getMarkup(id: string): string | null;
+    /**
+     * Get a node for a specific id
+     */
+    getNode(id: string): Node | null;
+    getNamespace(): string;
+    /**
+     * Reset the stored markups and nodes
+     */
+    reset(): void;
+}
+export {};

package/build/esm/bundle/MarkupManager.js

@@ -0,0 +1,64 @@
+import { v4 } from 'uuid';
+import { SafeEventEmitter } from '../utils';
+export class MarkupManager extends SafeEventEmitter {
+    constructor(logger) {
+        super();
+        this._markups = new Map();
+        this._nodes = new Map();
+        this.logger = logger;
+        this._namespace = v4();
+    }
+    /**
+     * Set raw markup for a specific id
+     */
+    setMarkup(id, rawMarkup) {
+        var _a, _b;
+        if (typeof rawMarkup !== 'string') {
+            (_a = this.logger) === null || _a === void 0 ? void 0 : _a.error('[MarkupManager] rawMarkup must be a string');
+            return;
+        }
+        this._markups.set(id, rawMarkup);
+        this.emit('markupChanged', { id, rawMarkup });
+        (_b = this.logger) === null || _b === void 0 ? void 0 : _b.log(`[MarkupManager] Raw markup for ID ${id} set successfully`);
+    }
+    /**
+     * Set a node for a specific id
+     */
+    setNode(id, node) {
+        var _a, _b;
+        if (!node) {
+            (_a = this.logger) === null || _a === void 0 ? void 0 : _a.error('[MarkupManager] Node must be a valid ProseMirror Node');
+            return;
+        }
+        this._nodes.set(id, node);
+        this.emit('nodeChanged', { id, node });
+        (_b = this.logger) === null || _b === void 0 ? void 0 : _b.log(`[MarkupManager] Node for ID ${id} set successfully`);
+    }
+    /**
+     * Get raw markup for a specific id
+     */
+    getMarkup(id) {
+        var _a;
+        return (_a = this._markups.get(id)) !== null && _a !== void 0 ? _a : null;
+    }
+    /**
+     * Get a node for a specific id
+     */
+    getNode(id) {
+        var _a;
+        return (_a = this._nodes.get(id)) !== null && _a !== void 0 ? _a : null;
+    }
+    getNamespace() {
+        return this._namespace;
+    }
+    /**
+     * Reset the stored markups and nodes
+     */
+    reset() {
+        var _a;
+        this._markups.clear();
+        this._nodes.clear();
+        this.emit('reset', {});
+        (_a = this.logger) === null || _a === void 0 ? void 0 : _a.log('[MarkupManager] MarkupManager has been reset');
+    }
+}

package/build/esm/bundle/config/dynamicModifiers.d.ts

@@ -0,0 +1,3 @@
+import { DynamicModifiers } from '../../core/types/dynamicModifiers';
+import { MarkupManager } from '../MarkupManager';
+export declare function createDynamicModifiers(markupManager: MarkupManager): DynamicModifiers[];

package/build/esm/bundle/config/dynamicModifiers.js

@@ -0,0 +1,72 @@
+import { v5 } from 'uuid';
+const YFM_TABLE_TOKEN_ATTR = 'data-token-id';
+const YFM_TABLE_NODE_ATTR = 'data-node-id';
+const PARENTS_WITH_AFFECT = ['blockquote', 'yfm_tabs'];
+export function createDynamicModifiers(markupManager) {
+    return [
+        {
+            type: 'parserToken',
+            tokenName: 'yfm_table',
+            /**
+             * - Assigns a unique `data-token-id` to each token.
+             * - Captures and stores the raw Markdown using `MarkupManager`.
+             */
+            process: (token, _, rawMarkup) => {
+                const { map } = token;
+                if (map) {
+                    const content = rawMarkup.split('\n').slice(map[0], map[1]).join('\n');
+                    const tokenId = v5(content, markupManager.getNamespace());
+                    token.attrSet(YFM_TABLE_TOKEN_ATTR, tokenId);
+                    markupManager.setMarkup(tokenId, content);
+                }
+                return token;
+            },
+        },
+        {
+            type: 'parserNodeAttrs',
+            tokenName: 'yfm_table',
+            /**
+             * - Links the token to its corresponding node via `data-node-id`.
+             */
+            process: (token, attrs) => (Object.assign(Object.assign({}, attrs), { [YFM_TABLE_NODE_ATTR]: token.attrGet(YFM_TABLE_TOKEN_ATTR) })),
+        },
+        {
+            type: 'parserNode',
+            nodeName: 'yfm_table',
+            process: (node) => {
+                const nodeId = node.attrs[YFM_TABLE_NODE_ATTR];
+                if (nodeId) {
+                    markupManager.setNode(nodeId, node);
+                }
+                return node;
+            },
+        },
+        {
+            type: 'serializerNode',
+            nodeName: 'yfm_table',
+            /**
+             * - Retrieves the original Markdown using the `data-node-id` attribute.
+             * - Uses the original Markdown if the node matches the saved version.
+             * - Falls back to schema-based rendering if the node structure, attributes, or parent elements affect it.
+             */
+            process: (state, node, parent, index, callback) => {
+                var _a;
+                const nodeId = node.attrs[YFM_TABLE_NODE_ATTR];
+                const savedNode = markupManager.getNode(nodeId);
+                if (!PARENTS_WITH_AFFECT.includes((_a = parent === null || parent === void 0 ? void 0 : parent.type) === null || _a === void 0 ? void 0 : _a.name) && (savedNode === null || savedNode === void 0 ? void 0 : savedNode.eq(node))) {
+                    state.write(markupManager.getMarkup(nodeId) + '\n');
+                    return;
+                }
+                callback === null || callback === void 0 ? void 0 : callback(state, node, parent, index);
+            },
+        },
+        {
+            type: 'schemaNodeSpec',
+            nodeName: 'yfm_table',
+            /**
+             * - Adds the `data-node-id` attribute to the list of allowed attributes.
+             */
+            allowedAttrs: [YFM_TABLE_NODE_ATTR],
+        },
+    ];
+}

package/build/esm/bundle/config/markup.js

@@ -2,6 +2,7 @@
  * @deprecated This file is deprecated. Use ToolbarsPreset instead.
  */
 import React from 'react';
+import { HeadingPreview } from '../../bundle/config/previews/HeadingPreview';
 import { i18n } from '../../i18n/menubar';
 import { insertHRule, insertLink, insertMermaidDiagram, insertYfmHtmlBlock, insertYfmTable, insertYfmTabs, liftListItem, redo, redoDepth, sinkListItem, toBulletList, toH1, toH2, toH3, toH4, toH5, toH6, toOrderedList, toggleBold, toggleItalic, toggleMarked, toggleMonospace, toggleStrikethrough, toggleUnderline, undo, undoDepth, wrapToBlockquote, wrapToCheckbox, wrapToCodeBlock, wrapToInlineCode, wrapToMathBlock, wrapToMathInline, wrapToYfmCut, wrapToYfmNote, } from '../../markup/commands';
 import { Action as A, formatter as f } from '../../shortcuts';
@@ -276,6 +277,7 @@ export const mHeading1ItemData = {
     exec: (e) => toH1(e.cm),
     isActive: inactive,
     isEnable: enable,
+    preview: React.createElement(HeadingPreview, { level: 1 }),
 };
 export const mHeading2ItemData = {
     id: ActionName.heading2,
@@ -285,6 +287,7 @@ export const mHeading2ItemData = {
     exec: (e) => toH2(e.cm),
     isActive: inactive,
     isEnable: enable,
+    preview: React.createElement(HeadingPreview, { level: 2 }),
 };
 export const mHeading3ItemData = {
     id: ActionName.heading3,
@@ -294,6 +297,7 @@ export const mHeading3ItemData = {
     exec: (e) => toH3(e.cm),
     isActive: inactive,
     isEnable: enable,
+    preview: React.createElement(HeadingPreview, { level: 3 }),
 };
 export const mHeading4ItemData = {
     id: ActionName.heading4,
@@ -303,6 +307,7 @@ export const mHeading4ItemData = {
     exec: (e) => toH4(e.cm),
     isActive: inactive,
     isEnable: enable,
+    preview: React.createElement(HeadingPreview, { level: 4 }),
 };
 export const mHeading5ItemData = {
     id: ActionName.heading5,
@@ -312,6 +317,7 @@ export const mHeading5ItemData = {
     exec: (e) => toH5(e.cm),
     isActive: inactive,
     isEnable: enable,
+    preview: React.createElement(HeadingPreview, { level: 5 }),
 };
 export const mHeading6ItemData = {
     id: ActionName.heading6,
@@ -321,6 +327,7 @@ export const mHeading6ItemData = {
     exec: (e) => toH6(e.cm),
     isActive: inactive,
     isEnable: enable,
+    preview: React.createElement(HeadingPreview, { level: 6 }),
 };
 export const mBulletListItemData = {
     id: ActionName.bulletList,

package/build/esm/bundle/config/previews/ActionPreview.css

@@ -0,0 +1,45 @@
+: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);
+}

package/build/esm/bundle/config/previews/ActionPreview.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './ActionPreview.css';
+export declare const ActionPreview: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;

package/build/esm/bundle/config/previews/ActionPreview.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { cn } from '../../../classname';
+import './ActionPreview.css';
+const b = cn('action-preview');
+export const ActionPreview = ({ children }) => {
+    return React.createElement("div", { className: b(null, ['yfm']) }, children);
+};

package/build/esm/bundle/config/previews/HeadingPreview.d.ts

@@ -0,0 +1,6 @@
+import './ActionPreview.css';
+declare type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export declare const HeadingPreview: ({ level }: {
+    level: HeadingLevel;
+}) => JSX.Element;
+export {};

package/build/esm/bundle/config/previews/HeadingPreview.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { cn } from '../../../classname';
+import { i18n } from '../../../i18n/action-previews';
+import { ActionPreview } from './ActionPreview';
+import './ActionPreview.css';
+const b = cn('action-preview');
+export const HeadingPreview = ({ level }) => {
+    const Heading = `h${level}`;
+    return (React.createElement(ActionPreview, null,
+        React.createElement(Heading, null, i18n('heading')),
+        React.createElement("p", { className: b('text-with-head') }, i18n('text-with-head'))));
+};