@gravity-ui/markdown-editor 13.0.0

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

@@ -0,0 +1,5 @@
+export { TabsNode, tabType, tabPanelType, tabsListType, tabsType } from './YfmTabsSpecs';
+export declare const tabActiveClassname = "yfm-tab active";
+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

@@ -0,0 +1,13 @@
+"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;
+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.tabPanelActiveClassname = 'yfm-tab-panel active';
+exports.tabPanelInactiveClassname = 'yfm-tab-panel';

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

@@ -0,0 +1,2 @@
+export declare const crossSvg = "<svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill=\"currentColor\" d=\"M9.75592 8.57741C10.0814 8.90285 10.0814 9.43049 9.75592 9.75592C9.43049 10.0814 8.90285 10.0814 8.57741 9.75592L5 6.17851L1.42259 9.75592C1.09715 10.0814 0.569515 10.0814 0.244078 9.75592C-0.0813592 9.43049 -0.0813592 8.90285 0.244078 8.57741L3.82149 5L0.244078 1.42259C-0.0813592 1.09715 -0.0813592 0.569515 0.244078 0.244078C0.569515 -0.0813592 1.09715 -0.0813592 1.42259 0.244078L5 3.82149L8.57741 0.244078C8.90285 -0.0813592 9.43049 -0.0813592 9.75592 0.244078C10.0814 0.569515 10.0814 1.09715 9.75592 1.42259L6.17851 5L9.75592 8.57741Z\"/>\n</svg>";
+export declare const plusSvg = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" width=\"16\" height=\"16\">\n<path fill=\"currentColor\" d=\"M9 7h4a1 1 0 1 1 0 2H9v4a1 1 0 1 1-2 0V9H3a1 1 0 1 1 0-2h4V3a1 1 0 1 1 2 0v4z\"/>\n</svg>";

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.plusSvg = exports.crossSvg = void 0;
+exports.crossSvg = `<svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
+<path fill="currentColor" d="M9.75592 8.57741C10.0814 8.90285 10.0814 9.43049 9.75592 9.75592C9.43049 10.0814 8.90285 10.0814 8.57741 9.75592L5 6.17851L1.42259 9.75592C1.09715 10.0814 0.569515 10.0814 0.244078 9.75592C-0.0813592 9.43049 -0.0813592 8.90285 0.244078 8.57741L3.82149 5L0.244078 1.42259C-0.0813592 1.09715 -0.0813592 0.569515 0.244078 0.244078C0.569515 -0.0813592 1.09715 -0.0813592 1.42259 0.244078L5 3.82149L8.57741 0.244078C8.90285 -0.0813592 9.43049 -0.0813592 9.75592 0.244078C10.0814 0.569515 10.0814 1.09715 9.75592 1.42259L6.17851 5L9.75592 8.57741Z"/>
+</svg>`;
+exports.plusSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+<path fill="currentColor" d="M9 7h4a1 1 0 1 1 0 2H9v4a1 1 0 1 1-2 0V9H3a1 1 0 1 1 0-2h4V3a1 1 0 1 1 2 0v4z"/>
+</svg>`;

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

@@ -0,0 +1,60 @@
+.ProseMirror .yfm-tabs {
+  border: 1px dashed transparent;
+  border-radius: var(--g-border-radius-s);
+}
+.ProseMirror .yfm-tabs:hover {
+  border-color: var(--g-color-line-generic);
+}
+.ProseMirror .g-md-yfm-tab__wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding-bottom: 7px;
+  border-bottom: 2px solid transparent;
+  background-clip: padding-box;
+}
+.ProseMirror .g-md-yfm-tab__remove-button {
+  display: flex;
+  width: 15px;
+  min-width: 15px;
+  height: 15px;
+  margin-left: 9px;
+  color: var(--g-color-base-generic-medium);
+}
+.ProseMirror .g-md-yfm-tab__remove-button:hover {
+  color: var(--g-color-text-primary);
+}
+.ProseMirror .g-md-yfm-tab__create-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 22px;
+  min-width: 22px;
+  height: 22px;
+  min-height: 22px;
+  margin-bottom: 9px;
+  opacity: 0;
+  color: var(--g-color-text-primary);
+}
+.ProseMirror .g-md-yfm-tab__create-button:hover {
+  border-radius: var(--g-border-radius-xs);
+  background: var(--g-color-base-generic-hover);
+}
+.ProseMirror .yfm-tab {
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin-right: 3px;
+  padding-bottom: 0;
+  border-bottom: none;
+}
+.ProseMirror .yfm-tab .g-md-placeholder {
+  color: var(--g-color-text-hint);
+}
+.ProseMirror .yfm-tab[data-diplodoc-is-active=true] .g-md-yfm-tab__wrapper {
+  border-bottom-color: #027bf3;
+}
+.ProseMirror .yfm-tab:hover .g-md-yfm-tab__create-button, .ProseMirror .yfm-tab:last-child .g-md-yfm-tab__create-button {
+  opacity: 1;
+}

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

@@ -0,0 +1,11 @@
+import type { Action, ExtensionAuto } from '../../../core';
+export { TabsNode, tabType, tabsType, tabsListType, tabPanelType } from './YfmTabsSpecs';
+declare const actionName = "toYfmTabs";
+export declare const YfmTabs: ExtensionAuto;
+declare global {
+    namespace WysiwygEditor {
+        interface Actions {
+            [actionName]: Action;
+        }
+    }
+}

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.YfmTabs = exports.tabPanelType = exports.tabsListType = exports.tabsType = exports.tabType = exports.TabsNode = void 0;
+const prosemirror_commands_1 = require("prosemirror-commands");
+const YfmTabsSpecs_1 = require("./YfmTabsSpecs");
+const actions_1 = require("./actions");
+const plugins_1 = require("./plugins");
+const views_1 = require("./views");
+var YfmTabsSpecs_2 = require("./YfmTabsSpecs");
+Object.defineProperty(exports, "TabsNode", { enumerable: true, get: function () { return YfmTabsSpecs_2.TabsNode; } });
+Object.defineProperty(exports, "tabType", { enumerable: true, get: function () { return YfmTabsSpecs_2.tabType; } });
+Object.defineProperty(exports, "tabsType", { enumerable: true, get: function () { return YfmTabsSpecs_2.tabsType; } });
+Object.defineProperty(exports, "tabsListType", { enumerable: true, get: function () { return YfmTabsSpecs_2.tabsListType; } });
+Object.defineProperty(exports, "tabPanelType", { enumerable: true, get: function () { return YfmTabsSpecs_2.tabPanelType; } });
+const actionName = 'toYfmTabs';
+const YfmTabs = (builder) => {
+    builder.use(YfmTabsSpecs_1.YfmTabsSpecs, {
+        tabView: () => views_1.tabView,
+        tabPanelView: () => views_1.tabPanelView,
+    });
+    builder.addKeymap(() => ({
+        Backspace: (0, prosemirror_commands_1.chainCommands)(plugins_1.removeTabWhenCursorAtTheStartOfTab, plugins_1.joinBackwardToOpenTab),
+        ArrowDown: plugins_1.tabPanelArrowDown,
+        Enter: (0, prosemirror_commands_1.chainCommands)(plugins_1.tabEnter, plugins_1.liftEmptyBlockFromTabPanel),
+        'Shift-Enter': plugins_1.tabEnter,
+    }), builder.Priority.High);
+    builder.addAction(actionName, () => actions_1.createYfmTabs);
+    builder.addPlugin(plugins_1.dragAutoSwitch);
+};
+exports.YfmTabs = YfmTabs;

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

@@ -0,0 +1,10 @@
+import { Command, Plugin } from 'prosemirror-state';
+import { NodeWithPos } from 'prosemirror-utils';
+export declare const dragAutoSwitch: () => Plugin<any>;
+export declare const tabPanelArrowDown: Command;
+export declare const tabEnter: Command;
+export declare const liftEmptyBlockFromTabPanel: Command;
+export declare const createTab: (afterTab: NodeWithPos, tabsParentNode: NodeWithPos) => Command;
+export declare const removeTab: (tabToRemove: NodeWithPos, tabsParentNode: NodeWithPos) => Command;
+export declare const removeTabWhenCursorAtTheStartOfTab: Command;
+export declare const joinBackwardToOpenTab: Command;

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

@@ -0,0 +1,333 @@
+"use strict";
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.joinBackwardToOpenTab = exports.removeTabWhenCursorAtTheStartOfTab = exports.removeTab = exports.createTab = exports.liftEmptyBlockFromTabPanel = exports.tabEnter = exports.tabPanelArrowDown = exports.dragAutoSwitch = void 0;
+const utils_1 = require("@diplodoc/transform/lib/plugins/utils");
+const prosemirror_state_1 = require("prosemirror-state");
+const prosemirror_utils_1 = require("prosemirror-utils");
+const __1 = require("../../");
+const lodash_1 = require("../../../lodash");
+const helpers_1 = require("../../../table-utils/helpers");
+const utils_2 = require("../../../utils");
+const selection_1 = require("../../../utils/selection");
+const const_1 = require("./YfmTabsSpecs/const");
+const const_2 = require("./const");
+const utils_3 = require("./utils");
+const dragAutoSwitch = () => new prosemirror_state_1.Plugin({
+    view: TabsAutoSwitchOnDragOver.view,
+});
+exports.dragAutoSwitch = dragAutoSwitch;
+class TabsAutoSwitchOnDragOver {
+    constructor(view) {
+        this._tabElem = null;
+        this._timeout = null;
+        this._editorView = view;
+        this._docListener = (0, lodash_1.throttle)(this._onDocEvent.bind(this), TabsAutoSwitchOnDragOver.THROTTLE_WAIT);
+        document.addEventListener('mousemove', this._docListener);
+        document.addEventListener('dragover', this._docListener);
+    }
+    destroy() {
+        this._clear();
+        this._docListener.cancel();
+        document.removeEventListener('mousemove', this._docListener);
+        document.removeEventListener('dragover', this._docListener);
+    }
+    _onDocEvent(event) {
+        const view = this._editorView;
+        if (!view.dragging)
+            return;
+        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)
+                return;
+            this._clear();
+            if (cutElem)
+                this._setTabElem(cutElem);
+        }
+    }
+    _clear() {
+        if (this._timeout !== null)
+            clearTimeout(this._timeout);
+        this._timeout = null;
+        this._tabElem = null;
+    }
+    _setTabElem(elem) {
+        this._tabElem = elem;
+        this._timeout = setTimeout(this._switchTab.bind(this), TabsAutoSwitchOnDragOver.OPEN_TIMEOUT);
+    }
+    _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));
+                }
+            }
+        }
+        this._clear();
+    }
+}
+_a = TabsAutoSwitchOnDragOver;
+TabsAutoSwitchOnDragOver.TAB_SELECTOR = '.yfm-tab:not([data-diplodoc-is-active=true])';
+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;
+    const tabsParentNode = (0, prosemirror_utils_1.findParentNodeOfType)((0, const_2.tabsType)(state.schema))(state.selection);
+    if ((0, utils_3.atEndOfPanel)(view) && (view === null || view === void 0 ? void 0 : view.endOfTextblock('down'))) {
+        const [direction, $cursor] = ['after', sel.$to];
+        let $pos;
+        if ((0, selection_1.isTextSelection)(sel)) {
+            $pos =
+                (_b = (0, __1.findFakeParaPosForTextSelection)(sel, direction)) !== null && _b !== void 0 ? _b : (0, __1.findFakeParaPosClosestToPos)($cursor, $cursor.depth - 2, direction);
+        }
+        if ((0, __1.isGapCursorSelection)(sel) && tabsParentNode) {
+            $pos = state.doc.resolve(tabsParentNode.pos + tabsParentNode.node.nodeSize);
+        }
+        if ($pos) {
+            dispatch === null || dispatch === void 0 ? void 0 : dispatch((0, __1.createFakeParagraph)(state.tr, $pos, direction).scrollIntoView());
+            return true;
+        }
+    }
+    return false;
+};
+exports.tabPanelArrowDown = tabPanelArrowDown;
+const tabEnter = (state) => {
+    const $cursor = (0, selection_1.get$Cursor)(state.selection);
+    return ($cursor === null || $cursor === void 0 ? void 0 : $cursor.node($cursor.depth).type) === (0, const_2.tabType)(state.schema);
+};
+exports.tabEnter = tabEnter;
+const liftEmptyBlockFromTabPanel = (state, dispatch) => {
+    const { selection, schema } = state;
+    if (!(0, selection_1.isTextSelection)(selection))
+        return false;
+    const { $cursor } = selection;
+    // cursor should be inside an empty textblock
+    if (!$cursor || $cursor.parent.content.size)
+        return false;
+    if ($cursor.depth > 2 && // depth must be at least 3
+        (0, utils_2.isSameNodeType)($cursor.node(-1), (0, const_2.tabPanelType)(schema)) &&
+        (0, utils_2.isSameNodeType)($cursor.node(-2), (0, const_2.tabsType)(schema))) {
+        // current texblock is last child
+        if ($cursor.after() === $cursor.end(-1)) {
+            if (dispatch) {
+                const copeidNode = $cursor.parent.copy();
+                const tabsAfter = $cursor.after(-2);
+                const { tr } = state;
+                tr.insert(tabsAfter, copeidNode)
+                    .delete($cursor.before(), $cursor.after())
+                    .setSelection(prosemirror_state_1.TextSelection.create(tr.doc, tr.mapping.map(tabsAfter)));
+                dispatch(tr.scrollIntoView());
+            }
+            return true;
+        }
+    }
+    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) => {
+        return tabNode.type.name === (0, const_2.tabPanelType)(state.schema).name;
+    });
+    const afterPanelNode = tabPanels.filter((tabPanelNode) => tabPanelNode.node.attrs[const_1.TabPanelAttrs.ariaLabelledby] ===
+        afterTab.node.attrs[const_1.TabAttrs.dataDiplodocid])[0];
+    const tabId = (0, utils_1.generateID)();
+    const panelId = (0, utils_1.generateID)();
+    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,
+    }, (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.role]: 'tab',
+        [const_1.TabAttrs.ariaControls]: panelId,
+    });
+    const { tr } = state;
+    // Change relative pos to absolute
+    tabNodes.forEach((v) => {
+        v.pos = v.pos + tabsParentNode.pos + 1;
+    });
+    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();
+    return true;
+};
+exports.createTab = createTab;
+const removeTab = (tabToRemove, tabsParentNode) => (state, dispatch, view) => {
+    const tabList = (0, prosemirror_utils_1.findChildren)(tabsParentNode.node, (tabNode) => {
+        return tabNode.type.name === (0, const_2.tabsListType)(state.schema).name;
+    })[0];
+    const tabToRemoveIdx = (0, helpers_1.findChildIndex)(tabList.node, tabToRemove.node);
+    const tabNodes = (0, prosemirror_utils_1.findChildren)(tabList.node, (node) => node.type.name === (0, const_2.tabType)(state.schema).name);
+    const tabPanels = (0, prosemirror_utils_1.findChildren)(tabsParentNode.node, (tabNode) => {
+        return tabNode.type.name === (0, const_2.tabPanelType)(state.schema).name;
+    });
+    const panelToRemove = tabPanels.filter((tabPanelNode) => tabPanelNode.node.attrs[const_1.TabPanelAttrs.ariaLabelledby] ===
+        tabToRemove.node.attrs[const_1.TabAttrs.dataDiplodocid])[0];
+    if (panelToRemove && dispatch) {
+        const { tr } = state;
+        if (tabNodes.length <= 1) {
+            tr.delete(tabsParentNode.pos, tabsParentNode.pos + tabsParentNode.node.nodeSize);
+        }
+        else {
+            const newTabIdx = tabToRemoveIdx - 1 < 0 ? 1 : tabToRemoveIdx - 1;
+            // Change relative pos to absolute
+            tabNodes.forEach((v) => {
+                v.pos = v.pos + tabsParentNode.pos + 2;
+            });
+            tabPanels.forEach((v) => {
+                v.pos = v.pos + tabsParentNode.pos + 1;
+            });
+            const newTabNode = tabNodes[newTabIdx];
+            const newTabPanelNode = tabPanels[newTabIdx];
+            makeTabsInactive(tabNodes, tabPanels, tr);
+            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)));
+        }
+        dispatch(tr);
+        view === null || view === void 0 ? void 0 : view.focus();
+        return true;
+    }
+    return false;
+};
+exports.removeTab = removeTab;
+const removeTabWhenCursorAtTheStartOfTab = (state, dispatch) => {
+    const tabToRemove = (0, prosemirror_utils_1.findParentNodeOfType)((0, const_2.tabType)(state.schema))(state.selection);
+    const tabsParentNode = (0, prosemirror_utils_1.findParentNodeOfType)((0, const_2.tabsType)(state.schema))(state.selection);
+    if (tabsParentNode &&
+        tabToRemove &&
+        state.selection.from === tabToRemove.pos + 1 &&
+        state.selection.from === state.selection.to) {
+        return (0, exports.removeTab)(tabToRemove, tabsParentNode)(state, dispatch);
+    }
+    return false;
+};
+exports.removeTabWhenCursorAtTheStartOfTab = removeTabWhenCursorAtTheStartOfTab;
+const joinBackwardToOpenTab = (state, dispatch) => {
+    const $cursor = (0, selection_1.get$Cursor)(state.selection);
+    if (!$cursor || $cursor.parentOffset !== 0)
+        return false;
+    // --> cursor at start of textblock
+    const textBlockIndex = $cursor.index($cursor.depth - 1);
+    if (textBlockIndex <= 0)
+        return false;
+    const nodeBefore = $cursor.node($cursor.depth - 1).child(textBlockIndex - 1);
+    if (nodeBefore.type !== (0, const_2.tabsType)(state.schema)) {
+        return false;
+    }
+    const tabsParent = (0, prosemirror_utils_1.findParentNodeOfTypeClosestToPos)(state.doc.resolve($cursor.pos - 2), (0, const_2.tabsType)(state.schema));
+    if (!tabsParent) {
+        return false;
+    }
+    const activePanel = (0, prosemirror_utils_1.findChildren)(tabsParent.node, (n) => n.attrs.class === const_2.tabPanelActiveClassname)[0];
+    if (dispatch) {
+        const posEndOfLastLayoutCell = activePanel.pos + tabsParent.pos + activePanel.node.nodeSize;
+        const tr = state.tr;
+        tr.delete($cursor.before(), $cursor.after());
+        tr.insert(posEndOfLastLayoutCell, $cursor.parent);
+        tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, posEndOfLastLayoutCell + 1));
+        dispatch(tr.scrollIntoView());
+    }
+    return true;
+};
+exports.joinBackwardToOpenTab = joinBackwardToOpenTab;

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

@@ -0,0 +1,2 @@
+import { EditorView } from 'prosemirror-view';
+export declare const atEndOfPanel: (view?: EditorView) => number | false | null;

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.atEndOfPanel = void 0;
+const _1 = require(".");
+const atEndOfPanel = (view) => {
+    if (!view)
+        return null;
+    const { $head } = view.state.selection;
+    for (let d = $head.depth; d >= 0; d--) {
+        const parent = $head.node(d), index = $head.indexAfter(d);
+        if (index !== parent.childCount)
+            return false;
+        if (parent.type === (0, _1.tabPanelType)(view.state.schema)) {
+            const panelPos = $head.before(d);
+            return (view === null || view === void 0 ? void 0 : view.endOfTextblock('down')) ? panelPos : null;
+        }
+    }
+    return null;
+};
+exports.atEndOfPanel = atEndOfPanel;

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

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

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

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tabPanelView = exports.tabView = void 0;
+const prosemirror_utils_1 = require("prosemirror-utils");
+const classname_1 = require("../../../classname");
+const icons_1 = require("./icons");
+const plugins_1 = require("./plugins");
+const _1 = require(".");
+const cnYfmTab = (0, classname_1.cn)('yfm-tab');
+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]: String(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));
+    return { currentTab, tabsParentNode };
+};
+const tabView = (node, view, getPos) => {
+    const tabElem = document.createElement('div');
+    const wrapperElem = document.createElement('div');
+    wrapperElem.setAttribute('class', cnYfmTab('wrapper'));
+    const viewElem = document.createElement('div');
+    viewElem.setAttribute('class', cnYfmTab('view'));
+    wrapperElem.addEventListener('click', () => {
+        // Click on parent node to trigger event listener that selects current tab
+        tabElem.click();
+    });
+    const removeTabButton = document.createElement('div');
+    removeTabButton.setAttribute('class', cnYfmTab('remove-button'));
+    removeTabButton.innerHTML = icons_1.crossSvg;
+    removeTabButton.contentEditable = 'false';
+    removeTabButton.addEventListener('click', () => {
+        const { state, dispatch } = view;
+        const { currentTab, tabsParentNode } = getTabNodes(state, getPos);
+        if (currentTab && tabsParentNode)
+            (0, plugins_1.removeTab)(currentTab, tabsParentNode)(state, dispatch, view);
+    });
+    const createTabButton = document.createElement('div');
+    createTabButton.setAttribute('class', cnYfmTab('create-button'));
+    createTabButton.innerHTML = icons_1.plusSvg;
+    createTabButton.contentEditable = 'false';
+    createTabButton.addEventListener('click', () => {
+        const { state, dispatch } = view;
+        const { currentTab, tabsParentNode } = getTabNodes(state, getPos);
+        if (currentTab && tabsParentNode)
+            (0, plugins_1.createTab)(currentTab, tabsParentNode)(state, dispatch, view);
+    });
+    for (const attr in node.attrs) {
+        if (Object.prototype.hasOwnProperty.call(node.attrs, attr)) {
+            tabElem.setAttribute(attr, node.attrs[attr]);
+        }
+    }
+    wrapperElem.appendChild(viewElem);
+    wrapperElem.appendChild(removeTabButton);
+    tabElem.appendChild(wrapperElem);
+    tabElem.appendChild(createTabButton);
+    return {
+        dom: tabElem,
+        contentDOM: viewElem,
+        destroy() {
+            tabElem.remove();
+        },
+        // FIX: ignore mutation and don't rerender node when yfm.js switch tab
+        ignoreMutation: ignoreMutation(node, view, getPos),
+    };
+};
+exports.tabView = tabView;
+// @ts-expect-error
+const tabPanelView = (node, view, getPos) => ({
+    // FIX: ignore mutation and don't rerender node when yfm.js switch tab
+    ignoreMutation: ignoreMutation(node, view, getPos),
+});
+exports.tabPanelView = tabPanelView;

package/build/cjs/extensions/yfm/index.d.ts

@@ -0,0 +1,13 @@
+export * from './Checkbox';
+export * from './Color';
+export * from './Emoji';
+export * from './ImgSize';
+export * from './Monospace';
+export * from './Video';
+export * from './YfmCut';
+export * from './YfmConfigs';
+export * from './YfmFile';
+export * from './YfmHeading';
+export * from './YfmNote';
+export * from './YfmTable';
+export * from './YfmTabs';

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Checkbox"), exports);
+tslib_1.__exportStar(require("./Color"), exports);
+tslib_1.__exportStar(require("./Emoji"), exports);
+tslib_1.__exportStar(require("./ImgSize"), exports);
+tslib_1.__exportStar(require("./Monospace"), exports);
+tslib_1.__exportStar(require("./Video"), exports);
+tslib_1.__exportStar(require("./YfmCut"), exports);
+tslib_1.__exportStar(require("./YfmConfigs"), exports);
+tslib_1.__exportStar(require("./YfmFile"), exports);
+tslib_1.__exportStar(require("./YfmHeading"), exports);
+tslib_1.__exportStar(require("./YfmNote"), exports);
+tslib_1.__exportStar(require("./YfmTable"), exports);
+tslib_1.__exportStar(require("./YfmTabs"), exports);

package/build/cjs/extensions/yfm/specs.d.ts

@@ -0,0 +1,13 @@
+export * from './Checkbox/CheckboxSpecs';
+export * from './Color/ColorSpecs';
+export * from './Emoji/EmojiSpecs';
+export * from './ImgSize/ImgSizeSpecs';
+export * from './Monospace/MonospaceSpecs';
+export * from './Video/VideoSpecs';
+export * from './YfmConfigs/YfmConfigsSpecs';
+export * from './YfmCut/YfmCutSpecs';
+export * from './YfmFile/YfmFileSpecs';
+export * from './YfmHeading/YfmHeadingSpecs';
+export * from './YfmNote/YfmNoteSpecs';
+export * from './YfmTable/YfmTableSpecs';
+export * from './YfmTabs/YfmTabsSpecs';

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Checkbox/CheckboxSpecs"), exports);
+tslib_1.__exportStar(require("./Color/ColorSpecs"), exports);
+tslib_1.__exportStar(require("./Emoji/EmojiSpecs"), exports);
+tslib_1.__exportStar(require("./ImgSize/ImgSizeSpecs"), exports);
+tslib_1.__exportStar(require("./Monospace/MonospaceSpecs"), exports);
+tslib_1.__exportStar(require("./Video/VideoSpecs"), exports);
+tslib_1.__exportStar(require("./YfmConfigs/YfmConfigsSpecs"), exports);
+tslib_1.__exportStar(require("./YfmCut/YfmCutSpecs"), exports);
+tslib_1.__exportStar(require("./YfmFile/YfmFileSpecs"), exports);
+tslib_1.__exportStar(require("./YfmHeading/YfmHeadingSpecs"), exports);
+tslib_1.__exportStar(require("./YfmNote/YfmNoteSpecs"), exports);
+tslib_1.__exportStar(require("./YfmTable/YfmTableSpecs"), exports);
+tslib_1.__exportStar(require("./YfmTabs/YfmTabsSpecs"), exports);