@gravity-ui/markdown-editor 13.23.0 → 13.25.0

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/extensions/yfm/index.d.ts

@@ -11,4 +11,4 @@ export * from './YfmHeading';
 export * from './YfmNote';
 export * from './YfmTable';
 export * from './YfmTabs';
-export * from './GPT';
+export * from '../additional/GPT';

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

@@ -14,4 +14,4 @@ tslib_1.__exportStar(require("./YfmHeading"), exports);
 tslib_1.__exportStar(require("./YfmNote"), exports);
 tslib_1.__exportStar(require("./YfmTable"), exports);
 tslib_1.__exportStar(require("./YfmTabs"), exports);
-tslib_1.__exportStar(require("./GPT"), exports);
+tslib_1.__exportStar(require("../additional/GPT"), exports);

package/build/cjs/i18n/gpt/dialog/en.json

@@ -12,5 +12,5 @@
   "replace": "Replace the selected text",
   "replace-disabled": "Insert text",
   "try-again": "Try again",
-  "alert-gpt-presets-info": "Highlight text to see Yandex GPT presets"
+  "alert-gpt-presets-info": "Highlight text to see GPT presets"
 }

package/build/cjs/i18n/gpt/dialog/ru.json

@@ -12,5 +12,5 @@
   "replace": "Заменить выделенный текст",
   "replace-disabled": "Вставить текст",
   "try-again": "Иначе",
-  "alert-gpt-presets-info": "Выделите текст, чтобы увидеть пресеты Yandex GPT"
+  "alert-gpt-presets-info": "Выделите текст, чтобы увидеть пресеты GPT"
 }

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" | "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?: {
+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" | "mermaid" | "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" | "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.23.0' !== 'undefined' ? '13.23.0' : 'unknown';
+exports.VERSION = typeof '13.25.0' !== 'undefined' ? '13.25.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);
@@ -57,7 +57,10 @@ export const MarkdownEditorView = React.forwardRef((props, ref) => {
     const editorMode = editor.currentMode;
     const markupSplitMode = editor.splitModeEnabled && editor.splitMode && editorMode === 'markup';
     const canRenderPreview = Boolean(editor.renderPreview && editorMode === 'markup' && !editor.splitModeEnabled);
-    useKey((e) => canRenderPreview && isPreviewKeyDown(e), () => onShowPreviewChange(!showPreview), { event: 'keydown' }, [showPreview, editorMode, onShowPreviewChange, canRenderPreview]);
+    useKey((e) => canRenderPreview && isPreviewKeyDown(e), (e) => {
+        e.preventDefault();
+        onShowPreviewChange(!showPreview);
+    }, { event: 'keydown' }, [showPreview, editorMode, onShowPreviewChange, canRenderPreview]);
     const editorWrapperRef = useRef(null);
     const splitModeViewWrapperRef = useRef(null);
     useEffect(() => {
@@ -65,19 +68,28 @@ 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]);
-    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,
-        editor.splitMode,
-        editor.splitModeEnabled,
-        editor.toolbarVisible,
+    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, settingsVisible: settingsVisible, onModeChange: onModeChange, toolbarVisibility: editor.toolbarVisible && !showPreview, onToolbarVisibilityChange: onToolbarVisibilityChange, onSplitModeChange: onSplitModeChange, splitModeEnabled: editor.splitModeEnabled, splitMode: editor.splitMode, stickyToolbar: stickyToolbar, onShowPreviewChange: onShowPreviewChange, showPreview: showPreview, renderPreviewButton: canRenderPreview })), [
         editorMode,
+        settingsVisible,
+        editor.toolbarVisible,
+        editor.splitModeEnabled,
+        editor.splitMode,
         onModeChange,
-        onShowPreviewChange,
-        onSplitModeChange,
-        onToolbarVisibilityChange,
         showPreview,
+        onToolbarVisibilityChange,
+        onSplitModeChange,
+        stickyToolbar,
+        onShowPreviewChange,
+        canRenderPreview,
     ]);
     return (React.createElement(ErrorBoundary, { onError: (e) => {
             logger.error(e);
@@ -110,8 +122,8 @@ export const MarkdownEditorView = React.forwardRef((props, ref) => {
                     })),
                     settings)) : (React.createElement(React.Fragment, null,
                     editorMode === 'wysiwyg' && (React.createElement(WysiwygEditorView, { editor: editor, autofocus: autofocus, settingsVisible: settingsVisible, toolbarConfig: wysiwygToolbarConfig, toolbarVisible: editor.toolbarVisible, hiddenActionsConfig: wysiwygHiddenActionsConfig, className: b('editor', { mode: editorMode }), toolbarClassName: b('toolbar'), stickyToolbar: stickyToolbar }, editor.toolbarVisible && settingsVisible && settings)),
-                    editorMode === 'markup' && (React.createElement(MarkupEditorView, { editor: editor, autofocus: autofocus, settingsVisible: settingsVisible, toolbarConfig: markupToolbarConfig, toolbarVisible: editor.toolbarVisible, splitMode: editor.splitMode, splitModeEnabled: editor.splitModeEnabled, hiddenActionsConfig: markupHiddenActionsConfig, className: b('editor', { mode: editorMode }), toolbarClassName: b('toolbar'), stickyToolbar: stickyToolbar }, editor.toolbarVisible && settingsVisible && settings)),
-                    !editor.toolbarVisible && settingsVisible && settings))),
+                    editorMode === 'markup' && (React.createElement(MarkupEditorView, { editor: editor, autofocus: autofocus, settingsVisible: settingsVisible, toolbarConfig: markupToolbarConfig, toolbarVisible: editor.toolbarVisible, splitMode: editor.splitMode, splitModeEnabled: editor.splitModeEnabled, hiddenActionsConfig: markupHiddenActionsConfig, className: b('editor', { mode: editorMode }), toolbarClassName: b('toolbar'), stickyToolbar: stickyToolbar }, editor.toolbarVisible && settings)),
+                    !editor.toolbarVisible && settings))),
                 markupSplitMode && (React.createElement(React.Fragment, null,
                     editor.splitMode === 'horizontal' ? (React.createElement(HorizontalDrag, { editor: editor, isMounted: isMounted, leftElRef: editorWrapperRef, rightElRef: splitModeViewWrapperRef, wrapperRef: divRef })) : (React.createElement("div", { className: b('resizer') })),
                     React.createElement(SplitModeView, { editor: editor, ref: splitModeViewWrapperRef })))))));
@@ -121,13 +133,13 @@ const MarkupSearchAnchor = ({ mode }) => (React.createElement(React.Fragment, nu
 function Settings(props) {
     const wrapperRef = useRef(null);
     const isSticky = useSticky(wrapperRef) && props.toolbarVisibility && props.stickyToolbar;
-    return (React.createElement("div", { className: b('settings-wrapper') },
+    return (React.createElement(React.Fragment, null, (props.renderPreviewButton || props.settingsVisible) && (React.createElement("div", { className: b('settings-wrapper') },
         React.createElement("div", { ref: wrapperRef, className: stickyCn.settings({
                 withToolbar: props.toolbarVisibility,
                 stickyActive: isSticky,
             }) },
             React.createElement(EditorSettings, Object.assign({}, props)),
-            React.createElement(MarkupSearchAnchor, Object.assign({}, props)))));
+            React.createElement(MarkupSearchAnchor, Object.assign({}, props)))))));
 }
 function isPreviewKeyDown(e) {
     const modKey = isMac() ? e.metaKey : e.ctrlKey;

package/build/esm/bundle/config/action-names.d.ts

@@ -1,3 +1,3 @@
-declare const namesObj: Record<"bold" | "link" | "italic" | "strike" | "underline" | "mark" | "quote" | "mono" | "paragraph" | "anchor" | "table" | "image" | "code_inline" | "code_block" | "file" | "checkbox" | "bulletList" | "orderedList" | "emoji" | "tabs" | "yfm_cut" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "yfm_note" | "gpt" | "undo" | "redo" | "math_inline" | "math_block" | "mermaid" | "liftListItem" | "sinkListItem" | "yfm_block" | "yfm_html_block" | "yfm_layout" | "horizontalrule", string>;
+declare const namesObj: Record<"bold" | "link" | "italic" | "strike" | "underline" | "mark" | "quote" | "mono" | "paragraph" | "anchor" | "table" | "image" | "code_inline" | "code_block" | "file" | "checkbox" | "bulletList" | "orderedList" | "emoji" | "tabs" | "yfm_cut" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "yfm_note" | "gpt" | "undo" | "redo" | "liftListItem" | "sinkListItem" | "yfm_block" | "yfm_html_block" | "yfm_layout" | "horizontalrule" | "math_inline" | "math_block" | "mermaid", string>;
 export declare const ActionName: Readonly<typeof namesObj>;
 export {};

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

@@ -1,6 +1,5 @@
 import { headingType, pType } from '../../extensions';
-// for typings from Math
-import { gptHotKeys } from '../../extensions/yfm/GPT/constants';
+import { gptHotKeys } from '../../extensions/additional/GPT/constants';
 import { i18n as i18nHint } from '../../i18n/hints';
 import { i18n } from '../../i18n/menubar';
 import { Action as A, formatter as f } from '../../shortcuts';

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

@@ -4,6 +4,7 @@ import type { EditorMode, SplitMode } from '../Editor';
 import './index.css';
 export declare type EditorSettingsProps = Omit<SettingsContentProps, 'onClose'> & {
     renderPreviewButton?: boolean;
+    settingsVisible?: boolean;
 };
 export declare const EditorSettings: React.NamedExoticComponent<EditorSettingsProps>;
 declare type SettingsContentProps = ClassNameProps & {

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

@@ -17,7 +17,7 @@ const placement = ['bottom-end', 'top-end'];
 const bSettings = cn('editor-settings');
 const bContent = cn('settings-content');
 export const EditorSettings = React.memo(function EditorSettings(props) {
-    const { className, onShowPreviewChange, showPreview, renderPreviewButton } = props;
+    const { className, onShowPreviewChange, showPreview, renderPreviewButton, settingsVisible } = props;
     const chevronRef = React.useRef(null);
     const [popupShown, , hidePopup, togglePopup] = useBooleanState(false);
     return (React.createElement("div", { className: bSettings(null, [className]) },
@@ -25,11 +25,12 @@ export const EditorSettings = React.memo(function EditorSettings(props) {
             React.createElement(ActionTooltip, { openDelay: ToolbarTooltipDelay.Open, closeDelay: ToolbarTooltipDelay.Close, title: i18n('preview_hint'), hotkey: "mod+shift+p" },
                 React.createElement(Button, { size: "m", view: "flat", pin: "round-round", className: bSettings('preview-button'), onClick: () => onShowPreviewChange === null || onShowPreviewChange === void 0 ? void 0 : onShowPreviewChange(!showPreview), selected: showPreview },
                     React.createElement(Icon, { data: Eye }))),
-            React.createElement("div", { className: bSettings('separator') }))),
-        React.createElement(Button, { size: "m", view: "flat", ref: chevronRef, pin: "round-round", onClick: togglePopup, className: bSettings('dropdown-button') },
-            React.createElement(Icon, { data: Gear })),
-        React.createElement(Popup, { open: popupShown, anchorRef: chevronRef, placement: placement, onClose: hidePopup },
-            React.createElement(SettingsContent, Object.assign({}, props, { onClose: hidePopup, className: bSettings('content') })))));
+            settingsVisible && React.createElement("div", { className: bSettings('separator') }))),
+        settingsVisible && (React.createElement(React.Fragment, null,
+            React.createElement(Button, { size: "m", view: "flat", ref: chevronRef, pin: "round-round", onClick: togglePopup, className: bSettings('dropdown-button') },
+                React.createElement(Icon, { data: Gear })),
+            React.createElement(Popup, { open: popupShown, anchorRef: chevronRef, placement: placement, onClose: hidePopup },
+                React.createElement(SettingsContent, Object.assign({}, props, { onClose: hidePopup, className: bSettings('content') })))))));
 });
 const mdHelpPlacement = ['bottom', 'bottom-end', 'right-start', 'right', 'left'];
 const SettingsContent = function SettingsContent({ mode, onClose, onModeChange, toolbarVisibility, onToolbarVisibilityChange, onSplitModeChange, splitMode = false, splitModeEnabled, className, showPreview, }) {

package/build/esm/extensions/additional/GPT/MarkupGpt/commands.d.ts

@@ -0,0 +1,4 @@
+import type { Command, EditorView } from '../../../../cm/view';
+export declare const showMarkupGpt: (view: EditorView) => void;
+export declare const hideMarkupGpt: (view: EditorView) => void;
+export declare const runMarkupGpt: Command;

package/build/esm/extensions/additional/GPT/MarkupGpt/commands.js

@@ -0,0 +1,12 @@
+import { HideMarkupGptEffect, ShowMarkupGptEffect } from './effects';
+export const showMarkupGpt = (view) => {
+    view.dispatch({ effects: [ShowMarkupGptEffect.of(null)] });
+};
+export const hideMarkupGpt = (view) => {
+    view.dispatch({ effects: [HideMarkupGptEffect.of(null)] });
+};
+export const runMarkupGpt = (view) => {
+    if (view)
+        showMarkupGpt(view);
+    return true;
+};

package/build/esm/extensions/additional/GPT/MarkupGpt/effects.d.ts

@@ -0,0 +1,2 @@
+export declare const ShowMarkupGptEffect: import("@codemirror/state").StateEffectType<null>;
+export declare const HideMarkupGptEffect: import("@codemirror/state").StateEffectType<null>;

package/build/esm/extensions/additional/GPT/MarkupGpt/effects.js

@@ -0,0 +1,3 @@
+import { StateEffect } from '../../../../cm/state';
+export const ShowMarkupGptEffect = StateEffect.define();
+export const HideMarkupGptEffect = StateEffect.define();

package/build/esm/extensions/additional/GPT/MarkupGpt/index.d.ts

@@ -0,0 +1,4 @@
+import { GptWidgetOptions } from '../../..';
+export { mGptToolbarItem } from './toolbar';
+export { showMarkupGpt, hideMarkupGpt } from './commands';
+export declare function mGptExtension(props: GptWidgetOptions): import("@codemirror/state").Extension[];

package/build/esm/extensions/additional/GPT/MarkupGpt/index.js

@@ -0,0 +1,17 @@
+import { keymap } from '@codemirror/view';
+import { gptHotKeys } from '../constants';
+import { runMarkupGpt } from './commands';
+import { mGptPlugin } from './plugin';
+export { mGptToolbarItem } from './toolbar';
+export { showMarkupGpt, hideMarkupGpt } from './commands';
+export function mGptExtension(props) {
+    return [
+        mGptPlugin(props).extension,
+        keymap.of([
+            {
+                key: gptHotKeys.openGptKey,
+                run: runMarkupGpt,
+            },
+        ]),
+    ];
+}

package/build/esm/extensions/additional/GPT/MarkupGpt/plugin.d.ts

@@ -0,0 +1,22 @@
+import { GptWidgetOptions } from '../../..';
+import { type DecorationSet, type EditorView, ViewPlugin, type ViewUpdate } from '../../../../cm/view';
+export declare function mGptPlugin(gptProps: GptWidgetOptions): ViewPlugin<{
+    readonly _view: EditorView;
+    readonly _renderItem: import("../../..").RendererItem;
+    _anchor: Element | null;
+    decos: DecorationSet;
+    disablePromptPresets: boolean;
+    markup: string | null;
+    selectedPosition: {
+        from: number;
+        to: number;
+    };
+    update(update: ViewUpdate): void;
+    docViewUpdate(): void;
+    destroy(): void;
+    renderPopup(): JSX.Element | null;
+    _getDecorationText(update: ViewUpdate, from: number, to: number): string;
+    _clearSelectedText(): void;
+    _setSelectedText(str: string): void;
+    _onApplyResult(changedMarkup: string): void;
+}>;

package/build/esm/extensions/additional/GPT/MarkupGpt/plugin.js

@@ -0,0 +1,117 @@
+import { WidgetType } from '@codemirror/view';
+import { Decoration, ViewPlugin, } from '../../../../cm/view';
+import { ReactRendererFacet } from '../../../../markup';
+import { WIDGET_DECO_CLASS_NAME } from '../constants';
+import { isEmptyGptPrompts } from '../utils';
+import { hideMarkupGpt } from './commands';
+import { HideMarkupGptEffect, ShowMarkupGptEffect } from './effects';
+import { renderPopup } from './popup';
+class SpanWidget extends WidgetType {
+    constructor(className, textContent) {
+        super();
+        this.className = '';
+        this.textContent = '';
+        this.className = className;
+        this.textContent = textContent;
+    }
+    toDOM() {
+        const spanElem = document.createElement('span');
+        spanElem.className = this.className;
+        spanElem.textContent = this.textContent;
+        return spanElem;
+    }
+}
+export function mGptPlugin(gptProps) {
+    return ViewPlugin.fromClass(class {
+        constructor(view) {
+            this._anchor = null;
+            this.decos = Decoration.none;
+            this.disablePromptPresets = true;
+            this.markup = null;
+            this.selectedPosition = {
+                from: 0,
+                to: 0,
+            };
+            this._view = view;
+            this._renderItem = view.state
+                .facet(ReactRendererFacet)
+                .createItem('gpt-in-markup-mode', () => this.renderPopup());
+        }
+        update(update) {
+            if (update.docChanged || update.selectionSet) {
+                this.decos = Decoration.none;
+                return;
+            }
+            this.decos = this.decos.map(update.changes);
+            const { from, to } = update.state.selection.main;
+            this.selectedPosition.from = from;
+            this.selectedPosition.to = to;
+            for (const tr of update.transactions) {
+                for (const eff of tr.effects) {
+                    if (eff.is(ShowMarkupGptEffect)) {
+                        this._setSelectedText(this._getDecorationText(update, from, to));
+                        if (from === to) {
+                            this.disablePromptPresets = true;
+                            if (isEmptyGptPrompts(gptProps, true))
+                                return;
+                            const decorationWidget = Decoration.widget({
+                                widget: new SpanWidget(WIDGET_DECO_CLASS_NAME, ' '),
+                            });
+                            this.decos = Decoration.set([decorationWidget.range(from)]);
+                            return;
+                        }
+                        this.disablePromptPresets = false;
+                        if (isEmptyGptPrompts(gptProps, false))
+                            return;
+                        this.decos = Decoration.set([
+                            {
+                                from,
+                                to,
+                                value: Decoration.mark({ class: WIDGET_DECO_CLASS_NAME }),
+                            },
+                        ]);
+                    }
+                    if (eff.is(HideMarkupGptEffect)) {
+                        this.decos = Decoration.none;
+                    }
+                }
+            }
+        }
+        docViewUpdate() {
+            this._anchor = this._view.dom
+                .getElementsByClassName(WIDGET_DECO_CLASS_NAME)
+                .item(0);
+            this._renderItem.rerender();
+        }
+        destroy() {
+            this._clearSelectedText();
+            this._renderItem.remove();
+        }
+        renderPopup() {
+            if (!this._anchor || this.markup === null) {
+                return null;
+            }
+            return renderPopup(this._anchor, Object.assign(Object.assign({}, gptProps), { disablePromptPresets: this.disablePromptPresets, onClose: () => hideMarkupGpt(this._view), markup: this.markup, onApplyResult: (changedMarkup) => this._onApplyResult(changedMarkup) }));
+        }
+        _getDecorationText(update, from, to) {
+            return update.state.doc.sliceString(from, to);
+        }
+        _clearSelectedText() {
+            this.markup = null;
+        }
+        _setSelectedText(str) {
+            this.markup = str;
+        }
+        _onApplyResult(changedMarkup) {
+            const { from, to } = this.selectedPosition;
+            const changes = [{ from: from, to: to, insert: changedMarkup }];
+            const transaction = this._view.state.update({
+                changes: changes,
+                effects: [HideMarkupGptEffect.of(null)],
+            });
+            this._view.dispatch(transaction);
+        }
+    }, {
+        decorations: (value) => value.decos,
+    });
+}

package/build/esm/extensions/additional/GPT/MarkupGpt/popup.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { PopupProps } from '@gravity-ui/uikit';
+import { GptDialogProps } from '../GptDialog/GptDialog';
+declare type Props = {
+    onClose: () => void;
+    markup: string;
+    onConfirmOk?: () => void;
+    onConfirmCancel?: () => void;
+} & GptDialogProps & Pick<PopupProps, 'anchorRef' | 'container'>;
+export declare function renderPopup(anchor: HTMLElement, props: Props): JSX.Element;
+export {};