mirror of https://github.com/fantasticit/think.git
tiptap: update flow style
This commit is contained in:
parent
0688362cc0
commit
ce5f88fa0d
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue