From dcb0a0cf220e4b48f15df07412676ac649ba7c3e Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Fri, 8 Jul 2022 16:37:03 +0800
Subject: [PATCH] tiptap: dragable paragraph

---
 .../src/tiptap/core/extensions/paragraph.ts    |  7 +++++++
 .../client/src/tiptap/core/styles/base.scss    |  1 -
 .../core/wrappers/paragraph/index.module.scss  |  3 +++
 .../tiptap/core/wrappers/paragraph/index.tsx   | 18 ++++++++++++++++++
 4 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 packages/client/src/tiptap/core/wrappers/paragraph/index.module.scss
 create mode 100644 packages/client/src/tiptap/core/wrappers/paragraph/index.tsx

diff --git a/packages/client/src/tiptap/core/extensions/paragraph.ts b/packages/client/src/tiptap/core/extensions/paragraph.ts
index 28e8613..c13cae2 100644
--- a/packages/client/src/tiptap/core/extensions/paragraph.ts
+++ b/packages/client/src/tiptap/core/extensions/paragraph.ts
@@ -1,5 +1,12 @@
 import TitapParagraph from '@tiptap/extension-paragraph';
+import { ReactNodeViewRenderer } from '@tiptap/react';
+
+import { ParagraphWrapper } from '../wrappers/paragraph';
 
 export const Paragraph = TitapParagraph.extend({
   draggable: true,
+
+  addNodeView() {
+    return ReactNodeViewRenderer(ParagraphWrapper);
+  },
 });
diff --git a/packages/client/src/tiptap/core/styles/base.scss b/packages/client/src/tiptap/core/styles/base.scss
index 8a51a3e..91bd3c9 100644
--- a/packages/client/src/tiptap/core/styles/base.scss
+++ b/packages/client/src/tiptap/core/styles/base.scss
@@ -70,7 +70,6 @@
   }
 
   p {
-    margin-top: 0.75rem;
     margin-bottom: 0;
     font-size: 1em;
     font-weight: normal;
diff --git a/packages/client/src/tiptap/core/wrappers/paragraph/index.module.scss b/packages/client/src/tiptap/core/wrappers/paragraph/index.module.scss
new file mode 100644
index 0000000..98cee0a
--- /dev/null
+++ b/packages/client/src/tiptap/core/wrappers/paragraph/index.module.scss
@@ -0,0 +1,3 @@
+.paragraph {
+  margin-top: 0.75em;
+}
diff --git a/packages/client/src/tiptap/core/wrappers/paragraph/index.tsx b/packages/client/src/tiptap/core/wrappers/paragraph/index.tsx
new file mode 100644
index 0000000..cc706e8
--- /dev/null
+++ b/packages/client/src/tiptap/core/wrappers/paragraph/index.tsx
@@ -0,0 +1,18 @@
+import { NodeViewContent } from '@tiptap/react';
+import { useCallback } from 'react';
+import { DragableWrapper } from 'tiptap/core/wrappers/dragable';
+
+import styles from './index.module.scss';
+
+export const ParagraphWrapper = ({ editor }) => {
+  const prevent = useCallback((e) => {
+    e.prevntDefault();
+    return false;
+  }, []);
+
+  return (
+    <DragableWrapper editor={editor} className={styles.paragraph}>
+      <NodeViewContent draggable="false" onDragStart={prevent} />
+    </DragableWrapper>
+  );
+};