style: update the ui of the slash command menu

2024-06-14 14:31:34 +00:00 · 2023-12-09 17:26:47 +05:30 · 2023-12-09 17:26:47 +05:30 · 842048b2f2
commit 842048b2f2
parent d16a6402cd
5 changed files with 175 additions and 155 deletions
--- a/packages/editor/document-editor/src/ui/extensions/index.tsx
+++ b/packages/editor/document-editor/src/ui/extensions/index.tsx
@ -15,12 +15,13 @@ export const DocumentEditorExtensions = (
    isSubmitting: "submitting" | "submitted" | "saved",
  ) => void,
 ) => {
-  const additonalOptions: ISlashCommandItem[] = [
+  const additionalOptions: ISlashCommandItem[] = [
    {
-      title: "Issue Embed",
-      description: "Embed an issue from the project",
-      searchTerms: ["Issue", "Iss"],
-      icon: <LayersIcon height={"20px"} width={"20px"} />,
+      key: "issue_embed",
+      title: "Issue embed",
+      description: "Embed an issue from the project.",
+      searchTerms: ["issue", "link", "embed"],
+      icon: <LayersIcon className="h-3.5 w-3.5" />,
      command: ({ editor, range }) => {
        editor
          .chain()
@ -35,7 +36,7 @@ export const DocumentEditorExtensions = (
  ];

  return [
-    SlashCommand(uploadFile, setIsSubmitting, additonalOptions),
+    SlashCommand(uploadFile, setIsSubmitting, additionalOptions),
    DragAndDrop,
    Placeholder.configure({
      placeholder: ({ node }) => {
--- a/packages/editor/extensions/package.json
+++ b/packages/editor/extensions/package.json
@ -35,7 +35,7 @@
    "@plane/editor-core": "*",
    "eslint": "8.36.0",
    "eslint-config-next": "13.2.4",
-    "lucide-react": "^0.244.0",
+    "lucide-react": "^0.249.0",
    "tippy.js": "^6.3.7",
    "@tiptap/pm": "^2.1.7"
  },
--- a/packages/editor/extensions/src/extensions/slash-commands.tsx
+++ b/packages/editor/extensions/src/extensions/slash-commands.tsx
@ -10,19 +10,23 @@ import { Editor, Range, Extension } from "@tiptap/core";
 import Suggestion from "@tiptap/suggestion";
 import { ReactRenderer } from "@tiptap/react";
 import tippy from "tippy.js";
-import type { UploadImage, ISlashCommandItem, CommandProps  } from "@plane/editor-types";
+import type {
+  UploadImage,
+  ISlashCommandItem,
+  CommandProps,
+} from "@plane/editor-types";
 import {
+  CaseSensitive,
+  Code2,
  Heading1,
  Heading2,
  Heading3,
+  ImageIcon,
  List,
  ListOrdered,
-  Text,
-  TextQuote,
-  Code,
+  ListTodo,
  MinusSquare,
-  CheckSquare,
-  ImageIcon,
+  Quote,
  Table,
 } from "lucide-react";
 import {
@ -39,6 +43,7 @@ import {
 } from "@plane/editor-core";

 interface CommandItemProps {
+  key: string;
  title: string;
  description: string;
  icon: ReactNode;
@ -83,146 +88,158 @@ const getSuggestionItems =
    setIsSubmitting?: (
      isSubmitting: "submitting" | "submitted" | "saved",
    ) => void,
-    additonalOptions?: Array<ISlashCommandItem>
+    additionalOptions?: Array<ISlashCommandItem>,
  ) =>
-    ({ query }: { query: string }) => {
-      let slashCommands: ISlashCommandItem[] = [
-        {
-          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 }) => {
+    let slashCommands: ISlashCommandItem[] = [
+      {
+        key: "text",
+        title: "Text",
+        description: "Just start typing with plain text.",
+        searchTerms: ["p", "paragraph"],
+        icon: <CaseSensitive className="h-3.5 w-3.5" />,
+        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);
-          },
+      },
+      {
+        key: "heading_1",
+        title: "Heading 1",
+        description: "Big section heading.",
+        searchTerms: ["title", "big", "large"],
+        icon: <Heading1 className="h-3.5 w-3.5" />,
+        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);
-          },
+      },
+      {
+        key: "heading_2",
+        title: "Heading 2",
+        description: "Medium section heading.",
+        searchTerms: ["subtitle", "medium"],
+        icon: <Heading2 className="h-3.5 w-3.5" />,
+        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);
-          },
+      },
+      {
+        key: "heading_3",
+        title: "Heading 3",
+        description: "Small section heading.",
+        searchTerms: ["subtitle", "small"],
+        icon: <Heading3 className="h-3.5 w-3.5" />,
+        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);
-          },
+      },
+      {
+        key: "todo_list",
+        title: "To do",
+        description: "Track tasks with a to-do list.",
+        searchTerms: ["todo", "task", "list", "check", "checkbox"],
+        icon: <ListTodo className="h-3.5 w-3.5" />,
+        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);
-          },
+      },
+      {
+        key: "bullet_list",
+        title: "Bullet list",
+        description: "Create a simple bullet list.",
+        searchTerms: ["unordered", "point"],
+        icon: <List className="h-3.5 w-3.5" />,
+        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) => {
-            // @ts-expect-error I have to move this to the core
-            editor.chain().focus().deleteRange(range).setHorizontalRule().run();
-          },
+      },
+      {
+        key: "numbered_list",
+        title: "Numbered list",
+        description: "Create a list with numbering.",
+        searchTerms: ["ordered"],
+        icon: <ListOrdered className="h-3.5 w-3.5" />,
+        command: ({ editor, range }: CommandProps) => {
+          toggleOrderedList(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);
-          },
+      },
+      {
+        key: "table",
+        title: "Table",
+        description: "Create a table",
+        searchTerms: ["table", "cell", "db", "data", "tabular"],
+        icon: <Table className="h-3.5 w-3.5" />,
+        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);
-          },
+      },
+      {
+        key: "quote_block",
+        title: "Quote",
+        description: "Capture a quote.",
+        searchTerms: ["blockquote"],
+        icon: <Quote className="h-3.5 w-3.5" />,
+        command: ({ editor, range }: CommandProps) =>
+          toggleBlockquote(editor, range),
+      },
+      {
+        key: "code_block",
+        title: "Code",
+        description: "Capture a code snippet.",
+        searchTerms: ["codeblock"],
+        icon: <Code2 className="h-3.5 w-3.5" />,
+        command: ({ editor, range }: CommandProps) =>
+          // @ts-expect-error I have to move this to the core
+          editor.chain().focus().deleteRange(range).toggleCodeBlock().run(),
+      },
+      {
+        key: "image",
+        title: "Image",
+        description: "Upload an image from your computer.",
+        searchTerms: ["photo", "picture", "media"],
+        icon: <ImageIcon className="h-3.5 w-3.5" />,
+        command: ({ editor, range }: CommandProps) => {
+          insertImageCommand(editor, uploadFile, setIsSubmitting, range);
        },
-        {
-          title: "Quote",
-          description: "Capture a quote.",
-          searchTerms: ["blockquote"],
-          icon: <TextQuote size={18} />,
-          command: ({ editor, range }: CommandProps) =>
-            toggleBlockquote(editor, range),
+      },
+      {
+        key: "divider",
+        title: "Divider",
+        description: "Visually divide blocks.",
+        searchTerms: ["line", "divider", "horizontal", "rule", "separate"],
+        icon: <MinusSquare className="h-3.5 w-3.5" />,
+        command: ({ editor, range }: CommandProps) => {
+          // @ts-expect-error I have to move this to the core
+          editor.chain().focus().deleteRange(range).setHorizontalRule().run();
        },
-        {
-          title: "Code",
-          description: "Capture a code snippet.",
-          searchTerms: ["codeblock"],
-          icon: <Code size={18} />,
-          command: ({ editor, range }: CommandProps) =>
-            // @ts-expect-error I have to move this to the core
-            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);
-          },
-        },
-      ]
+      },
+    ];

-      if (additonalOptions) {
-        additonalOptions.map(item => {
-          slashCommands.push(item)
-        })
+    if (additionalOptions) {
+      additionalOptions.map((item) => {
+        slashCommands.push(item);
+      });
+    }
+
+    slashCommands = slashCommands.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;
+    });

-      slashCommands = slashCommands.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;
-      })
-
-      return slashCommands
-    };
+    return slashCommands;
+  };

 export const updateScrollView = (container: HTMLElement, item: HTMLElement) => {
  const containerHeight = container.offsetHeight;
@ -303,27 +320,23 @@ const CommandList = ({
    <div
      id="slash-command"
      ref={commandListContainer}
-      className="z-50 fixed h-auto max-h-[330px] w-72 overflow-y-auto rounded-md border border-custom-border-300 bg-custom-background-100 px-1 py-2 shadow-md transition-all"
+      className="z-50 fixed h-auto max-h-[330px] w-52 overflow-y-auto rounded-md border border-custom-border-300 bg-custom-background-100 px-1 py-2 shadow-md transition-all"
    >
-      {items.map((item: CommandItemProps, index: number) => (
+      {items.map((item, index) => (
        <button
+          key={item.key}
          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`,
+            `w-full flex items-center gap-2 rounded-md px-2.5 py-1.5 text-sm text-custom-text-100 hover:bg-custom-primary-100/5`,
            {
-              "bg-custom-primary-100/5  text-custom-text-100":
-                index === selectedIndex,
+              "bg-custom-primary-100/5": 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">
+          <div className="flex-shrink-0 grid place-items-center">
            {item.icon}
          </div>
-          <div>
-            <p className="font-medium">{item.title}</p>
-            <p className="text-xs text-custom-text-300">{item.description}</p>
-          </div>
+          <p>{item.title}</p>
        </button>
      ))}
    </div>
@ -383,11 +396,11 @@ export const SlashCommand = (
  setIsSubmitting?: (
    isSubmitting: "submitting" | "submitted" | "saved",
  ) => void,
-  additonalOptions?: Array<ISlashCommandItem>,
+  additionalOptions?: Array<ISlashCommandItem>,
 ) =>
  Command.configure({
    suggestion: {
-      items: getSuggestionItems(uploadFile, setIsSubmitting, additonalOptions),
+      items: getSuggestionItems(uploadFile, setIsSubmitting, additionalOptions),
      render: renderItems,
    },
  });
--- a/packages/editor/types/src/types/slash-commands-suggestion.ts
+++ b/packages/editor/types/src/types/slash-commands-suggestion.ts
@ -1,15 +1,16 @@
 import { ReactNode } from "react";
-import { Editor, Range } from "@tiptap/core"
+import { Editor, Range } from "@tiptap/core";

 export type CommandProps = {
  editor: Editor;
  range: Range;
-}
+};

 export type ISlashCommandItem = {
+  key: string;
  title: string;
  description: string;
  searchTerms: string[];
  icon: ReactNode;
  command: ({ editor, range }: CommandProps) => void;
-}
+};
--- a/yarn.lock
+++ b/yarn.lock
@ -6078,6 +6078,11 @@ lucide-react@^0.244.0:
  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.244.0.tgz#9626f44881830280012dad23afda7ddbcffff24b"
  integrity sha512-PeDVbx5PlIRrVvdxiuSxPfBo7sK5qrL3LbvvRoGVNiHYRAkBm/48lKqoioxcmp0bgsyJs9lMw7CdtGFvnMJbVg==

+lucide-react@^0.249.0:
+  version "0.249.0"
+  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.249.0.tgz#6914c70220d9bdd69015d7b2009fb358a716c909"
+  integrity sha512-vBvk6aEz7c/v3moYejn3CbIZ9jtn8aDhtT+N9nao71MycQqZB9QtQ0U0WEnB58856A5boKtSUEkjF9NwkM04gA==
+
 lucide-react@^0.293.0:
  version "0.293.0"
  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.293.0.tgz#02703dbcc56bb38779f4e576cc03be8cc0046fcc"