@gravity-ui/markdown-editor 13.2.0 → 13.4.0

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withYfmHtmlBlock = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_2 = require("@diplodoc/html-extension/react");
+const useYfmHtmlBlockRuntime_1 = require("./useYfmHtmlBlockRuntime");
+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)();
+        (0, react_1.useEffect)(() => {
+            if (yfmHtmlBlock) {
+                if (yfmHtmlBlockConfig) {
+                    yfmHtmlBlock.setConfig(yfmHtmlBlockConfig);
+                }
+                yfmHtmlBlock.reinitialize();
+            }
+        }, [yfmHtmlBlock, html, yfmHtmlBlockConfig]);
+        return react_1.default.createElement(Component, Object.assign({}, props, { ref: ref }));
+    });
+}
+exports.withYfmHtmlBlock = withYfmHtmlBlock;

package/build/cjs/view/hocs/withYfmHtml/types.d.ts

@@ -0,0 +1,3 @@
+import type { PluginOptions } from '@diplodoc/html-extension/plugin/transform';
+export type { TransformMeta } from '../../types';
+export declare type PluginRuntime = PluginOptions['runtimeJsPath'];

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/cjs/view/hocs/withYfmHtml/useYfmHtmlBlockRuntime.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,34 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useYfmHtmlBlockRuntime = void 0;
+/** @internal */
+function useYfmHtmlBlockRuntime(meta, runtime = '_assets/html-extension.js') {
+    var _a;
+    if ((_a = meta === null || meta === void 0 ? void 0 : meta.script) === null || _a === void 0 ? void 0 : _a.includes(runtime)) {
+        Promise.resolve().then(() => __importStar(require(/* webpackChunkName: "yfm-html-runtime" */ '@diplodoc/html-extension/runtime')));
+    }
+}
+exports.useYfmHtmlBlockRuntime = useYfmHtmlBlockRuntime;

package/build/cjs/view/hocs/withYfmHtml/utils.d.ts

@@ -0,0 +1,16 @@
+declare const YfmHtmlBlockStyles: {
+    colorTextPrimary: string;
+    colorTextSecondary: string;
+    colorBackground: string;
+    colorBackgroundSecondary: string;
+    colorLink: string;
+    colorLinkHover: string;
+    colorLinkVisited: string;
+    font: string;
+    fontSize: string;
+    fontFamily: string;
+    lineHeight: string;
+};
+declare type Styles = Partial<Record<keyof typeof YfmHtmlBlockStyles, string>>;
+export declare const getYfmHtmlBlockCssVariables: (styles: Styles) => Record<string, string>;
+export {};

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getYfmHtmlBlockCssVariables = void 0;
+const YfmHtmlBlockStyles = {
+    colorTextPrimary: '--yfm-html-color-text-primary',
+    colorTextSecondary: '--yfm-html-color-text-secondary',
+    colorBackground: '--yfm-html-color-background',
+    colorBackgroundSecondary: '--yfm-html-color-background-secondary',
+    colorLink: '--yfm-html-color-link',
+    colorLinkHover: '--yfm-html-color-link-hover',
+    colorLinkVisited: '--yfm-html-color-link-visited',
+    font: '--yfm-html-font',
+    fontSize: '--yfm-html-font-size',
+    fontFamily: '--yfm-html-font-family',
+    lineHeight: '--yfm-html-line-height', // Line height of the text
+};
+const getYfmHtmlBlockCssVariables = (styles) => {
+    const obj = {};
+    for (const key of Object.keys(styles)) {
+        if (YfmHtmlBlockStyles[key]) {
+            obj[YfmHtmlBlockStyles[key]] = styles[key];
+        }
+    }
+    return obj;
+};
+exports.getYfmHtmlBlockCssVariables = getYfmHtmlBlockCssVariables;

package/build/esm/bundle/Editor.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import type { Extension as CodemirrorExtension } from '@codemirror/state';
 import { CommonEditor, MarkupString } from '../common';
 import { WysiwygEditorOptions } from '../core';
 import { ReactRenderStorage } from '../extensions';
@@ -67,5 +68,6 @@ export declare type EditorOptions = Pick<WysiwygEditorOptions, 'allowHTML' | 'li
     splitMode?: SplitMode;
     renderPreview?: RenderPreview;
     preset: EditorPreset;
+    extraMarkupExtensions?: CodemirrorExtension[];
 };
 export {};

package/build/esm/bundle/Editor.js

@@ -1,4 +1,4 @@
-var _EditorImpl_markup, _EditorImpl_editorMode, _EditorImpl_toolbarVisible, _EditorImpl_splitModeEnabled, _EditorImpl_splitMode, _EditorImpl_renderPreview, _EditorImpl_wysiwygEditor, _EditorImpl_markupEditor, _EditorImpl_preset, _EditorImpl_allowHTML, _EditorImpl_linkify, _EditorImpl_linkifyTlds, _EditorImpl_extensions, _EditorImpl_renderStorage, _EditorImpl_fileUploadHandler, _EditorImpl_needToSetDimensionsForUploadedImages, _EditorImpl_prepareRawMarkup;
+var _EditorImpl_markup, _EditorImpl_editorMode, _EditorImpl_toolbarVisible, _EditorImpl_splitModeEnabled, _EditorImpl_splitMode, _EditorImpl_renderPreview, _EditorImpl_wysiwygEditor, _EditorImpl_markupEditor, _EditorImpl_extraMarkupExtensions, _EditorImpl_preset, _EditorImpl_allowHTML, _EditorImpl_linkify, _EditorImpl_linkifyTlds, _EditorImpl_extensions, _EditorImpl_renderStorage, _EditorImpl_fileUploadHandler, _EditorImpl_needToSetDimensionsForUploadedImages, _EditorImpl_prepareRawMarkup;
 import { __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
 import { TextSelection } from 'prosemirror-state';
 import { WysiwygEditor } from '../core';
@@ -20,6 +20,7 @@ export class EditorImpl extends SafeEventEmitter {
         _EditorImpl_renderPreview.set(this, void 0);
         _EditorImpl_wysiwygEditor.set(this, void 0);
         _EditorImpl_markupEditor.set(this, void 0);
+        _EditorImpl_extraMarkupExtensions.set(this, void 0);
         _EditorImpl_preset.set(this, void 0);
         _EditorImpl_allowHTML.set(this, void 0);
         _EditorImpl_linkify.set(this, void 0);
@@ -41,6 +42,7 @@ export class EditorImpl extends SafeEventEmitter {
         __classPrivateFieldSet(this, _EditorImpl_linkifyTlds, opts.linkifyTlds, "f");
         __classPrivateFieldSet(this, _EditorImpl_allowHTML, opts.allowHTML, "f");
         __classPrivateFieldSet(this, _EditorImpl_extensions, opts.extensions, "f");
+        __classPrivateFieldSet(this, _EditorImpl_extraMarkupExtensions, opts.extraMarkupExtensions, "f");
         __classPrivateFieldSet(this, _EditorImpl_renderStorage, opts.renderStorage, "f");
         __classPrivateFieldSet(this, _EditorImpl_fileUploadHandler, opts.fileUploadHandler, "f");
         __classPrivateFieldSet(this, _EditorImpl_needToSetDimensionsForUploadedImages, Boolean(opts.needToSetDimensionsForUploadedImages), "f");
@@ -149,6 +151,7 @@ export class EditorImpl extends SafeEventEmitter {
                 reactRenderer: __classPrivateFieldGet(this, _EditorImpl_renderStorage, "f"),
                 uploadHandler: this.fileUploadHandler,
                 needImgDimms: this.needToSetDimensionsForUploadedImages,
+                extraMarkupExtensions: __classPrivateFieldGet(this, _EditorImpl_extraMarkupExtensions, "f"),
             })), "f");
         }
         return __classPrivateFieldGet(this, _EditorImpl_markupEditor, "f");
@@ -264,4 +267,4 @@ export class EditorImpl extends SafeEventEmitter {
         return (serializedEditorMarkup === null || serializedEditorMarkup === void 0 ? void 0 : serializedEditorMarkup.trim()) !== wysiwygValue.trim();
     }
 }
-_EditorImpl_markup = new WeakMap(), _EditorImpl_editorMode = new WeakMap(), _EditorImpl_toolbarVisible = new WeakMap(), _EditorImpl_splitModeEnabled = new WeakMap(), _EditorImpl_splitMode = new WeakMap(), _EditorImpl_renderPreview = new WeakMap(), _EditorImpl_wysiwygEditor = new WeakMap(), _EditorImpl_markupEditor = new WeakMap(), _EditorImpl_preset = new WeakMap(), _EditorImpl_allowHTML = new WeakMap(), _EditorImpl_linkify = new WeakMap(), _EditorImpl_linkifyTlds = new WeakMap(), _EditorImpl_extensions = new WeakMap(), _EditorImpl_renderStorage = new WeakMap(), _EditorImpl_fileUploadHandler = new WeakMap(), _EditorImpl_needToSetDimensionsForUploadedImages = new WeakMap(), _EditorImpl_prepareRawMarkup = new WeakMap();
+_EditorImpl_markup = new WeakMap(), _EditorImpl_editorMode = new WeakMap(), _EditorImpl_toolbarVisible = new WeakMap(), _EditorImpl_splitModeEnabled = new WeakMap(), _EditorImpl_splitMode = new WeakMap(), _EditorImpl_renderPreview = new WeakMap(), _EditorImpl_wysiwygEditor = new WeakMap(), _EditorImpl_markupEditor = new WeakMap(), _EditorImpl_extraMarkupExtensions = 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();

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

@@ -44,7 +44,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] = useState(((_b = (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0) / 2);
@@ -96,6 +96,7 @@ const HorizontalDrag = ({ leftElRef, rightElRef, wrapperRef, editor, }) => {
         cm.requestMeasure();
         (_b = rightElRef.current) === null || _b === void 0 ? void 0 : _b.classList.remove(IN_RESIZE_CLASSNAME);
         (_c = leftElRef.current) === null || _c === void 0 ? void 0 : _c.classList.remove(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.createElement("div", Object.assign({ className: cnEditorComponent('resizer', { horizontal: true }) }, listeners),

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/bundle/wysiwyg-preset.js

@@ -10,6 +10,7 @@ import { ZeroPreset } from '../presets/zero';
 import { Action as A, formatter as f } from '../shortcuts';
 import { wCommandMenuConfigByPreset, wSelectionMenuConfigByPreset } from './config/wysiwyg';
 import { emojiDefs } from './emoji';
+const DEFAULT_IGNORED_KEYS = ['Tab', 'Shift-Tab'];
 export const BundlePreset = (builder, opts) => {
     var _a, _b;
     const dropCursor = {
@@ -63,6 +64,7 @@ export const BundlePreset = (builder, opts) => {
         }
     }
     const ignoreKeysList = (_b = (_a = opts.ignoreKeysList) === null || _a === void 0 ? void 0 : _a.slice()) !== null && _b !== void 0 ? _b : [];
+    ignoreKeysList.push(...DEFAULT_IGNORED_KEYS);
     for (const action of ignoreActions) {
         const key = f.toPM(action);
         if (key)

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;
+}>;