feat: added custom blockquote extension for resolving enter key behaviour (#2997)

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",

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
   ),
 ];

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;
+      },
+    };
+  },
+});

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"