tiptap: dragable paragraph

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

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;

packages/client/src/tiptap/core/wrappers/paragraph/index.module.scss

@@ -0,0 +1,3 @@
+.paragraph {
+  margin-top: 0.75em;
+}

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