Append Editor Versions Save

Summary

Version v1.2.6 features updated dependencies and various improvements to the styling and functionality.

The most notable changes include:

• Table of contents generated by ### toc, #### table of contents, or similar headings in Plain Textarea, CodeMirror, and Monaco editing modes are more compact
• When using Dynamic editing mode, the Pencil and Eye buttons switch directly between Edit Only and View Only. There won't be a Split unless Split was already active before selecting Dynamic in the Settings
• The dropdown menu in Dynamic should now drop down instead of up
• Clicking Print automatically opens View mode so you don't have to do it yourself. Plus, the margin and padding of the View container is removed when printing so you can make full use of the margin customization built into Microsoft Edge and similar browsers
• The editor will now slow the rendering of your Markdown when your notes are greater than 2500 characters instead of 10000 to help improve the performance of shorter KaTeX or Markdown intensive notes

I also optimized the code and reduced the download size from 12.2MB to 10.5MB

Fixes and Features

• fix: removed excess padding-left/right for .cm-comment 66329d02d6fd99e3f4b19b5280390f6086a326bc
• feat: make generated ToC compact e31fe945770007ab97af09ad335299ea711850ff
• fix: removed unnecessary scrollbar when using Monaco Editor. removed .sk-panel-content, unecessary styles a6a2f699f2dcb8f8bade2525c30647bdc3b9e4b5
• fix: center X in undoDialogButton fd7b9835fff8defb469f2dd154537fb6893ea53b
• fix: remove extra space under editor when using fixed height and KaTeX 3c988cc22a620dab09ab0a40b91c6318fcca3c4f
• fix: remove excess margin, padding when printing c77a0b1075d240bd65d3503ea811a0bc1f5b3d4e
• fix: reduced isLongString threshold to 2,500. improves performance of shorter KaTeX or Markdown intensive notes. also trigger renderLongMarkdown when rendering short notes to ease transition from short to long 6e738621cbd77a7b9e4f9f35e5da1d65ef770142
• fix: remove excess margins for Dynamic Editor for headers and printing e8b2e33488f0b17cf3f39124aa796e8e590c001d
• feat: turn viewMode on before printing c4e6e9b10dcaf3dcb3b496f8697ac52e866fa995
• feat: when using DynamicEditor, automatically close edit/view mode when toggling the other d422fde45a515c40bb5d58639ed1ebfa4e8597e7
• fix: issues with full-width caused by previous changes to .sk-panel.main. also further simplified styles for .sk-panel.main 49d89816de19646ac8c4c8d8a040d4bdf8ed5cb3
• fix: make header font-weight in Dynamic consistent with other editingModes cc2e7e26454bea3e8eba8904b464496bd8631106
• fix: the menu in Dynamic doesn't dropdown in editOnly mode 7c4475a4e672ae5bb989df5564b540e2f6c844d2

Behind the scenes

• chore(deps): bump rme and monaco-editor 153860f
• chore(deps): update monaco-editor to 0.22.3. switches /monaco package manager from npm to yarn. switches mode in monaco/webpack.config.js from development to production. removes unused/unnecessary/duplicated bundle files d3244f2
• chore(deps): bump sn-stylekit 3026ae3
• refactor: simplify steps to build monaco editor workers c1eda10
• fix: do not load monaco editor files unless using monaco editor. this will hopefully improve load times de6969d
• chore(deps): update sn-editor-kit to 1.0.9 9ea4897
• fix: make alpha ext.json point to develop branch 54872cabec724c061726b21820dcb03d8fc217d2
• refactor: resolve lint warnings for React.Keys, clipRule, and fillRule 86e987ea7cfef74c55166f178aafd885971f66c7

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

Improvements

• chore(deps): bump rme and monaco-editor 153860f
• chore(deps): update monaco-editor to 0.22.3. switches /monaco package manager from npm to yarn. switches mode in monaco/webpack.config.js from development to production. removes unused/unnecessary/duplicated bundle files d3244f2
• chore(deps): bump sn-stylekit 3026ae3
• refactor: simplify steps to build monaco editor workers c1eda10
• fix: do not load monaco editor files unless using monaco editor. this will hopefully improve load times de6969d
• chore(deps): update sn-editor-kit to 1.0.9 9ea4897

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

fix: editor not loading on mobile. reverts editor-kit back to v1.0.6 (it was working fine on web/desktop but not on mobile) https://github.com/TheodoreChu/append-editor/commit/8c1f6428de3c2eeb4495f3655603e373c81e0e40

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

Changes

• chore(deps): bump all deps except node-sass. includes latest version of SN component-relay, rich-markdown-editor, and monaco-editor bec61df

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

Improvements

• fix: Monaco intellisense not working for scss, less, handlebars, razor 72ee9a41d22c417f7825b4eeff15bd7bfa2ec652
• updated Rich Markdown Editor. This includes improved support for images 0bb6981af6df0b6c7184a63750bff7b0ade9a722

Behind the scenes

• chore(deps): bump all deps except node-sass 0bb6981af6df0b6c7184a63750bff7b0ade9a722
• refactor: move the Monaco Editor files into its own monaco folder f48797f89045aadedfc3bbe606b1b8758496cb85
• refactor: make public/*.{html,json} files prettier aa3a3b88212b6950e5631abedeb8d889a7379683
• chore: remove unused files: .babelrc, webpack.config.js 68e7bffa5f4cf661485eda53400bc1827be48831

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

Improvements

• Stop adding extra spaces when pressing shift+enter https://github.com/TheodoreChu/append-editor/commit/e7182d963f4f3e813115e247019f5d86bd706200
• Bump Rich Markdown Editor (fixes issues with word-wrap in lists) https://github.com/TheodoreChu/append-editor/commit/c4b67f6b9c9915aa68fcf93f4e939dd9c4571eb4
• Updates to README.md https://github.com/TheodoreChu/append-editor/commit/13d87830fce82b6654aac90b47c15437bce61a05

Behind the scenes

• Bump the rest of the dependencies except node-sass (mostly dev dependencies) https://github.com/TheodoreChu/append-editor/commit/02ca10d580f636640130eefa84ff99c8afbab2ee https://github.com/TheodoreChu/append-editor/commit/ba80504a31bc566d59c27744ecd0cc59b5143ceb https://github.com/TheodoreChu/append-editor/commit/c6d99817fdad7a17565210c103a8d359aa7d56df https://github.com/TheodoreChu/append-editor/commit/3058bae177bc7a0af06f2740abf24a35936fe22e

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

Improvements

• Make background color of PlainTextarea and CodeMirror not contrast when using dark mode ccff746
• 4dd2186
• Styles for Settings: checkbox input, custom CSS buttons, make undo button for custom CSS appear on the right instead of underneath the caption 9aec561
• Improve Edit Only Mode on mobile when using PlainTextarea and CodeMirror 6e855fc
• Increased the height of MonacoEditorContainer to make Custom CSS easier to use 6e855fc
• Improve overflow mode for Dynamic Editor. makes overflow visible, overflow-wrap normal, and word-break normal 31b32e3
• Improved Gemoji support 89ab38e
• Make View Mode bold in Intro to be more consistent f57d2ab

Docs

• Add subheaders to Settings in README.md ccff746
• Add info about privacy and security fcb4d38
• Add table of contents dc5389c
• Improve instructions for development, testing, and deployment c4d96e6

Behind the scenes

• Removed unused functions: makeContentEditable and removeContentEditable d81e983
• Switch from remark-emoji to remark-gemoji 89ab38e

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

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. b969981a5a96a205015461c8298759f180d43fdb
   • 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). b969981a5a96a205015461c8298759f180d43fdb 7e285f3a7aaa68fa2eea07a534f37108ae4afae1 cbdebbf21b7cb3685e1c5e9718a2eec6532535ba
   • 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. b969981a5a96a205015461c8298759f180d43fdb
   • 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. b969981a5a96a205015461c8298759f180d43fdb

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

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. f1d71429587552afad6f78c8e74d05c33bbba5ae
   • 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. f1d71429587552afad6f78c8e74d05c33bbba5ae
   • Print rendered note - this used to be in the Header, but it has been moved to the Menu to make the UI cleaner. 23e33ec18d73d7f5221ea33b8cf07570fe156db8
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. 4f254e5685df90948bff0ce1a79b5a7755767e5e
   • 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). f1d71429587552afad6f78c8e74d05c33bbba5ae
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. bbc18f803a98ced84de7d0232651e930c9985e10
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. a43df0e8e800103deca18fe3ac9374e1250bd84e 8858a57045051c4a4dcee0575af9f26c55daf474 7fe684fb9f7b561d2ae633cbbe6bb654ed01989e

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. ee333461ba6a945dc81c4c0e16ccf8f52ab42d09 48930f2818bdce745ad61f09e0cf05553d5b307a
2. Rewrote Intro and Help to be more useful, turn the icons into buttons af9415856b84df95ba83ea0e3b211cafc45e3978 814e6bc00e4bf7148d6ab21c4687f14e7d215e0c 9ebce6ba963ebb3b5aecb658f803994aa4f694f2 95bb261308ae2ac8f0e524e99f19cfc57883e3da
3. Open View Mode and scrolling up when Help is turned on 7b65c046b2dd6e9529e75b237b115a56914861f9
4. Skip to Bottom when pressing Append (so you can easily Append again) de7e6b01b8f3241e8d553e9ad47e76106d65ef0d
5. Load the correct custom styles when loading the default settings in the Settings 971807ffcf3f29430932ce63d168cfa5cd1ac4af
6. Improve mobile styles for input and select elements in Settings ee75f61aef6d11ddb18c4e6806d57350275e17d8
7. Make Monaco Editor Container height scale with font size b969981a5a96a205015461c8298759f180d43fdb https://github.com/TheodoreChu/append-editor/commit/b969981a5a96a205015461c8298759f180d43fdb#comments
8. Open View Mode when turning Help on and scroll to top so Help is immediately visible 7b65c046b2dd6e9529e75b237b115a56914861f9
9. Load previous state plus changes after saving Settings (previously it would open View Only mode) 50d3c071c22f744460ba02a0d2f3c5bde0a6f821

Behind the screens

1. Updated dependencies for everything except node-sass bea83f304f3ab0f5c96f51ea9472d24813c61001
2. Refactored scrolling up and down to be cleaner and more efficient. This was necessary after working with the fixed header on Scroll bbc18f803a98ced84de7d0232651e930c9985e10 de1eeb4bea553f0d56a9589f5470b48a8965c945 21bbd300a9fac21c4fdfb7bfe42c529a02eaf51f
3. Refactored Help and Intro into their own components a6448b63cda988d844a89258c15519a20c5dc9df
4. Refactored Icons and Menu buttons into reusable components (icons are used in Intro, Help, Settings, Error, PrintDialog, Menu, and Header) 483c198832069e6e1d41eb194d3e8b0397020de1
5. Refactored the Printing to rely on CSS only (instate of this.state) 23e33ec18d73d7f5221ea33b8cf07570fe156db8
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 1ccf17708421ebd08ccad48c49e363c5dc1820a0 4060b272acfbb986a1f3a5e86c372996986aa430
7. Split markdown rendering into a separate lib file a43df0e8e800103deca18fe3ac9374e1250bd84e
8. Cleaned up a lot of the styles. I deleted excess commented-out styles, removed redundancies, removed unused styles 596dc3e5183300b588972f0f05aed4c71305bba7 13c72e788b191f957aa19c9e273ea17e8287730d 23e33ec18d73d7f5221ea33b8cf07570fe156db8
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. 8f709c379a472cff4496c352d6cc77052f1b44b4
10. Use a Node.JS.Timeout to prevent repeated uses of refreshEditor from triggering 8f709c379a472cff4496c352d6cc77052f1b44b4
11. Moved icons out of the public directory into root 96f71bbcd84ce9ca3d0012140003bc67820a58cf
12. Refactored many constants for Id's and editingMode into enums. 4b993abd22cec7ab3703bc3c9d53f43ce096db5c c3f9260f4d522cc1c340bf0f46360092471163ea
13. Add .vscode folder and husky 6176a01112f5f421f6b4e62c05fac7078db0334e

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

Fixes

• When creating headers in new notes with the Dynamic editing mode, the header would have a white bottom margin (bar underneath) even in dark mode. The bar now uses the appropriate background color 22aaad95c48d83456c4f3b1c2e27f5d35a3f9eff

Behind the scenes

• Switched latest_url from develop to main branch 82ab6668ff6dd6481fbb8a04a185d0fc90a6fd32
• Refactored the styles for the Dynamic Editor into separate .scss file 9e5ab3972b35d0b2960cde3f747917babcec9ad2

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

Features

• Automatically open edit mode when creating a new note

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