fix(YfmTabs): fixes from PR review

src/extensions/yfm/YfmTabs/const.ts

@@ -1,7 +1,10 @@
 export * from './YfmTabsSpecs/const';
 export {tabType, tabPanelType, tabsListType, tabsType} from './YfmTabsSpecs';
 
-export const tabActiveClassname = 'yfm-tab active';
-export const tabInactiveClassname = 'yfm-tab';
+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';

src/extensions/yfm/YfmTabs/plugins.ts

@@ -31,7 +31,7 @@ import {
     tabsListType,
     tabsType,
 } from './const';
-import {atEndOfPanel, rAF, switchTabByElem, switchTabById} from './utils';
+import {atEndOfPanel, execAfterPaint, switchTabByElem, switchTabById} from './utils';
 
 export const dragAutoSwitch = () =>
     new Plugin({
@@ -226,7 +226,7 @@ export const createTab: (afterTab: NodeWithPos, tabsParentNode: NodeWithPos) =>
         view?.focus();
 
         if (view) {
-            rAF(() => switchTabById(view.dom, tabId));
+            execAfterPaint(() => switchTabById(view.dom, tabId));
         }
 
         return true;
@@ -287,7 +287,7 @@ export const removeTab: (tabToRemove: NodeWithPos, tabsParentNode: NodeWithPos)
                     );
 
                 // Set new active tab
-                if (view) rAF(() => switchTabById(view.dom, newActiveTabId));
+                if (view) execAfterPaint(() => switchTabById(view.dom, newActiveTabId));
             }
             dispatch(tr);
             view?.focus();

src/extensions/yfm/YfmTabs/utils.ts

@@ -1,8 +1,8 @@
 import type {EditorView} from 'prosemirror-view';
 
-import {tabPanelType} from './const';
+import {DIPLODOC_ID_ATTR, YFM_TAB_CLASSNAME, tabPanelType} from './const';
 
-export const rAF = (fn: () => void) => {
+export const execAfterPaint = (fn: () => void) => {
     requestAnimationFrame(() => {
         requestAnimationFrame(fn);
     });
@@ -25,13 +25,13 @@ export const atEndOfPanel = (view?: EditorView) => {
 };
 
 export const switchTabByElem = (tabElem: HTMLElement) => {
-    if (tabElem.classList.contains('yfm-tab')) {
+    if (tabElem.classList.contains(YFM_TAB_CLASSNAME)) {
         tabElem.click();
     }
 };
 
 export const switchTabById = (container: HTMLElement, tabId: string) => {
-    const selector = `.yfm-tab[data-diplodoc-id=${tabId}]`;
+    const selector = `.${YFM_TAB_CLASSNAME}[${DIPLODOC_ID_ATTR}="${tabId}"]`;
     const tabElem = container.querySelector<HTMLDivElement>(selector);
     if (tabElem) {
         switchTabByElem(tabElem);

src/extensions/yfm/YfmTabs/views.ts

@@ -1,14 +1,14 @@
-import {Node} from 'prosemirror-model';
-import {EditorState} from 'prosemirror-state';
+import type {Node} from 'prosemirror-model';
+import {type EditorState, TextSelection} from 'prosemirror-state';
 import {findParentNodeOfTypeClosestToPos} from 'prosemirror-utils';
-import {EditorView, NodeViewConstructor} from 'prosemirror-view';
+import {EditorView, type NodeViewConstructor} from 'prosemirror-view';
 
 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.scss';
 
@@ -52,6 +52,21 @@ export const tabView: NodeViewConstructor = (node, view, getPos) => {
     wrapperElem.addEventListener('click', () => {
         // Click on parent node to trigger event listener that selects current tab
         tabElem.click();
+
+        view.focus();
+
+        // tab without text
+        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');