@gravity-ui/markdown-editor 13.13.0 → 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'];
@@ -86,6 +91,7 @@ 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;

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_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");
@@ -35,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");
@@ -54,6 +55,7 @@ class EditorImpl extends event_emitter_1.SafeEventEmitter {
         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;
@@ -202,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) {
@@ -284,4 +290,4 @@ class EditorImpl extends event_emitter_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_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/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.13.0' !== 'undefined' ? '13.13.0' : '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'];
@@ -86,6 +91,7 @@ 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;

package/build/esm/bundle/Editor.js

@@ -1,4 +1,4 @@
-var _EditorImpl_markup, _EditorImpl_editorMode, _EditorImpl_toolbarVisible, _EditorImpl_splitModeEnabled, _EditorImpl_splitMode, _EditorImpl_renderPreview, _EditorImpl_wysiwygEditor, _EditorImpl_markupEditor, _EditorImpl_markupConfig, _EditorImpl_escapeConfig, _EditorImpl_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';
@@ -32,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");
@@ -51,6 +52,7 @@ export class EditorImpl extends SafeEventEmitter {
         __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;
@@ -199,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) {
@@ -280,4 +286,4 @@ export class EditorImpl extends SafeEventEmitter {
         return (serializedEditorMarkup === null || serializedEditorMarkup === void 0 ? void 0 : serializedEditorMarkup.trim()) !== wysiwygValue.trim();
     }
 }
-_EditorImpl_markup = new WeakMap(), _EditorImpl_editorMode = new WeakMap(), _EditorImpl_toolbarVisible = new WeakMap(), _EditorImpl_splitModeEnabled = new WeakMap(), _EditorImpl_splitMode = new WeakMap(), _EditorImpl_renderPreview = new WeakMap(), _EditorImpl_wysiwygEditor = new WeakMap(), _EditorImpl_markupEditor = new WeakMap(), _EditorImpl_markupConfig = new WeakMap(), _EditorImpl_escapeConfig = new WeakMap(), _EditorImpl_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/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.13.0' !== 'undefined' ? '13.13.0' : '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.13.0",
+  "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",