TheodoreChu/append-editor v1.2.0

on GitHub

Version v1.2.0 of the Append Editor includes many improvements to its usability and performance. It features a new menu with four new options to customize the appearance of the editor (Borderless, Fixed Height, Full Width, and Overflow visible), buttons to copy the raw text and rendered HTML of your note, and options to format your Markdown with Prettier and to uncheck all checkboxes. It also includes improved support for writing in HTML, a fixed header when scrolling up, and improved performance for long notes (over 10,000 characters). If your note is long, the editor will automatically wait until you finish typing before re-rendering your Markdown (meanwhile, the editor continues to save your note). This version also comes with a rewritten Introduction and Help, so it's easier than ever to get started.

Features

1. Four additional options for view mode
   • Borderless - Blends borders and margins into the background for a cleaner look. b969981
   • Fixed Height - Limits the height of the content container for easier side-by-side editing. Unfortunately, KaTeX does not seem to respect the height limit, so if you use KaTeX you can end up scrolling past the container (I don't know how to fix this yet). b969981 7e285f3 cbdebbf
   • Full Width - Full width is Borderless plus unset maximum widths for each main container (edit, view, append). By default, each container width is set to max of 700px or so to improve the readability of each note. If you want to use the full width of your screen in No Distraction or perhaps want to use the full width of the editing window, then try Full Width mode. b969981
   • Horizontal Overflow - When Horizontal Overflow is set to visible and you also have Fixed Height and Full Width on, then it is much easier to edit large tables and preformatted text. It also turns overflow-wrap from break-word to normal. b969981

Each of these modes are saved in the editor in the same was as person default settings. They persist between notes and sessions. 4060b27

1. Options to share
   • Copy raw note text (like with the Action Bar) - This is useful for loading/using code snippets written and stored inside the editor or emails drafted inside the editor. f1d7142
   • Copy rendered HTML from the note as it appears with in the note (before custom styles) - This is useful for publishing your note somewhere else, such as a Wordpress or Ghost blog, and still use many of the features in the Append Editor, such as KaTeX. f1d7142
   • Print rendered note - this used to be in the Header, but it has been moved to the Menu to make the UI cleaner. 23e33ec
2. Actions for Quick Edits
   • Format Markdown text with Prettier. Prettier's parser for markdown, remark-parse, is the same parser that is used to parse Markdown in Plaintext, CodeMirror, and Dynamic modes. If you use Prettier in VS Code, then it is nice to have it in the Append Editor as well. The icon is orange to indicate a Warning that undesired changes may occur. You can easily undo changes with the Format action with the note history feature built into Standard Notes. 4f254e5
   • Uncheck all checkboxes (using Regex). This finds each - [x] and replaces it with - [ ]. This is useful if you want to use the Append Editor as a repeated checklist, such as a 'preflight' list, or a workout or shopping checklist. The icon is red to indicate a Danger that undesired changes may occur. You can easily undo this with the note history feature built into Standard Notes. You can learn more about how to use the Append Editor for to-do lists and checklists here (Hint: you can drag to-dos by triple-clicking the row containing a todo item). f1d7142
3. Fixed header on scroll up
   • Previously, you needed to scroll all the way up to access the Header. Now the Header appears when you scroll up. I wonder I should include an option to pin the header to the top as we had it before. If you have an opinion, please let me know. bbc18f8
4. Debounced Rendering
   • When your note is long (over 10,000 characters), the editor will automatically slow the rendering of your Markdown until you finish typing. This significantly improves the usability of the Append Editor for editing long notes. a43df0e 8858a57 7fe684f

Fixes and Improvements

1. Fixed issues with incorrect or incomplete HTML causing the app to crash. Now, the app will display an Error instead of crashing. ee33346 48930f2
2. Rewrote Intro and Help to be more useful, turn the icons into buttons af94158 814e6bc 9ebce6b 95bb261
3. Open View Mode and scrolling up when Help is turned on 7b65c04
4. Skip to Bottom when pressing Append (so you can easily Append again) de7e6b0
5. Load the correct custom styles when loading the default settings in the Settings 971807f
6. Improve mobile styles for input and select elements in Settings ee75f61
7. Make Monaco Editor Container height scale with font size b969981 b969981#comments
8. Open View Mode when turning Help on and scroll to top so Help is immediately visible 7b65c04
9. Load previous state plus changes after saving Settings (previously it would open View Only mode) 50d3c07

Behind the screens

1. Updated dependencies for everything except node-sass bea83f3
2. Refactored scrolling up and down to be cleaner and more efficient. This was necessary after working with the fixed header on Scroll bbc18f8 de1eeb4 21bbd30
3. Refactored Help and Intro into their own components a6448b6
4. Refactored Icons and Menu buttons into reusable components (icons are used in Intro, Help, Settings, Error, PrintDialog, Menu, and Header) 483c198
5. Refactored the Printing to rely on CSS only (instate of this.state) 23e33ec
6. Refactored how to save defaultSettings. It was previously saved 7 default settings individually, but now I save them as a single stringified JSON object and then parse it when I load it. This improves the efficiency of saving and loading personal default settings and is backwards compatible with default settings saved with v1.1.0-v1.1.2, but default settings saved in this version are not loaded in versions that came before 1ccf177 4060b27
7. Split markdown rendering into a separate lib file a43df0e
8. Cleaned up a lot of the styles. I deleted excess commented-out styles, removed redundancies, removed unused styles 596dc3e 13c72e7 23e33ec
9. Removed use of this.state.useCodeMirror in the state for AppendEditor.tsx. This makes the this.state.editingMode the source of truth for which editingMode to use. Previously, useCodeMirror would take preference over editingMode. 8f709c3
10. Use a Node.JS.Timeout to prevent repeated uses of refreshEditor from triggering 8f709c3
11. Moved icons out of the public directory into root 96f71bb
12. Refactored many constants for Id's and editingMode into enums. 4b993ab c3f9260
13. Add .vscode folder and husky 6176a01

See the full changelogs for the details of every change in this release.