github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

added support for range commands

Browse Source
This commit is contained in:
Palanikannan1437 2023-10-04 01:26:40 +05:30
parent 95439fbbef
commit 18c9e64f48
4 changed files with 54 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
packages/editor/core/src/lib/editor-commands.ts
View File

@ -1,26 +1,53 @@
import { Editor } from "@tiptap/react";
import { Editor, Range } from "@tiptap/core";
import { UploadImage } from "../types/upload-image";
import { startImageUpload } from "../ui/plugins/upload-image";
export const toggleBold = (editor: Editor) => editor?.chain().focus().toggleBold().run();
export const toggleBold = (editor: Editor, range?: Range) => {
if (range) editor.chain().focus().deleteRange(range).toggleBold().run();
else editor.chain().focus().toggleBold().run();
};
export const toggleItalic = (editor: Editor) => editor?.chain().focus().toggleItalic().run();
export const toggleItalic = (editor: Editor, range?: Range) => {
if (range) editor.chain().focus().deleteRange(range).toggleItalic().run();
else editor.chain().focus().toggleItalic().run();
};
export const toggleUnderline = (editor: Editor) => editor?.chain().focus().toggleUnderline().run();
export const toggleUnderline = (editor: Editor, range?: Range) => {
if (range) editor.chain().focus().deleteRange(range).toggleUnderline().run();
else editor.chain().focus().toggleUnderline().run();
};
export const toggleStrike = (editor: Editor) => editor?.chain().focus().toggleStrike().run();
export const toggleCode = (editor: Editor, range?: Range) => {
if (range) editor.chain().focus().deleteRange(range).toggleCode().run();
else editor.chain().focus().toggleCode().run();
};
export const toggleOrderedList = (editor: Editor, range?: Range) => {
if (range) editor.chain().focus().deleteRange(range).toggleOrderedList().run();
else editor.chain().focus().toggleOrderedList().run();
};
export const toggleCode = (editor: Editor) => editor?.chain().focus().toggleCode().run();
export const toggleBulletList = (editor: Editor, range?: Range) => {
if (range) editor.chain().focus().deleteRange(range).toggleBulletList().run();
else editor.chain().focus().toggleBulletList().run();
};
export const toggleBulletList = (editor: Editor) => editor?.chain().focus().toggleBulletList().run();
export const toggleStrike = (editor: Editor, range?: Range) => {
if (range) editor.chain().focus().deleteRange(range).toggleStrike().run();
else editor.chain().focus().toggleStrike().run();
};
export const toggleOrderedList = (editor: Editor) => editor?.chain().focus().toggleOrderedList().run();
export const toggleBlockquote = (editor: Editor, range?: Range) => {
if (range) editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").toggleBlockquote().run();
else editor.chain().focus().toggleNode("paragraph", "paragraph").toggleBlockquote().run();
};
export const toggleBlockquote = (editor: Editor) => editor?.chain().focus().toggleBlockquote().run();
export const insertTableCommand = (editor: Editor, range?: Range) => {
if (range) editor.chain().focus().deleteRange(range).insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
else editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
};
export const insertTable = (editor: Editor) => editor?.chain().focus().insertTable().run();
export const insertImage = (editor: Editor, uploadFile: UploadImage, setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void) => {
export const insertImageCommand = (editor: Editor, uploadFile: UploadImage, setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void, range?: Range) => {
if (range) editor.chain().focus().deleteRange(range).run();
const input = document.createElement("input");
input.type = "file";
input.accept = "image/*";
@ -33,4 +60,3 @@ export const insertImage = (editor: Editor, uploadFile: UploadImage, setIsSubmit
};
input.click();
};

6
packages/editor/core/src/ui/menus/menu-items/index.tsx
View File

@ -1,7 +1,7 @@
import { BoldIcon, QuoteIcon, ImageIcon, TableIcon, ListIcon, ListOrderedIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, CodeIcon } from "lucide-react";
import { Editor } from "@tiptap/react";
import { UploadImage } from "../../../types/upload-image";
import { insertImage, insertTable, toggleBlockquote, toggleBold, toggleBulletList, toggleCode, toggleItalic, toggleOrderedList, toggleStrike } from "../../../lib/editor-commands";
import { insertImageCommand, insertTableCommand, toggleBlockquote, toggleBold, toggleBulletList, toggleCode, toggleItalic, toggleOrderedList, toggleStrike, } from "../../../lib/editor-commands";
export interface EditorMenuItem {
name: string;
@ -69,13 +69,13 @@ export const QuoteItem = (editor: Editor): EditorMenuItem => ({
export const TableItem = (editor: Editor): EditorMenuItem => ({
name: "quote",
isActive: () => editor?.isActive("table"),
command: () => insertTable(editor),
command: () => insertTableCommand(editor),
icon: TableIcon
})
export const ImageItem = (editor: Editor, uploadFile: UploadImage, setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void): EditorMenuItem => ({
name: "image",
isActive: () => editor?.isActive("image"),
command: () => insertImage(editor, uploadFile, setIsSubmitting),
command: () => insertImageCommand(editor, uploadFile, setIsSubmitting),
icon: ImageIcon,
})

4
packages/editor/rich-text-editor/package.json
View File

@ -24,11 +24,11 @@
"next": "12.3.2",
"next-themes": "^0.2.1",
"react": "^18.2.0",
"react-dom": "18.2.0"
"react-dom": "18.2.0",
"@tiptap/core": "^2.1.11"
},
"dependencies": {
"@plane/editor-core": "*",
"@tiptap/core": "^2.1.11",
"@tiptap/extension-code-block-lowlight": "^2.1.11",
"@tiptap/extension-horizontal-rule": "^2.1.11",
"@tiptap/extension-placeholder": "^2.1.11",

19
packages/editor/rich-text-editor/src/ui/extensions/slash-command.tsx
View File

@ -18,7 +18,7 @@ import {
Table,
} from "lucide-react";
import { UploadImage } from "..";
import { cn, startImageUpload } from "@plane/editor-core";
import { cn, insertTableCommand, startImageUpload, toggleBulletList } from "@plane/editor-core";
interface CommandItemProps {
title: string;
@ -114,8 +114,8 @@ const getSuggestionItems =
searchTerms: ["unordered", "point"],
icon: <List size={18} />,
command: ({ editor, range }: CommandProps) => {
// @ts-ignore
editor.chain().focus().deleteRange(range).toggleBulletList().run();
// editor.chain().focus().deleteRange(range).toggleBulletList().run();
toggleBulletList(editor, range);
},
},
{
@ -133,12 +133,13 @@ const getSuggestionItems =
searchTerms: ["table", "cell", "db", "data", "tabular"],
icon: <Table size={18} />,
command: ({ editor, range }: CommandProps) => {
editor
.chain()
.focus()
.deleteRange(range)
.insertTable({ rows: 3, cols: 3, withHeaderRow: true })
.run();
insertTableCommand(editor, range);
// editor
// .chain()
// .focus()
// .deleteRange(range)
// .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
// .run();
},
},
{