npm - @standardnotes/markdown-hybrid - Versions diffs - 1.7.6 - Mend

@standardnotes/markdown-hybrid 1.7.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/.babelrc +5 -0
package/.eslintignore +5 -0
package/.eslintrc +20 -0
package/CHANGELOG.md +100 -0
package/LICENSE +661 -0
package/README.md +44 -0
package/dist/dist.css +2341 -0
package/dist/dist.css.map +1 -0
package/dist/dist.js +3 -0
package/dist/dist.js.LICENSE.txt +1 -0
package/dist/dist.js.map +1 -0
package/dist/fonts/fontawesome-webfont.eot +0 -0
package/dist/fonts/fontawesome-webfont.svg +2671 -0
package/dist/fonts/fontawesome-webfont.ttf +0 -0
package/dist/fonts/fontawesome-webfont.woff +0 -0
package/dist/fonts/fontawesome-webfont.woff2 +0 -0
package/dist/index.html +1 -0
package/dist/lib/component-relay.js +1 -0
package/dist/lib/component-relay.js.LICENSE.txt +1 -0
package/dist/stylekit.css +3347 -0
package/dist/vendor/easymd/easymd.js +2 -0
package/dist/vendor/easymd/easymd.js.LICENSE.txt +6 -0
package/dist/vendor/easymd/easymde.css +7 -0
package/dist/vendor/highlightjs/highlightjs.js +2 -0
package/dist/vendor/highlightjs/highlightjs.js.LICENSE.txt +1 -0
package/editor.index.ejs +18 -0
package/ext.json.sample +8 -0
package/linter.tsconfig.json +1 -0
package/markdown_pro_editor_bar.png +0 -0
package/package.json +49 -0
package/src/main.js +371 -0
package/src/main.scss +339 -0
package/webpack.config.js +73 -0
package/webpack.dev.js +23 -0
package/webpack.prod.js +7 -0

package/dist/vendor/highlightjs/highlightjs.js.LICENSE.txt ADDED Viewed

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

package/editor.index.ejs ADDED Viewed

@@ -0,0 +1,18 @@
+<!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 type="text/javascript" src="lib/component-relay.js"></script>
+    <script type="text/javascript" src="vendor/highlightjs/highlightjs.js"></script>
+    <link rel="stylesheet" media="all" href="vendor/easymd/easymde.css">
+    <script type="text/javascript" src="vendor/easymd/easymd.js"></script>
+    <link rel="stylesheet" media="all" href="stylekit.css">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body class="sn-component" id="sn-advanced-markdown-editor">
+    <textarea dir=auto id="editor" hidden></textarea>
+  </body>
+</html>

package/ext.json.sample ADDED Viewed

@@ -0,0 +1,8 @@
+{
+  "identifier": "org.standardnotes.advanced-markdown-editor-dev",
+  "name": "Markdown Pro - Development",
+  "content_type": "SN|Component",
+  "area": "editor-editor",
+  "version": "1.0.0",
+  "url": "http://localhost:8001/"
+}

package/linter.tsconfig.json ADDED Viewed

	@@ -0,0 +1 @@
1	+ {}

package/markdown_pro_editor_bar.png ADDED Viewed

Binary file

package/package.json ADDED Viewed

@@ -0,0 +1,49 @@
+{
+  "name": "@standardnotes/markdown-hybrid",
+  "version": "1.7.6",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "A Standard Notes derived editor that offers full support for Markdown editing.",
+  "main": "dist/dist.js",
+  "author": "Standard Notes.",
+  "license": "AGPL-3.0",
+  "sn": {
+    "main": "dist/index.html"
+  },
+  "scripts": {
+    "start": "webpack serve --config webpack.dev.js --progress --hot",
+    "build": "webpack --config webpack.prod.js",
+    "skip:lint": "eslint src --ext .js",
+    "skip:lint:fix": "eslint src --ext .js --fix",
+    "skip:test": "echo \"Error: no test specified\" && exit 0",
+    "skip:format": "prettier --write 'src/**/*.{html,css,scss,js,jsx,ts,tsx,json}' README.md"
+  },
+  "dependencies": {
+    "@standardnotes/component-relay": "standardnotes/component-relay#839ff5db9bc92db9d42cad8d202ddc4df729597d"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.13.10",
+    "@babel/core": "^7.13.13",
+    "@babel/preset-env": "^7.13.12",
+    "copy-webpack-plugin": "*",
+    "css-loader": "^5.2.0",
+    "dompurify": "^2.2.9",
+    "easymde": "2.16.1",
+    "eslint": "*",
+    "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",
+    "prettier": "*",
+    "sass": "^1.32.8",
+    "sass-loader": "^11.0.1",
+    "sn-stylekit": "3.0.1",
+    "webpack": "*",
+    "webpack-cli": "*",
+    "webpack-dev-server": "*",
+    "webpack-merge": "^5.8.0"
+  }
+}

package/src/main.js ADDED Viewed

@@ -0,0 +1,371 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+document.addEventListener('DOMContentLoaded', function () {
+  let workingNote
+  let ignoreTextChange = false
+  let initialLoad = true
+  let lastValue, lastUUID, clientData
+  let renderNote = false
+  let showingUnsafeContentAlert = false
+  const componentRelay = new ComponentRelay({
+    targetWindow: window,
+    onReady: () => {
+      document.body.classList.add(componentRelay.platform)
+      document.body.classList.add(componentRelay.environment)
+      initializeEditor()
+    },
+    handleRequestForContentHeight: () => {
+      const baseHeight = 30
+      const toolbarHeight = document.querySelector('.editor-toolbar')?.offsetHeight
+      const scrollHeight = document.getElementsByClassName('CodeMirror-code')[0]?.scrollHeight
+      return baseHeight + toolbarHeight + scrollHeight
+    },
+  })
+  componentRelay.streamContextItem(async (note) => {
+    if (showingUnsafeContentAlert) {
+      return
+    }
+    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
+    }
+    document
+      .getElementsByClassName('CodeMirror-code')[0]
+      .setAttribute('spellcheck', JSON.stringify(note.content.spellcheck))
+    const isUnsafeContent = checkIfUnsafeContent(note.content.text)
+    if (isUnsafeContent) {
+      const trustUnsafeContent = clientData['trustUnsafeContent'] ?? false
+      if (!trustUnsafeContent) {
+        const result = await showUnsafeContentAlert()
+        if (result) {
+          setTrustUnsafeContent(workingNote)
+        }
+        renderNote = result
+      } else {
+        renderNote = true
+      }
+    } else {
+      renderNote = true
+    }
+    /**
+     * If the user decides not to continue rendering the note,
+     * clear the editor and disable it.
+     */
+    if (!renderNote) {
+      window.easymde.value('')
+      if (!window.easymde.isPreviewActive()) {
+        window.easymde.togglePreview()
+      }
+      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()
+      const 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()
+      }
+    }
+  })
+  function initializeEditor() {
+    window.easymde = new EasyMDE({
+      element: document.getElementById('editor'),
+      autoDownloadFontAwesome: false,
+      spellChecker: false,
+      nativeSpellcheck: true,
+      inputStyle: getInputStyleForEnvironment(),
+      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 () {
+            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 () {
+            window.easymde.toggleSideBySide()
+            saveMetadata()
+          },
+        },
+        '|',
+        'heading',
+        'bold',
+        'italic',
+        'strikethrough',
+        '|',
+        'quote',
+        'code',
+        '|',
+        'unordered-list',
+        'ordered-list',
+        '|',
+        'clean-block',
+        '|',
+        'link',
+        'image',
+        '|',
+        'table',
+      ],
+    })
+    /**
+     * 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 () {
+      const strip = (html) => {
+        const tmp = document.implementation.createHTMLDocument('New').body
+        tmp.innerHTML = html
+        return tmp.textContent || tmp.innerText || ''
+      }
+      const truncateString = (string, limit = 90) => {
+        if (string.length <= limit) {
+          return string
+        } else {
+          return string.substring(0, limit) + '...'
+        }
+      }
+      if (!ignoreTextChange && renderNote) {
+        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.
+          const note = workingNote
+          componentRelay.saveItemWithPresave(note, () => {
+            lastValue = window.easymde.value()
+            let html = window.easymde.options.previewRender(window.easymde.value())
+            let strippedHtml = truncateString(strip(html))
+            note.content.preview_plain = strippedHtml
+            note.content.preview_html = null
+            note.content.text = lastValue
+          })
+        }
+      }
+    })
+    /**
+     * Scrolls the cursor into view, so the soft keyboard on mobile devices
+     * doesn't overlap the cursor. A short delay is added to prevent scrolling
+     * before the keyboard is shown.
+     */
+    const scrollCursorIntoView = (editor) => {
+      setTimeout(() => editor.scrollIntoView(), 200)
+    }
+    window.easymde.codemirror.on('cursorActivity', function (editor) {
+      if (componentRelay.environment !== 'mobile') {
+        return
+      }
+      scrollCursorIntoView(editor)
+    })
+    // Some sort of issue on Mobile RN where this causes an exception (".className is not defined")
+    try {
+      window.easymde.toggleFullScreen()
+    } catch (e) {
+      console.error('Error:', e)
+    }
+  }
+  function saveMetadata() {
+    if (!renderNote) {
+      return
+    }
+    const getEditorMode = () => {
+      const editor = window.easymde
+      if (editor) {
+        if (editor.isPreviewActive()) {
+          return 'preview'
+        }
+        if (editor.isSideBySideActive()) {
+          return 'split'
+        }
+      }
+      return 'edit'
+    }
+    const note = workingNote
+    componentRelay.saveItemWithPresave(note, () => {
+      note.clientData = {
+        ...note.clientData,
+        mode: getEditorMode(),
+      }
+    })
+  }
+  function setTrustUnsafeContent(note) {
+    componentRelay.saveItemWithPresave(note, () => {
+      note.clientData = {
+        ...note.clientData,
+        trustUnsafeContent: true,
+      }
+    })
+  }
+  /**
+   * Checks if a markdown text is safe to render.
+   */
+  function checkIfUnsafeContent(markdownText) {
+    const marked = require('marked')
+    const DOMPurify = require('dompurify')
+    /**
+     * Using marked to get the resulting HTML string from the markdown text.
+     */
+    const renderedHtml = marked(markdownText, {
+      headerIds: false,
+      smartypants: true,
+    })
+    const sanitizedHtml = DOMPurify.sanitize(renderedHtml, {
+      /**
+       * We don't need script or style tags.
+       */
+      FORBID_TAGS: ['script', 'style'],
+      /**
+       * XSS payloads can be injected via these attributes.
+       */
+      FORBID_ATTR: [
+        'onerror',
+        'onload',
+        'onunload',
+        'onclick',
+        'ondblclick',
+        'onmousedown',
+        'onmouseup',
+        'onmouseover',
+        'onmousemove',
+        'onmouseout',
+        'onfocus',
+        'onblur',
+        'onkeypress',
+        'onkeydown',
+        'onkeyup',
+        'onsubmit',
+        'onreset',
+        'onselect',
+        'onchange',
+      ],
+    })
+    /**
+     * Create documents from both the sanitized string and the rendered string.
+     * This will allow us to compare them, and if they are not equal
+     * (i.e: do not contain the same properties, attributes, inner text, etc)
+     * it means something was stripped.
+     */
+    const renderedDom = new DOMParser().parseFromString(renderedHtml, 'text/html')
+    const sanitizedDom = new DOMParser().parseFromString(sanitizedHtml, 'text/html')
+    return !renderedDom.isEqualNode(sanitizedDom)
+  }
+  function showUnsafeContentAlert() {
+    if (showingUnsafeContentAlert) {
+      return
+    }
+    showingUnsafeContentAlert = true
+    const text =
+      'We’ve detected that this note contains a script or code snippet which may be unsafe to execute. ' +
+      'Scripts executed in the editor have the ability to impersonate as the editor to Standard Notes. ' +
+      'Press Continue to mark this script as safe and proceed, or Cancel to avoid rendering this note.'
+    return new Promise((resolve) => {
+      const Stylekit = require('sn-stylekit')
+      const alert = new Stylekit.SKAlert({
+        title: null,
+        text,
+        buttons: [
+          {
+            text: 'Cancel',
+            style: 'neutral',
+            action: function () {
+              showingUnsafeContentAlert = false
+              resolve(false)
+            },
+          },
+          {
+            text: 'Continue',
+            style: 'danger',
+            action: function () {
+              showingUnsafeContentAlert = false
+              resolve(true)
+            },
+          },
+        ],
+      })
+      alert.present()
+    })
+  }
+  function getInputStyleForEnvironment() {
+    const environment = componentRelay.environment ?? 'web'
+    return environment === 'mobile' ? 'textarea' : 'contenteditable'
+  }
+})