@standardnotes/markdown-basic 1.6.1

package/README.md

@@ -0,0 +1,138 @@
+# Markdown Basic
+
+<div align="center">
+
+[![License](https://img.shields.io/github/license/sn-extensions/markdown-basic?color=blue)](https://github.com/sn-extensions/markdown-basic/blob/master/LICENSE)
+[![GitHub issues and feature requests](https://img.shields.io/github/issues/sn-extensions/markdown-basic.svg)](https://github.com/sn-extensions/markdown-basic/issues/)
+[![Slack](https://img.shields.io/badge/slack-standardnotes-CC2B5E.svg?style=flat&logo=slack)](https://standardnotes.org/slack)
+[![GitHub Stars](https://img.shields.io/github/stars/sn-extensions/markdown-basic?style=social)](https://github.com/sn-extensions/markdown-basic)
+
+</div>
+
+## Introduction
+
+Markdown Basic is a [custom editor](https://standardnotes.org/help/77/what-are-editors) for [Standard Notes](https://standardnotes.org), a free, open-source, and [end-to-end encrypted](https://standardnotes.org/knowledge/2/what-is-end-to-end-encryption) notes app.
+
+## Features
+
+- Markdown via Markdown-It
+- Syntax Highlighting via Highlight.js
+- Optional split pane view
+- Task Lists
+- Tables
+- Footnotes
+- Inline external images
+
+## Installation
+
+1. Register for an account at Standard Notes using the [Desktop App](https://standardnotes.org/download) or [Web app](https://app.standardnotes.org). Remember to use a strong and memorable password.
+2. Sign up for [Standard Notes Extended](https://dashboard.standardnotes.org/member). Then, follow the instructions [here](https://standardnotes.org/help/29/how-do-i-install-extensions-once-i-ve-signed-up-for-extended) or continue.
+3. Click **Extensions** in the lower left corner.
+4. Under **Repository**, find **Markdown Basic**.
+5. Click **Install**.
+6. Close the **Extensions** pop-up.
+7. At the top of your note, click **Editor**, then click **Markdown Basic**.
+8. Click **Continue**, and you are done!
+
+After you have installed the editor on the web or desktop app, it will automatically sync to your [mobile app](https://standardnotes.org/download) after you log in.
+
+## Style Guide
+
+| Result             | Markdown                                     |
+| :----------------- | :------------------------------------------- |
+| **Bold**           | \*\*text\*\* or \_\_text\_\_                 |
+| _Emphasize_        | \*text\* or \_text\_                         |
+| ~~Strike-through~~ | \~\~text\~\~                                 |
+| Link               | [text]\(http://)                             |
+| Image              | ![text]\(http://)                            |
+| `Inline Code`      | \`code\`                                     |
+| Code Block         | \`\`\`language <br></br>code <br></br>\`\`\` |
+| Unordered List     | \* item <br></br> - item <br></br> + item    |
+| Ordered List       | 1. item                                      |
+| Task List          | `- [ ] Task` or `- [x] Task`                 |
+| Blockquote         | \> quote                                     |
+| H1                 | # Heading                                    |
+| H2                 | ## Heading                                   |
+| H3                 | ### Heading                                  |
+| H4                 | #### Heading                                 |
+| Section Breaks     | `---` or `***`                               |
+
+## Tables
+
+Colons can be used to align columns.  
+Copy this into your editor to see what it renders:
+
+```md
+| Tables             |      Are      |    Cool |
+| ------------------ | :-----------: | ------: |
+| col 2 is           |   centered    |   \$149 |
+| col 3 is           | right-aligned |  \$4.17 |
+| privacy is         |     neat      |  \$2.48 |
+| rows don't need to |   be pretty   |   what? |
+| the last line is   |  unnecessary  | really? |
+| one more           |      row      | Yay! 😆 |
+```
+
+## Footnotes
+
+The Markdown Basic editor supports footnotes. The footnote links do not work properly on mobile. 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,
+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.
+Make sure to count your variable[^variable] footnotes.[^5]
+
+[^1]: Here's a footnote.
+[^2]: Here’s a footnote with multiple blocks.
+
+    Subsequent paragraphs are indented to show that they belong to the previous footnote.
+
+        { eight spaces for some code }
+
+    The whole paragraph can be indented, or just the first
+    line. In this way, multi-paragraph footnotes work like
+    multi-paragraph list items.
+
+This paragraph won’t be part of the footnote, because it
+isn’t indented.
+
+[^variable]: The variable footnote is the fourth footnote.
+[^5]: This is the fifth footnote.
+```
+
+#### Not yet available:
+
+- KaTeX
+- Printing
+- Custom Font Families
+- Custom Font Sizes
+- Superscript
+- Subscript
+
+## License
+
+[GNU Affero General Public License v3.0](https://github.com/sn-extensions/markdown-basic/blob/master/LICENSE)
+
+## Development
+
+The instructions for local setup can be found [here](https://docs.standardnotes.org/extensions/local-setup). All commands are performed in the root directory:
+
+1. Fork the [repository](https://github.com/sn-extensions/markdown-basic) on GitHub
+2. [Clone](https://help.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository) your fork of the repository
+3. Type `cd markdown-basic`
+4. Run `yarn` to locally install the packages in `package.json`
+5. Create `ext.json` as shown [here](https://docs.standardnotes.org/extensions/local-setup) with `url: "http://localhost:8004/dist/index.html"`. Optionally, create your `ext.json` as a copy of `ext.json.sample`.
+6. Install `http-server` using `yarn global add http-server` or `npm install -g http-server`
+7. Start the server at `http://localhost:8004` using `http-server . --cors -p 8004`
+8. Import the extension into the [web](https://app.standardnotes.org) or [desktop](https://standardnotes.org/download) app with `http://localhost:8004/ext.json`.
+9. To build the editor, open another command window and run `yarn build` or `npm run build`. For live builds, use `yarn watch` or `npm run watch`. You can also run `yarn start` or `npm run start` and open the editor at `http://localhost:8080`.
+
+## Further Resources
+
+- [GitHub](https://github.com/sn-extensions/markdown-basic/)
+- [Issues and Feature Requests](https://github.com/sn-extensions/markdown-basic/issues)
+- [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)

package/app/components/Home.js

@@ -0,0 +1,312 @@
+import React from 'react';
+import ComponentRelay from '@standardnotes/component-relay';
+const MarkdownIt = require('markdown-it');
+
+const EditMode = 0;
+const SplitMode = 1;
+const PreviewMode = 2;
+
+export default class Home extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.modes = [
+      { mode: EditMode, label: 'Edit', css: 'edit' },
+      { mode: SplitMode, label: 'Split', css: 'split' },
+      { mode: PreviewMode, label: 'Preview', css: 'preview' },
+    ];
+
+    this.state = { mode: this.modes[0] };
+  }
+
+  componentDidMount() {
+    this.simpleMarkdown = document.getElementById('simple-markdown');
+    this.editor = document.getElementById('editor');
+    this.preview = document.getElementById('preview');
+
+    this.configureMarkdown();
+    this.connectToBridge();
+    this.updatePreviewText();
+    this.addChangeListener();
+
+    this.configureResizer();
+    this.addTabHandler();
+
+    this.scrollTriggers = {};
+    this.scrollHandlers = [
+      { el: this.editor, handler: this.scrollHandler(this.editor, this.preview) },
+      { el: this.preview, handler: this.scrollHandler(this.preview, this.editor) }
+    ];
+  }
+
+  UNSAFE_componentWillUpdate(nextProps, nextState) {
+    let prevMode = this.state.mode.mode;
+    let nextMode = nextState.mode.mode;
+
+    // If we changed to Split mode we add the scroll listeners
+    if (prevMode !== nextMode) {
+      if (nextMode === SplitMode) {
+        this.addScrollListeners();
+      } else {
+        this.removeScrollListeners();
+      }
+    }
+  }
+
+  setModeFromModeValue(value) {
+    for (let mode of this.modes) {
+      if (mode.mode == value) {
+        this.setState({ mode });
+        return;
+      }
+    }
+  }
+
+  changeMode(mode) {
+    this.setState({ mode });
+    if (!this.note) {
+      return;
+    }
+    this.note.clientData = { mode: mode.mode };
+    this.componentRelay.saveItem(this.note);
+  }
+
+  configureMarkdown() {
+    const markdownitOptions = {
+      // automatically render raw links as anchors.
+      linkify: true,
+      // Convert '\n' in paragraphs into <br>
+      breaks: true
+    };
+
+    this.markdown = MarkdownIt(markdownitOptions)
+      .use(require('markdown-it-footnote'))
+      .use(require('markdown-it-task-lists'))
+      .use(require('markdown-it-highlightjs'));
+
+    // Remember old renderer, if overriden, or proxy to default renderer
+    const defaultRender = this.markdown.renderer.rules.link_open || ((tokens, idx, options, env, self) => {
+      return self.renderToken(tokens, idx, options);
+    });
+
+    this.markdown.renderer.rules.link_open = ((tokens, idx, options, env, self) => {
+      // If you are sure other plugins can't add `target` - drop check below
+      const aIndex = tokens[idx].attrIndex('target');
+
+      if (aIndex < 0) {
+        tokens[idx].attrPush(['target', '_blank']); // add new attribute
+      } else {
+        tokens[idx].attrs[aIndex][1] = '_blank';    // replace value of existing attr
+      }
+
+      // pass token to default renderer.
+      return defaultRender(tokens, idx, options, env, self);
+    });
+  }
+
+  connectToBridge() {
+    this.componentRelay = new ComponentRelay({
+      targetWindow: window,
+      onReady: () => {
+        const { platform } = this.componentRelay;
+        this.setState({ platform });
+      },
+      handleRequestForContentHeight: () => {
+        return undefined
+      },
+    });
+
+    this.componentRelay.streamContextItem((note) => {
+      this.note = note;
+
+      if (note.clientData) {
+        const mode = note.clientData.mode ?? EditMode;
+        this.setModeFromModeValue(mode);
+      }
+
+      // Only update UI on non-metadata updates.
+      if (note.isMetadataUpdate) {
+        return;
+      }
+
+      this.editor.value = note.content.text;
+      this.preview.innerHTML = this.markdown.render(note.content.text);
+
+      document.getElementById('editor').setAttribute(
+        'spellcheck',
+        JSON.stringify(note.content.spellcheck)
+      );
+    });
+  }
+
+  truncateString(string, limit = 80) {
+    if (!string) {
+      return null;
+    }
+    if (string.length <= limit) {
+      return string;
+    } else {
+      return string.substring(0, limit) + '...';
+    }
+  }
+
+  updatePreviewText() {
+    const text = this.editor.value || '';
+    this.preview.innerHTML = this.markdown.render(text);
+    return text;
+  }
+
+  addChangeListener() {
+    document.getElementById('editor').addEventListener('input', () => {
+      if (this.note) {
+        // Be sure to capture this object as a variable, as this.note may be reassigned in `streamContextItem`, so by the time
+        // you modify it in the presave block, it may not be the same object anymore, so the presave values will not be applied to
+        // the right object, and it will save incorrectly.
+        let note = this.note;
+
+        this.componentRelay.saveItemWithPresave(note, () => {
+          note.content.text = this.updatePreviewText();
+          note.content.preview_plain = this.truncateString(this.preview.textContent || this.preview.innerText);
+          note.content.preview_html = null;
+        });
+      }
+    });
+  }
+
+  addScrollListeners() {
+    this.scrollHandlers.forEach(({ el, handler }) => el.addEventListener('scroll', handler));
+  }
+
+  removeScrollListeners() {
+    this.scrollHandlers.forEach(({ el, handler }) => el.removeEventListener('scroll', handler));
+  }
+
+  scrollHandler = (source, destination) => {
+    let frameRequested;
+
+    return (event) => {
+      // Avoid the cascading effect by not handling the event if it was triggered initially by this element
+      if (this.scrollTriggers[source] === true) {
+        this.scrollTriggers[source] = false;
+        return;
+      }
+      this.scrollTriggers[source] = true;
+
+      // Only request the animation frame once until it gets processed
+      if (frameRequested) {
+        return;
+      }
+      frameRequested = true;
+
+      window.requestAnimationFrame(() => {
+        let target = event.target;
+        let height = target.scrollHeight - target.clientHeight;
+        let ratio = parseFloat(target.scrollTop) / height;
+        let move = (destination.scrollHeight - destination.clientHeight) * ratio;
+        destination.scrollTop = move;
+
+        frameRequested = false;
+      });
+    };
+  }
+
+  removeSelection() {
+    if (window.getSelection) {
+      window.getSelection().removeAllRanges();
+    } else if (document.selection) {
+      document.selection.empty();
+    }
+  }
+
+  configureResizer() {
+    let pressed = false;
+    const columnResizer = document.getElementById('column-resizer');
+    const resizerWidth = columnResizer.offsetWidth;
+    const safetyOffset = 15;
+
+    columnResizer.addEventListener('mousedown', () => {
+      pressed = true;
+      columnResizer.classList.add('dragging');
+      this.editor.classList.add('no-selection');
+    });
+
+    document.addEventListener('mousemove', (event) => {
+      if (!pressed) {
+        return;
+      }
+
+      let x = event.clientX;
+      if (x < resizerWidth / 2 + safetyOffset) {
+        x = resizerWidth / 2 + safetyOffset;
+      } else if (x > this.simpleMarkdown.offsetWidth - resizerWidth - safetyOffset) {
+        x = this.simpleMarkdown.offsetWidth - resizerWidth - safetyOffset;
+      }
+
+      const colLeft = x - resizerWidth / 2;
+      columnResizer.style.left = colLeft + 'px';
+      this.editor.style.width = (colLeft - safetyOffset) + 'px';
+
+      this.removeSelection();
+    });
+
+    document.addEventListener('mouseup', () => {
+      if (pressed) {
+        pressed = false;
+        columnResizer.classList.remove('dragging');
+        this.editor.classList.remove('no-selection');
+      }
+    });
+  }
+
+  addTabHandler() {
+    // Tab handler
+    this.editor.addEventListener('keydown', (event) => {
+      if (!event.shiftKey && event.which == 9) {
+        event.preventDefault();
+
+        // Using document.execCommand gives us undo support
+        if (!document.execCommand('insertText', false, '\t')) {
+          // document.execCommand works great on Chrome/Safari but not Firefox
+          const start = this.selectionStart;
+          const end = this.selectionEnd;
+          const spaces = '    ';
+
+          // Insert 4 spaces
+          this.value = this.value.substring(0, start)
+            + spaces + this.value.substring(end);
+
+          // Place cursor 4 spaces away from where
+          // the tab key was pressed
+          this.selectionStart = this.selectionEnd = start + 4;
+        }
+      }
+    });
+  }
+
+  render() {
+    return (
+      <div id="simple-markdown" className={`sn-component ${this.state.platform}`}>
+        <div id="header">
+          <div className="segmented-buttons-container sk-segmented-buttons">
+            <div className="buttons">
+              {this.modes.map(mode =>
+                <div key={mode} onClick={() => this.changeMode(mode)} className={`sk-button button ${this.state.mode == mode ? 'selected info' : 'sk-secondary-contrast'}`}>
+                  <div className="sk-label">
+                    {mode.label}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div id="editor-container" className={this.state.mode.css}>
+          <textarea dir="auto" id="editor" className={this.state.mode.css}></textarea>
+          <div id="column-resizer" className={this.state.mode.css}></div>
+          <div id="preview" className={this.state.mode.css}></div>
+        </div>
+      </div>
+    );
+  }
+}

package/app/index.html

@@ -0,0 +1,7 @@
+<html>
+  <link rel="stylesheet" type="text/css" href="dist.css">
+  <title>Simple Markdown Editor</title>
+  <body>
+    <script type="text/javascript" src="dist.js"></script>
+  </body>
+</html>

package/app/main.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Home from './components/Home';
+
+export default class App extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div>
+        <Home />
+      </div>
+    );
+  }
+}
+
+
+ReactDOM.render(
+  <App />,
+  document.body.appendChild(document.createElement('div'))
+);