init multi-tab-node

apps/client/src/features/editor/components/slash-menu/menu-items.ts

@@ -389,6 +389,14 @@ const CommandGroups: SlashMenuGroupedItemsType = {
       command: ({ editor, range }: CommandProps) =>
         editor.chain().focus().deleteRange(range).setDetails().run(),
     },
+    {
+      title: "Tabs",
+      description: "Insert a multi-tab content block.",
+      searchTerms: ["tabs", "tabbed", "multi", "panel"],
+      icon: IconSitemap,
+      command: ({ editor, range }: CommandProps) =>
+        editor.chain().focus().deleteRange(range).insertTabs().run(),
+    },
     {
       title: "Callout",
       description: "Insert callout notice.",

apps/client/src/features/editor/components/tabs/tabs-view.tsx

@@ -0,0 +1,140 @@
+import React, {
+  ChangeEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type KeyboardEvent,
+} from 'react';
+import { NodeViewContent, NodeViewWrapper, type NodeViewProps } from '@tiptap/react';
+import { Tabs, TextInput } from '@mantine/core';
+
+export default function TabsView(props: NodeViewProps) {
+  const { node, editor, getPos } = props;
+  const isEditable = editor.isEditable;
+  const allowFocusRef = useRef(false);
+
+  const tabs = useMemo(() => {
+    return Array.from({ length: node.childCount }, (_, index) => {
+      const labelNode = node.child(index)?.child(0);
+      const labelText = labelNode?.textContent;
+      const labelId = node.child(index)?.attrs?.id;
+
+      return {
+        label: labelText ?? '',
+        id: labelId ?? index,
+      };
+    });
+  }, [node]);
+
+  const activeTab = clampIndex(node.attrs.activeTab);
+  const [activeLabel, setActiveLabel] = useState(tabs[activeTab].label ?? '');
+
+  useEffect(() => {
+    setActiveLabel(tabs[activeTab].label);
+  }, [activeTab, tabs]);
+
+  const handleMouseDown = useCallback((event: React.MouseEvent) => {
+    const previous = document.activeElement as HTMLElement | null;
+    const input = event.currentTarget;
+
+    if (!previous.contains(input)) {
+      allowFocusRef.current = true;
+      return;
+    }
+
+    allowFocusRef.current = true;
+  }, []);
+
+  const handleFocus = useCallback(
+    (event: React.FocusEvent<HTMLInputElement>) => {
+      if (!allowFocusRef.current || !isEditable) {
+        event.preventDefault();
+        event.target.blur();
+      }
+    },
+    [isEditable]
+  );
+
+  const handleBlur = useCallback(() => {
+    allowFocusRef.current = false;
+  }, []);
+
+  const commitLabel = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const label = event.currentTarget.value;
+      setActiveLabel(label);
+
+      if (label === tabs[activeTab].label) return;
+      if (typeof getPos === 'function') {
+        editor.commands.updateTabLabel?.(activeTab, label, getPos());
+      }
+    },
+    [activeTab, editor, getPos, tabs]
+  );
+
+  const handleLabelKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLInputElement>) => {
+      event.stopPropagation();
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        event.currentTarget.blur();
+      }
+    },
+    []
+  );
+
+  return (
+    <NodeViewWrapper data-type='tabs'>
+      <Tabs value={String(activeTab)}>
+        <Tabs.List>
+          {tabs.map(({ label, id }, index) => (
+            <Tabs.Tab
+              key={id}
+              value={index.toString()}
+              onFocus={(event) => event.currentTarget.blur()}
+              onClick={(e) => {
+                e.preventDefault();
+                if (typeof getPos === 'function') {
+                  editor.commands.setActiveTab?.(index, getPos());
+                }
+              }}
+            >
+              <TextInput
+                aria-label='Edit tab label'
+                onMouseDown={handleMouseDown}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
+                onChange={commitLabel}
+                onKeyDown={handleLabelKeyDown}
+                variant='unstyled'
+                size='xs'
+                value={
+                  index === activeTab && allowFocusRef.current ? activeLabel : label
+                }
+                styles={{
+                  input: {
+                    minWidth: 80,
+                    padding: 0,
+                    cursor: 'pointer',
+                  },
+                }}
+              />
+            </Tabs.Tab>
+          ))}
+        </Tabs.List>
+      </Tabs>
+
+      <div className='dm-tabs__content'>
+        <NodeViewContent as='div' />
+      </div>
+    </NodeViewWrapper>
+  );
+}
+
+const clampIndex = (value: unknown, length = Number.MAX_SAFE_INTEGER) => {
+  const parsed = typeof value === 'number' ? value : Number(value ?? 0);
+  if (!Number.isFinite(parsed) || length <= 0) return 0;
+  return Math.max(0, Math.min(Math.trunc(parsed), length - 1));
+};

apps/client/src/features/editor/extensions/extensions.ts

@@ -62,6 +62,10 @@ import {
   TransclusionReference,
   TableView,
   BaseEmbed as BaseEmbedNode,
+  Tabs,
+  Tab,
+  TabLabel,
+  TabPanel,
 } from "@docmost/editor-ext";
 import {
   randomElement,
@@ -90,6 +94,7 @@ import ExcalidrawView from "@/features/editor/components/excalidraw/excalidraw-v
 import EmbedView from "@/features/editor/components/embed/embed-view.tsx";
 import PdfView from "@/features/editor/components/pdf/pdf-view.tsx";
 import SubpagesView from "@/features/editor/components/subpages/subpages-view.tsx";
+import TabsView from "@/features/editor/components/tabs/tabs-view.tsx";
 import TransclusionView from "@/features/editor/components/transclusion/transclusion-view.tsx";
 import TransclusionReferenceView from "@/features/editor/components/transclusion/transclusion-reference-view.tsx";
 import { BaseEmbedView } from "@/features/editor/components/base-embed/base-embed-view.tsx";
@@ -289,6 +294,12 @@ export const mainExtensions = [
   Details,
   DetailsSummary,
   DetailsContent,
+  Tabs.configure({
+    view: TabsView,
+  }),
+  Tab,
+  TabLabel,
+  TabPanel,
   Youtube.configure({
     addPasteHandler: false,
     controls: true,

apps/client/src/features/editor/styles/index.css

@@ -17,4 +17,5 @@
 @import "./indent.css";
 @import "./columns.css";
 @import "./status.css";
+@import "./tabs.css";
 @import "./base-embed.css";

apps/client/src/features/editor/styles/tabs.css

@@ -0,0 +1,7 @@
+.ProseMirror {
+  [data-type="tabs"] {
+    button {
+      outline: none;
+    }
+  }
+}