@gravity-ui/markdown-editor 14.11.1 → 14.12.0

package/build/cjs/bundle/Editor.js

@@ -1,5 +1,5 @@
 "use strict";
-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;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditorImpl = void 0;
 const tslib_1 = require("tslib");
@@ -12,6 +12,8 @@ const markup_1 = require("../markup");
 const autocomplete_1 = require("../markup/codemirror/autocomplete");
 const editor_1 = require("../markup/editor");
 const utils_1 = require("../utils");
+const MarkupManager_1 = require("./MarkupManager");
+const dynamicModifiers_1 = require("./config/dynamicModifiers");
 /** @internal */
 class EditorImpl extends utils_1.SafeEventEmitter {
     constructor(opts) {
@@ -30,6 +32,7 @@ class EditorImpl extends utils_1.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);
@@ -42,6 +45,9 @@ class EditorImpl extends utils_1.SafeEventEmitter {
         _EditorImpl_beforeEditorModeChange.set(this, void 0);
         this.getValue = () => this.currentEditor.getValue();
         const { md = {}, initial = {}, handlers = {}, experimental = {}, markupConfig = {}, wysiwygConfig = {}, } = opts;
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_modifiers, experimental.preserveMarkupFormatting
+            ? (0, dynamicModifiers_1.createDynamicModifiers)(new MarkupManager_1.MarkupManager())
+            : undefined, "f");
         tslib_1.__classPrivateFieldSet(this, _EditorImpl_editorMode, (_a = initial.mode) !== null && _a !== void 0 ? _a : 'wysiwyg', "f");
         tslib_1.__classPrivateFieldSet(this, _EditorImpl_toolbarVisible, (_b = initial.toolbarVisible) !== null && _b !== void 0 ? _b : true, "f");
         tslib_1.__classPrivateFieldSet(this, _EditorImpl_splitMode, (_c = (markupConfig.renderPreview && markupConfig.splitMode)) !== null && _c !== void 0 ? _c : false, "f");
@@ -152,6 +158,7 @@ class EditorImpl extends utils_1.SafeEventEmitter {
                 initialContent: tslib_1.__classPrivateFieldGet(this, _EditorImpl_markup, "f"),
                 extensions: tslib_1.__classPrivateFieldGet(this, _EditorImpl_extensions, "f"),
                 pmTransformers: tslib_1.__classPrivateFieldGet(this, _EditorImpl_pmTransformers, "f"),
+                modifiers: tslib_1.__classPrivateFieldGet(this, _EditorImpl_modifiers, "f"),
                 allowHTML: tslib_1.__classPrivateFieldGet(this, _EditorImpl_mdOptions, "f").html,
                 linkify: tslib_1.__classPrivateFieldGet(this, _EditorImpl_mdOptions, "f").linkify,
                 linkifyTlds: tslib_1.__classPrivateFieldGet(this, _EditorImpl_mdOptions, "f").linkifyTlds,
@@ -330,7 +337,7 @@ class EditorImpl extends utils_1.SafeEventEmitter {
     }
 }
 exports.EditorImpl = EditorImpl;
-_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/cjs/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/cjs/bundle/MarkupManager.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MarkupManager = void 0;
+const uuid_1 = require("uuid");
+const utils_1 = require("../utils");
+class MarkupManager extends utils_1.SafeEventEmitter {
+    constructor(logger) {
+        super();
+        this._markups = new Map();
+        this._nodes = new Map();
+        this.logger = logger;
+        this._namespace = (0, uuid_1.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');
+    }
+}
+exports.MarkupManager = MarkupManager;

package/build/cjs/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/cjs/bundle/config/dynamicModifiers.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createDynamicModifiers = void 0;
+const uuid_1 = require("uuid");
+const YFM_TABLE_TOKEN_ATTR = 'data-token-id';
+const YFM_TABLE_NODE_ATTR = 'data-node-id';
+const PARENTS_WITH_AFFECT = ['blockquote', 'yfm_tabs'];
+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 = (0, uuid_1.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],
+        },
+    ];
+}
+exports.createDynamicModifiers = createDynamicModifiers;

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

@@ -7,6 +7,7 @@ const tslib_1 = require("tslib");
  * @deprecated This file is deprecated. Use ToolbarsPreset instead.
  */
 const react_1 = tslib_1.__importDefault(require("react"));
+const HeadingPreview_1 = require("../../bundle/config/previews/HeadingPreview");
 const menubar_1 = require("../../i18n/menubar");
 const commands_1 = require("../../markup/commands");
 const shortcuts_1 = require("../../shortcuts");
@@ -281,6 +282,7 @@ exports.mHeading1ItemData = {
     exec: (e) => (0, commands_1.toH1)(e.cm),
     isActive: inactive,
     isEnable: enable,
+    preview: react_1.default.createElement(HeadingPreview_1.HeadingPreview, { level: 1 }),
 };
 exports.mHeading2ItemData = {
     id: action_names_1.ActionName.heading2,
@@ -290,6 +292,7 @@ exports.mHeading2ItemData = {
     exec: (e) => (0, commands_1.toH2)(e.cm),
     isActive: inactive,
     isEnable: enable,
+    preview: react_1.default.createElement(HeadingPreview_1.HeadingPreview, { level: 2 }),
 };
 exports.mHeading3ItemData = {
     id: action_names_1.ActionName.heading3,
@@ -299,6 +302,7 @@ exports.mHeading3ItemData = {
     exec: (e) => (0, commands_1.toH3)(e.cm),
     isActive: inactive,
     isEnable: enable,
+    preview: react_1.default.createElement(HeadingPreview_1.HeadingPreview, { level: 3 }),
 };
 exports.mHeading4ItemData = {
     id: action_names_1.ActionName.heading4,
@@ -308,6 +312,7 @@ exports.mHeading4ItemData = {
     exec: (e) => (0, commands_1.toH4)(e.cm),
     isActive: inactive,
     isEnable: enable,
+    preview: react_1.default.createElement(HeadingPreview_1.HeadingPreview, { level: 4 }),
 };
 exports.mHeading5ItemData = {
     id: action_names_1.ActionName.heading5,
@@ -317,6 +322,7 @@ exports.mHeading5ItemData = {
     exec: (e) => (0, commands_1.toH5)(e.cm),
     isActive: inactive,
     isEnable: enable,
+    preview: react_1.default.createElement(HeadingPreview_1.HeadingPreview, { level: 5 }),
 };
 exports.mHeading6ItemData = {
     id: action_names_1.ActionName.heading6,
@@ -326,6 +332,7 @@ exports.mHeading6ItemData = {
     exec: (e) => (0, commands_1.toH6)(e.cm),
     isActive: inactive,
     isEnable: enable,
+    preview: react_1.default.createElement(HeadingPreview_1.HeadingPreview, { level: 6 }),
 };
 exports.mBulletListItemData = {
     id: action_names_1.ActionName.bulletList,

package/build/cjs/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/cjs/bundle/config/previews/ActionPreview.d.ts

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

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionPreview = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const classname_1 = require("../../../classname");
+const b = (0, classname_1.cn)('action-preview');
+const ActionPreview = ({ children }) => {
+    return react_1.default.createElement("div", { className: b(null, ['yfm']) }, children);
+};
+exports.ActionPreview = ActionPreview;

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

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

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeadingPreview = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const classname_1 = require("../../../classname");
+const action_previews_1 = require("../../../i18n/action-previews");
+const ActionPreview_1 = require("./ActionPreview");
+const b = (0, classname_1.cn)('action-preview');
+const HeadingPreview = ({ level }) => {
+    const Heading = `h${level}`;
+    return (react_1.default.createElement(ActionPreview_1.ActionPreview, null,
+        react_1.default.createElement(Heading, null, (0, action_previews_1.i18n)('heading')),
+        react_1.default.createElement("p", { className: b('text-with-head') }, (0, action_previews_1.i18n)('text-with-head'))));
+};
+exports.HeadingPreview = HeadingPreview;

package/build/cjs/bundle/config/previews/TextPreview.d.ts

@@ -0,0 +1 @@
+export declare const TextPreview: () => JSX.Element;

package/build/cjs/bundle/config/previews/TextPreview.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextPreview = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const classname_1 = require("../../../classname");
+const action_previews_1 = require("../../../i18n/action-previews");
+const ActionPreview_1 = require("./ActionPreview");
+const b = (0, classname_1.cn)('action-preview');
+const TextPreview = () => {
+    return (react_1.default.createElement(ActionPreview_1.ActionPreview, null,
+        react_1.default.createElement("p", { className: b('text') }, (0, action_previews_1.i18n)('text'))));
+};
+exports.TextPreview = TextPreview;

package/build/cjs/bundle/config/w-heading-config.js

@@ -1,10 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.wHeadingListConfig = exports.wHeading6ItemData = exports.wHeading5ItemData = exports.wHeading4ItemData = exports.wHeading3ItemData = exports.wHeading2ItemData = exports.wHeading1ItemData = exports.wTextItemData = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
 const menubar_1 = require("../../i18n/menubar");
 const shortcuts_1 = require("../../shortcuts");
 const action_names_1 = require("./action-names");
 const icons_1 = require("./icons");
+const HeadingPreview_1 = require("./previews/HeadingPreview");
+const TextPreview_1 = require("./previews/TextPreview");
 exports.wTextItemData = {
     id: action_names_1.ActionName.paragraph,
     title: menubar_1.i18n.bind(null, 'text'),
@@ -14,6 +18,7 @@ exports.wTextItemData = {
     isActive: (e) => e.actions.toParagraph.isActive(),
     isEnable: (e) => e.actions.toParagraph.isEnable(),
     doNotActivateList: true,
+    preview: react_1.default.createElement(TextPreview_1.TextPreview, null),
 };
 exports.wHeading1ItemData = {
     id: action_names_1.ActionName.heading1,
@@ -23,6 +28,7 @@ exports.wHeading1ItemData = {
     exec: (e) => e.actions.toH1.run(),
     isActive: (e) => e.actions.toH1.isActive(),
     isEnable: (e) => e.actions.toH1.isEnable(),
+    preview: react_1.default.createElement(HeadingPreview_1.HeadingPreview, { level: 1 }),
 };
 exports.wHeading2ItemData = {
     id: action_names_1.ActionName.heading2,
@@ -32,6 +38,7 @@ exports.wHeading2ItemData = {
     exec: (e) => e.actions.toH2.run(),
     isActive: (e) => e.actions.toH2.isActive(),
     isEnable: (e) => e.actions.toH2.isEnable(),
+    preview: react_1.default.createElement(HeadingPreview_1.HeadingPreview, { level: 2 }),
 };
 exports.wHeading3ItemData = {
     id: action_names_1.ActionName.heading3,
@@ -41,6 +48,7 @@ exports.wHeading3ItemData = {
     exec: (e) => e.actions.toH3.run(),
     isActive: (e) => e.actions.toH3.isActive(),
     isEnable: (e) => e.actions.toH3.isEnable(),
+    preview: react_1.default.createElement(HeadingPreview_1.HeadingPreview, { level: 3 }),
 };
 exports.wHeading4ItemData = {
     id: action_names_1.ActionName.heading4,
@@ -50,6 +58,7 @@ exports.wHeading4ItemData = {
     exec: (e) => e.actions.toH4.run(),
     isActive: (e) => e.actions.toH4.isActive(),
     isEnable: (e) => e.actions.toH4.isEnable(),
+    preview: react_1.default.createElement(HeadingPreview_1.HeadingPreview, { level: 4 }),
 };
 exports.wHeading5ItemData = {
     id: action_names_1.ActionName.heading5,
@@ -59,6 +68,7 @@ exports.wHeading5ItemData = {
     exec: (e) => e.actions.toH5.run(),
     isActive: (e) => e.actions.toH5.isActive(),
     isEnable: (e) => e.actions.toH5.isEnable(),
+    preview: react_1.default.createElement(HeadingPreview_1.HeadingPreview, { level: 5 }),
 };
 exports.wHeading6ItemData = {
     id: action_names_1.ActionName.heading6,
@@ -68,6 +78,7 @@ exports.wHeading6ItemData = {
     exec: (e) => e.actions.toH6.run(),
     isActive: (e) => e.actions.toH6.isActive(),
     isEnable: (e) => e.actions.toH6.isEnable(),
+    preview: react_1.default.createElement(HeadingPreview_1.HeadingPreview, { level: 6 }),
 };
 exports.wHeadingListConfig = {
     icon: icons_1.icons.headline,

package/build/cjs/bundle/toolbar/utils/toolbarsConfigs.js

@@ -19,7 +19,8 @@ const transformItem = (type, item, id = 'unknown') => {
         return {};
     }
     const isListButton = item.view.type === types_1.ToolbarDataType.ListButton;
-    return Object.assign(Object.assign(Object.assign({ type: (_a = item.view.type) !== null && _a !== void 0 ? _a : types_1.ToolbarDataType.SingleButton, id, title: item.view.title, hint: item.view.hint, icon: item.view.icon, hotkey: item.view.hotkey }, (isListButton && { withArrow: item.view.withArrow })), (type === 'wysiwyg' && item.wysiwyg && Object.assign({}, item.wysiwyg))), (type === 'markup' && item.markup && Object.assign({}, item.markup)));
+    const isSingleButton = item.view.type === types_1.ToolbarDataType.SingleButton;
+    return Object.assign(Object.assign(Object.assign(Object.assign({ type: (_a = item.view.type) !== null && _a !== void 0 ? _a : types_1.ToolbarDataType.SingleButton, id, title: item.view.title, hint: item.view.hint, icon: item.view.icon, hotkey: item.view.hotkey }, (isSingleButton && { preview: item.view.preview })), (isListButton && { withArrow: item.view.withArrow })), (type === 'wysiwyg' && item.wysiwyg && Object.assign({}, item.wysiwyg))), (type === 'markup' && item.markup && Object.assign({}, item.markup)));
 };
 const createToolbarConfig = (editorType, toolbarPreset, toolbarName) => {
     var _a;

package/build/cjs/bundle/types.d.ts

@@ -99,6 +99,17 @@ export declare type MarkdownEditorExperimentalOptions = {
      * @default false
      */
     preserveEmptyRows?: boolean;
+    /**
+     * Preserves the original formatting of unmodified blocks,
+     * restoring their structure during serialization
+     *
+     * **Use case:** Maintain consistent markup when switching modes
+     *
+     * **Note:** Applies to tracked blocks: `yfm_table`
+     *
+     * @default false
+     */
+    preserveMarkupFormatting?: boolean;
 };
 export declare type MarkdownEditorMarkupConfig = {
     /**

package/build/cjs/core/Editor.d.ts

@@ -4,7 +4,7 @@ import { TransformFn } from './markdown/ProseMirrorTransformer';
 import type { ActionStorage } from './types/actions';
 import type { Extension } from './types/extension';
 import type { Parser } from './types/parser';
-import type { Serializer } from './types/serializer';
+import { Serializer } from './types/serializer';
 declare type OnChange = (editor: WysiwygEditor) => void;
 export declare type EscapeConfig = {
     commonEscape?: RegExp;
@@ -33,7 +33,7 @@ export declare class WysiwygEditor implements CommonEditor, ActionStorage {
     get serializer(): Serializer;
     get parser(): Parser;
     get actions(): WysiwygEditor.Actions;
-    constructor({ domElem, initialContent, extensions, allowHTML, mdPreset, linkify, pmTransformers, linkifyTlds, escapeConfig, onChange, onDocChange, }: WysiwygEditorOptions);
+    constructor({ domElem, initialContent, extensions, allowHTML, mdPreset, linkify, pmTransformers, linkifyTlds, escapeConfig, onChange, onDocChange, modifiers, }: WysiwygEditorOptions);
     action<T extends keyof WysiwygEditor.Actions>(actionName: T): WysiwygEditor.Actions[T];
     focus(): void;
     hasFocus(): boolean;

package/build/cjs/core/Editor.js

@@ -7,21 +7,36 @@ const prosemirror_state_1 = require("prosemirror-state");
 const prosemirror_view_1 = require("prosemirror-view");
 const ContentHandler_1 = require("./ContentHandler");
 const ExtensionsManager_1 = require("./ExtensionsManager");
+const SchemaDynamicModifier_1 = require("./SchemaDynamicModifier");
+const MarkdownParser_1 = require("./markdown/MarkdownParser");
+const MarkdownSerializerDynamicModifier_1 = require("./markdown/MarkdownSerializerDynamicModifier");
 const actions_1 = require("./utils/actions");
+const dynamicModifiers_1 = require("./utils/dynamicModifiers");
 const metrics_1 = require("./utils/metrics");
 class WysiwygEditor {
-    constructor({ domElem, initialContent = '', extensions = () => { }, allowHTML, mdPreset, linkify, pmTransformers, linkifyTlds, escapeConfig, onChange, onDocChange, }) {
+    constructor({ domElem, initialContent = '', extensions = () => { }, allowHTML, mdPreset, linkify, pmTransformers, linkifyTlds, escapeConfig, onChange, onDocChange, modifiers, }) {
         _WysiwygEditor_view.set(this, void 0);
         _WysiwygEditor_serializer.set(this, void 0);
         _WysiwygEditor_parser.set(this, void 0);
         _WysiwygEditor_actions.set(this, void 0);
         _WysiwygEditor_contentHandler.set(this, void 0);
         _WysiwygEditor_escapeConfig.set(this, void 0);
+        const dynamicModifiersConfig = modifiers
+            ? (0, dynamicModifiers_1.convertDynamicModifiersConfigs)(modifiers)
+            : undefined;
+        const dynamicModifiers = dynamicModifiersConfig
+            ? {
+                schema: new SchemaDynamicModifier_1.SchemaDynamicModifier(dynamicModifiersConfig.schema),
+                parser: new MarkdownParser_1.MarkdownParserDynamicModifier(dynamicModifiersConfig.parser),
+                serializer: new MarkdownSerializerDynamicModifier_1.MarkdownSerializerDynamicModifier(dynamicModifiersConfig.serializer),
+            }
+            : undefined;
         const { schema, markupParser: parser, serializer, nodeViews, markViews, plugins, rawActions, actions, } = ExtensionsManager_1.ExtensionsManager.process(extensions, {
             // "breaks" option only affects the renderer, but not the parser
             mdOpts: { html: allowHTML, linkify, breaks: true, preset: mdPreset },
             linkifyTlds,
             pmTransformers,
+            dynamicModifiers,
         });
         const state = prosemirror_state_1.EditorState.create({
             schema,

package/build/cjs/core/ExtensionsManager.d.ts

@@ -1,6 +1,10 @@
 import MarkdownIt, { PresetName } from 'markdown-it';
+import { Schema } from 'prosemirror-model';
 import type { Plugin } from 'prosemirror-state';
 import { ActionsManager } from './ActionsManager';
+import { SchemaDynamicModifier } from './SchemaDynamicModifier';
+import { MarkdownParserDynamicModifier } from './markdown/MarkdownParser';
+import { MarkdownSerializerDynamicModifier } from './markdown/MarkdownSerializerDynamicModifier';
 import { TransformFn } from './markdown/ProseMirrorTransformer';
 import type { ActionSpec } from './types/actions';
 import type { Extension, ExtensionDeps } from './types/extension';
@@ -15,6 +19,11 @@ declare type ExtensionsManagerOptions = {
     };
     linkifyTlds?: string | string[];
     pmTransformers?: TransformFn[];
+    dynamicModifiers?: {
+        parser?: MarkdownParserDynamicModifier;
+        serializer?: MarkdownSerializerDynamicModifier;
+        schema?: SchemaDynamicModifier;
+    };
 };
 export declare class ExtensionsManager {
     #private;
@@ -24,7 +33,7 @@ export declare class ExtensionsManager {
         plugins: Plugin<any>[];
         nodeViews: Record<string, NodeViewConstructor>;
         markViews: Record<string, MarkViewConstructor>;
-        schema: import("prosemirror-model").Schema<any, any>;
+        schema: Schema<any, any>;
         textParser: import(".").Parser;
         markupParser: import(".").Parser;
         serializer: import(".").Serializer;
@@ -36,7 +45,7 @@ export declare class ExtensionsManager {
         plugins: Plugin<any>[];
         nodeViews: Record<string, NodeViewConstructor>;
         markViews: Record<string, MarkViewConstructor>;
-        schema: import("prosemirror-model").Schema<any, any>;
+        schema: Schema<any, any>;
         textParser: import(".").Parser;
         markupParser: import(".").Parser;
         serializer: import(".").Serializer;
@@ -45,6 +54,7 @@ export declare class ExtensionsManager {
     private processExtensions;
     private processNode;
     private processMark;
+    private createParser;
     private createDeps;
     private createDerived;
 }