fix: remove extra space under editor when using fixed height and KaTeX

TheodoreChu · Feb 8, 2021 · 3c988cc · 3c988cc
1 parent fd7b983
commit 3c988cc
Show file tree

Hide file tree

Showing 11 changed files with 53 additions and 13 deletions.
diff --git a/build/asset-manifest.json b/build/asset-manifest.json
@@ -4,9 +4,9 @@
     "static/js/0.55f8f759.chunk.js.map": "./static/js/0.55f8f759.chunk.js.map",
     "static/js/1.60eef272.chunk.js": "./static/js/1.60eef272.chunk.js",
     "static/js/1.60eef272.chunk.js.map": "./static/js/1.60eef272.chunk.js.map",
-    "main.css": "./static/css/main.d2a1252d.chunk.css",
-    "main.js": "./static/js/main.aa46ed1d.chunk.js",
-    "main.js.map": "./static/js/main.aa46ed1d.chunk.js.map",
+    "main.css": "./static/css/main.e7ce4596.chunk.css",
+    "main.js": "./static/js/main.44f2b3cc.chunk.js",
+    "main.js.map": "./static/js/main.44f2b3cc.chunk.js.map",
     "runtime-main.js": "./static/js/runtime-main.a6ea03f7.js",
     "runtime-main.js.map": "./static/js/runtime-main.a6ea03f7.js.map",
     "static/css/4.71f52f70.chunk.css": "./static/css/4.71f52f70.chunk.css",
@@ -156,7 +156,7 @@
     "static/js/75.688eaa0b.chunk.js.map": "./static/js/75.688eaa0b.chunk.js.map",
     "index.html": "./index.html",
     "static/css/4.71f52f70.chunk.css.map": "./static/css/4.71f52f70.chunk.css.map",
-    "static/css/main.d2a1252d.chunk.css.map": "./static/css/main.d2a1252d.chunk.css.map",
+    "static/css/main.e7ce4596.chunk.css.map": "./static/css/main.e7ce4596.chunk.css.map",
     "static/js/4.c8b0fdd3.chunk.js.LICENSE.txt": "./static/js/4.c8b0fdd3.chunk.js.LICENSE.txt",
     "static/js/67.4f8da862.chunk.js.LICENSE.txt": "./static/js/67.4f8da862.chunk.js.LICENSE.txt",
     "static/media/codicon.css": "./static/media/codicon.4168b9c1.ttf"
@@ -165,7 +165,7 @@
     "static/js/runtime-main.a6ea03f7.js",
     "static/css/4.71f52f70.chunk.css",
     "static/js/4.c8b0fdd3.chunk.js",
-    "static/css/main.d2a1252d.chunk.css",
-    "static/js/main.aa46ed1d.chunk.js"
+    "static/css/main.e7ce4596.chunk.css",
+    "static/js/main.44f2b3cc.chunk.js"
   ]
 }
diff --git a/build/index.html b/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" type="image/png" href="./icon.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="The Append Editor is an unofficial editor for Standard Notes, a free, open-source, and end-to-end encrypted notes app. Try the demo at beta.appendeditor.com or learn more at appendeditor.com."/><link rel="apple-touch-icon" href="./icon192.png"/><link rel="manifest" href="./manifest.json"/><link rel="stylesheet" href="./katex/v0.12.0/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous"/><title>Append Editor</title><link href="./static/css/4.71f52f70.chunk.css" rel="stylesheet"><link href="./static/css/main.d2a1252d.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,o,c=r[0],u=r[1],d=r[2],b=0,l=[];b<c.length;b++)o=c[b],Object.prototype.hasOwnProperty.call(a,o)&&a[o]&&l.push(a[o][0]),a[o]=0;for(n in u)Object.prototype.hasOwnProperty.call(u,n)&&(e[n]=u[n]);for(i&&i(r);l.length;)l.shift()();return f.push.apply(f,d||[]),t()}function t(){for(var e,r=0;r<f.length;r++){for(var t=f[r],n=!0,c=1;c<t.length;c++){var u=t[c];0!==a[u]&&(n=!1)}n&&(f.splice(r--,1),e=o(o.s=t[0]))}return e}var n={},a={3:0},f=[];function o(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.e=function(e){var r=[],t=a[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=a[e]=[r,n]}));r.push(t[2]=n);var f,c=document.createElement("script");c.charset="utf-8",c.timeout=120,o.nc&&c.setAttribute("nonce",o.nc),c.src=function(e){return o.p+"static/js/"+({}[e]||e)+"."+{0:"55f8f759",1:"60eef272",5:"81b59410",6:"5fd8a703",7:"f13c69b4",8:"3d40ac8b",9:"faf6812e",10:"a3fe5116",11:"f18f5a43",12:"979102b7",13:"210ef2c3",14:"24310f2b",15:"10258205",16:"826a373c",17:"9039ea1c",18:"d0f37433",19:"98f78047",20:"fcc2cdf9",21:"35c4b234",22:"9f3e8aa7",23:"4168b102",24:"4531565b",25:"366adaf8",26:"056c3a03",27:"3c76f6d8",28:"48f5e41a",29:"2b23aa42",30:"63002b82",31:"121f581c",32:"cd599a2a",33:"4b3221fb",34:"d5743401",35:"b9069ff5",36:"a1988963",37:"948f3528",38:"9dc98375",39:"a9e26f85",40:"13218791",41:"cc0d41d1",42:"9bca5284",43:"6b13f85d",44:"496b8e11",45:"75efd949",46:"ad53bc88",47:"90b9f776",48:"bbb50f44",49:"764ae2fb",50:"541563d6",51:"9e727826",52:"7b6d8815",53:"75167a58",54:"b1f5a1fe",55:"9f4b87fd",56:"d8b4e1dc",57:"d415d7a7",58:"fa0ed7b5",59:"8ecf53b3",60:"77d33f9b",61:"f55782d8",62:"3104007b",63:"26f7dbea",64:"ee0a433a",65:"000b3c1b",66:"a4fbc9bf",67:"4f8da862",68:"ae6e129c",69:"aa9bf4bb",70:"ffa54678",71:"62a53cc4",72:"d0096fa5",73:"e7c6851b",74:"0a81ff1d",75:"688eaa0b"}[e]+".chunk.js"}(e);var u=new Error;f=function(r){c.onerror=c.onload=null,clearTimeout(d);var t=a[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),f=r&&r.target&&r.target.src;u.message="Loading chunk "+e+" failed.\n("+n+": "+f+")",u.name="ChunkLoadError",u.type=n,u.request=f,t[1](u)}a[e]=void 0}};var d=setTimeout((function(){f({type:"timeout",target:c})}),12e4);c.onerror=c.onload=f,document.head.appendChild(c)}return Promise.all(r)},o.m=e,o.c=n,o.d=function(e,r,t){o.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,r){if(1&r&&(e=o(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(o.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)o.d(t,n,function(r){return e[r]}.bind(null,n));return t},o.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(r,"a",r),r},o.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},o.p="./",o.oe=function(e){throw console.error(e),e};var c=this["webpackJsonpappend-editor"]=this["webpackJsonpappend-editor"]||[],u=c.push.bind(c);c.push=r,c=c.slice();for(var d=0;d<c.length;d++)r(c[d]);var i=u;t()}([])</script><script src="./static/js/4.c8b0fdd3.chunk.js"></script><script src="./static/js/main.aa46ed1d.chunk.js"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" type="image/png" href="./icon.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="The Append Editor is an unofficial editor for Standard Notes, a free, open-source, and end-to-end encrypted notes app. Try the demo at beta.appendeditor.com or learn more at appendeditor.com."/><link rel="apple-touch-icon" href="./icon192.png"/><link rel="manifest" href="./manifest.json"/><link rel="stylesheet" href="./katex/v0.12.0/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous"/><title>Append Editor</title><link href="./static/css/4.71f52f70.chunk.css" rel="stylesheet"><link href="./static/css/main.e7ce4596.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,o,c=r[0],u=r[1],d=r[2],b=0,l=[];b<c.length;b++)o=c[b],Object.prototype.hasOwnProperty.call(a,o)&&a[o]&&l.push(a[o][0]),a[o]=0;for(n in u)Object.prototype.hasOwnProperty.call(u,n)&&(e[n]=u[n]);for(i&&i(r);l.length;)l.shift()();return f.push.apply(f,d||[]),t()}function t(){for(var e,r=0;r<f.length;r++){for(var t=f[r],n=!0,c=1;c<t.length;c++){var u=t[c];0!==a[u]&&(n=!1)}n&&(f.splice(r--,1),e=o(o.s=t[0]))}return e}var n={},a={3:0},f=[];function o(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.e=function(e){var r=[],t=a[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=a[e]=[r,n]}));r.push(t[2]=n);var f,c=document.createElement("script");c.charset="utf-8",c.timeout=120,o.nc&&c.setAttribute("nonce",o.nc),c.src=function(e){return o.p+"static/js/"+({}[e]||e)+"."+{0:"55f8f759",1:"60eef272",5:"81b59410",6:"5fd8a703",7:"f13c69b4",8:"3d40ac8b",9:"faf6812e",10:"a3fe5116",11:"f18f5a43",12:"979102b7",13:"210ef2c3",14:"24310f2b",15:"10258205",16:"826a373c",17:"9039ea1c",18:"d0f37433",19:"98f78047",20:"fcc2cdf9",21:"35c4b234",22:"9f3e8aa7",23:"4168b102",24:"4531565b",25:"366adaf8",26:"056c3a03",27:"3c76f6d8",28:"48f5e41a",29:"2b23aa42",30:"63002b82",31:"121f581c",32:"cd599a2a",33:"4b3221fb",34:"d5743401",35:"b9069ff5",36:"a1988963",37:"948f3528",38:"9dc98375",39:"a9e26f85",40:"13218791",41:"cc0d41d1",42:"9bca5284",43:"6b13f85d",44:"496b8e11",45:"75efd949",46:"ad53bc88",47:"90b9f776",48:"bbb50f44",49:"764ae2fb",50:"541563d6",51:"9e727826",52:"7b6d8815",53:"75167a58",54:"b1f5a1fe",55:"9f4b87fd",56:"d8b4e1dc",57:"d415d7a7",58:"fa0ed7b5",59:"8ecf53b3",60:"77d33f9b",61:"f55782d8",62:"3104007b",63:"26f7dbea",64:"ee0a433a",65:"000b3c1b",66:"a4fbc9bf",67:"4f8da862",68:"ae6e129c",69:"aa9bf4bb",70:"ffa54678",71:"62a53cc4",72:"d0096fa5",73:"e7c6851b",74:"0a81ff1d",75:"688eaa0b"}[e]+".chunk.js"}(e);var u=new Error;f=function(r){c.onerror=c.onload=null,clearTimeout(d);var t=a[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),f=r&&r.target&&r.target.src;u.message="Loading chunk "+e+" failed.\n("+n+": "+f+")",u.name="ChunkLoadError",u.type=n,u.request=f,t[1](u)}a[e]=void 0}};var d=setTimeout((function(){f({type:"timeout",target:c})}),12e4);c.onerror=c.onload=f,document.head.appendChild(c)}return Promise.all(r)},o.m=e,o.c=n,o.d=function(e,r,t){o.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,r){if(1&r&&(e=o(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(o.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)o.d(t,n,function(r){return e[r]}.bind(null,n));return t},o.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(r,"a",r),r},o.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},o.p="./",o.oe=function(e){throw console.error(e),e};var c=this["webpackJsonpappend-editor"]=this["webpackJsonpappend-editor"]||[],u=c.push.bind(c);c.push=r,c=c.slice();for(var d=0;d<c.length;d++)r(c[d]);var i=u;t()}([])</script><script src="./static/js/4.c8b0fdd3.chunk.js"></script><script src="./static/js/main.44f2b3cc.chunk.js"></script></body></html>
diff --git a/build/static/css/main.d2a1252d.chunk.css b/build/static/css/main.d2a1252d.chunk.css
diff --git a/build/static/css/main.d2a1252d.chunk.css.map b/build/static/css/main.d2a1252d.chunk.css.map
diff --git a/build/static/css/main.e7ce4596.chunk.css b/build/static/css/main.e7ce4596.chunk.css
diff --git a/build/static/css/main.e7ce4596.chunk.css.map b/build/static/css/main.e7ce4596.chunk.css.map
diff --git a/build/static/js/main.aa46ed1d.chunk.js → build/static/js/main.44f2b3cc.chunk.js b/build/static/js/main.aa46ed1d.chunk.js → build/static/js/main.44f2b3cc.chunk.js
diff --git a/build/static/js/main.44f2b3cc.chunk.js.map b/build/static/js/main.44f2b3cc.chunk.js.map
diff --git a/build/static/js/main.aa46ed1d.chunk.js.map b/build/static/js/main.aa46ed1d.chunk.js.map
diff --git a/src/components/AppendEditor.tsx b/src/components/AppendEditor.tsx
@@ -471,6 +471,11 @@ export default class AppendEditor extends React.Component<{}, AppendInterface> {
             //showMenuOptionsView: menuOptionsObject.showMenuOptionsView,
           },
           () => {
+            if (this.state.fixedHeightMode) {
+              this.addFixedHeightToBody();
+            } else {
+              this.removeFixedHeightFromBody();
+            }
             this.refreshEditor();
           }
         );
@@ -1098,12 +1103,37 @@ export default class AppendEditor extends React.Component<{}, AppendInterface> {
         fixedHeightMode: !this.state.fixedHeightMode,
       },
       () => {
+        /** If using fixed height,
+         * then SkipToTop and add `.fixed-height` class to document.body
+         * This is important for KaTeX
+         * Otherwise remove `.fixed-height` className from document.body
+         */
+        if (this.state.fixedHeightMode) {
+          this.addFixedHeightToBody();
+        } else {
+          this.removeFixedHeightFromBody();
+        }
         this.activateFixedHeader();
         this.saveMenuOptions();
       }
     );
   };
 
+  /**
+   * SkipToTop and add `.fixed-height` className to `document.body`
+   */
+  addFixedHeightToBody = () => {
+    this.skipToTop();
+    document.body.className = 'fixed-height';
+  };
+
+  /**
+   * Remove `.fixed-height` className from `document.body`
+   */
+  removeFixedHeightFromBody = () => {
+    document.body.classList.remove('fixed-height');
+  };
+
   toggleFullWidthMode = () => {
     this.setState(
       {
@@ -1211,6 +1241,7 @@ export default class AppendEditor extends React.Component<{}, AppendInterface> {
   onSettingsMode = () => {
     // Here we save the current state. We reload the current state if we cancel and after we save
     if (!this.state.settingsMode) {
+      this.removeFixedHeightFromBody();
       this.removeFixedHeader();
       this.setState(
         {
@@ -1248,6 +1279,9 @@ export default class AppendEditor extends React.Component<{}, AppendInterface> {
           settingsMode: false,
         },
         () => {
+          if (this.state.fixedHeightMode) {
+            this.addFixedHeightToBody();
+          }
           this.refreshEdit();
           const settingsButton = document.getElementById(
             HtmlElementId.settingsButton
@@ -1287,6 +1321,9 @@ export default class AppendEditor extends React.Component<{}, AppendInterface> {
         settingsMode: false,
       },
       () => {
+        if (this.state.fixedHeightMode) {
+          this.addFixedHeightToBody();
+        }
         this.refreshEditor();
         const settingsButton = document.getElementById(
           HtmlElementId.settingsButton

diff --git a/src/stylesheets/main.scss b/src/stylesheets/main.scss
@@ -29,6 +29,9 @@ html {
   margin: 0;
   padding: 0;
   width: 100%;
+  &.fixed-height {
+    overflow-y: hidden;
+  }
 }
 
 * {