tiptap: dragable paragraph

This commit is contained in:
fantasticit 2022-07-08 16:37:03 +08:00
parent 8feab3a0a7
commit dcb0a0cf22
4 changed files with 28 additions and 1 deletions

View File

@ -1,5 +1,12 @@
import TitapParagraph from '@tiptap/extension-paragraph'; import TitapParagraph from '@tiptap/extension-paragraph';
import { ReactNodeViewRenderer } from '@tiptap/react';
import { ParagraphWrapper } from '../wrappers/paragraph';
export const Paragraph = TitapParagraph.extend({ export const Paragraph = TitapParagraph.extend({
draggable: true, draggable: true,
addNodeView() {
return ReactNodeViewRenderer(ParagraphWrapper);
},
}); });

View File

@ -70,7 +70,6 @@
} }
p { p {
margin-top: 0.75rem;
margin-bottom: 0; margin-bottom: 0;
font-size: 1em; font-size: 1em;
font-weight: normal; font-weight: normal;

View File

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

View File

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