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

tiptap: fix flow style

pull/44/head
fantasticit 2022-05-12 20:50:24 +08:00
parent eef66e2554
commit e1d52607e1
2 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/client/src/components/resizeable/resizeable.tsx
View File

@ -14,6 +14,7 @@ interface IProps {
onChange?: (arg: ISize) => void; onChange?: (arg: ISize) => void;
onChangeEnd?: (arg: ISize) => void; onChangeEnd?: (arg: ISize) => void;
className?: string; className?: string;
style?: React.CSSProperties;
} }
const MIN_WIDTH = 50; const MIN_WIDTH = 50;
@ -42,6 +43,7 @@ export const Resizeable: React.FC<IProps> = ({
className, className,
onChange, onChange,
onChangeEnd, onChangeEnd,
style = {},
children, children,
}) => { }) => {
const $container = useRef<HTMLDivElement>(null); const $container = useRef<HTMLDivElement>(null);
@ -126,7 +128,7 @@ export const Resizeable: React.FC<IProps> = ({
id="js-resizeable-container" id="js-resizeable-container"
className={cls(className, styles.resizable)} className={cls(className, styles.resizable)}
ref={$container} ref={$container}
style={{ width, height }} style={{ ...style, width, height }}
> >
{isEditable && ( {isEditable && (
<> <>

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

@ -10,7 +10,7 @@ import { getEditorContainerDOMSize } from 'tiptap/prose-utils';
import { Flow } from 'tiptap/core/extensions/flow'; import { Flow } from 'tiptap/core/extensions/flow';
import styles from './index.module.scss'; import styles from './index.module.scss';
const INHERIT_SIZE_STYLE = { width: '100%', height: '100%', maxWidth: '100%', overflow: 'hidden', padding: '1rem' }; const INHERIT_SIZE_STYLE = { width: '100%', height: '100%', maxWidth: '100%', overflow: 'hidden' };
const ICON_STYLE = { fontSize: '0.85em' }; const ICON_STYLE = { fontSize: '0.85em' };
export const FlowWrapper = ({ editor, node, updateAttributes }) => { export const FlowWrapper = ({ editor, node, updateAttributes }) => {
@ -100,7 +100,14 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
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
style={{ overflow: 'hidden' }}
isEditable={isEditable}
width={width}
height={height}
maxWidth={maxWidth}
onChangeEnd={onResize}
>
<div <div
className={cls(styles.renderWrap, 'render-wrapper')} className={cls(styles.renderWrap, 'render-wrapper')}
style={{ ...INHERIT_SIZE_STYLE, backgroundColor: bgColorOpacity }} style={{ ...INHERIT_SIZE_STYLE, backgroundColor: bgColorOpacity }}