tiptap: dragable katex

This commit is contained in:
fantasticit 2022-07-08 15:54:43 +08:00
parent 1626e1764a
commit 2452b7fdc3
2 changed files with 8 additions and 8 deletions

View File

@ -23,6 +23,7 @@ export const Katex = Node.create({
group: 'block', group: 'block',
selectable: true, selectable: true,
atom: true, atom: true,
draggable: true,
addOptions() { addOptions() {
return { return {

View File

@ -1,13 +1,12 @@
import { NodeViewWrapper } from '@tiptap/react';
import cls from 'classnames';
import { convertColorToRGBA } from 'helpers/color'; import { convertColorToRGBA } from 'helpers/color';
import { Theme, ThemeEnum } from 'hooks/use-theme'; import { Theme, ThemeEnum } from 'hooks/use-theme';
import katex from 'katex'; import katex from 'katex';
import { useMemo } from 'react'; import { useMemo } from 'react';
import { DragableWrapper } from 'tiptap/core/wrappers/dragable';
import styles from './index.module.scss'; import styles from './index.module.scss';
export const KatexWrapper = ({ node }) => { export const KatexWrapper = ({ node, editor }) => {
const { text } = node.attrs; const { text } = node.attrs;
const { theme } = Theme.useHook(); const { theme } = Theme.useHook();
const backgroundColor = useMemo(() => { const backgroundColor = useMemo(() => {
@ -35,14 +34,14 @@ export const KatexWrapper = ({ node }) => {
); );
return ( return (
<NodeViewWrapper <DragableWrapper
className={cls(styles.wrap, 'render-wrapper')} editor={editor}
className={'render-wrapper'}
style={{ style={{
backgroundColor, backgroundColor,
}} }}
contentEditable={false}
> >
{content} <div className={styles.wrap}>{content}</div>
</NodeViewWrapper> </DragableWrapper>
); );
}; };