@gravity-ui/markdown-editor 13.12.0 → 13.13.0

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

@@ -59,6 +59,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' */
@@ -88,5 +92,6 @@ export declare type EditorOptions = Pick<WysiwygEditorOptions, 'allowHTML' | 'li
     /** @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;
 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);
@@ -52,6 +53,7 @@ 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");
     }
     get _wysiwygView() {
         var _a;
@@ -137,6 +139,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");
@@ -276,9 +279,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();

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/NodeView.js

@@ -51,7 +51,7 @@ class WYfmHtmlBlockNodeView {
         this.view.dispatch(tr);
     }
     renderYfmHtmlBlock() {
-        return (0, react_dom_1.createPortal)(react_1.default.createElement(YfmHtmlBlockView_1.YfmHtmlBlockView, { getPos: this.getPos, node: this.node, onChange: this.onChange.bind(this), sanitize: this.options.sanitize, useConfig: this.options.useConfig, view: this.view }), this.dom);
+        return (0, react_dom_1.createPortal)(react_1.default.createElement(YfmHtmlBlockView_1.YfmHtmlBlockView, { getPos: this.getPos, node: this.node, onChange: this.onChange.bind(this), options: this.options, view: this.view }), this.dom);
     }
 }
 exports.WYfmHtmlBlockNodeView = WYfmHtmlBlockNodeView;

package/build/cjs/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import type { IHTMLIFrameElementConfig } from '@diplodoc/html-extension/runtime';
 import { Node } from 'prosemirror-model';
 import { EditorView } from 'prosemirror-view';
 import { YfmHtmlBlockConsts } from '../YfmHtmlBlockSpecs/const';
+import { YfmHtmlBlockOptions } from '../index';
 export declare const cnYfmHtmlBlock: import("@bem-react/classname").ClassNameFormatter;
 export declare const cnHelper: import("@bem-react/classname").ClassNameFormatter;
 export declare function generateID(): string;
@@ -12,7 +12,6 @@ export declare const YfmHtmlBlockView: React.FC<{
     onChange: (attrs: {
         [YfmHtmlBlockConsts.NodeAttrs.srcdoc]: string;
     }) => void;
-    sanitize?: (dirtyHtml: string) => string;
-    useConfig?: () => IHTMLIFrameElementConfig | undefined;
+    options: YfmHtmlBlockOptions;
     view: EditorView;
 }>;

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.YfmHtmlBlockView = exports.generateID = exports.cnHelper = exports.cnYfmHtmlBlock = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const html_extension_1 = require("@diplodoc/html-extension");
 const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
@@ -137,7 +138,7 @@ 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, useConfig, sanitize }) => {
+const YfmHtmlBlockView = ({ onChange, node, getPos, view, options: { useConfig, sanitize, styles, baseTarget = '_' } }) => {
     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);
@@ -151,7 +152,13 @@ const YfmHtmlBlockView = ({ onChange, node, getPos, view, useConfig, sanitize })
                 unsetEditing();
             } }));
     }
-    const dirtyHtml = node.attrs[const_1.YfmHtmlBlockConsts.NodeAttrs.srcdoc];
+    let dirtyHtml = `<base target="${baseTarget}">` + node.attrs[const_1.YfmHtmlBlockConsts.NodeAttrs.srcdoc];
+    if (styles) {
+        const stylesContent = typeof styles === 'string'
+            ? `<link rel="stylesheet" href="${styles}" />`
+            : `<style>${(0, html_extension_1.getStyles)(styles)}</style>`;
+        dirtyHtml = stylesContent + dirtyHtml;
+    }
     const html = sanitize ? sanitize(dirtyHtml) : dirtyHtml;
     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')),

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

@@ -0,0 +1,7 @@
+import { SanitizeOptions } from '@diplodoc/transform/lib/sanitize';
+export declare const getYfmHtmlBlockOptions: (defaultOptions: SanitizeOptions) => SanitizeOptions;
+export interface GetSanitizeYfmHtmlBlockArgs {
+    options: SanitizeOptions;
+    sanitize?: (html: string, options?: SanitizeOptions) => string;
+}
+export declare const getSanitizeYfmHtmlBlock: ({ options, sanitize }: GetSanitizeYfmHtmlBlockArgs) => (content: string) => string;

package/build/cjs/extensions/yfm/YfmHtmlBlock/utils.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSanitizeYfmHtmlBlock = exports.getYfmHtmlBlockOptions = void 0;
+const tslib_1 = require("tslib");
+const sanitize_1 = tslib_1.__importDefault(require("@diplodoc/transform/lib/sanitize"));
+// yfmHtmlBlock additional css properties white list
+const getYfmHtmlBlockWhiteList = () => {
+    const whiteList = {};
+    whiteList['align-content'] = true; // default: auto
+    whiteList['align-items'] = true; // default: auto
+    whiteList['align-self'] = true; // default: auto
+    whiteList.columns = true; // default: depending on individual properties
+    whiteList['column-count'] = true; // default: auto
+    whiteList['column-fill'] = true; // default: balance
+    whiteList['column-gap'] = true; // default: normal
+    whiteList['column-rule'] = true; // default: depending on individual properties
+    whiteList['column-rule-color'] = true; // default: current color
+    whiteList['column-rule-style'] = true; // default: medium
+    whiteList['column-rule-width'] = true; // default: medium
+    whiteList['column-span'] = true; // default: none
+    whiteList['column-width'] = true; // default: auto
+    whiteList.flex = true; // default: depending on individual properties
+    whiteList['flex-basis'] = true; // default: auto
+    whiteList['flex-direction'] = true; // default: row
+    whiteList['flex-flow'] = true; // default: depending on individual properties
+    whiteList['flex-grow'] = true; // default: 0
+    whiteList['flex-shrink'] = true; // default: 1
+    whiteList['flex-wrap'] = true; // default: nowrap
+    whiteList.gap = true; // default: normal normal
+    whiteList.grid = true; // default: depending on individual properties
+    whiteList['grid-area'] = true; // default: depending on individual properties
+    whiteList['grid-auto-columns'] = true; // default: auto
+    whiteList['grid-auto-flow'] = true; // default: none
+    whiteList['grid-auto-rows'] = true; // default: auto
+    whiteList['grid-column'] = true; // default: depending on individual properties
+    whiteList['grid-column-end'] = true; // default: auto
+    whiteList['grid-column-start'] = true; // default: auto
+    whiteList['grid-row'] = true; // default: depending on individual properties
+    whiteList['grid-row-end'] = true; // default: auto
+    whiteList['grid-row-start'] = true; // default: auto
+    whiteList['grid-template'] = true; // default: depending on individual properties
+    whiteList['grid-template-areas'] = true; // default: none
+    whiteList['grid-template-columns'] = true; // default: none
+    whiteList['grid-template-rows'] = true; // default: none
+    whiteList['justify-content'] = true; // default: auto
+    whiteList['justify-items'] = true; // default: auto
+    whiteList['justify-self'] = true; // default: auto
+    whiteList['line-height'] = true; // default: normal
+    whiteList['object-fit'] = true; // default: fill
+    whiteList['object-position'] = true; // default: 50% 50%
+    whiteList.order = true; // default: 0
+    whiteList.orphans = true; // default: 2
+    whiteList['row-gap'] = true;
+    return whiteList;
+};
+// yfmHtmlBlock additional allowedTags
+const yfmHtmlBlockAllowedTags = ['link', 'base', 'style'];
+// yfmHtmlBlock additional allowedTags
+const yfmHtmlBlockAllowedAttributes = {
+    link: ['rel', 'href'],
+    base: ['target'],
+    style: [],
+};
+const getYfmHtmlBlockOptions = (defaultOptions) => {
+    var _a;
+    const defaultAllowedAttributes = defaultOptions.allowedAttributes;
+    return Object.assign(Object.assign({}, defaultOptions), { allowedAttributes: Object.assign(Object.assign({}, defaultAllowedAttributes), yfmHtmlBlockAllowedAttributes), allowedTags: typeof defaultOptions.allowedTags === 'boolean'
+            ? defaultOptions.allowedTags
+            : [...((_a = defaultOptions.allowedTags) !== null && _a !== void 0 ? _a : []), ...yfmHtmlBlockAllowedTags], cssWhiteList: Object.assign(Object.assign({}, defaultOptions.cssWhiteList), getYfmHtmlBlockWhiteList()) });
+};
+exports.getYfmHtmlBlockOptions = getYfmHtmlBlockOptions;
+const getSanitizeYfmHtmlBlock = ({ options, sanitize = sanitize_1.default }) => (content) => sanitize(content, (0, exports.getYfmHtmlBlockOptions)(options));
+exports.getSanitizeYfmHtmlBlock = getSanitizeYfmHtmlBlock;

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.0' !== 'undefined' ? '13.12.0' : 'unknown';
+exports.VERSION = typeof '13.13.0' !== 'undefined' ? '13.13.0' : 'unknown';

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

@@ -59,6 +59,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' */
@@ -88,5 +92,6 @@ export declare type EditorOptions = Pick<WysiwygEditorOptions, 'allowHTML' | 'li
     /** @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;
 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);
@@ -49,6 +50,7 @@ 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");
     }
     get _wysiwygView() {
         var _a;
@@ -134,6 +136,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");
@@ -273,8 +276,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();

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/NodeView.js

@@ -47,6 +47,6 @@ export class WYfmHtmlBlockNodeView {
         this.view.dispatch(tr);
     }
     renderYfmHtmlBlock() {
-        return createPortal(React.createElement(YfmHtmlBlockView, { getPos: this.getPos, node: this.node, onChange: this.onChange.bind(this), sanitize: this.options.sanitize, useConfig: this.options.useConfig, view: this.view }), this.dom);
+        return createPortal(React.createElement(YfmHtmlBlockView, { getPos: this.getPos, node: this.node, onChange: this.onChange.bind(this), options: this.options, view: this.view }), this.dom);
     }
 }

package/build/esm/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import type { IHTMLIFrameElementConfig } from '@diplodoc/html-extension/runtime';
 import { Node } from 'prosemirror-model';
 import { EditorView } from 'prosemirror-view';
 import { YfmHtmlBlockConsts } from '../YfmHtmlBlockSpecs/const';
+import { YfmHtmlBlockOptions } from '../index';
+import './YfmHtmlBlock.css';
 export declare const cnYfmHtmlBlock: import("@bem-react/classname").ClassNameFormatter;
 export declare const cnHelper: import("@bem-react/classname").ClassNameFormatter;
-import './YfmHtmlBlock.css';
 export declare function generateID(): string;
 export declare const YfmHtmlBlockView: React.FC<{
     getPos: () => number | undefined;
@@ -13,7 +13,6 @@ export declare const YfmHtmlBlockView: React.FC<{
     onChange: (attrs: {
         [YfmHtmlBlockConsts.NodeAttrs.srcdoc]: string;
     }) => void;
-    sanitize?: (dirtyHtml: string) => string;
-    useConfig?: () => IHTMLIFrameElementConfig | undefined;
+    options: YfmHtmlBlockOptions;
     view: EditorView;
 }>;

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

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
+import { getStyles } from '@diplodoc/html-extension';
 import { Ellipsis as DotsIcon, Eye } from '@gravity-ui/icons';
 import { Button, Icon, Label, Menu, Popup } from '@gravity-ui/uikit';
 import debounce from 'lodash/debounce';
@@ -8,9 +9,9 @@ import { i18n } from '../../../../i18n/common';
 import { useBooleanState } from '../../../../react-utils/hooks';
 import { removeNode } from '../../../../utils/remove-node';
 import { YfmHtmlBlockConsts } from '../YfmHtmlBlockSpecs/const';
+import './YfmHtmlBlock.css';
 export const cnYfmHtmlBlock = cn('yfm-html-block');
 export const cnHelper = cn('yfm-html-block-helper');
-import './YfmHtmlBlock.css';
 const b = cnYfmHtmlBlock;
 export function generateID() {
     return Math.random().toString(36).substr(2, 8);
@@ -133,7 +134,7 @@ 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, useConfig, sanitize }) => {
+export const YfmHtmlBlockView = ({ onChange, node, getPos, view, options: { useConfig, sanitize, styles, baseTarget = '_' } }) => {
     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);
@@ -147,7 +148,13 @@ export const YfmHtmlBlockView = ({ onChange, node, getPos, view, useConfig, sani
                 unsetEditing();
             } }));
     }
-    const dirtyHtml = node.attrs[YfmHtmlBlockConsts.NodeAttrs.srcdoc];
+    let dirtyHtml = `<base target="${baseTarget}">` + node.attrs[YfmHtmlBlockConsts.NodeAttrs.srcdoc];
+    if (styles) {
+        const stylesContent = typeof styles === 'string'
+            ? `<link rel="stylesheet" href="${styles}" />`
+            : `<style>${getStyles(styles)}</style>`;
+        dirtyHtml = stylesContent + dirtyHtml;
+    }
     const html = sanitize ? sanitize(dirtyHtml) : dirtyHtml;
     return (React.createElement("div", { className: b(), onDoubleClick: setEditing },
         React.createElement(Label, { className: b('label'), icon: React.createElement(Icon, { size: 16, data: Eye }) }, i18n('preview')),

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

@@ -0,0 +1,7 @@
+import { SanitizeOptions } from '@diplodoc/transform/lib/sanitize';
+export declare const getYfmHtmlBlockOptions: (defaultOptions: SanitizeOptions) => SanitizeOptions;
+export interface GetSanitizeYfmHtmlBlockArgs {
+    options: SanitizeOptions;
+    sanitize?: (html: string, options?: SanitizeOptions) => string;
+}
+export declare const getSanitizeYfmHtmlBlock: ({ options, sanitize }: GetSanitizeYfmHtmlBlockArgs) => (content: string) => string;

package/build/esm/extensions/yfm/YfmHtmlBlock/utils.js

@@ -0,0 +1,67 @@
+import diplodocSanitize from '@diplodoc/transform/lib/sanitize';
+// yfmHtmlBlock additional css properties white list
+const getYfmHtmlBlockWhiteList = () => {
+    const whiteList = {};
+    whiteList['align-content'] = true; // default: auto
+    whiteList['align-items'] = true; // default: auto
+    whiteList['align-self'] = true; // default: auto
+    whiteList.columns = true; // default: depending on individual properties
+    whiteList['column-count'] = true; // default: auto
+    whiteList['column-fill'] = true; // default: balance
+    whiteList['column-gap'] = true; // default: normal
+    whiteList['column-rule'] = true; // default: depending on individual properties
+    whiteList['column-rule-color'] = true; // default: current color
+    whiteList['column-rule-style'] = true; // default: medium
+    whiteList['column-rule-width'] = true; // default: medium
+    whiteList['column-span'] = true; // default: none
+    whiteList['column-width'] = true; // default: auto
+    whiteList.flex = true; // default: depending on individual properties
+    whiteList['flex-basis'] = true; // default: auto
+    whiteList['flex-direction'] = true; // default: row
+    whiteList['flex-flow'] = true; // default: depending on individual properties
+    whiteList['flex-grow'] = true; // default: 0
+    whiteList['flex-shrink'] = true; // default: 1
+    whiteList['flex-wrap'] = true; // default: nowrap
+    whiteList.gap = true; // default: normal normal
+    whiteList.grid = true; // default: depending on individual properties
+    whiteList['grid-area'] = true; // default: depending on individual properties
+    whiteList['grid-auto-columns'] = true; // default: auto
+    whiteList['grid-auto-flow'] = true; // default: none
+    whiteList['grid-auto-rows'] = true; // default: auto
+    whiteList['grid-column'] = true; // default: depending on individual properties
+    whiteList['grid-column-end'] = true; // default: auto
+    whiteList['grid-column-start'] = true; // default: auto
+    whiteList['grid-row'] = true; // default: depending on individual properties
+    whiteList['grid-row-end'] = true; // default: auto
+    whiteList['grid-row-start'] = true; // default: auto
+    whiteList['grid-template'] = true; // default: depending on individual properties
+    whiteList['grid-template-areas'] = true; // default: none
+    whiteList['grid-template-columns'] = true; // default: none
+    whiteList['grid-template-rows'] = true; // default: none
+    whiteList['justify-content'] = true; // default: auto
+    whiteList['justify-items'] = true; // default: auto
+    whiteList['justify-self'] = true; // default: auto
+    whiteList['line-height'] = true; // default: normal
+    whiteList['object-fit'] = true; // default: fill
+    whiteList['object-position'] = true; // default: 50% 50%
+    whiteList.order = true; // default: 0
+    whiteList.orphans = true; // default: 2
+    whiteList['row-gap'] = true;
+    return whiteList;
+};
+// yfmHtmlBlock additional allowedTags
+const yfmHtmlBlockAllowedTags = ['link', 'base', 'style'];
+// yfmHtmlBlock additional allowedTags
+const yfmHtmlBlockAllowedAttributes = {
+    link: ['rel', 'href'],
+    base: ['target'],
+    style: [],
+};
+export const getYfmHtmlBlockOptions = (defaultOptions) => {
+    var _a;
+    const defaultAllowedAttributes = defaultOptions.allowedAttributes;
+    return Object.assign(Object.assign({}, defaultOptions), { allowedAttributes: Object.assign(Object.assign({}, defaultAllowedAttributes), yfmHtmlBlockAllowedAttributes), allowedTags: typeof defaultOptions.allowedTags === 'boolean'
+            ? defaultOptions.allowedTags
+            : [...((_a = defaultOptions.allowedTags) !== null && _a !== void 0 ? _a : []), ...yfmHtmlBlockAllowedTags], cssWhiteList: Object.assign(Object.assign({}, defaultOptions.cssWhiteList), getYfmHtmlBlockWhiteList()) });
+};
+export const getSanitizeYfmHtmlBlock = ({ options, sanitize = diplodocSanitize }) => (content) => sanitize(content, getYfmHtmlBlockOptions(options));

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.0' !== 'undefined' ? '13.12.0' : 'unknown';
+export const VERSION = typeof '13.13.0' !== 'undefined' ? '13.13.0' : 'unknown';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/markdown-editor",
-  "version": "13.12.0",
+  "version": "13.13.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.1",
+    "@diplodoc/html-extension": "1.3.3",
     "@diplodoc/latex-extension": "1.0.3",
     "@diplodoc/mermaid-extension": "1.2.1",
     "@diplodoc/transform": "4.22.0",
@@ -223,6 +223,7 @@
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
     "@types/rimraf": "3.0.2",
+    "@types/sanitize-html": "2.11.0",
     "bem-cn-lite": "4.1.0",
     "esbuild-sass-plugin": "2.15.0",
     "eslint": "8.56.0",