refactor: inputBoxWitdh => inputBoxWidth

imzbf · Nov 11, 2024 · 4975782 · 4975782
1 parent cc56d2a
commit 4975782
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 17 deletions.
diff --git a/packages/MdEditor/Editor.tsx b/packages/MdEditor/Editor.tsx
@@ -56,7 +56,7 @@ const Editor = forwardRef((props: EditorProps, ref: ForwardedRef<unknown>) => {
     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<unknown>) => {
           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
@@ -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
@@ -9,11 +9,11 @@ const useResize = (
   resizeRef: RefObject<HTMLDivElement>
 ) => {
   const [inputWrapperStyle, setInputWrapperStyle] = useState<CSSProperties>({
-    width: props.inputBoxWitdh
+    width: props.inputBoxWidth
   });
 
   const [resizeOperateStyle, setResizeOperateStyle] = useState<CSSProperties>({
-    left: props.inputBoxWitdh
+    left: props.inputBoxWidth
   });
 
   /**
@@ -25,7 +25,7 @@ const useResize = (
     props.setting.preview || props.setting.htmlPreview
   );
 
-  const resizedWidth = useRef<string | number | undefined>(props.inputBoxWitdh);
+  const resizedWidth = useRef<string | number | undefined>(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
@@ -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<string>;
   } & ContentPreviewProps
 >;
diff --git 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;
   /**
    * 替换粘贴的图片链接
    *