@gravity-ui/markdown-editor 13.15.0 → 13.17.0

package/build/cjs/bundle/Editor.js

@@ -3,6 +3,7 @@ var _EditorImpl_markup, _EditorImpl_editorMode, _EditorImpl_toolbarVisible, _Edi
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditorImpl = void 0;
 const tslib_1 = require("tslib");
+const view_1 = require("@codemirror/view");
 const prosemirror_state_1 = require("prosemirror-state");
 const core_1 = require("../core");
 const bundle_1 = require("../i18n/bundle");
@@ -265,11 +266,28 @@ class EditorImpl extends event_emitter_1.SafeEventEmitter {
                 let cmLine = line + 1; // lines in codemirror is 1-based
                 cmLine = Math.max(cmLine, 1);
                 cmLine = Math.min(cmLine, view.state.doc.lines);
+                const yMargin = getTopOffset();
+                const anchor = view.state.doc.line(cmLine).from;
                 view.dispatch({
                     scrollIntoView: true,
-                    selection: { anchor: view.state.doc.line(cmLine).from },
+                    selection: { anchor },
+                    effects: [
+                        view_1.EditorView.scrollIntoView(anchor, { y: 'start', x: 'start', yMargin }),
+                    ],
                 });
                 break;
+                // eslint-disable-next-line no-inner-declarations
+                function getTopOffset() {
+                    const TOOLBAR_HEIGHT = 36; //px
+                    const TOOLBAR_BOTTOM_OFFSET = 8; // px
+                    const TOOLBAR_TOP_ADDITIONAL_OFFSET = 8; // px
+                    const TOOLBAR_TOP_OFFSET_VAR = '--g-md-toolbar-sticky-offset';
+                    const topOffsetValue = window
+                        .getComputedStyle(view.dom)
+                        .getPropertyValue(TOOLBAR_TOP_OFFSET_VAR);
+                    const toolbarTopOffset = calculateCSSNumberValue(topOffsetValue) + TOOLBAR_TOP_ADDITIONAL_OFFSET;
+                    return toolbarTopOffset + TOOLBAR_HEIGHT + TOOLBAR_BOTTOM_OFFSET;
+                }
             }
             case 'wysiwyg': {
                 const node = this.wysiwygEditor.dom.querySelector(`[data-line="${line}"]`);
@@ -292,3 +310,14 @@ 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_beforeEditorModeChange = new WeakMap();
+function calculateCSSNumberValue(cssValue) {
+    const tmp = document.createElement('div');
+    tmp.style.position = 'absolute';
+    tmp.style.top = '-99999px';
+    tmp.style.left = '-99999px';
+    tmp.style.width = `calc(${cssValue})`;
+    document.body.appendChild(tmp);
+    const value = tmp.getBoundingClientRect().width;
+    tmp.remove();
+    return value;
+}

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

@@ -22,6 +22,16 @@ function generateID() {
 exports.generateID = generateID;
 const DEFAULT_PADDING = 20;
 const DEFAULT_DELAY = 100;
+const createLinkCLickHandler = (value, document) => (event) => {
+    event.preventDefault();
+    const targetId = value.getAttribute('href');
+    if (targetId) {
+        const targetElement = document.querySelector(targetId);
+        if (targetElement) {
+            targetElement.scrollIntoView({ behavior: 'smooth' });
+        }
+    }
+};
 const YfmHtmlBlockPreview = ({ html, onСlick, config }) => {
     var _a, _b, _c, _d, _e, _f;
     const ref = (0, react_1.useRef)(null);
@@ -30,11 +40,6 @@ const YfmHtmlBlockPreview = ({ html, onСlick, config }) => {
     const resizeConfig = (0, react_1.useRef)({});
     const [height, setHeight] = (0, react_1.useState)('100%');
     (0, react_1.useEffect)(() => {
-        var _a, _b;
-        resizeConfig.current = {
-            padding: (_a = config === null || config === void 0 ? void 0 : config.resizePadding) !== null && _a !== void 0 ? _a : DEFAULT_PADDING,
-            delay: (_b = config === null || config === void 0 ? void 0 : config.resizeDelay) !== null && _b !== void 0 ? _b : DEFAULT_DELAY,
-        };
         setStyles(config === null || config === void 0 ? void 0 : config.styles);
         setClassNames(config === null || config === void 0 ? void 0 : config.classNames);
     }, [config, (_c = (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.document) === null || _c === void 0 ? void 0 : _c.body]);
@@ -103,18 +108,35 @@ const YfmHtmlBlockPreview = ({ html, onСlick, config }) => {
             styles.current = newStyles;
         }
     };
-    (0, react_1.useEffect)(() => {
+    // finds all relative links (href^="#") and changes their click behavior
+    const createAnchorLinkHandlers = (type) => () => {
         var _a;
+        const document = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.contentWindow.document;
+        if (document) {
+            document.querySelectorAll('a[href^="#"]').forEach((value) => {
+                const handler = createLinkCLickHandler(value, document);
+                if (type === 'add') {
+                    value.addEventListener('click', handler);
+                }
+                else {
+                    value.removeEventListener('click', handler);
+                }
+            });
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
         (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener('load', handleLoadIFrame);
+        (_b = ref.current) === null || _b === void 0 ? void 0 : _b.addEventListener('load', createAnchorLinkHandlers('add'));
         return () => {
-            var _a;
+            var _a, _b;
             (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('load', handleLoadIFrame);
+            (_b = ref.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('load', createAnchorLinkHandlers('remove'));
         };
     }, [html]);
     (0, react_1.useEffect)(() => {
-        var _a, _b;
         if (ref.current) {
-            const resizeObserver = new window.ResizeObserver((0, debounce_1.default)(handleResizeIFrame, (_b = (_a = resizeConfig.current) === null || _a === void 0 ? void 0 : _a.delay) !== null && _b !== void 0 ? _b : DEFAULT_DELAY));
+            const resizeObserver = new window.ResizeObserver((0, debounce_1.default)(handleResizeIFrame, DEFAULT_DELAY));
             resizeObserver.observe(ref.current);
         }
     }, [(_f = (_e = (_d = ref.current) === null || _d === void 0 ? void 0 : _d.contentWindow) === null || _e === void 0 ? void 0 : _e.document) === null || _f === void 0 ? void 0 : _f.body]);

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

@@ -1,7 +1,7 @@
 import { PluginOptions } from '@diplodoc/html-extension/plugin/transform';
 import type { ExtensionNodeSpec } from '../../../../core';
 export { yfmHtmlBlockNodeName } from './const';
-export interface YfmHtmlBlockSpecsOptions extends Omit<PluginOptions, 'runtimeJsPath' | 'containerClasses' | 'bundle'> {
+export interface YfmHtmlBlockSpecsOptions extends Omit<PluginOptions, 'runtimeJsPath' | 'containerClasses' | 'bundle' | 'embeddingMode'> {
     nodeView?: ExtensionNodeSpec['view'];
 }
 export declare const YfmHtmlBlockSpecs: import("../../../../core").ExtensionWithOptions<YfmHtmlBlockSpecsOptions> & {

package/build/cjs/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockSpecs/index.js

@@ -10,14 +10,14 @@ Object.defineProperty(exports, "yfmHtmlBlockNodeName", { enumerable: true, get:
 const YfmHtmlBlockSpecsExtension = (builder, _a) => {
     var { nodeView } = _a, options = tslib_1.__rest(_a, ["nodeView"]);
     builder
-        .configureMd((md) => md.use((0, html_extension_1.transform)(Object.assign({ bundle: false }, options)), {}))
+        .configureMd((md) => md.use((0, html_extension_1.transform)(Object.assign({ bundle: false, embeddingMode: 'srcdoc' }, options)), {}))
         .addNode(const_1.YfmHtmlBlockConsts.NodeName, () => ({
         fromMd: {
             tokenSpec: {
                 name: const_1.YfmHtmlBlockConsts.NodeName,
                 type: 'node',
                 noCloseToken: true,
-                getAttrs: (token) => { var _a; return Object.fromEntries((_a = token.attrs) !== null && _a !== void 0 ? _a : []); },
+                getAttrs: ({ content }) => ({ srcdoc: content }),
             },
         },
         spec: {

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

@@ -2,7 +2,7 @@ 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 interface YfmHtmlBlockOptions extends Omit<PluginOptions, 'runtimeJsPath' | 'containerClasses' | 'bundle'> {
+export interface YfmHtmlBlockOptions extends Omit<PluginOptions, 'runtimeJsPath' | 'containerClasses' | 'bundle' | 'embeddingMode'> {
     useConfig?: () => IHTMLIFrameElementConfig | undefined;
 }
 export declare const YfmHtmlBlock: ExtensionAuto<YfmHtmlBlockOptions>;

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

@@ -6,6 +6,7 @@ const sanitize_1 = tslib_1.__importDefault(require("@diplodoc/transform/lib/sani
 // yfmHtmlBlock additional css properties white list
 const getYfmHtmlBlockWhiteList = () => {
     const whiteList = {};
+    // flex, grid, column
     whiteList['align-content'] = true; // default: auto
     whiteList['align-items'] = true; // default: auto
     whiteList['align-self'] = true; // default: auto
@@ -51,6 +52,24 @@ const getYfmHtmlBlockWhiteList = () => {
     whiteList.order = true; // default: 0
     whiteList.orphans = true; // default: 2
     whiteList['row-gap'] = true;
+    // position, opacity, overflow
+    whiteList['all'] = true; // default: depending on individual properties
+    whiteList['bottom'] = true; // default: auto
+    whiteList['content'] = true; // default: normal
+    whiteList['cursor'] = true; // default: auto
+    whiteList['direction'] = true; // default: ltr
+    whiteList['left'] = true; // default: auto
+    whiteList['line-break'] = true; // default: auto
+    whiteList['opacity'] = true; // default: 1
+    whiteList['overflow'] = true; // default: depending on individual properties
+    whiteList['overflow-wrap'] = true; // default: normal
+    whiteList['overflow-x'] = true; // default: visible
+    whiteList['overflow-y'] = true; // default: visible
+    whiteList['position'] = true; // default: static
+    whiteList['right'] = true; // default: auto
+    whiteList['top'] = true; // default: auto
+    whiteList['white-space'] = true; // default: normal
+    whiteList['z-index'] = true; // default: auto
     return whiteList;
 };
 // yfmHtmlBlock additional allowedTags

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.15.0' !== 'undefined' ? '13.15.0' : 'unknown';
+exports.VERSION = typeof '13.17.0' !== 'undefined' ? '13.17.0' : 'unknown';

package/build/cjs/view/hocs/withYfmHtml/index.js

@@ -9,13 +9,13 @@ function withYfmHtmlBlock(opts) {
     return (Component) => (0, react_1.forwardRef)(function WithYfmHtml(props, ref) {
         const { meta, html, yfmHtmlBlockConfig } = props;
         (0, useYfmHtmlBlockRuntime_1.useYfmHtmlBlockRuntime)(meta, opts.runtime);
-        const yfmHtmlBlock = (0, react_2.useDiplodocHtml)();
+        const yfmHtmlBlock = (0, react_2.useDiplodocEmbeddedContentController)();
         (0, react_1.useEffect)(() => {
             if (yfmHtmlBlock) {
                 if (yfmHtmlBlockConfig) {
                     yfmHtmlBlock.setConfig(yfmHtmlBlockConfig);
                 }
-                yfmHtmlBlock.reinitialize();
+                yfmHtmlBlock.initialize();
             }
         }, [yfmHtmlBlock, html, yfmHtmlBlockConfig]);
         return react_1.default.createElement(Component, Object.assign({}, props, { ref: ref }));

package/build/esm/bundle/Editor.js

@@ -1,5 +1,6 @@
 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 { EditorView as CMEditorView } from '@codemirror/view';
 import { TextSelection } from 'prosemirror-state';
 import { WysiwygEditor } from '../core';
 import { i18n } from '../i18n/bundle';
@@ -262,11 +263,28 @@ export class EditorImpl extends SafeEventEmitter {
                 let cmLine = line + 1; // lines in codemirror is 1-based
                 cmLine = Math.max(cmLine, 1);
                 cmLine = Math.min(cmLine, view.state.doc.lines);
+                const yMargin = getTopOffset();
+                const anchor = view.state.doc.line(cmLine).from;
                 view.dispatch({
                     scrollIntoView: true,
-                    selection: { anchor: view.state.doc.line(cmLine).from },
+                    selection: { anchor },
+                    effects: [
+                        CMEditorView.scrollIntoView(anchor, { y: 'start', x: 'start', yMargin }),
+                    ],
                 });
                 break;
+                // eslint-disable-next-line no-inner-declarations
+                function getTopOffset() {
+                    const TOOLBAR_HEIGHT = 36; //px
+                    const TOOLBAR_BOTTOM_OFFSET = 8; // px
+                    const TOOLBAR_TOP_ADDITIONAL_OFFSET = 8; // px
+                    const TOOLBAR_TOP_OFFSET_VAR = '--g-md-toolbar-sticky-offset';
+                    const topOffsetValue = window
+                        .getComputedStyle(view.dom)
+                        .getPropertyValue(TOOLBAR_TOP_OFFSET_VAR);
+                    const toolbarTopOffset = calculateCSSNumberValue(topOffsetValue) + TOOLBAR_TOP_ADDITIONAL_OFFSET;
+                    return toolbarTopOffset + TOOLBAR_HEIGHT + TOOLBAR_BOTTOM_OFFSET;
+                }
             }
             case 'wysiwyg': {
                 const node = this.wysiwygEditor.dom.querySelector(`[data-line="${line}"]`);
@@ -288,3 +306,14 @@ export class EditorImpl extends SafeEventEmitter {
     }
 }
 _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();
+function calculateCSSNumberValue(cssValue) {
+    const tmp = document.createElement('div');
+    tmp.style.position = 'absolute';
+    tmp.style.top = '-99999px';
+    tmp.style.left = '-99999px';
+    tmp.style.width = `calc(${cssValue})`;
+    document.body.appendChild(tmp);
+    const value = tmp.getBoundingClientRect().width;
+    tmp.remove();
+    return value;
+}

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

@@ -18,6 +18,16 @@ export function generateID() {
 }
 const DEFAULT_PADDING = 20;
 const DEFAULT_DELAY = 100;
+const createLinkCLickHandler = (value, document) => (event) => {
+    event.preventDefault();
+    const targetId = value.getAttribute('href');
+    if (targetId) {
+        const targetElement = document.querySelector(targetId);
+        if (targetElement) {
+            targetElement.scrollIntoView({ behavior: 'smooth' });
+        }
+    }
+};
 const YfmHtmlBlockPreview = ({ html, onСlick, config }) => {
     var _a, _b, _c, _d, _e, _f;
     const ref = useRef(null);
@@ -26,11 +36,6 @@ const YfmHtmlBlockPreview = ({ html, onСlick, config }) => {
     const resizeConfig = useRef({});
     const [height, setHeight] = useState('100%');
     useEffect(() => {
-        var _a, _b;
-        resizeConfig.current = {
-            padding: (_a = config === null || config === void 0 ? void 0 : config.resizePadding) !== null && _a !== void 0 ? _a : DEFAULT_PADDING,
-            delay: (_b = config === null || config === void 0 ? void 0 : config.resizeDelay) !== null && _b !== void 0 ? _b : DEFAULT_DELAY,
-        };
         setStyles(config === null || config === void 0 ? void 0 : config.styles);
         setClassNames(config === null || config === void 0 ? void 0 : config.classNames);
     }, [config, (_c = (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.document) === null || _c === void 0 ? void 0 : _c.body]);
@@ -99,18 +104,35 @@ const YfmHtmlBlockPreview = ({ html, onСlick, config }) => {
             styles.current = newStyles;
         }
     };
-    useEffect(() => {
+    // finds all relative links (href^="#") and changes their click behavior
+    const createAnchorLinkHandlers = (type) => () => {
         var _a;
+        const document = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.contentWindow.document;
+        if (document) {
+            document.querySelectorAll('a[href^="#"]').forEach((value) => {
+                const handler = createLinkCLickHandler(value, document);
+                if (type === 'add') {
+                    value.addEventListener('click', handler);
+                }
+                else {
+                    value.removeEventListener('click', handler);
+                }
+            });
+        }
+    };
+    useEffect(() => {
+        var _a, _b;
         (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener('load', handleLoadIFrame);
+        (_b = ref.current) === null || _b === void 0 ? void 0 : _b.addEventListener('load', createAnchorLinkHandlers('add'));
         return () => {
-            var _a;
+            var _a, _b;
             (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('load', handleLoadIFrame);
+            (_b = ref.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('load', createAnchorLinkHandlers('remove'));
         };
     }, [html]);
     useEffect(() => {
-        var _a, _b;
         if (ref.current) {
-            const resizeObserver = new window.ResizeObserver(debounce(handleResizeIFrame, (_b = (_a = resizeConfig.current) === null || _a === void 0 ? void 0 : _a.delay) !== null && _b !== void 0 ? _b : DEFAULT_DELAY));
+            const resizeObserver = new window.ResizeObserver(debounce(handleResizeIFrame, DEFAULT_DELAY));
             resizeObserver.observe(ref.current);
         }
     }, [(_f = (_e = (_d = ref.current) === null || _d === void 0 ? void 0 : _d.contentWindow) === null || _e === void 0 ? void 0 : _e.document) === null || _f === void 0 ? void 0 : _f.body]);

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

@@ -1,7 +1,7 @@
 import { PluginOptions } from '@diplodoc/html-extension/plugin/transform';
 import type { ExtensionNodeSpec } from '../../../../core';
 export { yfmHtmlBlockNodeName } from './const';
-export interface YfmHtmlBlockSpecsOptions extends Omit<PluginOptions, 'runtimeJsPath' | 'containerClasses' | 'bundle'> {
+export interface YfmHtmlBlockSpecsOptions extends Omit<PluginOptions, 'runtimeJsPath' | 'containerClasses' | 'bundle' | 'embeddingMode'> {
     nodeView?: ExtensionNodeSpec['view'];
 }
 export declare const YfmHtmlBlockSpecs: import("../../../../core").ExtensionWithOptions<YfmHtmlBlockSpecsOptions> & {

package/build/esm/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockSpecs/index.js

@@ -6,14 +6,14 @@ export { yfmHtmlBlockNodeName } from './const';
 const YfmHtmlBlockSpecsExtension = (builder, _a) => {
     var { nodeView } = _a, options = __rest(_a, ["nodeView"]);
     builder
-        .configureMd((md) => md.use(transform(Object.assign({ bundle: false }, options)), {}))
+        .configureMd((md) => md.use(transform(Object.assign({ bundle: false, embeddingMode: 'srcdoc' }, options)), {}))
         .addNode(YfmHtmlBlockConsts.NodeName, () => ({
         fromMd: {
             tokenSpec: {
                 name: YfmHtmlBlockConsts.NodeName,
                 type: 'node',
                 noCloseToken: true,
-                getAttrs: (token) => { var _a; return Object.fromEntries((_a = token.attrs) !== null && _a !== void 0 ? _a : []); },
+                getAttrs: ({ content }) => ({ srcdoc: content }),
             },
         },
         spec: {

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

@@ -2,7 +2,7 @@ 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 interface YfmHtmlBlockOptions extends Omit<PluginOptions, 'runtimeJsPath' | 'containerClasses' | 'bundle'> {
+export interface YfmHtmlBlockOptions extends Omit<PluginOptions, 'runtimeJsPath' | 'containerClasses' | 'bundle' | 'embeddingMode'> {
     useConfig?: () => IHTMLIFrameElementConfig | undefined;
 }
 export declare const YfmHtmlBlock: ExtensionAuto<YfmHtmlBlockOptions>;

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

@@ -2,6 +2,7 @@ import diplodocSanitize from '@diplodoc/transform/lib/sanitize';
 // yfmHtmlBlock additional css properties white list
 const getYfmHtmlBlockWhiteList = () => {
     const whiteList = {};
+    // flex, grid, column
     whiteList['align-content'] = true; // default: auto
     whiteList['align-items'] = true; // default: auto
     whiteList['align-self'] = true; // default: auto
@@ -47,6 +48,24 @@ const getYfmHtmlBlockWhiteList = () => {
     whiteList.order = true; // default: 0
     whiteList.orphans = true; // default: 2
     whiteList['row-gap'] = true;
+    // position, opacity, overflow
+    whiteList['all'] = true; // default: depending on individual properties
+    whiteList['bottom'] = true; // default: auto
+    whiteList['content'] = true; // default: normal
+    whiteList['cursor'] = true; // default: auto
+    whiteList['direction'] = true; // default: ltr
+    whiteList['left'] = true; // default: auto
+    whiteList['line-break'] = true; // default: auto
+    whiteList['opacity'] = true; // default: 1
+    whiteList['overflow'] = true; // default: depending on individual properties
+    whiteList['overflow-wrap'] = true; // default: normal
+    whiteList['overflow-x'] = true; // default: visible
+    whiteList['overflow-y'] = true; // default: visible
+    whiteList['position'] = true; // default: static
+    whiteList['right'] = true; // default: auto
+    whiteList['top'] = true; // default: auto
+    whiteList['white-space'] = true; // default: normal
+    whiteList['z-index'] = true; // default: auto
     return whiteList;
 };
 // yfmHtmlBlock additional allowedTags

package/build/esm/version.js

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

package/build/esm/view/hocs/withYfmHtml/index.js

@@ -1,17 +1,17 @@
 import React, { forwardRef, useEffect } from 'react';
-import { useDiplodocHtml } from '@diplodoc/html-extension/react';
+import { useDiplodocEmbeddedContentController } from '@diplodoc/html-extension/react';
 import { useYfmHtmlBlockRuntime } from './useYfmHtmlBlockRuntime';
 export function withYfmHtmlBlock(opts) {
     return (Component) => forwardRef(function WithYfmHtml(props, ref) {
         const { meta, html, yfmHtmlBlockConfig } = props;
         useYfmHtmlBlockRuntime(meta, opts.runtime);
-        const yfmHtmlBlock = useDiplodocHtml();
+        const yfmHtmlBlock = useDiplodocEmbeddedContentController();
         useEffect(() => {
             if (yfmHtmlBlock) {
                 if (yfmHtmlBlockConfig) {
                     yfmHtmlBlock.setConfig(yfmHtmlBlockConfig);
                 }
-                yfmHtmlBlock.reinitialize();
+                yfmHtmlBlock.initialize();
             }
         }, [yfmHtmlBlock, html, yfmHtmlBlockConfig]);
         return React.createElement(Component, Object.assign({}, props, { ref: ref }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/markdown-editor",
-  "version": "13.15.0",
+  "version": "13.17.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.5.0",
+    "@diplodoc/html-extension": "2.1.0",
     "@diplodoc/latex-extension": "1.0.3",
     "@diplodoc/mermaid-extension": "1.2.1",
     "@diplodoc/transform": "4.22.0",
@@ -275,7 +275,7 @@
   },
   "peerDependencies": {
     "@diplodoc/folding-headings-extension": "^0.1.0",
-    "@diplodoc/html-extension": "^1.2.7",
+    "@diplodoc/html-extension": "2.1.0",
     "@diplodoc/latex-extension": "^1.0.3",
     "@diplodoc/mermaid-extension": "^1.0.0",
     "@diplodoc/transform": "^4.5.0",