mirror of https://github.com/fantasticit/think.git
tiptap: fix update mind
This commit is contained in:
parent
8e5b348707
commit
5024109572
|
@ -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}>
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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' }} />}
|
||||||
|
|
Loading…
Reference in New Issue