@gravity-ui/markdown-editor 13.23.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

@@ -15,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;
@@ -27,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

@@ -33,7 +33,7 @@ exports.MarkdownEditorView = react_1.default.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 = 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, } = 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);
@@ -68,7 +68,15 @@ exports.MarkdownEditorView = react_1.default.forwardRef((props, ref) => {
             divRef.current.focus();
         }
     }, [divRef, showPreview]);
-    (0, react_use_1.useKey)((e) => showPreview && isWrapperFocused(divRef) && isSubmitKeyDown(e), () => editor.emit('submit', null), { event: 'keydown' }, [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,

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/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.23.0' !== 'undefined' ? '13.23.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

@@ -17,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;
@@ -29,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

@@ -30,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);
@@ -65,7 +65,15 @@ export const MarkdownEditorView = React.forwardRef((props, ref) => {
             divRef.current.focus();
         }
     }, [divRef, showPreview]);
-    useKey((e) => showPreview && isWrapperFocused(divRef) && isSubmitKeyDown(e), () => editor.emit('submit', null), { event: 'keydown' }, [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,

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/version.js

@@ -1,2 +1,2 @@
 /** During build process, the current version will be injected here */
-export const VERSION = typeof '13.23.0' !== 'undefined' ? '13.23.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.23.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",