[feat]: Extended Tables Support (#2596)

* migrated table to new project structure * fixed range errors while deleting table nodes with no nodes below and removed console logs * fixed css for rendering table menu * removed old table menu * added support for read only editors as well * text-black removed * added design colors --------- Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
2023-11-05 18:54:00 +05:30 · 2023-11-05 18:54:00 +05:30 · 14ac885e55
commit 14ac885e55
parent f0335751b3
34 changed files with 1970 additions and 365 deletions
--- a/packages/editor/rich-text-editor/src/ui/extensions/slash-command.tsx
+++ b/packages/editor/rich-text-editor/src/ui/extensions/slash-command.tsx
@ -1,4 +1,11 @@
-import { useState, useEffect, useCallback, ReactNode, useRef, useLayoutEffect } from "react";
+import {
+  useState,
+  useEffect,
+  useCallback,
+  ReactNode,
+  useRef,
+  useLayoutEffect,
+} from "react";
 import { Editor, Range, Extension } from "@tiptap/core";
 import Suggestion from "@tiptap/suggestion";
 import { ReactRenderer } from "@tiptap/react";
@ -18,7 +25,18 @@ import {
  Table,
 } from "lucide-react";
 import { UploadImage } from "../";
-import { cn, insertTableCommand, toggleBlockquote, toggleBulletList, toggleOrderedList, toggleTaskList, insertImageCommand, toggleHeadingOne, toggleHeadingTwo, toggleHeadingThree } from "@plane/editor-core";
+import {
+  cn,
+  insertTableCommand,
+  toggleBlockquote,
+  toggleBulletList,
+  toggleOrderedList,
+  toggleTaskList,
+  insertImageCommand,
+  toggleHeadingOne,
+  toggleHeadingTwo,
+  toggleHeadingThree,
+} from "@plane/editor-core";

 interface CommandItemProps {
  title: string;
@ -37,7 +55,15 @@ const Command = Extension.create({
    return {
      suggestion: {
        char: "/",
-        command: ({ editor, range, props }: { editor: Editor; range: Range; props: any }) => {
+        command: ({
+          editor,
+          range,
+          props,
+        }: {
+          editor: Editor;
+          range: Range;
+          props: any;
+        }) => {
          props.command({ editor, range });
        },
      },
@ -59,127 +85,135 @@ const Command = Extension.create({
 const getSuggestionItems =
  (
    uploadFile: UploadImage,
-    setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void
+    setIsSubmitting?: (
+      isSubmitting: "submitting" | "submitted" | "saved",
+    ) => void,
  ) =>
-    ({ query }: { query: string }) =>
-      [
-        {
-          title: "Text",
-          description: "Just start typing with plain text.",
-          searchTerms: ["p", "paragraph"],
-          icon: <Text size={18} />,
-          command: ({ editor, range }: CommandProps) => {
-            editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").run();
-          },
+  ({ query }: { query: string }) =>
+    [
+      {
+        title: "Text",
+        description: "Just start typing with plain text.",
+        searchTerms: ["p", "paragraph"],
+        icon: <Text size={18} />,
+        command: ({ editor, range }: CommandProps) => {
+          editor
+            .chain()
+            .focus()
+            .deleteRange(range)
+            .toggleNode("paragraph", "paragraph")
+            .run();
        },
-        {
-          title: "Heading 1",
-          description: "Big section heading.",
-          searchTerms: ["title", "big", "large"],
-          icon: <Heading1 size={18} />,
-          command: ({ editor, range }: CommandProps) => {
-            toggleHeadingOne(editor, range);
-          },
+      },
+      {
+        title: "Heading 1",
+        description: "Big section heading.",
+        searchTerms: ["title", "big", "large"],
+        icon: <Heading1 size={18} />,
+        command: ({ editor, range }: CommandProps) => {
+          toggleHeadingOne(editor, range);
        },
-        {
-          title: "Heading 2",
-          description: "Medium section heading.",
-          searchTerms: ["subtitle", "medium"],
-          icon: <Heading2 size={18} />,
-          command: ({ editor, range }: CommandProps) => {
-            toggleHeadingTwo(editor, range);
-          },
+      },
+      {
+        title: "Heading 2",
+        description: "Medium section heading.",
+        searchTerms: ["subtitle", "medium"],
+        icon: <Heading2 size={18} />,
+        command: ({ editor, range }: CommandProps) => {
+          toggleHeadingTwo(editor, range);
        },
-        {
-          title: "Heading 3",
-          description: "Small section heading.",
-          searchTerms: ["subtitle", "small"],
-          icon: <Heading3 size={18} />,
-          command: ({ editor, range }: CommandProps) => {
-            toggleHeadingThree(editor, range);
-          },
+      },
+      {
+        title: "Heading 3",
+        description: "Small section heading.",
+        searchTerms: ["subtitle", "small"],
+        icon: <Heading3 size={18} />,
+        command: ({ editor, range }: CommandProps) => {
+          toggleHeadingThree(editor, range);
        },
-        {
-          title: "To-do List",
-          description: "Track tasks with a to-do list.",
-          searchTerms: ["todo", "task", "list", "check", "checkbox"],
-          icon: <CheckSquare size={18} />,
-          command: ({ editor, range }: CommandProps) => {
-            toggleTaskList(editor, range)
-          },
+      },
+      {
+        title: "To-do List",
+        description: "Track tasks with a to-do list.",
+        searchTerms: ["todo", "task", "list", "check", "checkbox"],
+        icon: <CheckSquare size={18} />,
+        command: ({ editor, range }: CommandProps) => {
+          toggleTaskList(editor, range);
        },
-        {
-          title: "Bullet List",
-          description: "Create a simple bullet list.",
-          searchTerms: ["unordered", "point"],
-          icon: <List size={18} />,
-          command: ({ editor, range }: CommandProps) => {
-            toggleBulletList(editor, range);
-          },
+      },
+      {
+        title: "Bullet List",
+        description: "Create a simple bullet list.",
+        searchTerms: ["unordered", "point"],
+        icon: <List size={18} />,
+        command: ({ editor, range }: CommandProps) => {
+          toggleBulletList(editor, range);
        },
-        {
-          title: "Divider",
-          description: "Visually divide blocks",
-          searchTerms: ["line", "divider", "horizontal", "rule", "separate"],
-          icon: <MinusSquare size={18} />,
-          command: ({ editor, range }: CommandProps) => {
-            editor.chain().focus().deleteRange(range).setHorizontalRule().run();
-          },
+      },
+      {
+        title: "Divider",
+        description: "Visually divide blocks",
+        searchTerms: ["line", "divider", "horizontal", "rule", "separate"],
+        icon: <MinusSquare size={18} />,
+        command: ({ editor, range }: CommandProps) => {
+          editor.chain().focus().deleteRange(range).setHorizontalRule().run();
        },
-        {
-          title: "Table",
-          description: "Create a Table",
-          searchTerms: ["table", "cell", "db", "data", "tabular"],
-          icon: <Table size={18} />,
-          command: ({ editor, range }: CommandProps) => {
-            insertTableCommand(editor, range);
-          },
+      },
+      {
+        title: "Table",
+        description: "Create a Table",
+        searchTerms: ["table", "cell", "db", "data", "tabular"],
+        icon: <Table size={18} />,
+        command: ({ editor, range }: CommandProps) => {
+          insertTableCommand(editor, range);
        },
-        {
-          title: "Numbered List",
-          description: "Create a list with numbering.",
-          searchTerms: ["ordered"],
-          icon: <ListOrdered size={18} />,
-          command: ({ editor, range }: CommandProps) => {
-            toggleOrderedList(editor, range)
-          },
+      },
+      {
+        title: "Numbered List",
+        description: "Create a list with numbering.",
+        searchTerms: ["ordered"],
+        icon: <ListOrdered size={18} />,
+        command: ({ editor, range }: CommandProps) => {
+          toggleOrderedList(editor, range);
        },
-        {
-          title: "Quote",
-          description: "Capture a quote.",
-          searchTerms: ["blockquote"],
-          icon: <TextQuote size={18} />,
-          command: ({ editor, range }: CommandProps) =>
-            toggleBlockquote(editor, range)
+      },
+      {
+        title: "Quote",
+        description: "Capture a quote.",
+        searchTerms: ["blockquote"],
+        icon: <TextQuote size={18} />,
+        command: ({ editor, range }: CommandProps) =>
+          toggleBlockquote(editor, range),
+      },
+      {
+        title: "Code",
+        description: "Capture a code snippet.",
+        searchTerms: ["codeblock"],
+        icon: <Code size={18} />,
+        command: ({ editor, range }: CommandProps) =>
+          editor.chain().focus().deleteRange(range).toggleCodeBlock().run(),
+      },
+      {
+        title: "Image",
+        description: "Upload an image from your computer.",
+        searchTerms: ["photo", "picture", "media"],
+        icon: <ImageIcon size={18} />,
+        command: ({ editor, range }: CommandProps) => {
+          insertImageCommand(editor, uploadFile, setIsSubmitting, range);
        },
-        {
-          title: "Code",
-          description: "Capture a code snippet.",
-          searchTerms: ["codeblock"],
-          icon: <Code size={18} />,
-          command: ({ editor, range }: CommandProps) =>
-            editor.chain().focus().deleteRange(range).toggleCodeBlock().run(),
-        },
-        {
-          title: "Image",
-          description: "Upload an image from your computer.",
-          searchTerms: ["photo", "picture", "media"],
-          icon: <ImageIcon size={18} />,
-          command: ({ editor, range }: CommandProps) => {
-            insertImageCommand(editor, uploadFile, setIsSubmitting, range);
-          },
-        },
-      ].filter((item) => {
-        if (typeof query === "string" && query.length > 0) {
-          const search = query.toLowerCase();
-          return (
-            item.title.toLowerCase().includes(search) ||
-            item.description.toLowerCase().includes(search) ||
-            (item.searchTerms && item.searchTerms.some((term: string) => term.includes(search)))
-          );
-        }
-        return true;
-      });
+      },
+    ].filter((item) => {
+      if (typeof query === "string" && query.length > 0) {
+        const search = query.toLowerCase();
+        return (
+          item.title.toLowerCase().includes(search) ||
+          item.description.toLowerCase().includes(search) ||
+          (item.searchTerms &&
+            item.searchTerms.some((term: string) => term.includes(search)))
+        );
+      }
+      return true;
+    });

 export const updateScrollView = (container: HTMLElement, item: HTMLElement) => {
  const containerHeight = container.offsetHeight;
@ -213,7 +247,7 @@ const CommandList = ({
        command(item);
      }
    },
-    [command, items]
+    [command, items],
  );

  useEffect(() => {
@ -266,11 +300,17 @@ const CommandList = ({
        <button
          className={cn(
            `flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm text-custom-text-200 hover:bg-custom-primary-100/5 hover:text-custom-text-100`,
-            { "bg-custom-primary-100/5  text-custom-text-100": index === selectedIndex }
+            {
+              "bg-custom-primary-100/5  text-custom-text-100":
+                index === selectedIndex,
+            },
          )}
          key={index}
          onClick={() => selectItem(index)}
        >
+          <div className="flex h-10 w-10 items-center justify-center rounded-md border border-custom-border-300 bg-custom-background-100">
+            {item.icon}
+          </div>
          <div>
            <p className="font-medium">{item.title}</p>
            <p className="text-xs text-custom-text-300">{item.description}</p>
@ -331,7 +371,9 @@ const renderItems = () => {

 export const SlashCommand = (
  uploadFile: UploadImage,
-  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void,
 ) =>
  Command.configure({
    suggestion: {
--- a/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/index.tsx
+++ b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/index.tsx
@ -1,10 +1,18 @@
-import { BubbleMenu, BubbleMenuProps } from "@tiptap/react";
-import { FC, useState } from "react";
+import { BubbleMenu, BubbleMenuProps, isNodeSelection } from "@tiptap/react";
+import { FC, useEffect, useState } from "react";
 import { BoldIcon } from "lucide-react";

 import { NodeSelector } from "./node-selector";
 import { LinkSelector } from "./link-selector";
-import { BoldItem, cn, CodeItem, ItalicItem, StrikeThroughItem, UnderLineItem } from "@plane/editor-core";
+import {
+  BoldItem,
+  cn,
+  CodeItem,
+  isCellSelection,
+  ItalicItem,
+  StrikeThroughItem,
+  UnderLineItem,
+} from "@plane/editor-core";

 export interface BubbleMenuItem {
  name: string;
@ -26,14 +34,35 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {

  const bubbleMenuProps: EditorBubbleMenuProps = {
    ...props,
-    shouldShow: ({ editor }) => {
-      if (!editor.isEditable) {
+    shouldShow: ({ view, state, editor }) => {
+      const { selection } = state;
+
+      const { empty } = selection;
+      const hasEditorFocus = view.hasFocus();
+
+      // if (typeof window !== "undefined") {
+      //   const selection: any = window?.getSelection();
+      //   if (selection.rangeCount !== 0) {
+      //     const range = selection.getRangeAt(0);
+      //     if (findTableAncestor(range.startContainer)) {
+      //       console.log("table");
+      //       return false;
+      //     }
+      //   }
+      // }
+
+      if (
+        !hasEditorFocus ||
+        empty ||
+        !editor.isEditable ||
+        editor.isActive("image") ||
+        isNodeSelection(selection) ||
+        isCellSelection(selection) ||
+        isSelecting
+      ) {
        return false;
      }
-      if (editor.isActive("image")) {
-        return false;
-      }
-      return editor.view.state.selection.content().size > 0;
+      return true;
    },
    tippyOptions: {
      moveTransition: "transform 0.15s ease-out",
@ -47,50 +76,83 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
  const [isNodeSelectorOpen, setIsNodeSelectorOpen] = useState(false);
  const [isLinkSelectorOpen, setIsLinkSelectorOpen] = useState(false);

+  const [isSelecting, setIsSelecting] = useState(false);
+  useEffect(() => {
+    function handleMouseDown() {
+      function handleMouseMove() {
+        if (!props.editor.state.selection.empty) {
+          setIsSelecting(true);
+          document.removeEventListener("mousemove", handleMouseMove);
+        }
+      }
+
+      function handleMouseUp() {
+        setIsSelecting(false);
+
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      }
+
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    }
+
+    document.addEventListener("mousedown", handleMouseDown);
+
+    return () => {
+      document.removeEventListener("mousedown", handleMouseDown);
+    };
+  }, []);
+
  return (
    <BubbleMenu
      {...bubbleMenuProps}
      className="flex w-fit divide-x divide-custom-border-300 rounded border border-custom-border-300 bg-custom-background-100 shadow-xl"
    >
-      {!props.editor.isActive("table") && (
-        <NodeSelector
-          editor={props.editor!}
-          isOpen={isNodeSelectorOpen}
-          setIsOpen={() => {
-            setIsNodeSelectorOpen(!isNodeSelectorOpen);
-            setIsLinkSelectorOpen(false);
-          }}
-        />
-      )}
-      <LinkSelector
-        editor={props.editor!!}
-        isOpen={isLinkSelectorOpen}
-        setIsOpen={() => {
-          setIsLinkSelectorOpen(!isLinkSelectorOpen);
-          setIsNodeSelectorOpen(false);
-        }}
-      />
-      <div className="flex">
-        {items.map((item, index) => (
-          <button
-            key={index}
-            type="button"
-            onClick={item.command}
-            className={cn(
-              "p-2 text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5 transition-colors",
-              {
-                "text-custom-text-100 bg-custom-primary-100/5": item.isActive(),
-              }
-            )}
-          >
-            <item.icon
-              className={cn("h-4 w-4", {
-                "text-custom-text-100": item.isActive(),
-              })}
+      {isSelecting ? null : (
+        <>
+          {!props.editor.isActive("table") && (
+            <NodeSelector
+              editor={props.editor!}
+              isOpen={isNodeSelectorOpen}
+              setIsOpen={() => {
+                setIsNodeSelectorOpen(!isNodeSelectorOpen);
+                setIsLinkSelectorOpen(false);
+              }}
            />
-          </button>
-        ))}
-      </div>
+          )}
+          <LinkSelector
+            editor={props.editor!!}
+            isOpen={isLinkSelectorOpen}
+            setIsOpen={() => {
+              setIsLinkSelectorOpen(!isLinkSelectorOpen);
+              setIsNodeSelectorOpen(false);
+            }}
+          />
+          <div className="flex">
+            {items.map((item, index) => (
+              <button
+                key={index}
+                type="button"
+                onClick={item.command}
+                className={cn(
+                  "p-2 text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5 transition-colors",
+                  {
+                    "text-custom-text-100 bg-custom-primary-100/5":
+                      item.isActive(),
+                  },
+                )}
+              >
+                <item.icon
+                  className={cn("h-4 w-4", {
+                    "text-custom-text-100": item.isActive(),
+                  })}
+                />
+              </button>
+            ))}
+          </div>
+        </>
+      )}
    </BubbleMenu>
  );
 };