feat: native components (#789)

* wip: component viewer

* feat: get component status from component viewer

* feat: native components

* fix: remove unused property

* fix: remove unused func

* chore(deps): snjs 2.29.0

* fix: import location

* feat: native components

* fix: remove unused func

* feat: component viewer (#781)

* wip: component viewer

* feat: get component status from component viewer

* fix: remove unused property

* chore(deps): snjs 2.29.0

* fix: import location

* chore: use cp instead of webpack copy

* fix: types

* chore: misc

public/components/org.standardnotes.advanced-markdown-editor/dist/app.css

@@ -0,0 +1,278 @@
+body, html {
+  font-family: sans-serif;
+  font-size: var(--sn-stylekit-base-font-size);
+  background-color: transparent;
+}
+
+* {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.mobile .editor-toolbar, .mobile .editor-toolbar.fullscreen, .mac-web .editor-toolbar, .mac-web .editor-toolbar.fullscreen, .mac-desktop .editor-toolbar, .mac-desktop .editor-toolbar.fullscreen {
+  overflow-x: auto;
+}
+
+.editor-toolbar.fullscreen, .CodeMirror-fullscreen {
+  position: absolute !important;
+}
+
+.CodeMirror {
+  border-left: 0;
+  border-right: 0;
+  border-bottom: 0;
+  background-color: transparent;
+  border: none;
+  font-size: var(--sn-stylekit-font-size-editor);
+  -webkit-overflow-scrolling: touch;
+}
+
+.editor-toolbar, .editor-toolbar.fullscreen {
+  background-color: var(--sn-stylekit-contrast-background-color);
+  border-bottom: 1px solid var(--sn-stylekit-border-color);
+  overflow: visible;
+}
+.editor-toolbar::before, .editor-toolbar::after, .editor-toolbar.fullscreen::before, .editor-toolbar.fullscreen::after {
+  background: none !important;
+}
+
+.editor-toolbar i.separator {
+  border-left-color: var(--sn-stylekit-contrast-border-color);
+  border-right-color: var(--sn-stylekit-contrast-background-color);
+}
+
+.editor-toolbar button {
+  color: var(--sn-stylekit-info-color) !important;
+  outline: none;
+  border-radius: 0;
+  font-size: var(--sn-stylekit-base-font-size);
+}
+
+.editor-toolbar button.active, .editor-toolbar button:hover {
+  border-color: transparent;
+  background: var(--sn-stylekit-background-color);
+}
+
+.editor-toolbar.disabled-for-preview button:not(.no-disable) {
+  background: inherit;
+}
+
+.editor-preview-active, .editor-preview-active-side {
+  background-color: var(--sn-stylekit-contrast-background-color);
+  border: 0;
+  border-left: 1px solid var(--sn-stylekit-border-color);
+  color: var(--sn-stylekit-contrast-foreground-color);
+  font-size: var(--sn-stylekit-font-size-editor);
+  padding: 10px 15px;
+}
+.editor-preview-active a, .editor-preview-active-side a {
+  color: var(--sn-stylekit-info-color);
+}
+.editor-preview-active img, .editor-preview-active-side img {
+  max-width: 100%;
+}
+.editor-preview-active pre, .editor-preview-active-side pre {
+  background: var(--sn-stylekit-background-color);
+  color: var(--sn-stylekit-foreground-color);
+  border: 1px solid var(--sn-stylekit-border-color);
+  padding: 20px;
+  border-radius: 3px;
+  overflow-x: auto;
+}
+.editor-preview-active table, .editor-preview-active-side table {
+  display: block;
+  margin-bottom: 12px;
+  width: 100%;
+  overflow: auto;
+  border-collapse: collapse;
+  border-spacing: 0px;
+  border-color: var(--sn-stylekit-border-color);
+}
+.editor-preview-active table th, .editor-preview-active table td, .editor-preview-active-side table th, .editor-preview-active-side table td {
+  padding: 6px 13px;
+  border: 1px solid var(--sn-stylekit-border-color);
+}
+.editor-preview-active table tr:nth-child(2n), .editor-preview-active-side table tr:nth-child(2n) {
+  background-color: var(--sn-stylekit-background-color);
+}
+.editor-preview-active p code, .editor-preview-active-side p code {
+  padding: 3px 6px;
+  background-color: var(--sn-stylekit-background-color);
+  color: var(--sn-stylekit-info-color);
+  border: 1px solid var(--sn-stylekit-border-color);
+  border-radius: 3px;
+}
+.editor-preview-active code, .editor-preview-active-side code {
+  font-family: var(--sn-stylekit-monospace-font);
+}
+.editor-preview-active blockquote, .editor-preview-active-side blockquote {
+  padding: 0 0.5rem;
+  margin-left: 0;
+  color: var(--sn-stylekit-neutral-color);
+  border-left: 0.3rem solid var(--sn-stylekit-background-color);
+}
+.editor-preview-active blockquote > :first-child, .editor-preview-active-side blockquote > :first-child {
+  margin-top: 0;
+}
+.editor-preview-active blockquote > :last-child, .editor-preview-active-side blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+.editor-preview-active {
+  border: 0;
+}
+
+.CodeMirror {
+  background-color: var(--sn-stylekit-editor-background-color) !important;
+  color: var(--sn-stylekit-editor-foreground-color) !important;
+  border: 0 !important;
+}
+.CodeMirror .CodeMirror-code .cm-comment {
+  background: var(--sn-stylekit-contrast-background-color);
+  color: var(--sn-stylekit-info-color);
+  font-family: Consolas, monaco, "Ubuntu Mono", courier, monospace !important;
+  font-size: 90%;
+}
+.CodeMirror .CodeMirror-code .cm-comment.CodeMirror-selectedtext {
+  color: var(--sn-stylekit-info-contrast-color) !important;
+  background: var(--sn-stylekit-info-color) !important;
+}
+.CodeMirror .cm-header {
+  color: var(--sn-stylekit-editor-foreground-color);
+}
+.CodeMirror .cm-header.CodeMirror-selectedtext {
+  color: var(--sn-stylekit-info-contrast-color) !important;
+  background: var(--sn-stylekit-info-color) !important;
+}
+.CodeMirror .cm-formatting-header, .CodeMirror .cm-formatting-strong, .CodeMirror .cm-formatting-em {
+  opacity: 0.2;
+}
+.CodeMirror .cm-link.cm-variable-2, .CodeMirror .cm-url.cm-variable-2 {
+  color: var(--sn-stylekit-info-color) !important;
+}
+.CodeMirror .cm-link.cm-variable-2.CodeMirror-selectedtext, .CodeMirror .cm-url.cm-variable-2.CodeMirror-selectedtext {
+  color: var(--sn-stylekit-info-contrast-color) !important;
+  background: var(--sn-stylekit-info-color) !important;
+}
+.CodeMirror .cm-formatting-list-ol {
+  font-weight: bold;
+}
+.CodeMirror .cm-link, .CodeMirror .cm-string {
+  color: var(--sn-stylekit-info-color) !important;
+}
+.CodeMirror .cm-link.CodeMirror-selectedtext, .CodeMirror .cm-string.CodeMirror-selectedtext {
+  color: var(--sn-stylekit-info-contrast-color) !important;
+  background: var(--sn-stylekit-info-color) !important;
+}
+.CodeMirror .CodeMirror-linenumber {
+  color: gray !important;
+}
+
+.CodeMirror-cursor {
+  border-color: var(--sn-stylekit-editor-foreground-color);
+}
+
+.CodeMirror-selected {
+  background: var(--sn-stylekit-info-color) !important;
+}
+
+.CodeMirror-selectedtext {
+  color: var(--sn-stylekit-info-contrast-color);
+  background: var(--sn-stylekit-info-color) !important;
+}
+
+.CodeMirror-gutters {
+  background-color: var(--sn-stylekit-background-color) !important;
+  color: var(--sn-stylekit-editor-foreground-color) !important;
+  border-color: var(--sn-stylekit-border-color) !important;
+}
+
+@media only screen and (max-width: 700px) {
+  .editor-toolbar a.no-mobile {
+    display: inline-block;
+  }
+}
+/*
+  Highlight JS theming
+*/
+.hljs-comment,
+.hljs-quote {
+  font-style: italic;
+  color: var(--sn-stylekit-neutral-color);
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-subst {
+  font-weight: bold;
+}
+
+.hljs-attribute {
+  color: var(--sn-stylekit-warning-color);
+}
+
+.hljs-number,
+.hljs-literal {
+  color: var(--sn-stylekit-info-color);
+}
+
+.hljs-string,
+.hljs-doctag,
+.hljs-formula {
+  color: var(--sn-stylekit-success-color);
+}
+
+.hljs-title,
+.hljs-section,
+.hljs-selector-id {
+  font-weight: bold;
+}
+
+.hljs-subst {
+  font-weight: normal;
+}
+
+.hljs-class .hljs-title,
+.hljs-type,
+.hljs-name {
+  color: var(--sn-stylekit-danger-color);
+  font-weight: bold;
+}
+
+.hljs-tag {
+  color: var(--sn-stylekit-neutral-color);
+}
+
+.hljs-regexp {
+  color: var(--sn-stylekit-success-color);
+}
+
+.hljs-symbol,
+.hljs-bullet,
+.hljs-link {
+  color: var(--sn-stylekit-info-color);
+}
+
+.hljs-built_in,
+.hljs-builtin-name {
+  text-decoration: underline;
+}
+
+.hljs-meta {
+  font-weight: bold;
+}
+
+.hljs-deletion {
+  color: var(--sn-stylekit-danger-color);
+}
+
+.hljs-addition {
+  color: var(--sn-stylekit-success-color);
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}

public/components/org.standardnotes.advanced-markdown-editor/dist/app.js

@@ -0,0 +1,157 @@
+(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
+"use strict";
+
+document.addEventListener("DOMContentLoaded", function (event) {
+  var workingNote;
+  var componentManager = new ComponentManager(null, function () {
+    // on ready
+    document.body.classList.add(componentManager.platform);
+    document.body.classList.add(componentManager.environment);
+  });
+  var ignoreTextChange = false;
+  var initialLoad = true;
+  var lastValue, lastUUID, clientData;
+  componentManager.streamContextItem(function (note) {
+    if (note.uuid !== lastUUID) {
+      // Note changed, reset last values
+      lastValue = null;
+      initialLoad = true;
+      lastUUID = note.uuid;
+      clientData = note.clientData;
+    }
+
+    workingNote = note; // Only update UI on non-metadata updates.
+
+    if (note.isMetadataUpdate || !window.easymde) {
+      return;
+    }
+
+    if (note.content.text !== lastValue) {
+      ignoreTextChange = true;
+      window.easymde.value(note.content.text);
+      ignoreTextChange = false;
+    }
+
+    if (initialLoad) {
+      initialLoad = false;
+      window.easymde.codemirror.getDoc().clearHistory();
+      var mode = clientData && clientData.mode; // Set initial editor mode
+
+      if (mode === 'preview') {
+        if (!window.easymde.isPreviewActive()) {
+          window.easymde.togglePreview();
+        }
+      } else if (mode === 'split') {
+        if (!window.easymde.isSideBySideActive()) {
+          window.easymde.toggleSideBySide();
+        } // falback config
+
+      } else if (window.easymde.isPreviewActive()) {
+        window.easymde.togglePreview();
+      }
+    }
+  });
+  window.easymde = new EasyMDE({
+    element: document.getElementById("editor"),
+    autoDownloadFontAwesome: false,
+    spellChecker: false,
+    status: false,
+    shortcuts: {
+      toggleSideBySide: "Cmd-Alt-P"
+    },
+    // Syntax highlighting is disabled until we figure out performance issue: https://github.com/sn-extensions/advanced-markdown-editor/pull/20#issuecomment-513811633
+    // renderingConfig: {
+    //   codeSyntaxHighlighting: true
+    // },
+    toolbar: [{
+      className: "fa fa-eye",
+      "default": true,
+      name: "preview",
+      noDisable: true,
+      title: "Toggle Preview",
+      action: function action() {
+        window.easymde.togglePreview();
+        saveMetadata();
+      }
+    }, {
+      className: "fa fa-columns",
+      "default": true,
+      name: "side-by-side",
+      noDisable: true,
+      noMobile: true,
+      title: "Toggle Side by Side",
+      action: function action() {
+        window.easymde.toggleSideBySide();
+        saveMetadata();
+      }
+    }, "|", "heading", "bold", "italic", "strikethrough", "|", "quote", "code", "|", "unordered-list", "ordered-list", "|", "clean-block", "|", "link", "image", "|", "table"]
+  });
+
+  function saveMetadata() {
+    function getEditorMode() {
+      var editor = window.easymde;
+
+      if (editor) {
+        if (editor.isPreviewActive()) return 'preview';
+        if (editor.isSideBySideActive()) return 'split';
+      }
+
+      return 'edit';
+    }
+
+    var note = workingNote;
+    componentManager.saveItemWithPresave(note, function () {
+      note.clientData = {
+        mode: getEditorMode()
+      };
+    });
+  } // Some sort of issue on Mobile RN where this causes an exception (".className is not defined")
+
+
+  try {
+    window.easymde.toggleFullScreen();
+  } catch (e) {}
+  /*
+   Can be set to Infinity to make sure the whole document is always rendered, and thus the browser's text search works on it. This will have bad effects on performance of big documents.
+   Really bad performance on Safari. Unusable.
+   */
+
+
+  window.easymde.codemirror.setOption("viewportMargin", 100);
+  window.easymde.codemirror.on("change", function () {
+    function strip(html) {
+      var tmp = document.implementation.createHTMLDocument("New").body;
+      tmp.innerHTML = html;
+      return tmp.textContent || tmp.innerText || "";
+    }
+
+    function truncateString(string) {
+      var limit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 90;
+
+      if (string.length <= limit) {
+        return string;
+      } else {
+        return string.substring(0, limit) + "...";
+      }
+    }
+
+    if (!ignoreTextChange) {
+      if (workingNote) {
+        // 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.
+        var note = workingNote;
+        componentManager.saveItemWithPresave(note, function () {
+          lastValue = window.easymde.value();
+          var html = window.easymde.options.previewRender(window.easymde.value());
+          var strippedHtml = truncateString(strip(html));
+          note.content.preview_plain = strippedHtml;
+          note.content.preview_html = null;
+          note.content.text = lastValue;
+        });
+      }
+    }
+  });
+});
+
+},{}]},{},[1]);

public/components/org.standardnotes.advanced-markdown-editor/dist/dist.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! @license DOMPurify | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/2.2.2/LICENSE */

public/components/org.standardnotes.advanced-markdown-editor/dist/index.html

@@ -0,0 +1 @@
+<!doctype html><html><head><base target="_blank"><meta charset="UTF-8"><meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1"><script src="lib/component-relay.js"></script><script src="vendor/highlightjs/highlightjs.js"></script><link rel="stylesheet" media="all" href="vendor/easymd/easymde.css"><script src="vendor/easymd/easymd.js"></script><link rel="stylesheet" media="all" href="stylekit.css"><title>Markdown Pro</title><script defer="defer" src="dist.js"></script><link href="dist.css" rel="stylesheet"></head><body class="sn-component" id="sn-advanced-markdown-editor"><textarea dir="auto" id="editor"></textarea></body></html>

public/components/org.standardnotes.advanced-markdown-editor/dist/vendor/easymd/easymd.js.LICENSE.txt

@@ -0,0 +1,6 @@
+/**
+ * easymde v2.15.0
+ * Copyright Jeroen Akkerman
+ * @link https://github.com/ionaru/easy-markdown-editor
+ * @license MIT
+ */

public/components/org.standardnotes.advanced-markdown-editor/dist/vendor/highlightjs/highlightjs.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! highlight.js v9.16.2 | BSD3 License | git.io/hljslicense */

public/components/org.standardnotes.advanced-markdown-editor/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "sn-advanced-markdown-editor",
+  "version": "1.3.14",
+  "description": "A Standard Notes derived editor that offers full support for Markdown editing.",
+  "main": "dist/dist.js",
+  "author": "Standard Notes <hello@standardnotes.org>",
+  "license": "AGPL-3.0",
+  "sn": {
+    "main": "dist/index.html"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "webpack serve --config webpack.dev.js --progress --hot",
+    "build": "webpack --config webpack.prod.js",
+    "lint": "eslint src --ext .js",
+    "lint:fix": "yarn lint --fix"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@babel/cli": "^7.13.10",
+    "@babel/core": "^7.13.13",
+    "@babel/preset-env": "^7.13.12",
+    "@standardnotes/component-relay": "2.1.0",
+    "@standardnotes/eslint-config-extensions": "^1.0.2",
+    "copy-webpack-plugin": "^8.1.0",
+    "css-loader": "^5.2.0",
+    "dompurify": "^2.2.9",
+    "easymde": "^2.15.0",
+    "eslint": "^7.23.0",
+    "file-loader": "^6.2.0",
+    "font-awesome": "^4.7.0",
+    "highlightjs": "^9.16.2",
+    "html-webpack-plugin": "^5.3.1",
+    "marked": "^2.0.7",
+    "mini-css-extract-plugin": "^1.4.0",
+    "sass": "^1.32.8",
+    "sass-loader": "^11.0.1",
+    "sn-stylekit": "3.0.1",
+    "webpack": "^5.28.0",
+    "webpack-cli": "^4.6.0",
+    "webpack-dev-server": "^3.11.2",
+    "webpack-merge": "^5.7.3"
+  }
+}