@gravity-ui/markdown-editor 13.13.0 → 13.15.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'];
@@ -58,6 +63,8 @@ export declare type MarkupConfig = {
      * See more https://codemirror.net/docs/ref/#state.EditorState.languageDataAt
      */
     languageData?: YfmLangOptions['languageData'];
+    /** Config for @codemirror/autocomplete https://codemirror.net/docs/ref/#autocomplete.autocompletion%5Econfig */
+    autocompletion?: CreateCodemirrorParams['autocompletion'];
 };
 export declare type EscapeConfig = {
     commonEscape?: RegExp;
@@ -86,6 +93,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;
@@ -163,6 +165,7 @@ class EditorImpl extends event_emitter_1.SafeEventEmitter {
                 disabledExtensions: tslib_1.__classPrivateFieldGet(this, _EditorImpl_markupConfig, "f").disabledExtensions,
                 keymaps: tslib_1.__classPrivateFieldGet(this, _EditorImpl_markupConfig, "f").keymaps,
                 yfmLangOptions: { languageData: tslib_1.__classPrivateFieldGet(this, _EditorImpl_markupConfig, "f").languageData },
+                autocompletion: tslib_1.__classPrivateFieldGet(this, _EditorImpl_markupConfig, "f").autocompletion,
                 receiver: this,
             })), "f");
         }
@@ -202,9 +205,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 +291,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/YfmHeading/YfmHeadingSpecs/index.js

@@ -23,12 +23,20 @@ const YfmHeadingSpecs = (builder, opts) => {
                 defining: true,
                 selectable: true,
                 parseDOM: [
-                    { tag: 'h1', getAttrs: (0, utils_1.getNodeAttrs)(1) },
-                    { tag: 'h2', getAttrs: (0, utils_1.getNodeAttrs)(2) },
-                    { tag: 'h3', getAttrs: (0, utils_1.getNodeAttrs)(3) },
-                    { tag: 'h4', getAttrs: (0, utils_1.getNodeAttrs)(4) },
-                    { tag: 'h5', getAttrs: (0, utils_1.getNodeAttrs)(5) },
-                    { tag: 'h6', getAttrs: (0, utils_1.getNodeAttrs)(6) },
+                    { tag: 'h1', getAttrs: (0, utils_1.getNodeAttrs)(1), priority: 100, consuming: true },
+                    { tag: 'h2', getAttrs: (0, utils_1.getNodeAttrs)(2), priority: 100, consuming: true },
+                    { tag: 'h3', getAttrs: (0, utils_1.getNodeAttrs)(3), priority: 100, consuming: true },
+                    { tag: 'h4', getAttrs: (0, utils_1.getNodeAttrs)(4), priority: 100, consuming: true },
+                    { tag: 'h5', getAttrs: (0, utils_1.getNodeAttrs)(5), priority: 100, consuming: true },
+                    { tag: 'h6', getAttrs: (0, utils_1.getNodeAttrs)(6), priority: 100, consuming: true },
+                    {
+                        // ignore anchor link inside headings
+                        tag: 'a.yfm-anchor',
+                        context: `${const_1.headingNodeName}/`,
+                        skip: true,
+                        ignore: true,
+                        priority: 1000,
+                    },
                 ],
                 toDOM(node) {
                     const id = node.attrs[const_1.YfmHeadingAttr.Id];

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/YfmHtmlBlockSpecs/index.d.ts

@@ -1,12 +1,9 @@
-import { BaseTarget, StylesObject } from '@diplodoc/html-extension/plugin';
+import { PluginOptions } from '@diplodoc/html-extension/plugin/transform';
 import type { ExtensionNodeSpec } from '../../../../core';
 export { yfmHtmlBlockNodeName } from './const';
-export declare type YfmHtmlBlockSpecsOptions = {
+export interface YfmHtmlBlockSpecsOptions extends Omit<PluginOptions, 'runtimeJsPath' | 'containerClasses' | 'bundle'> {
     nodeView?: ExtensionNodeSpec['view'];
-    sanitize?: (dirtyHtml: string) => string;
-    styles?: string | StylesObject;
-    baseTarget?: BaseTarget;
-};
+}
 export declare const YfmHtmlBlockSpecs: import("../../../../core").ExtensionWithOptions<YfmHtmlBlockSpecsOptions> & {
     readonly NodeName: "yfm_html_block";
     readonly NodeAttrs: typeof import("./const").YfmHtmlBlockAttrs;

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

@@ -1,13 +1,10 @@
-import { BaseTarget, StylesObject } from '@diplodoc/html-extension/plugin';
+import { PluginOptions } from '@diplodoc/html-extension/plugin/transform';
 import type { IHTMLIFrameElementConfig } from '@diplodoc/html-extension/runtime';
 import { Action, ExtensionAuto } from '../../../core';
 import { YfmHtmlBlockAction } from './YfmHtmlBlockSpecs/const';
-export declare type YfmHtmlBlockOptions = {
+export interface YfmHtmlBlockOptions extends Omit<PluginOptions, 'runtimeJsPath' | 'containerClasses' | 'bundle'> {
     useConfig?: () => IHTMLIFrameElementConfig | undefined;
-    sanitize?: (dirtyHtml: string) => string;
-    styles?: string | StylesObject;
-    baseTarget?: BaseTarget;
-};
+}
 export declare const YfmHtmlBlock: ExtensionAuto<YfmHtmlBlockOptions>;
 declare global {
     namespace WysiwygEditor {

package/build/cjs/markup/codemirror/create.d.ts

@@ -1,3 +1,4 @@
+import { autocompletion } from '@codemirror/autocomplete';
 import type { Extension, StateCommand } from '@codemirror/state';
 import { EditorView, EditorViewConfig, KeyBinding } from '@codemirror/view';
 import { EventMap } from '../../bundle/Editor';
@@ -6,6 +7,7 @@ import { Receiver } from '../../utils';
 import { FileUploadHandler } from './files-upload-facet';
 import { type YfmLangOptions } from './yfm';
 export type { YfmLangOptions };
+declare type Autocompletion = Parameters<typeof autocompletion>[0];
 export declare type CreateCodemirrorParams = {
     doc: EditorViewConfig['doc'];
     placeholderText: string;
@@ -24,6 +26,7 @@ export declare type CreateCodemirrorParams = {
     keymaps?: readonly KeyBinding[];
     receiver?: Receiver<EventMap>;
     yfmLangOptions?: YfmLangOptions;
+    autocompletion?: Autocompletion;
 };
 export declare function createCodemirror(params: CreateCodemirrorParams): EditorView;
 export declare function withLogger(action: string, command: StateCommand): StateCommand;

package/build/cjs/markup/codemirror/create.js

@@ -16,7 +16,7 @@ const react_facet_1 = require("./react-facet");
 const plugin_1 = require("./search-plugin/plugin");
 const yfm_1 = require("./yfm");
 function createCodemirror(params) {
-    const { doc, placeholderText, reactRenderer, onCancel, onScroll, onSubmit, onChange, onDocChange, extensions: extraExtensions, disabledExtensions = {}, keymaps = [], receiver, yfmLangOptions, } = params;
+    const { doc, placeholderText, reactRenderer, onCancel, onScroll, onSubmit, onChange, onDocChange, extensions: extraExtensions, disabledExtensions = {}, keymaps = [], receiver, yfmLangOptions, autocompletion: autocompletionConfig, } = params;
     const extensions = [gravity_1.gravityTheme, (0, view_1.placeholder)(placeholderText)];
     if (!disabledExtensions.history) {
         extensions.push((0, commands_1.history)());
@@ -58,7 +58,7 @@ function createCodemirror(params) {
         ...commands_1.defaultKeymap,
         ...(disabledExtensions.history ? [] : commands_1.historyKeymap),
         ...keymaps,
-    ]), (0, autocomplete_1.autocompletion)(), (0, yfm_1.yfmLang)(yfmLangOptions), react_facet_1.ReactRendererFacet.of(reactRenderer), pairing_chars_1.PairingCharactersExtension, view_1.EditorView.lineWrapping, view_1.EditorView.contentAttributes.of({ spellcheck: 'true' }), view_1.EditorView.domEventHandlers({
+    ]), (0, autocomplete_1.autocompletion)(autocompletionConfig), (0, yfm_1.yfmLang)(yfmLangOptions), react_facet_1.ReactRendererFacet.of(reactRenderer), pairing_chars_1.PairingCharactersExtension, view_1.EditorView.lineWrapping, view_1.EditorView.contentAttributes.of({ spellcheck: 'true' }), view_1.EditorView.domEventHandlers({
         scroll(event) {
             onScroll(event);
         },

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.15.0' !== 'undefined' ? '13.15.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'];
@@ -58,6 +63,8 @@ export declare type MarkupConfig = {
      * See more https://codemirror.net/docs/ref/#state.EditorState.languageDataAt
      */
     languageData?: YfmLangOptions['languageData'];
+    /** Config for @codemirror/autocomplete https://codemirror.net/docs/ref/#autocomplete.autocompletion%5Econfig */
+    autocompletion?: CreateCodemirrorParams['autocompletion'];
 };
 export declare type EscapeConfig = {
     commonEscape?: RegExp;
@@ -86,6 +93,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;
@@ -160,6 +162,7 @@ export class EditorImpl extends SafeEventEmitter {
                 disabledExtensions: __classPrivateFieldGet(this, _EditorImpl_markupConfig, "f").disabledExtensions,
                 keymaps: __classPrivateFieldGet(this, _EditorImpl_markupConfig, "f").keymaps,
                 yfmLangOptions: { languageData: __classPrivateFieldGet(this, _EditorImpl_markupConfig, "f").languageData },
+                autocompletion: __classPrivateFieldGet(this, _EditorImpl_markupConfig, "f").autocompletion,
                 receiver: this,
             })), "f");
         }
@@ -199,9 +202,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 +287,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/YfmHeading/YfmHeadingSpecs/index.js

@@ -19,12 +19,20 @@ export const YfmHeadingSpecs = (builder, opts) => {
                 defining: true,
                 selectable: true,
                 parseDOM: [
-                    { tag: 'h1', getAttrs: getNodeAttrs(1) },
-                    { tag: 'h2', getAttrs: getNodeAttrs(2) },
-                    { tag: 'h3', getAttrs: getNodeAttrs(3) },
-                    { tag: 'h4', getAttrs: getNodeAttrs(4) },
-                    { tag: 'h5', getAttrs: getNodeAttrs(5) },
-                    { tag: 'h6', getAttrs: getNodeAttrs(6) },
+                    { tag: 'h1', getAttrs: getNodeAttrs(1), priority: 100, consuming: true },
+                    { tag: 'h2', getAttrs: getNodeAttrs(2), priority: 100, consuming: true },
+                    { tag: 'h3', getAttrs: getNodeAttrs(3), priority: 100, consuming: true },
+                    { tag: 'h4', getAttrs: getNodeAttrs(4), priority: 100, consuming: true },
+                    { tag: 'h5', getAttrs: getNodeAttrs(5), priority: 100, consuming: true },
+                    { tag: 'h6', getAttrs: getNodeAttrs(6), priority: 100, consuming: true },
+                    {
+                        // ignore anchor link inside headings
+                        tag: 'a.yfm-anchor',
+                        context: `${headingNodeName}/`,
+                        skip: true,
+                        ignore: true,
+                        priority: 1000,
+                    },
                 ],
                 toDOM(node) {
                     const id = node.attrs[YfmHeadingAttr.Id];

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/YfmHtmlBlockSpecs/index.d.ts

@@ -1,12 +1,9 @@
-import { BaseTarget, StylesObject } from '@diplodoc/html-extension/plugin';
+import { PluginOptions } from '@diplodoc/html-extension/plugin/transform';
 import type { ExtensionNodeSpec } from '../../../../core';
 export { yfmHtmlBlockNodeName } from './const';
-export declare type YfmHtmlBlockSpecsOptions = {
+export interface YfmHtmlBlockSpecsOptions extends Omit<PluginOptions, 'runtimeJsPath' | 'containerClasses' | 'bundle'> {
     nodeView?: ExtensionNodeSpec['view'];
-    sanitize?: (dirtyHtml: string) => string;
-    styles?: string | StylesObject;
-    baseTarget?: BaseTarget;
-};
+}
 export declare const YfmHtmlBlockSpecs: import("../../../../core").ExtensionWithOptions<YfmHtmlBlockSpecsOptions> & {
     readonly NodeName: "yfm_html_block";
     readonly NodeAttrs: typeof import("./const").YfmHtmlBlockAttrs;

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

@@ -1,13 +1,10 @@
-import { BaseTarget, StylesObject } from '@diplodoc/html-extension/plugin';
+import { PluginOptions } from '@diplodoc/html-extension/plugin/transform';
 import type { IHTMLIFrameElementConfig } from '@diplodoc/html-extension/runtime';
 import { Action, ExtensionAuto } from '../../../core';
 import { YfmHtmlBlockAction } from './YfmHtmlBlockSpecs/const';
-export declare type YfmHtmlBlockOptions = {
+export interface YfmHtmlBlockOptions extends Omit<PluginOptions, 'runtimeJsPath' | 'containerClasses' | 'bundle'> {
     useConfig?: () => IHTMLIFrameElementConfig | undefined;
-    sanitize?: (dirtyHtml: string) => string;
-    styles?: string | StylesObject;
-    baseTarget?: BaseTarget;
-};
+}
 export declare const YfmHtmlBlock: ExtensionAuto<YfmHtmlBlockOptions>;
 declare global {
     namespace WysiwygEditor {

package/build/esm/markup/codemirror/create.d.ts

@@ -1,3 +1,4 @@
+import { autocompletion } from '@codemirror/autocomplete';
 import type { Extension, StateCommand } from '@codemirror/state';
 import { EditorView, EditorViewConfig, KeyBinding } from '@codemirror/view';
 import { EventMap } from '../../bundle/Editor';
@@ -6,6 +7,7 @@ import { Receiver } from '../../utils';
 import { FileUploadHandler } from './files-upload-facet';
 import { type YfmLangOptions } from './yfm';
 export type { YfmLangOptions };
+declare type Autocompletion = Parameters<typeof autocompletion>[0];
 export declare type CreateCodemirrorParams = {
     doc: EditorViewConfig['doc'];
     placeholderText: string;
@@ -24,6 +26,7 @@ export declare type CreateCodemirrorParams = {
     keymaps?: readonly KeyBinding[];
     receiver?: Receiver<EventMap>;
     yfmLangOptions?: YfmLangOptions;
+    autocompletion?: Autocompletion;
 };
 export declare function createCodemirror(params: CreateCodemirrorParams): EditorView;
 export declare function withLogger(action: string, command: StateCommand): StateCommand;

package/build/esm/markup/codemirror/create.js

@@ -13,7 +13,7 @@ import { ReactRendererFacet } from './react-facet';
 import { SearchPanelPlugin } from './search-plugin/plugin';
 import { yfmLang } from './yfm';
 export function createCodemirror(params) {
-    const { doc, placeholderText, reactRenderer, onCancel, onScroll, onSubmit, onChange, onDocChange, extensions: extraExtensions, disabledExtensions = {}, keymaps = [], receiver, yfmLangOptions, } = params;
+    const { doc, placeholderText, reactRenderer, onCancel, onScroll, onSubmit, onChange, onDocChange, extensions: extraExtensions, disabledExtensions = {}, keymaps = [], receiver, yfmLangOptions, autocompletion: autocompletionConfig, } = params;
     const extensions = [gravityTheme, placeholder(placeholderText)];
     if (!disabledExtensions.history) {
         extensions.push(history());
@@ -55,7 +55,7 @@ export function createCodemirror(params) {
         ...defaultKeymap,
         ...(disabledExtensions.history ? [] : historyKeymap),
         ...keymaps,
-    ]), autocompletion(), yfmLang(yfmLangOptions), ReactRendererFacet.of(reactRenderer), PairingCharactersExtension, EditorView.lineWrapping, EditorView.contentAttributes.of({ spellcheck: 'true' }), EditorView.domEventHandlers({
+    ]), autocompletion(autocompletionConfig), yfmLang(yfmLangOptions), ReactRendererFacet.of(reactRenderer), PairingCharactersExtension, EditorView.lineWrapping, EditorView.contentAttributes.of({ spellcheck: 'true' }), EditorView.domEventHandlers({
         scroll(event) {
             onScroll(event);
         },

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.15.0' !== 'undefined' ? '13.15.0' : 'unknown';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/markdown-editor",
-  "version": "13.13.0",
+  "version": "13.15.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",