@gravity-ui/markdown-editor 13.3.0 → 13.4.0

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.YfmHtmlBlock = void 0;
+const YfmHtmlBlockNodeView_1 = require("./YfmHtmlBlockNodeView");
+const YfmHtmlBlockSpecs_1 = require("./YfmHtmlBlockSpecs");
+const const_1 = require("./YfmHtmlBlockSpecs/const");
+const actions_1 = require("./actions");
+const YfmHtmlBlock = (builder, options) => {
+    builder.use(YfmHtmlBlockSpecs_1.YfmHtmlBlockSpecs, {
+        nodeView: YfmHtmlBlockNodeViewFactory(options),
+    });
+    builder.addAction(const_1.YfmHtmlBlockAction, () => actions_1.addYfmHtmlBlock);
+};
+exports.YfmHtmlBlock = YfmHtmlBlock;
+const YfmHtmlBlockNodeViewFactory = (options) => () => (node, view, getPos) => {
+    return new YfmHtmlBlockNodeView_1.WYfmHtmlBlockNodeView({ node, view, getPos, options });
+};

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

@@ -7,8 +7,8 @@ tslib_1.__exportStar(require("./Emoji"), exports);
 tslib_1.__exportStar(require("./ImgSize"), exports);
 tslib_1.__exportStar(require("./Monospace"), exports);
 tslib_1.__exportStar(require("./Video"), exports);
-tslib_1.__exportStar(require("./YfmCut"), exports);
 tslib_1.__exportStar(require("./YfmConfigs"), exports);
+tslib_1.__exportStar(require("./YfmCut"), exports);
 tslib_1.__exportStar(require("./YfmFile"), exports);
 tslib_1.__exportStar(require("./YfmHeading"), exports);
 tslib_1.__exportStar(require("./YfmNote"), exports);

package/build/cjs/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"
 }

package/build/cjs/i18n/common/index.d.ts

@@ -1,7 +1,11 @@
-export declare const i18n: <G extends "toolbar_action_disabled" | "edit" | "delete", S extends string>(key: G | (string extends S ? S : never), params?: {
+export declare const i18n: <G extends "remove" | "cancel" | "delete" | "edit" | "preview" | "save" | "toolbar_action_disabled", S extends string>(key: G | (string extends S ? S : never), params?: {
     [key: string]: any;
 } | undefined) => S extends G ? {
-    toolbar_action_disabled: string;
-    edit: string;
+    cancel: string;
     delete: string;
+    edit: string;
+    preview: string;
+    remove: string;
+    save: string;
+    toolbar_action_disabled: string;
 }[G] : string;

package/build/cjs/i18n/common/ru.json

@@ -1,5 +1,9 @@
 {
-  "toolbar_action_disabled": "Несовместимый элемент разметки",
+  "cancel": "Отмена",
+  "delete": "Удалить",
   "edit": "Редактировать",
-  "delete": "Удалить"
+  "preview": "Предпросмотр",
+  "remove": "Удалить",
+  "save": "Сохранить",
+  "toolbar_action_disabled": "Несовместимый элемент разметки"
 }

package/build/cjs/i18n/menubar/en.json

@@ -1,13 +1,22 @@
 {
-  "undo": "Undo",
-  "redo": "Redo",
   "bold": "Bold",
-  "italic": "Italic",
-  "underline": "Underline",
-  "strike": "Strikethrough",
-  "mono": "Monospace",
-  "mark": "Marked",
-  "text": "Text",
+  "checkbox": "Checkbox",
+  "code": "Code",
+  "code_inline": "Inline code",
+  "codeblock": "Code block",
+  "colorify": "Text color",
+  "colorify__color_blue": "Blue",
+  "colorify__color_default": "Default",
+  "colorify__color_gray": "Gray",
+  "colorify__color_green": "Green",
+  "colorify__color_orange": "Orange",
+  "colorify__color_red": "Red",
+  "colorify__color_violet": "Violet",
+  "colorify__color_yellow": "Yellow",
+  "colorify__group_text": "Text",
+  "cut": "Cut",
+  "emoji": "Emoji",
+  "file": "File",
   "heading": "Heading",
   "heading1": "Heading 1",
   "heading2": "Heading 2",
@@ -15,39 +24,31 @@
   "heading4": "Heading 4",
   "heading5": "Heading 5",
   "heading6": "Heading 6",
+  "hrule": "Separator",
+  "html": "HTML",
+  "image": "Image",
+  "italic": "Italic",
+  "link": "Link",
   "list": "List",
-  "ulist": "Bullet list",
-  "olist": "Ordered list",
-  "list__action_sink": "Sink item",
   "list__action_lift": "Lift item",
+  "list__action_sink": "Sink item",
   "list_action_disabled": "Contradicts the logic of the list",
-  "checkbox": "Checkbox",
-  "quote": "Quote",
-  "cut": "Cut",
-  "note": "Note",
-  "table": "Table",
-  "link": "Link",
-  "code": "Code",
-  "code_inline": "Inline code",
-  "codeblock": "Code block",
-  "image": "Image",
-  "hrule": "Separator",
-  "emoji": "Emoji",
-  "file": "File",
+  "mark": "Marked",
   "math": "Math",
-  "math_inline": "Inline math",
   "math_block": "Math block",
-  "colorify": "Text color",
-  "colorify__group_text": "Text",
-  "colorify__color_default": "Default",
-  "colorify__color_gray": "Gray",
-  "colorify__color_yellow": "Yellow",
-  "colorify__color_orange": "Orange",
-  "colorify__color_red": "Red",
-  "colorify__color_green": "Green",
-  "colorify__color_blue": "Blue",
-  "colorify__color_violet": "Violet",
+  "math_inline": "Inline math",
+  "mermaid": "Mermaid",
+  "mono": "Monospace",
   "more_action": "More action",
+  "note": "Note",
+  "olist": "Ordered list",
+  "quote": "Quote",
+  "redo": "Redo",
+  "strike": "Strikethrough",
+  "table": "Table",
   "tabs": "Tabs",
-  "mermaid": "Mermaid"
+  "text": "Text",
+  "ulist": "Bullet list",
+  "underline": "Underline",
+  "undo": "Undo"
 }

package/build/cjs/i18n/menubar/index.d.ts

@@ -1,15 +1,24 @@
-export declare const i18n: <G extends "bold" | "code" | "link" | "italic" | "strike" | "underline" | "mark" | "quote" | "colorify" | "mono" | "text" | "cut" | "table" | "image" | "code_inline" | "heading" | "note" | "file" | "codeblock" | "checkbox" | "emoji" | "list" | "tabs" | "math" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "undo" | "redo" | "math_inline" | "math_block" | "ulist" | "olist" | "list__action_sink" | "list__action_lift" | "list_action_disabled" | "hrule" | "colorify__group_text" | "colorify__color_default" | "colorify__color_gray" | "colorify__color_yellow" | "colorify__color_orange" | "colorify__color_red" | "colorify__color_green" | "colorify__color_blue" | "colorify__color_violet" | "more_action" | "mermaid", S extends string>(key: G | (string extends S ? S : never), params?: {
+export declare const i18n: <G extends "bold" | "code" | "link" | "italic" | "strike" | "underline" | "mark" | "quote" | "colorify" | "mono" | "text" | "html" | "cut" | "table" | "image" | "code_inline" | "heading" | "note" | "file" | "codeblock" | "checkbox" | "emoji" | "list" | "tabs" | "math" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "undo" | "redo" | "math_inline" | "math_block" | "colorify__color_blue" | "colorify__color_default" | "colorify__color_gray" | "colorify__color_green" | "colorify__color_orange" | "colorify__color_red" | "colorify__color_violet" | "colorify__color_yellow" | "colorify__group_text" | "hrule" | "list__action_lift" | "list__action_sink" | "list_action_disabled" | "mermaid" | "more_action" | "olist" | "ulist", S extends string>(key: G | (string extends S ? S : never), params?: {
     [key: string]: any;
 } | undefined) => S extends G ? {
-    undo: string;
-    redo: string;
     bold: string;
-    italic: string;
-    underline: string;
-    strike: string;
-    mono: string;
-    mark: string;
-    text: string;
+    checkbox: string;
+    code: string;
+    code_inline: string;
+    codeblock: string;
+    colorify: string;
+    colorify__color_blue: string;
+    colorify__color_default: string;
+    colorify__color_gray: string;
+    colorify__color_green: string;
+    colorify__color_orange: string;
+    colorify__color_red: string;
+    colorify__color_violet: string;
+    colorify__color_yellow: string;
+    colorify__group_text: string;
+    cut: string;
+    emoji: string;
+    file: string;
     heading: string;
     heading1: string;
     heading2: string;
@@ -17,39 +26,31 @@ export declare const i18n: <G extends "bold" | "code" | "link" | "italic" | "str
     heading4: string;
     heading5: string;
     heading6: string;
+    hrule: string;
+    html: string;
+    image: string;
+    italic: string;
+    link: string;
     list: string;
-    ulist: string;
-    olist: string;
-    list__action_sink: string;
     list__action_lift: string;
+    list__action_sink: string;
     list_action_disabled: string;
-    checkbox: string;
-    quote: string;
-    cut: string;
-    note: string;
-    table: string;
-    link: string;
-    code: string;
-    code_inline: string;
-    codeblock: string;
-    image: string;
-    hrule: string;
-    emoji: string;
-    file: string;
+    mark: string;
     math: string;
-    math_inline: string;
     math_block: string;
-    colorify: string;
-    colorify__group_text: string;
-    colorify__color_default: string;
-    colorify__color_gray: string;
-    colorify__color_yellow: string;
-    colorify__color_orange: string;
-    colorify__color_red: string;
-    colorify__color_green: string;
-    colorify__color_blue: string;
-    colorify__color_violet: string;
+    math_inline: string;
+    mermaid: string;
+    mono: string;
     more_action: string;
+    note: string;
+    olist: string;
+    quote: string;
+    redo: string;
+    strike: string;
+    table: string;
     tabs: string;
-    mermaid: string;
+    text: string;
+    ulist: string;
+    underline: string;
+    undo: string;
 }[G] : string;

package/build/cjs/i18n/menubar/ru.json

@@ -1,13 +1,22 @@
 {
-  "undo": "Отменить",
-  "redo": "Повторить",
   "bold": "Жирный",
-  "italic": "Курсив",
-  "mono": "Моноширинный",
-  "mark": "Выделенный",
-  "underline": "Подчеркивание",
-  "strike": "Зачеркивание",
-  "text": "Текст",
+  "checkbox": "Контрольный список",
+  "code": "Код",
+  "code_inline": "Код в тексте",
+  "codeblock": "Блок кода",
+  "colorify": "Цвет текста",
+  "colorify__color_blue": "Синий",
+  "colorify__color_default": "Стандартный",
+  "colorify__color_gray": "Серый",
+  "colorify__color_green": "Зелёный",
+  "colorify__color_orange": "Оранжевый",
+  "colorify__color_red": "Красный",
+  "colorify__color_violet": "Фиолетовый",
+  "colorify__color_yellow": "Жёлтый",
+  "colorify__group_text": "Текст",
+  "cut": "Кат",
+  "emoji": "Эмодзи",
+  "file": "Файл",
   "heading": "Заголовок",
   "heading1": "Заголовок 1",
   "heading2": "Заголовок 2",
@@ -15,39 +24,31 @@
   "heading4": "Заголовок 4",
   "heading5": "Заголовок 5",
   "heading6": "Заголовок 6",
+  "hrule": "Разделитель",
+  "html": "HTML",
+  "image": "Изображение",
+  "italic": "Курсив",
+  "link": "Ссылка",
   "list": "Список",
-  "ulist": "Маркированный список",
-  "olist": "Нумерованный список",
-  "list__action_sink": "Увеличить отступ",
   "list__action_lift": "Уменьшить отступ",
+  "list__action_sink": "Увеличить отступ",
   "list_action_disabled": "Противоречит логике списка",
-  "checkbox": "Контрольный список",
-  "quote": "Цитата",
-  "cut": "Кат",
-  "note": "Примечание",
-  "table": "Таблица",
-  "link": "Ссылка",
-  "code": "Код",
-  "code_inline": "Код в тексте",
-  "codeblock": "Блок кода",
-  "image": "Изображение",
-  "hrule": "Разделитель",
-  "emoji": "Эмодзи",
-  "file": "Файл",
+  "mark": "Выделенный",
   "math": "Формула",
-  "math_inline": "Формула в тексте",
   "math_block": "Блок с формулой",
-  "colorify": "Цвет текста",
-  "colorify__group_text": "Текст",
-  "colorify__color_default": "Стандартный",
-  "colorify__color_gray": "Серый",
-  "colorify__color_yellow": "Жёлтый",
-  "colorify__color_orange": "Оранжевый",
-  "colorify__color_red": "Красный",
-  "colorify__color_green": "Зелёный",
-  "colorify__color_blue": "Синий",
-  "colorify__color_violet": "Фиолетовый",
+  "math_inline": "Формула в тексте",
+  "mermaid": "Mermaid",
+  "mono": "Моноширинный",
   "more_action": "Другие действия",
+  "note": "Примечание",
+  "olist": "Нумерованный список",
+  "quote": "Цитата",
+  "redo": "Повторить",
+  "strike": "Зачеркивание",
+  "table": "Таблица",
   "tabs": "Табы",
-  "mermaid": "Mermaid"
+  "text": "Текст",
+  "ulist": "Маркированный список",
+  "underline": "Подчеркивание",
+  "undo": "Отменить"
 }

package/build/cjs/icons/index.d.ts

@@ -2,4 +2,4 @@ import MermaidIcon from './Mermaid';
 import MonoIcon from './Mono';
 import TabsIcon from './Tabs';
 export { MermaidIcon, MonoIcon, TabsIcon };
-export { ArrowUturnCcwLeft as UndoIcon, ArrowUturnCwRight as RedoIcon, Bold as BoldIcon, Italic as ItalicIcon, Underline as UnderlineIcon, Strikethrough as StrikethroughIcon, FontCursor as MarkIcon, Text as TextIcon, Heading as HeadingIcon, Heading1 as Heading1Icon, Heading2 as Heading2Icon, Heading3 as Heading3Icon, Heading4 as Heading4Icon, Heading5 as Heading5Icon, Heading6 as Heading6Icon, ListUl as ListBlIcon, ListOl as ListOlIcon, TextOutdent as LiftIcon, TextIndent as SinkIcon, Font as TextColorIcon, Link as LinkIcon, QuoteClose as QuoteIcon, Scissors as CutIcon, Sticker as NoteIcon, Paperclip as FileIcon, Minus as HRuleIcon, LayoutList as TableIcon, ChevronsExpandHorizontal as IframeIcon, SquareCheck as CheckListIcon, Picture as ImageIcon, Person as UserIcon, FaceSmile as EmojiIcon, Code as CodeInlineIcon, FileCode as CodeBlockIcon, Function as FunctionInlineIcon, CurlyBracketsFunction as FunctionBlockIcon, Hashtag as AnchorIcon, SquareDashedText as BlockIcon, LayoutColumns3 as LayoutIcon, Pencil as DrawIoIcon, } from '@gravity-ui/icons';
+export { ArrowUturnCcwLeft as UndoIcon, ArrowUturnCwRight as RedoIcon, Bold as BoldIcon, Italic as ItalicIcon, Underline as UnderlineIcon, Strikethrough as StrikethroughIcon, FontCursor as MarkIcon, Text as TextIcon, Heading as HeadingIcon, Heading1 as Heading1Icon, Heading2 as Heading2Icon, Heading3 as Heading3Icon, Heading4 as Heading4Icon, Heading5 as Heading5Icon, Heading6 as Heading6Icon, ListUl as ListBlIcon, ListOl as ListOlIcon, TextOutdent as LiftIcon, TextIndent as SinkIcon, Font as TextColorIcon, Link as LinkIcon, QuoteClose as QuoteIcon, Scissors as CutIcon, Sticker as NoteIcon, Paperclip as FileIcon, Minus as HRuleIcon, LayoutList as TableIcon, ChevronsExpandHorizontal as IframeIcon, SquareCheck as CheckListIcon, Picture as ImageIcon, Person as UserIcon, FaceSmile as EmojiIcon, Code as CodeInlineIcon, FileCode as CodeBlockIcon, Function as FunctionInlineIcon, CurlyBracketsFunction as FunctionBlockIcon, Hashtag as AnchorIcon, SquareDashedText as BlockIcon, LayoutColumns3 as LayoutIcon, Pencil as DrawIoIcon, FolderCode as HtmlBlockIcon, } from '@gravity-ui/icons';

package/build/cjs/icons/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DrawIoIcon = exports.LayoutIcon = exports.BlockIcon = exports.AnchorIcon = exports.FunctionBlockIcon = exports.FunctionInlineIcon = exports.CodeBlockIcon = exports.CodeInlineIcon = exports.EmojiIcon = exports.UserIcon = exports.ImageIcon = exports.CheckListIcon = exports.IframeIcon = exports.TableIcon = exports.HRuleIcon = exports.FileIcon = exports.NoteIcon = exports.CutIcon = exports.QuoteIcon = exports.LinkIcon = exports.TextColorIcon = exports.SinkIcon = exports.LiftIcon = exports.ListOlIcon = exports.ListBlIcon = exports.Heading6Icon = exports.Heading5Icon = exports.Heading4Icon = exports.Heading3Icon = exports.Heading2Icon = exports.Heading1Icon = exports.HeadingIcon = exports.TextIcon = exports.MarkIcon = exports.StrikethroughIcon = exports.UnderlineIcon = exports.ItalicIcon = exports.BoldIcon = exports.RedoIcon = exports.UndoIcon = exports.TabsIcon = exports.MonoIcon = exports.MermaidIcon = void 0;
+exports.HtmlBlockIcon = exports.DrawIoIcon = exports.LayoutIcon = exports.BlockIcon = exports.AnchorIcon = exports.FunctionBlockIcon = exports.FunctionInlineIcon = exports.CodeBlockIcon = exports.CodeInlineIcon = exports.EmojiIcon = exports.UserIcon = exports.ImageIcon = exports.CheckListIcon = exports.IframeIcon = exports.TableIcon = exports.HRuleIcon = exports.FileIcon = exports.NoteIcon = exports.CutIcon = exports.QuoteIcon = exports.LinkIcon = exports.TextColorIcon = exports.SinkIcon = exports.LiftIcon = exports.ListOlIcon = exports.ListBlIcon = exports.Heading6Icon = exports.Heading5Icon = exports.Heading4Icon = exports.Heading3Icon = exports.Heading2Icon = exports.Heading1Icon = exports.HeadingIcon = exports.TextIcon = exports.MarkIcon = exports.StrikethroughIcon = exports.UnderlineIcon = exports.ItalicIcon = exports.BoldIcon = exports.RedoIcon = exports.UndoIcon = exports.TabsIcon = exports.MonoIcon = exports.MermaidIcon = void 0;
 const tslib_1 = require("tslib");
 const Mermaid_1 = tslib_1.__importDefault(require("./Mermaid"));
 exports.MermaidIcon = Mermaid_1.default;
@@ -61,3 +61,4 @@ Object.defineProperty(exports, "BlockIcon", { enumerable: true, get: function ()
 Object.defineProperty(exports, "LayoutIcon", { enumerable: true, get: function () { return icons_1.LayoutColumns3; } });
 //
 Object.defineProperty(exports, "DrawIoIcon", { enumerable: true, get: function () { return icons_1.Pencil; } });
+Object.defineProperty(exports, "HtmlBlockIcon", { enumerable: true, get: function () { return icons_1.FolderCode; } });

package/build/cjs/markup/commands/blocks.d.ts

@@ -3,3 +3,4 @@ export declare const wrapToBlockquote: StateCommand;
 export declare const wrapToCheckbox: StateCommand;
 export declare const insertHRule: StateCommand;
 export declare const insertMermaidDiagram: StateCommand;
+export declare const insertYfmHtmlBlock: StateCommand;

package/build/cjs/markup/commands/blocks.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.insertMermaidDiagram = exports.insertHRule = exports.wrapToCheckbox = exports.wrapToBlockquote = void 0;
+exports.insertYfmHtmlBlock = exports.insertMermaidDiagram = exports.insertHRule = exports.wrapToCheckbox = exports.wrapToBlockquote = void 0;
 const helpers_1 = require("./helpers");
 exports.wrapToBlockquote = (0, helpers_1.wrapPerLine)({ beforeText: '> ', skipEmptyLine: false });
 exports.wrapToCheckbox = (0, helpers_1.wrapPerLine)({ beforeText: '[ ] ' });
@@ -22,3 +22,14 @@ sequenceDiagram
     return true;
 };
 exports.insertMermaidDiagram = insertMermaidDiagram;
+const insertYfmHtmlBlock = ({ state, dispatch }) => {
+    const markup = `::: html
+
+<div>Add HTML code here</div>
+
+:::`;
+    const tr = (0, helpers_1.replaceOrInsertAfter)(state, markup);
+    dispatch(state.update(tr));
+    return true;
+};
+exports.insertYfmHtmlBlock = insertYfmHtmlBlock;

package/build/cjs/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
 /** During build process, the current version will be injected here */
-exports.VERSION = typeof '13.3.0' !== 'undefined' ? '13.3.0' : 'unknown';
+exports.VERSION = typeof '13.4.0' !== 'undefined' ? '13.4.0' : 'unknown';

package/build/cjs/view/components/YfmHtml/{YfmHtml.d.ts → YfmStaticView.d.ts}

@@ -1,12 +1,12 @@
 import React from 'react';
 import { ClassNameProps } from '../../../classname';
-export declare type YfmHtmlProps = ClassNameProps & {
+export declare type YfmStaticViewProps = ClassNameProps & {
     html: string;
     linksVisited?: boolean;
     noListReset?: boolean;
     qa?: string;
 };
-export declare const YfmHtml: React.ForwardRefExoticComponent<ClassNameProps & {
+export declare const YfmStaticView: React.ForwardRefExoticComponent<ClassNameProps & {
     html: string;
     linksVisited?: boolean | undefined;
     noListReset?: boolean | undefined;

package/build/cjs/view/components/YfmHtml/{YfmHtml.js → YfmStaticView.js}

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.YfmHtml = void 0;
+exports.YfmStaticView = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const classnames_1 = require("@bem-react/classnames");
-exports.YfmHtml = (0, react_1.forwardRef)(function YfmHtml(props, ref) {
+exports.YfmStaticView = (0, react_1.forwardRef)(function YFMStaticView(props, ref) {
     const { html, linksVisited, noListReset, className, qa } = props;
     return (react_1.default.createElement("div", { ref: ref, dangerouslySetInnerHTML: { __html: html }, className: (0, classnames_1.classnames)('yfm', linksVisited ? 'yfm_links-visited' : undefined, noListReset ? 'yfm_no-list-reset' : undefined, className), "data-qa": qa }));
 });

package/build/cjs/view/components/YfmHtml/index.d.ts

@@ -1 +1,12 @@
-export * from './YfmHtml';
+import type { YfmStaticViewProps as OriginalYfmStaticViewProps } from './YfmStaticView';
+import { YfmStaticView as OriginalYfmStaticView } from './YfmStaticView';
+/**
+ * @deprecated use type `YFMStaticViewProps` instead
+ */
+export declare type YfmHtmlProps = OriginalYfmStaticViewProps;
+export declare type YFMStaticViewProps = OriginalYfmStaticViewProps;
+export { OriginalYfmStaticView as YfmStaticView };
+/**
+ * @deprecated use component `YfmStaticView` instead
+ */
+export { OriginalYfmStaticView as YfmHtml };

package/build/cjs/view/components/YfmHtml/index.js

@@ -1,4 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./YfmHtml"), exports);
+exports.YfmHtml = exports.YfmStaticView = void 0;
+const YfmStaticView_1 = require("./YfmStaticView");
+Object.defineProperty(exports, "YfmStaticView", { enumerable: true, get: function () { return YfmStaticView_1.YfmStaticView; } });
+Object.defineProperty(exports, "YfmHtml", { enumerable: true, get: function () { return YfmStaticView_1.YfmStaticView; } });

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

@@ -0,0 +1,13 @@
+import React, { ComponentType, RefAttributes } from 'react';
+import { IHTMLIFrameElementConfig } from '@diplodoc/html-extension/runtime';
+import type { PluginRuntime, TransformMeta } from '../withMermaid/types';
+export declare type WithYfmHtmlBlockOptions = {
+    runtime: PluginRuntime;
+};
+export declare type WithYfmHtmlBlockProps = {
+    meta: TransformMeta;
+    yfmHtmlBlockConfig?: IHTMLIFrameElementConfig;
+};
+export declare function withYfmHtmlBlock(opts: WithYfmHtmlBlockOptions): <T extends {
+    html: string;
+}>(Component: React.ComponentType<T & React.RefAttributes<HTMLDivElement>>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<T & WithYfmHtmlBlockProps> & React.RefAttributes<HTMLDivElement>>;

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/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),