🐛 fix #294

Vanessa219 · Apr 10, 2020 · 2659c8a · 2659c8a
1 parent a0e6d91
commit 2659c8a
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 40 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -59,6 +59,7 @@
 
 ### v3.1.4 / 2020-04-0x
 
+* [294](https://github.com/Vanessa219/vditor/pull/294) 🐛 计算全屏 typewriterMode 位置 `修复缺陷`
 * [286](https://github.com/Vanessa219/vditor/issues/286) add indent & outdent button `引入特性`
 * [291](https://github.com/Vanessa219/vditor/pull/291) 🎨 改进 Counter `修复缺陷`
 * [285](https://github.com/Vanessa219/vditor/issues/285) shift+tab is not working at lists `修复缺陷`

diff --git a/src/assets/scss/_content.scss b/src/assets/scss/_content.scss
@@ -72,9 +72,8 @@
     }
 
     &:after {
-      $height: var(--editor-bottom);
       content: "";
-      height: var(--editor-bottom-fullscreen, $height);
+      height: var(--editor-bottom);
       display: block;
     }
   }

diff --git a/src/assets/scss/_ir.scss b/src/assets/scss/_ir.scss
@@ -137,9 +137,8 @@
     }
 
     &:after {
-      $height: var(--editor-bottom);
       content: "";
-      height: var(--editor-bottom-fullscreen, $height);
+      height: var(--editor-bottom);
       display: block;
     }
 

diff --git a/src/assets/scss/_wysiwyg.scss b/src/assets/scss/_wysiwyg.scss
@@ -27,9 +27,8 @@
     }
 
     &:after {
-      $height: var(--editor-bottom);
       content: "";
-      height: var(--editor-bottom-fullscreen, $height);
+      height: var(--editor-bottom);
       display: block;
     }
   }

diff --git a/src/ts/toolbar/EditMode.ts b/src/ts/toolbar/EditMode.ts
@@ -4,14 +4,14 @@ import {i18n} from "../i18n";
 import {highlightToolbar as IRHighlightToolbar} from "../ir/highlightToolbar";
 import {processAfterRender} from "../ir/process";
 import {formatRender} from "../sv/formatRender";
-import {setPadding} from "../ui/initUI";
+import {setPadding, setTypewriterPosition} from "../ui/initUI";
 import {getEventName, updateHotkeyTip} from "../util/compatibility";
 import {getMarkdown} from "../util/getMarkdown";
 import {processCodeRender} from "../util/processCode";
 import {highlightToolbar} from "../wysiwyg/highlightToolbar";
 import {renderDomByMd} from "../wysiwyg/renderDomByMd";
 import {MenuItem} from "./MenuItem";
-import {enableToolbar, hidePanel, hideToolbar, removeCurrentToolbar, showToolbar} from "./setToolbar";
+import {disableToolbar, enableToolbar, hidePanel, hideToolbar, removeCurrentToolbar, showToolbar} from "./setToolbar";
 
 export const setEditMode = (vditor: IVditor, type: string, event: Event | string) => {
     let markdownText;
@@ -37,6 +37,7 @@ export const setEditMode = (vditor: IVditor, type: string, event: Event | string
     }
     enableToolbar(vditor.toolbar.elements, Constants.TOOLBARS);
     removeCurrentToolbar(vditor.toolbar.elements, Constants.TOOLBARS);
+    disableToolbar(vditor.toolbar.elements, ["outdent", "indent"]);
 
     if (type === "ir") {
         hideToolbar(vditor.toolbar.elements, ["format", "both", "preview"]);
@@ -106,6 +107,7 @@ export const setEditMode = (vditor: IVditor, type: string, event: Event | string
             vditor.sv.element.focus();
         }
     }
+    setTypewriterPosition(vditor);
 };
 
 export class EditMode extends MenuItem {

diff --git a/src/ts/toolbar/Fullscreen.ts b/src/ts/toolbar/Fullscreen.ts
@@ -1,6 +1,6 @@
 import contractSVG from "../../assets/icons/contract.svg";
 import fullscreenSVG from "../../assets/icons/fullscreen.svg";
-import {setPadding} from "../ui/initUI";
+import {setPadding, setTypewriterPosition} from "../ui/initUI";
 import {getEventName} from "../util/compatibility";
 import {MenuItem} from "./MenuItem";
 
@@ -12,17 +12,10 @@ export class Fullscreen extends MenuItem {
     }
 
     public _bindEvent(vditor: IVditor, menuItem: IMenuItem) {
-        const setTypewriterPosition = () => {
-            // 由于 Firefox padding-bottom bug，只能使用 :after
-            vditor.element.style.setProperty("--editor-bottom-fullscreen", (window.innerHeight / 2 - 18) + "px");
-        };
-
         this.element.children[0].addEventListener(getEventName(), function(event) {
             event.preventDefault();
             if (vditor.element.className.includes("vditor--fullscreen")) {
                 this.innerHTML = menuItem.icon || fullscreenSVG;
-                vditor.element.style.removeProperty("--editor-bottom-fullscreen");
-                window.removeEventListener("resize", setTypewriterPosition);
                 vditor.element.classList.remove("vditor--fullscreen");
                 Object.keys(vditor.toolbar.elements).forEach((key) => {
                     const svgElement = vditor.toolbar.elements[key].firstChild as HTMLElement;
@@ -32,8 +25,6 @@ export class Fullscreen extends MenuItem {
                 });
             } else {
                 this.innerHTML = menuItem.icon || contractSVG;
-                setTypewriterPosition();
-                window.addEventListener("resize", setTypewriterPosition);
                 vditor.element.classList.add("vditor--fullscreen");
                 Object.keys(vditor.toolbar.elements).forEach((key) => {
                     const svgElement = vditor.toolbar.elements[key].firstChild as HTMLElement;
@@ -52,6 +43,8 @@ export class Fullscreen extends MenuItem {
             }
 
             setPadding(vditor);
+
+            setTypewriterPosition(vditor);
         });
     }
 }
diff --git a/src/ts/ui/initUI.ts b/src/ts/ui/initUI.ts
@@ -1,6 +1,5 @@
 import {html2md} from "../sv/html2md";
 import {setEditMode} from "../toolbar/EditMode";
-import {scrollCenter} from "../util/editorCommonEvent";
 import {setTheme} from "./setTheme";
 
 export const initUI = (vditor: IVditor) => {
@@ -73,32 +72,32 @@ export const setPadding = (vditor: IVditor) => {
     }
 };
 
-const afterRender = (vditor: IVditor, contentElement: HTMLElement) => {
-    const setTypewriterPosition = () => {
-        let height: number;
-        if (typeof vditor.options.height !== "number") {
-            height = window.innerHeight;
-        } else {
-            height = vditor.options.height;
-            if (typeof vditor.options.minHeight === "number") {
-                height = Math.max(height, vditor.options.minHeight + vditor.toolbar.element.offsetHeight);
-            }
-            height = Math.min(window.innerHeight, height);
+export const setTypewriterPosition = (vditor: IVditor) => {
+    if (!vditor.options.typewriterMode) {
+        return;
+    }
+    let height: number = window.innerHeight;
+    if (typeof vditor.options.height === "number") {
+        height = vditor.options.height;
+        if (typeof vditor.options.minHeight === "number") {
+            height = Math.max(height, vditor.options.minHeight);
         }
-        // 由于 Firefox padding-bottom bug，只能使用 :after
-        contentElement.style.setProperty("--editor-bottom", (height / 2 - 18) + "px");
-    };
-
-    if (vditor.options.typewriterMode) {
-        setTypewriterPosition();
+        height = Math.min(window.innerHeight, height);
+    }
+    if (vditor.element.classList.contains("vditor--fullscreen")) {
+        height = window.innerHeight;
     }
+    // 由于 Firefox padding-bottom bug，只能使用 :after
+    vditor[vditor.currentMode].element.style.setProperty("--editor-bottom",
+        ((height - vditor.toolbar.element.offsetHeight) / 2) + "px");
+};
+
+const afterRender = (vditor: IVditor, contentElement: HTMLElement) => {
+    setTypewriterPosition(vditor);
 
     window.addEventListener("resize", () => {
         setPadding(vditor);
-        if (vditor.options.typewriterMode) {
-            setTypewriterPosition();
-            scrollCenter(vditor);
-        }
+        setTypewriterPosition(vditor);
     });
 
     // set default value