Added bubble menu for table actions when table node is active

src/components/Editor/CustomExtensions/Table/TableActionMenu.jsx

@@ -0,0 +1,58 @@
+import React, { useCallback } from "react";
+
+import { BubbleMenu } from "@tiptap/react";
+import { Settings } from "neetoicons";
+import { Button, Dropdown } from "neetoui";
+import { sticky } from "tippy.js";
+
+import { getRenderContainer, tableActions } from "./utils";
+
+const { Menu } = Dropdown;
+
+const TableActionMenu = ({ editor }) => {
+  const getReferenceClientRect = useCallback(() => {
+    const renderContainer = getRenderContainer(editor, "table");
+    const rect =
+      renderContainer?.getBoundingClientRect() || new DOMRect(0, 0, 0, 0);
+
+    return rect;
+  }, [editor]);
+
+  const shouldShow = useCallback(() => editor?.isActive("table"), [editor]);
+
+  if (!editor) return null;
+
+  return (
+    <BubbleMenu
+      {...{ editor, shouldShow }}
+      className="neeto-editor-bubble-menu"
+      tippyOptions={{
+        offset: [145, 8],
+        zIndex: 99999,
+        theme: "neeto-editor-bubble-menu",
+        popperOptions: {
+          modifiers: [{ name: "flip", enabled: false }],
+        },
+        getReferenceClientRect,
+        plugins: [sticky],
+        sticky: "popper",
+      }}
+    >
+      <Dropdown
+        buttonStyle="text"
+        icon={Settings}
+        position="auto"
+        strategy="fixed"
+        onClose={() => editor?.commands.focus()}
+      >
+        <Menu className="neeto-editor-bubble-menu__table__options">
+          {tableActions({ editor }).map(({ label, command }) => (
+            <Button key={label} {...{ label }} style="text" onClick={command} />
+          ))}
+        </Menu>
+      </Dropdown>
+    </BubbleMenu>
+  );
+};
+
+export default TableActionMenu;

src/components/Editor/CustomExtensions/Table/utils.js

@@ -0,0 +1,71 @@
+import { t } from "i18next";
+
+export const getRenderContainer = (editor, nodeType) => {
+  const elements = document.querySelectorAll(".has-focus");
+  const elementCount = elements.length;
+  const innermostNode = elements[elementCount - 1];
+  const element = innermostNode;
+
+  if (
+    (element &&
+      element.getAttribute("data-type") &&
+      element.getAttribute("data-type") === nodeType) ||
+    (element && element.classList && element.classList.contains(nodeType))
+  ) {
+    return element;
+  }
+
+  const node = editor?.view.domAtPos(editor?.state?.selection?.from).node;
+  let container = node;
+
+  if (!container.tagName) {
+    container = node.parentElement;
+  }
+  while (
+    container &&
+    !(
+      container.tagName &&
+      container.tagName.toLowerCase() === nodeType.toLowerCase()
+    ) &&
+    !container.classList.contains(nodeType)
+  ) {
+    container = container.parentElement;
+  }
+
+  return container;
+};
+
+export const tableActions = ({ editor }) => [
+  {
+    label: t("neetoEditor.table.insertRow"),
+    command: () => editor.commands.addRowAfter(),
+  },
+  {
+    label: t("neetoEditor.table.insertColumn"),
+    command: () => editor.commands.addColumnAfter(),
+  },
+  {
+    label: t("neetoEditor.table.deleteRow"),
+    command: () => editor.chain().focus().deleteRow().run(),
+  },
+  {
+    label: t("neetoEditor.table.deleteColumn"),
+    command: () => editor.chain().focus().deleteColumn().run(),
+  },
+  {
+    label: t("neetoEditor.table.mergeSplit"),
+    command: () => editor.chain().focus().mergeOrSplit().run(),
+  },
+  {
+    label: t("neetoEditor.table.toggleHeaderRow"),
+    command: () => editor.chain().focus().toggleHeaderRow().run(),
+  },
+  {
+    label: t("neetoEditor.table.toggleHeaderColumn"),
+    command: () => editor.chain().focus().toggleHeaderColumn().run(),
+  },
+  {
+    label: t("neetoEditor.table.delete"),
+    command: () => editor.commands.deleteTable(),
+  },
+];

src/components/Editor/Menu/Bubble/TableOption.jsx

@@ -2,20 +2,15 @@ import React, { useState } from "react";
 
 import { withEventTargetValue } from "neetocommons/utils";
 import { Check, Close } from "neetoicons";
-import { Button, Dropdown } from "neetoui";
+import { Button } from "neetoui";
 import { useTranslation } from "react-i18next";
 
-import { tableActions } from "../Fixed/utils";
-
 const TableOption = ({ editor, handleClose }) => {
   const { t } = useTranslation();
-  const { Menu } = Dropdown;
 
   const [rows, setRows] = useState(3);
   const [columns, setColumns] = useState(3);
 
-  const isActive = editor.isActive("table");
-
   const handleSubmit = () => {
     editor
       .chain()
@@ -29,47 +24,37 @@ const TableOption = ({ editor, handleClose }) => {
 
   return (
     <div className="neeto-editor-bubble-menu__table">
-      {!isActive ? (
-        <>
-          <input
-            autoFocus
-            data-cy="neeto-editor-fixed-menu-table-option-input"
-            min="1"
-            placeholder={t("neetoEditor.placeholders.rows")}
-            type="number"
-            value={rows}
-            onChange={withEventTargetValue(setRows)}
-          />
-          <input
-            data-cy="neeto-editor-bubble-menu-table-option-input"
-            min="1"
-            placeholder={t("neetoEditor.placeholders.columns")}
-            type="number"
-            value={columns}
-            onChange={withEventTargetValue(setColumns)}
-          />
-          <div className="neeto-editor-bubble-menu__table__buttons">
-            <Button
-              data-cy="neeto-editor-bubble-menu-table-option-create-button"
-              icon={Check}
-              style="icon"
-              onClick={handleSubmit}
-            />
-            <Button
-              data-cy="neeto-editor-bubble-menu-table-option-create-button"
-              icon={Close}
-              style="icon"
-              onClick={handleClose}
-            />
-          </div>
-        </>
-      ) : (
-        <Menu className="neeto-editor-bubble-menu__table-options">
-          {tableActions({ editor }).map(({ label, command }) => (
-            <Button key={label} {...{ label }} style="text" onClick={command} />
-          ))}
-        </Menu>
-      )}
+      <input
+        autoFocus
+        data-cy="neeto-editor-fixed-menu-table-option-input"
+        min="1"
+        placeholder={t("neetoEditor.placeholders.rows")}
+        type="number"
+        value={rows}
+        onChange={withEventTargetValue(setRows)}
+      />
+      <input
+        data-cy="neeto-editor-bubble-menu-table-option-input"
+        min="1"
+        placeholder={t("neetoEditor.placeholders.columns")}
+        type="number"
+        value={columns}
+        onChange={withEventTargetValue(setColumns)}
+      />
+      <div className="neeto-editor-bubble-menu__table__buttons">
+        <Button
+          data-cy="neeto-editor-bubble-menu-table-option-create-button"
+          icon={Check}
+          style="secondary"
+          onClick={handleSubmit}
+        />
+        <Button
+          data-cy="neeto-editor-bubble-menu-table-option-create-button"
+          icon={Close}
+          style="secondary"
+          onClick={handleClose}
+        />
+      </div>
     </div>
   );
 };

src/components/Editor/Menu/Fixed/index.jsx

@@ -15,7 +15,6 @@ import MediaUploader from "components/Editor/MediaUploader";
 import EmojiOption from "./EmojiOption";
 import FontSizeOption from "./FontSizeOption";
 import LinkAddPopOver from "./LinkAddPopOver";
-import TableActions from "./TableActions";
 import TableOption from "./TableOption";
 import TextColorOption from "./TextColorOption";
 import {
@@ -147,10 +146,6 @@ const Fixed = ({
         {isFontSizeActive && <div className="vertical-divider" />}
         <div className="neeto-editor-fixed-menu__wrapper__button-group">
           {fontStyleOptions.map(renderOptionButton)}
-          <TableActions
-            {...{ editor }}
-            tooltipContent={tooltips.table || t("neetoEditor.menu.table")}
-          />
         </div>
         {isNotEmpty(fontStyleOptions) && <div className="vertical-divider" />}
         {(isMenuExpanded || not(isMenuCollapsible)) && (

src/components/Editor/Menu/Fixed/utils.jsx

@@ -25,41 +25,6 @@ import { fromPairs, not, assoc } from "ramda";
 
 import { generateFocusProps } from "utils/focusHighlighter";
 
-export const tableActions = ({ editor }) => [
-  {
-    label: t("neetoEditor.table.insertRow"),
-    command: () => editor.commands.addRowAfter(),
-  },
-  {
-    label: t("neetoEditor.table.insertColumn"),
-    command: () => editor.commands.addColumnAfter(),
-  },
-  {
-    label: t("neetoEditor.table.deleteRow"),
-    command: () => editor.chain().focus().deleteRow().run(),
-  },
-  {
-    label: t("neetoEditor.table.deleteColumn"),
-    command: () => editor.chain().focus().deleteColumn().run(),
-  },
-  {
-    label: t("neetoEditor.table.mergeSplit"),
-    command: () => editor.chain().focus().mergeOrSplit().run(),
-  },
-  {
-    label: t("neetoEditor.table.toggleHeaderRow"),
-    command: () => editor.chain().focus().toggleHeaderRow().run(),
-  },
-  {
-    label: t("neetoEditor.table.toggleHeaderColumn"),
-    command: () => editor.chain().focus().toggleHeaderColumn().run(),
-  },
-  {
-    label: t("neetoEditor.table.delete"),
-    command: () => editor.commands.deleteTable(),
-  },
-];
-
 export const createMenuOptions = ({
   tooltips,
   editor,

src/components/Editor/index.jsx

@@ -15,6 +15,7 @@ import { DEFAULT_EDITOR_OPTIONS } from "./constants";
 import CharacterCountWrapper from "./CustomExtensions/CharacterCount";
 import EmbedOption from "./CustomExtensions/Embeds";
 import useCustomExtensions from "./CustomExtensions/hooks/useCustomExtensions";
+import TableActionMenu from "./CustomExtensions/Table/TableActionMenu";
 import LinkPopOver from "./LinkPopOver";
 import MediaUploader from "./MediaUploader";
 import Menu from "./Menu";
@@ -232,6 +233,7 @@ const Editor = (
             />
           )}
           {editor?.isActive("link") && <LinkPopOver {...{ editor }} />}
+          <TableActionMenu {...{ editor }} appendTo={dragDropRef} />
         </CharacterCountWrapper>
       </ErrorWrapper>
     </div>

src/styles/editor/_menu.scss

@@ -312,9 +312,9 @@
       gap: 4px;
     }
 
-    &-options {
+    &__options {
       display: flex;
-      max-height: 100px;
+      max-height: 190px;
       flex-direction: column;
       align-items: center;
       overflow: scroll;