@gravity-ui/markdown-editor 13.3.0 → 13.4.0

package/build/esm/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/esm/i18n/common/ru.json

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

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

@@ -26,4 +26,4 @@ Function as FunctionInlineIcon, CurlyBracketsFunction as FunctionBlockIcon,
 //
 Hashtag as AnchorIcon, SquareDashedText as BlockIcon, LayoutColumns3 as LayoutIcon, 
 //
-Pencil as DrawIoIcon, } from '@gravity-ui/icons';
+Pencil as DrawIoIcon, FolderCode as HtmlBlockIcon, } from '@gravity-ui/icons';

package/build/esm/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/esm/markup/commands/blocks.js

@@ -17,3 +17,13 @@ sequenceDiagram
     dispatch(state.update(tr));
     return true;
 };
+export const insertYfmHtmlBlock = ({ state, dispatch }) => {
+    const markup = `::: html
+
+<div>Add HTML code here</div>
+
+:::`;
+    const tr = replaceOrInsertAfter(state, markup);
+    dispatch(state.update(tr));
+    return true;
+};

package/build/esm/version.js

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

package/build/esm/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/esm/view/components/YfmHtml/{YfmHtml.js → YfmStaticView.js}

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import { classnames } from '@bem-react/classnames';
-export const YfmHtml = forwardRef(function YfmHtml(props, ref) {
+export const YfmStaticView = forwardRef(function YFMStaticView(props, ref) {
     const { html, linksVisited, noListReset, className, qa } = props;
     return (React.createElement("div", { ref: ref, dangerouslySetInnerHTML: { __html: html }, className: classnames('yfm', linksVisited ? 'yfm_links-visited' : undefined, noListReset ? 'yfm_no-list-reset' : undefined, className), "data-qa": qa }));
 });

package/build/esm/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/esm/view/components/YfmHtml/index.js

@@ -1 +1,6 @@
-export * from './YfmHtml';
+import { YfmStaticView as OriginalYfmStaticView } from './YfmStaticView';
+export { OriginalYfmStaticView as YfmStaticView };
+/**
+ * @deprecated use component `YfmStaticView` instead
+ */
+export { OriginalYfmStaticView as YfmHtml };

package/build/esm/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/esm/view/hocs/withYfmHtml/index.js

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

package/build/esm/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/esm/view/hocs/withYfmHtml/types.js

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

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

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

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

@@ -0,0 +1,7 @@
+/** @internal */
+export 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)) {
+        import(/* webpackChunkName: "yfm-html-runtime" */ '@diplodoc/html-extension/runtime');
+    }
+}

package/build/esm/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/esm/view/hocs/withYfmHtml/utils.js

@@ -0,0 +1,22 @@
+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
+};
+export const getYfmHtmlBlockCssVariables = (styles) => {
+    const obj = {};
+    for (const key of Object.keys(styles)) {
+        if (YfmHtmlBlockStyles[key]) {
+            obj[YfmHtmlBlockStyles[key]] = styles[key];
+        }
+    }
+    return obj;
+};

package/build/styles.css

@@ -1224,6 +1224,72 @@ img.ProseMirror-separator {
 .g-md-file-placeholder .yfm-file__icon {
   margin-right: 8px;
 }
+.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);
+}
 .g-md-code-block-toolbar {
   margin: 2px 8px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/markdown-editor",
-  "version": "13.3.0",
+  "version": "13.4.0",
   "description": "Markdown wysiwyg and markup editor",
   "license": "MIT",
   "repository": {
@@ -200,6 +200,7 @@
   "devDependencies": {
     "@diplodoc/latex-extension": "1.0.3",
     "@diplodoc/mermaid-extension": "1.2.1",
+    "@diplodoc/html-extension": "1.2.7",
     "@diplodoc/transform": "4.5.0",
     "@gravity-ui/components": "3.0.0",
     "@gravity-ui/eslint-config": "3.1.1",
@@ -256,6 +257,9 @@
     "@diplodoc/mermaid-extension": {
       "optional": true
     },
+    "@diplodoc/html-extension": {
+      "optional": true
+    },
     "highlight.js": {
       "optional": true
     },
@@ -266,6 +270,7 @@
   "peerDependencies": {
     "@diplodoc/latex-extension": "^1.0.3",
     "@diplodoc/mermaid-extension": "^1.0.0",
+    "@diplodoc/html-extension": "^1.2.7",
     "@diplodoc/transform": "^4.5.0",
     "@gravity-ui/components": "^3.0.0",
     "@gravity-ui/uikit": "^6.11.0",