docs: update features, Settings, acknowledgements, resources

README.md

@@ -21,7 +21,7 @@ You can find the beta demo at [beta.appendeditor.com](https://beta.appendeditor.
 
 The Append Editor follows the "read first" philosophy. When you open your notes, the editor starts in 'read/view only' mode so you can't accidentally accidentally edit old notes. You can easily add to the end of your notes with the Append box at the bottom.
 
-The editor supports Markdown, $\LaTeX/ \KaTeX$, syntax highlighting, inline HTML, table of contents, footnotes, auto-linking, emoji codes, printing/saving to PDF (with and without URLs), custom fonts, optional in-line formatting, search and replace, and more. It is perfect for writing class notes, daily journals, to-do checklists, and code snippets. You can append to your notes whenever you need to jot anything down.
+The editor supports Markdown, $\LaTeX/ \KaTeX$, syntax highlighting, in-line HTML, table of contents, footnotes, auto-linking, emoji codes, printing/saving to PDF (with and without URLs), custom fonts, optional in-line formatting, autocompletion, search and replace, and more. It is perfect for writing blog posts, class notes, daily journals, to-do checklists, and code snippets. You can append to your notes whenever you need to jot anything down.
 
 This editor works best on the [desktop app](https://standardnotes.org/download) and [web app](https://app.standardnotes.org) on a Chromium browser (e.g., Google Chrome or the latest Microsoft Edge) with the [No Distraction](https://standardnotes.org/extensions/no-distraction) theme.
 
@@ -34,10 +34,10 @@ This editor works best on the [desktop app](https://standardnotes.org/download)
 - Visual Studio Code flavored Syntax Highlighting provided by [Rehype Highlight](https://github.com/rehypejs/rehype-highlight) and hosted [Highlight.js](https://github.com/highlightjs/highlight.js) stylesheets
 - Table of Contents (links don't work on mobile) provided by [Remark TOC](https://github.com/remarkjs/remark-toc)
 - Footnotes (links don't work on mobile) provided by [Remark Footnotes](https://github.com/remarkjs/remark-footnotes)
-- Inline HTML for underlining, highlighting, and HTML rendering provided by [Rehype Raw](https://github.com/rehypejs/rehype-raw)
+- In-line HTML for underlining, highlighting, and HTML rendering provided by [Rehype Raw](https://github.com/rehypejs/rehype-raw)
 - Optional in-line formatting for Markdown provided by [CodeMirror](https://codemirror.net)
 - Optional dynamic, what-you-see-is-what-you-get live formatting provided by the [Rich Markdown Editor](https://github.com/outline/rich-markdown-editor) developed by [Outline](https://www.getoutline.com/). Checkboxes are clickable in view/read-only mode
-- Optional in-line syntax highlighting for Markdown and many other programming languages, intelligent auto-completion, and sophisticated search and replace provided by the [Monaco Editor](https://microsoft.github.io/monaco-editor/) (Visual Studio Code)
+- Optional in-line syntax highlighting for Markdown and many other programming languages, intelligent autocompletion, and sophisticated search and replace provided by the [Monaco Editor](https://microsoft.github.io/monaco-editor/) (Visual Studio Code)
   - Languages supported: abap, aes, apex, azcli, bat, c, cameligo, clojure, coffeescript, cpp, csharp, csp, css, dart, dockerfile, fsharp, go, graphql, handlebars, hcl, html, ini, java, javascript, json, julia, kotlin, less, lexon, lua, markdown, mips, msdax, mysql, objective-c, pascal, pascaligo, perl, pgsql, php, plaintext, postiats, powerquery, powershell, pug, python, r, razor, redis, redshift, restructuredtext, ruby, rust, sb, scala, scheme, scss, shell, sol, sql, st, swift, systemverilog, tcl, twig, typescript, vb, verilog, xml, yaml
 
 ### More Features
@@ -56,6 +56,7 @@ This editor works best on the [desktop app](https://standardnotes.org/download)
 - Option to choose custom fonts and font sizes
 - Helpful questions to prompt writing
 - On Web and Desktop, switching notes does not reset the Edit and View modes, making it easy to edit multiple notes in one session
+- Option to save and load personal default settings
 
 ## Installation
 
@@ -88,7 +89,7 @@ After you have installed the editor on the web or desktop app, it will automatic
 ## Keyboard Shortcuts
 
 :::note
-Some keyboard shortcuts currently work in Plaintext and CodeMirror editing modes, but not in the Dynamic and Monaco editing modes.
+The keyboard shortcuts should work in Plaintext and CodeMirror editing modes, but most currently do not work in the Dynamic and Monaco editing modes. Better support for keyboard shortcuts will hopefully be improved in the future.
 :::
 
 | Action                                     | Shortcut                                       |
@@ -121,7 +122,7 @@ Some keyboard shortcuts currently work in Plaintext and CodeMirror editing modes
 | ~~Strike-through~~ | \~\~text\~\~                                 | Ctrl/⌘ + Alt + U         |
 | Link               | [text]\(http://)                             | Ctrl/⌘ + K               |
 | Image              | ![text]\(http://)                            | Ctrl/⌘ + Alt + I         |
-| `Inline Code`      | \`code\`                                     | Ctrl/⌘ + Alt + K         |
+| `In-line Code`     | \`code\`                                     | Ctrl/⌘ + Alt + K         |
 | Code Block         | \`\`\`language <br></br>code <br></br>\`\`\` | 4 spaces or Ctrl/⌘ + Tab |
 | Unordered List     | \* item <br></br> - item <br></br> + item    | Ctrl/⌘ + L               |
 | Ordered List       | 1. item                                      | Ctrl/⌘ + Alt + L         |
@@ -135,9 +136,9 @@ Some keyboard shortcuts currently work in Plaintext and CodeMirror editing modes
 
 \*The shortcuts are currently available only on the Desktop app and Chrome based web apps such as Google Chrome and the latest Microsoft Edge.
 
-### Inline HTML
+### In-line HTML
 
-The Append Editor also supports inline HTML. You can use `<div> </div>` tags for formatting sections and `<span></span>` for formatting text inline. Here are some examples.
+The Append Editor also supports in-line HTML. You can use `<div> </div>` tags for formatting sections and `<span></span>` for formatting text in-line. Here are some examples.
 
 1. Underlined text:
 
@@ -156,7 +157,7 @@ The Append Editor also supports inline HTML. You can use `<div> </div>` tags for
 1. Different font families and sizes:
 
    ```html
-   This is inline
+   This is in-line
    <span style="font-family: consolas; font-size: 14px"> monospace</span> text.
    <div style="font-family: Times New Roman; font-size: 12pt">
      This is 12pt Times New Roman for writing papers.
@@ -165,9 +166,11 @@ The Append Editor also supports inline HTML. You can use `<div> </div>` tags for
 
 ## Line Breaks
 
-To have a line break without a paragraph, you will need to add two spaces, called trailing spaces, to the end of your sentence. This line is separate, but is considered to be within the same paragraph. To create a new paragraph, skip two lines.
+The Markdown rendering in the Append Editor respects line breaks. This is different from the Markdown specification known as CommonMark, which requires two spaces, called trailing spaces, at the end of your line to create a line break without a paragraph break.
 
-The **New Line** checkbox adds two spaces and a new line to the beginning of your note. The **New Paragraph** checkbox adds two spaces and two new lines to the beginning of your note. If both are checked, new paragraph will take precedence.
+In the Append Editor, you do not need trailing spaces. To create a new line, simply press enter/return on your keyboard. To create a new paragraph, skip two lines.
+
+In the Append mode, the **New Line** checkbox adds two spaces and a new line to the beginning of your note. The **New Paragraph** checkbox adds two spaces and two new lines to the beginning of your note. If both are checked, new paragraph will take precedence. I am considering to switch these to radio buttons, but that would require at least one option to be checked at all times.
 
 ## Lists
 
@@ -195,6 +198,8 @@ The Append Editor supports unordered and ordered lists, but does not mix them we
   1. Numbered list doesn't resume
 ```
 
+If you want lists to continue automatically when you press Enter, then I recommend using the CodeMirror or Dynamic editing modes.
+
 ## Tables
 
 Colons can be used to align columns.  
@@ -213,7 +218,7 @@ Copy this into your editor to see what it renders:
 
 ## $\KaTeX$
 
-For inline KaTeX, use single or double dollar signs inline. For example, `$\int_0^\infty f(x)dx$` or `$$\pi$$` should yield $\int_0^\infty f(x)dx$ and $\pi$.
+For in-line KaTeX, use single or double dollar signs in-line. For example, `$\int_0^\infty f(x)dx$` or `$$\pi$$` should yield $\int_0^\infty f(x)dx$ and $\pi$.
 
 For display mode KaTeX, use double dollar signs on new lines. For example,:
 
@@ -241,15 +246,15 @@ You can create a table of contents:
 #### Table of Contents
 ```
 
-The links generated by the table of contents do not work properly on mobile.
+The links generated by the table of contents do not work properly on mobile. This is an issue with the mobile app and not the editor.
 
 ## Footnotes
 
-The Append Editor supports footnotes. The footnote links do not work properly on mobile. Copy this into your note to see how they're used:
+The Append Editor supports footnotes. The footnote links do not work properly on mobile. This is an issue with the mobile app and not the editor. Copy this into your note to see how they're used:
 
 ```md
 You can create footnote references that are short[^1] or long.[^2]
-You can also create them inline.^[which may be easier,
+You can also create them in-line.^[which may be easier,
 since you don't need to pick an identifier and move down to type the note]
 The footnotes are automatically numbered at the bottom of your note,
 but you'll need to manually number your superscripts.
@@ -283,23 +288,33 @@ When you click **Print**, you get to choose whether to print the URLs or not. Pr
 
 ## Settings
 
-You can choose your own custom fonts for the Edit/Append and View/Print modes. The Settings Menu has a predefined list of fonts to help you with your selection, but you can type in a different one if it's not on the list. If you choose a font that is unavailable on your device or browser, then the editor might use your device or browser's default font such as Times New Roman.
+You can choose between four editing modes: Plain Textarea, CodeMirror, Dynamic, and Monaco. Each have their own pros and cons and their own use cases.
+
+You can choose your own custom fonts for the Edit/Append and View/Print modes. The Settings Menu has a predefined list of fonts to help you with your selection, but you can type in a different one if it is not on the list. If you choose a font that is unavailable on your device or browser, then the editor might use your device or browser's default font such as Times New Roman.
 
 You can define multiple fonts in the order of your preference and separate them by commas. The editor will automatically display the next font if your preferred font is unavailable. For example, if you want to use a monospace font on all your devices but would prefer not to use `Courier New` if other monospace fonts are available, then you can submit a list of fonts such as `SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace`. This is useful if you use many devices with many different operating systems.
 
+The Dynamic mode uses the same fonts for Edit/Append and View/Print, so the custom font option for View/Print is hidden. The Monaco mode does not support custom fonts, so the custom font option for Edit/Append is hidden.
+
 You can also add finer-tuned Custom Styles via CSS.
 
 :::warning
 Custom styles from third parties can potentially betray your privacy. Only use styles from trusted sources.
 :::
 
-For example, you can add custom fonts (e.g., from [Google Fonts](https://fonts.google.com/)) like this:
+You can also use custom Highlight.js stylesheets for syntax highlighting if you prefer specific themes. The list of all the themes and the link to their stylesheets are available [here](https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@latest/build/styles) (the default is the `vs` theme). For example, if you want to use the Google Code theme, add this to the top of your Custom Styles:
+
+```css
+@import url('https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@latest/build/styles/googlecode.min.css');
+```
+
+You can also add custom fonts (e.g., from [Google Fonts](https://fonts.google.com/)) to the top of your Custom Styles:
 
 ```css
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
 ```
 
-Then update your fonts using the fonts settings or like this:
+Then update your fonts like this:
 
 ```css
 .CodeMirror,
@@ -312,7 +327,9 @@ Then update your fonts using the fonts settings or like this:
 }
 ```
 
-If you want to edit the font-sizes for the view, edit, and append textareas, you can use this (default is 16px):
+Make sure to declare `@import` above/before you declare the font-family.
+
+If you want to edit the font-sizes for the view, edit, and append textareas, you can use this (default is `16px`) or use the built-in font size setting:
 
 ```css
 .CodeMirror,
@@ -329,7 +346,11 @@ The custom font sizes, font families, and Custom Styles work by adding a `<style
 
 If you accidentally add hide your settings with CSS (e.g., `* {display: none;}`), then open the developer inspector, remove the custom stylesheet, and adjust your Settings.
 
-Settings are currently saved on a per-note basis. Saving your settings as default may be available in the future. Please let me know if you want to add another font to the list or need help implementing custom styles.
+Settings are saved on a per-note basis, but you can save your settings as your personal default for the editor. New notes will use your personal default settings. If you want to use your personal default settings for the old notes, click the refresh/sync button in the second row of the Settings menu.
+
+The styling of the editor (class names, etc.) are subject to change as the editor continues to improve.
+
+Please let me know if you want to add more fonts to the list or need help implementing custom styles.
 
 ## Development
 
@@ -347,8 +368,8 @@ The general instructions setting up an environment to develop Standard Notes ext
 8. To run the app in development mode, run `yarn start`. Press `ctrl/cmd + C` to exit development mode.
 9. To make the source code prettier, run `yarn pretty`.
 10. To build the app, run `yarn build`.
-11. To test the build, run `yarn server` or install serve using `sudo npm install -g serve` and run `yarn serve` then visit http://localhost:3000. Press `ctrl/cmd + C` to shut down the server.
-12. To the deploy the build into the `gh-pages` branch of your repository on GitHub, run `yarn deploy-stable`.
+11. To test the build in the Standard Notes app, run `yarn server` or install serve using `sudo npm install -g serve` and run `yarn serve` then visit http://localhost:3000. Press `ctrl/cmd + C` to shut down the server.
+12. To the deploy the build into the `gh-pages` branch of your repository on GitHub, run `yarn deploy-stable`. I use `yarn deploy-dev` for deploying development versions of the app and `yarn deploy-build` for distributing builds.
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
@@ -399,11 +420,16 @@ To learn React, check out the [React documentation](https://reactjs.org/).
 
 Copyright (c) Theodore Chu. All Rights Reserved. Licensed under [AGPL-3.0](https://github.com/TheodoreChu/append-editor/blob/main/LICENSE) or later.
 
+## Acknowledgements
+
+Early stages of this editor were based heavily on the Standard Notes [Token Vault](https://github.com/sn-extensions/token-vault) editor. The Token Vault editor is licensed under AGPL-3.0 and is available for use through [Standard Notes Extended](https://standardnotes.org/extensions).
+
 ## Further Resources
 
-- [GitHub](https://github.com/theodorechu/append-editor)
-- [Docs](https://docs.theochu.com/append-editor)
-- [Contact](https://theochu.com/contact)
-- [Append Editor To do List](https://github.com/TheodoreChu/append-editor/projects/1)
-- [Standard Notes Slack](https://standardnotes.org/slack) (for connecting with the Standard Notes Community)
-- [Standard Notes Help Files](https://standardnotes.org/help) (for issues related to Standard Notes but unrelated to this editor)
+- [GitHub](https://github.com/TheodoreChu/append-editor) for the source code of the Append Editor
+- [GitHub Issues](https://github.com/TheodoreChu/append-editor/issues) for reporting issues concerning the Append editor
+- [Docs](https://docs.theochu.com/append-editor) for how to use the Append Editor
+- [Contact](https://theochu.com/contact) for how to contact the developer of the Append Editor
+- [Append Editor To do List](https://github.com/TheodoreChu/append-editor/projects/1) for the roadmap of the Append Editor
+- [Standard Notes Slack](https://standardnotes.org/slack) for connecting with the Standard Notes Community
+- [Standard Notes Help](https://standardnotes.org/help) for help with issues related to Standard Notes but unrelated to this editor