From ede27b7b178bd3674ce27c7bc76a4f642643bec5 Mon Sep 17 00:00:00 2001 From: Palanikannan1437 <73993394+Palanikannan1437@users.noreply.github.com> Date: Tue, 10 Oct 2023 16:17:26 +0530 Subject: [PATCH] added usage of common dependance for slash commands --- .../editor/core/src/lib/editor-commands.ts | 20 ++++++ .../core/src/ui/menus/menu-items/index.tsx | 32 ++++++++- .../src/ui/extensions/index.tsx | 1 - .../src/ui/extensions/slash-command.tsx | 39 +++-------- .../ui/menus/bubble-menu/node-selector.tsx | 68 +++---------------- 5 files changed, 69 insertions(+), 91 deletions(-) diff --git a/packages/editor/core/src/lib/editor-commands.ts b/packages/editor/core/src/lib/editor-commands.ts index e00146b6d..497a63ca6 100644 --- 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(); diff --git a/packages/editor/core/src/ui/menus/menu-items/index.tsx b/packages/editor/core/src/ui/menus/menu-items/index.tsx index dfef77e59..f31b6601e 100644 --- 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"), diff --git a/packages/editor/rich-text-editor/src/ui/extensions/index.tsx b/packages/editor/rich-text-editor/src/ui/extensions/index.tsx index e70fcc88d..f0f3bed34 100644 --- 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 "../"; diff --git a/packages/editor/rich-text-editor/src/ui/extensions/slash-command.tsx b/packages/editor/rich-text-editor/src/ui/extensions/slash-command.tsx index ff63b6abf..e00585dd8 100644 --- 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: , 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: , 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: , 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: , command: ({ editor, range }: CommandProps) => { - editor.chain().focus().deleteRange(range).toggleTaskList().run(); + toggleTaskList(editor, range) }, }, { @@ -114,7 +114,6 @@ const getSuggestionItems = searchTerms: ["unordered", "point"], icon: , command: ({ editor, range }: CommandProps) => { - // editor.chain().focus().deleteRange(range).toggleBulletList().run(); toggleBulletList(editor, range); }, }, @@ -134,12 +133,6 @@ const getSuggestionItems = icon: , 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: , 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: , 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: , 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) => { diff --git 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 index e1f8ce211..b8b7ffc58 100644 --- 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 = ({ 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() ?? {