feat: borderless, fixed height, full width, and overflow view modes

TheodoreChu · Dec 10, 2020 · b969981 · b969981 · TheodoreChu · Dec 10, 2020
1 parent 23e33ec
commit b969981
Show file tree

Hide file tree

Showing 15 changed files with 219 additions and 84 deletions.
diff --git a/build/asset-manifest.json b/build/asset-manifest.json
@@ -4,9 +4,9 @@
     "static/js/0.6e8356b3.chunk.js.map": "./static/js/0.6e8356b3.chunk.js.map",
     "static/js/1.beda51ec.chunk.js": "./static/js/1.beda51ec.chunk.js",
     "static/js/1.beda51ec.chunk.js.map": "./static/js/1.beda51ec.chunk.js.map",
-    "main.css": "./static/css/main.4a4a4411.chunk.css",
-    "main.js": "./static/js/main.7dcef7ea.chunk.js",
-    "main.js.map": "./static/js/main.7dcef7ea.chunk.js.map",
+    "main.css": "./static/css/main.9e0b4882.chunk.css",
+    "main.js": "./static/js/main.3640d70e.chunk.js",
+    "main.js.map": "./static/js/main.3640d70e.chunk.js.map",
     "runtime-main.js": "./static/js/runtime-main.62aa27b2.js",
     "runtime-main.js.map": "./static/js/runtime-main.62aa27b2.js.map",
     "static/css/4.7c0a8645.chunk.css": "./static/css/4.7c0a8645.chunk.css",
@@ -152,7 +152,7 @@
     "static/js/73.942b36ff.chunk.js.map": "./static/js/73.942b36ff.chunk.js.map",
     "index.html": "./index.html",
     "static/css/4.7c0a8645.chunk.css.map": "./static/css/4.7c0a8645.chunk.css.map",
-    "static/css/main.4a4a4411.chunk.css.map": "./static/css/main.4a4a4411.chunk.css.map",
+    "static/css/main.9e0b4882.chunk.css.map": "./static/css/main.9e0b4882.chunk.css.map",
     "static/js/4.5e5bbeb3.chunk.js.LICENSE.txt": "./static/js/4.5e5bbeb3.chunk.js.LICENSE.txt",
     "static/js/65.a6ea35c2.chunk.js.LICENSE.txt": "./static/js/65.a6ea35c2.chunk.js.LICENSE.txt",
     "static/media/codicon.css": "./static/media/codicon.b3726f01.ttf"
@@ -161,7 +161,7 @@
     "static/js/runtime-main.62aa27b2.js",
     "static/css/4.7c0a8645.chunk.css",
     "static/js/4.5e5bbeb3.chunk.js",
-    "static/css/main.4a4a4411.chunk.css",
-    "static/js/main.7dcef7ea.chunk.js"
+    "static/css/main.9e0b4882.chunk.css",
+    "static/js/main.3640d70e.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.7c0a8645.chunk.css" rel="stylesheet"><link href="./static/css/main.4a4a4411.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script src="editor.worker.bundle.js"></script><script src="json.worker.bundle.js"></script><script src="css.worker.bundle.js"></script><script src="html.worker.bundle.js"></script><script src="ts.worker.bundle.js"></script><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:"6e8356b3",1:"beda51ec",5:"4048aec6",6:"4dee4811",7:"fc382a67",8:"13316ebe",9:"6be8d0d7",10:"89051c25",11:"1c80e612",12:"0720537a",13:"b4ec28c5",14:"06360f72",15:"f9206ac4",16:"2bc68063",17:"9d5cd374",18:"d8abfc79",19:"de5e1fc9",20:"b415724b",21:"86051422",22:"5d1cb176",23:"945b0ae5",24:"f686a994",25:"4595f0a3",26:"b1afae36",27:"849f0a21",28:"81357772",29:"c0bfe876",30:"f3538c17",31:"a12e1cef",32:"332b7c06",33:"f3b1b712",34:"7eb1edc2",35:"405ee1a2",36:"d0417e11",37:"1721bd72",38:"06f2cb17",39:"0a344a12",40:"6af8ab0d",41:"48b0a72e",42:"2038b393",43:"6a305906",44:"5c814b1e",45:"41bf54f8",46:"faef1d09",47:"fc2bc4fe",48:"d14adcb4",49:"c6a43cac",50:"9a810de3",51:"e51142f8",52:"aace1dec",53:"d39a2bb6",54:"9ecaa1f1",55:"6a361e8e",56:"612fba70",57:"0a31ecae",58:"3d408626",59:"9386a86a",60:"a685336b",61:"3dde6794",62:"63b04ad3",63:"23256c50",64:"59848527",65:"a6ea35c2",66:"e7a82d2b",67:"fec44c86",68:"dd7e6980",69:"2958abb0",70:"00c7bddd",71:"ecddd1fd",72:"389ed639",73:"942b36ff"}[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.5e5bbeb3.chunk.js"></script><script src="./static/js/main.7dcef7ea.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.7c0a8645.chunk.css" rel="stylesheet"><link href="./static/css/main.9e0b4882.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script src="editor.worker.bundle.js"></script><script src="json.worker.bundle.js"></script><script src="css.worker.bundle.js"></script><script src="html.worker.bundle.js"></script><script src="ts.worker.bundle.js"></script><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:"6e8356b3",1:"beda51ec",5:"4048aec6",6:"4dee4811",7:"fc382a67",8:"13316ebe",9:"6be8d0d7",10:"89051c25",11:"1c80e612",12:"0720537a",13:"b4ec28c5",14:"06360f72",15:"f9206ac4",16:"2bc68063",17:"9d5cd374",18:"d8abfc79",19:"de5e1fc9",20:"b415724b",21:"86051422",22:"5d1cb176",23:"945b0ae5",24:"f686a994",25:"4595f0a3",26:"b1afae36",27:"849f0a21",28:"81357772",29:"c0bfe876",30:"f3538c17",31:"a12e1cef",32:"332b7c06",33:"f3b1b712",34:"7eb1edc2",35:"405ee1a2",36:"d0417e11",37:"1721bd72",38:"06f2cb17",39:"0a344a12",40:"6af8ab0d",41:"48b0a72e",42:"2038b393",43:"6a305906",44:"5c814b1e",45:"41bf54f8",46:"faef1d09",47:"fc2bc4fe",48:"d14adcb4",49:"c6a43cac",50:"9a810de3",51:"e51142f8",52:"aace1dec",53:"d39a2bb6",54:"9ecaa1f1",55:"6a361e8e",56:"612fba70",57:"0a31ecae",58:"3d408626",59:"9386a86a",60:"a685336b",61:"3dde6794",62:"63b04ad3",63:"23256c50",64:"59848527",65:"a6ea35c2",66:"e7a82d2b",67:"fec44c86",68:"dd7e6980",69:"2958abb0",70:"00c7bddd",71:"ecddd1fd",72:"389ed639",73:"942b36ff"}[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.5e5bbeb3.chunk.js"></script><script src="./static/js/main.3640d70e.chunk.js"></script></body></html>
diff --git a/build/static/css/main.4a4a4411.chunk.css b/build/static/css/main.4a4a4411.chunk.css
diff --git a/build/static/css/main.4a4a4411.chunk.css.map b/build/static/css/main.4a4a4411.chunk.css.map
diff --git a/build/static/css/main.9e0b4882.chunk.css b/build/static/css/main.9e0b4882.chunk.css
diff --git a/build/static/css/main.9e0b4882.chunk.css.map b/build/static/css/main.9e0b4882.chunk.css.map
diff --git a/build/static/js/main.3640d70e.chunk.js b/build/static/js/main.3640d70e.chunk.js
diff --git a/build/static/js/main.3640d70e.chunk.js.map b/build/static/js/main.3640d70e.chunk.js.map
diff --git a/build/static/js/main.7dcef7ea.chunk.js b/build/static/js/main.7dcef7ea.chunk.js
diff --git a/build/static/js/main.7dcef7ea.chunk.js.map b/build/static/js/main.7dcef7ea.chunk.js.map
diff --git a/src/components/AppendEditor.tsx b/src/components/AppendEditor.tsx
@@ -129,6 +129,7 @@ export interface AppendInterface {
   appendMode: boolean;
   appendRows: number;
   appendText: string;
+  borderlessMode?: boolean;
   confirmPrintUrl: boolean;
   currentState?: object;
   customStyles: string;
@@ -140,8 +141,9 @@ export interface AppendInterface {
   fontSize: string;
   fontView: string;
   fixedHeader: boolean;
-  fullscreenMode?: boolean;
-  restrictedMode?: boolean;
+  fixedHeightMode?: boolean;
+  fullWidthMode?: boolean;
+  overflowMode?: boolean;
   keyMap?: Object;
   monacoEditorLanguage: string;
   printURL: boolean;
@@ -908,27 +910,46 @@ export default class AppendEditor extends React.Component<{}, AppendInterface> {
     }
   };
 
-  toggleRestrictedMode = () => {
-    if (!this.state.restrictedMode) {
-      this.setState({
-        restrictedMode: true,
-      });
-    } else if (this.state.restrictedMode) {
-      this.setState(
-        {
-          restrictedMode: false,
-        },
-        () => {
-          this.refreshView();
-        }
-      );
-    }
+  toggleBorderlessMode = () => {
+    this.setState(
+      {
+        borderlessMode: !this.state.borderlessMode,
+      },
+      () => {
+        this.refreshEdit();
+        this.refreshView();
+      }
+    );
+  };
+
+  toggleFixedHeightMode = () => {
+    this.setState(
+      {
+        fixedHeightMode: !this.state.fixedHeightMode,
+      },
+      () => {
+        this.refreshEdit();
+        this.refreshView();
+      }
+    );
+  };
+
+  toggleFullWidthMode = () => {
+    this.setState(
+      {
+        fullWidthMode: !this.state.fullWidthMode,
+      },
+      () => {
+        this.refreshEdit();
+        this.refreshView();
+      }
+    );
   };
 
-  toggleFullscreenMode = () => {
+  toggleOverflowMode = () => {
     this.setState(
       {
-        fullscreenMode: !this.state.fullscreenMode,
+        overflowMode: !this.state.overflowMode,
       },
       () => {
         this.refreshEdit();
@@ -950,8 +971,8 @@ export default class AppendEditor extends React.Component<{}, AppendInterface> {
               appendMode: false,
               editMode: false,
               fixedHeader: false,
-              fullscreenMode: false,
-              restrictedMode: false,
+              fullWidthMode: false,
+              fixedHeightMode: false,
               settingsMode: true,
               showAppendix: false, // Hides the scroll up/down buttons
               showHeader: false,
@@ -1125,7 +1146,7 @@ export default class AppendEditor extends React.Component<{}, AppendInterface> {
     let fontSizeStyle = '';
     if (this.state.fontSize) {
       fontSizeStyle =
-        '.CodeMirror, .DynamicEditor, .ProseMirror, #editTextArea, #appendTextArea, #renderedNote {font-size: ' +
+        '.CodeMirror, .DynamicEditor, .MonacoEditorContainer, .ProseMirror, #editTextArea, #appendTextArea, #renderedNote {font-size: ' +
         this.state.fontSize +
         ';}\n';
     }
@@ -1230,7 +1251,7 @@ export default class AppendEditor extends React.Component<{}, AppendInterface> {
         appendTextArea.scrollTop = 10000000;
       }
     }
-    if (this.state.restrictedMode) {
+    if (this.state.fixedHeightMode) {
       const view = document.getElementById(viewID);
       if (view) {
         view.scrollTop = 10000000;
@@ -1281,7 +1302,7 @@ export default class AppendEditor extends React.Component<{}, AppendInterface> {
         appendTextArea.scrollTop = 0;
       }
     }
-    if (this.state.restrictedMode) {
+    if (this.state.fixedHeightMode) {
       const view = document.getElementById(viewID);
       if (view) {
         view.scrollTop = 0;
@@ -1800,24 +1821,30 @@ export default class AppendEditor extends React.Component<{}, AppendInterface> {
           id={contentID}
           className={
             'content' +
-            (this.state.fixedHeader ? ' fixed' : '') +
-            (this.state.restrictedMode ? ' restricted' : '') +
-            (this.state.fullscreenMode ? ' fullscreen' : '')
+            (this.state.fixedHeader ? ' fixed-header' : '') +
+            (this.state.borderlessMode ? ' borderless' : '') +
+            (this.state.fixedHeightMode ? ' fixed-height' : '') +
+            (this.state.fullWidthMode ? ' full-width' : '') +
+            (this.state.overflowMode ? ' overflow' : '')
           }
         >
           {this.state.showMenu && (
             <Menu
+              borderlessMode={this.state.borderlessMode}
               editingMode={this.state.editingMode}
-              fullscreenMode={this.state.fullscreenMode}
+              fixedHeightMode={this.state.fixedHeightMode}
+              fullWidthMode={this.state.fullWidthMode}
               monacoEditorLanguage={this.state.monacoEditorLanguage}
               onConfirmPrintUrl={this.onConfirmPrintUrl}
+              overflowMode={this.state.overflowMode}
               refreshEdit={this.refreshEdit}
               refreshView={this.refreshView}
-              restrictedMode={this.state.restrictedMode}
               saveText={this.saveText}
               text={this.state.text}
-              toggleFullscreenMode={this.toggleFullscreenMode}
-              toggleRestrictedMode={this.toggleRestrictedMode}
+              toggleBorderlessMode={this.toggleBorderlessMode}
+              toggleFixedHeightMode={this.toggleFixedHeightMode}
+              toggleFullWidthMode={this.toggleFullWidthMode}
+              toggleOverflowMode={this.toggleOverflowMode}
               toggleShowMenu={this.toggleShowMenu}
               useDynamicEditor={useDynamicEditor}
               useMonacoEditor={useMonacoEditor}
@@ -1935,7 +1962,9 @@ export default class AppendEditor extends React.Component<{}, AppendInterface> {
           <div
             id={appendixID}
             className={
-              'appendix' + (this.state.fullscreenMode ? ' fullscreen' : '')
+              'appendix' +
+              (this.state.borderlessMode ? ' borderless' : '') +
+              (this.state.fullWidthMode ? ' full-width' : '')
             }
           >
             {this.state.appendMode && (