fix: component might flicker when switching preview states

imzbf · Sep 3, 2024 · 4ce53dc · 4ce53dc
1 parent 3919cc3
commit 4ce53dc
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 28 deletions.
diff --git a/packages/MdEditor/layouts/Content/composition/useResize.ts b/packages/MdEditor/layouts/Content/composition/useResize.ts
@@ -1,4 +1,4 @@
-import { Ref, onBeforeUnmount, reactive, toRef, watch } from 'vue';
+import { Ref, onBeforeUnmount, reactive, ref, toRef, watch } from 'vue';
 import { MinInputBoxWidth } from '~/config';
 
 import { ContentProps } from '../props';
@@ -21,6 +21,13 @@ const useResize = (
     display: 'initial'
   });
 
+  /**
+   * 是否展示预览模块
+   *
+   * 解决问题：编辑区域和预览区域切换出现的时机不对，导致预览区域后，编辑区域的宽度才调整，出现闪缩。
+   */
+  const showPreviewWrapper = ref(props.setting.preview || props.setting.htmlPreview);
+
   const resizeMousemove = (e: MouseEvent) => {
     // 挂载后计算宽度的数值
     const maxWidth = contentRef.value?.offsetWidth || 0;
@@ -89,20 +96,23 @@ const useResize = (
       if (props.setting.previewOnly) {
         inputWrapperStyle.width = '0%';
         resizeOperateStyle.display = 'none';
+        showPreviewWrapper.value = true;
       } else if (!props.setting.htmlPreview && !props.setting.preview) {
         inputWrapperStyle.width = '100%';
         resizeOperateStyle.display = 'none';
+        showPreviewWrapper.value = false;
       } else {
         inputWrapperStyle.width = state.resizedWidth;
         resizeOperateStyle.display = 'initial';
+        showPreviewWrapper.value = true;
       }
     },
     {
       immediate: true
     }
   );
 
-  return { inputWrapperStyle, resizeOperateStyle };
+  return { inputWrapperStyle, resizeOperateStyle, showPreviewWrapper };
 };
 
 export default useResize;
diff --git a/packages/MdEditor/layouts/Content/index.tsx b/packages/MdEditor/layouts/Content/index.tsx
@@ -18,7 +18,7 @@ export default defineComponent({
 
     // 输入框
     const { inputWrapperRef, codeMirrorUt, resetHistory } = useCodeMirror(props);
-    const { inputWrapperStyle, resizeOperateStyle } = useResize(
+    const { inputWrapperStyle, resizeOperateStyle, showPreviewWrapper } = useResize(
       props,
       contentRef,
       resizeRef
@@ -42,45 +42,44 @@ export default defineComponent({
     return () => {
       return (
         <div
-          class={`${prefix}-content${
-            props.setting.htmlPreview || props.setting.preview ? ' has-preview' : ''
-          }`}
+          class={`${prefix}-content${showPreviewWrapper.value ? ' has-preview' : ''}`}
           ref={contentRef}
         >
           <div
             class={`${prefix}-input-wrapper`}
             style={inputWrapperStyle}
             ref={inputWrapperRef}
           />
-
+          {/* 拖拽入口需要保持props.setting变化时就挂载 */}
           {(props.setting.htmlPreview || props.setting.preview) && (
             <div
               class={`${prefix}-resize-operate`}
               style={resizeOperateStyle}
               ref={resizeRef}
             />
           )}
-
-          <ContentPreview
-            modelValue={props.modelValue}
-            onChange={props.onChange}
-            setting={props.setting}
-            onHtmlChanged={(html_) => {
-              html.value = html_;
-              props.onHtmlChanged(html_);
-            }}
-            onGetCatalog={props.onGetCatalog}
-            mdHeadingId={props.mdHeadingId}
-            noMermaid={props.noMermaid}
-            sanitize={props.sanitize}
-            noKatex={props.noKatex}
-            formatCopiedText={props.formatCopiedText}
-            noHighlight={props.noHighlight}
-            noImgZoomIn={props.noImgZoomIn}
-            sanitizeMermaid={props.sanitizeMermaid}
-            codeFoldable={props.codeFoldable}
-            autoFoldThreshold={props.autoFoldThreshold}
-          />
+          {showPreviewWrapper.value && (
+            <ContentPreview
+              modelValue={props.modelValue}
+              onChange={props.onChange}
+              setting={props.setting}
+              onHtmlChanged={(html_) => {
+                html.value = html_;
+                props.onHtmlChanged(html_);
+              }}
+              onGetCatalog={props.onGetCatalog}
+              mdHeadingId={props.mdHeadingId}
+              noMermaid={props.noMermaid}
+              sanitize={props.sanitize}
+              noKatex={props.noKatex}
+              formatCopiedText={props.formatCopiedText}
+              noHighlight={props.noHighlight}
+              noImgZoomIn={props.noImgZoomIn}
+              sanitizeMermaid={props.sanitizeMermaid}
+              codeFoldable={props.codeFoldable}
+              autoFoldThreshold={props.autoFoldThreshold}
+            />
+          )}
           {props.catalogVisible && (
             <MdCatalog
               theme={props.theme}