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

tiptap: update flow style

This commit is contained in:
fantasticit 2022-05-11 16:32:40 +08:00
parent 0688362cc0
commit ce5f88fa0d
1 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/client/src/tiptap/core/wrappers/flow/index.tsx
View File

@ -9,7 +9,8 @@ import { Flow } from 'tiptap/core/extensions/flow';
import { decode } from './decode'; import { decode } from './decode';
import styles from './index.module.scss'; import styles from './index.module.scss';
const INHERIT_SIZE_STYLE = { width: '100%', height: '100%', maxWidth: '100%' }; const INHERIT_SIZE_STYLE = { width: '100%', height: '100%', maxWidth: '100%', overflow: 'hidden', padding: '1rem' };
const ICON_STYLE = { fontSize: '0.85em' };
export const FlowWrapper = ({ editor, node, updateAttributes }) => { export const FlowWrapper = ({ editor, node, updateAttributes }) => {
const $container = useRef<HTMLDivElement>(); const $container = useRef<HTMLDivElement>();
@ -63,6 +64,7 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
graph.setTooltips(false); graph.setTooltips(false);
graph.setEnabled(false); graph.setEnabled(false);
graph.centerZoom = true; graph.centerZoom = true;
$graph.current = graph; $graph.current = graph;
} }
@ -85,8 +87,8 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
ref={$container} ref={$container}
id={containerId.current} id={containerId.current}
className={cls(styles.renderWrap, 'render-wrapper')} className={cls(styles.renderWrap, 'render-wrapper')}
style={{ ...INHERIT_SIZE_STYLE, overflow: 'hidden' }} style={INHERIT_SIZE_STYLE}
></div> />
<div className={styles.toolbarWrap}> <div className={styles.toolbarWrap}>
<Space spacing={2}> <Space spacing={2}>
<Button <Button
@ -94,7 +96,7 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
theme="borderless" theme="borderless"
size="small" size="small"
onClick={center} onClick={center}
icon={<IconMindCenter style={{ fontSize: '0.85em' }} />} icon={<IconMindCenter style={ICON_STYLE} />}
/> />
<Button <Button
@ -102,7 +104,7 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
theme="borderless" theme="borderless"
size="small" size="small"
onClick={zoomOut} onClick={zoomOut}
icon={<IconZoomOut style={{ fontSize: '0.85em' }} />} icon={<IconZoomOut style={ICON_STYLE} />}
/> />
<Button <Button
@ -110,7 +112,7 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
theme="borderless" theme="borderless"
size="small" size="small"
onClick={zoomIn} onClick={zoomIn}
icon={<IconZoomIn style={{ fontSize: '0.85em' }} />} icon={<IconZoomIn style={ICON_STYLE} />}
/> />
</Space> </Space>
</div> </div>