@gravity-ui/markdown-editor 13.22.0 → 13.24.0

package/build/cjs/bundle/MarkdownEditorView.css

@@ -1,6 +1,7 @@
 .g-md-editor-component {
   display: flex;
   height: 100%;
+  outline: none;
 }
 .g-md-editor-component_split_vertical {
   display: grid;

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

@@ -2,8 +2,7 @@ import React from 'react';
 import type { ToasterPublicMethods } from '@gravity-ui/uikit';
 import { ClassNameProps } from '../classname';
 import type { Editor } from './Editor';
-import { MToolbarData, MToolbarItemData } from './config/markup';
-import { WToolbarData, WToolbarItemData } from './config/wysiwyg';
+import { MToolbarData, MToolbarItemData, WToolbarData, WToolbarItemData } from './config';
 export declare const cnEditorComponent: import("@bem-react/classname").ClassNameFormatter;
 export declare type MarkdownEditorViewProps = ClassNameProps & {
     editor?: Editor;
@@ -16,6 +15,8 @@ export declare type MarkdownEditorViewProps = ClassNameProps & {
     settingsVisible?: boolean;
     toaster: ToasterPublicMethods;
     stickyToolbar: boolean;
+    enableSubmitInPreview?: boolean;
+    hidePreviewAfterSubmit?: boolean;
 };
 export declare const MarkdownEditorView: React.ForwardRefExoticComponent<ClassNameProps & {
     editor?: Editor | undefined;
@@ -28,4 +29,6 @@ export declare const MarkdownEditorView: React.ForwardRefExoticComponent<ClassNa
     settingsVisible?: boolean | undefined;
     toaster: ToasterPublicMethods;
     stickyToolbar: boolean;
+    enableSubmitInPreview?: boolean | undefined;
+    hidePreviewAfterSubmit?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>>;

package/build/cjs/bundle/MarkdownEditorView.js

@@ -8,16 +8,13 @@ const react_use_1 = require("react-use");
 const classname_1 = require("../classname");
 const bundle_1 = require("../i18n/bundle");
 const logger_1 = require("../logger");
-const hooks_1 = require("../react-utils/hooks");
-const toaster_1 = require("../react-utils/toaster");
-const useSticky_1 = require("../react-utils/useSticky");
-const platform_1 = require("../utils/platform");
+const react_utils_1 = require("../react-utils");
+const utils_1 = require("../utils");
 const HorizontalDrag_1 = require("./HorizontalDrag");
 const MarkupEditorView_1 = require("./MarkupEditorView");
 const SplitModeView_1 = require("./SplitModeView");
 const WysiwygEditorView_1 = require("./WysiwygEditorView");
-const markup_1 = require("./config/markup");
-const wysiwyg_1 = require("./config/wysiwyg");
+const config_1 = require("./config");
 const context_1 = require("./context");
 const settings_1 = require("./settings");
 const sticky_1 = require("./sticky");
@@ -31,12 +28,12 @@ exports.MarkdownEditorView = react_1.default.forwardRef((props, ref) => {
     (0, react_1.useEffect)(() => {
         setIsMounted(true);
     }, []);
-    const [showPreview, , unsetShowPreview, toggleShowPreview] = (0, hooks_1.useBooleanState)(false);
+    const [showPreview, , unsetShowPreview, toggleShowPreview] = (0, react_utils_1.useBooleanState)(false);
     const context = (0, context_1.useMarkdownEditorContext)();
     const editor = ((_a = props.editor) !== null && _a !== void 0 ? _a : context);
     if (!editor)
         throw new Error('[MarkdownEditorView]: an instance of the editor must be passed through the props or context');
-    const { autofocus, className, settingsVisible = true, markupToolbarConfig = markup_1.mToolbarConfigByPreset[editor.preset], wysiwygToolbarConfig = wysiwyg_1.wToolbarConfigByPreset[editor.preset], markupHiddenActionsConfig = markup_1.mHiddenDataByPreset[editor.preset], wysiwygHiddenActionsConfig = wysiwyg_1.wHiddenDataByPreset[editor.preset], toaster, stickyToolbar, } = props;
+    const { autofocus, className, settingsVisible = true, markupToolbarConfig = config_1.mToolbarConfigByPreset[editor.preset], wysiwygToolbarConfig = config_1.wToolbarConfigByPreset[editor.preset], markupHiddenActionsConfig = config_1.mHiddenDataByPreset[editor.preset], wysiwygHiddenActionsConfig = config_1.wHiddenDataByPreset[editor.preset], toaster, stickyToolbar, enableSubmitInPreview = true, hidePreviewAfterSubmit = false, } = props;
     const rerender = (0, react_use_1.useUpdate)();
     react_1.default.useLayoutEffect(() => {
         editor.on('rerender', rerender);
@@ -66,6 +63,20 @@ exports.MarkdownEditorView = react_1.default.forwardRef((props, ref) => {
     (0, react_use_1.useKey)((e) => canRenderPreview && isPreviewKeyDown(e), () => onShowPreviewChange(!showPreview), { event: 'keydown' }, [showPreview, editorMode, onShowPreviewChange, canRenderPreview]);
     const editorWrapperRef = (0, react_1.useRef)(null);
     const splitModeViewWrapperRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (showPreview) {
+            divRef.current.focus();
+        }
+    }, [divRef, showPreview]);
+    (0, react_use_1.useKey)((e) => enableSubmitInPreview &&
+        showPreview &&
+        isWrapperFocused(divRef) &&
+        isSubmitKeyDown(e), () => {
+        editor.emit('submit', null);
+        if (hidePreviewAfterSubmit) {
+            onShowPreviewChange(false);
+        }
+    }, { event: 'keydown' }, [hidePreviewAfterSubmit, enableSubmitInPreview, showPreview, showPreview]);
     const settings = (0, react_1.useMemo)(() => (react_1.default.createElement(Settings, { mode: editorMode, onModeChange: onModeChange, toolbarVisibility: editor.toolbarVisible && !showPreview, onToolbarVisibilityChange: onToolbarVisibilityChange, onSplitModeChange: onSplitModeChange, splitModeEnabled: editor.splitModeEnabled, splitMode: editor.splitMode, stickyToolbar: stickyToolbar, onShowPreviewChange: onShowPreviewChange, showPreview: showPreview, renderPreviewButton: canRenderPreview })), [
         canRenderPreview,
         stickyToolbar,
@@ -98,11 +109,11 @@ exports.MarkdownEditorView = react_1.default.forwardRef((props, ref) => {
             });
             return null;
         } },
-        react_1.default.createElement(toaster_1.ToasterContext.Provider, { value: toaster },
+        react_1.default.createElement(react_utils_1.ToasterContext.Provider, { value: toaster },
             react_1.default.createElement("div", { ref: divRef, className: b({
                     settings: settingsVisible,
                     split: markupSplitMode && editor.splitMode,
-                }, [className]) },
+                }, [className]), role: "button", tabIndex: 0 },
                 react_1.default.createElement("div", { className: b('editor-wrapper'), ref: editorWrapperRef }, showPreview ? (react_1.default.createElement(react_1.default.Fragment, null,
                     react_1.default.createElement("div", { className: b('preview-wrapper') }, (_b = editor.renderPreview) === null || _b === void 0 ? void 0 : _b.call(editor, {
                         getValue: editor.getValue,
@@ -120,7 +131,7 @@ exports.MarkdownEditorView.displayName = 'MarkdownEditorView';
 const MarkupSearchAnchor = ({ mode }) => (react_1.default.createElement(react_1.default.Fragment, null, mode === 'markup' && react_1.default.createElement("div", { className: "g-md-search-anchor" })));
 function Settings(props) {
     const wrapperRef = (0, react_1.useRef)(null);
-    const isSticky = (0, useSticky_1.useSticky)(wrapperRef) && props.toolbarVisibility && props.stickyToolbar;
+    const isSticky = (0, react_utils_1.useSticky)(wrapperRef) && props.toolbarVisibility && props.stickyToolbar;
     return (react_1.default.createElement("div", { className: b('settings-wrapper') },
         react_1.default.createElement("div", { ref: wrapperRef, className: sticky_1.stickyCn.settings({
                 withToolbar: props.toolbarVisibility,
@@ -130,6 +141,13 @@ function Settings(props) {
             react_1.default.createElement(MarkupSearchAnchor, Object.assign({}, props)))));
 }
 function isPreviewKeyDown(e) {
-    const modKey = (0, platform_1.isMac)() ? e.metaKey : e.ctrlKey;
+    const modKey = (0, utils_1.isMac)() ? e.metaKey : e.ctrlKey;
     return modKey && e.shiftKey && e.code === 'KeyP';
 }
+function isWrapperFocused(divRef) {
+    return document.activeElement === divRef.current;
+}
+function isSubmitKeyDown(e) {
+    const modKey = (0, utils_1.isMac)() ? e.metaKey : e.ctrlKey;
+    return modKey && e.code === 'Enter';
+}

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

@@ -1 +1,2 @@
 export * from './wysiwyg';
+export * from './markup';

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

@@ -2,3 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./wysiwyg"), exports);
+tslib_1.__exportStar(require("./markup"), exports);

package/build/cjs/extensions/markdown/Lists/ListsSpecs/const.d.ts

@@ -5,10 +5,19 @@ export declare enum ListNode {
 }
 export declare enum ListsAttr {
     Tight = "tight",
-    /** used in bullet list only */
+    /** @deprecated Use `ListsAttr.Markup` instead */
     Bullet = "bullet",
     /** used in ordered list only */
     Order = "order",
-    /** used in list item only */
     Markup = "markup"
 }
+export declare const Markup: {
+    bullet: {
+        values: string[];
+        default: string;
+    };
+    ordered: {
+        values: string[];
+        default: string;
+    };
+};

package/build/cjs/extensions/markdown/Lists/ListsSpecs/const.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ListsAttr = exports.ListNode = void 0;
+exports.Markup = exports.ListsAttr = exports.ListNode = void 0;
 var ListNode;
 (function (ListNode) {
     ListNode["ListItem"] = "list_item";
@@ -10,10 +10,19 @@ var ListNode;
 var ListsAttr;
 (function (ListsAttr) {
     ListsAttr["Tight"] = "tight";
-    /** used in bullet list only */
+    /** @deprecated Use `ListsAttr.Markup` instead */
     ListsAttr["Bullet"] = "bullet";
     /** used in ordered list only */
     ListsAttr["Order"] = "order";
-    /** used in list item only */
     ListsAttr["Markup"] = "markup";
 })(ListsAttr = exports.ListsAttr || (exports.ListsAttr = {}));
+exports.Markup = {
+    bullet: {
+        values: ['-', '+', '*'],
+        default: '*',
+    },
+    ordered: {
+        values: ['.', ')'],
+        default: '.',
+    },
+};

package/build/cjs/extensions/markdown/Lists/ListsSpecs/parser.js

@@ -14,6 +14,7 @@ exports.parserTokens = {
         getAttrs: (token, tokens, i) => ({
             [const_1.ListsAttr.Tight]: listIsTight(tokens, i),
             [const_1.ListsAttr.Bullet]: token.markup,
+            [const_1.ListsAttr.Markup]: token.markup,
         }),
     },
     [const_1.ListNode.OrderedList]: {
@@ -22,6 +23,7 @@ exports.parserTokens = {
         getAttrs: (token, tokens, i) => ({
             [const_1.ListsAttr.Order]: Number(token.attrGet('start')) || 1,
             [const_1.ListsAttr.Tight]: listIsTight(tokens, i),
+            [const_1.ListsAttr.Markup]: token.markup,
         }),
     },
 };

package/build/cjs/extensions/markdown/Lists/ListsSpecs/schema.js

@@ -4,7 +4,10 @@ exports.schemaSpecs = void 0;
 const const_1 = require("./const");
 exports.schemaSpecs = {
     [const_1.ListNode.ListItem]: {
-        attrs: { [const_1.ListsAttr.Tight]: { default: false }, [const_1.ListsAttr.Markup]: { default: null } },
+        attrs: {
+            [const_1.ListsAttr.Tight]: { default: false },
+            [const_1.ListsAttr.Markup]: { default: null },
+        },
         content: '(paragraph|block)+',
         defining: true,
         parseDOM: [{ tag: 'li' }],
@@ -19,7 +22,11 @@ exports.schemaSpecs = {
     [const_1.ListNode.BulletList]: {
         content: `${const_1.ListNode.ListItem}+`,
         group: 'block',
-        attrs: { [const_1.ListsAttr.Tight]: { default: false }, [const_1.ListsAttr.Bullet]: { default: '*' } },
+        attrs: {
+            [const_1.ListsAttr.Tight]: { default: false },
+            [const_1.ListsAttr.Bullet]: { default: const_1.Markup.bullet.default },
+            [const_1.ListsAttr.Markup]: { default: const_1.Markup.bullet.default },
+        },
         parseDOM: [
             {
                 tag: 'ul',
@@ -36,7 +43,11 @@ exports.schemaSpecs = {
         complex: 'root',
     },
     [const_1.ListNode.OrderedList]: {
-        attrs: { [const_1.ListsAttr.Order]: { default: 1 }, [const_1.ListsAttr.Tight]: { default: false } },
+        attrs: {
+            [const_1.ListsAttr.Order]: { default: 1 },
+            [const_1.ListsAttr.Tight]: { default: false },
+            [const_1.ListsAttr.Markup]: { default: const_1.Markup.ordered.default },
+        },
         content: `${const_1.ListNode.ListItem}+`,
         group: 'block',
         parseDOM: [

package/build/cjs/extensions/markdown/Lists/ListsSpecs/serializer.js

@@ -7,15 +7,28 @@ exports.serializerTokens = {
         state.renderContent(node);
     },
     [const_1.ListNode.BulletList]: (state, node) => {
-        state.renderList(node, '  ', (_i, li) => (li.attrs[const_1.ListsAttr.Markup] || node.attrs[const_1.ListsAttr.Bullet] || '*') + ' ');
+        state.renderList(node, '  ', (_i, li) => {
+            const markup = getMarkup({ item: li, list: node, type: 'bullet' });
+            return markup + ' ';
+        });
     },
     [const_1.ListNode.OrderedList]: (state, node) => {
         const start = node.attrs[const_1.ListsAttr.Order] || 1;
         const maxW = String(start + node.childCount - 1).length;
         const space = state.repeat(' ', maxW + 2);
-        state.renderList(node, space, (i) => {
+        state.renderList(node, space, (i, li) => {
             const nStr = String(start + i);
-            return state.repeat(' ', maxW - nStr.length) + nStr + '. ';
+            const markup = getMarkup({ item: li, list: node, type: 'ordered' });
+            return state.repeat(' ', maxW - nStr.length) + nStr + markup + ' ';
         });
     },
 };
+function getMarkup({ item, list, type, }) {
+    const defs = const_1.Markup[type];
+    let value = item.attrs[const_1.ListsAttr.Markup];
+    if (!defs.values.includes(value))
+        value = list.attrs[const_1.ListsAttr.Markup];
+    if (!defs.values.includes(value))
+        value = defs.default;
+    return value;
+}

package/build/cjs/extensions/yfm/Math/commands.d.ts

@@ -7,6 +7,10 @@ export declare const ignoreIfCursorInsideMathInline: Command;
  */
 export declare const removeEmptyMathInlineIfCursorIsAtBeginning: Command;
 /**
- * If MathInline is before cursor – move cursor to the end of the math
+ * Handle cursor movement to the right at the boundary of a MathInline block
  */
-export declare const moveCursorToEndOfMathInline: Command;
+export declare const moveCursorRightOfMathInline: Command;
+/**
+ * Handle cursor movement to the left at the boundary of a MathInline block
+ */
+export declare const moveCursorLeftOfMathInline: Command;

package/build/cjs/extensions/yfm/Math/commands.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.moveCursorToEndOfMathInline = exports.removeEmptyMathInlineIfCursorIsAtBeginning = exports.ignoreIfCursorInsideMathInline = void 0;
+exports.moveCursorLeftOfMathInline = exports.moveCursorRightOfMathInline = exports.removeEmptyMathInlineIfCursorIsAtBeginning = exports.ignoreIfCursorInsideMathInline = void 0;
 const prosemirror_state_1 = require("prosemirror-state");
 const selection_1 = require("../../../utils/selection");
 const const_1 = require("./const");
@@ -30,15 +30,41 @@ const removeEmptyMathInlineIfCursorIsAtBeginning = ({ tr, schema }, dispatch) =>
 };
 exports.removeEmptyMathInlineIfCursorIsAtBeginning = removeEmptyMathInlineIfCursorIsAtBeginning;
 /**
- * If MathInline is before cursor – move cursor to the end of the math
+ * Handle cursor movement to the right at the boundary of a MathInline block
  */
-const moveCursorToEndOfMathInline = ({ tr, schema }, dispatch) => {
+const moveCursorRightOfMathInline = ({ tr, schema }, dispatch) => {
     var _a;
     const $cursor = (0, selection_1.get$Cursor)(tr.selection);
-    if (((_a = $cursor === null || $cursor === void 0 ? void 0 : $cursor.nodeBefore) === null || _a === void 0 ? void 0 : _a.type) === (0, const_1.mathIType)(schema)) {
-        dispatch === null || dispatch === void 0 ? void 0 : dispatch(tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, $cursor.pos - 1)));
-        return true;
+    if ($cursor) {
+        const mathType = (0, const_1.mathIType)(schema);
+        const isOnBeforeOfMathInline = ((_a = $cursor.nodeAfter) === null || _a === void 0 ? void 0 : _a.type) === mathType;
+        const isOnEndOfMathInline = $cursor.parentOffset === $cursor.parent.content.size &&
+            $cursor.parent.type === mathType;
+        if (isOnBeforeOfMathInline || isOnEndOfMathInline) {
+            const newPos = $cursor.pos + 1;
+            dispatch === null || dispatch === void 0 ? void 0 : dispatch(tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, newPos)));
+            return true;
+        }
+    }
+    return false;
+};
+exports.moveCursorRightOfMathInline = moveCursorRightOfMathInline;
+/**
+ * Handle cursor movement to the left at the boundary of a MathInline block
+ */
+const moveCursorLeftOfMathInline = ({ tr, schema }, dispatch) => {
+    var _a;
+    const $cursor = (0, selection_1.get$Cursor)(tr.selection);
+    if ($cursor) {
+        const mathType = (0, const_1.mathIType)(schema);
+        const isOnAfterOfMathInline = ((_a = $cursor.nodeBefore) === null || _a === void 0 ? void 0 : _a.type) === mathType;
+        const isOnStartOfMathInline = $cursor.parentOffset === 0 && $cursor.parent.type === mathType;
+        if (isOnAfterOfMathInline || isOnStartOfMathInline) {
+            const newPos = $cursor.pos - 1;
+            dispatch === null || dispatch === void 0 ? void 0 : dispatch(tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, newPos)));
+            return true;
+        }
     }
     return false;
 };
-exports.moveCursorToEndOfMathInline = moveCursorToEndOfMathInline;
+exports.moveCursorLeftOfMathInline = moveCursorLeftOfMathInline;

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

@@ -24,7 +24,7 @@ const Math = (builder, opts) => {
     builder.use(MathSpecs_1.MathSpecs);
     builder.addKeymap(() => ({
         Enter: commands_1.ignoreIfCursorInsideMathInline,
-        Backspace: (0, prosemirror_commands_1.chainCommands)(commands_1.moveCursorToEndOfMathInline, commands_1.removeEmptyMathInlineIfCursorIsAtBeginning),
+        Backspace: (0, prosemirror_commands_1.chainCommands)(commands_1.removeEmptyMathInlineIfCursorIsAtBeginning, commands_1.moveCursorLeftOfMathInline),
     }));
     builder
         .addPlugin(() => (0, view_and_edit_1.mathViewAndEditPlugin)(Object.assign(Object.assign({}, opts), { reactRenderer: builder.context.get('reactrenderer') })))

package/build/cjs/extensions/yfm/Math/view-and-edit.js

@@ -8,7 +8,6 @@ const selection_1 = require("../../../utils/selection");
 const commands_1 = require("./commands");
 const const_1 = require("./const");
 const hint_1 = require("./hint");
-// eslint-disable-line import/order
 const MATH_ACTIVE_DECO = 'math_active_decoration';
 class MathNodeView {
     constructor(node, opts) {
@@ -162,13 +161,14 @@ class MathBlockNodeView extends MathNodeView {
 exports.MathBlockNodeView = MathBlockNodeView;
 const mathViewAndEditPlugin = (options) => new prosemirror_state_1.Plugin({
     props: {
+        handleKeyDown: (0, prosemirror_keymap_1.keydownHandler)({
+            ArrowRight: commands_1.moveCursorRightOfMathInline,
+            ArrowLeft: commands_1.moveCursorLeftOfMathInline,
+        }),
         nodeViews: {
             [const_1.MathNode.Block]: (node) => new MathBlockNodeView(node, options),
             [const_1.MathNode.Inline]: (node) => new MathInlineNodeView(node, options),
         },
-        handleKeyDown: (0, prosemirror_keymap_1.keydownHandler)({
-            ArrowLeft: commands_1.moveCursorToEndOfMathInline,
-        }),
         decorations: (state) => {
             const { selection } = state;
             if ((0, selection_1.isTextSelection)(selection)) {

package/build/cjs/extensions/yfm/YfmCut/YfmCutSpecs/schema.js

@@ -10,12 +10,12 @@ const getSchemaSpecs = (opts, placeholder) => {
     var _a, _b, _c, _d;
     return ({
         [const_1.CutNode.Cut]: {
-            attrs: { class: { default: 'yfm-cut' } },
+            attrs: { class: { default: 'yfm-cut' }, open: { default: null } },
             content: `${const_1.CutNode.CutTitle} ${const_1.CutNode.CutContent}`,
             group: 'block yfm-cut',
-            parseDOM: [{ tag: 'div.yfm-cut' }],
+            parseDOM: [{ tag: '.yfm-cut' }],
             toDOM(node) {
-                return ['div', node.attrs, 0];
+                return ['details', node.attrs, 0];
             },
             selectable: true,
             allowSelection: true,
@@ -26,9 +26,9 @@ const getSchemaSpecs = (opts, placeholder) => {
             attrs: { class: { default: 'yfm-cut-title' } },
             content: 'inline*',
             group: 'block yfm-cut',
-            parseDOM: [{ tag: 'div.yfm-cut-title' }],
+            parseDOM: [{ tag: '.yfm-cut-title' }],
             toDOM(node) {
-                return ['div', node.attrs, 0];
+                return ['summary', node.attrs, 0];
             },
             placeholder: {
                 content: (_b = (_a = placeholder === null || placeholder === void 0 ? void 0 : placeholder[const_1.CutNode.CutTitle]) !== null && _a !== void 0 ? _a : opts === null || opts === void 0 ? void 0 : opts.yfmCutTitlePlaceholder) !== null && _b !== void 0 ? _b : DEFAULT_PLACEHOLDERS.Title,
@@ -43,7 +43,7 @@ const getSchemaSpecs = (opts, placeholder) => {
             attrs: { class: { default: 'yfm-cut-content' } },
             content: '(block | paragraph)+',
             group: 'block yfm-cut',
-            parseDOM: [{ tag: 'div.yfm-cut-content' }],
+            parseDOM: [{ tag: '.yfm-cut-content' }],
             toDOM(node) {
                 return ['div', node.attrs, 0];
             },

package/build/cjs/extensions/yfm/YfmCut/actions/toYfmCut.js

@@ -5,7 +5,7 @@ const prosemirror_state_1 = require("prosemirror-state");
 const prosemirror_utils_1 = require("prosemirror-utils");
 const const_1 = require("../const");
 const createYfmCutNode = (schema) => (content) => {
-    return (0, const_1.cutType)(schema).create({ class: 'yfm-cut open' }, [
+    return (0, const_1.cutType)(schema).create({ class: 'yfm-cut open', open: true }, [
         (0, const_1.cutTitleType)(schema).create(null),
         (0, const_1.cutContentType)(schema).create(null, content),
     ]);

package/build/cjs/extensions/yfm/YfmCut/index.css

@@ -1,10 +1,22 @@
 .ProseMirror.yfm .yfm-cut {
   border: 1px dashed transparent;
   border-radius: var(--g-border-radius-s);
+  /* TODO: Remove this after updating @diplodoc/transform to version 4.19.0 or higher */
+  /* This ensures backward compatibility with earlier versions of cut-extension */
 }
 .ProseMirror.yfm .yfm-cut:hover {
   border-color: var(--g-color-line-generic);
 }
 .ProseMirror.yfm .yfm-cut.yfm-cut-active {
   border-color: var(--g-color-line-generic);
+}
+.ProseMirror.yfm .yfm-cut .yfm-cut-title:focus {
+  outline: 0;
+}
+.ProseMirror.yfm .yfm-cut .yfm-cut-title {
+  list-style: none;
+}
+.ProseMirror.yfm .yfm-cut .yfm-cut-title::-webkit-details-marker,
+.ProseMirror.yfm .yfm-cut .yfm-cut-title::marker {
+  display: none;
 }

package/build/cjs/extensions/yfm/YfmCut/nodeviews/yfm-cut-title.js

@@ -4,7 +4,7 @@ exports.YfmCutTitleNodeView = void 0;
 class YfmCutTitleNodeView {
     constructor(node) {
         this.node = node;
-        this.dom = document.createElement('div');
+        this.dom = document.createElement('summary');
         this.dom.classList.add('yfm-cut-title');
         this.dom.replaceChildren((this.contentDOM = document.createElement('div')));
         this.contentDOM.classList.add('g-md-yfm-cut-title-inner');
@@ -12,6 +12,7 @@ class YfmCutTitleNodeView {
             // ignore clicking on the title content
             // you can open/close yfm-cut by clicking on the arrow icon
             e.stopPropagation();
+            e.preventDefault();
         });
     }
     update(node) {

package/build/cjs/extensions/yfm/YfmCut/plugins/auto-open.js

@@ -42,6 +42,7 @@ function openParentYfmCuts($pos, domAtPos) {
             if ($pos.node(depth - 1).type === (0, const_1.cutType)(schema)) {
                 const { node: cutDomNode } = domAtPos($pos.start(depth - 1), 0);
                 cutDomNode.classList.add('open');
+                cutDomNode.setAttribute('open', 'true');
                 depth--;
             }
         }
@@ -89,9 +90,10 @@ class CutAutoOpenOnDragOver {
         this._timeout = setTimeout(this._openCut.bind(this), CutAutoOpenOnDragOver.OPEN_TIMEOUT);
     }
     _openCut() {
-        var _a;
+        var _a, _b;
         if (this._editorView.dragging) {
             (_a = this._cutElem) === null || _a === void 0 ? void 0 : _a.classList.add('open');
+            (_b = this._cutElem) === null || _b === void 0 ? void 0 : _b.setAttribute('open', 'true');
         }
         this._clear();
     }

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

@@ -1,4 +1,4 @@
-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" | "gpt" | "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" | "folding-heading" | "folding-heading_hint" | "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?: {
+export declare const i18n: <G extends "bold" | "code" | "link" | "italic" | "strike" | "underline" | "mark" | "quote" | "colorify" | "mono" | "text" | "html" | "cut" | "table" | "image" | "code_inline" | "list" | "heading" | "note" | "file" | "codeblock" | "checkbox" | "emoji" | "tabs" | "math" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "gpt" | "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" | "folding-heading" | "folding-heading_hint" | "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 ? {
     bold: string;

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.22.0' !== 'undefined' ? '13.22.0' : 'unknown';
+exports.VERSION = typeof '13.24.0' !== 'undefined' ? '13.24.0' : 'unknown';

package/build/esm/bundle/MarkdownEditorView.css

@@ -1,6 +1,7 @@
 .g-md-editor-component {
   display: flex;
   height: 100%;
+  outline: none;
 }
 .g-md-editor-component_split_vertical {
   display: grid;

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

@@ -2,8 +2,7 @@ import React from 'react';
 import type { ToasterPublicMethods } from '@gravity-ui/uikit';
 import { ClassNameProps } from '../classname';
 import type { Editor } from './Editor';
-import { MToolbarData, MToolbarItemData } from './config/markup';
-import { WToolbarData, WToolbarItemData } from './config/wysiwyg';
+import { MToolbarData, MToolbarItemData, WToolbarData, WToolbarItemData } from './config';
 import '../styles/styles.css';
 import './MarkdownEditorView.css';
 export declare const cnEditorComponent: import("@bem-react/classname").ClassNameFormatter;
@@ -18,6 +17,8 @@ export declare type MarkdownEditorViewProps = ClassNameProps & {
     settingsVisible?: boolean;
     toaster: ToasterPublicMethods;
     stickyToolbar: boolean;
+    enableSubmitInPreview?: boolean;
+    hidePreviewAfterSubmit?: boolean;
 };
 export declare const MarkdownEditorView: React.ForwardRefExoticComponent<ClassNameProps & {
     editor?: Editor | undefined;
@@ -30,4 +31,6 @@ export declare const MarkdownEditorView: React.ForwardRefExoticComponent<ClassNa
     settingsVisible?: boolean | undefined;
     toaster: ToasterPublicMethods;
     stickyToolbar: boolean;
+    enableSubmitInPreview?: boolean | undefined;
+    hidePreviewAfterSubmit?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>>;

package/build/esm/bundle/MarkdownEditorView.js

@@ -4,16 +4,13 @@ import { useEnsuredForwardedRef, useKey, useUpdate } from 'react-use';
 import { cn } from '../classname';
 import { i18n } from '../i18n/bundle';
 import { logger } from '../logger';
-import { useBooleanState } from '../react-utils/hooks';
-import { ToasterContext } from '../react-utils/toaster';
-import { useSticky } from '../react-utils/useSticky';
-import { isMac } from '../utils/platform';
+import { ToasterContext, useBooleanState, useSticky } from '../react-utils';
+import { isMac } from '../utils';
 import { HorizontalDrag } from './HorizontalDrag';
 import { MarkupEditorView } from './MarkupEditorView';
 import { SplitModeView } from './SplitModeView';
 import { WysiwygEditorView } from './WysiwygEditorView';
-import { mHiddenDataByPreset, mToolbarConfigByPreset, } from './config/markup';
-import { wHiddenDataByPreset, wToolbarConfigByPreset, } from './config/wysiwyg';
+import { mHiddenDataByPreset, mToolbarConfigByPreset, wHiddenDataByPreset, wToolbarConfigByPreset, } from './config';
 import { useMarkdownEditorContext } from './context';
 import { EditorSettings } from './settings';
 import { stickyCn } from './sticky';
@@ -33,7 +30,7 @@ export const MarkdownEditorView = React.forwardRef((props, ref) => {
     const editor = ((_a = props.editor) !== null && _a !== void 0 ? _a : context);
     if (!editor)
         throw new Error('[MarkdownEditorView]: an instance of the editor must be passed through the props or context');
-    const { autofocus, className, settingsVisible = true, markupToolbarConfig = mToolbarConfigByPreset[editor.preset], wysiwygToolbarConfig = wToolbarConfigByPreset[editor.preset], markupHiddenActionsConfig = mHiddenDataByPreset[editor.preset], wysiwygHiddenActionsConfig = wHiddenDataByPreset[editor.preset], toaster, stickyToolbar, } = props;
+    const { autofocus, className, settingsVisible = true, markupToolbarConfig = mToolbarConfigByPreset[editor.preset], wysiwygToolbarConfig = wToolbarConfigByPreset[editor.preset], markupHiddenActionsConfig = mHiddenDataByPreset[editor.preset], wysiwygHiddenActionsConfig = wHiddenDataByPreset[editor.preset], toaster, stickyToolbar, enableSubmitInPreview = true, hidePreviewAfterSubmit = false, } = props;
     const rerender = useUpdate();
     React.useLayoutEffect(() => {
         editor.on('rerender', rerender);
@@ -63,6 +60,20 @@ export const MarkdownEditorView = React.forwardRef((props, ref) => {
     useKey((e) => canRenderPreview && isPreviewKeyDown(e), () => onShowPreviewChange(!showPreview), { event: 'keydown' }, [showPreview, editorMode, onShowPreviewChange, canRenderPreview]);
     const editorWrapperRef = useRef(null);
     const splitModeViewWrapperRef = useRef(null);
+    useEffect(() => {
+        if (showPreview) {
+            divRef.current.focus();
+        }
+    }, [divRef, showPreview]);
+    useKey((e) => enableSubmitInPreview &&
+        showPreview &&
+        isWrapperFocused(divRef) &&
+        isSubmitKeyDown(e), () => {
+        editor.emit('submit', null);
+        if (hidePreviewAfterSubmit) {
+            onShowPreviewChange(false);
+        }
+    }, { event: 'keydown' }, [hidePreviewAfterSubmit, enableSubmitInPreview, showPreview, showPreview]);
     const settings = useMemo(() => (React.createElement(Settings, { mode: editorMode, onModeChange: onModeChange, toolbarVisibility: editor.toolbarVisible && !showPreview, onToolbarVisibilityChange: onToolbarVisibilityChange, onSplitModeChange: onSplitModeChange, splitModeEnabled: editor.splitModeEnabled, splitMode: editor.splitMode, stickyToolbar: stickyToolbar, onShowPreviewChange: onShowPreviewChange, showPreview: showPreview, renderPreviewButton: canRenderPreview })), [
         canRenderPreview,
         stickyToolbar,
@@ -99,7 +110,7 @@ export const MarkdownEditorView = React.forwardRef((props, ref) => {
             React.createElement("div", { ref: divRef, className: b({
                     settings: settingsVisible,
                     split: markupSplitMode && editor.splitMode,
-                }, [className]) },
+                }, [className]), role: "button", tabIndex: 0 },
                 React.createElement("div", { className: b('editor-wrapper'), ref: editorWrapperRef }, showPreview ? (React.createElement(React.Fragment, null,
                     React.createElement("div", { className: b('preview-wrapper') }, (_b = editor.renderPreview) === null || _b === void 0 ? void 0 : _b.call(editor, {
                         getValue: editor.getValue,
@@ -130,3 +141,10 @@ function isPreviewKeyDown(e) {
     const modKey = isMac() ? e.metaKey : e.ctrlKey;
     return modKey && e.shiftKey && e.code === 'KeyP';
 }
+function isWrapperFocused(divRef) {
+    return document.activeElement === divRef.current;
+}
+function isSubmitKeyDown(e) {
+    const modKey = isMac() ? e.metaKey : e.ctrlKey;
+    return modKey && e.code === 'Enter';
+}

package/build/esm/bundle/config/index.d.ts

@@ -1 +1,2 @@
 export * from './wysiwyg';
+export * from './markup';

package/build/esm/bundle/config/index.js

@@ -1 +1,2 @@
 export * from './wysiwyg';
+export * from './markup';

package/build/esm/extensions/markdown/Lists/ListsSpecs/const.d.ts

@@ -5,10 +5,19 @@ export declare enum ListNode {
 }
 export declare enum ListsAttr {
     Tight = "tight",
-    /** used in bullet list only */
+    /** @deprecated Use `ListsAttr.Markup` instead */
     Bullet = "bullet",
     /** used in ordered list only */
     Order = "order",
-    /** used in list item only */
     Markup = "markup"
 }
+export declare const Markup: {
+    bullet: {
+        values: string[];
+        default: string;
+    };
+    ordered: {
+        values: string[];
+        default: string;
+    };
+};

package/build/esm/extensions/markdown/Lists/ListsSpecs/const.js

@@ -7,10 +7,19 @@ export var ListNode;
 export var ListsAttr;
 (function (ListsAttr) {
     ListsAttr["Tight"] = "tight";
-    /** used in bullet list only */
+    /** @deprecated Use `ListsAttr.Markup` instead */
     ListsAttr["Bullet"] = "bullet";
     /** used in ordered list only */
     ListsAttr["Order"] = "order";
-    /** used in list item only */
     ListsAttr["Markup"] = "markup";
 })(ListsAttr || (ListsAttr = {}));
+export const Markup = {
+    bullet: {
+        values: ['-', '+', '*'],
+        default: '*',
+    },
+    ordered: {
+        values: ['.', ')'],
+        default: '.',
+    },
+};

package/build/esm/extensions/markdown/Lists/ListsSpecs/parser.js

@@ -11,6 +11,7 @@ export const parserTokens = {
         getAttrs: (token, tokens, i) => ({
             [ListsAttr.Tight]: listIsTight(tokens, i),
             [ListsAttr.Bullet]: token.markup,
+            [ListsAttr.Markup]: token.markup,
         }),
     },
     [ListNode.OrderedList]: {
@@ -19,6 +20,7 @@ export const parserTokens = {
         getAttrs: (token, tokens, i) => ({
             [ListsAttr.Order]: Number(token.attrGet('start')) || 1,
             [ListsAttr.Tight]: listIsTight(tokens, i),
+            [ListsAttr.Markup]: token.markup,
         }),
     },
 };

package/build/esm/extensions/markdown/Lists/ListsSpecs/schema.js

@@ -1,7 +1,10 @@
-import { ListNode, ListsAttr } from './const';
+import { ListNode, ListsAttr, Markup } from './const';
 export const schemaSpecs = {
     [ListNode.ListItem]: {
-        attrs: { [ListsAttr.Tight]: { default: false }, [ListsAttr.Markup]: { default: null } },
+        attrs: {
+            [ListsAttr.Tight]: { default: false },
+            [ListsAttr.Markup]: { default: null },
+        },
         content: '(paragraph|block)+',
         defining: true,
         parseDOM: [{ tag: 'li' }],
@@ -16,7 +19,11 @@ export const schemaSpecs = {
     [ListNode.BulletList]: {
         content: `${ListNode.ListItem}+`,
         group: 'block',
-        attrs: { [ListsAttr.Tight]: { default: false }, [ListsAttr.Bullet]: { default: '*' } },
+        attrs: {
+            [ListsAttr.Tight]: { default: false },
+            [ListsAttr.Bullet]: { default: Markup.bullet.default },
+            [ListsAttr.Markup]: { default: Markup.bullet.default },
+        },
         parseDOM: [
             {
                 tag: 'ul',
@@ -33,7 +40,11 @@ export const schemaSpecs = {
         complex: 'root',
     },
     [ListNode.OrderedList]: {
-        attrs: { [ListsAttr.Order]: { default: 1 }, [ListsAttr.Tight]: { default: false } },
+        attrs: {
+            [ListsAttr.Order]: { default: 1 },
+            [ListsAttr.Tight]: { default: false },
+            [ListsAttr.Markup]: { default: Markup.ordered.default },
+        },
         content: `${ListNode.ListItem}+`,
         group: 'block',
         parseDOM: [

package/build/esm/extensions/markdown/Lists/ListsSpecs/serializer.js

@@ -1,18 +1,31 @@
-import { ListNode, ListsAttr } from './const';
+import { ListNode, ListsAttr, Markup } from './const';
 export const serializerTokens = {
     [ListNode.ListItem]: (state, node) => {
         state.renderContent(node);
     },
     [ListNode.BulletList]: (state, node) => {
-        state.renderList(node, '  ', (_i, li) => (li.attrs[ListsAttr.Markup] || node.attrs[ListsAttr.Bullet] || '*') + ' ');
+        state.renderList(node, '  ', (_i, li) => {
+            const markup = getMarkup({ item: li, list: node, type: 'bullet' });
+            return markup + ' ';
+        });
     },
     [ListNode.OrderedList]: (state, node) => {
         const start = node.attrs[ListsAttr.Order] || 1;
         const maxW = String(start + node.childCount - 1).length;
         const space = state.repeat(' ', maxW + 2);
-        state.renderList(node, space, (i) => {
+        state.renderList(node, space, (i, li) => {
             const nStr = String(start + i);
-            return state.repeat(' ', maxW - nStr.length) + nStr + '. ';
+            const markup = getMarkup({ item: li, list: node, type: 'ordered' });
+            return state.repeat(' ', maxW - nStr.length) + nStr + markup + ' ';
         });
     },
 };
+function getMarkup({ item, list, type, }) {
+    const defs = Markup[type];
+    let value = item.attrs[ListsAttr.Markup];
+    if (!defs.values.includes(value))
+        value = list.attrs[ListsAttr.Markup];
+    if (!defs.values.includes(value))
+        value = defs.default;
+    return value;
+}

package/build/esm/extensions/yfm/Math/commands.d.ts

@@ -7,6 +7,10 @@ export declare const ignoreIfCursorInsideMathInline: Command;
  */
 export declare const removeEmptyMathInlineIfCursorIsAtBeginning: Command;
 /**
- * If MathInline is before cursor – move cursor to the end of the math
+ * Handle cursor movement to the right at the boundary of a MathInline block
  */
-export declare const moveCursorToEndOfMathInline: Command;
+export declare const moveCursorRightOfMathInline: Command;
+/**
+ * Handle cursor movement to the left at the boundary of a MathInline block
+ */
+export declare const moveCursorLeftOfMathInline: Command;

package/build/esm/extensions/yfm/Math/commands.js

@@ -25,14 +25,39 @@ export const removeEmptyMathInlineIfCursorIsAtBeginning = ({ tr, schema }, dispa
     return false;
 };
 /**
- * If MathInline is before cursor – move cursor to the end of the math
+ * Handle cursor movement to the right at the boundary of a MathInline block
  */
-export const moveCursorToEndOfMathInline = ({ tr, schema }, dispatch) => {
+export const moveCursorRightOfMathInline = ({ tr, schema }, dispatch) => {
     var _a;
     const $cursor = get$Cursor(tr.selection);
-    if (((_a = $cursor === null || $cursor === void 0 ? void 0 : $cursor.nodeBefore) === null || _a === void 0 ? void 0 : _a.type) === mathIType(schema)) {
-        dispatch === null || dispatch === void 0 ? void 0 : dispatch(tr.setSelection(TextSelection.create(tr.doc, $cursor.pos - 1)));
-        return true;
+    if ($cursor) {
+        const mathType = mathIType(schema);
+        const isOnBeforeOfMathInline = ((_a = $cursor.nodeAfter) === null || _a === void 0 ? void 0 : _a.type) === mathType;
+        const isOnEndOfMathInline = $cursor.parentOffset === $cursor.parent.content.size &&
+            $cursor.parent.type === mathType;
+        if (isOnBeforeOfMathInline || isOnEndOfMathInline) {
+            const newPos = $cursor.pos + 1;
+            dispatch === null || dispatch === void 0 ? void 0 : dispatch(tr.setSelection(TextSelection.create(tr.doc, newPos)));
+            return true;
+        }
+    }
+    return false;
+};
+/**
+ * Handle cursor movement to the left at the boundary of a MathInline block
+ */
+export const moveCursorLeftOfMathInline = ({ tr, schema }, dispatch) => {
+    var _a;
+    const $cursor = get$Cursor(tr.selection);
+    if ($cursor) {
+        const mathType = mathIType(schema);
+        const isOnAfterOfMathInline = ((_a = $cursor.nodeBefore) === null || _a === void 0 ? void 0 : _a.type) === mathType;
+        const isOnStartOfMathInline = $cursor.parentOffset === 0 && $cursor.parent.type === mathType;
+        if (isOnAfterOfMathInline || isOnStartOfMathInline) {
+            const newPos = $cursor.pos - 1;
+            dispatch === null || dispatch === void 0 ? void 0 : dispatch(tr.setSelection(TextSelection.create(tr.doc, newPos)));
+            return true;
+        }
     }
     return false;
 };

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

@@ -4,7 +4,7 @@ import { hasParentNodeOfType } from 'prosemirror-utils';
 import { inlineNodeInputRule, textblockTypeInputRule } from '../../../utils/inputrules';
 import { isTextSelection } from '../../../utils/selection';
 import { MathSpecs } from './MathSpecs';
-import { ignoreIfCursorInsideMathInline, moveCursorToEndOfMathInline, removeEmptyMathInlineIfCursorIsAtBeginning, } from './commands';
+import { ignoreIfCursorInsideMathInline, moveCursorLeftOfMathInline, removeEmptyMathInlineIfCursorIsAtBeginning, } from './commands';
 import { mathBType, mathIType } from './const';
 import { mathViewAndEditPlugin } from './view-and-edit';
 import './index.css';
@@ -17,7 +17,7 @@ export const Math = (builder, opts) => {
     builder.use(MathSpecs);
     builder.addKeymap(() => ({
         Enter: ignoreIfCursorInsideMathInline,
-        Backspace: chainCommands(moveCursorToEndOfMathInline, removeEmptyMathInlineIfCursorIsAtBeginning),
+        Backspace: chainCommands(removeEmptyMathInlineIfCursorIsAtBeginning, moveCursorLeftOfMathInline),
     }));
     builder
         .addPlugin(() => mathViewAndEditPlugin(Object.assign(Object.assign({}, opts), { reactRenderer: builder.context.get('reactrenderer') })))

package/build/esm/extensions/yfm/Math/view-and-edit.js

@@ -2,10 +2,10 @@ import { keydownHandler } from 'prosemirror-keymap';
 import { Plugin } from 'prosemirror-state';
 import { Decoration, DecorationSet } from 'prosemirror-view';
 import { isTextSelection } from '../../../utils/selection';
-import { moveCursorToEndOfMathInline } from './commands';
+import { moveCursorLeftOfMathInline, moveCursorRightOfMathInline } from './commands';
 import { CLASSNAMES, MathNode } from './const';
 import { b, renderMathHint } from './hint';
-import './view-and-edit.css'; // eslint-disable-line import/order
+import './view-and-edit.css';
 const MATH_ACTIVE_DECO = 'math_active_decoration';
 export class MathNodeView {
     constructor(node, opts) {
@@ -156,13 +156,14 @@ export class MathBlockNodeView extends MathNodeView {
 }
 export const mathViewAndEditPlugin = (options) => new Plugin({
     props: {
+        handleKeyDown: keydownHandler({
+            ArrowRight: moveCursorRightOfMathInline,
+            ArrowLeft: moveCursorLeftOfMathInline,
+        }),
         nodeViews: {
             [MathNode.Block]: (node) => new MathBlockNodeView(node, options),
             [MathNode.Inline]: (node) => new MathInlineNodeView(node, options),
         },
-        handleKeyDown: keydownHandler({
-            ArrowLeft: moveCursorToEndOfMathInline,
-        }),
         decorations: (state) => {
             const { selection } = state;
             if (isTextSelection(selection)) {

package/build/esm/extensions/yfm/YfmCut/YfmCutSpecs/schema.js

@@ -7,12 +7,12 @@ export const getSchemaSpecs = (opts, placeholder) => {
     var _a, _b, _c, _d;
     return ({
         [CutNode.Cut]: {
-            attrs: { class: { default: 'yfm-cut' } },
+            attrs: { class: { default: 'yfm-cut' }, open: { default: null } },
             content: `${CutNode.CutTitle} ${CutNode.CutContent}`,
             group: 'block yfm-cut',
-            parseDOM: [{ tag: 'div.yfm-cut' }],
+            parseDOM: [{ tag: '.yfm-cut' }],
             toDOM(node) {
-                return ['div', node.attrs, 0];
+                return ['details', node.attrs, 0];
             },
             selectable: true,
             allowSelection: true,
@@ -23,9 +23,9 @@ export const getSchemaSpecs = (opts, placeholder) => {
             attrs: { class: { default: 'yfm-cut-title' } },
             content: 'inline*',
             group: 'block yfm-cut',
-            parseDOM: [{ tag: 'div.yfm-cut-title' }],
+            parseDOM: [{ tag: '.yfm-cut-title' }],
             toDOM(node) {
-                return ['div', node.attrs, 0];
+                return ['summary', node.attrs, 0];
             },
             placeholder: {
                 content: (_b = (_a = placeholder === null || placeholder === void 0 ? void 0 : placeholder[CutNode.CutTitle]) !== null && _a !== void 0 ? _a : opts === null || opts === void 0 ? void 0 : opts.yfmCutTitlePlaceholder) !== null && _b !== void 0 ? _b : DEFAULT_PLACEHOLDERS.Title,
@@ -40,7 +40,7 @@ export const getSchemaSpecs = (opts, placeholder) => {
             attrs: { class: { default: 'yfm-cut-content' } },
             content: '(block | paragraph)+',
             group: 'block yfm-cut',
-            parseDOM: [{ tag: 'div.yfm-cut-content' }],
+            parseDOM: [{ tag: '.yfm-cut-content' }],
             toDOM(node) {
                 return ['div', node.attrs, 0];
             },

package/build/esm/extensions/yfm/YfmCut/actions/toYfmCut.js

@@ -2,7 +2,7 @@ import { TextSelection } from 'prosemirror-state';
 import { findParentNodeClosestToPos } from 'prosemirror-utils';
 import { cutContentType, cutTitleType, cutType } from '../const';
 const createYfmCutNode = (schema) => (content) => {
-    return cutType(schema).create({ class: 'yfm-cut open' }, [
+    return cutType(schema).create({ class: 'yfm-cut open', open: true }, [
         cutTitleType(schema).create(null),
         cutContentType(schema).create(null, content),
     ]);

package/build/esm/extensions/yfm/YfmCut/index.css

@@ -1,10 +1,22 @@
 .ProseMirror.yfm .yfm-cut {
   border: 1px dashed transparent;
   border-radius: var(--g-border-radius-s);
+  /* TODO: Remove this after updating @diplodoc/transform to version 4.19.0 or higher */
+  /* This ensures backward compatibility with earlier versions of cut-extension */
 }
 .ProseMirror.yfm .yfm-cut:hover {
   border-color: var(--g-color-line-generic);
 }
 .ProseMirror.yfm .yfm-cut.yfm-cut-active {
   border-color: var(--g-color-line-generic);
+}
+.ProseMirror.yfm .yfm-cut .yfm-cut-title:focus {
+  outline: 0;
+}
+.ProseMirror.yfm .yfm-cut .yfm-cut-title {
+  list-style: none;
+}
+.ProseMirror.yfm .yfm-cut .yfm-cut-title::-webkit-details-marker,
+.ProseMirror.yfm .yfm-cut .yfm-cut-title::marker {
+  display: none;
 }

package/build/esm/extensions/yfm/YfmCut/nodeviews/yfm-cut-title.js

@@ -2,7 +2,7 @@ import './yfm-cut-title.css';
 export class YfmCutTitleNodeView {
     constructor(node) {
         this.node = node;
-        this.dom = document.createElement('div');
+        this.dom = document.createElement('summary');
         this.dom.classList.add('yfm-cut-title');
         this.dom.replaceChildren((this.contentDOM = document.createElement('div')));
         this.contentDOM.classList.add('g-md-yfm-cut-title-inner');
@@ -10,6 +10,7 @@ export class YfmCutTitleNodeView {
             // ignore clicking on the title content
             // you can open/close yfm-cut by clicking on the arrow icon
             e.stopPropagation();
+            e.preventDefault();
         });
     }
     update(node) {

package/build/esm/extensions/yfm/YfmCut/plugins/auto-open.js

@@ -38,6 +38,7 @@ function openParentYfmCuts($pos, domAtPos) {
             if ($pos.node(depth - 1).type === cutType(schema)) {
                 const { node: cutDomNode } = domAtPos($pos.start(depth - 1), 0);
                 cutDomNode.classList.add('open');
+                cutDomNode.setAttribute('open', 'true');
                 depth--;
             }
         }
@@ -85,9 +86,10 @@ class CutAutoOpenOnDragOver {
         this._timeout = setTimeout(this._openCut.bind(this), CutAutoOpenOnDragOver.OPEN_TIMEOUT);
     }
     _openCut() {
-        var _a;
+        var _a, _b;
         if (this._editorView.dragging) {
             (_a = this._cutElem) === null || _a === void 0 ? void 0 : _a.classList.add('open');
+            (_b = this._cutElem) === null || _b === void 0 ? void 0 : _b.setAttribute('open', 'true');
         }
         this._clear();
     }

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

@@ -1,4 +1,4 @@
-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" | "gpt" | "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" | "folding-heading" | "folding-heading_hint" | "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?: {
+export declare const i18n: <G extends "bold" | "code" | "link" | "italic" | "strike" | "underline" | "mark" | "quote" | "colorify" | "mono" | "text" | "html" | "cut" | "table" | "image" | "code_inline" | "list" | "heading" | "note" | "file" | "codeblock" | "checkbox" | "emoji" | "tabs" | "math" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "gpt" | "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" | "folding-heading" | "folding-heading_hint" | "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 ? {
     bold: string;

package/build/esm/version.js

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

package/build/styles.css

@@ -1,6 +1,7 @@
 .g-md-editor-component {
   display: flex;
   height: 100%;
+  outline: none;
 }
 .g-md-editor-component_split_vertical {
   display: grid;
@@ -1047,6 +1048,8 @@ body :has(.g-md-resizable_resizing) {
 .ProseMirror.yfm .yfm-cut {
   border: 1px dashed transparent;
   border-radius: var(--g-border-radius-s);
+  /* TODO: Remove this after updating @diplodoc/transform to version 4.19.0 or higher */
+  /* This ensures backward compatibility with earlier versions of cut-extension */
 }
 .ProseMirror.yfm .yfm-cut:hover {
   border-color: var(--g-color-line-generic);
@@ -1054,6 +1057,16 @@ body :has(.g-md-resizable_resizing) {
 .ProseMirror.yfm .yfm-cut.yfm-cut-active {
   border-color: var(--g-color-line-generic);
 }
+.ProseMirror.yfm .yfm-cut .yfm-cut-title:focus {
+  outline: 0;
+}
+.ProseMirror.yfm .yfm-cut .yfm-cut-title {
+  list-style: none;
+}
+.ProseMirror.yfm .yfm-cut .yfm-cut-title::-webkit-details-marker,
+.ProseMirror.yfm .yfm-cut .yfm-cut-title::marker {
+  display: none;
+}
 .yfm-editor .yfm-file {
   pointer-events: none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/markdown-editor",
-  "version": "13.22.0",
+  "version": "13.24.0",
   "description": "Markdown wysiwyg and markup editor",
   "license": "MIT",
   "repository": {
@@ -204,7 +204,7 @@
     "@diplodoc/html-extension": "2.3.2",
     "@diplodoc/latex-extension": "1.0.3",
     "@diplodoc/mermaid-extension": "1.2.1",
-    "@diplodoc/transform": "4.22.0",
+    "@diplodoc/transform": "4.26.0",
     "@gravity-ui/components": "3.0.0",
     "@gravity-ui/eslint-config": "3.1.1",
     "@gravity-ui/prettier-config": "1.1.0",
@@ -279,7 +279,7 @@
     "@diplodoc/html-extension": "2.3.2",
     "@diplodoc/latex-extension": "^1.0.3",
     "@diplodoc/mermaid-extension": "^1.0.0",
-    "@diplodoc/transform": ">=4.5.0 <4.19.0",
+    "@diplodoc/transform": ">=4.5.0 <=4.26.0",
     "@gravity-ui/components": "^3.0.0",
     "@gravity-ui/uikit": "^6.11.0",
     "highlight.js": "^11.8.0",