🐛 typewriterMode 中心位置

Vanessa219 · Apr 9, 2020 · 99795a6 · 99795a6
1 parent 2845b17
commit 99795a6
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 7 deletions.
diff --git a/src/assets/scss/_content.scss b/src/assets/scss/_content.scss
@@ -72,8 +72,9 @@
     }
 
     &:after {
+      $height: var(--editor-bottom);
       content: "";
-      height: var(--editor-bottom);
+      height: var(--editor-bottom-actual, $height);
       display: block;
     }
   }
@@ -211,14 +212,14 @@
 
     &__close {
       position: absolute;
-      color:  var(--toolbar-icon-color);
+      color: var(--toolbar-icon-color);
       top: -7px;
       right: -15px;
       font-weight: bold;
       cursor: pointer;
 
       &:hover {
-        color:  var(--toolbar-icon-hover-color);
+        color: var(--toolbar-icon-hover-color);
       }
     }
   }

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

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

diff --git a/src/ts/toolbar/Fullscreen.ts b/src/ts/toolbar/Fullscreen.ts
@@ -14,8 +14,9 @@ export class Fullscreen extends MenuItem {
     public _bindEvent(vditor: IVditor, menuItem: IMenuItem) {
         this.element.children[0].addEventListener(getEventName(), function(event) {
             event.preventDefault();
-            if (vditor.element.className.indexOf("vditor--fullscreen") > -1) {
+            if (vditor.element.className.includes("vditor--fullscreen")) {
                 this.innerHTML = menuItem.icon || fullscreenSVG;
+                vditor.element.style.removeProperty("--editor-bottom-actual");
                 vditor.element.classList.remove("vditor--fullscreen");
                 Object.keys(vditor.toolbar.elements).forEach((key) => {
                     const svgElement = vditor.toolbar.elements[key].firstChild as HTMLElement;
@@ -25,6 +26,7 @@ export class Fullscreen extends MenuItem {
                 });
             } else {
                 this.innerHTML = menuItem.icon || contractSVG;
+                vditor.element.style.setProperty("--editor-bottom-actual", "50%");
                 vditor.element.classList.add("vditor--fullscreen");
                 Object.keys(vditor.toolbar.elements).forEach((key) => {
                     const svgElement = vditor.toolbar.elements[key].firstChild as HTMLElement;

diff --git a/src/ts/ui/initUI.ts b/src/ts/ui/initUI.ts
@@ -76,7 +76,7 @@ const afterRender = (vditor: IVditor, contentElement: HTMLElement) => {
         height = vditor.options.height - 37;
     }
 
-    if (vditor.options.typewriterMode) {
+    if (vditor.options.typewriterMode && typeof vditor.options.height === "number") {
         // 由于 Firefox padding-bottom bug，只能使用 :after
         contentElement.style.setProperty("--editor-bottom", height / 2 + "px");
     }