@gravity-ui/markdown-editor 13.3.0 → 13.4.0

package/build/esm/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/esm/bundle/config/action-names.js

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

package/build/esm/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/esm/bundle/config/icons.js

@@ -1,4 +1,4 @@
-import { BoldIcon, CheckListIcon, CodeBlockIcon, CodeInlineIcon, CutIcon, EmojiIcon, FileIcon, FunctionBlockIcon, FunctionInlineIcon, HRuleIcon, Heading1Icon, Heading2Icon, Heading3Icon, Heading4Icon, Heading5Icon, Heading6Icon, HeadingIcon, ImageIcon, ItalicIcon, LiftIcon, LinkIcon, ListBlIcon, ListOlIcon, MarkIcon, MermaidIcon, MonoIcon, NoteIcon, QuoteIcon, RedoIcon, SinkIcon, StrikethroughIcon, TableIcon, TabsIcon, TextColorIcon, TextIcon, UnderlineIcon, UndoIcon, } from '../../icons';
+import { BoldIcon, CheckListIcon, CodeBlockIcon, CodeInlineIcon, CutIcon, EmojiIcon, FileIcon, FunctionBlockIcon, FunctionInlineIcon, HRuleIcon, Heading1Icon, Heading2Icon, Heading3Icon, Heading4Icon, Heading5Icon, Heading6Icon, HeadingIcon, HtmlBlockIcon, ImageIcon, ItalicIcon, LiftIcon, LinkIcon, ListBlIcon, ListOlIcon, MarkIcon, MermaidIcon, MonoIcon, NoteIcon, QuoteIcon, RedoIcon, SinkIcon, StrikethroughIcon, TableIcon, TabsIcon, TextColorIcon, TextIcon, UnderlineIcon, UndoIcon, } from '../../icons';
 export const icons = {
     undo: { data: UndoIcon },
     redo: { data: RedoIcon },
@@ -30,6 +30,7 @@ export const icons = {
     table: { data: TableIcon },
     quote: { data: QuoteIcon },
     checklist: { data: CheckListIcon },
+    html: { data: HtmlBlockIcon },
     horizontalRule: { data: HRuleIcon },
     file: { data: FileIcon },
     functionInline: { data: FunctionInlineIcon },

package/build/esm/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/esm/bundle/config/markup.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { i18n } from '../../i18n/menubar';
-import { insertHRule, insertLink, insertMermaidDiagram, insertYfmTable, insertYfmTabs, liftListItem, redo, redoDepth, sinkListItem, toBulletList, toH1, toH2, toH3, toH4, toH5, toH6, toOrderedList, toggleBold, toggleItalic, toggleMarked, toggleMonospace, toggleStrikethrough, toggleUnderline, undo, undoDepth, wrapToBlockquote, wrapToCheckbox, wrapToCodeBlock, wrapToInlineCode, wrapToMathBlock, wrapToMathInline, wrapToYfmCut, wrapToYfmNote, } from '../../markup/commands';
+import { insertHRule, insertLink, insertMermaidDiagram, insertYfmHtmlBlock, insertYfmTable, insertYfmTabs, liftListItem, redo, redoDepth, sinkListItem, toBulletList, toH1, toH2, toH3, toH4, toH5, toH6, toOrderedList, toggleBold, toggleItalic, toggleMarked, toggleMonospace, toggleStrikethrough, toggleUnderline, undo, undoDepth, wrapToBlockquote, wrapToCheckbox, wrapToCodeBlock, wrapToInlineCode, wrapToMathBlock, wrapToMathInline, wrapToYfmCut, wrapToYfmNote, } from '../../markup/commands';
 import { Action as A, formatter as f } from '../../shortcuts';
 import { ToolbarDataType, } from '../../toolbar/types';
 import { MToolbarColors } from '../toolbar/markup/MToolbarColors';
@@ -356,6 +356,15 @@ export const mMermaidButton = {
     isActive: isActiveFn,
     isEnable: isEnableFn,
 };
+export const mYfmHtmlBlockButton = {
+    id: ActionName.yfm_html_block,
+    type: ToolbarDataType.SingleButton,
+    title: i18n.bind(null, 'html'),
+    icon: icons.html,
+    exec: (e) => insertYfmHtmlBlock(e.cm),
+    isActive: isActiveFn,
+    isEnable: isEnableFn,
+};
 export const mImagePopupData = {
     id: 'image',
     type: ToolbarDataType.ButtonPopup,

package/build/esm/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/esm/bundle/config/wysiwyg.js

@@ -391,6 +391,15 @@ export const wMathListConfig = {
     data: [wMathInlineItemData, wMathBlockItemData],
 };
 export const wMathListItem = Object.assign({ id: 'math', type: ToolbarDataType.ListButton }, wMathListConfig);
+export const wYfmHtmlBlockItemData = {
+    id: ActionName.yfm_html_block,
+    type: ToolbarDataType.SingleButton,
+    title: i18n.bind(null, 'html'),
+    icon: icons.html,
+    exec: (e) => e.actions.createYfmHtmlBlock.run(),
+    isActive: (e) => e.actions.createYfmHtmlBlock.isActive(),
+    isEnable: (e) => e.actions.createYfmHtmlBlock.isEnable(),
+};
 export const wCommandMenuConfig = [
     ...wHeadingListConfig.data,
     ...wListsListConfig.data,
@@ -408,6 +417,7 @@ export const wCommandMenuConfig = [
     // wMathInlineItemData,
     // wMathBlockItemData,
     wTabsItemData,
+    wYfmHtmlBlockItemData,
 ];
 export const wHiddenData = wCommandMenuConfig;
 /** prepared wysiwyg toolbar config */
@@ -543,6 +553,7 @@ export const wCommandMenuConfigByPreset = {
         wHruleItemData,
         wFileItemData,
         wTabsItemData,
+        wYfmHtmlBlockItemData,
     ],
     full: wCommandMenuConfig.slice(),
 };

package/build/esm/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/esm/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockNodeView/NodeView.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { getReactRendererFromState } from '../../../behavior';
+import { YfmHtmlBlockConsts } from '../YfmHtmlBlockSpecs/const';
+import { YfmHtmlBlockView } from './YfmHtmlBlockView';
+export 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 = getReactRendererFromState(view.state).createItem('yfmHtmlBlock-view', this.renderYfmHtmlBlock.bind(this));
+    }
+    update(node) {
+        if (node.type !== this.node.type)
+            return false;
+        if (node.attrs[YfmHtmlBlockConsts.NodeAttrs.newCreated] !==
+            this.node.attrs[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 createPortal(React.createElement(YfmHtmlBlockView, { useConfig: this.options.useConfig, view: this.view, onChange: this.onChange.bind(this), node: this.node, getPos: this.getPos }), this.dom);
+    }
+}

package/build/esm/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/esm/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.d.ts

@@ -0,0 +1,18 @@
+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;
+import './YfmHtmlBlock.css';
+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/esm/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.js

@@ -0,0 +1,173 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Ellipsis as DotsIcon, Eye } from '@gravity-ui/icons';
+import { Button, Icon, Label, Menu, Popup } from '@gravity-ui/uikit';
+import debounce from 'lodash/debounce';
+import { cn } from '../../../../classname';
+import { TextAreaFixed as TextArea } from '../../../../forms/TextInput';
+import { i18n } from '../../../../i18n/common';
+import { useBooleanState } from '../../../../react-utils/hooks';
+import { removeNode } from '../../../../utils/remove-node';
+import { YfmHtmlBlockConsts } from '../YfmHtmlBlockSpecs/const';
+export const cnYfmHtmlBlock = cn('yfm-html-block');
+export const cnHelper = cn('yfm-html-block-helper');
+import './YfmHtmlBlock.css';
+const b = cnYfmHtmlBlock;
+export function generateID() {
+    return Math.random().toString(36).substr(2, 8);
+}
+const DEFAULT_PADDING = 20;
+const DEFAULT_DELAY = 100;
+const YfmHtmlBlockPreview = ({ html, onСlick, config }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const ref = useRef(null);
+    const styles = useRef({});
+    const classNames = useRef([]);
+    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]);
+    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;
+        }
+    };
+    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]);
+    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));
+            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.createElement("iframe", { style: {
+            height,
+        }, ref: ref, title: generateID(), frameBorder: 0, className: b('content'), srcDoc: html }));
+};
+const CodeEditMode = ({ initialText, onSave, onCancel }) => {
+    const [text, setText] = useState(initialText || '\n');
+    return (React.createElement("div", { className: b({ editing: true }) },
+        React.createElement("div", { className: b('editor') },
+            React.createElement(TextArea, { controlProps: {
+                    className: cnHelper({ 'prosemirror-stop-event': true }),
+                }, value: text, onUpdate: (v) => {
+                    setText(v);
+                }, autoFocus: true }),
+            React.createElement("div", { className: b('controls') },
+                React.createElement("div", null,
+                    React.createElement(Button, { onClick: onCancel, view: 'flat' },
+                        React.createElement("span", { className: cnHelper({ 'prosemirror-stop-event': true }) }, i18n('cancel'))),
+                    React.createElement(Button, { onClick: () => onSave(text), view: 'action' },
+                        React.createElement("span", { className: cnHelper({ 'prosemirror-stop-event': true }) }, i18n('save'))))))));
+};
+export const YfmHtmlBlockView = ({ onChange, node, getPos, view, useConfig }) => {
+    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);
+    const buttonRef = useRef(null);
+    const handleClick = () => {
+        setEditing();
+    };
+    if (editing) {
+        return (React.createElement(CodeEditMode, { initialText: node.attrs[YfmHtmlBlockConsts.NodeAttrs.srcdoc], onCancel: unsetEditing, onSave: (v) => {
+                onChange({ [YfmHtmlBlockConsts.NodeAttrs.srcdoc]: v });
+                unsetEditing();
+            } }));
+    }
+    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: node.attrs[YfmHtmlBlockConsts.NodeAttrs.srcdoc], "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 }) })),
+            React.createElement(Popup, { anchorRef: buttonRef, open: menuOpen, onClose: toggleMenuOpen, placement: ['bottom-end'] },
+                React.createElement(Menu, null,
+                    React.createElement(Menu.Item, { onClick: () => {
+                            toggleEditing();
+                            toggleMenuOpen();
+                        } }, i18n('edit')),
+                    React.createElement(Menu.Item, { onClick: () => {
+                            const pos = getPos();
+                            if (pos === undefined)
+                                return;
+                            removeNode({
+                                node,
+                                pos,
+                                tr: view.state.tr,
+                                dispatch: view.dispatch,
+                            });
+                        } }, i18n('remove')))))));
+};

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

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

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

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

package/build/esm/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/esm/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockSpecs/const.js

@@ -0,0 +1,17 @@
+import { nodeTypeFactory } from '../../../../utils/schema';
+export var YfmHtmlBlockAttrs;
+(function (YfmHtmlBlockAttrs) {
+    YfmHtmlBlockAttrs["class"] = "class";
+    YfmHtmlBlockAttrs["frameborder"] = "frameborder";
+    YfmHtmlBlockAttrs["newCreated"] = "newCreated";
+    YfmHtmlBlockAttrs["srcdoc"] = "srcdoc";
+    YfmHtmlBlockAttrs["style"] = "style";
+})(YfmHtmlBlockAttrs || (YfmHtmlBlockAttrs = {}));
+export const yfmHtmlBlockNodeName = 'yfm_html_block';
+export const yfmHtmlBlockNodeType = nodeTypeFactory(yfmHtmlBlockNodeName);
+export const YfmHtmlBlockAction = 'createYfmHtmlBlock';
+export const YfmHtmlBlockConsts = {
+    NodeName: yfmHtmlBlockNodeName,
+    NodeAttrs: YfmHtmlBlockAttrs,
+    nodeType: yfmHtmlBlockNodeType,
+};

package/build/esm/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/esm/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockSpecs/index.js

@@ -0,0 +1,39 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { transform } from '@diplodoc/html-extension';
+import { YfmHtmlBlockConsts } from './const';
+export { yfmHtmlBlockNodeName } from './const';
+const YfmHtmlBlockSpecsExtension = (builder, { nodeView }) => {
+    builder
+        .configureMd((md) => md.use(transform({ bundle: false }), {}))
+        .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 : []); },
+            },
+        },
+        spec: {
+            group: 'block',
+            attrs: {
+                [YfmHtmlBlockConsts.NodeAttrs.class]: { default: 'yfm-html' },
+                [YfmHtmlBlockConsts.NodeAttrs.frameborder]: { default: '' },
+                [YfmHtmlBlockConsts.NodeAttrs.srcdoc]: { default: '' },
+                [YfmHtmlBlockConsts.NodeAttrs.style]: { default: null },
+                [YfmHtmlBlockConsts.NodeAttrs.newCreated]: { default: null },
+            },
+            toDOM: (node) => ['iframe', node.attrs],
+        },
+        toMd: (state, node) => {
+            state.write('::: html');
+            state.write('\n');
+            state.write(node.attrs[YfmHtmlBlockConsts.NodeAttrs.srcdoc]);
+            state.ensureNewLine();
+            state.write(':::');
+            state.closeBlock(node);
+        },
+        view: nodeView,
+    }));
+};
+export const YfmHtmlBlockSpecs = Object.assign(YfmHtmlBlockSpecsExtension, YfmHtmlBlockConsts);

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

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

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

@@ -0,0 +1,12 @@
+import { YfmHtmlBlockConsts, yfmHtmlBlockNodeType } from './YfmHtmlBlockSpecs/const';
+export const addYfmHtmlBlock = {
+    isEnable(state) {
+        return state.selection.empty;
+    },
+    run(state, dispatch, _view) {
+        dispatch(state.tr.insert(state.selection.from, yfmHtmlBlockNodeType(state.schema).create({
+            [YfmHtmlBlockConsts.NodeAttrs.srcdoc]: '\n',
+            [YfmHtmlBlockConsts.NodeAttrs.newCreated]: true,
+        })));
+    },
+};

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

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

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

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

package/build/esm/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;
+        }
+    }
+}

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

@@ -0,0 +1,13 @@
+import { WYfmHtmlBlockNodeView } from './YfmHtmlBlockNodeView';
+import { YfmHtmlBlockSpecs } from './YfmHtmlBlockSpecs';
+import { YfmHtmlBlockAction } from './YfmHtmlBlockSpecs/const';
+import { addYfmHtmlBlock } from './actions';
+export const YfmHtmlBlock = (builder, options) => {
+    builder.use(YfmHtmlBlockSpecs, {
+        nodeView: YfmHtmlBlockNodeViewFactory(options),
+    });
+    builder.addAction(YfmHtmlBlockAction, () => addYfmHtmlBlock);
+};
+const YfmHtmlBlockNodeViewFactory = (options) => () => (node, view, getPos) => {
+    return new WYfmHtmlBlockNodeView({ node, view, getPos, options });
+};

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

@@ -4,8 +4,8 @@ export * from './Emoji';
 export * from './ImgSize';
 export * from './Monospace';
 export * from './Video';
-export * from './YfmCut';
 export * from './YfmConfigs';
+export * from './YfmCut';
 export * from './YfmFile';
 export * from './YfmHeading';
 export * from './YfmNote';

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

@@ -4,8 +4,8 @@ export * from './Emoji';
 export * from './ImgSize';
 export * from './Monospace';
 export * from './Video';
-export * from './YfmCut';
 export * from './YfmConfigs';
+export * from './YfmCut';
 export * from './YfmFile';
 export * from './YfmHeading';
 export * from './YfmNote';

package/build/esm/i18n/common/en.json

@@ -1,5 +1,9 @@
 {
-  "toolbar_action_disabled": "Incompatible markup element",
+  "cancel": "Cancel",
+  "delete": "Delete",
   "edit": "Edit",
-  "delete": "Delete"
+  "preview": "Preview",
+  "remove": "Remove",
+  "save": "Save",
+  "toolbar_action_disabled": "Incompatible markup element"
 }