npm - @standardnotes/rich-text - Versions diffs - 1.8.6 - Mend

@standardnotes/rich-text 1.8.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 (31) hide show

package/.babelrc +3 -0
package/.eslintignore +5 -0
package/.eslintrc +15 -0
package/CHANGELOG.md +92 -0
package/LICENSE +661 -0
package/README.md +31 -0
package/dist/dist.css +3246 -0
package/dist/dist.css.map +1 -0
package/dist/dist.js +2 -0
package/dist/dist.js.map +1 -0
package/dist/font/summernote.eot +0 -0
package/dist/font/summernote.ttf +0 -0
package/dist/font/summernote.woff +0 -0
package/dist/font/summernote.woff2 +0 -0
package/dist/index.html +1 -0
package/dist/vendor.css +3249 -0
package/dist/vendor.js +2 -0
package/dist/vendor.js.LICENSE.txt +7 -0
package/editor.index.ejs +19 -0
package/ext.json.sample +8 -0
package/package.json +47 -0
package/plus_editor_bar.png +0 -0
package/src/main.js +321 -0
package/src/main.scss +169 -0
package/vendor/font/summernote.eot +0 -0
package/vendor/font/summernote.ttf +0 -0
package/vendor/font/summernote.woff +0 -0
package/vendor/font/summernote.woff2 +0 -0
package/webpack.config.js +66 -0
package/webpack.dev.js +23 -0
package/webpack.prod.js +7 -0

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

@@ -0,0 +1,7 @@
+/*!
+ * Bootstrap v3.4.1 (https://getbootstrap.com/)
+ * Copyright 2011-2019 Twitter, Inc.
+ * Licensed under the MIT license
+ */
+/*! jQuery v3.6.1 | (c) OpenJS Foundation and other contributors | jquery.org/license */

package/editor.index.ejs ADDED Viewed

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <base target="_blank">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
+  <title><%= htmlWebpackPlugin.options.title %></title>
+  <link rel="stylesheet" href="vendor.css">
+  <script src="vendor.js"></script>
+</head>
+<body>
+  <div class="sn-component" id="plus-editor">
+    <div id="summernote" name="editor"></div>
+  </div>
+</body>
+</html>

package/ext.json.sample ADDED Viewed

@@ -0,0 +1,8 @@
+{
+    "identifier": "org.standardnotes.plus-editor-local",
+    "name": "Plus Editor - Local",
+    "content_type": "SN|Component",
+    "area": "editor-editor",
+    "version": "1.0.0",
+    "url": "http://localhost:8001"
+}

package/package.json ADDED Viewed

@@ -0,0 +1,47 @@
+{
+  "name": "@standardnotes/rich-text",
+  "version": "1.8.6",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "A rich text editor for Standard Notes",
+  "main": "dist/dist.js",
+  "author": "Standard Notes.",
+  "scripts": {
+    "skip:lint": "eslint --ext .js .",
+    "lint:fix": "eslint --ext .js . --fix",
+    "build": "webpack --config webpack.prod.js",
+    "start": "webpack serve --config webpack.dev.js --progress --hot",
+    "test": "echo \"Error: no test specified\" && exit 0"
+  },
+  "sn": {
+    "main": "dist/index.html"
+  },
+  "dependencies": {
+    "@standardnotes/component-relay": "standardnotes/component-relay#839ff5db9bc92db9d42cad8d202ddc4df729597d"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.13.0",
+    "@babel/core": "^7.13.8",
+    "@babel/eslint-parser": "^7.13.8",
+    "@babel/preset-env": "^7.13.8",
+    "@standardnotes/eslint-config-extensions": "1.0.1",
+    "bootstrap": "3.4.1",
+    "css-loader": "^5.1.0",
+    "dompurify": "^2.2.9",
+    "eslint": "^7.20.0",
+    "html-webpack-plugin": "^5.2.0",
+    "jquery": "^3.5.1",
+    "mini-css-extract-plugin": "^1.3.9",
+    "node-sass": "*",
+    "sass-loader": "^11.0.1",
+    "sn-stylekit": "^2.1.1",
+    "style-loader": "^2.0.0",
+    "summernote": "^0.8.18",
+    "webpack": "*",
+    "webpack-cli": "*",
+    "webpack-dev-server": "*",
+    "webpack-merge": "^5.8.0",
+    "webpack-merge-and-include-globally": "^2.3.3"
+  }
+}

package/plus_editor_bar.png ADDED Viewed

Binary file

package/src/main.js ADDED Viewed

@@ -0,0 +1,321 @@
+document.addEventListener('DOMContentLoaded', function () {
+  let componentRelay
+  let workingNote, clientData
+  let lastValue, lastUUID
+  let ignoreTextChange = false
+  let newNoteLoad = true,
+    didToggleFullScreen = false
+  const blockString = [
+    'address',
+    'article',
+    'aside',
+    'blockquote',
+    'details',
+    'dialog',
+    'dd',
+    'div',
+    'dl',
+    'dt',
+    'fieldset',
+    'figcaption',
+    'figure',
+    'footer',
+    'form',
+    'form',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'header',
+    'hgroup',
+    'hr',
+    'li',
+    'main',
+    'nav',
+    'ol',
+    'p',
+    'pre',
+    'section',
+    'table',
+    'ul',
+  ].join(', ')
+  const getElementHeight = (el) => {
+    let elHeight = el.offsetHeight
+    elHeight += parseInt(window.getComputedStyle(el).getPropertyValue('margin-top'))
+    elHeight += parseInt(window.getComputedStyle(el).getPropertyValue('margin-bottom'))
+    return elHeight
+  }
+  function loadComponentRelay() {
+    componentRelay = new ComponentRelay({
+      targetWindow: window,
+      onReady: () => {
+        const platform = componentRelay.platform
+        if (platform) {
+          document.body.classList.add(platform)
+        }
+      },
+      handleRequestForContentHeight: () => {
+        const editor = document.querySelector('.note-editable')
+        const toolbar = document.querySelector('.note-toolbar')
+        if (!editor || !toolbar) {
+          return undefined
+        }
+        let height = getElementHeight(toolbar) + 40
+        for (const child of editor.children) {
+          height += getElementHeight(child)
+        }
+        return height
+      },
+    })
+    componentRelay.streamContextItem((note) => {
+      onReceivedNote(note)
+    })
+  }
+  function strip(html) {
+    const tmp = document.implementation.createHTMLDocument('New').body
+    tmp.innerHTML = html
+    return tmp.textContent || tmp.innerText || ''
+  }
+  function truncateString(string, limit = 90) {
+    if (string.length <= limit) {
+      return string
+    } else {
+      return string.substring(0, limit) + '...'
+    }
+  }
+  function save() {
+    if (workingNote) {
+      // Be sure to capture this object as a variable, as workingNote 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 = $('#summernote').summernote('code')
+        note.clientData = clientData
+        note.content.text = lastValue
+        note.content.preview_plain = truncateString(strip(lastValue))
+        note.content.preview_html = null
+      })
+    }
+  }
+  function onReceivedNote(note) {
+    if (note.uuid !== lastUUID) {
+      // Note changed, reset last values
+      lastValue = null
+      newNoteLoad = true
+      lastUUID = note.uuid
+    }
+    workingNote = note
+    // Only update UI on non-metadata updates.
+    if (note.isMetadataUpdate) {
+      return
+    }
+    clientData = note.clientData
+    let newText = note.content.text
+    $('.note-editable').attr('spellcheck', JSON.stringify(note.content.spellcheck))
+    if (newText == lastValue) {
+      return
+    }
+    const summernote = $('#summernote')
+    if (summernote) {
+      ignoreTextChange = true
+      const isHtml = /<[a-z][\s\S]*>/i.test(newText)
+      if (!didToggleFullScreen) {
+        summernote.summernote('fullscreen.toggle')
+        didToggleFullScreen = true
+      }
+      if (newNoteLoad && !isHtml) {
+        newText = textToHTML(newText)
+      }
+      let renderNote = false
+      const isUnsafeContent = checkIfUnsafeContent(newText)
+      if (isUnsafeContent) {
+        const currentNotePreferences = getCurrentNotePreferences()
+        if (!currentNotePreferences) {
+          showUnsafeContentAlert().then((result) => {
+            if (result) {
+              setNotePreferences('trustUnsafeContent', result)
+              renderNote = result
+            }
+          })
+        } else {
+          renderNote = currentNotePreferences.trustUnsafeContent || false
+        }
+      } else {
+        renderNote = true
+      }
+      /**
+       * If the user decides not to continue rendering the note,
+       * clear the editor and disable it.
+       */
+      if (!renderNote) {
+        summernote.summernote('code', '')
+        summernote.summernote('disable')
+        return
+      }
+      summernote.summernote('enable')
+      summernote.summernote('code', newText)
+      if (newNoteLoad) {
+        // Clears history but keeps note contents. Note that this line will
+        // trigger a summernote.change event, so be sure to do this inside a
+        // `ignoreTextChange` block.
+        summernote.summernote('commit')
+        newNoteLoad = false
+      }
+      ignoreTextChange = false
+    }
+  }
+  function getNotePreferences() {
+    return componentRelay.getComponentDataValueForKey('notes') || {}
+  }
+  function getCurrentNotePreferences() {
+    const notesPreferences = getNotePreferences()
+    return notesPreferences[lastUUID]
+  }
+  function setNotePreferences(key, value) {
+    const notesPreferences = getNotePreferences()
+    notesPreferences[lastUUID] = {
+      [key]: value,
+    }
+    componentRelay.setComponentDataValueForKey('notes', notesPreferences)
+  }
+  /**
+   * Checks if the content contains at least one script tag.
+   */
+  function checkIfUnsafeContent(content) {
+    const doc = new DOMParser().parseFromString(`<body>${content}</body>`, 'text/html')
+    return Array.from(doc.body.childNodes).some((node) => node.nodeName == 'SCRIPT')
+  }
+  function showUnsafeContentAlert() {
+    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 alert = new Stylekit.SKAlert({
+        title: null,
+        text,
+        buttons: [
+          {
+            text: 'Cancel',
+            style: 'neutral',
+            action: function () {
+              resolve(false)
+            },
+          },
+          {
+            text: 'Continue',
+            style: 'danger',
+            action: function () {
+              resolve(true)
+            },
+          },
+        ],
+      })
+      alert.present()
+    })
+  }
+  function loadEditor() {
+    $('#summernote').summernote({
+      height: 500, // set editor height
+      minHeight: null, // set minimum height of editor
+      maxHeight: null, // set maximum height of editor
+      focus: true, // set focus to editable area after initializing summernote
+      tabDisable: true, // set tab interaction to note only
+      showDomainOnlyForAutolink: false, // set autolink to preserve whole link
+      toolbar: [
+        // [groupName, [list of button]]
+        ['para', ['style']],
+        ['style', ['bold', 'italic', 'underline', 'strikethrough', 'clear']],
+        ['fontsize', ['fontsize', 'fontname']],
+        ['color', ['color']],
+        ['para', ['ul', 'ol', 'paragraph']],
+        ['height', ['height']],
+        ['insert', ['table', 'link', 'hr', 'picture', 'video']],
+        ['misc', ['codeview', 'help']],
+      ],
+      fontNames: [
+        'Arial',
+        'Arial Black',
+        'Comic Sans MS',
+        'Courier New',
+        'Helvetica Neue',
+        'Helvetica',
+        'Impact',
+        'Lucida Grande',
+        'Monospace',
+        'Roboto',
+        'system-ui',
+        'Tahoma',
+        'Times New Roman',
+        'Verdana',
+      ],
+      callbacks: {
+        onInit: function () {},
+        onImageUpload: function () {
+          alert(
+            'Embedding encrypted images directly inside the editor is not presently supported. You can attach files to be outside the editor instead. For embedding images directly inside this note, use the Image button in the toolbar and insert the URL of an image hosted externally (outside of Standard Notes). For more information, visit https://standardnotes.com/help/36/how-do-i-attach-encrypted-files-to-my-notes.',
+          )
+        },
+      },
+    })
+    // summernote.change
+    $('#summernote').on('summernote.change', function () {
+      // Add RTL support when block-level elements are detect onchange.
+      document.querySelectorAll(blockString).forEach((element) => element.setAttribute('dir', 'auto'))
+      if (!ignoreTextChange) {
+        save()
+      }
+    })
+    $('textarea.note-codable').on('input', () => {
+      save()
+    })
+  }
+  loadEditor()
+  loadComponentRelay()
+  function textToHTML(text) {
+    return ((text || '') + '').replace(/\t/g, '    ').replace(/\r\n|\r|\n/g, '<br />')
+  }
+})

package/src/main.scss ADDED Viewed

@@ -0,0 +1,169 @@
+@import '~sn-stylekit/dist/stylekit.css';
+body,
+html {
+  font-family: sans-serif;
+  font-size: var(--sn-stylekit-base-font-size);
+  height: 100%;
+  margin: 0;
+  background-color: transparent;
+}
+#summernote {
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+  font-size: var(--sn-stylekit-font-size-editor);
+}
+#plus-editor {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  height: 100%;
+  font-size: var(--sn-stylekit-font-size-editor);
+  .note-editor.note-frame.fullscreen {
+    // On Mobile, resizing the webview to avoid keyboard causes the option bar to be offset because its position is fixed.
+    position: relative !important;
+  }
+  pre {
+    background-color: var(--sn-stylekit-contrast-background-color);
+    color: var(--sn-stylekit-contrast-foreground-color);
+    border-color: var(--sn-stylekit-contrast-border-color);
+    font-size: var(--sn-stylekit-font-size-p);
+  }
+  a {
+    color: var(--sn-stylekit-info-color);
+  }
+  .note-editor {
+    -webkit-overflow-scrolling: touch;
+  }
+  .note-editor.fullscreen {
+    background-color: var(--sn-stylekit-background-color);
+  }
+  .note-editor.note-frame.fullscreen .note-editable {
+    background-color: var(--sn-stylekit-background-color);
+    color: var(--sn-stylekit-foreground-color);
+  }
+  .panel-default>.panel-heading {
+    background-color: var(--sn-stylekit-secondary-background-color);
+  }
+  .btn-default {
+    color: var(--sn-stylekit-secondary-foreground-color);
+    background-color: var(--sn-stylekit-secondary-background-color);
+    border-color: var(--sn-stylekit-secondary-border-color);
+  }
+  .panel-heading {
+    border-color: var(--sn-stylekit-border-color);
+  }
+  .dropdown-menu {
+    background-color: var(--sn-stylekit-background-color);
+  }
+  .dropdown-menu>li>a {
+    color: var(--sn-stylekit-foreground-color);
+    &:hover {
+      background-color: var(--sn-stylekit-contrast-background-color);
+      color: var(--sn-stylekit-contrast-foreground-color);
+    }
+  }
+  .note-codable {
+    caret-color: #cccccc;
+  }
+  .note-color-btn {
+    border-color: var(--sn-stylekit-border-color);
+  }
+  .note-color-reset {
+    background-color: var(--sn-stylekit-contrast-background-color);
+    color: var(--sn-stylekit-contrast-foreground-color);
+  }
+  .note-palette-title {
+    color: var(--sn-stylekit-info-color);
+  }
+  .modal-content {
+    background-color: var(--sn-stylekit-contrast-background-color);
+    color: var(--sn-stylekit-contrast-foreground-color);
+  }
+  .modal-header,
+  .modal-footer {
+    border-color: var(--sn-stylekit-contrast-border-color);
+    .btn-primary {
+      background-color: var(--sn-stylekit-info-color);
+      color: var(--sn-stylekit-info-contrast-color);
+      border-color: transparent;
+    }
+  }
+  table {
+    border-color: var(--sn-stylekit-contrast-border-color);
+    background-color: var(--sn-stylekit-contrast-background-color);
+    color: var(--sn-stylekit-contrast-foreground-color);
+    th,
+    td {
+      border: 1px solid var(--sn-stylekit-contrast-border-color);
+    }
+    tr:nth-child(2n) {
+      background-color: var(--sn-stylekit-background-color);
+    }
+  }
+  label kbd {
+    background-color: var(--sn-stylekit-background-color);
+    background-color: var(--sn-stylekit-foreground-color);
+  }
+  .modal-header .close {
+    color: var(--sn-stylekit-foreground-color);
+    text-shadow: none;
+  }
+}
+.note-popover,
+.note-popover .arrow {
+  background-color: var(--sn-stylekit-contrast-background-color);
+  color: var(--sn-stylekit-contrast-foreground-color);
+  a {
+    color: var(--sn-stylekit-info-color);
+  }
+  button {
+    background-color: var(--sn-stylekit-background-color);
+    color: var(--sn-stylekit-foreground-color);
+    border-color: var(--sn-stylekit-border-color);
+  }
+}
+.note-editor.note-frame {
+  border: 0 !important;
+}
+.panel-default {
+  border: 0;
+}
+.panel {
+  border-radius: 0;
+}

package/vendor/font/summernote.eot ADDED Viewed

Binary file

package/vendor/font/summernote.ttf ADDED Viewed

Binary file

package/vendor/font/summernote.woff ADDED Viewed

Binary file

package/vendor/font/summernote.woff2 ADDED Viewed

Binary file

package/webpack.config.js ADDED Viewed

@@ -0,0 +1,66 @@
+const path = require('path')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const MergeIntoSingleFilePlugin = require('webpack-merge-and-include-globally')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const CopyPlugin = require('copy-webpack-plugin')
+module.exports = {
+  entry: [path.resolve(__dirname, 'src', 'main.js'), path.resolve(__dirname, 'src', 'main.scss')],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'dist.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.s[ac]ss$/i,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          {
+            loader: 'sass-loader',
+            options: {
+              sassOptions: {
+                includePaths: ['src/main.scss'],
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: 'dist.css',
+    }),
+    new MergeIntoSingleFilePlugin({
+      files: {
+        'vendor.js': [
+          require.resolve('jquery/dist/jquery.min.js'),
+          require.resolve('bootstrap/dist/js/bootstrap.min.js'),
+          require.resolve('summernote/dist/summernote.min.js'),
+          require.resolve('@standardnotes/component-relay/dist/dist.js'),
+          require.resolve('dompurify/dist/purify.min.js'),
+          'node_modules/sn-stylekit/dist/stylekit.js',
+        ],
+        'vendor.css': [
+          require.resolve('bootstrap/dist/css/bootstrap.min.css'),
+          require.resolve('summernote/dist/summernote.min.css'),
+          'node_modules/sn-stylekit/dist/stylekit.css',
+        ],
+      },
+    }),
+    new HtmlWebpackPlugin({
+      title: 'Plus Editor',
+      template: 'editor.index.ejs',
+    }),
+    new CopyPlugin({
+      patterns: [
+        {
+          from: 'vendor',
+          to: '.',
+        },
+      ],
+    }),
+  ],
+}

package/webpack.dev.js ADDED Viewed

@@ -0,0 +1,23 @@
+const { merge } = require('webpack-merge');
+const config = require('./webpack.config.js');
+const path = require('path');
+module.exports = merge(config, {
+  mode: 'development',
+  devtool: 'eval-cheap-module-source-map',
+  stats: {
+    colors: true
+  },
+  devServer: {
+    port: 8001,
+    contentBase: path.resolve(__dirname, 'dist'),
+    disableHostCheck: true,
+    historyApiFallback: true,
+    watchOptions: { aggregateTimeout: 300, poll: 1000 },
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
+      'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization'
+    }
+  }
+});

package/webpack.prod.js ADDED Viewed

@@ -0,0 +1,7 @@
+const { merge } = require('webpack-merge');
+const config = require('./webpack.config.js');
+module.exports = merge(config, {
+  mode: 'production',
+  devtool: 'source-map'
+});