mirror of https://github.com/fantasticit/think.git
tiptap: dragable paragraph
This commit is contained in:
parent
8feab3a0a7
commit
dcb0a0cf22
|
@ -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);
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -0,0 +1,3 @@
|
||||||
|
.paragraph {
|
||||||
|
margin-top: 0.75em;
|
||||||
|
}
|
|
@ -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>
|
||||||
|
);
|
||||||
|
};
|
Loading…
Reference in New Issue