feat: tabs action (#114)

Author: smsochneg

src/extensions/yfm/YfmTabs/YfmTabsSpecs/spec.ts

@@ -10,7 +10,7 @@ export const getSpec: (opts: YfmTabsSpecsOptions) => Record<TabsNode, NodeSpec>
     [TabsNode.Tab]: {
         attrs: {
             [TabAttrs.id]: {default: 'unknown'},
-            [TabAttrs.class]: {default: 'unknown'},
+            [TabAttrs.class]: {default: 'yfm-tab'},
             [TabAttrs.role]: {default: 'unknown'},
             [TabAttrs.ariaControls]: {default: 'unknown'},
             [TabAttrs.ariaSelected]: {default: 'unknown'},
@@ -35,7 +35,7 @@ export const getSpec: (opts: YfmTabsSpecsOptions) => Record<TabsNode, NodeSpec>
     [TabsNode.TabPanel]: {
         attrs: {
             [TabPanelAttrs.id]: {default: 'unknown'},
-            [TabPanelAttrs.class]: {default: 'unknown'},
+            [TabPanelAttrs.class]: {default: 'yfm-tab-panel'},
             [TabPanelAttrs.role]: {default: 'unknown'},
             [TabPanelAttrs.dataTitle]: {default: 'unknown'},
             [TabPanelAttrs.ariaLabelledby]: {default: 'unknown'},
@@ -53,7 +53,7 @@ export const getSpec: (opts: YfmTabsSpecsOptions) => Record<TabsNode, NodeSpec>
     },
 
     [TabsNode.Tabs]: {
-        attrs: {[TabsAttrs.class]: {default: 'unknown'}},
+        attrs: {[TabsAttrs.class]: {default: 'yfm-tabs'}},
         content: 'yfm_tabs_list yfm_tab_panel+',
         group: 'block',
         parseDOM: [{tag: 'div.yfm-tabs'}],
@@ -65,7 +65,7 @@ export const getSpec: (opts: YfmTabsSpecsOptions) => Record<TabsNode, NodeSpec>
 
     [TabsNode.TabsList]: {
         attrs: {
-            [TabsListAttrs.class]: {default: 'unknown'},
+            [TabsListAttrs.class]: {default: 'yfm-tab-list'},
             [TabsListAttrs.role]: {default: 'unknown'},
         },
         content: 'yfm_tab*',

src/extensions/yfm/YfmTabs/actions.ts

@@ -0,0 +1,42 @@
+import {generateID} from '@doc-tools/transform/lib/plugins/utils';
+import type {Command} from 'prosemirror-state';
+import {tabPanelType, tabsListType, tabsType, tabType} from '.';
+import {pType} from '../../base/BaseSchema';
+import {tabActiveClassname, tabPanelActiveClassname} from './const';
+import {TabAttrs, TabPanelAttrs} from './YfmTabsSpecs/const';
+
+export const createYfmTabsCommand: Command = (state, dispatch) => {
+    if (dispatch) {
+        const {schema} = state;
+
+        const tabId = generateID();
+        const panelId = generateID();
+        const yfmTabsList = tabsListType(schema);
+        const yfmTabs = tabsType(schema);
+
+        const yfmTabPanel = tabPanelType(state.schema).create(
+            {
+                [TabPanelAttrs.ariaLabelledby]: tabId,
+                [TabPanelAttrs.id]: panelId,
+                [TabPanelAttrs.class]: tabPanelActiveClassname,
+            },
+            pType(state.schema).createAndFill(),
+        );
+        const yfmTab = tabType(state.schema).create({
+            [TabAttrs.id]: tabId,
+            [TabAttrs.class]: tabActiveClassname,
+            [TabAttrs.ariaControls]: panelId,
+        });
+
+        const tabs = yfmTabs.create(null, [yfmTabsList.create(null, [yfmTab]), yfmTabPanel]);
+
+        dispatch(state.tr.replaceSelectionWith(tabs).scrollIntoView());
+    }
+
+    return true;
+};
+
+export const createYfmTabs = {
+    isEnable: createYfmTabsCommand,
+    run: createYfmTabsCommand,
+};

src/extensions/yfm/YfmTabs/index.ts

@@ -1,4 +1,4 @@
-import type {ExtensionAuto} from '../../../core';
+import type {Action, ExtensionAuto} from '../../../core';
 
 import {
     joinBackwardToOpenTab,
@@ -11,9 +11,12 @@ import {YfmTabsSpecs} from './YfmTabsSpecs';
 import {chainCommands} from 'prosemirror-commands';
 
 import {tabPanelView, tabView} from './views';
+import {createYfmTabs} from './actions';
 
 export {TabsNode, tabType, tabsType, tabsListType, tabPanelType} from './YfmTabsSpecs';
 
+const actionName = 'toYfmTabs';
+
 export const YfmTabs: ExtensionAuto = (builder) => {
     builder.use(YfmTabsSpecs, {
         tabView: () => tabView,
@@ -29,4 +32,14 @@ export const YfmTabs: ExtensionAuto = (builder) => {
         }),
         builder.Priority.High,
     );
+
+    builder.addAction(actionName, () => createYfmTabs);
 };
+
+declare global {
+    namespace YfmEditor {
+        interface Actions {
+            [actionName]: Action;
+        }
+    }
+}