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 { UploadImage } from "../types/upload-image";
import { startImageUpload } from "../ui/plugins/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 insertImageCommand = (editor: Editor, uploadFile: UploadImage, setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void, range?: Range) => {
if (range) editor.chain().focus().deleteRange(range).run();
export const insertImage = (editor: Editor, uploadFile: UploadImage, setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void) => {
const input = document.createElement("input"); const input = document.createElement("input");
input.type = "file"; input.type = "file";
input.accept = "image/*"; input.accept = "image/*";
@ -33,4 +60,3 @@ export const insertImage = (editor: Editor, uploadFile: UploadImage, setIsSubmit
}; };
input.click(); 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 { BoldIcon, QuoteIcon, ImageIcon, TableIcon, ListIcon, ListOrderedIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, CodeIcon } from "lucide-react";
import { Editor } from "@tiptap/react"; import { Editor } from "@tiptap/react";
import { UploadImage } from "../../../types/upload-image"; 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 { export interface EditorMenuItem {
name: string; name: string;
@ -69,13 +69,13 @@ export const QuoteItem = (editor: Editor): EditorMenuItem => ({
export const TableItem = (editor: Editor): EditorMenuItem => ({ export const TableItem = (editor: Editor): EditorMenuItem => ({
name: "quote", name: "quote",
isActive: () => editor?.isActive("table"), isActive: () => editor?.isActive("table"),
command: () => insertTable(editor), command: () => insertTableCommand(editor),
icon: TableIcon icon: TableIcon
}) })
export const ImageItem = (editor: Editor, uploadFile: UploadImage, setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void): EditorMenuItem => ({ export const ImageItem = (editor: Editor, uploadFile: UploadImage, setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void): EditorMenuItem => ({
name: "image", name: "image",
isActive: () => editor?.isActive("image"), isActive: () => editor?.isActive("image"),
command: () => insertImage(editor, uploadFile, setIsSubmitting), command: () => insertImageCommand(editor, uploadFile, setIsSubmitting),
icon: ImageIcon, icon: ImageIcon,
}) })

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

@ -24,11 +24,11 @@
"next": "12.3.2", "next": "12.3.2",
"next-themes": "^0.2.1", "next-themes": "^0.2.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "18.2.0" "react-dom": "18.2.0",
"@tiptap/core": "^2.1.11"
}, },
"dependencies": { "dependencies": {
"@plane/editor-core": "*", "@plane/editor-core": "*",
"@tiptap/core": "^2.1.11",
"@tiptap/extension-code-block-lowlight": "^2.1.11", "@tiptap/extension-code-block-lowlight": "^2.1.11",
"@tiptap/extension-horizontal-rule": "^2.1.11", "@tiptap/extension-horizontal-rule": "^2.1.11",
"@tiptap/extension-placeholder": "^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, Table,
} from "lucide-react"; } from "lucide-react";
import { UploadImage } from ".."; import { UploadImage } from "..";
import { cn, startImageUpload } from "@plane/editor-core"; import { cn, insertTableCommand, startImageUpload, toggleBulletList } from "@plane/editor-core";
interface CommandItemProps { interface CommandItemProps {
title: string; title: string;
@ -114,8 +114,8 @@ const getSuggestionItems =
searchTerms: ["unordered", "point"], searchTerms: ["unordered", "point"],
icon: <List size={18} />, icon: <List size={18} />,
command: ({ editor, range }: CommandProps) => { 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"], searchTerms: ["table", "cell", "db", "data", "tabular"],
icon: <Table size={18} />, icon: <Table size={18} />,
command: ({ editor, range }: CommandProps) => { command: ({ editor, range }: CommandProps) => {
editor insertTableCommand(editor, range);
.chain() // editor
.focus() // .chain()
.deleteRange(range) // .focus()
.insertTable({ rows: 3, cols: 3, withHeaderRow: true }) // .deleteRange(range)
.run(); // .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
// .run();
}, },
}, },
{ {