mirror of https://github.com/fantasticit/think.git
feat: improve mind menu
This commit is contained in:
parent
0a6bed7c7d
commit
f2ce4b01b3
|
@ -47,7 +47,7 @@
|
||||||
|
|
||||||
.jsmindWrap {
|
.jsmindWrap {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
top: 10px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
z-index: 200;
|
z-index: 200;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
@ -96,7 +96,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&.isActive {
|
||||||
.jsmindWrap {
|
.jsmindWrap {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,6 +5,7 @@ import { Button } from '@douyinfe/semi-ui';
|
||||||
import { IconMinus, IconPlus } from '@douyinfe/semi-icons';
|
import { IconMinus, IconPlus } from '@douyinfe/semi-icons';
|
||||||
import { Resizeable } from 'components/resizeable';
|
import { Resizeable } from 'components/resizeable';
|
||||||
import deepEqual from 'deep-equal';
|
import deepEqual from 'deep-equal';
|
||||||
|
import { Mind } from '../../extensions/mind';
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
import jsMind from './jsmind.jsx';
|
import jsMind from './jsmind.jsx';
|
||||||
import styles from './index.module.scss';
|
import styles from './index.module.scss';
|
||||||
|
@ -12,6 +13,7 @@ import styles from './index.module.scss';
|
||||||
export const MindWrapper = ({ editor, node, updateAttributes }) => {
|
export const MindWrapper = ({ editor, node, updateAttributes }) => {
|
||||||
const $container = useRef();
|
const $container = useRef();
|
||||||
const $mind = useRef<any>();
|
const $mind = useRef<any>();
|
||||||
|
const isMindActive = editor.isActive(Mind.name);
|
||||||
const isEditable = editor.isEditable;
|
const isEditable = editor.isEditable;
|
||||||
const { data, width, height = 100 } = node.attrs;
|
const { data, width, height = 100 } = node.attrs;
|
||||||
|
|
||||||
|
@ -126,7 +128,7 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<NodeViewWrapper className={cls(styles.wrap)}>
|
<NodeViewWrapper className={cls(styles.wrap, isMindActive && styles.isActive)}>
|
||||||
{isEditable ? (
|
{isEditable ? (
|
||||||
<Resizeable width={width} height={height} onChange={onResize}>
|
<Resizeable width={width} height={height} onChange={onResize}>
|
||||||
{content}
|
{content}
|
||||||
|
@ -134,7 +136,6 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
|
||||||
) : (
|
) : (
|
||||||
<div style={{ display: 'inline-block', width, height }}>{content}</div>
|
<div style={{ display: 'inline-block', width, height }}>{content}</div>
|
||||||
)}
|
)}
|
||||||
{/* <NodeViewContent as="div"></NodeViewContent> */}
|
|
||||||
</NodeViewWrapper>
|
</NodeViewWrapper>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue