Skip to content

Commit

Permalink
fix: improve Edit Only Mode on mobile when using PlainTextarea and Co…
Browse files Browse the repository at this point in the history
…deMirror

also increased the height of MonacoEditorContainer to make Custom CSS easier to use
  • Loading branch information
TheodoreChu committed Dec 16, 2020
1 parent 9aec561 commit 6e855fc
Show file tree
Hide file tree
Showing 15 changed files with 109 additions and 24 deletions.
12 changes: 6 additions & 6 deletions build/asset-manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
"static/js/0.39eaacde.chunk.js.map": "./static/js/0.39eaacde.chunk.js.map",
"static/js/1.94a8704a.chunk.js": "./static/js/1.94a8704a.chunk.js",
"static/js/1.94a8704a.chunk.js.map": "./static/js/1.94a8704a.chunk.js.map",
"main.css": "./static/css/main.7af3225e.chunk.css",
"main.js": "./static/js/main.a39a299e.chunk.js",
"main.js.map": "./static/js/main.a39a299e.chunk.js.map",
"main.css": "./static/css/main.9e9378f5.chunk.css",
"main.js": "./static/js/main.5674bb15.chunk.js",
"main.js.map": "./static/js/main.5674bb15.chunk.js.map",
"runtime-main.js": "./static/js/runtime-main.4405e875.js",
"runtime-main.js.map": "./static/js/runtime-main.4405e875.js.map",
"static/css/4.7c0a8645.chunk.css": "./static/css/4.7c0a8645.chunk.css",
Expand Down Expand Up @@ -152,7 +152,7 @@
"static/js/73.a6cb7cb2.chunk.js.map": "./static/js/73.a6cb7cb2.chunk.js.map",
"index.html": "./index.html",
"static/css/4.7c0a8645.chunk.css.map": "./static/css/4.7c0a8645.chunk.css.map",
"static/css/main.7af3225e.chunk.css.map": "./static/css/main.7af3225e.chunk.css.map",
"static/css/main.9e9378f5.chunk.css.map": "./static/css/main.9e9378f5.chunk.css.map",
"static/js/4.045e3eee.chunk.js.LICENSE.txt": "./static/js/4.045e3eee.chunk.js.LICENSE.txt",
"static/js/65.3aec7f39.chunk.js.LICENSE.txt": "./static/js/65.3aec7f39.chunk.js.LICENSE.txt",
"static/media/codicon.css": "./static/media/codicon.b3726f01.ttf"
Expand All @@ -161,7 +161,7 @@
"static/js/runtime-main.4405e875.js",
"static/css/4.7c0a8645.chunk.css",
"static/js/4.045e3eee.chunk.js",
"static/css/main.7af3225e.chunk.css",
"static/js/main.a39a299e.chunk.js"
"static/css/main.9e9378f5.chunk.css",
"static/js/main.5674bb15.chunk.js"
]
}
2 changes: 1 addition & 1 deletion build/index.html
Original file line number Diff line number Diff line change
@@ -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.7af3225e.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 a,o,f=r[0],d=r[1],u=r[2],i=0,l=[];i<f.length;i++)o=f[i],Object.prototype.hasOwnProperty.call(n,o)&&n[o]&&l.push(n[o][0]),n[o]=0;for(a in d)Object.prototype.hasOwnProperty.call(d,a)&&(e[a]=d[a]);for(b&&b(r);l.length;)l.shift()();return c.push.apply(c,u||[]),t()}function t(){for(var e,r=0;r<c.length;r++){for(var t=c[r],a=!0,f=1;f<t.length;f++){var d=t[f];0!==n[d]&&(a=!1)}a&&(c.splice(r--,1),e=o(o.s=t[0]))}return e}var a={},n={3:0},c=[];function o(r){if(a[r])return a[r].exports;var t=a[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=n[e];if(0!==t)if(t)r.push(t[2]);else{var a=new Promise((function(r,a){t=n[e]=[r,a]}));r.push(t[2]=a);var c,f=document.createElement("script");f.charset="utf-8",f.timeout=120,o.nc&&f.setAttribute("nonce",o.nc),f.src=function(e){return o.p+"static/js/"+({}[e]||e)+"."+{0:"39eaacde",1:"94a8704a",5:"a177ed4b",6:"05c4187d",7:"ab471150",8:"d0b9a72a",9:"d1f41cce",10:"763c08cc",11:"ba4fa629",12:"5e807283",13:"5baa6acb",14:"54a7d892",15:"15fecc7f",16:"e01fb9b0",17:"b7185cca",18:"1097a363",19:"6f717f9b",20:"20fd559a",21:"f62af302",22:"a022f41f",23:"87d98a6c",24:"fac9919a",25:"1a023eec",26:"7650a72a",27:"d156e25b",28:"416d21dd",29:"1a796f6d",30:"7bc991c8",31:"5de30043",32:"b32b80ad",33:"5c73a938",34:"7cad957d",35:"5bd68534",36:"8d01591a",37:"69562bfd",38:"91bd981a",39:"ad84387b",40:"19160149",41:"065333df",42:"a2daad98",43:"7ee02558",44:"22493baf",45:"3076e21f",46:"acb07196",47:"e5856dcb",48:"c61dcccc",49:"74883327",50:"d55bc92d",51:"7a0e96e1",52:"b171d0b6",53:"89d043e5",54:"ca7cb7b9",55:"d7651d53",56:"96b2c909",57:"38c08e50",58:"06c76a6b",59:"7bfa8249",60:"5bbdd121",61:"fbf4f30e",62:"3b9e2cf8",63:"ab17e2bc",64:"e934aa47",65:"3aec7f39",66:"0a93a5fb",67:"a69f4bc4",68:"45463cfd",69:"34bff24b",70:"bd5b7f44",71:"8abfd081",72:"0093180a",73:"a6cb7cb2"}[e]+".chunk.js"}(e);var d=new Error;c=function(r){f.onerror=f.onload=null,clearTimeout(u);var t=n[e];if(0!==t){if(t){var a=r&&("load"===r.type?"missing":r.type),c=r&&r.target&&r.target.src;d.message="Loading chunk "+e+" failed.\n("+a+": "+c+")",d.name="ChunkLoadError",d.type=a,d.request=c,t[1](d)}n[e]=void 0}};var u=setTimeout((function(){c({type:"timeout",target:f})}),12e4);f.onerror=f.onload=c,document.head.appendChild(f)}return Promise.all(r)},o.m=e,o.c=a,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 a in e)o.d(t,a,function(r){return e[r]}.bind(null,a));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 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 b=d;t()}([])</script><script src="./static/js/4.045e3eee.chunk.js"></script><script src="./static/js/main.a39a299e.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.9e9378f5.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 a,o,f=r[0],d=r[1],u=r[2],i=0,l=[];i<f.length;i++)o=f[i],Object.prototype.hasOwnProperty.call(n,o)&&n[o]&&l.push(n[o][0]),n[o]=0;for(a in d)Object.prototype.hasOwnProperty.call(d,a)&&(e[a]=d[a]);for(b&&b(r);l.length;)l.shift()();return c.push.apply(c,u||[]),t()}function t(){for(var e,r=0;r<c.length;r++){for(var t=c[r],a=!0,f=1;f<t.length;f++){var d=t[f];0!==n[d]&&(a=!1)}a&&(c.splice(r--,1),e=o(o.s=t[0]))}return e}var a={},n={3:0},c=[];function o(r){if(a[r])return a[r].exports;var t=a[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=n[e];if(0!==t)if(t)r.push(t[2]);else{var a=new Promise((function(r,a){t=n[e]=[r,a]}));r.push(t[2]=a);var c,f=document.createElement("script");f.charset="utf-8",f.timeout=120,o.nc&&f.setAttribute("nonce",o.nc),f.src=function(e){return o.p+"static/js/"+({}[e]||e)+"."+{0:"39eaacde",1:"94a8704a",5:"a177ed4b",6:"05c4187d",7:"ab471150",8:"d0b9a72a",9:"d1f41cce",10:"763c08cc",11:"ba4fa629",12:"5e807283",13:"5baa6acb",14:"54a7d892",15:"15fecc7f",16:"e01fb9b0",17:"b7185cca",18:"1097a363",19:"6f717f9b",20:"20fd559a",21:"f62af302",22:"a022f41f",23:"87d98a6c",24:"fac9919a",25:"1a023eec",26:"7650a72a",27:"d156e25b",28:"416d21dd",29:"1a796f6d",30:"7bc991c8",31:"5de30043",32:"b32b80ad",33:"5c73a938",34:"7cad957d",35:"5bd68534",36:"8d01591a",37:"69562bfd",38:"91bd981a",39:"ad84387b",40:"19160149",41:"065333df",42:"a2daad98",43:"7ee02558",44:"22493baf",45:"3076e21f",46:"acb07196",47:"e5856dcb",48:"c61dcccc",49:"74883327",50:"d55bc92d",51:"7a0e96e1",52:"b171d0b6",53:"89d043e5",54:"ca7cb7b9",55:"d7651d53",56:"96b2c909",57:"38c08e50",58:"06c76a6b",59:"7bfa8249",60:"5bbdd121",61:"fbf4f30e",62:"3b9e2cf8",63:"ab17e2bc",64:"e934aa47",65:"3aec7f39",66:"0a93a5fb",67:"a69f4bc4",68:"45463cfd",69:"34bff24b",70:"bd5b7f44",71:"8abfd081",72:"0093180a",73:"a6cb7cb2"}[e]+".chunk.js"}(e);var d=new Error;c=function(r){f.onerror=f.onload=null,clearTimeout(u);var t=n[e];if(0!==t){if(t){var a=r&&("load"===r.type?"missing":r.type),c=r&&r.target&&r.target.src;d.message="Loading chunk "+e+" failed.\n("+a+": "+c+")",d.name="ChunkLoadError",d.type=a,d.request=c,t[1](d)}n[e]=void 0}};var u=setTimeout((function(){c({type:"timeout",target:f})}),12e4);f.onerror=f.onload=c,document.head.appendChild(f)}return Promise.all(r)},o.m=e,o.c=a,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 a in e)o.d(t,a,function(r){return e[r]}.bind(null,a));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 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 b=d;t()}([])</script><script src="./static/js/4.045e3eee.chunk.js"></script><script src="./static/js/main.5674bb15.chunk.js"></script></body></html>
2 changes: 0 additions & 2 deletions build/static/css/main.7af3225e.chunk.css

This file was deleted.

1 change: 0 additions & 1 deletion build/static/css/main.7af3225e.chunk.css.map

This file was deleted.

2 changes: 2 additions & 0 deletions build/static/css/main.9e9378f5.chunk.css

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions build/static/css/main.9e9378f5.chunk.css.map

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions build/static/js/main.5674bb15.chunk.js

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions build/static/js/main.5674bb15.chunk.js.map

Large diffs are not rendered by default.

2 changes: 0 additions & 2 deletions build/static/js/main.a39a299e.chunk.js

This file was deleted.

1 change: 0 additions & 1 deletion build/static/js/main.a39a299e.chunk.js.map

This file was deleted.

53 changes: 51 additions & 2 deletions src/components/AppendEditor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ export enum HtmlElementId {
export enum HtmlClassName {
fixed = 'fixed',
fixedHeader = 'fixed-header',
focused = 'focused',
}

export enum EditingModes {
Expand Down Expand Up @@ -792,6 +793,18 @@ export default class AppendEditor extends React.Component<{}, AppendInterface> {
editCodeMirror.save();
this.saveText(editCodeMirrorText);
});
editCodeMirror.on('blur', (cm: Editor, event: FocusEvent) => {
const content = document.getElementById(HtmlElementId.content);
if (content) {
content.classList.remove(HtmlClassName.focused);
}
});
editCodeMirror.on('focus', (cm: Editor, event: FocusEvent) => {
const content = document.getElementById(HtmlElementId.content);
if (content) {
content.classList.add(HtmlClassName.focused);
}
});
editCodeMirror.on('keydown', (cm: Editor, event: KeyboardEvent) => {
this.onKeyDown(event);
this.onKeyDownEditTextArea(event);
Expand Down Expand Up @@ -1772,7 +1785,20 @@ export default class AppendEditor extends React.Component<{}, AppendInterface> {
window.scrollY > last_known_scroll_position &&
!this.state.showMenu
) {
this.removeFixedHeader();
if (
// If NOT using Edit Only mode with PlainText and CodeMirror
!(
(this.state.editingMode === undefined ||
this.state.editingMode === EditingModes.usePlainText ||
this.state.editingMode === EditingModes.useCodeMirror) &&
this.state.editMode &&
!this.state.appendMode &&
!this.state.settingsMode &&
!this.state.viewMode
)
) {
this.removeFixedHeader();
}
}
last_known_scroll_position = window.scrollY;
}
Expand Down Expand Up @@ -1813,7 +1839,21 @@ export default class AppendEditor extends React.Component<{}, AppendInterface> {
onBlur={this.onBlur}
>
{this.state.showHeader && [
<div id={HtmlElementId.header} className={'header'}>
<div
id={HtmlElementId.header}
className={
'header' +
((this.state.editingMode === undefined ||
this.state.editingMode === EditingModes.usePlainText ||
this.state.editingMode === EditingModes.useCodeMirror) &&
this.state.editMode &&
!this.state.appendMode &&
!this.state.settingsMode &&
!this.state.viewMode
? ' fixed'
: '')
}
>
<div className="sk-button-group">
<button
type="button"
Expand Down Expand Up @@ -1958,6 +1998,15 @@ export default class AppendEditor extends React.Component<{}, AppendInterface> {
id={HtmlElementId.content}
className={
'content' +
((this.state.editingMode === undefined ||
this.state.editingMode === EditingModes.usePlainText ||
this.state.editingMode === EditingModes.useCodeMirror) &&
this.state.editMode &&
!this.state.appendMode &&
!this.state.settingsMode &&
!this.state.viewMode
? ' fixed-header edit-only'
: '') +
(this.state.borderlessMode ? ' borderless' : '') +
(this.state.fixedHeightMode ? ' fixed-height' : '') +
(this.state.fullWidthMode ? ' full-width' : '') +
Expand Down
4 changes: 2 additions & 2 deletions src/components/AppendText.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -191,9 +191,9 @@ export default class AppendText extends React.Component<
>
<div
className={
'sk-panel-content edit ' +
'sk-panel-content edit' +
(this.props.editingMode === EditingModes.useMonacoEditor
? 'monacoEditor'
? ' MonacoEditorContainerParentDiv'
: '')
}
>
Expand Down
24 changes: 20 additions & 4 deletions src/components/EditNote.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { EditingModes } from './AppendEditor';
import { EditingModes, HtmlClassName } from './AppendEditor';
import { MonacoEditor } from './Monaco';
import DynamicEditor from './DynamicEditor';

Expand Down Expand Up @@ -62,6 +62,20 @@ export default class EditNote extends React.Component<EditProps, EditState> {
);
};

onBlur = (e: React.FocusEvent) => {
const content = document.getElementById(HtmlElementId.content);
if (content) {
content.classList.remove(HtmlClassName.focused);
}
};

onFocus = (e: React.FocusEvent) => {
const content = document.getElementById(HtmlElementId.content);
if (content) {
content.classList.add(HtmlClassName.focused);
}
};

onKeyDown = (e: React.KeyboardEvent) => {
this.props.onKeyDown(e);
this.props.onKeyDownEditTextArea(e);
Expand All @@ -88,9 +102,9 @@ export default class EditNote extends React.Component<EditProps, EditState> {
>
<div
className={
'sk-panel-content edit ' +
'sk-panel-content edit' +
(this.props.editingMode === EditingModes.useMonacoEditor
? 'monacoEditor'
? ' MonacoEditorContainerParentDiv'
: '')
}
id={HtmlElementId.edit}
Expand All @@ -116,12 +130,14 @@ export default class EditNote extends React.Component<EditProps, EditState> {
<textarea
id={HtmlElementId.editTextArea}
name="text"
className="sk-input contrast textarea editnote"
className={'sk-input contrast textarea editnote'}
placeholder="Welcome to the Append Editor! 😄"
rows={15}
spellCheck="true"
value={text}
onBlur={this.onBlur}
onChange={this.handleInputChange}
onFocus={this.onFocus}
onKeyDown={this.onKeyDown}
onKeyUp={this.onKeyUp}
/>
Expand Down
2 changes: 2 additions & 0 deletions src/stylesheets/codemirror.scss
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@
background-color: var(--sn-stylekit-contrast-background-color);

@media screen and (max-width: 725px) {
border-left: 0px;
border-right: 0px;
border-top: 1px solid var(--sn-stylekit-border-color);
}
.CodeMirror-scroll,
Expand Down
24 changes: 21 additions & 3 deletions src/stylesheets/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
body,
html {
background-color: transparent;
background-color: var(--sn-stylekit-background-color);
font-family: var(--sn-stylekit-sans-serif-font);
font-size: var(--sn-stylekit-base-font-size);
height: 100%;
Expand Down Expand Up @@ -98,6 +99,9 @@ button:focus {
display: flex;
flex-direction: column;
min-height: 100vh;
@media screen and (max-width: 420px) {
min-height: -webkit-fill-available;
}

.sk-button.info,
.sk-button.neutral {
Expand Down Expand Up @@ -137,7 +141,7 @@ button:focus {

// Hides the horizontal scroll bar when using the Monaco Editor
// Otherwise the horizontal scroll bar will flash when the Monaco editor suggests words
&.monacoEditor {
&.MonacoEditorContainerParentDiv {
overflow-x: hidden !important;
}
}
Expand Down Expand Up @@ -312,6 +316,20 @@ button:focus {
@media screen and (max-width: 725px) {
padding: 0;
}
&.edit-only {
@media screen and (max-width: 420px) {
max-height: calc(100vh - 60.2px);
&.focused {
max-height: 55vh;
.CodeMirror {
max-height: calc(55vh - 0.5rem);
}
}
}
@media screen and (max-width: 330px) {
max-height: calc(100vh - 56.2px);
}
}
&.fixed-header {
padding-top: 60.2px;
@media screen and (max-width: 330px) {
Expand Down Expand Up @@ -765,15 +783,15 @@ button:focus {

.MonacoEditorContainer,
.MonacoDiffEditorContainer {
min-height: 200px;
min-height: 300px;
width: calc(100% - 1.5px);
max-width: inherit;
max-height: inherit;
}

.edit .MonacoEditorContainer,
.edit .MonacoDiffEditorContainer {
min-height: 200px;
min-height: 300px;
height: calc(100% - 1.7em);
margin-bottom: 25px;
}
Expand Down

0 comments on commit 6e855fc

Please sign in to comment.