@gravity-ui/markdown-editor 14.10.5 → 14.11.0

package/build/cjs/extensions/yfm/YfmTabs/actions.js

@@ -3,24 +3,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createYfmTabs = exports.createYfmTabsCommand = void 0;
 const utils_1 = require("@diplodoc/transform/lib/plugins/utils");
 const BaseSchema_1 = require("../../base/BaseSchema");
-const const_1 = require("./YfmTabsSpecs/const");
-const const_2 = require("./const");
-const _1 = require(".");
+const const_1 = require("./const");
 const createYfmTabsCommand = (state, dispatch) => {
     if (dispatch) {
         const { schema } = state;
         const tabId = (0, utils_1.generateID)();
         const panelId = (0, utils_1.generateID)();
-        const yfmTabsList = (0, _1.tabsListType)(schema);
-        const yfmTabs = (0, _1.tabsType)(schema);
-        const yfmTabPanel = (0, _1.tabPanelType)(state.schema).create({
+        const yfmTabsList = (0, const_1.tabsListType)(schema);
+        const yfmTabs = (0, const_1.tabsType)(schema);
+        const yfmTabPanel = (0, const_1.tabPanelType)(state.schema).create({
             [const_1.TabPanelAttrs.ariaLabelledby]: tabId,
             [const_1.TabPanelAttrs.id]: panelId,
-            [const_1.TabPanelAttrs.class]: const_2.tabPanelActiveClassname,
+            [const_1.TabPanelAttrs.class]: const_1.tabPanelActiveClassname,
         }, (0, BaseSchema_1.pType)(state.schema).createAndFill());
-        const yfmTab = (0, _1.tabType)(state.schema).create({
+        const yfmTab = (0, const_1.tabType)(state.schema).create({
             [const_1.TabAttrs.id]: tabId,
-            [const_1.TabAttrs.class]: const_2.tabActiveClassname,
+            [const_1.TabAttrs.class]: const_1.tabActiveClassname,
             [const_1.TabAttrs.ariaControls]: panelId,
             [const_1.TabAttrs.dataDiplodocIsActive]: 'true',
             [const_1.TabAttrs.dataDiplodocid]: tabId,

package/build/cjs/extensions/yfm/YfmTabs/const.d.ts

@@ -1,5 +1,8 @@
-export { TabsNode, tabType, tabPanelType, tabsListType, tabsType } from './YfmTabsSpecs';
-export declare const tabActiveClassname = "yfm-tab active";
+export * from './YfmTabsSpecs/const';
+export { tabType, tabPanelType, tabsListType, tabsType } from './YfmTabsSpecs';
+export declare const YFM_TAB_CLASSNAME = "yfm-tab";
+export declare const DIPLODOC_ID_ATTR = "data-diplodoc-id";
+export declare const tabActiveClassname: string;
 export declare const tabInactiveClassname = "yfm-tab";
 export declare const tabPanelActiveClassname = "yfm-tab-panel active";
 export declare const tabPanelInactiveClassname = "yfm-tab-panel";

package/build/cjs/extensions/yfm/YfmTabs/const.js

@@ -1,13 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.tabPanelInactiveClassname = exports.tabPanelActiveClassname = exports.tabInactiveClassname = exports.tabActiveClassname = exports.tabsType = exports.tabsListType = exports.tabPanelType = exports.tabType = exports.TabsNode = void 0;
+exports.tabPanelInactiveClassname = exports.tabPanelActiveClassname = exports.tabInactiveClassname = exports.tabActiveClassname = exports.DIPLODOC_ID_ATTR = exports.YFM_TAB_CLASSNAME = exports.tabsType = exports.tabsListType = exports.tabPanelType = exports.tabType = void 0;
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./YfmTabsSpecs/const"), exports);
 var YfmTabsSpecs_1 = require("./YfmTabsSpecs");
-Object.defineProperty(exports, "TabsNode", { enumerable: true, get: function () { return YfmTabsSpecs_1.TabsNode; } });
 Object.defineProperty(exports, "tabType", { enumerable: true, get: function () { return YfmTabsSpecs_1.tabType; } });
 Object.defineProperty(exports, "tabPanelType", { enumerable: true, get: function () { return YfmTabsSpecs_1.tabPanelType; } });
 Object.defineProperty(exports, "tabsListType", { enumerable: true, get: function () { return YfmTabsSpecs_1.tabsListType; } });
 Object.defineProperty(exports, "tabsType", { enumerable: true, get: function () { return YfmTabsSpecs_1.tabsType; } });
-exports.tabActiveClassname = 'yfm-tab active';
-exports.tabInactiveClassname = 'yfm-tab';
+exports.YFM_TAB_CLASSNAME = 'yfm-tab';
+exports.DIPLODOC_ID_ATTR = 'data-diplodoc-id';
+exports.tabActiveClassname = `${exports.YFM_TAB_CLASSNAME} active`;
+exports.tabInactiveClassname = exports.YFM_TAB_CLASSNAME;
 exports.tabPanelActiveClassname = 'yfm-tab-panel active';
 exports.tabPanelInactiveClassname = 'yfm-tab-panel';

package/build/cjs/extensions/yfm/YfmTabs/plugins.d.ts

@@ -1,5 +1,5 @@
-import { Command, Plugin } from 'prosemirror-state';
-import { NodeWithPos } from 'prosemirror-utils';
+import { type Command, Plugin } from 'prosemirror-state';
+import { type NodeWithPos } from 'prosemirror-utils';
 export declare const dragAutoSwitch: () => Plugin<any>;
 export declare const tabPanelArrowDown: Command;
 export declare const tabEnter: Command;

package/build/cjs/extensions/yfm/YfmTabs/plugins.js

@@ -39,12 +39,12 @@ class TabsAutoSwitchOnDragOver {
         const pos = view.posAtCoords({ left: event.clientX, top: event.clientY });
         if (pos) {
             const elem = (0, prosemirror_utils_1.findDomRefAtPos)(pos.pos, view.domAtPos.bind(view));
-            const cutElem = elem.closest(TabsAutoSwitchOnDragOver.TAB_SELECTOR);
-            if (cutElem === this._tabElem)
+            const tabElem = elem.closest(TabsAutoSwitchOnDragOver.TAB_SELECTOR);
+            if (tabElem === this._tabElem)
                 return;
             this._clear();
-            if (cutElem)
-                this._setTabElem(cutElem);
+            if (tabElem)
+                this._setTabElem(tabElem);
         }
     }
     _clear() {
@@ -59,29 +59,7 @@ class TabsAutoSwitchOnDragOver {
     }
     _switchTab() {
         if (this._editorView.dragging && this._tabElem) {
-            const pos = this._editorView.posAtDOM(this._tabElem, 0, -1);
-            const $pos = this._editorView.state.doc.resolve(pos);
-            const { state } = this._editorView;
-            let { depth } = $pos;
-            let tabId = '';
-            let tabsNode = null;
-            do {
-                const node = $pos.node(depth);
-                if (node.type === (0, const_2.tabType)(state.schema)) {
-                    tabId = node.attrs[const_1.TabAttrs.dataDiplodocid];
-                    continue;
-                }
-                if (node.type === (0, const_2.tabsType)(state.schema)) {
-                    tabsNode = { node, pos: $pos.before(depth) };
-                    break;
-                }
-            } while (--depth >= 0);
-            if (tabId && tabsNode) {
-                const { tr } = state;
-                if (switchYfmTab(tabsNode, tabId, tr)) {
-                    this._editorView.dispatch(tr.setMeta('addToHistory', false));
-                }
-            }
+            (0, utils_3.switchTabByElem)(this._tabElem);
         }
         this._clear();
     }
@@ -91,49 +69,6 @@ TabsAutoSwitchOnDragOver.TAB_SELECTOR = '.yfm-tab:not([data-diplodoc-is-active=t
 TabsAutoSwitchOnDragOver.OPEN_TIMEOUT = 500; //ms
 TabsAutoSwitchOnDragOver.THROTTLE_WAIT = 50; //ms
 TabsAutoSwitchOnDragOver.view = (view) => new _a(view);
-function switchYfmTab({ node: tabsNode, pos: tabsPos }, tabId, tr) {
-    const { schema } = tabsNode.type;
-    if (tabsNode.type !== (0, const_2.tabsType)(schema))
-        return false;
-    const tabsList = tabsNode.firstChild;
-    if ((tabsList === null || tabsList === void 0 ? void 0 : tabsList.type) !== (0, const_2.tabsListType)(schema))
-        return false;
-    const tabsListPos = tabsPos + 1;
-    let panelId = null;
-    tabsList.forEach((node, offset) => {
-        if (node.type !== (0, const_2.tabType)(schema))
-            return;
-        const tabPos = tabsListPos + 1 + offset;
-        const tabAttrs = Object.assign(Object.assign({}, node.attrs), { [const_1.TabAttrs.ariaSelected]: 'false', [const_1.TabAttrs.dataDiplodocIsActive]: 'false' });
-        if (node.attrs[const_1.TabAttrs.dataDiplodocid] === tabId) {
-            panelId = node.attrs[const_1.TabAttrs.ariaControls];
-            tabAttrs[const_1.TabAttrs.ariaSelected] = 'true';
-            tabAttrs[const_1.TabAttrs.dataDiplodocIsActive] = 'true';
-        }
-        tr.setNodeMarkup(tabPos, null, tabAttrs);
-    });
-    if (!panelId)
-        return false;
-    tabsNode.forEach((node, offset) => {
-        var _b;
-        if (node.type !== (0, const_2.tabPanelType)(schema))
-            return;
-        const tabPanelPos = tabsPos + 1 + offset;
-        const tabPanelAttrs = Object.assign({}, node.attrs);
-        const tabPanelClassList = new Set(((_b = node.attrs[const_1.TabPanelAttrs.class]) !== null && _b !== void 0 ? _b : '')
-            .split(' ')
-            .filter((val) => Boolean(val.trim())));
-        if (node.attrs[const_1.TabPanelAttrs.id] === panelId) {
-            tabPanelClassList.add('active');
-        }
-        else {
-            tabPanelClassList.delete('active');
-        }
-        tabPanelAttrs[const_1.TabPanelAttrs.class] = Array.from(tabPanelClassList).join(' ');
-        tr.setNodeMarkup(tabPanelPos, null, tabPanelAttrs);
-    });
-    return true;
-}
 const tabPanelArrowDown = (state, dispatch, view) => {
     var _b;
     const { selection: sel } = state;
@@ -189,22 +124,6 @@ const liftEmptyBlockFromTabPanel = (state, dispatch) => {
     return false;
 };
 exports.liftEmptyBlockFromTabPanel = liftEmptyBlockFromTabPanel;
-const makeTabsInactive = (tabNodes, tabPanels, tr) => {
-    // Find all active tabs and make them inactive
-    const activeTabs = tabNodes.filter((v) => v.node.attrs[const_1.TabAttrs.dataDiplodocIsActive] === 'true');
-    if (activeTabs.length) {
-        activeTabs.forEach((tab) => {
-            tr.setNodeMarkup(tab.pos, null, Object.assign(Object.assign({}, tab.node.attrs), { class: const_2.tabInactiveClassname, [const_1.TabAttrs.dataDiplodocIsActive]: 'false' }));
-        });
-    }
-    // Find all active panels and make them inactive
-    const activePanels = tabPanels.filter((v) => v.node.attrs[const_1.TabPanelAttrs.class] === const_2.tabPanelActiveClassname);
-    if (activePanels.length) {
-        activePanels.forEach((tabPanel) => {
-            tr.setNodeMarkup(tr.mapping.map(tabPanel.pos), null, Object.assign(Object.assign({}, tabPanel.node.attrs), { class: const_2.tabPanelInactiveClassname }));
-        });
-    }
-};
 const createTab = (afterTab, tabsParentNode) => (state, dispatch, view) => {
     const tabNodes = (0, prosemirror_utils_1.findChildren)(tabsParentNode.node, (node) => node.type.name === (0, const_2.tabType)(state.schema).name);
     const tabPanels = (0, prosemirror_utils_1.findChildren)(tabsParentNode.node, (tabNode) => {
@@ -217,14 +136,14 @@ const createTab = (afterTab, tabsParentNode) => (state, dispatch, view) => {
     const newPanel = (0, const_2.tabPanelType)(state.schema).create({
         [const_1.TabPanelAttrs.ariaLabelledby]: tabId,
         [const_1.TabPanelAttrs.id]: panelId,
-        [const_1.TabPanelAttrs.class]: const_2.tabPanelActiveClassname,
+        [const_1.TabPanelAttrs.class]: const_2.tabPanelInactiveClassname,
     }, (0, __1.pType)(state.schema).createAndFill());
     const newTab = (0, const_2.tabType)(state.schema).create({
         [const_1.TabAttrs.id]: tabId,
         [const_1.TabAttrs.dataDiplodocid]: tabId,
         [const_1.TabAttrs.dataDiplodocKey]: tabId,
-        [const_1.TabAttrs.dataDiplodocIsActive]: 'true',
-        [const_1.TabAttrs.class]: const_2.tabActiveClassname,
+        [const_1.TabAttrs.dataDiplodocIsActive]: 'false',
+        [const_1.TabAttrs.class]: const_2.tabInactiveClassname,
         [const_1.TabAttrs.role]: 'tab',
         [const_1.TabAttrs.ariaControls]: panelId,
     });
@@ -236,12 +155,14 @@ const createTab = (afterTab, tabsParentNode) => (state, dispatch, view) => {
     tabPanels.forEach((v) => {
         v.pos = v.pos + tabsParentNode.pos + 1;
     });
-    makeTabsInactive(tabNodes, tabPanels, tr);
     dispatch === null || dispatch === void 0 ? void 0 : dispatch(tr
         .insert(afterPanelNode.pos + afterPanelNode.node.nodeSize, newPanel)
         .insert(afterTab.pos + afterTab.node.nodeSize, newTab)
         .setSelection(prosemirror_state_1.TextSelection.create(tr.doc, afterTab.pos + afterTab.node.nodeSize + 1)));
     view === null || view === void 0 ? void 0 : view.focus();
+    if (view) {
+        (0, utils_3.execAfterPaint)(() => (0, utils_3.switchTabById)(view.dom, tabId));
+    }
     return true;
 };
 exports.createTab = createTab;
@@ -271,18 +192,16 @@ const removeTab = (tabToRemove, tabsParentNode) => (state, dispatch, view) => {
                 v.pos = v.pos + tabsParentNode.pos + 1;
             });
             const newTabNode = tabNodes[newTabIdx];
-            const newTabPanelNode = tabPanels[newTabIdx];
-            makeTabsInactive(tabNodes, tabPanels, tr);
+            const newActiveTabId = newTabNode.node.attrs[const_1.TabAttrs.dataDiplodocid];
             tr
                 // Delete panel
                 .delete(panelToRemove.pos, panelToRemove.pos + panelToRemove.node.nodeSize)
                 // Delete tab
                 .delete(tabToRemove.pos, tabToRemove.pos + tabToRemove.node.nodeSize)
-                // Set new active tab
-                .setNodeMarkup(tr.mapping.map(newTabNode.pos), null, Object.assign(Object.assign({}, newTabNode.node.attrs), { class: const_2.tabActiveClassname, [const_1.TabAttrs.dataDiplodocIsActive]: 'true' }))
-                // Set new active panel
-                .setNodeMarkup(tr.mapping.map(newTabPanelNode.pos), null, Object.assign(Object.assign({}, newTabPanelNode.node.attrs), { class: const_2.tabPanelActiveClassname }))
                 .setSelection(prosemirror_state_1.TextSelection.create(tr.doc, tr.mapping.map(newTabNode.pos + newTabNode.node.nodeSize - 1)));
+            // Set new active tab
+            if (view)
+                (0, utils_3.execAfterPaint)(() => (0, utils_3.switchTabById)(view.dom, newActiveTabId));
         }
         dispatch(tr);
         view === null || view === void 0 ? void 0 : view.focus();

package/build/cjs/extensions/yfm/YfmTabs/utils.d.ts

@@ -1,2 +1,5 @@
-import { EditorView } from 'prosemirror-view';
+import type { EditorView } from 'prosemirror-view';
+export declare const execAfterPaint: (fn: () => void) => void;
 export declare const atEndOfPanel: (view?: EditorView) => number | false | null;
+export declare const switchTabByElem: (tabElem: HTMLElement) => void;
+export declare const switchTabById: (container: HTMLElement, tabId: string) => void;

package/build/cjs/extensions/yfm/YfmTabs/utils.js

@@ -1,7 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.atEndOfPanel = void 0;
-const _1 = require(".");
+exports.switchTabById = exports.switchTabByElem = exports.atEndOfPanel = exports.execAfterPaint = void 0;
+const const_1 = require("./const");
+const execAfterPaint = (fn) => {
+    requestAnimationFrame(() => {
+        requestAnimationFrame(fn);
+    });
+};
+exports.execAfterPaint = execAfterPaint;
 const atEndOfPanel = (view) => {
     if (!view)
         return null;
@@ -10,7 +16,7 @@ const atEndOfPanel = (view) => {
         const parent = $head.node(d), index = $head.indexAfter(d);
         if (index !== parent.childCount)
             return false;
-        if (parent.type === (0, _1.tabPanelType)(view.state.schema)) {
+        if (parent.type === (0, const_1.tabPanelType)(view.state.schema)) {
             const panelPos = $head.before(d);
             return (view === null || view === void 0 ? void 0 : view.endOfTextblock('down')) ? panelPos : null;
         }
@@ -18,3 +24,17 @@ const atEndOfPanel = (view) => {
     return null;
 };
 exports.atEndOfPanel = atEndOfPanel;
+const switchTabByElem = (tabElem) => {
+    if (tabElem.classList.contains(const_1.YFM_TAB_CLASSNAME)) {
+        tabElem.click();
+    }
+};
+exports.switchTabByElem = switchTabByElem;
+const switchTabById = (container, tabId) => {
+    const selector = `.${const_1.YFM_TAB_CLASSNAME}[${const_1.DIPLODOC_ID_ATTR}="${tabId}"]`;
+    const tabElem = container.querySelector(selector);
+    if (tabElem) {
+        (0, exports.switchTabByElem)(tabElem);
+    }
+};
+exports.switchTabById = switchTabById;

package/build/cjs/extensions/yfm/YfmTabs/views.d.ts

@@ -1,4 +1,4 @@
-import { NodeViewConstructor } from 'prosemirror-view';
+import { type NodeViewConstructor } from 'prosemirror-view';
 export declare const tabView: NodeViewConstructor;
 export declare const tabPanelView: NodeViewConstructor;
 export declare const vtabView: NodeViewConstructor;

package/build/cjs/extensions/yfm/YfmTabs/views.js

@@ -1,25 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.vtabInputView = exports.vtabView = exports.tabPanelView = exports.tabView = void 0;
+const prosemirror_state_1 = require("prosemirror-state");
 const prosemirror_utils_1 = require("prosemirror-utils");
 const classname_1 = require("../../../classname");
+const const_1 = require("./const");
 const icons_1 = require("./icons");
 const plugins_1 = require("./plugins");
-const _1 = require(".");
+const utils_1 = require("./utils");
 const cnYfmTab = (0, classname_1.cn)('yfm-tab');
-const ignoreMutation = (node, view, getPos) => (mutation) => {
+const ignoreMutation = (_node, _view, _getPos) => (mutation) => {
     if (mutation instanceof MutationRecord &&
         mutation.type === 'attributes' &&
         mutation.attributeName) {
-        const newAttr = mutation.target.getAttribute(mutation.attributeName);
-        view.dispatch(view.state.tr.setNodeMarkup(getPos(), null, Object.assign(Object.assign({}, node.attrs), { [mutation.attributeName]: newAttr })));
         return true;
     }
     return false;
 };
 const getTabNodes = (state, getPos) => {
-    const currentTab = (0, prosemirror_utils_1.findParentNodeOfTypeClosestToPos)(state.tr.doc.resolve(getPos() + 1), (0, _1.tabType)(state.schema));
-    const tabsParentNode = (0, prosemirror_utils_1.findParentNodeOfTypeClosestToPos)(state.tr.doc.resolve(getPos()), (0, _1.tabsType)(state.schema));
+    const currentTab = (0, prosemirror_utils_1.findParentNodeOfTypeClosestToPos)(state.tr.doc.resolve(getPos() + 1), (0, const_1.tabType)(state.schema));
+    const tabsParentNode = (0, prosemirror_utils_1.findParentNodeOfTypeClosestToPos)(state.tr.doc.resolve(getPos()), (0, const_1.tabsType)(state.schema));
     return { currentTab, tabsParentNode };
 };
 const tabView = (node, view, getPos) => {
@@ -31,6 +31,26 @@ const tabView = (node, view, getPos) => {
     wrapperElem.addEventListener('click', () => {
         // Click on parent node to trigger event listener that selects current tab
         tabElem.click();
+        {
+            /**
+             * Hack for empty tabs
+             *
+             * Problem: when clicking on an empty tab (without text content) it focuses, and selection doesn't move to beginning of tab
+             *
+             * Temporary fix: manually return focus to pm-view, move text selection to beginning of tab
+             */
+            view.focus();
+            // tab is empty
+            if (node.nodeSize < 3) {
+                (0, utils_1.execAfterPaint)(() => {
+                    const pos = getPos();
+                    if (pos !== undefined) {
+                        const { tr } = view.state;
+                        view.dispatch(tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, pos + 1)).scrollIntoView());
+                    }
+                });
+            }
+        }
     });
     const removeTabButton = document.createElement('div');
     removeTabButton.setAttribute('class', cnYfmTab('remove-button'));

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

package/build/esm/extensions/yfm/YfmTabs/actions.js

@@ -1,8 +1,6 @@
 import { generateID } from '@diplodoc/transform/lib/plugins/utils';
 import { pType } from '../../base/BaseSchema';
-import { TabAttrs, TabPanelAttrs, TabsAttrs } from './YfmTabsSpecs/const';
-import { tabActiveClassname, tabPanelActiveClassname } from './const';
-import { tabPanelType, tabType, tabsListType, tabsType } from '.';
+import { TabAttrs, TabPanelAttrs, TabsAttrs, tabActiveClassname, tabPanelActiveClassname, tabPanelType, tabType, tabsListType, tabsType, } from './const';
 export const createYfmTabsCommand = (state, dispatch) => {
     if (dispatch) {
         const { schema } = state;

package/build/esm/extensions/yfm/YfmTabs/const.d.ts

@@ -1,5 +1,8 @@
-export { TabsNode, tabType, tabPanelType, tabsListType, tabsType } from './YfmTabsSpecs';
-export declare const tabActiveClassname = "yfm-tab active";
+export * from './YfmTabsSpecs/const';
+export { tabType, tabPanelType, tabsListType, tabsType } from './YfmTabsSpecs';
+export declare const YFM_TAB_CLASSNAME = "yfm-tab";
+export declare const DIPLODOC_ID_ATTR = "data-diplodoc-id";
+export declare const tabActiveClassname: string;
 export declare const tabInactiveClassname = "yfm-tab";
 export declare const tabPanelActiveClassname = "yfm-tab-panel active";
 export declare const tabPanelInactiveClassname = "yfm-tab-panel";

package/build/esm/extensions/yfm/YfmTabs/const.js

@@ -1,5 +1,8 @@
-export { TabsNode, tabType, tabPanelType, tabsListType, tabsType } from './YfmTabsSpecs';
-export const tabActiveClassname = 'yfm-tab active';
-export const tabInactiveClassname = 'yfm-tab';
+export * from './YfmTabsSpecs/const';
+export { tabType, tabPanelType, tabsListType, tabsType } from './YfmTabsSpecs';
+export const YFM_TAB_CLASSNAME = 'yfm-tab';
+export const DIPLODOC_ID_ATTR = 'data-diplodoc-id';
+export const tabActiveClassname = `${YFM_TAB_CLASSNAME} active`;
+export const tabInactiveClassname = YFM_TAB_CLASSNAME;
 export const tabPanelActiveClassname = 'yfm-tab-panel active';
 export const tabPanelInactiveClassname = 'yfm-tab-panel';

package/build/esm/extensions/yfm/YfmTabs/plugins.d.ts

@@ -1,5 +1,5 @@
-import { Command, Plugin } from 'prosemirror-state';
-import { NodeWithPos } from 'prosemirror-utils';
+import { type Command, Plugin } from 'prosemirror-state';
+import { type NodeWithPos } from 'prosemirror-utils';
 export declare const dragAutoSwitch: () => Plugin<any>;
 export declare const tabPanelArrowDown: Command;
 export declare const tabEnter: Command;

package/build/esm/extensions/yfm/YfmTabs/plugins.js

@@ -8,8 +8,8 @@ import { findChildIndex } from '../../../table-utils/helpers';
 import { isSameNodeType } from '../../../utils';
 import { get$Cursor, isTextSelection } from '../../../utils/selection';
 import { TabAttrs, TabPanelAttrs } from './YfmTabsSpecs/const';
-import { tabActiveClassname, tabInactiveClassname, tabPanelActiveClassname, tabPanelInactiveClassname, tabPanelType, tabType, tabsListType, tabsType, } from './const';
-import { atEndOfPanel } from './utils';
+import { tabInactiveClassname, tabPanelActiveClassname, tabPanelInactiveClassname, tabPanelType, tabType, tabsListType, tabsType, } from './const';
+import { atEndOfPanel, execAfterPaint, switchTabByElem, switchTabById } from './utils';
 export const dragAutoSwitch = () => new Plugin({
     view: TabsAutoSwitchOnDragOver.view,
 });
@@ -35,12 +35,12 @@ class TabsAutoSwitchOnDragOver {
         const pos = view.posAtCoords({ left: event.clientX, top: event.clientY });
         if (pos) {
             const elem = findDomRefAtPos(pos.pos, view.domAtPos.bind(view));
-            const cutElem = elem.closest(TabsAutoSwitchOnDragOver.TAB_SELECTOR);
-            if (cutElem === this._tabElem)
+            const tabElem = elem.closest(TabsAutoSwitchOnDragOver.TAB_SELECTOR);
+            if (tabElem === this._tabElem)
                 return;
             this._clear();
-            if (cutElem)
-                this._setTabElem(cutElem);
+            if (tabElem)
+                this._setTabElem(tabElem);
         }
     }
     _clear() {
@@ -55,29 +55,7 @@ class TabsAutoSwitchOnDragOver {
     }
     _switchTab() {
         if (this._editorView.dragging && this._tabElem) {
-            const pos = this._editorView.posAtDOM(this._tabElem, 0, -1);
-            const $pos = this._editorView.state.doc.resolve(pos);
-            const { state } = this._editorView;
-            let { depth } = $pos;
-            let tabId = '';
-            let tabsNode = null;
-            do {
-                const node = $pos.node(depth);
-                if (node.type === tabType(state.schema)) {
-                    tabId = node.attrs[TabAttrs.dataDiplodocid];
-                    continue;
-                }
-                if (node.type === tabsType(state.schema)) {
-                    tabsNode = { node, pos: $pos.before(depth) };
-                    break;
-                }
-            } while (--depth >= 0);
-            if (tabId && tabsNode) {
-                const { tr } = state;
-                if (switchYfmTab(tabsNode, tabId, tr)) {
-                    this._editorView.dispatch(tr.setMeta('addToHistory', false));
-                }
-            }
+            switchTabByElem(this._tabElem);
         }
         this._clear();
     }
@@ -87,49 +65,6 @@ TabsAutoSwitchOnDragOver.TAB_SELECTOR = '.yfm-tab:not([data-diplodoc-is-active=t
 TabsAutoSwitchOnDragOver.OPEN_TIMEOUT = 500; //ms
 TabsAutoSwitchOnDragOver.THROTTLE_WAIT = 50; //ms
 TabsAutoSwitchOnDragOver.view = (view) => new _a(view);
-function switchYfmTab({ node: tabsNode, pos: tabsPos }, tabId, tr) {
-    const { schema } = tabsNode.type;
-    if (tabsNode.type !== tabsType(schema))
-        return false;
-    const tabsList = tabsNode.firstChild;
-    if ((tabsList === null || tabsList === void 0 ? void 0 : tabsList.type) !== tabsListType(schema))
-        return false;
-    const tabsListPos = tabsPos + 1;
-    let panelId = null;
-    tabsList.forEach((node, offset) => {
-        if (node.type !== tabType(schema))
-            return;
-        const tabPos = tabsListPos + 1 + offset;
-        const tabAttrs = Object.assign(Object.assign({}, node.attrs), { [TabAttrs.ariaSelected]: 'false', [TabAttrs.dataDiplodocIsActive]: 'false' });
-        if (node.attrs[TabAttrs.dataDiplodocid] === tabId) {
-            panelId = node.attrs[TabAttrs.ariaControls];
-            tabAttrs[TabAttrs.ariaSelected] = 'true';
-            tabAttrs[TabAttrs.dataDiplodocIsActive] = 'true';
-        }
-        tr.setNodeMarkup(tabPos, null, tabAttrs);
-    });
-    if (!panelId)
-        return false;
-    tabsNode.forEach((node, offset) => {
-        var _b;
-        if (node.type !== tabPanelType(schema))
-            return;
-        const tabPanelPos = tabsPos + 1 + offset;
-        const tabPanelAttrs = Object.assign({}, node.attrs);
-        const tabPanelClassList = new Set(((_b = node.attrs[TabPanelAttrs.class]) !== null && _b !== void 0 ? _b : '')
-            .split(' ')
-            .filter((val) => Boolean(val.trim())));
-        if (node.attrs[TabPanelAttrs.id] === panelId) {
-            tabPanelClassList.add('active');
-        }
-        else {
-            tabPanelClassList.delete('active');
-        }
-        tabPanelAttrs[TabPanelAttrs.class] = Array.from(tabPanelClassList).join(' ');
-        tr.setNodeMarkup(tabPanelPos, null, tabPanelAttrs);
-    });
-    return true;
-}
 export const tabPanelArrowDown = (state, dispatch, view) => {
     var _b;
     const { selection: sel } = state;
@@ -182,22 +117,6 @@ export const liftEmptyBlockFromTabPanel = (state, dispatch) => {
     }
     return false;
 };
-const makeTabsInactive = (tabNodes, tabPanels, tr) => {
-    // Find all active tabs and make them inactive
-    const activeTabs = tabNodes.filter((v) => v.node.attrs[TabAttrs.dataDiplodocIsActive] === 'true');
-    if (activeTabs.length) {
-        activeTabs.forEach((tab) => {
-            tr.setNodeMarkup(tab.pos, null, Object.assign(Object.assign({}, tab.node.attrs), { class: tabInactiveClassname, [TabAttrs.dataDiplodocIsActive]: 'false' }));
-        });
-    }
-    // Find all active panels and make them inactive
-    const activePanels = tabPanels.filter((v) => v.node.attrs[TabPanelAttrs.class] === tabPanelActiveClassname);
-    if (activePanels.length) {
-        activePanels.forEach((tabPanel) => {
-            tr.setNodeMarkup(tr.mapping.map(tabPanel.pos), null, Object.assign(Object.assign({}, tabPanel.node.attrs), { class: tabPanelInactiveClassname }));
-        });
-    }
-};
 export const createTab = (afterTab, tabsParentNode) => (state, dispatch, view) => {
     const tabNodes = findChildren(tabsParentNode.node, (node) => node.type.name === tabType(state.schema).name);
     const tabPanels = findChildren(tabsParentNode.node, (tabNode) => {
@@ -210,14 +129,14 @@ export const createTab = (afterTab, tabsParentNode) => (state, dispatch, view) =
     const newPanel = tabPanelType(state.schema).create({
         [TabPanelAttrs.ariaLabelledby]: tabId,
         [TabPanelAttrs.id]: panelId,
-        [TabPanelAttrs.class]: tabPanelActiveClassname,
+        [TabPanelAttrs.class]: tabPanelInactiveClassname,
     }, pType(state.schema).createAndFill());
     const newTab = tabType(state.schema).create({
         [TabAttrs.id]: tabId,
         [TabAttrs.dataDiplodocid]: tabId,
         [TabAttrs.dataDiplodocKey]: tabId,
-        [TabAttrs.dataDiplodocIsActive]: 'true',
-        [TabAttrs.class]: tabActiveClassname,
+        [TabAttrs.dataDiplodocIsActive]: 'false',
+        [TabAttrs.class]: tabInactiveClassname,
         [TabAttrs.role]: 'tab',
         [TabAttrs.ariaControls]: panelId,
     });
@@ -229,12 +148,14 @@ export const createTab = (afterTab, tabsParentNode) => (state, dispatch, view) =
     tabPanels.forEach((v) => {
         v.pos = v.pos + tabsParentNode.pos + 1;
     });
-    makeTabsInactive(tabNodes, tabPanels, tr);
     dispatch === null || dispatch === void 0 ? void 0 : dispatch(tr
         .insert(afterPanelNode.pos + afterPanelNode.node.nodeSize, newPanel)
         .insert(afterTab.pos + afterTab.node.nodeSize, newTab)
         .setSelection(TextSelection.create(tr.doc, afterTab.pos + afterTab.node.nodeSize + 1)));
     view === null || view === void 0 ? void 0 : view.focus();
+    if (view) {
+        execAfterPaint(() => switchTabById(view.dom, tabId));
+    }
     return true;
 };
 export const removeTab = (tabToRemove, tabsParentNode) => (state, dispatch, view) => {
@@ -263,18 +184,16 @@ export const removeTab = (tabToRemove, tabsParentNode) => (state, dispatch, view
                 v.pos = v.pos + tabsParentNode.pos + 1;
             });
             const newTabNode = tabNodes[newTabIdx];
-            const newTabPanelNode = tabPanels[newTabIdx];
-            makeTabsInactive(tabNodes, tabPanels, tr);
+            const newActiveTabId = newTabNode.node.attrs[TabAttrs.dataDiplodocid];
             tr
                 // Delete panel
                 .delete(panelToRemove.pos, panelToRemove.pos + panelToRemove.node.nodeSize)
                 // Delete tab
                 .delete(tabToRemove.pos, tabToRemove.pos + tabToRemove.node.nodeSize)
-                // Set new active tab
-                .setNodeMarkup(tr.mapping.map(newTabNode.pos), null, Object.assign(Object.assign({}, newTabNode.node.attrs), { class: tabActiveClassname, [TabAttrs.dataDiplodocIsActive]: 'true' }))
-                // Set new active panel
-                .setNodeMarkup(tr.mapping.map(newTabPanelNode.pos), null, Object.assign(Object.assign({}, newTabPanelNode.node.attrs), { class: tabPanelActiveClassname }))
                 .setSelection(TextSelection.create(tr.doc, tr.mapping.map(newTabNode.pos + newTabNode.node.nodeSize - 1)));
+            // Set new active tab
+            if (view)
+                execAfterPaint(() => switchTabById(view.dom, newActiveTabId));
         }
         dispatch(tr);
         view === null || view === void 0 ? void 0 : view.focus();

package/build/esm/extensions/yfm/YfmTabs/utils.d.ts

@@ -1,2 +1,5 @@
-import { EditorView } from 'prosemirror-view';
+import type { EditorView } from 'prosemirror-view';
+export declare const execAfterPaint: (fn: () => void) => void;
 export declare const atEndOfPanel: (view?: EditorView) => number | false | null;
+export declare const switchTabByElem: (tabElem: HTMLElement) => void;
+export declare const switchTabById: (container: HTMLElement, tabId: string) => void;

package/build/esm/extensions/yfm/YfmTabs/utils.js

@@ -1,4 +1,9 @@
-import { tabPanelType } from '.';
+import { DIPLODOC_ID_ATTR, YFM_TAB_CLASSNAME, tabPanelType } from './const';
+export const execAfterPaint = (fn) => {
+    requestAnimationFrame(() => {
+        requestAnimationFrame(fn);
+    });
+};
 export const atEndOfPanel = (view) => {
     if (!view)
         return null;
@@ -14,3 +19,15 @@ export const atEndOfPanel = (view) => {
     }
     return null;
 };
+export const switchTabByElem = (tabElem) => {
+    if (tabElem.classList.contains(YFM_TAB_CLASSNAME)) {
+        tabElem.click();
+    }
+};
+export const switchTabById = (container, tabId) => {
+    const selector = `.${YFM_TAB_CLASSNAME}[${DIPLODOC_ID_ATTR}="${tabId}"]`;
+    const tabElem = container.querySelector(selector);
+    if (tabElem) {
+        switchTabByElem(tabElem);
+    }
+};

package/build/esm/extensions/yfm/YfmTabs/views.d.ts

@@ -1,4 +1,4 @@
-import { NodeViewConstructor } from 'prosemirror-view';
+import { type NodeViewConstructor } from 'prosemirror-view';
 import './index.css';
 export declare const tabView: NodeViewConstructor;
 export declare const tabPanelView: NodeViewConstructor;

package/build/esm/extensions/yfm/YfmTabs/views.js

@@ -1,16 +1,16 @@
+import { TextSelection } from 'prosemirror-state';
 import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
 import { cn } from '../../../classname';
+import { tabType, tabsType } from './const';
 import { crossSvg, plusSvg } from './icons';
 import { createTab, removeTab } from './plugins';
-import { tabType, tabsType } from '.';
+import { execAfterPaint } from './utils';
 import './index.css';
 const cnYfmTab = cn('yfm-tab');
-const ignoreMutation = (node, view, getPos) => (mutation) => {
+const ignoreMutation = (_node, _view, _getPos) => (mutation) => {
     if (mutation instanceof MutationRecord &&
         mutation.type === 'attributes' &&
         mutation.attributeName) {
-        const newAttr = mutation.target.getAttribute(mutation.attributeName);
-        view.dispatch(view.state.tr.setNodeMarkup(getPos(), null, Object.assign(Object.assign({}, node.attrs), { [mutation.attributeName]: newAttr })));
         return true;
     }
     return false;
@@ -29,6 +29,26 @@ export const tabView = (node, view, getPos) => {
     wrapperElem.addEventListener('click', () => {
         // Click on parent node to trigger event listener that selects current tab
         tabElem.click();
+        {
+            /**
+             * Hack for empty tabs
+             *
+             * Problem: when clicking on an empty tab (without text content) it focuses, and selection doesn't move to beginning of tab
+             *
+             * Temporary fix: manually return focus to pm-view, move text selection to beginning of tab
+             */
+            view.focus();
+            // tab is empty
+            if (node.nodeSize < 3) {
+                execAfterPaint(() => {
+                    const pos = getPos();
+                    if (pos !== undefined) {
+                        const { tr } = view.state;
+                        view.dispatch(tr.setSelection(TextSelection.create(tr.doc, pos + 1)).scrollIntoView());
+                    }
+                });
+            }
+        }
     });
     const removeTabButton = document.createElement('div');
     removeTabButton.setAttribute('class', cnYfmTab('remove-button'));

package/build/esm/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/markdown-editor",
-  "version": "14.10.5",
+  "version": "14.11.0",
   "description": "Markdown wysiwyg and markup editor",
   "license": "MIT",
   "repository": {