@gravity-ui/markdown-editor 13.3.0 → 13.4.0

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

@@ -6,6 +6,7 @@ export declare type HorizontalDragProps = {
     rightElRef: React.RefObject<HTMLDivElement>;
     wrapperRef: React.RefObject<HTMLDivElement>;
     editor: EditorInt;
+    onEndMove?: (right: HTMLDivElement | null, left: HTMLDivElement | null) => any;
 };
 declare const HorizontalDragWrapper: React.FC<HorizontalDragProps & {
     isMounted: boolean;

package/build/cjs/bundle/HorizontalDrag.js

@@ -48,7 +48,7 @@ const useColResize = ({ onStart, onMove, onEnd }) => {
         },
     };
 };
-const HorizontalDrag = ({ leftElRef, rightElRef, wrapperRef, editor, }) => {
+const HorizontalDrag = ({ leftElRef, rightElRef, wrapperRef, editor, onEndMove, }) => {
     var _a, _b, _c, _d;
     const cm = editor.cm;
     const [lCardWidth, lSetCardWidth] = (0, react_1.useState)(((_b = (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0) / 2);
@@ -100,6 +100,7 @@ const HorizontalDrag = ({ leftElRef, rightElRef, wrapperRef, editor, }) => {
         cm.requestMeasure();
         (_b = rightElRef.current) === null || _b === void 0 ? void 0 : _b.classList.remove(exports.IN_RESIZE_CLASSNAME);
         (_c = leftElRef.current) === null || _c === void 0 ? void 0 : _c.classList.remove(exports.IN_RESIZE_CLASSNAME);
+        onEndMove === null || onEndMove === void 0 ? void 0 : onEndMove(rightElRef.current, leftElRef.current);
     }, [calculateWidth, cm, leftElRef, rightElRef, updateWidth, wrapperRef]);
     const { listeners } = useColResize({ onStart, onMove, onEnd });
     return (react_1.default.createElement("div", Object.assign({ className: (0, MarkdownEditorView_1.cnEditorComponent)('resizer', { horizontal: true }) }, listeners),

package/build/cjs/bundle/config/action-names.d.ts

@@ -1,3 +1,3 @@
-declare const namesObj: Record<"bold" | "link" | "italic" | "strike" | "underline" | "mark" | "quote" | "mono" | "paragraph" | "anchor" | "table" | "image" | "code_inline" | "code_block" | "file" | "checkbox" | "bulletList" | "orderedList" | "emoji" | "tabs" | "yfm_cut" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "yfm_note" | "undo" | "redo" | "math_inline" | "math_block" | "mermaid" | "liftListItem" | "sinkListItem" | "yfm_block" | "yfm_layout" | "horizontalrule", string>;
+declare const namesObj: Record<"bold" | "link" | "italic" | "strike" | "underline" | "mark" | "quote" | "mono" | "paragraph" | "anchor" | "table" | "image" | "code_inline" | "code_block" | "file" | "checkbox" | "bulletList" | "orderedList" | "emoji" | "tabs" | "yfm_cut" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "yfm_note" | "undo" | "redo" | "math_inline" | "math_block" | "mermaid" | "liftListItem" | "sinkListItem" | "yfm_block" | "yfm_html_block" | "yfm_layout" | "horizontalrule", string>;
 export declare const ActionName: Readonly<typeof namesObj>;
 export {};

package/build/cjs/bundle/config/action-names.js

@@ -27,6 +27,7 @@ const names = [
     'yfm_cut',
     'yfm_note',
     'yfm_block',
+    'yfm_html_block',
     'yfm_layout',
     'table',
     'code_inline',

package/build/cjs/bundle/config/icons.d.ts

@@ -1,5 +1,5 @@
 import { ToolbarIconData } from '../../toolbar/types';
-declare type Icon = 'undo' | 'redo' | 'bold' | 'italic' | 'underline' | 'strikethrough' | 'mono' | 'mark' | 'textColor' | 'text' | 'headline' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'bulletList' | 'orderedList' | 'sink' | 'lift' | 'cut' | 'note' | 'code' | 'codeBlock' | 'link' | 'image' | 'table' | 'quote' | 'checklist' | 'horizontalRule' | 'file' | 'functionInline' | 'functionBlock' | 'emoji' | 'tabs' | 'mermaid';
+declare type Icon = 'undo' | 'redo' | 'bold' | 'italic' | 'underline' | 'strikethrough' | 'mono' | 'mark' | 'textColor' | 'text' | 'headline' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'bulletList' | 'orderedList' | 'sink' | 'lift' | 'cut' | 'note' | 'code' | 'codeBlock' | 'link' | 'image' | 'table' | 'quote' | 'checklist' | 'horizontalRule' | 'file' | 'functionInline' | 'functionBlock' | 'emoji' | 'tabs' | 'mermaid' | 'html';
 declare type Icons = Record<Icon, ToolbarIconData>;
 export declare const icons: Icons;
 export {};

package/build/cjs/bundle/config/icons.js

@@ -33,6 +33,7 @@ exports.icons = {
     table: { data: icons_1.TableIcon },
     quote: { data: icons_1.QuoteIcon },
     checklist: { data: icons_1.CheckListIcon },
+    html: { data: icons_1.HtmlBlockIcon },
     horizontalRule: { data: icons_1.HRuleIcon },
     file: { data: icons_1.FileIcon },
     functionInline: { data: icons_1.FunctionInlineIcon },

package/build/cjs/bundle/config/markup.d.ts

@@ -35,6 +35,7 @@ export declare const mCodeListConfig: MToolbarListButtonData;
 export declare const mMathListConfig: MToolbarListButtonData;
 export declare const mMathListItem: MToolbarListItemData;
 export declare const mMermaidButton: MToolbarSingleItemData;
+export declare const mYfmHtmlBlockButton: MToolbarSingleItemData;
 export declare const mImagePopupData: MToolbarButtonPopupData;
 export declare const mFilePopupData: MToolbarButtonPopupData;
 /** prepared markup toolbar config */

package/build/cjs/bundle/config/markup.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mHiddenDataByPreset = exports.mToolbarConfigByPreset = exports.mHiddenData = exports.mTabsItemData = exports.mHruleItemData = exports.mToolbarConfig = exports.mFilePopupData = exports.mImagePopupData = exports.mMermaidButton = exports.mMathListItem = exports.mMathListConfig = exports.mCodeListConfig = exports.mCodeblockItemData = exports.mTableButton = exports.mCutButton = exports.mQuoteButton = exports.mNoteButton = exports.mLinkButton = exports.mListMoveListConfig = exports.mCheckboxButton = exports.mListsListConfig = exports.mHeadingListConfig = exports.mBiusGroupConfig = exports.mMarkedItemData = exports.mMonospaceItemData = exports.mStrikethroughItemData = exports.mUnderlineItemData = exports.mItalicItemData = exports.mBoldItemData = exports.mHistoryGroupConfig = void 0;
+exports.mHiddenDataByPreset = exports.mToolbarConfigByPreset = exports.mHiddenData = exports.mTabsItemData = exports.mHruleItemData = exports.mToolbarConfig = exports.mFilePopupData = exports.mImagePopupData = exports.mYfmHtmlBlockButton = exports.mMermaidButton = exports.mMathListItem = exports.mMathListConfig = exports.mCodeListConfig = exports.mCodeblockItemData = exports.mTableButton = exports.mCutButton = exports.mQuoteButton = exports.mNoteButton = exports.mLinkButton = exports.mListMoveListConfig = exports.mCheckboxButton = exports.mListsListConfig = exports.mHeadingListConfig = exports.mBiusGroupConfig = exports.mMarkedItemData = exports.mMonospaceItemData = exports.mStrikethroughItemData = exports.mUnderlineItemData = exports.mItalicItemData = exports.mBoldItemData = exports.mHistoryGroupConfig = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const menubar_1 = require("../../i18n/menubar");
@@ -360,6 +360,15 @@ exports.mMermaidButton = {
     isActive: isActiveFn,
     isEnable: isEnableFn,
 };
+exports.mYfmHtmlBlockButton = {
+    id: action_names_1.ActionName.yfm_html_block,
+    type: types_1.ToolbarDataType.SingleButton,
+    title: menubar_1.i18n.bind(null, 'html'),
+    icon: icons_1.icons.html,
+    exec: (e) => (0, commands_1.insertYfmHtmlBlock)(e.cm),
+    isActive: isActiveFn,
+    isEnable: isEnableFn,
+};
 exports.mImagePopupData = {
     id: 'image',
     type: types_1.ToolbarDataType.ButtonPopup,

package/build/cjs/bundle/config/wysiwyg.d.ts

@@ -44,6 +44,7 @@ export declare const wTabsItemData: WToolbarSingleItemData;
 export declare const wMathBlockItemData: WToolbarSingleItemData;
 export declare const wMathListConfig: WToolbarListButtonData;
 export declare const wMathListItem: WToolbarListItemData;
+export declare const wYfmHtmlBlockItemData: WToolbarSingleItemData;
 export declare const wCommandMenuConfig: WToolbarItemData[];
 export declare const wHiddenData: WToolbarItemData[];
 /** prepared wysiwyg toolbar config */

package/build/cjs/bundle/config/wysiwyg.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.wSelectionMenuConfigByPreset = exports.wHiddenDataByPreset = exports.wCommandMenuConfigByPreset = exports.wToolbarConfigByPreset = exports.wMermaidItemData = exports.wSelectionMenuConfig = exports.wToolbarConfig = exports.wHiddenData = exports.wCommandMenuConfig = exports.wMathListItem = exports.wMathListConfig = exports.wMathBlockItemData = exports.wTabsItemData = exports.wMathInlineItemData = exports.wFileItemData = exports.wEmojiItemData = exports.wHruleItemData = exports.wImageItemData = exports.wCodeListConfig = exports.wCodeBlockItemData = exports.wCodeItemData = exports.wTableItemData = exports.wNoteItemData = exports.wListMoveListConfig = exports.wCutItemData = exports.wQuoteItemData = exports.wLinkItemData = exports.wCheckboxItemData = exports.wListsListConfig = exports.wHeadingListConfig = exports.wTextItemData = exports.wBiusGroupConfig = exports.wMarkedItemData = exports.wMonospaceItemData = exports.wStrikethroughItemData = exports.wUnderlineItemData = exports.wItalicItemData = exports.wBoldItemData = exports.wHistoryGroupConfig = void 0;
+exports.wSelectionMenuConfigByPreset = exports.wHiddenDataByPreset = exports.wCommandMenuConfigByPreset = exports.wToolbarConfigByPreset = exports.wMermaidItemData = exports.wSelectionMenuConfig = exports.wToolbarConfig = exports.wHiddenData = exports.wCommandMenuConfig = exports.wYfmHtmlBlockItemData = exports.wMathListItem = exports.wMathListConfig = exports.wMathBlockItemData = exports.wTabsItemData = exports.wMathInlineItemData = exports.wFileItemData = exports.wEmojiItemData = exports.wHruleItemData = exports.wImageItemData = exports.wCodeListConfig = exports.wCodeBlockItemData = exports.wCodeItemData = exports.wTableItemData = exports.wNoteItemData = exports.wListMoveListConfig = exports.wCutItemData = exports.wQuoteItemData = exports.wLinkItemData = exports.wCheckboxItemData = exports.wListsListConfig = exports.wHeadingListConfig = exports.wTextItemData = exports.wBiusGroupConfig = exports.wMarkedItemData = exports.wMonospaceItemData = exports.wStrikethroughItemData = exports.wUnderlineItemData = exports.wItalicItemData = exports.wBoldItemData = exports.wHistoryGroupConfig = void 0;
 const extensions_1 = require("../../extensions");
 const hints_1 = require("../../i18n/hints");
 const menubar_1 = require("../../i18n/menubar");
@@ -394,6 +394,15 @@ exports.wMathListConfig = {
     data: [exports.wMathInlineItemData, exports.wMathBlockItemData],
 };
 exports.wMathListItem = Object.assign({ id: 'math', type: types_1.ToolbarDataType.ListButton }, exports.wMathListConfig);
+exports.wYfmHtmlBlockItemData = {
+    id: action_names_1.ActionName.yfm_html_block,
+    type: types_1.ToolbarDataType.SingleButton,
+    title: menubar_1.i18n.bind(null, 'html'),
+    icon: icons_1.icons.html,
+    exec: (e) => e.actions.createYfmHtmlBlock.run(),
+    isActive: (e) => e.actions.createYfmHtmlBlock.isActive(),
+    isEnable: (e) => e.actions.createYfmHtmlBlock.isEnable(),
+};
 exports.wCommandMenuConfig = [
     ...exports.wHeadingListConfig.data,
     ...exports.wListsListConfig.data,
@@ -411,6 +420,7 @@ exports.wCommandMenuConfig = [
     // wMathInlineItemData,
     // wMathBlockItemData,
     exports.wTabsItemData,
+    exports.wYfmHtmlBlockItemData,
 ];
 exports.wHiddenData = exports.wCommandMenuConfig;
 /** prepared wysiwyg toolbar config */
@@ -546,6 +556,7 @@ exports.wCommandMenuConfigByPreset = {
         exports.wHruleItemData,
         exports.wFileItemData,
         exports.wTabsItemData,
+        exports.wYfmHtmlBlockItemData,
     ],
     full: exports.wCommandMenuConfig.slice(),
 };

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

@@ -0,0 +1,23 @@
+import { Node } from 'prosemirror-model';
+import { EditorView, NodeView } from 'prosemirror-view';
+import { YfmHtmlBlockOptions } from '../index';
+export declare class WYfmHtmlBlockNodeView implements NodeView {
+    readonly dom: HTMLElement;
+    private node;
+    private readonly view;
+    private readonly getPos;
+    private readonly options;
+    private readonly renderItem;
+    constructor({ node, view, getPos, options, }: {
+        node: Node;
+        view: EditorView;
+        getPos: () => number | undefined;
+        options: YfmHtmlBlockOptions;
+    });
+    update(node: Node): boolean;
+    destroy(): void;
+    ignoreMutation(): boolean;
+    stopEvent(e: Event): boolean;
+    private onChange;
+    private renderYfmHtmlBlock;
+}

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

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WYfmHtmlBlockNodeView = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_dom_1 = require("react-dom");
+const behavior_1 = require("../../../behavior");
+const const_1 = require("../YfmHtmlBlockSpecs/const");
+const YfmHtmlBlockView_1 = require("./YfmHtmlBlockView");
+class WYfmHtmlBlockNodeView {
+    constructor({ node, view, getPos, options, }) {
+        this.options = {};
+        this.node = node;
+        this.dom = document.createElement('div');
+        this.dom.classList.add('yfm-html-block-container');
+        this.dom.contentEditable = 'false';
+        this.view = view;
+        this.getPos = getPos;
+        this.options = options;
+        this.renderItem = (0, behavior_1.getReactRendererFromState)(view.state).createItem('yfmHtmlBlock-view', this.renderYfmHtmlBlock.bind(this));
+    }
+    update(node) {
+        if (node.type !== this.node.type)
+            return false;
+        if (node.attrs[const_1.YfmHtmlBlockConsts.NodeAttrs.newCreated] !==
+            this.node.attrs[const_1.YfmHtmlBlockConsts.NodeAttrs.newCreated])
+            return false;
+        this.node = node;
+        this.renderItem.rerender();
+        return true;
+    }
+    destroy() {
+        this.renderItem.remove();
+    }
+    ignoreMutation() {
+        return true;
+    }
+    stopEvent(e) {
+        const target = e.target;
+        if (typeof target.className === 'string' &&
+            target.className.includes('prosemirror-stop-event')) {
+            return true;
+        }
+        return false;
+    }
+    onChange(attrs) {
+        const pos = this.getPos();
+        if (pos === undefined)
+            return;
+        const tr = this.view.state.tr.setNodeMarkup(pos, undefined, Object.assign(Object.assign({}, this.node.attrs), attrs), []);
+        this.view.dispatch(tr);
+    }
+    renderYfmHtmlBlock() {
+        return (0, react_dom_1.createPortal)(react_1.default.createElement(YfmHtmlBlockView_1.YfmHtmlBlockView, { useConfig: this.options.useConfig, view: this.view, onChange: this.onChange.bind(this), node: this.node, getPos: this.getPos }), this.dom);
+    }
+}
+exports.WYfmHtmlBlockNodeView = WYfmHtmlBlockNodeView;

package/build/cjs/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlock.css

@@ -0,0 +1,66 @@
+.g-md-yfm-html-block {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 15px;
+  padding-top: 28px;
+  border: 1px solid var(--g-color-line-generic);
+  border-radius: var(--g-border-radius-m);
+}
+.g-md-yfm-html-block_editing {
+  display: flex;
+  padding-top: 0;
+  border: 0;
+}
+.g-md-yfm-html-block__label {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+}
+.g-md-yfm-html-block__menu {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.g-md-yfm-html-block__preview {
+  flex: 1;
+}
+.g-md-yfm-html-block__error {
+  flex: 1;
+  font-family: var(--g-font-family-monospace);
+  color: var(--g-color-text-danger);
+}
+.g-md-yfm-html-block__editor {
+  flex: 1;
+  width: 50%;
+  white-space: nowrap;
+  caret-color: auto;
+}
+.g-md-yfm-html-block__editor .g-text-area__content {
+  font-size: 1em;
+  color: var(--yfm-color-hljs-subst);
+  border: 0;
+  border-radius: var(--g-border-radius-m);
+  background: var(--yfm-color-hljs-background);
+  font-feature-settings: normal;
+}
+.g-md-yfm-html-block__editor .g-text-area__control.g-md-YfmHtmlBlockHelper {
+  font-family: var(--yfm-font-family-monospace);
+}
+.g-md-yfm-html-block__editor-popover {
+  z-index: 1;
+  float: right;
+}
+.g-md-yfm-html-block__controls {
+  display: flex;
+  justify-content: end;
+  margin-top: 5px;
+}
+.g-md-yfm-html-block__content {
+  flex-grow: 1;
+}
+
+.g-root_theme_dark-hc .g-md-yfm-html-block_editing .g-text-area__content,
+.g-root_theme_dark .g-md-yfm-html-block_editing .g-text-area__content {
+  color: var(--g-color-text-primary);
+}

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

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

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

@@ -0,0 +1,178 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.YfmHtmlBlockView = exports.generateID = exports.cnHelper = exports.cnYfmHtmlBlock = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
+const classname_1 = require("../../../../classname");
+const TextInput_1 = require("../../../../forms/TextInput");
+const common_1 = require("../../../../i18n/common");
+const hooks_1 = require("../../../../react-utils/hooks");
+const remove_node_1 = require("../../../../utils/remove-node");
+const const_1 = require("../YfmHtmlBlockSpecs/const");
+exports.cnYfmHtmlBlock = (0, classname_1.cn)('yfm-html-block');
+exports.cnHelper = (0, classname_1.cn)('yfm-html-block-helper');
+const b = exports.cnYfmHtmlBlock;
+function generateID() {
+    return Math.random().toString(36).substr(2, 8);
+}
+exports.generateID = generateID;
+const DEFAULT_PADDING = 20;
+const DEFAULT_DELAY = 100;
+const YfmHtmlBlockPreview = ({ html, onСlick, config }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const ref = (0, react_1.useRef)(null);
+    const styles = (0, react_1.useRef)({});
+    const classNames = (0, react_1.useRef)([]);
+    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]);
+    const handleLoadIFrame = () => {
+        var _a;
+        const contentWindow = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.contentWindow;
+        handleResizeIFrame();
+        if (contentWindow) {
+            const frameDocument = contentWindow.document;
+            frameDocument.addEventListener('dblclick', () => {
+                onСlick();
+            });
+        }
+    };
+    const handleResizeIFrame = () => {
+        var _a, _b;
+        if (ref.current) {
+            const contentWindow = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.contentWindow;
+            if (contentWindow) {
+                const body = contentWindow.document.body;
+                if (body) {
+                    const height = body.scrollHeight +
+                        (((_b = resizeConfig.current) === null || _b === void 0 ? void 0 : _b.padding) || DEFAULT_PADDING) +
+                        'px';
+                    setHeight(height);
+                }
+            }
+        }
+    };
+    const setClassNames = (newClassNames) => {
+        var _a, _b;
+        const body = (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.document.body;
+        if (body && newClassNames) {
+            const previousClassNames = classNames.current;
+            // remove all classes that were in previousClassNames but are not in classNames
+            previousClassNames.forEach((className) => {
+                if (!newClassNames.includes(className)) {
+                    body.classList.remove(className);
+                }
+            });
+            // add classes that are in classNames
+            newClassNames.forEach((className) => {
+                if (!body.classList.contains(className)) {
+                    body.classList.add(className);
+                }
+            });
+            classNames.current = newClassNames;
+        }
+    };
+    const setStyles = (newStyles) => {
+        var _a, _b;
+        const body = (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.document.body;
+        if (body && newStyles) {
+            const previousStyles = styles.current;
+            // remove all styles that are in previousStyles but not in styles
+            Object.keys(previousStyles).forEach((property) => {
+                if (!Object.prototype.hasOwnProperty.call(newStyles, property)) {
+                    body.style.removeProperty(property);
+                }
+            });
+            // sdd or update styles that are in styles
+            Object.keys(newStyles).forEach((property) => {
+                body.style.setProperty(property, newStyles[property]);
+            });
+            // update current styles to the new styles
+            styles.current = newStyles;
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        var _a;
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener('load', handleLoadIFrame);
+        return () => {
+            var _a;
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('load', handleLoadIFrame);
+        };
+    }, [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));
+            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]);
+    return (react_1.default.createElement("iframe", { style: {
+            height,
+        }, ref: ref, title: generateID(), frameBorder: 0, className: b('content'), srcDoc: html }));
+};
+const CodeEditMode = ({ initialText, onSave, onCancel }) => {
+    const [text, setText] = (0, react_1.useState)(initialText || '\n');
+    return (react_1.default.createElement("div", { className: b({ editing: true }) },
+        react_1.default.createElement("div", { className: b('editor') },
+            react_1.default.createElement(TextInput_1.TextAreaFixed, { controlProps: {
+                    className: (0, exports.cnHelper)({ 'prosemirror-stop-event': true }),
+                }, value: text, onUpdate: (v) => {
+                    setText(v);
+                }, autoFocus: true }),
+            react_1.default.createElement("div", { className: b('controls') },
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement(uikit_1.Button, { onClick: onCancel, view: 'flat' },
+                        react_1.default.createElement("span", { className: (0, exports.cnHelper)({ 'prosemirror-stop-event': true }) }, (0, common_1.i18n)('cancel'))),
+                    react_1.default.createElement(uikit_1.Button, { onClick: () => onSave(text), view: 'action' },
+                        react_1.default.createElement("span", { className: (0, exports.cnHelper)({ 'prosemirror-stop-event': true }) }, (0, common_1.i18n)('save'))))))));
+};
+const YfmHtmlBlockView = ({ onChange, node, getPos, view, useConfig }) => {
+    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);
+    const buttonRef = (0, react_1.useRef)(null);
+    const handleClick = () => {
+        setEditing();
+    };
+    if (editing) {
+        return (react_1.default.createElement(CodeEditMode, { initialText: node.attrs[const_1.YfmHtmlBlockConsts.NodeAttrs.srcdoc], onCancel: unsetEditing, onSave: (v) => {
+                onChange({ [const_1.YfmHtmlBlockConsts.NodeAttrs.srcdoc]: v });
+                unsetEditing();
+            } }));
+    }
+    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: node.attrs[const_1.YfmHtmlBlockConsts.NodeAttrs.srcdoc], "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 }) })),
+            react_1.default.createElement(uikit_1.Popup, { anchorRef: buttonRef, open: menuOpen, onClose: toggleMenuOpen, placement: ['bottom-end'] },
+                react_1.default.createElement(uikit_1.Menu, null,
+                    react_1.default.createElement(uikit_1.Menu.Item, { onClick: () => {
+                            toggleEditing();
+                            toggleMenuOpen();
+                        } }, (0, common_1.i18n)('edit')),
+                    react_1.default.createElement(uikit_1.Menu.Item, { onClick: () => {
+                            const pos = getPos();
+                            if (pos === undefined)
+                                return;
+                            (0, remove_node_1.removeNode)({
+                                node,
+                                pos,
+                                tr: view.state.tr,
+                                dispatch: view.dispatch,
+                            });
+                        } }, (0, common_1.i18n)('remove')))))));
+};
+exports.YfmHtmlBlockView = YfmHtmlBlockView;

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

@@ -0,0 +1 @@
+export * from './NodeView';

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./NodeView"), exports);

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

@@ -0,0 +1,15 @@
+export declare enum YfmHtmlBlockAttrs {
+    class = "class",
+    frameborder = "frameborder",
+    newCreated = "newCreated",
+    srcdoc = "srcdoc",
+    style = "style"
+}
+export declare const yfmHtmlBlockNodeName = "yfm_html_block";
+export declare const yfmHtmlBlockNodeType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
+export declare const YfmHtmlBlockAction = "createYfmHtmlBlock";
+export declare const YfmHtmlBlockConsts: {
+    readonly NodeName: "yfm_html_block";
+    readonly NodeAttrs: typeof YfmHtmlBlockAttrs;
+    readonly nodeType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
+};

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.YfmHtmlBlockConsts = exports.YfmHtmlBlockAction = exports.yfmHtmlBlockNodeType = exports.yfmHtmlBlockNodeName = exports.YfmHtmlBlockAttrs = void 0;
+const schema_1 = require("../../../../utils/schema");
+var YfmHtmlBlockAttrs;
+(function (YfmHtmlBlockAttrs) {
+    YfmHtmlBlockAttrs["class"] = "class";
+    YfmHtmlBlockAttrs["frameborder"] = "frameborder";
+    YfmHtmlBlockAttrs["newCreated"] = "newCreated";
+    YfmHtmlBlockAttrs["srcdoc"] = "srcdoc";
+    YfmHtmlBlockAttrs["style"] = "style";
+})(YfmHtmlBlockAttrs = exports.YfmHtmlBlockAttrs || (exports.YfmHtmlBlockAttrs = {}));
+exports.yfmHtmlBlockNodeName = 'yfm_html_block';
+exports.yfmHtmlBlockNodeType = (0, schema_1.nodeTypeFactory)(exports.yfmHtmlBlockNodeName);
+exports.YfmHtmlBlockAction = 'createYfmHtmlBlock';
+exports.YfmHtmlBlockConsts = {
+    NodeName: exports.yfmHtmlBlockNodeName,
+    NodeAttrs: YfmHtmlBlockAttrs,
+    nodeType: exports.yfmHtmlBlockNodeType,
+};

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

@@ -0,0 +1,10 @@
+import type { ExtensionNodeSpec } from '../../../../core';
+export { yfmHtmlBlockNodeName } from './const';
+export declare type YfmHtmlBlockSpecsOptions = {
+    nodeView?: ExtensionNodeSpec['view'];
+};
+export declare const YfmHtmlBlockSpecs: import("../../../../core").ExtensionWithOptions<YfmHtmlBlockSpecsOptions> & {
+    readonly NodeName: "yfm_html_block";
+    readonly NodeAttrs: typeof import("./const").YfmHtmlBlockAttrs;
+    readonly nodeType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
+};

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

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.YfmHtmlBlockSpecs = exports.yfmHtmlBlockNodeName = void 0;
+// eslint-disable-next-line import/no-extraneous-dependencies
+const html_extension_1 = require("@diplodoc/html-extension");
+const const_1 = require("./const");
+var const_2 = require("./const");
+Object.defineProperty(exports, "yfmHtmlBlockNodeName", { enumerable: true, get: function () { return const_2.yfmHtmlBlockNodeName; } });
+const YfmHtmlBlockSpecsExtension = (builder, { nodeView }) => {
+    builder
+        .configureMd((md) => md.use((0, html_extension_1.transform)({ bundle: false }), {}))
+        .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 : []); },
+            },
+        },
+        spec: {
+            group: 'block',
+            attrs: {
+                [const_1.YfmHtmlBlockConsts.NodeAttrs.class]: { default: 'yfm-html' },
+                [const_1.YfmHtmlBlockConsts.NodeAttrs.frameborder]: { default: '' },
+                [const_1.YfmHtmlBlockConsts.NodeAttrs.srcdoc]: { default: '' },
+                [const_1.YfmHtmlBlockConsts.NodeAttrs.style]: { default: null },
+                [const_1.YfmHtmlBlockConsts.NodeAttrs.newCreated]: { default: null },
+            },
+            toDOM: (node) => ['iframe', node.attrs],
+        },
+        toMd: (state, node) => {
+            state.write('::: html');
+            state.write('\n');
+            state.write(node.attrs[const_1.YfmHtmlBlockConsts.NodeAttrs.srcdoc]);
+            state.ensureNewLine();
+            state.write(':::');
+            state.closeBlock(node);
+        },
+        view: nodeView,
+    }));
+};
+exports.YfmHtmlBlockSpecs = Object.assign(YfmHtmlBlockSpecsExtension, const_1.YfmHtmlBlockConsts);

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

@@ -0,0 +1,2 @@
+import { ActionSpec } from '../../../core';
+export declare const addYfmHtmlBlock: ActionSpec;

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addYfmHtmlBlock = void 0;
+const const_1 = require("./YfmHtmlBlockSpecs/const");
+exports.addYfmHtmlBlock = {
+    isEnable(state) {
+        return state.selection.empty;
+    },
+    run(state, dispatch, _view) {
+        dispatch(state.tr.insert(state.selection.from, (0, const_1.yfmHtmlBlockNodeType)(state.schema).create({
+            [const_1.YfmHtmlBlockConsts.NodeAttrs.srcdoc]: '\n',
+            [const_1.YfmHtmlBlockConsts.NodeAttrs.newCreated]: true,
+        })));
+    },
+};

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

@@ -0,0 +1,2 @@
+export * from './YfmHtmlBlockSpecs/const';
+export declare const YfmHtmlBlockAction = "createYfmHtmlBlock";

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.YfmHtmlBlockAction = void 0;
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./YfmHtmlBlockSpecs/const"), exports);
+exports.YfmHtmlBlockAction = 'createYfmHtmlBlock';

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

@@ -0,0 +1,14 @@
+import type { IHTMLIFrameElementConfig } from '@diplodoc/html-extension/runtime';
+import { Action, ExtensionAuto } from '../../../core';
+import { YfmHtmlBlockAction } from './YfmHtmlBlockSpecs/const';
+export declare type YfmHtmlBlockOptions = {
+    useConfig?: () => IHTMLIFrameElementConfig | undefined;
+};
+export declare const YfmHtmlBlock: ExtensionAuto<YfmHtmlBlockOptions>;
+declare global {
+    namespace WysiwygEditor {
+        interface Actions {
+            [YfmHtmlBlockAction]: Action;
+        }
+    }
+}