fantasticit
/
think
mirror of https://github.com/fantasticit/think.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: improve mind menu

pull/25/head
fantasticit 2022-04-03 11:36:21 +08:00
parent 0a6bed7c7d
commit f2ce4b01b3
2 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/client/src/tiptap/wrappers/mind/index.module.scss
View File

@ -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
packages/client/src/tiptap/wrappers/mind/index.tsx
View File

@ -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>
); );
}; };