@gravity-ui/markdown-editor 13.12.1 → 13.14.0

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

@@ -45,6 +45,11 @@ export interface Editor extends Receiver<EventMap>, CommonEditor {
     }): void;
 }
 declare type SetEditorModeOptions = Pick<ChangeEditorModeOptions, 'emit'>;
+declare type ChangeEditorModeOptions = {
+    mode: EditorMode;
+    reason: 'error-boundary' | 'settings' | 'manually';
+    emit?: boolean;
+};
 export declare type MarkupConfig = {
     /** Additional extensions for codemirror instance. */
     extensions?: CreateCodemirrorParams['extensions'];
@@ -59,6 +64,10 @@ export declare type MarkupConfig = {
      */
     languageData?: YfmLangOptions['languageData'];
 };
+export declare type EscapeConfig = {
+    commonEscape?: RegExp;
+    startOfLineEscape?: RegExp;
+};
 export declare type EditorOptions = Pick<WysiwygEditorOptions, 'allowHTML' | 'linkify' | 'linkifyTlds' | 'extensions'> & {
     initialMarkup?: MarkupString;
     /** @default 'wysiwyg' */
@@ -82,11 +91,13 @@ export declare type EditorOptions = Pick<WysiwygEditorOptions, 'allowHTML' | 'li
      * You can use it to pre-process the value from the markup editor before it gets into the wysiwyg editor.
      */
     prepareRawMarkup?: (value: MarkupString) => MarkupString;
+    experimental_beforeEditorModeChange?: (options: Pick<ChangeEditorModeOptions, 'mode' | 'reason'>) => boolean | undefined;
     splitMode?: SplitMode;
     renderPreview?: RenderPreview;
     preset: EditorPreset;
     /** @deprecated Put extra extensions via MarkdownEditorMarkupConfig */
     extraMarkupExtensions?: CodemirrorExtension[];
     markupConfig?: MarkupConfig;
+    escapeConfig?: EscapeConfig;
 };
 export {};

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_preset, _EditorImpl_allowHTML, _EditorImpl_linkify, _EditorImpl_linkifyTlds, _EditorImpl_extensions, _EditorImpl_renderStorage, _EditorImpl_fileUploadHandler, _EditorImpl_needToSetDimensionsForUploadedImages, _EditorImpl_prepareRawMarkup;
+var _EditorImpl_markup, _EditorImpl_editorMode, _EditorImpl_toolbarVisible, _EditorImpl_splitModeEnabled, _EditorImpl_splitMode, _EditorImpl_renderPreview, _EditorImpl_wysiwygEditor, _EditorImpl_markupEditor, _EditorImpl_markupConfig, _EditorImpl_escapeConfig, _EditorImpl_preset, _EditorImpl_allowHTML, _EditorImpl_linkify, _EditorImpl_linkifyTlds, _EditorImpl_extensions, _EditorImpl_renderStorage, _EditorImpl_fileUploadHandler, _EditorImpl_needToSetDimensionsForUploadedImages, _EditorImpl_prepareRawMarkup, _EditorImpl_beforeEditorModeChange;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditorImpl = void 0;
 const tslib_1 = require("tslib");
@@ -25,6 +25,7 @@ class EditorImpl extends event_emitter_1.SafeEventEmitter {
         _EditorImpl_wysiwygEditor.set(this, void 0);
         _EditorImpl_markupEditor.set(this, void 0);
         _EditorImpl_markupConfig.set(this, void 0);
+        _EditorImpl_escapeConfig.set(this, void 0);
         _EditorImpl_preset.set(this, void 0);
         _EditorImpl_allowHTML.set(this, void 0);
         _EditorImpl_linkify.set(this, void 0);
@@ -34,6 +35,7 @@ class EditorImpl extends event_emitter_1.SafeEventEmitter {
         _EditorImpl_fileUploadHandler.set(this, void 0);
         _EditorImpl_needToSetDimensionsForUploadedImages.set(this, void 0);
         _EditorImpl_prepareRawMarkup.set(this, void 0);
+        _EditorImpl_beforeEditorModeChange.set(this, void 0);
         this.getValue = () => this.currentEditor.getValue();
         tslib_1.__classPrivateFieldSet(this, _EditorImpl_editorMode, (_a = opts.initialEditorMode) !== null && _a !== void 0 ? _a : 'wysiwyg', "f");
         tslib_1.__classPrivateFieldSet(this, _EditorImpl_toolbarVisible, Boolean(opts.initialToolbarVisible), "f");
@@ -52,6 +54,8 @@ class EditorImpl extends event_emitter_1.SafeEventEmitter {
         tslib_1.__classPrivateFieldSet(this, _EditorImpl_fileUploadHandler, opts.fileUploadHandler, "f");
         tslib_1.__classPrivateFieldSet(this, _EditorImpl_needToSetDimensionsForUploadedImages, Boolean(opts.needToSetDimensionsForUploadedImages), "f");
         tslib_1.__classPrivateFieldSet(this, _EditorImpl_prepareRawMarkup, opts.prepareRawMarkup, "f");
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_escapeConfig, opts.escapeConfig, "f");
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_beforeEditorModeChange, opts.experimental_beforeEditorModeChange, "f");
     }
     get _wysiwygView() {
         var _a;
@@ -137,6 +141,7 @@ class EditorImpl extends event_emitter_1.SafeEventEmitter {
                 allowHTML: tslib_1.__classPrivateFieldGet(this, _EditorImpl_allowHTML, "f"),
                 linkify: tslib_1.__classPrivateFieldGet(this, _EditorImpl_linkify, "f"),
                 linkifyTlds: tslib_1.__classPrivateFieldGet(this, _EditorImpl_linkifyTlds, "f"),
+                escapeConfig: tslib_1.__classPrivateFieldGet(this, _EditorImpl_escapeConfig, "f"),
                 onChange: () => this.emit('rerender-toolbar', null),
                 onDocChange: () => this.emit('change', null),
             }), "f");
@@ -199,9 +204,13 @@ class EditorImpl extends event_emitter_1.SafeEventEmitter {
         this.changeEditorMode({ mode, reason: 'manually', emit: opts === null || opts === void 0 ? void 0 : opts.emit });
     }
     changeEditorMode(_a) {
+        var _b;
         var { emit = true } = _a, opts = tslib_1.__rest(_a, ["emit"]);
         if (tslib_1.__classPrivateFieldGet(this, _EditorImpl_editorMode, "f") === opts.mode)
             return;
+        if (((_b = tslib_1.__classPrivateFieldGet(this, _EditorImpl_beforeEditorModeChange, "f")) === null || _b === void 0 ? void 0 : _b.call(this, { mode: opts.mode, reason: opts.reason })) === false) {
+            return;
+        }
         this.currentMode = opts.mode;
         this.emit('rerender', null);
         if (emit) {
@@ -276,9 +285,9 @@ class EditorImpl extends event_emitter_1.SafeEventEmitter {
     }
     shouldReplaceMarkupEditorValue(markupValue, wysiwygValue) {
         var _a;
-        const serializedEditorMarkup = (_a = tslib_1.__classPrivateFieldGet(this, _EditorImpl_wysiwygEditor, "f")) === null || _a === void 0 ? void 0 : _a.serializer.serialize(tslib_1.__classPrivateFieldGet(this, _EditorImpl_wysiwygEditor, "f").parser.parse(markupValue));
+        const serializedEditorMarkup = (_a = tslib_1.__classPrivateFieldGet(this, _EditorImpl_wysiwygEditor, "f")) === null || _a === void 0 ? void 0 : _a.serializer.serialize(tslib_1.__classPrivateFieldGet(this, _EditorImpl_wysiwygEditor, "f").parser.parse(markupValue), tslib_1.__classPrivateFieldGet(this, _EditorImpl_escapeConfig, "f"));
         return (serializedEditorMarkup === null || serializedEditorMarkup === void 0 ? void 0 : serializedEditorMarkup.trim()) !== wysiwygValue.trim();
     }
 }
 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_preset = new WeakMap(), _EditorImpl_allowHTML = new WeakMap(), _EditorImpl_linkify = new WeakMap(), _EditorImpl_linkifyTlds = new WeakMap(), _EditorImpl_extensions = new WeakMap(), _EditorImpl_renderStorage = new WeakMap(), _EditorImpl_fileUploadHandler = new WeakMap(), _EditorImpl_needToSetDimensionsForUploadedImages = new WeakMap(), _EditorImpl_prepareRawMarkup = 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_preset = new WeakMap(), _EditorImpl_allowHTML = new WeakMap(), _EditorImpl_linkify = new WeakMap(), _EditorImpl_linkifyTlds = new WeakMap(), _EditorImpl_extensions = new WeakMap(), _EditorImpl_renderStorage = new WeakMap(), _EditorImpl_fileUploadHandler = new WeakMap(), _EditorImpl_needToSetDimensionsForUploadedImages = new WeakMap(), _EditorImpl_prepareRawMarkup = new WeakMap(), _EditorImpl_beforeEditorModeChange = new WeakMap();

package/build/cjs/bundle/settings/index.d.ts

@@ -1,12 +1,13 @@
 import React from 'react';
 import { ClassNameProps } from '../../classname';
 import type { EditorMode, SplitMode } from '../Editor';
-export declare type EditorSettingsProps = SettingsContentProps & {
+export declare type EditorSettingsProps = Omit<SettingsContentProps, 'onClose'> & {
     renderPreviewButton?: boolean;
 };
 export declare const EditorSettings: React.NamedExoticComponent<EditorSettingsProps>;
 declare type SettingsContentProps = ClassNameProps & {
     mode: EditorMode;
+    onClose: () => void;
     onModeChange: (mode: EditorMode) => void;
     onShowPreviewChange: (showPreview: boolean) => void;
     showPreview: boolean;

package/build/cjs/bundle/settings/index.js

@@ -32,14 +32,20 @@ exports.EditorSettings = react_1.default.memo(function EditorSettings(props) {
         react_1.default.createElement(uikit_1.Button, { size: "m", view: "flat", ref: chevronRef, pin: "round-round", onClick: togglePopup, className: bSettings('dropdown-button') },
             react_1.default.createElement(uikit_1.Icon, { data: icons_1.Gear })),
         react_1.default.createElement(uikit_1.Popup, { open: popupShown, anchorRef: chevronRef, placement: placement, onClose: hidePopup },
-            react_1.default.createElement(SettingsContent, Object.assign({}, props, { className: bSettings('content') })))));
+            react_1.default.createElement(SettingsContent, Object.assign({}, props, { onClose: hidePopup, className: bSettings('content') })))));
 });
 const mdHelpPlacement = ['bottom', 'bottom-end', 'right-start', 'right', 'left'];
-const SettingsContent = function SettingsContent({ mode, onModeChange, toolbarVisibility, onToolbarVisibilityChange, onSplitModeChange, splitMode = false, splitModeEnabled, className, showPreview, }) {
+const SettingsContent = function SettingsContent({ mode, onClose, onModeChange, toolbarVisibility, onToolbarVisibilityChange, onSplitModeChange, splitMode = false, splitModeEnabled, className, showPreview, }) {
     return (react_1.default.createElement("div", { className: bContent(null, [className]) },
         react_1.default.createElement(uikit_1.Menu, { size: "l", className: bContent('mode') },
-            react_1.default.createElement(uikit_1.Menu.Item, { active: mode === 'wysiwyg', onClick: () => onModeChange('wysiwyg'), icon: react_1.default.createElement(uikit_1.Icon, { data: WysiwygMode_1.default }) }, (0, bundle_1.i18n)('settings_wysiwyg')),
-            react_1.default.createElement(uikit_1.Menu.Item, { active: mode === 'markup', onClick: () => onModeChange('markup'), icon: react_1.default.createElement(uikit_1.Icon, { data: icons_1.LogoMarkdown }) },
+            react_1.default.createElement(uikit_1.Menu.Item, { active: mode === 'wysiwyg', onClick: () => {
+                    onModeChange('wysiwyg');
+                    onClose();
+                }, icon: react_1.default.createElement(uikit_1.Icon, { data: WysiwygMode_1.default }) }, (0, bundle_1.i18n)('settings_wysiwyg')),
+            react_1.default.createElement(uikit_1.Menu.Item, { active: mode === 'markup', onClick: () => {
+                    onModeChange('markup');
+                    onClose();
+                }, icon: react_1.default.createElement(uikit_1.Icon, { data: icons_1.LogoMarkdown }) },
                 (0, bundle_1.i18n)('settings_markup'),
                 react_1.default.createElement(components_1.HelpPopover, { content: react_1.default.createElement("div", { onClick: (e) => {
                             // stop clicks propagation

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

@@ -5,6 +5,10 @@ import type { Extension } from './types/extension';
 import type { Parser } from './types/parser';
 import type { Serializer } from './types/serializer';
 declare type OnChange = (editor: WysiwygEditor) => void;
+declare type EscapeConfig = {
+    commonEscape?: RegExp;
+    startOfLineEscape?: RegExp;
+};
 export declare type WysiwygEditorOptions = {
     domElem?: Element;
     /** markdown markup */
@@ -15,6 +19,7 @@ export declare type WysiwygEditorOptions = {
     allowHTML?: boolean;
     linkify?: boolean;
     linkifyTlds?: string | string[];
+    escapeConfig?: EscapeConfig;
     /** Call on any state change (move cursor, change selection, etc...) */
     onChange?: OnChange;
     /** Call only if document change */
@@ -26,7 +31,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, linkifyTlds, onChange, onDocChange, }: WysiwygEditorOptions);
+    constructor({ domElem, initialContent, extensions, allowHTML, mdPreset, linkify, linkifyTlds, escapeConfig, onChange, onDocChange, }: WysiwygEditorOptions);
     action<T extends keyof WysiwygEditor.Actions>(actionName: T): WysiwygEditor.Actions[T];
     focus(): void;
     hasFocus(): boolean;

package/build/cjs/core/Editor.js

@@ -1,5 +1,5 @@
 "use strict";
-var _WysiwygEditor_view, _WysiwygEditor_serializer, _WysiwygEditor_parser, _WysiwygEditor_actions, _WysiwygEditor_contentHandler;
+var _WysiwygEditor_view, _WysiwygEditor_serializer, _WysiwygEditor_parser, _WysiwygEditor_actions, _WysiwygEditor_contentHandler, _WysiwygEditor_escapeConfig;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WysiwygEditor = void 0;
 const tslib_1 = require("tslib");
@@ -10,12 +10,13 @@ const ExtensionsManager_1 = require("./ExtensionsManager");
 const actions_1 = require("./utils/actions");
 const metrics_1 = require("./utils/metrics");
 class WysiwygEditor {
-    constructor({ domElem, initialContent = '', extensions = () => { }, allowHTML, mdPreset, linkify, linkifyTlds, onChange, onDocChange, }) {
+    constructor({ domElem, initialContent = '', extensions = () => { }, allowHTML, mdPreset, linkify, linkifyTlds, escapeConfig, onChange, onDocChange, }) {
         _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 { 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 },
@@ -47,6 +48,7 @@ class WysiwygEditor {
         tslib_1.__classPrivateFieldSet(this, _WysiwygEditor_serializer, serializer, "f");
         tslib_1.__classPrivateFieldSet(this, _WysiwygEditor_parser, parser, "f");
         tslib_1.__classPrivateFieldSet(this, _WysiwygEditor_contentHandler, new ContentHandler_1.WysiwygContentHandler(tslib_1.__classPrivateFieldGet(this, _WysiwygEditor_view, "f"), parser), "f");
+        tslib_1.__classPrivateFieldSet(this, _WysiwygEditor_escapeConfig, escapeConfig, "f");
     }
     get dom() {
         return tslib_1.__classPrivateFieldGet(this, _WysiwygEditor_view, "f").dom;
@@ -74,7 +76,7 @@ class WysiwygEditor {
         return tslib_1.__classPrivateFieldGet(this, _WysiwygEditor_view, "f").hasFocus();
     }
     getValue() {
-        return tslib_1.__classPrivateFieldGet(this, _WysiwygEditor_serializer, "f").serialize(tslib_1.__classPrivateFieldGet(this, _WysiwygEditor_view, "f").state.doc);
+        return tslib_1.__classPrivateFieldGet(this, _WysiwygEditor_serializer, "f").serialize(tslib_1.__classPrivateFieldGet(this, _WysiwygEditor_view, "f").state.doc, tslib_1.__classPrivateFieldGet(this, _WysiwygEditor_escapeConfig, "f"));
     }
     isEmpty() {
         var _a;
@@ -113,4 +115,4 @@ class WysiwygEditor {
     }
 }
 exports.WysiwygEditor = WysiwygEditor;
-_WysiwygEditor_view = new WeakMap(), _WysiwygEditor_serializer = new WeakMap(), _WysiwygEditor_parser = new WeakMap(), _WysiwygEditor_actions = new WeakMap(), _WysiwygEditor_contentHandler = new WeakMap();
+_WysiwygEditor_view = new WeakMap(), _WysiwygEditor_serializer = new WeakMap(), _WysiwygEditor_parser = new WeakMap(), _WysiwygEditor_actions = new WeakMap(), _WysiwygEditor_contentHandler = new WeakMap(), _WysiwygEditor_escapeConfig = new WeakMap();

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

@@ -308,10 +308,12 @@ class MarkdownSerializerState {
     // content. If `startOfLine` is true, also escape characters that
     // have special meaning only at the start of the line.
     esc(str, startOfLine) {
-        // TODO: add a setting which characters need to be escaped
-        str = str.replace(/[`\^+*\\\|~\[\]\{\}<>\$]/g, '\\$&');
+        var _a, _b;
+        const escRegexp = ((_a = this.options) === null || _a === void 0 ? void 0 : _a.commonEscape) || /[`\^+*\\\|~\[\]\{\}<>\$]/g;
+        const startOfLineEscRegexp = ((_b = this.options) === null || _b === void 0 ? void 0 : _b.startOfLineEscape) || /^[:#\-*+>]/;
+        str = str.replace(escRegexp, '\\$&');
         if (startOfLine)
-            str = str.replace(/^[:#\-*+>]/, '\\$&').replace(/^(\s*\d+)\./, '$1\\.');
+            str = str.replace(startOfLineEscRegexp, '\\$&').replace(/^(\s*\d+)\./, '$1\\.');
         return str;
     }
     escWhitespace(str) {

package/build/cjs/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.js

@@ -138,7 +138,8 @@ const CodeEditMode = ({ initialText, onSave, onCancel }) => {
                     react_1.default.createElement(uikit_1.Button, { onClick: () => onSave(text), view: 'action' },
                         react_1.default.createElement("span", { className: (0, exports.cnHelper)({ 'prosemirror-stop-event': true }) }, (0, common_1.i18n)('save'))))))));
 };
-const YfmHtmlBlockView = ({ onChange, node, getPos, view, options: { useConfig, sanitize, styles, baseTarget = '_' } }) => {
+const YfmHtmlBlockView = ({ onChange, node, getPos, view, options: { useConfig, sanitize, styles, baseTarget = '_parent', head: headContent = '' }, }) => {
+    var _a;
     const [editing, setEditing, unsetEditing, toggleEditing] = (0, hooks_1.useBooleanState)(Boolean(node.attrs[const_1.YfmHtmlBlockConsts.NodeAttrs.newCreated]));
     const config = useConfig === null || useConfig === void 0 ? void 0 : useConfig();
     const [menuOpen, , , toggleMenuOpen] = (0, hooks_1.useBooleanState)(false);
@@ -152,17 +153,20 @@ const YfmHtmlBlockView = ({ onChange, node, getPos, view, options: { useConfig,
                 unsetEditing();
             } }));
     }
-    let dirtyHtml = `<base target="${baseTarget}">` + node.attrs[const_1.YfmHtmlBlockConsts.NodeAttrs.srcdoc];
+    let additional = baseTarget ? `<base target="${baseTarget}">` : '';
     if (styles) {
         const stylesContent = typeof styles === 'string'
             ? `<link rel="stylesheet" href="${styles}" />`
             : `<style>${(0, html_extension_1.getStyles)(styles)}</style>`;
-        dirtyHtml = stylesContent + dirtyHtml;
+        additional += stylesContent;
     }
-    const html = sanitize ? sanitize(dirtyHtml) : dirtyHtml;
+    const head = `<head>${headContent || additional}</head>`;
+    const body = `<body>${(_a = node.attrs[const_1.YfmHtmlBlockConsts.NodeAttrs.srcdoc]) !== null && _a !== void 0 ? _a : ''}</body>`;
+    const html = `<!DOCTYPE html><html>${head}${body}</html>`;
+    const resultHtml = sanitize ? sanitize(html) : html;
     return (react_1.default.createElement("div", { className: b(), onDoubleClick: setEditing },
         react_1.default.createElement(uikit_1.Label, { className: b('label'), icon: react_1.default.createElement(uikit_1.Icon, { size: 16, data: icons_1.Eye }) }, (0, common_1.i18n)('preview')),
-        react_1.default.createElement(YfmHtmlBlockPreview, { html: html, "on\u0421lick": handleClick, config: config }),
+        react_1.default.createElement(YfmHtmlBlockPreview, { html: resultHtml, "on\u0421lick": handleClick, config: config }),
         react_1.default.createElement("div", { className: b('menu') },
             react_1.default.createElement(uikit_1.Button, { onClick: toggleMenuOpen, ref: buttonRef, size: 's', className: (0, exports.cnHelper)({ 'prosemirror-stop-event': true }) },
                 react_1.default.createElement(uikit_1.Icon, { data: icons_1.Ellipsis, className: (0, exports.cnHelper)({ 'prosemirror-stop-event': true }) })),

package/build/cjs/extensions/yfm/YfmHtmlBlock/index.d.ts

@@ -7,6 +7,7 @@ export declare type YfmHtmlBlockOptions = {
     sanitize?: (dirtyHtml: string) => string;
     styles?: string | StylesObject;
     baseTarget?: BaseTarget;
+    head?: string;
 };
 export declare const YfmHtmlBlock: ExtensionAuto<YfmHtmlBlockOptions>;
 declare global {

package/build/cjs/version.js

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

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

@@ -45,6 +45,11 @@ export interface Editor extends Receiver<EventMap>, CommonEditor {
     }): void;
 }
 declare type SetEditorModeOptions = Pick<ChangeEditorModeOptions, 'emit'>;
+declare type ChangeEditorModeOptions = {
+    mode: EditorMode;
+    reason: 'error-boundary' | 'settings' | 'manually';
+    emit?: boolean;
+};
 export declare type MarkupConfig = {
     /** Additional extensions for codemirror instance. */
     extensions?: CreateCodemirrorParams['extensions'];
@@ -59,6 +64,10 @@ export declare type MarkupConfig = {
      */
     languageData?: YfmLangOptions['languageData'];
 };
+export declare type EscapeConfig = {
+    commonEscape?: RegExp;
+    startOfLineEscape?: RegExp;
+};
 export declare type EditorOptions = Pick<WysiwygEditorOptions, 'allowHTML' | 'linkify' | 'linkifyTlds' | 'extensions'> & {
     initialMarkup?: MarkupString;
     /** @default 'wysiwyg' */
@@ -82,11 +91,13 @@ export declare type EditorOptions = Pick<WysiwygEditorOptions, 'allowHTML' | 'li
      * You can use it to pre-process the value from the markup editor before it gets into the wysiwyg editor.
      */
     prepareRawMarkup?: (value: MarkupString) => MarkupString;
+    experimental_beforeEditorModeChange?: (options: Pick<ChangeEditorModeOptions, 'mode' | 'reason'>) => boolean | undefined;
     splitMode?: SplitMode;
     renderPreview?: RenderPreview;
     preset: EditorPreset;
     /** @deprecated Put extra extensions via MarkdownEditorMarkupConfig */
     extraMarkupExtensions?: CodemirrorExtension[];
     markupConfig?: MarkupConfig;
+    escapeConfig?: EscapeConfig;
 };
 export {};

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_preset, _EditorImpl_allowHTML, _EditorImpl_linkify, _EditorImpl_linkifyTlds, _EditorImpl_extensions, _EditorImpl_renderStorage, _EditorImpl_fileUploadHandler, _EditorImpl_needToSetDimensionsForUploadedImages, _EditorImpl_prepareRawMarkup;
+var _EditorImpl_markup, _EditorImpl_editorMode, _EditorImpl_toolbarVisible, _EditorImpl_splitModeEnabled, _EditorImpl_splitMode, _EditorImpl_renderPreview, _EditorImpl_wysiwygEditor, _EditorImpl_markupEditor, _EditorImpl_markupConfig, _EditorImpl_escapeConfig, _EditorImpl_preset, _EditorImpl_allowHTML, _EditorImpl_linkify, _EditorImpl_linkifyTlds, _EditorImpl_extensions, _EditorImpl_renderStorage, _EditorImpl_fileUploadHandler, _EditorImpl_needToSetDimensionsForUploadedImages, _EditorImpl_prepareRawMarkup, _EditorImpl_beforeEditorModeChange;
 import { __classPrivateFieldGet, __classPrivateFieldSet, __rest } from "tslib";
 import { TextSelection } from 'prosemirror-state';
 import { WysiwygEditor } from '../core';
@@ -22,6 +22,7 @@ export class EditorImpl extends SafeEventEmitter {
         _EditorImpl_wysiwygEditor.set(this, void 0);
         _EditorImpl_markupEditor.set(this, void 0);
         _EditorImpl_markupConfig.set(this, void 0);
+        _EditorImpl_escapeConfig.set(this, void 0);
         _EditorImpl_preset.set(this, void 0);
         _EditorImpl_allowHTML.set(this, void 0);
         _EditorImpl_linkify.set(this, void 0);
@@ -31,6 +32,7 @@ export class EditorImpl extends SafeEventEmitter {
         _EditorImpl_fileUploadHandler.set(this, void 0);
         _EditorImpl_needToSetDimensionsForUploadedImages.set(this, void 0);
         _EditorImpl_prepareRawMarkup.set(this, void 0);
+        _EditorImpl_beforeEditorModeChange.set(this, void 0);
         this.getValue = () => this.currentEditor.getValue();
         __classPrivateFieldSet(this, _EditorImpl_editorMode, (_a = opts.initialEditorMode) !== null && _a !== void 0 ? _a : 'wysiwyg', "f");
         __classPrivateFieldSet(this, _EditorImpl_toolbarVisible, Boolean(opts.initialToolbarVisible), "f");
@@ -49,6 +51,8 @@ export class EditorImpl extends SafeEventEmitter {
         __classPrivateFieldSet(this, _EditorImpl_fileUploadHandler, opts.fileUploadHandler, "f");
         __classPrivateFieldSet(this, _EditorImpl_needToSetDimensionsForUploadedImages, Boolean(opts.needToSetDimensionsForUploadedImages), "f");
         __classPrivateFieldSet(this, _EditorImpl_prepareRawMarkup, opts.prepareRawMarkup, "f");
+        __classPrivateFieldSet(this, _EditorImpl_escapeConfig, opts.escapeConfig, "f");
+        __classPrivateFieldSet(this, _EditorImpl_beforeEditorModeChange, opts.experimental_beforeEditorModeChange, "f");
     }
     get _wysiwygView() {
         var _a;
@@ -134,6 +138,7 @@ export class EditorImpl extends SafeEventEmitter {
                 allowHTML: __classPrivateFieldGet(this, _EditorImpl_allowHTML, "f"),
                 linkify: __classPrivateFieldGet(this, _EditorImpl_linkify, "f"),
                 linkifyTlds: __classPrivateFieldGet(this, _EditorImpl_linkifyTlds, "f"),
+                escapeConfig: __classPrivateFieldGet(this, _EditorImpl_escapeConfig, "f"),
                 onChange: () => this.emit('rerender-toolbar', null),
                 onDocChange: () => this.emit('change', null),
             }), "f");
@@ -196,9 +201,13 @@ export class EditorImpl extends SafeEventEmitter {
         this.changeEditorMode({ mode, reason: 'manually', emit: opts === null || opts === void 0 ? void 0 : opts.emit });
     }
     changeEditorMode(_a) {
+        var _b;
         var { emit = true } = _a, opts = __rest(_a, ["emit"]);
         if (__classPrivateFieldGet(this, _EditorImpl_editorMode, "f") === opts.mode)
             return;
+        if (((_b = __classPrivateFieldGet(this, _EditorImpl_beforeEditorModeChange, "f")) === null || _b === void 0 ? void 0 : _b.call(this, { mode: opts.mode, reason: opts.reason })) === false) {
+            return;
+        }
         this.currentMode = opts.mode;
         this.emit('rerender', null);
         if (emit) {
@@ -273,8 +282,8 @@ export class EditorImpl extends SafeEventEmitter {
     }
     shouldReplaceMarkupEditorValue(markupValue, wysiwygValue) {
         var _a;
-        const serializedEditorMarkup = (_a = __classPrivateFieldGet(this, _EditorImpl_wysiwygEditor, "f")) === null || _a === void 0 ? void 0 : _a.serializer.serialize(__classPrivateFieldGet(this, _EditorImpl_wysiwygEditor, "f").parser.parse(markupValue));
+        const serializedEditorMarkup = (_a = __classPrivateFieldGet(this, _EditorImpl_wysiwygEditor, "f")) === null || _a === void 0 ? void 0 : _a.serializer.serialize(__classPrivateFieldGet(this, _EditorImpl_wysiwygEditor, "f").parser.parse(markupValue), __classPrivateFieldGet(this, _EditorImpl_escapeConfig, "f"));
         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_preset = new WeakMap(), _EditorImpl_allowHTML = new WeakMap(), _EditorImpl_linkify = new WeakMap(), _EditorImpl_linkifyTlds = new WeakMap(), _EditorImpl_extensions = new WeakMap(), _EditorImpl_renderStorage = new WeakMap(), _EditorImpl_fileUploadHandler = new WeakMap(), _EditorImpl_needToSetDimensionsForUploadedImages = new WeakMap(), _EditorImpl_prepareRawMarkup = 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_preset = new WeakMap(), _EditorImpl_allowHTML = new WeakMap(), _EditorImpl_linkify = new WeakMap(), _EditorImpl_linkifyTlds = new WeakMap(), _EditorImpl_extensions = new WeakMap(), _EditorImpl_renderStorage = new WeakMap(), _EditorImpl_fileUploadHandler = new WeakMap(), _EditorImpl_needToSetDimensionsForUploadedImages = new WeakMap(), _EditorImpl_prepareRawMarkup = new WeakMap(), _EditorImpl_beforeEditorModeChange = new WeakMap();

package/build/esm/bundle/settings/index.d.ts

@@ -2,12 +2,13 @@ import React from 'react';
 import { ClassNameProps } from '../../classname';
 import type { EditorMode, SplitMode } from '../Editor';
 import './index.css';
-export declare type EditorSettingsProps = SettingsContentProps & {
+export declare type EditorSettingsProps = Omit<SettingsContentProps, 'onClose'> & {
     renderPreviewButton?: boolean;
 };
 export declare const EditorSettings: React.NamedExoticComponent<EditorSettingsProps>;
 declare type SettingsContentProps = ClassNameProps & {
     mode: EditorMode;
+    onClose: () => void;
     onModeChange: (mode: EditorMode) => void;
     onShowPreviewChange: (showPreview: boolean) => void;
     showPreview: boolean;

package/build/esm/bundle/settings/index.js

@@ -29,14 +29,20 @@ export const EditorSettings = React.memo(function EditorSettings(props) {
         React.createElement(Button, { size: "m", view: "flat", ref: chevronRef, pin: "round-round", onClick: togglePopup, className: bSettings('dropdown-button') },
             React.createElement(Icon, { data: Gear })),
         React.createElement(Popup, { open: popupShown, anchorRef: chevronRef, placement: placement, onClose: hidePopup },
-            React.createElement(SettingsContent, Object.assign({}, props, { className: bSettings('content') })))));
+            React.createElement(SettingsContent, Object.assign({}, props, { onClose: hidePopup, className: bSettings('content') })))));
 });
 const mdHelpPlacement = ['bottom', 'bottom-end', 'right-start', 'right', 'left'];
-const SettingsContent = function SettingsContent({ mode, onModeChange, toolbarVisibility, onToolbarVisibilityChange, onSplitModeChange, splitMode = false, splitModeEnabled, className, showPreview, }) {
+const SettingsContent = function SettingsContent({ mode, onClose, onModeChange, toolbarVisibility, onToolbarVisibilityChange, onSplitModeChange, splitMode = false, splitModeEnabled, className, showPreview, }) {
     return (React.createElement("div", { className: bContent(null, [className]) },
         React.createElement(Menu, { size: "l", className: bContent('mode') },
-            React.createElement(Menu.Item, { active: mode === 'wysiwyg', onClick: () => onModeChange('wysiwyg'), icon: React.createElement(Icon, { data: WysiwygModeIcon }) }, i18n('settings_wysiwyg')),
-            React.createElement(Menu.Item, { active: mode === 'markup', onClick: () => onModeChange('markup'), icon: React.createElement(Icon, { data: LogoMarkdown }) },
+            React.createElement(Menu.Item, { active: mode === 'wysiwyg', onClick: () => {
+                    onModeChange('wysiwyg');
+                    onClose();
+                }, icon: React.createElement(Icon, { data: WysiwygModeIcon }) }, i18n('settings_wysiwyg')),
+            React.createElement(Menu.Item, { active: mode === 'markup', onClick: () => {
+                    onModeChange('markup');
+                    onClose();
+                }, icon: React.createElement(Icon, { data: LogoMarkdown }) },
                 i18n('settings_markup'),
                 React.createElement(HelpPopover, { content: React.createElement("div", { onClick: (e) => {
                             // stop clicks propagation

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

@@ -5,6 +5,10 @@ import type { Extension } from './types/extension';
 import type { Parser } from './types/parser';
 import type { Serializer } from './types/serializer';
 declare type OnChange = (editor: WysiwygEditor) => void;
+declare type EscapeConfig = {
+    commonEscape?: RegExp;
+    startOfLineEscape?: RegExp;
+};
 export declare type WysiwygEditorOptions = {
     domElem?: Element;
     /** markdown markup */
@@ -15,6 +19,7 @@ export declare type WysiwygEditorOptions = {
     allowHTML?: boolean;
     linkify?: boolean;
     linkifyTlds?: string | string[];
+    escapeConfig?: EscapeConfig;
     /** Call on any state change (move cursor, change selection, etc...) */
     onChange?: OnChange;
     /** Call only if document change */
@@ -26,7 +31,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, linkifyTlds, onChange, onDocChange, }: WysiwygEditorOptions);
+    constructor({ domElem, initialContent, extensions, allowHTML, mdPreset, linkify, linkifyTlds, escapeConfig, onChange, onDocChange, }: WysiwygEditorOptions);
     action<T extends keyof WysiwygEditor.Actions>(actionName: T): WysiwygEditor.Actions[T];
     focus(): void;
     hasFocus(): boolean;

package/build/esm/core/Editor.js

@@ -1,4 +1,4 @@
-var _WysiwygEditor_view, _WysiwygEditor_serializer, _WysiwygEditor_parser, _WysiwygEditor_actions, _WysiwygEditor_contentHandler;
+var _WysiwygEditor_view, _WysiwygEditor_serializer, _WysiwygEditor_parser, _WysiwygEditor_actions, _WysiwygEditor_contentHandler, _WysiwygEditor_escapeConfig;
 import { __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
 import { EditorState } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
@@ -7,12 +7,13 @@ import { ExtensionsManager } from './ExtensionsManager';
 import { bindActions } from './utils/actions';
 import { logTransactionMetrics } from './utils/metrics';
 export class WysiwygEditor {
-    constructor({ domElem, initialContent = '', extensions = () => { }, allowHTML, mdPreset, linkify, linkifyTlds, onChange, onDocChange, }) {
+    constructor({ domElem, initialContent = '', extensions = () => { }, allowHTML, mdPreset, linkify, linkifyTlds, escapeConfig, onChange, onDocChange, }) {
         _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 { schema, markupParser: parser, serializer, nodeViews, markViews, plugins, rawActions, actions, } = ExtensionsManager.process(extensions, {
             // "breaks" option only affects the renderer, but not the parser
             mdOpts: { html: allowHTML, linkify, breaks: true, preset: mdPreset },
@@ -44,6 +45,7 @@ export class WysiwygEditor {
         __classPrivateFieldSet(this, _WysiwygEditor_serializer, serializer, "f");
         __classPrivateFieldSet(this, _WysiwygEditor_parser, parser, "f");
         __classPrivateFieldSet(this, _WysiwygEditor_contentHandler, new WysiwygContentHandler(__classPrivateFieldGet(this, _WysiwygEditor_view, "f"), parser), "f");
+        __classPrivateFieldSet(this, _WysiwygEditor_escapeConfig, escapeConfig, "f");
     }
     get dom() {
         return __classPrivateFieldGet(this, _WysiwygEditor_view, "f").dom;
@@ -71,7 +73,7 @@ export class WysiwygEditor {
         return __classPrivateFieldGet(this, _WysiwygEditor_view, "f").hasFocus();
     }
     getValue() {
-        return __classPrivateFieldGet(this, _WysiwygEditor_serializer, "f").serialize(__classPrivateFieldGet(this, _WysiwygEditor_view, "f").state.doc);
+        return __classPrivateFieldGet(this, _WysiwygEditor_serializer, "f").serialize(__classPrivateFieldGet(this, _WysiwygEditor_view, "f").state.doc, __classPrivateFieldGet(this, _WysiwygEditor_escapeConfig, "f"));
     }
     isEmpty() {
         var _a;
@@ -109,4 +111,4 @@ export class WysiwygEditor {
         }
     }
 }
-_WysiwygEditor_view = new WeakMap(), _WysiwygEditor_serializer = new WeakMap(), _WysiwygEditor_parser = new WeakMap(), _WysiwygEditor_actions = new WeakMap(), _WysiwygEditor_contentHandler = new WeakMap();
+_WysiwygEditor_view = new WeakMap(), _WysiwygEditor_serializer = new WeakMap(), _WysiwygEditor_parser = new WeakMap(), _WysiwygEditor_actions = new WeakMap(), _WysiwygEditor_contentHandler = new WeakMap(), _WysiwygEditor_escapeConfig = new WeakMap();

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

@@ -304,10 +304,12 @@ export class MarkdownSerializerState {
     // content. If `startOfLine` is true, also escape characters that
     // have special meaning only at the start of the line.
     esc(str, startOfLine) {
-        // TODO: add a setting which characters need to be escaped
-        str = str.replace(/[`\^+*\\\|~\[\]\{\}<>\$]/g, '\\$&');
+        var _a, _b;
+        const escRegexp = ((_a = this.options) === null || _a === void 0 ? void 0 : _a.commonEscape) || /[`\^+*\\\|~\[\]\{\}<>\$]/g;
+        const startOfLineEscRegexp = ((_b = this.options) === null || _b === void 0 ? void 0 : _b.startOfLineEscape) || /^[:#\-*+>]/;
+        str = str.replace(escRegexp, '\\$&');
         if (startOfLine)
-            str = str.replace(/^[:#\-*+>]/, '\\$&').replace(/^(\s*\d+)\./, '$1\\.');
+            str = str.replace(startOfLineEscRegexp, '\\$&').replace(/^(\s*\d+)\./, '$1\\.');
         return str;
     }
     escWhitespace(str) {

package/build/esm/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.js

@@ -134,7 +134,8 @@ const CodeEditMode = ({ initialText, onSave, onCancel }) => {
                     React.createElement(Button, { onClick: () => onSave(text), view: 'action' },
                         React.createElement("span", { className: cnHelper({ 'prosemirror-stop-event': true }) }, i18n('save'))))))));
 };
-export const YfmHtmlBlockView = ({ onChange, node, getPos, view, options: { useConfig, sanitize, styles, baseTarget = '_' } }) => {
+export const YfmHtmlBlockView = ({ onChange, node, getPos, view, options: { useConfig, sanitize, styles, baseTarget = '_parent', head: headContent = '' }, }) => {
+    var _a;
     const [editing, setEditing, unsetEditing, toggleEditing] = useBooleanState(Boolean(node.attrs[YfmHtmlBlockConsts.NodeAttrs.newCreated]));
     const config = useConfig === null || useConfig === void 0 ? void 0 : useConfig();
     const [menuOpen, , , toggleMenuOpen] = useBooleanState(false);
@@ -148,17 +149,20 @@ export const YfmHtmlBlockView = ({ onChange, node, getPos, view, options: { useC
                 unsetEditing();
             } }));
     }
-    let dirtyHtml = `<base target="${baseTarget}">` + node.attrs[YfmHtmlBlockConsts.NodeAttrs.srcdoc];
+    let additional = baseTarget ? `<base target="${baseTarget}">` : '';
     if (styles) {
         const stylesContent = typeof styles === 'string'
             ? `<link rel="stylesheet" href="${styles}" />`
             : `<style>${getStyles(styles)}</style>`;
-        dirtyHtml = stylesContent + dirtyHtml;
+        additional += stylesContent;
     }
-    const html = sanitize ? sanitize(dirtyHtml) : dirtyHtml;
+    const head = `<head>${headContent || additional}</head>`;
+    const body = `<body>${(_a = node.attrs[YfmHtmlBlockConsts.NodeAttrs.srcdoc]) !== null && _a !== void 0 ? _a : ''}</body>`;
+    const html = `<!DOCTYPE html><html>${head}${body}</html>`;
+    const resultHtml = sanitize ? sanitize(html) : html;
     return (React.createElement("div", { className: b(), onDoubleClick: setEditing },
         React.createElement(Label, { className: b('label'), icon: React.createElement(Icon, { size: 16, data: Eye }) }, i18n('preview')),
-        React.createElement(YfmHtmlBlockPreview, { html: html, "on\u0421lick": handleClick, config: config }),
+        React.createElement(YfmHtmlBlockPreview, { html: resultHtml, "on\u0421lick": handleClick, config: config }),
         React.createElement("div", { className: b('menu') },
             React.createElement(Button, { onClick: toggleMenuOpen, ref: buttonRef, size: 's', className: cnHelper({ 'prosemirror-stop-event': true }) },
                 React.createElement(Icon, { data: DotsIcon, className: cnHelper({ 'prosemirror-stop-event': true }) })),

package/build/esm/extensions/yfm/YfmHtmlBlock/index.d.ts

@@ -7,6 +7,7 @@ export declare type YfmHtmlBlockOptions = {
     sanitize?: (dirtyHtml: string) => string;
     styles?: string | StylesObject;
     baseTarget?: BaseTarget;
+    head?: string;
 };
 export declare const YfmHtmlBlock: ExtensionAuto<YfmHtmlBlockOptions>;
 declare global {

package/build/esm/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/markdown-editor",
-  "version": "13.12.1",
+  "version": "13.14.0",
   "description": "Markdown wysiwyg and markup editor",
   "license": "MIT",
   "repository": {
@@ -200,7 +200,7 @@
   },
   "devDependencies": {
     "@diplodoc/folding-headings-extension": "0.1.0",
-    "@diplodoc/html-extension": "1.3.3",
+    "@diplodoc/html-extension": "1.5.0",
     "@diplodoc/latex-extension": "1.0.3",
     "@diplodoc/mermaid-extension": "1.2.1",
     "@diplodoc/transform": "4.22.0",