added usage of common dependance for slash commands

2023-10-10 16:17:26 +05:30 · 2023-10-10 16:17:26 +05:30 · ede27b7b17
commit ede27b7b17
parent d9c3407eed
5 changed files with 69 additions and 91 deletions
--- a/packages/editor/core/src/lib/editor-commands.ts
+++ b/packages/editor/core/src/lib/editor-commands.ts
@ -2,6 +2,21 @@ import { Editor, Range } from "@tiptap/core";
 import { UploadImage } from "../types/upload-image";
 import { startImageUpload } from "../ui/plugins/upload-image";

+export const toggleHeadingOne = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).setNode("heading", { level: 1 }).run();
+  else editor.chain().focus().toggleHeading({ level: 1 }).run()
+};
+
+export const toggleHeadingTwo = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).setNode("heading", { level: 2 }).run();
+  else editor.chain().focus().toggleHeading({ level: 2 }).run()
+};
+
+export const toggleHeadingThree = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).setNode("heading", { level: 3 }).run();
+  else editor.chain().focus().toggleHeading({ level: 3 }).run()
+};
+
 export const toggleBold = (editor: Editor, range?: Range) => {
  if (range) editor.chain().focus().deleteRange(range).toggleBold().run();
  else editor.chain().focus().toggleBold().run();
@ -31,6 +46,11 @@ export const toggleBulletList = (editor: Editor, range?: Range) => {
  else editor.chain().focus().toggleBulletList().run();
 };

+export const toggleTaskList = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).toggleTaskList().run();
+  else editor.chain().focus().toggleTaskList().run()
+};
+
 export const toggleStrike = (editor: Editor, range?: Range) => {
  if (range) editor.chain().focus().deleteRange(range).toggleStrike().run();
  else editor.chain().focus().toggleStrike().run();
--- a/packages/editor/core/src/ui/menus/menu-items/index.tsx
+++ b/packages/editor/core/src/ui/menus/menu-items/index.tsx
@ -1,7 +1,7 @@
-import { BoldIcon, QuoteIcon, ImageIcon, TableIcon, ListIcon, ListOrderedIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, CodeIcon } from "lucide-react";
+import { BoldIcon, Heading1, CheckSquare, Heading2, Heading3, QuoteIcon, ImageIcon, TableIcon, ListIcon, ListOrderedIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, CodeIcon } from "lucide-react";
 import { Editor } from "@tiptap/react";
 import { UploadImage } from "../../../types/upload-image";
-import { insertImageCommand, insertTableCommand, toggleBlockquote, toggleBold, toggleBulletList, toggleCode, toggleItalic, toggleOrderedList, toggleStrike, toggleUnderline, } from "../../../lib/editor-commands";
+import { insertImageCommand, insertTableCommand, toggleBlockquote, toggleBold, toggleBulletList, toggleCode, toggleHeadingOne, toggleHeadingThree, toggleHeadingTwo, toggleItalic, toggleOrderedList, toggleStrike, toggleTaskList, toggleUnderline, } from "../../../lib/editor-commands";

 export interface EditorMenuItem {
  name: string;
@ -10,6 +10,27 @@ export interface EditorMenuItem {
  icon: typeof BoldIcon;
 }

+export const HeadingOneItem = (editor: Editor): EditorMenuItem => ({
+  name: "H1",
+  isActive: () => editor.isActive("heading", { level: 1 }),
+  command: () => toggleHeadingOne(editor),
+  icon: Heading1,
+})
+
+export const HeadingTwoItem = (editor: Editor): EditorMenuItem => ({
+  name: "H2",
+  isActive: () => editor.isActive("heading", { level: 2 }),
+  command: () => toggleHeadingTwo(editor),
+  icon: Heading2,
+})
+
+export const HeadingThreeItem = (editor: Editor): EditorMenuItem => ({
+  name: "H3",
+  isActive: () => editor.isActive("heading", { level: 3 }),
+  command: () => toggleHeadingThree(editor),
+  icon: Heading3,
+})
+
 export const BoldItem = (editor: Editor): EditorMenuItem => ({
  name: "bold",
  isActive: () => editor?.isActive("bold"),
@ -52,6 +73,13 @@ export const BulletListItem = (editor: Editor): EditorMenuItem => ({
  icon: ListIcon,
 })

+export const TodoListItem = (editor: Editor): EditorMenuItem => ({
+  name: "To-do List",
+  isActive: () => editor.isActive("taskItem"),
+  command: () => toggleTaskList(editor),
+  icon: CheckSquare,
+})
+
 export const NumberedListItem = (editor: Editor): EditorMenuItem => ({
  name: "ordered-list",
  isActive: () => editor?.isActive("orderedList"),
--- a/packages/editor/rich-text-editor/src/ui/extensions/index.tsx
+++ b/packages/editor/rich-text-editor/src/ui/extensions/index.tsx
@ -6,7 +6,6 @@ import { InputRule } from "@tiptap/core";

 import ts from "highlight.js/lib/languages/typescript";

-// import "highlight.js/styles/github-dark.css";
 import SlashCommand from "./slash-command";
 import { UploadImage } from "../";

--- a/packages/editor/rich-text-editor/src/ui/extensions/slash-command.tsx
+++ b/packages/editor/rich-text-editor/src/ui/extensions/slash-command.tsx
@ -17,8 +17,8 @@ import {
  ImageIcon,
  Table,
 } from "lucide-react";
-import { UploadImage } from "..";
-import { cn, insertTableCommand, startImageUpload, toggleBulletList } from "@plane/editor-core";
+import { UploadImage } from "../";
+import { cn, insertTableCommand, toggleBlockquote, toggleBulletList, toggleOrderedList, toggleTaskList, insertImageCommand, toggleHeadingOne, toggleHeadingTwo, toggleHeadingThree } from "@plane/editor-core";

 interface CommandItemProps {
  title: string;
@ -78,7 +78,7 @@ const getSuggestionItems =
          searchTerms: ["title", "big", "large"],
          icon: <Heading1 size={18} />,
          command: ({ editor, range }: CommandProps) => {
-            editor.chain().focus().deleteRange(range).setNode("heading", { level: 1 }).run();
+            toggleHeadingOne(editor, range);
          },
        },
        {
@ -87,7 +87,7 @@ const getSuggestionItems =
          searchTerms: ["subtitle", "medium"],
          icon: <Heading2 size={18} />,
          command: ({ editor, range }: CommandProps) => {
-            editor.chain().focus().deleteRange(range).setNode("heading", { level: 2 }).run();
+            toggleHeadingTwo(editor, range);
          },
        },
        {
@ -96,7 +96,7 @@ const getSuggestionItems =
          searchTerms: ["subtitle", "small"],
          icon: <Heading3 size={18} />,
          command: ({ editor, range }: CommandProps) => {
-            editor.chain().focus().deleteRange(range).setNode("heading", { level: 3 }).run();
+            toggleHeadingThree(editor, range);
          },
        },
        {
@ -105,7 +105,7 @@ const getSuggestionItems =
          searchTerms: ["todo", "task", "list", "check", "checkbox"],
          icon: <CheckSquare size={18} />,
          command: ({ editor, range }: CommandProps) => {
-            editor.chain().focus().deleteRange(range).toggleTaskList().run();
+            toggleTaskList(editor, range)
          },
        },
        {
@ -114,7 +114,6 @@ const getSuggestionItems =
          searchTerms: ["unordered", "point"],
          icon: <List size={18} />,
          command: ({ editor, range }: CommandProps) => {
-            // editor.chain().focus().deleteRange(range).toggleBulletList().run();
            toggleBulletList(editor, range);
          },
        },
@ -134,12 +133,6 @@ const getSuggestionItems =
          icon: <Table size={18} />,
          command: ({ editor, range }: CommandProps) => {
            insertTableCommand(editor, range);
-            // editor
-            //   .chain()
-            //   .focus()
-            //   .deleteRange(range)
-            //   .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
-            //   .run();
          },
        },
        {
@ -148,8 +141,7 @@ const getSuggestionItems =
          searchTerms: ["ordered"],
          icon: <ListOrdered size={18} />,
          command: ({ editor, range }: CommandProps) => {
-            // @ts-ignore
-            editor.chain().focus().deleteRange(range).toggleOrderedList().run();
+            toggleOrderedList(editor, range)
          },
        },
        {
@ -158,8 +150,7 @@ const getSuggestionItems =
          searchTerms: ["blockquote"],
          icon: <TextQuote size={18} />,
          command: ({ editor, range }: CommandProps) =>
-            // @ts-ignore
-            editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").toggleBlockquote().run(),
+            toggleBlockquote(editor, range)
        },
        {
          title: "Code",
@ -175,19 +166,7 @@ const getSuggestionItems =
          searchTerms: ["photo", "picture", "media"],
          icon: <ImageIcon size={18} />,
          command: ({ editor, range }: CommandProps) => {
-            editor.chain().focus().deleteRange(range).run();
-            // upload image
-            const input = document.createElement("input");
-            input.type = "file";
-            input.accept = "image/*";
-            input.onchange = async () => {
-              if (input.files?.length) {
-                const file = input.files[0];
-                const pos = editor.view.state.selection.from;
-                startImageUpload(file, editor.view, pos, uploadFile, setIsSubmitting);
-              }
-            };
-            input.click();
+            insertImageCommand(editor, uploadFile, setIsSubmitting, range);
          },
        },
      ].filter((item) => {
--- a/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/node-selector.tsx
+++ b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/node-selector.tsx
@ -1,16 +1,9 @@
-import { cn } from "@plane/editor-core";
-import { Editor } from "@tiptap/core";
+import { BulletListItem, cn, CodeItem, HeadingOneItem, HeadingThreeItem, HeadingTwoItem, NumberedListItem, QuoteItem, TodoListItem } from "@plane/editor-core";
+import { Editor } from "@tiptap/react";
 import {
  Check,
  ChevronDown,
-  Heading1,
-  Heading2,
-  Heading3,
-  TextQuote,
-  ListOrdered,
  TextIcon,
-  Code,
-  CheckSquare,
 } from "lucide-react";
 import { Dispatch, FC, SetStateAction } from "react";

@ -33,55 +26,14 @@ export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen
        !editor.isActive("bulletList") &&
        !editor.isActive("orderedList"),
    },
-    {
-      name: "H1",
-      icon: Heading1,
-      command: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
-      isActive: () => editor.isActive("heading", { level: 1 }),
-    },
-    {
-      name: "H2",
-      icon: Heading2,
-      command: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
-      isActive: () => editor.isActive("heading", { level: 2 }),
-    },
-    {
-      name: "H3",
-      icon: Heading3,
-      command: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
-      isActive: () => editor.isActive("heading", { level: 3 }),
-    },
-    {
-      name: "To-do List",
-      icon: CheckSquare,
-      command: () => editor.chain().focus().toggleTaskList().run(),
-      isActive: () => editor.isActive("taskItem"),
-    },
-    {
-      name: "Bullet List",
-      icon: ListOrdered,
-      command: () => editor.chain().focus().toggleBulletList().run(),
-      isActive: () => editor.isActive("bulletList"),
-    },
-    {
-      name: "Numbered List",
-      icon: ListOrdered,
-      command: () => editor.chain().focus().toggleOrderedList().run(),
-      isActive: () => editor.isActive("orderedList"),
-    },
-    {
-      name: "Quote",
-      icon: TextQuote,
-      command: () =>
-        editor.chain().focus().toggleNode("paragraph", "paragraph").toggleBlockquote().run(),
-      isActive: () => editor.isActive("blockquote"),
-    },
-    {
-      name: "Code",
-      icon: Code,
-      command: () => editor.chain().focus().toggleCodeBlock().run(),
-      isActive: () => editor.isActive("codeBlock"),
-    },
+    HeadingOneItem(editor),
+    HeadingTwoItem(editor),
+    HeadingThreeItem(editor),
+    TodoListItem(editor),
+    BulletListItem(editor),
+    NumberedListItem(editor),
+    QuoteItem(editor),
+    CodeItem(editor),
  ];

  const activeItem = items.filter((item) => item.isActive()).pop() ?? {