fix: horizonal scroll bar flashing when using Monaco

TheodoreChu · Nov 8, 2020 · d689385 · d689385
1 parent c792430
commit d689385
Show file tree

Hide file tree

Showing 12 changed files with 32 additions and 15 deletions.
diff --git a/build/asset-manifest.json b/build/asset-manifest.json
@@ -4,9 +4,9 @@
     "static/js/0.46c99b84.chunk.js.map": "./static/js/0.46c99b84.chunk.js.map",
     "static/js/1.c21c5b17.chunk.js": "./static/js/1.c21c5b17.chunk.js",
     "static/js/1.c21c5b17.chunk.js.map": "./static/js/1.c21c5b17.chunk.js.map",
-    "main.css": "./static/css/main.d24ef2a4.chunk.css",
-    "main.js": "./static/js/main.7e65b20c.chunk.js",
-    "main.js.map": "./static/js/main.7e65b20c.chunk.js.map",
+    "main.css": "./static/css/main.1d13a9a3.chunk.css",
+    "main.js": "./static/js/main.35461df4.chunk.js",
+    "main.js.map": "./static/js/main.35461df4.chunk.js.map",
     "runtime-main.js": "./static/js/runtime-main.ae507578.js",
     "runtime-main.js.map": "./static/js/runtime-main.ae507578.js.map",
     "static/css/4.7c0a8645.chunk.css": "./static/css/4.7c0a8645.chunk.css",
@@ -152,7 +152,7 @@
     "static/js/73.f93a3e73.chunk.js.map": "./static/js/73.f93a3e73.chunk.js.map",
     "index.html": "./index.html",
     "static/css/4.7c0a8645.chunk.css.map": "./static/css/4.7c0a8645.chunk.css.map",
-    "static/css/main.d24ef2a4.chunk.css.map": "./static/css/main.d24ef2a4.chunk.css.map",
+    "static/css/main.1d13a9a3.chunk.css.map": "./static/css/main.1d13a9a3.chunk.css.map",
     "static/js/4.3e0ca9ba.chunk.js.LICENSE.txt": "./static/js/4.3e0ca9ba.chunk.js.LICENSE.txt",
     "static/js/65.e84034c2.chunk.js.LICENSE.txt": "./static/js/65.e84034c2.chunk.js.LICENSE.txt",
     "static/media/codicon.css": "./static/media/codicon.b3726f01.ttf"
@@ -161,7 +161,7 @@
     "static/js/runtime-main.ae507578.js",
     "static/css/4.7c0a8645.chunk.css",
     "static/js/4.3e0ca9ba.chunk.js",
-    "static/css/main.d24ef2a4.chunk.css",
-    "static/js/main.7e65b20c.chunk.js"
+    "static/css/main.1d13a9a3.chunk.css",
+    "static/js/main.35461df4.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 Custom 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"/><link rel="stylesheet" href="./highlight.js/10.2.1/styles/googlecode.min.css"/><link rel="stylesheet" href="./highlight.js/10.2.1/styles/github-gist.min.css"/><title>Append Editor</title><link href="./static/css/4.7c0a8645.chunk.css" rel="stylesheet"><link href="./static/css/main.d24ef2a4.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,c,f=r[0],d=r[1],u=r[2],b=0,l=[];b<f.length;b++)c=f[b],Object.prototype.hasOwnProperty.call(a,c)&&a[c]&&l.push(a[c][0]),a[c]=0;for(n in d)Object.prototype.hasOwnProperty.call(d,n)&&(e[n]=d[n]);for(i&&i(r);l.length;)l.shift()();return o.push.apply(o,u||[]),t()}function t(){for(var e,r=0;r<o.length;r++){for(var t=o[r],n=!0,f=1;f<t.length;f++){var d=t[f];0!==a[d]&&(n=!1)}n&&(o.splice(r--,1),e=c(c.s=t[0]))}return e}var n={},a={3:0},o=[];function c(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,c),t.l=!0,t.exports}c.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 o,f=document.createElement("script");f.charset="utf-8",f.timeout=120,c.nc&&f.setAttribute("nonce",c.nc),f.src=function(e){return c.p+"static/js/"+({}[e]||e)+"."+{0:"46c99b84",1:"c21c5b17",5:"ab99641d",6:"1ebd746a",7:"d3b4e170",8:"196de22e",9:"b2196475",10:"157b902b",11:"c269f2d4",12:"429ef684",13:"7a4faef6",14:"79f7b070",15:"6acdae91",16:"bd24e1df",17:"194e304f",18:"526ff848",19:"319a17bf",20:"61552509",21:"dd2c2eb5",22:"9b46223d",23:"00086d5a",24:"cdfbea52",25:"b70fa161",26:"c5504282",27:"8ea0bc34",28:"cd969819",29:"ebb843e4",30:"48188b7e",31:"00e17a2a",32:"0099d857",33:"6b69e89c",34:"e59c2361",35:"c61d74d9",36:"d0afc5af",37:"3201c235",38:"d2c5da51",39:"675b5f50",40:"f7972946",41:"a37a69cc",42:"86fb4edb",43:"c72c8842",44:"d86a90a7",45:"cebb8c8f",46:"cb806a23",47:"2541d9df",48:"021b63e3",49:"efc1522a",50:"b4498b28",51:"623aebbd",52:"2114175d",53:"e1f463a0",54:"ceccaaf4",55:"12995f2e",56:"7071ef5b",57:"4eece1d7",58:"e935f32d",59:"bcb2e712",60:"1730b9b2",61:"d17c1f4d",62:"ddbec99b",63:"3127fa77",64:"19e87838",65:"e84034c2",66:"e7740bb8",67:"556ad77f",68:"334eca08",69:"297a454e",70:"2350aee1",71:"c7313ae9",72:"0b71caca",73:"f93a3e73"}[e]+".chunk.js"}(e);var d=new Error;o=function(r){f.onerror=f.onload=null,clearTimeout(u);var t=a[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),o=r&&r.target&&r.target.src;d.message="Loading chunk "+e+" failed.\n("+n+": "+o+")",d.name="ChunkLoadError",d.type=n,d.request=o,t[1](d)}a[e]=void 0}};var u=setTimeout((function(){o({type:"timeout",target:f})}),12e4);f.onerror=f.onload=o,document.head.appendChild(f)}return Promise.all(r)},c.m=e,c.c=n,c.d=function(e,r,t){c.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},c.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.t=function(e,r){if(1&r&&(e=c(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(c.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)c.d(t,n,function(r){return e[r]}.bind(null,n));return t},c.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(r,"a",r),r},c.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},c.p="./",c.oe=function(e){throw console.error(e),e};var f=this["webpackJsonpappend-editor"]=this["webpackJsonpappend-editor"]||[],d=f.push.bind(f);f.push=r,f=f.slice();for(var u=0;u<f.length;u++)r(f[u]);var i=d;t()}([])</script><script src="./static/js/4.3e0ca9ba.chunk.js"></script><script src="./static/js/main.7e65b20c.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 Custom 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"/><link rel="stylesheet" href="./highlight.js/10.2.1/styles/googlecode.min.css"/><link rel="stylesheet" href="./highlight.js/10.2.1/styles/github-gist.min.css"/><title>Append Editor</title><link href="./static/css/4.7c0a8645.chunk.css" rel="stylesheet"><link href="./static/css/main.1d13a9a3.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,c,f=r[0],d=r[1],u=r[2],b=0,l=[];b<f.length;b++)c=f[b],Object.prototype.hasOwnProperty.call(a,c)&&a[c]&&l.push(a[c][0]),a[c]=0;for(n in d)Object.prototype.hasOwnProperty.call(d,n)&&(e[n]=d[n]);for(i&&i(r);l.length;)l.shift()();return o.push.apply(o,u||[]),t()}function t(){for(var e,r=0;r<o.length;r++){for(var t=o[r],n=!0,f=1;f<t.length;f++){var d=t[f];0!==a[d]&&(n=!1)}n&&(o.splice(r--,1),e=c(c.s=t[0]))}return e}var n={},a={3:0},o=[];function c(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,c),t.l=!0,t.exports}c.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 o,f=document.createElement("script");f.charset="utf-8",f.timeout=120,c.nc&&f.setAttribute("nonce",c.nc),f.src=function(e){return c.p+"static/js/"+({}[e]||e)+"."+{0:"46c99b84",1:"c21c5b17",5:"ab99641d",6:"1ebd746a",7:"d3b4e170",8:"196de22e",9:"b2196475",10:"157b902b",11:"c269f2d4",12:"429ef684",13:"7a4faef6",14:"79f7b070",15:"6acdae91",16:"bd24e1df",17:"194e304f",18:"526ff848",19:"319a17bf",20:"61552509",21:"dd2c2eb5",22:"9b46223d",23:"00086d5a",24:"cdfbea52",25:"b70fa161",26:"c5504282",27:"8ea0bc34",28:"cd969819",29:"ebb843e4",30:"48188b7e",31:"00e17a2a",32:"0099d857",33:"6b69e89c",34:"e59c2361",35:"c61d74d9",36:"d0afc5af",37:"3201c235",38:"d2c5da51",39:"675b5f50",40:"f7972946",41:"a37a69cc",42:"86fb4edb",43:"c72c8842",44:"d86a90a7",45:"cebb8c8f",46:"cb806a23",47:"2541d9df",48:"021b63e3",49:"efc1522a",50:"b4498b28",51:"623aebbd",52:"2114175d",53:"e1f463a0",54:"ceccaaf4",55:"12995f2e",56:"7071ef5b",57:"4eece1d7",58:"e935f32d",59:"bcb2e712",60:"1730b9b2",61:"d17c1f4d",62:"ddbec99b",63:"3127fa77",64:"19e87838",65:"e84034c2",66:"e7740bb8",67:"556ad77f",68:"334eca08",69:"297a454e",70:"2350aee1",71:"c7313ae9",72:"0b71caca",73:"f93a3e73"}[e]+".chunk.js"}(e);var d=new Error;o=function(r){f.onerror=f.onload=null,clearTimeout(u);var t=a[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),o=r&&r.target&&r.target.src;d.message="Loading chunk "+e+" failed.\n("+n+": "+o+")",d.name="ChunkLoadError",d.type=n,d.request=o,t[1](d)}a[e]=void 0}};var u=setTimeout((function(){o({type:"timeout",target:f})}),12e4);f.onerror=f.onload=o,document.head.appendChild(f)}return Promise.all(r)},c.m=e,c.c=n,c.d=function(e,r,t){c.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},c.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.t=function(e,r){if(1&r&&(e=c(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(c.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)c.d(t,n,function(r){return e[r]}.bind(null,n));return t},c.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(r,"a",r),r},c.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},c.p="./",c.oe=function(e){throw console.error(e),e};var f=this["webpackJsonpappend-editor"]=this["webpackJsonpappend-editor"]||[],d=f.push.bind(f);f.push=r,f=f.slice();for(var u=0;u<f.length;u++)r(f[u]);var i=d;t()}([])</script><script src="./static/js/4.3e0ca9ba.chunk.js"></script><script src="./static/js/main.35461df4.chunk.js"></script></body></html>
diff --git a/build/static/css/main.1d13a9a3.chunk.css b/build/static/css/main.1d13a9a3.chunk.css
diff --git a/build/static/css/main.1d13a9a3.chunk.css.map b/build/static/css/main.1d13a9a3.chunk.css.map
diff --git a/build/static/css/main.d24ef2a4.chunk.css b/build/static/css/main.d24ef2a4.chunk.css
diff --git a/build/static/css/main.d24ef2a4.chunk.css.map b/build/static/css/main.d24ef2a4.chunk.css.map
diff --git a/build/static/js/main.35461df4.chunk.js b/build/static/js/main.35461df4.chunk.js
diff --git a/build/static/js/main.7e65b20c.chunk.js.map → build/static/js/main.35461df4.chunk.js.map b/build/static/js/main.7e65b20c.chunk.js.map → build/static/js/main.35461df4.chunk.js.map
diff --git a/build/static/js/main.7e65b20c.chunk.js b/build/static/js/main.7e65b20c.chunk.js
diff --git a/src/components/AppendText.tsx b/src/components/AppendText.tsx
@@ -163,8 +163,14 @@ export default class AppendText extends React.Component<any, ChildState> {
             : 'printModeOff')
         }
       >
-        <div className={'sk-panel-content edit'}>
+        <div
+          className={
+            'sk-panel-content edit ' +
+            (this.props.useMonacoEditor ? 'MonacoEditor' : '')
+          }
+        >
           {this.state.useMonacoEditor ? (
+            // We use this.state instead of this.props so we can easily refresh it on Append
             <MonacoEditor text={text} saveText={this.saveText} />
           ) : (
             <textarea

diff --git a/src/components/EditNote.tsx b/src/components/EditNote.tsx
@@ -80,7 +80,12 @@ export default class EditNote extends React.Component<any, ChildState> {
             : 'printModeOff')
         }
       >
-        <div className={'sk-panel-content edit'}>
+        <div
+          className={
+            'sk-panel-content edit ' +
+            (this.props.useMonacoEditor ? 'MonacoEditor' : '')
+          }
+        >
           {this.props.useMonacoEditor ? (
             <MonacoEditor text={text} saveText={this.saveText} />
           ) : (

diff --git a/src/stylesheets/main.scss b/src/stylesheets/main.scss
@@ -128,6 +128,12 @@ button:focus {
       padding-right: 0px !important;
       padding-top: 0px !important;
     }
+
+    // Hides the horizontal scroll bar when using the Monaco Editor
+    // Otherwise the horizontal scroll bar will flash when the Monaco editor suggests words
+    &.MonacoEditor {
+      overflow-x: hidden !important;
+    }
   }
 
   .sk-input.contrast.textarea {