diff --git a/packages/MdEditor/Editor.tsx b/packages/MdEditor/Editor.tsx index 916d1701..6cfd71a5 100644 --- a/packages/MdEditor/Editor.tsx +++ b/packages/MdEditor/Editor.tsx @@ -56,7 +56,7 @@ const Editor = forwardRef((props: EditorProps, ref: ForwardedRef) => { noHighlight = defaultProps.noHighlight, noImgZoomIn = defaultProps.noImgZoomIn, language = defaultProps.language, - inputBoxWitdh = defaultProps.inputBoxWitdh, + inputBoxWidth = defaultProps.inputBoxWidth, sanitizeMermaid = defaultProps.sanitizeMermaid, transformImgUrl = defaultProps.transformImgUrl, codeFoldable = defaultProps.codeFoldable, @@ -190,8 +190,8 @@ const Editor = forwardRef((props: EditorProps, ref: ForwardedRef) => { theme={props.theme} noImgZoomIn={noImgZoomIn} onDrop={props.onDrop} - inputBoxWitdh={inputBoxWitdh} - onInputBoxWitdhChange={props.onInputBoxWitdhChange} + inputBoxWidth={inputBoxWidth} + onInputBoxWidthChange={props.onInputBoxWidthChange} sanitizeMermaid={sanitizeMermaid} transformImgUrl={transformImgUrl} codeFoldable={codeFoldable} diff --git a/packages/MdEditor/config.ts b/packages/MdEditor/config.ts index 1e2ae1c1..c43f912e 100644 --- a/packages/MdEditor/config.ts +++ b/packages/MdEditor/config.ts @@ -477,7 +477,7 @@ export const defaultProps = { autoDetectCode: false, noHighlight: false, noImgZoomIn: false, - inputBoxWitdh: '50%', + inputBoxWidth: '50%', sanitizeMermaid: (h: string) => Promise.resolve(h), transformImgUrl: (t: string) => t, codeFoldable: true, diff --git a/packages/MdEditor/layouts/Content/hooks/useResize.ts b/packages/MdEditor/layouts/Content/hooks/useResize.ts index b94e1463..f0ee1f32 100644 --- a/packages/MdEditor/layouts/Content/hooks/useResize.ts +++ b/packages/MdEditor/layouts/Content/hooks/useResize.ts @@ -9,11 +9,11 @@ const useResize = ( resizeRef: RefObject ) => { const [inputWrapperStyle, setInputWrapperStyle] = useState({ - width: props.inputBoxWitdh + width: props.inputBoxWidth }); const [resizeOperateStyle, setResizeOperateStyle] = useState({ - left: props.inputBoxWitdh + left: props.inputBoxWidth }); /** @@ -25,7 +25,7 @@ const useResize = ( props.setting.preview || props.setting.htmlPreview ); - const resizedWidth = useRef(props.inputBoxWitdh); + const resizedWidth = useRef(props.inputBoxWidth); useEffect(() => { // 挂载后计算宽度的数值 @@ -60,7 +60,7 @@ const useResize = ( }); resizedWidth.current = ibw; - props.onInputBoxWitdhChange?.(ibw); + props.onInputBoxWidthChange?.(ibw); }; const resizeMousedown = () => { @@ -92,23 +92,23 @@ const useResize = ( }, [contentRef, props, resizeRef]); useEffect(() => { - if (props.inputBoxWitdh) { - resizedWidth.current = props.inputBoxWitdh; + if (props.inputBoxWidth) { + resizedWidth.current = props.inputBoxWidth; setInputWrapperStyle((prevState) => { return { ...prevState, - width: props.inputBoxWitdh + width: props.inputBoxWidth }; }); setResizeOperateStyle((prevState) => { return { ...prevState, - left: props.inputBoxWitdh + left: props.inputBoxWidth }; }); } - }, [props.inputBoxWitdh]); + }, [props.inputBoxWidth]); useEffect(() => { const po = props.setting.previewOnly; diff --git a/packages/MdEditor/layouts/Content/props.ts b/packages/MdEditor/layouts/Content/props.ts index 8da4ee21..f4e0cd7e 100644 --- a/packages/MdEditor/layouts/Content/props.ts +++ b/packages/MdEditor/layouts/Content/props.ts @@ -49,8 +49,8 @@ export type ContentProps = Readonly< * @returns */ onDrop?: (event: DragEvent) => void; - inputBoxWitdh: string; - onInputBoxWitdhChange?: (width: string) => void; + inputBoxWidth: string; + onInputBoxWidthChange?: (width: string) => void; transformImgUrl: (text: string) => string | Promise; } & ContentPreviewProps >; diff --git a/packages/MdEditor/type.ts b/packages/MdEditor/type.ts index 5d33fc34..8f99f4bd 100644 --- a/packages/MdEditor/type.ts +++ b/packages/MdEditor/type.ts @@ -471,11 +471,11 @@ export interface EditorProps extends MdPreviewProps { * * @example '100px'/'50%' */ - inputBoxWitdh?: string; + inputBoxWidth?: string; /** * 输入框宽度变化事件 */ - onInputBoxWitdhChange?: (width: string) => void; + onInputBoxWidthChange?: (width: string) => void; /** * 替换粘贴的图片链接 *