From 7a96e125239f82d2ac89dd53db3c336dbd0a981b Mon Sep 17 00:00:00 2001 From: Henit Chobisa Date: Wed, 6 Dec 2023 19:17:47 +0530 Subject: [PATCH] feat: added custom blockquote extension for resolving enter key behaviour (#2997) --- packages/editor/core/package.json | 9 ++++--- .../editor/core/src/ui/extensions/index.tsx | 18 ++++++++----- .../core/src/ui/extensions/quote/index.tsx | 26 +++++++++++++++++++ yarn.lock | 5 ++++ 4 files changed, 47 insertions(+), 11 deletions(-) create mode 100644 packages/editor/core/src/ui/extensions/quote/index.tsx diff --git a/packages/editor/core/package.json b/packages/editor/core/package.json index 83ae6b7a4..63b5c630b 100644 --- a/packages/editor/core/package.json +++ b/packages/editor/core/package.json @@ -28,8 +28,9 @@ "react-dom": "18.2.0" }, "dependencies": { - "@tiptap/core": "^2.1.7", "@plane/editor-types": "*", + "@tiptap/core": "^2.1.7", + "@tiptap/extension-blockquote": "^2.1.13", "@tiptap/extension-code-block-lowlight": "^2.1.12", "@tiptap/extension-color": "^2.1.11", "@tiptap/extension-image": "^2.1.7", @@ -61,12 +62,12 @@ "tiptap-markdown": "^0.8.2" }, "devDependencies": { - "eslint": "^7.32.0", - "postcss": "^8.4.29", - "eslint-config-next": "13.2.4", "@types/node": "18.15.3", "@types/react": "^18.2.39", "@types/react-dom": "18.0.11", + "eslint": "^7.32.0", + "eslint-config-next": "13.2.4", + "postcss": "^8.4.29", "tailwind-config-custom": "*", "tsconfig": "*", "tsup": "^7.2.0", diff --git a/packages/editor/core/src/ui/extensions/index.tsx b/packages/editor/core/src/ui/extensions/index.tsx index 03fd508f7..c911c886a 100644 --- a/packages/editor/core/src/ui/extensions/index.tsx +++ b/packages/editor/core/src/ui/extensions/index.tsx @@ -20,6 +20,7 @@ import { Mentions } from "../mentions"; import { CustomKeymap } from "./keymap"; import { CustomCodeBlock } from "./code"; +import { CustomQuoteExtension } from "./quote"; import { ListKeymap } from "./custom-list-keymap"; import { IMentionSuggestion, @@ -34,7 +35,7 @@ export const CoreEditorExtensions = ( }, deleteFile: DeleteImage, restoreFile: RestoreImage, - cancelUploadImage?: () => any, + cancelUploadImage?: () => any ) => [ StarterKit.configure({ bulletList: { @@ -52,11 +53,11 @@ export const CoreEditorExtensions = ( class: "leading-normal -mb-2", }, }, - blockquote: { - HTMLAttributes: { - class: "border-l-4 border-custom-border-300", - }, - }, + // blockquote: { + // HTMLAttributes: { + // class: "border-l-4 border-custom-border-300", + // }, + // }, code: false, codeBlock: false, horizontalRule: false, @@ -65,6 +66,9 @@ export const CoreEditorExtensions = ( width: 2, }, }), + CustomQuoteExtension.configure({ + HTMLAttributes: { className: "border-l-4 border-custom-border-300" }, + }), CustomKeymap, ListKeymap, TiptapLink.configure({ @@ -108,6 +112,6 @@ export const CoreEditorExtensions = ( Mentions( mentionConfig.mentionSuggestions, mentionConfig.mentionHighlights, - false, + false ), ]; diff --git a/packages/editor/core/src/ui/extensions/quote/index.tsx b/packages/editor/core/src/ui/extensions/quote/index.tsx new file mode 100644 index 000000000..a2c968401 --- /dev/null +++ b/packages/editor/core/src/ui/extensions/quote/index.tsx @@ -0,0 +1,26 @@ +import { isAtStartOfNode } from "@tiptap/core"; +import Blockquote from "@tiptap/extension-blockquote"; + +export const CustomQuoteExtension = Blockquote.extend({ + addKeyboardShortcuts() { + return { + Enter: ({ editor }) => { + const { $from, $to, $head } = this.editor.state.selection; + const parent = $head.node(-1); + + if (!parent) return false; + + if (parent.type.name !== "blockquote") { + return false; + } + if ($from.pos !== $to.pos) return false; + // if ($head.parentOffset < $head.parent.content.size) return false; + + // this.editor.commands.insertContentAt(parent.ne); + this.editor.chain().splitBlock().lift(this.name).run(); + + return true; + }, + }; + }, +}); diff --git a/yarn.lock b/yarn.lock index 4f8f355cd..6ee5eb8ba 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2294,6 +2294,11 @@ resolved "https://registry.yarnpkg.com/@tiptap/extension-blockquote/-/extension-blockquote-2.1.12.tgz#97b43419606acf9bfd93b9f482a1827dcac8c3e9" integrity sha512-Qb3YRlCfugx9pw7VgLTb+jY37OY4aBJeZnqHzx4QThSm13edNYjasokbX0nTwL1Up4NPTcY19JUeHt6fVaVVGg== +"@tiptap/extension-blockquote@^2.1.13": + version "2.1.13" + resolved "https://registry.yarnpkg.com/@tiptap/extension-blockquote/-/extension-blockquote-2.1.13.tgz#abf01e3a00d72434b08be7f3d7e318c7320db486" + integrity sha512-oe6wSQACmODugoP9XH3Ouffjy4BsOBWfTC+dETHNCG6ZED6ShHN3CB9Vr7EwwRgmm2WLaKAjMO1sVumwH+Z1rg== + "@tiptap/extension-bold@^2.1.12": version "2.1.12" resolved "https://registry.yarnpkg.com/@tiptap/extension-bold/-/extension-bold-2.1.12.tgz#5dbf41105fc0fbde8adbff629312187fbebc39b0"