tabs menu

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

@@ -0,0 +1,151 @@
+import { BubbleMenu } from "@tiptap/react/menus";
+import React, { useCallback } from "react";
+import { EditorMenuProps, ShouldShowProps } from "../table/types/types";
+import { isEditorReady, isTextSelected } from "@docmost/editor-ext";
+import { Node as PMNode } from "@tiptap/pm/model";
+import { findParentNode, posToDOMRect } from "@tiptap/core";
+import classes from "../common/toolbar-menu.module.css";
+import { ActionIcon, Tooltip } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import {
+  IconChevronLeft,
+  IconChevronRight,
+  IconColumnInsertLeft,
+  IconColumnInsertRight,
+  IconColumnRemove,
+  IconTrashX,
+} from "@tabler/icons-react";
+
+const TabsMenu = React.memo(({ editor }: EditorMenuProps) => {
+  const { t } = useTranslation();
+  const shouldShow = useCallback(
+    ({ state }: ShouldShowProps) => {
+      if (!state) {
+        return false;
+      }
+
+      if (isTextSelected(editor)) return false;
+
+      return editor.isActive("tabs");
+    },
+    [editor]
+  );
+
+  const getReferencedVirtualElement = useCallback(() => {
+    if (!isEditorReady(editor)) return;
+    const { selection } = editor.state;
+    const predicate = (node: PMNode) => node.type.name === "tabs";
+    const parent = findParentNode(predicate)(selection);
+
+    if (parent) {
+      const dom = editor.view.nodeDOM(parent?.pos) as HTMLElement;
+      const domRect = dom.getBoundingClientRect();
+      return {
+        getBoundingClientRect: () => domRect,
+        getClientRects: () => [domRect],
+      };
+    }
+
+    const domRect = posToDOMRect(editor.view, selection.from, selection.to);
+    return {
+      getBoundingClientRect: () => domRect,
+      getClientRects: () => [domRect],
+    };
+  }, [editor]);
+
+  const handleAddTabLeft = useCallback(() => {
+    editor.chain().focus().insertTab("left").run();
+  }, [editor]);
+
+  const handleAddTabRight = useCallback(() => {
+    editor.chain().focus().insertTab("right").run();
+  }, [editor]);
+
+  return (
+    <BubbleMenu
+      style={{ zIndex: 99 }}
+      editor={editor}
+      pluginKey="tabs-menu"
+      resizeDelay={0}
+      getReferencedVirtualElement={getReferencedVirtualElement}
+      shouldShow={shouldShow}
+      options={{
+        placement: "top",
+        offset: false,
+        flip: false,
+      }}
+    >
+      <div className={classes.toolbar}>
+        <Tooltip position="top" label={t("Add left tab")} withinPortal={false}>
+          <ActionIcon
+            onClick={handleAddTabLeft}
+            variant="subtle"
+            size="lg"
+            aria-label={t("Add left tab")}
+          >
+            <IconColumnInsertLeft size={18} />
+          </ActionIcon>
+        </Tooltip>
+        <Tooltip position="top" label={t("Add right tab")} withinPortal={false}>
+          <ActionIcon
+            onClick={handleAddTabRight}
+            variant="subtle"
+            size="lg"
+            aria-label={t("Add right tab")}
+          >
+            <IconColumnInsertRight size={18} />
+          </ActionIcon>
+        </Tooltip>
+        <Tooltip position="top" label={t("Delete tab")} withinPortal={false}>
+          <ActionIcon
+            onClick={handleAddTabLeft}
+            variant="subtle"
+            size="lg"
+            aria-label={t("Delete tab")}
+          >
+            <IconColumnRemove size={18} />
+          </ActionIcon>
+        </Tooltip>
+
+        <div className={classes.divider} />
+
+        <Tooltip position="top" label={t("Move tab left")} withinPortal={false}>
+          <ActionIcon
+            onClick={handleAddTabLeft}
+            variant="subtle"
+            size="lg"
+            aria-label={t("Move tab left")}
+          >
+            <IconChevronLeft size={18} />
+          </ActionIcon>
+        </Tooltip>
+
+        <Tooltip position="top" label={t("Move tab right")} withinPortal={false}>
+          <ActionIcon
+            onClick={handleAddTabLeft}
+            variant="subtle"
+            size="lg"
+            aria-label={t("Move tab right")}
+          >
+            <IconChevronRight size={18} />
+          </ActionIcon>
+        </Tooltip>
+
+        <div className={classes.divider} />
+
+        <Tooltip position="top" label={t("Delete")} withinPortal={false}>
+          <ActionIcon
+            onClick={handleAddTabLeft}
+            variant="subtle"
+            size="lg"
+            aria-label={t("Delete")}
+          >
+            <IconTrashX size={18} />
+          </ActionIcon>
+        </Tooltip>
+      </div>
+    </BubbleMenu>
+  );
+});
+
+export default TabsMenu;

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

@@ -6,9 +6,9 @@ import React, {
   useRef,
   useState,
   type KeyboardEvent,
-} from 'react';
-import { NodeViewContent, NodeViewWrapper, type NodeViewProps } from '@tiptap/react';
-import { Tabs, TextInput } from '@mantine/core';
+} 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;
@@ -22,14 +22,14 @@ export default function TabsView(props: NodeViewProps) {
       const labelId = node.child(index)?.attrs?.id;
 
       return {
-        label: labelText ?? '',
+        label: labelText ?? "",
         id: labelId ?? index,
       };
     });
   }, [node]);
 
   const activeTab = clampIndex(node.attrs.activeTab);
-  const [activeLabel, setActiveLabel] = useState(tabs[activeTab].label ?? '');
+  const [activeLabel, setActiveLabel] = useState(tabs[activeTab].label ?? "");
 
   useEffect(() => {
     setActiveLabel(tabs[activeTab].label);
@@ -67,7 +67,7 @@ export default function TabsView(props: NodeViewProps) {
       setActiveLabel(label);
 
       if (label === tabs[activeTab].label) return;
-      if (typeof getPos === 'function') {
+      if (typeof getPos === "function") {
         editor.commands.updateTabLabel?.(activeTab, label, getPos());
       }
     },
@@ -77,7 +77,7 @@ export default function TabsView(props: NodeViewProps) {
   const handleLabelKeyDown = useCallback(
     (event: KeyboardEvent<HTMLInputElement>) => {
       event.stopPropagation();
-      if (event.key === 'Escape') {
+      if (event.key === "Escape") {
         event.preventDefault();
         event.currentTarget.blur();
       }
@@ -86,7 +86,7 @@ export default function TabsView(props: NodeViewProps) {
   );
 
   return (
-    <NodeViewWrapper data-type='tabs'>
+    <NodeViewWrapper data-type="tabs">
       <Tabs value={String(activeTab)}>
         <Tabs.List style={{ marginBottom: 10 }}>
           {tabs.map(({ label, id }, index) => (
@@ -96,20 +96,20 @@ export default function TabsView(props: NodeViewProps) {
               onFocus={(event) => event.currentTarget.blur()}
               onClick={(e) => {
                 e.preventDefault();
-                if (typeof getPos === 'function') {
+                if (typeof getPos === "function") {
                   editor.commands.setActiveTab?.(index, getPos());
                 }
               }}
             >
               <TextInput
-                aria-label='Edit tab label'
+                aria-label="Edit tab label"
                 onMouseDown={handleMouseDown}
                 onFocus={handleFocus}
                 onBlur={handleBlur}
                 onChange={commitLabel}
                 onKeyDown={handleLabelKeyDown}
-                variant='unstyled'
-                size='xs'
+                variant="unstyled"
+                size="xs"
                 value={
                   index === activeTab && allowFocusRef.current ? activeLabel : label
                 }
@@ -117,7 +117,7 @@ export default function TabsView(props: NodeViewProps) {
                   input: {
                     minWidth: 80,
                     padding: 0,
-                    cursor: 'pointer',
+                    cursor: "pointer",
                   },
                 }}
               />
@@ -126,15 +126,15 @@ export default function TabsView(props: NodeViewProps) {
         </Tabs.List>
       </Tabs>
 
-      <div className='dm-tabs__content'>
-        <NodeViewContent as='div' />
+      <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);
+  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/page-editor.tsx

@@ -82,6 +82,7 @@ import {
   getCollabSocket,
   releaseCollabSocket,
 } from "@/features/editor/collab-socket";
+import TabsMenu from "./components/tabs/tabs-menu";
 
 interface PageEditorProps {
   pageId: string;
@@ -453,6 +454,7 @@ function CollabPageEditor({
             <ExcalidrawMenu editor={editor} />
             <DrawioMenu editor={editor} />
             <ColumnsMenu editor={editor} />
+            <TabsMenu editor={editor} />
           </div>
         )}
         {editor && !editorIsEditable && (editable || canComment) && (