@gravity-ui/markdown-editor 13.0.0

package/build/esm/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/esm/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/esm/extensions/yfm/YfmTabs/index.js

@@ -0,0 +1,21 @@
+import { chainCommands } from 'prosemirror-commands';
+import { YfmTabsSpecs } from './YfmTabsSpecs';
+import { createYfmTabs } from './actions';
+import { dragAutoSwitch, joinBackwardToOpenTab, liftEmptyBlockFromTabPanel, removeTabWhenCursorAtTheStartOfTab, tabEnter, tabPanelArrowDown, } from './plugins';
+import { tabPanelView, tabView } from './views';
+export { TabsNode, tabType, tabsType, tabsListType, tabPanelType } from './YfmTabsSpecs';
+const actionName = 'toYfmTabs';
+export const YfmTabs = (builder) => {
+    builder.use(YfmTabsSpecs, {
+        tabView: () => tabView,
+        tabPanelView: () => tabPanelView,
+    });
+    builder.addKeymap(() => ({
+        Backspace: chainCommands(removeTabWhenCursorAtTheStartOfTab, joinBackwardToOpenTab),
+        ArrowDown: tabPanelArrowDown,
+        Enter: chainCommands(tabEnter, liftEmptyBlockFromTabPanel),
+        'Shift-Enter': tabEnter,
+    }), builder.Priority.High);
+    builder.addAction(actionName, () => createYfmTabs);
+    builder.addPlugin(dragAutoSwitch);
+};

package/build/esm/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/esm/extensions/yfm/YfmTabs/plugins.js

@@ -0,0 +1,322 @@
+var _a;
+import { generateID } from '@diplodoc/transform/lib/plugins/utils';
+import { Plugin, TextSelection } from 'prosemirror-state';
+import { findChildren, findDomRefAtPos, findParentNodeOfType, findParentNodeOfTypeClosestToPos, } from 'prosemirror-utils';
+import { createFakeParagraph, findFakeParaPosClosestToPos, findFakeParaPosForTextSelection, isGapCursorSelection, pType, } from '../../';
+import { throttle } from '../../../lodash';
+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';
+export const dragAutoSwitch = () => new Plugin({
+    view: TabsAutoSwitchOnDragOver.view,
+});
+class TabsAutoSwitchOnDragOver {
+    constructor(view) {
+        this._tabElem = null;
+        this._timeout = null;
+        this._editorView = view;
+        this._docListener = 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 = 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 === 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));
+                }
+            }
+        }
+        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 !== 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;
+    const tabsParentNode = findParentNodeOfType(tabsType(state.schema))(state.selection);
+    if (atEndOfPanel(view) && (view === null || view === void 0 ? void 0 : view.endOfTextblock('down'))) {
+        const [direction, $cursor] = ['after', sel.$to];
+        let $pos;
+        if (isTextSelection(sel)) {
+            $pos =
+                (_b = findFakeParaPosForTextSelection(sel, direction)) !== null && _b !== void 0 ? _b : findFakeParaPosClosestToPos($cursor, $cursor.depth - 2, direction);
+        }
+        if (isGapCursorSelection(sel) && tabsParentNode) {
+            $pos = state.doc.resolve(tabsParentNode.pos + tabsParentNode.node.nodeSize);
+        }
+        if ($pos) {
+            dispatch === null || dispatch === void 0 ? void 0 : dispatch(createFakeParagraph(state.tr, $pos, direction).scrollIntoView());
+            return true;
+        }
+    }
+    return false;
+};
+export const tabEnter = (state) => {
+    const $cursor = get$Cursor(state.selection);
+    return ($cursor === null || $cursor === void 0 ? void 0 : $cursor.node($cursor.depth).type) === tabType(state.schema);
+};
+export const liftEmptyBlockFromTabPanel = (state, dispatch) => {
+    const { selection, schema } = state;
+    if (!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
+        isSameNodeType($cursor.node(-1), tabPanelType(schema)) &&
+        isSameNodeType($cursor.node(-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(TextSelection.create(tr.doc, tr.mapping.map(tabsAfter)));
+                dispatch(tr.scrollIntoView());
+            }
+            return true;
+        }
+    }
+    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) => {
+        return tabNode.type.name === tabPanelType(state.schema).name;
+    });
+    const afterPanelNode = tabPanels.filter((tabPanelNode) => tabPanelNode.node.attrs[TabPanelAttrs.ariaLabelledby] ===
+        afterTab.node.attrs[TabAttrs.dataDiplodocid])[0];
+    const tabId = generateID();
+    const panelId = generateID();
+    const newPanel = tabPanelType(state.schema).create({
+        [TabPanelAttrs.ariaLabelledby]: tabId,
+        [TabPanelAttrs.id]: panelId,
+        [TabPanelAttrs.class]: tabPanelActiveClassname,
+    }, 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.role]: 'tab',
+        [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(TextSelection.create(tr.doc, afterTab.pos + afterTab.node.nodeSize + 1)));
+    view === null || view === void 0 ? void 0 : view.focus();
+    return true;
+};
+export const removeTab = (tabToRemove, tabsParentNode) => (state, dispatch, view) => {
+    const tabList = findChildren(tabsParentNode.node, (tabNode) => {
+        return tabNode.type.name === tabsListType(state.schema).name;
+    })[0];
+    const tabToRemoveIdx = findChildIndex(tabList.node, tabToRemove.node);
+    const tabNodes = findChildren(tabList.node, (node) => node.type.name === tabType(state.schema).name);
+    const tabPanels = findChildren(tabsParentNode.node, (tabNode) => {
+        return tabNode.type.name === tabPanelType(state.schema).name;
+    });
+    const panelToRemove = tabPanels.filter((tabPanelNode) => tabPanelNode.node.attrs[TabPanelAttrs.ariaLabelledby] ===
+        tabToRemove.node.attrs[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: 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)));
+        }
+        dispatch(tr);
+        view === null || view === void 0 ? void 0 : view.focus();
+        return true;
+    }
+    return false;
+};
+export const removeTabWhenCursorAtTheStartOfTab = (state, dispatch) => {
+    const tabToRemove = findParentNodeOfType(tabType(state.schema))(state.selection);
+    const tabsParentNode = findParentNodeOfType(tabsType(state.schema))(state.selection);
+    if (tabsParentNode &&
+        tabToRemove &&
+        state.selection.from === tabToRemove.pos + 1 &&
+        state.selection.from === state.selection.to) {
+        return removeTab(tabToRemove, tabsParentNode)(state, dispatch);
+    }
+    return false;
+};
+export const joinBackwardToOpenTab = (state, dispatch) => {
+    const $cursor = 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 !== tabsType(state.schema)) {
+        return false;
+    }
+    const tabsParent = findParentNodeOfTypeClosestToPos(state.doc.resolve($cursor.pos - 2), tabsType(state.schema));
+    if (!tabsParent) {
+        return false;
+    }
+    const activePanel = findChildren(tabsParent.node, (n) => n.attrs.class === 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(TextSelection.create(tr.doc, posEndOfLastLayoutCell + 1));
+        dispatch(tr.scrollIntoView());
+    }
+    return true;
+};

package/build/esm/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/esm/extensions/yfm/YfmTabs/utils.js

@@ -0,0 +1,16 @@
+import { tabPanelType } from '.';
+export 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 === tabPanelType(view.state.schema)) {
+            const panelPos = $head.before(d);
+            return (view === null || view === void 0 ? void 0 : view.endOfTextblock('down')) ? panelPos : null;
+        }
+    }
+    return null;
+};

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

@@ -0,0 +1,4 @@
+import { 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

@@ -0,0 +1,76 @@
+import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
+import { cn } from '../../../classname';
+import { crossSvg, plusSvg } from './icons';
+import { createTab, removeTab } from './plugins';
+import { tabType, tabsType } from '.';
+import './index.css';
+const cnYfmTab = 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 = findParentNodeOfTypeClosestToPos(state.tr.doc.resolve(getPos() + 1), tabType(state.schema));
+    const tabsParentNode = findParentNodeOfTypeClosestToPos(state.tr.doc.resolve(getPos()), tabsType(state.schema));
+    return { currentTab, tabsParentNode };
+};
+export 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 = crossSvg;
+    removeTabButton.contentEditable = 'false';
+    removeTabButton.addEventListener('click', () => {
+        const { state, dispatch } = view;
+        const { currentTab, tabsParentNode } = getTabNodes(state, getPos);
+        if (currentTab && tabsParentNode)
+            removeTab(currentTab, tabsParentNode)(state, dispatch, view);
+    });
+    const createTabButton = document.createElement('div');
+    createTabButton.setAttribute('class', cnYfmTab('create-button'));
+    createTabButton.innerHTML = plusSvg;
+    createTabButton.contentEditable = 'false';
+    createTabButton.addEventListener('click', () => {
+        const { state, dispatch } = view;
+        const { currentTab, tabsParentNode } = getTabNodes(state, getPos);
+        if (currentTab && tabsParentNode)
+            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),
+    };
+};
+// @ts-expect-error
+export const tabPanelView = (node, view, getPos) => ({
+    // FIX: ignore mutation and don't rerender node when yfm.js switch tab
+    ignoreMutation: ignoreMutation(node, view, getPos),
+});

package/build/esm/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/esm/extensions/yfm/index.js

@@ -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/esm/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/esm/extensions/yfm/specs.js

@@ -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/esm/forms/FileForm.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ClassNameProps } from '../classname';
+export declare type FileFormSubmitParams = {
+    src: string;
+    name: string;
+};
+export declare type FileFormProps = ClassNameProps & {
+    autoFocus?: boolean;
+    onSubmit(params: FileFormSubmitParams): void;
+    onCancel(): void;
+    onAttach?: (files: File[]) => void;
+    loading?: boolean;
+};
+export declare const FileForm: React.FC<FileFormProps>;

package/build/esm/forms/FileForm.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Tabs, TextInput } from '@gravity-ui/uikit';
+import { cn } from '../classname';
+import { i18n } from '../i18n/forms';
+import { isFunction } from '../lodash';
+import { TextInputFixed } from './TextInput';
+import Form from './base';
+import { ButtonAttach } from './components';
+import { enterKeyHandler } from './utils';
+const b = cn('file-form');
+export const FileForm = ({ className, autoFocus, onCancel, onSubmit, onAttach, loading, }) => {
+    const [tabId, setTabId] = React.useState(() => isFunction(onAttach) ? "attach" /* TabId.Attach */ : "link" /* TabId.Link */);
+    const [src, setSrc] = React.useState('');
+    const [name, setName] = React.useState('');
+    const shouldRenderTabs = isFunction(onAttach);
+    React.useLayoutEffect(() => {
+        if (!shouldRenderTabs && tabId === "attach" /* TabId.Attach */) {
+            setTabId("link" /* TabId.Link */);
+        }
+    }, [shouldRenderTabs, tabId]);
+    const handleSubmit = () => {
+        onSubmit({
+            src: src.trim(),
+            name: name.trim(),
+        });
+    };
+    const inputEnterKeyHandler = enterKeyHandler(handleSubmit);
+    return (React.createElement(Form.Form, { className: b(null, [className]) },
+        shouldRenderTabs && (React.createElement(Tabs, { activeTab: tabId, onSelectTab: setTabId, items: [
+                { id: "attach" /* TabId.Attach */, title: i18n('common_tab_attach') },
+                { id: "link" /* TabId.Link */, title: i18n('common_tab_link') },
+            ] })),
+        tabId === "attach" /* TabId.Attach */ && onAttach && (React.createElement(React.Fragment, null,
+            React.createElement(Form.Layout, null, i18n('file_upload_help')),
+            React.createElement(Form.Footer, { onCancel: onCancel },
+                React.createElement(ButtonAttach, { multiple: true, buttonProps: {
+                        size: 's',
+                        view: 'action',
+                        loading,
+                    }, onUpdate: onAttach }, i18n('common_action_upload'))))),
+        tabId === "link" /* TabId.Link */ && (React.createElement(React.Fragment, null,
+            React.createElement(Form.Layout, null,
+                React.createElement(Form.Row, { label: i18n('common_link'), help: i18n('file_link_help'), control: React.createElement(TextInputFixed, { size: "s", view: "normal", value: src, onUpdate: setSrc, placeholder: "https://", autoFocus: autoFocus, className: b('input', { type: 'link' }), onKeyPress: inputEnterKeyHandler }) }),
+                React.createElement(Form.Row, { label: i18n('file_name'), control: React.createElement(TextInput, { size: "s", view: "normal", value: name, onUpdate: setName, className: b('input', { type: 'name' }), onKeyPress: inputEnterKeyHandler }) })),
+            React.createElement(Form.Footer, { onCancel: onCancel, onSubmit: handleSubmit })))));
+};

package/build/esm/forms/ImageForm.css

@@ -0,0 +1,8 @@
+.g-md-image-form__input_type_width, .g-md-image-form__input_type_height {
+  max-width: 112px;
+}
+.g-md-image-form__size-controls {
+  display: flex;
+  align-items: center;
+  gap: 0 16px;
+}