tiptap: fix update mind

This commit is contained in:
fantasticit 2022-05-01 14:30:35 +08:00
parent 8e5b348707
commit 5024109572
3 changed files with 43 additions and 2 deletions

View File

@ -1,6 +1,7 @@
import { NodeViewWrapper } from '@tiptap/react'; import { NodeViewWrapper } from '@tiptap/react';
import cls from 'classnames'; import cls from 'classnames';
import clone from 'clone'; import clone from 'clone';
import deepEqual from 'deep-equal';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Spin, Typography } from '@douyinfe/semi-ui'; import { Spin, Typography } from '@douyinfe/semi-ui';
import { Resizeable } from 'components/resizeable'; import { Resizeable } from 'components/resizeable';
@ -80,6 +81,17 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
let mind = null; let mind = null;
let isEnter = false;
const onMouseEnter = () => {
isEnter = true;
};
const onMouseLeave = () => {
isEnter = false;
};
$container.current.addEventListener('onmouseenter', onMouseEnter);
$container.current.addEventListener('onMouseLeave', onMouseLeave);
try { try {
mind = new window.MindElixir({ mind = new window.MindElixir({
el: `#${containerId.current}`, el: `#${containerId.current}`,
@ -93,7 +105,7 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
draggable: false, // TODO: 需要修复 draggable: false, // TODO: 需要修复
locale: 'zh_CN', locale: 'zh_CN',
}); });
mind.shouldPreventDefault = () => editor.isActive('mind'); mind.shouldPreventDefault = () => isEnter && editor.isActive('mind');
mind.init(); mind.init();
mind.bus.addListener('operation', onChange); mind.bus.addListener('operation', onChange);
$mind.current = mind; $mind.current = mind;
@ -103,12 +115,26 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
} }
return () => { return () => {
if ($container.current) {
$container.current.removeEventListener('onmouseenter', onMouseEnter);
$container.current.removeEventListener('onMouseLeave', onMouseLeave);
}
if (mind) { if (mind) {
mind.destroy(); mind.destroy();
} }
}; };
}, [loading, editor, updateAttributes]); }, [loading, editor, updateAttributes]);
useEffect(() => {
const mind = $mind.current;
if (!mind) return;
const newData = clone(data);
if (!deepEqual(newData, mind.getAllData())) {
mind.update(newData);
}
}, [data]);
return ( return (
<NodeViewWrapper className={cls(styles.wrap, isActive && styles.isActive)}> <NodeViewWrapper className={cls(styles.wrap, isActive && styles.isActive)}>
<Resizeable isEditable={isEditable} width={width} height={height} maxWidth={maxWidth} onChangeEnd={onResize}> <Resizeable isEditable={isEditable} width={width} height={height} maxWidth={maxWidth} onChangeEnd={onResize}>

View File

@ -403,6 +403,17 @@ MindElixir.prototype = {
if (!this.overflowHidden) initMouseEvent(this); if (!this.overflowHidden) initMouseEvent(this);
}, },
update(data) {
const { linkData, nodeData } = data || MindElixir.new('新文档');
if (linkData) {
this.linkData = linkData;
}
if (nodeData) {
this.nodeData = nodeData;
}
this.refresh();
},
destroy: function () { destroy: function () {
this.bus.destroy(); this.bus.destroy();
this.mindElixirBox.removeChild(this.container); this.mindElixirBox.removeChild(this.container);

View File

@ -1,5 +1,5 @@
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { Button, Space } from '@douyinfe/semi-ui'; import { Button, Space, Toast } from '@douyinfe/semi-ui';
import { import {
IconMindLeft, IconMindLeft,
IconMindRight, IconMindRight,
@ -19,6 +19,10 @@ function Operation({ mind }) {
theme="borderless" theme="borderless"
size="small" size="small"
onClick={() => { onClick={() => {
if (!mind.container.requestFullscreen) {
Toast.error('当前浏览器不支持全屏');
return;
}
mind.container.requestFullscreen(); mind.container.requestFullscreen();
}} }}
icon={<IconMindFull style={{ fontSize: '0.85em' }} />} icon={<IconMindFull style={{ fontSize: '0.85em' }} />}