npm - @standardnotes/classic-code-editor - Versions diffs - 1.5.5 - Mend

@standardnotes/classic-code-editor 1.5.5

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 (13) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,47 @@
+# Code Editor
+The Code Editor is a Standard Notes derived editor that provides syntax highlighting and keyboard shortcuts for over 120 programming languages.
+![Ideal for code snippets and procedures!](code_editor_preview.png)
+## Quickstart
+Use your browser to see the Code Editor in action.
+1. Clone the [code-editor](https://github.com/standardnotes/code-editor) repository from GitHub.
+2. Run `yarn` to install required dependencies.
+3. Open `index.html` in your browser where the editor will be running.
+## Local Installation
+See the editor in the desktop app and make changes to the code.
+1. Clone the [code-editor](https://github.com/standardnotes/code-editor) repository from GitHub.
+2. Run `yarn` to install required dependencies.
+3. Ensure that either the Standard Notes desktop app is available for use or the web app is accessible. Use both locally or with an Extended account (or the extension will not load).
+4. Follow the instructions [here](https://docs.standardnotes.org/extensions/local-setup) to setup the extension locally.
+5. Begin development! Upon making any changes to the code, run `yarn build` to build the files to the `dist` folder.
+## Contributing
+Feel free to create a pull request, we welcome your enthusiasm!
+## Support
+Please open a new issue and the Standard Notes team will take a look as soon as we can. For more information on editors, refer to the following link:
+- Standard Notes Help: [What are editors?](https://standardnotes.org/help/77/what-are-editors)
+We are also reachable on our forum, Slack, Reddit, Twitter, and through email:
+- Standard Notes Help and Support: [Get Help](https://standardnotes.org/help)
+## License
+[GNU AGPL v3.0](https://choosealicense.com/licenses/agpl-3.0/)

package/code_editor_preview.png ADDED Viewed

Binary file

package/index.html ADDED Viewed

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <base target="_blank">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
+    <link rel="stylesheet" href="dist/codemirror/lib/codemirror.css">
+    <link rel="stylesheet" href="dist/main.css">
+    <link rel="stylesheet" href="dist/stylekit.css">
+    <script src="dist/codemirror/lib/codemirror.js"></script>
+    <!-- Required for gfm mode -->
+    <script src="dist/codemirror/addon/mode/overlay.js"></script>
+    <script src="dist/codemirror/addon/mode/simple.js"></script>
+    <script src="dist/codemirror/addon/mode/loadmode.js"></script>
+    <script src="dist/codemirror/mode/meta.js"></script>
+    <!-- Vim key bindings -->
+    <script src="dist/codemirror/keymap/vim.js"></script>
+    <!-- Required for search -->
+    <script src="dist/codemirror/addon/search/jump-to-line.js"></script>
+    <script src="dist/codemirror/addon/search/match-highlighter.js"></script>
+    <script src="dist/codemirror/addon/search/matchesonscrollbar.js"></script>
+    <script src="dist/codemirror/addon/search/search.js"></script>
+    <script src="dist/codemirror/addon/search/searchcursor.js"></script>
+    <script src="dist/codemirror/addon/dialog/dialog.js"></script>
+    <script src="dist/codemirror/addon/scroll/annotatescrollbar.js"></script>
+    <link rel="stylesheet" href="dist/codemirror/addon/search/matchesonscrollbar.css" />
+    <link rel="stylesheet" href="dist/codemirror/addon/dialog/dialog.css" />
+    <script src="dist/lib/component-relay.js"></script>
+    <!-- Required for styling selected text -->
+    <script src="dist/codemirror/addon/selection/mark-selection.js"></script>
+    <script>
+      CodeMirror.modeURL = "dist/codemirror/mode/%N/%N.js";
+    </script>
+  </head>
+  <body class="sn-component">
+    <div class="wrapper">
+      <textarea id="code" name="code"></textarea>
+    <div>
+    <div class="sk-app-bar no-edges no-bottom-edge" style="width: inherit;">
+      <div class="left">
+        <div class="sk-app-bar-item no-pointer">
+          <span class="sk-p">Language:</span>
+        </div>
+        <div class="sk-app-bar-item no-pointer">
+          <select id="language-select" onchange="onLanguageSelect(event)"></select>
+        </div>
+        <div class="sk-app-bar-item">
+          <span id="default-label" class="sk-label" onclick="setDefaultLanguage(event)">Set as Default</span>
+        </div>
+      </div>
+      <div class="center"></div>
+      <div class="right">
+        <div class="sk-app-bar-item no-pointer border"></div>
+        <div class="sk-app-bar-item">
+          <span id="toggle-vim-mode-button" class="sk-label" onclick="toggleVimMode()">Enable Vim mode</span>
+        </div>
+      </div>
+    </div>
+    <script src="dist/main.js"></script>
+  </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,40 @@
+{
+  "name": "@standardnotes/classic-code-editor",
+  "version": "1.5.5",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "A code editor for Standard Notes",
+  "main": "dist/main.js",
+  "author": "Standard Notes",
+  "license": "AGPL-3.0",
+  "scripts": {
+    "start": "http-server . --cors -p8001 & webpack --progress --config webpack.dev.js",
+    "build": "webpack --config webpack.prod.js",
+    "skip:lint": "eslint src/ --ext .js",
+    "lint:fix": "eslint src/ --ext .js --fix",
+    "clean": "rm -rf ./vendor",
+    "test": "echo \"Error: no test specified\" && exit 0"
+  },
+  "dependencies": {
+    "@standardnotes/component-relay": "standardnotes/component-relay#839ff5db9bc92db9d42cad8d202ddc4df729597d"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.12.10",
+    "@babel/core": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
+    "codemirror": "5.65.2",
+    "copy-webpack-plugin": "*",
+    "css-loader": "^5.0.1",
+    "eslint": "*",
+    "http-server": "^0.12.3",
+    "mini-css-extract-plugin": "^1.3.5",
+    "sass": "*",
+    "sass-loader": "^10.1.1",
+    "sn-stylekit": "^2.1.1",
+    "webpack": "*",
+    "webpack-cli": "*",
+    "webpack-merge": "^5.8.0"
+  },
+  "gitHead": "6806ecada49ab7e617d6c03787fb7b68e0e89933"
+}

package/src/main.js ADDED Viewed

@@ -0,0 +1,283 @@
+document.addEventListener('DOMContentLoaded', function () {
+  const modeByModeMode = CodeMirror.modeInfo.reduce(function (acc, m) {
+    if (acc[m.mode]) {
+      acc[m.mode].push(m)
+    } else {
+      acc[m.mode] = [m]
+    }
+    return acc
+  }, {})
+  const modeModeAndMimeByName = CodeMirror.modeInfo.reduce(function (acc, m) {
+    acc[m.name] = { mode: m.mode, mime: m.mime }
+    return acc
+  }, {})
+  const modes = Object.keys(modeModeAndMimeByName)
+  let componentRelay
+  let workingNote, clientData
+  let lastValue, lastUUID
+  let editor, select
+  let ignoreTextChange = false
+  let initialLoad = true
+  function loadComponentRelay() {
+    componentRelay = new ComponentRelay({
+      targetWindow: window,
+      onReady: () => {
+        const platform = componentRelay.platform
+        if (platform) {
+          document.body.classList.add(platform)
+        }
+        loadEditor()
+      },
+      handleRequestForContentHeight: () => {
+        const baseHeight = 50
+        const scrollHeight = document.getElementsByClassName('CodeMirror-code')[0]?.scrollHeight
+        return baseHeight + scrollHeight
+      },
+    })
+    componentRelay.streamContextItem((note) => {
+      onReceivedNote(note)
+    })
+  }
+  function saveNote() {
+    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.
+      let note = workingNote
+      componentRelay.saveItemWithPresave(note, () => {
+        lastValue = editor.getValue()
+        note.content.text = lastValue
+        note.clientData = clientData
+        note.content.preview_plain = null
+        note.content.preview_html = null
+      })
+    }
+  }
+  function onReceivedNote(note) {
+    if (note.uuid !== lastUUID) {
+      // Note changed, reset last values
+      lastValue = null
+      initialLoad = true
+      lastUUID = note.uuid
+    }
+    workingNote = note
+    // Only update UI on non-metadata updates.
+    if (note.isMetadataUpdate) {
+      return
+    }
+    clientData = note.clientData
+    let mode = clientData.mode
+    if (!mode) {
+      // Assign editor's default mode from component settings
+      mode = componentRelay.getComponentDataValueForKey('language') ?? 'JavaScript'
+    }
+    changeMode(mode)
+    if (editor) {
+      if (note.content.text !== lastValue) {
+        ignoreTextChange = true
+        editor.getDoc().setValue(workingNote.content.text)
+        ignoreTextChange = false
+      }
+      if (initialLoad) {
+        initialLoad = false
+        editor.getDoc().clearHistory()
+      }
+      editor.setOption('spellcheck', workingNote.content.spellcheck)
+    }
+  }
+  function loadEditor() {
+    // Handler for the save command that is mapped to the :w (write) Vim key binding.
+    CodeMirror.commands.save = function () {
+      saveNote()
+    }
+    editor = CodeMirror.fromTextArea(document.getElementById('code'), {
+      extraKeys: {
+        'Alt-F': 'findPersistent',
+      },
+      lineNumbers: true,
+      styleSelectedText: true,
+      lineWrapping: true,
+      inputStyle: getInputStyleForEnvironment(),
+    })
+    editor.setSize('100%', '100%')
+    createSelectElements()
+    editor.on('change', function () {
+      if (ignoreTextChange) {
+        return
+      }
+      saveNote()
+    })
+    /**
+     * 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)
+    }
+    editor.on('cursorActivity', function (editor) {
+      if (componentRelay.environment !== 'mobile') {
+        return
+      }
+      scrollCursorIntoView(editor)
+    })
+    const initialKeyMap = componentRelay.getComponentDataValueForKey('keyMap') ?? 'default'
+    window.setKeyMap(initialKeyMap)
+  }
+  function createSelectElements() {
+    select = document.getElementById('language-select')
+    for (let index = 0; index < modes.length; index++) {
+      const option = document.createElement('option')
+      option.value = index
+      option.innerHTML = modes[index]
+      select.appendChild(option)
+    }
+  }
+  // Editor Modes
+  window.setKeyMap = function (keymap) {
+    editor.setOption('keyMap', keymap)
+    updateVimStatus(keymap)
+  }
+  window.onLanguageSelect = function () {
+    const language = modes[select.selectedIndex]
+    changeMode(language)
+    saveNote()
+  }
+  window.setDefaultLanguage = function () {
+    const language = modes[select.selectedIndex]
+    // assign default language for this editor when entering notes
+    componentRelay.setComponentDataValueForKey('language', language)
+    // show a confirmation message
+    const message = document.getElementById('default-label')
+    const original = message.innerHTML
+    message.innerHTML = 'Success'
+    message.classList.add('success')
+    setTimeout(function () {
+      message.classList.remove('success')
+      message.innerHTML = original
+    }, 750)
+  }
+  function inputModeToMode(inputMode) {
+    const convertCodeMirrorMode = function (codeMirrorMode) {
+      if (codeMirrorMode) {
+        return {
+          name: codeMirrorMode.name,
+          mode: codeMirrorMode.mode,
+          mime: codeMirrorMode.mime,
+        }
+      } else {
+        return null
+      }
+    }
+    const extension = /.+\.([^.]+)$/.exec(inputMode)
+    const mime = /\//.test(inputMode)
+    if (extension) {
+      return convertCodeMirrorMode(CodeMirror.findModeByExtension(extension[1]))
+    } else if (mime) {
+      return convertCodeMirrorMode(CodeMirror.findModeByMIME(mime[1]))
+    } else if (modeModeAndMimeByName[inputMode]) {
+      return {
+        name: inputMode,
+        mode: modeModeAndMimeByName[inputMode].mode,
+        mime: modeModeAndMimeByName[inputMode].mime,
+      }
+    } else if (modeByModeMode[inputMode]) {
+      const firstMode = modeByModeMode[inputMode][0]
+      return {
+        name: firstMode.name,
+        mode: firstMode.mode,
+        mime: firstMode.mime,
+      }
+    } else {
+      return {
+        name: inputMode,
+        mode: inputMode,
+        mime: inputMode,
+      }
+    }
+  }
+  function changeMode(inputMode) {
+    if (!inputMode) {
+      return
+    }
+    const mode = inputModeToMode(inputMode)
+    if (mode) {
+      editor.setOption('mode', mode.mime)
+      CodeMirror.autoLoadMode(editor, mode.mode)
+      if (clientData) {
+        clientData.mode = mode.name
+      }
+      document.getElementById('language-select').selectedIndex = modes.indexOf(mode.name)
+    } else {
+      console.error('Could not find a mode corresponding to ' + inputMode)
+    }
+  }
+  function updateVimStatus(keyMap) {
+    const toggleButton = document.getElementById('toggle-vim-mode-button')
+    const newAction = keyMap === 'vim' ? 'Disable' : 'Enable'
+    const buttonClass = keyMap === 'vim' ? 'danger' : 'success'
+    toggleButton.innerHTML = `${newAction} Vim mode`
+    toggleButton.classList.remove('danger')
+    toggleButton.classList.remove('success')
+    toggleButton.classList.add(buttonClass)
+  }
+  window.toggleVimMode = function () {
+    let newKeyMap
+    const currentKeyMap = componentRelay.getComponentDataValueForKey('keyMap') ?? 'default'
+    if (currentKeyMap === 'default') {
+      newKeyMap = 'vim'
+    } else {
+      newKeyMap = 'default'
+    }
+    window.setKeyMap(newKeyMap)
+    componentRelay.setComponentDataValueForKey('keyMap', newKeyMap)
+  }
+  function getInputStyleForEnvironment() {
+    const environment = componentRelay.environment ?? 'web'
+    return environment === 'mobile' ? 'textarea' : 'contenteditable'
+  }
+  loadComponentRelay()
+})

package/src/main.scss ADDED Viewed

@@ -0,0 +1,105 @@
+body, html {
+  font-family: sans-serif;
+  height: 100%;
+  margin: 0;
+  font-size: var(--sn-stylekit-base-font-size);
+}
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  height: 100%;
+  // Fixes unnecessary horizontal scrolling on Windows
+  overflow-x: hidden;
+}
+.CodeMirror {
+  background-color: var(--sn-stylekit-editor-background-color) !important;
+  color: var(--sn-stylekit-editor-foreground-color) !important;
+  border: 0 !important;
+  font-family: var(--sn-stylekit-monospace-font);
+  -webkit-overflow-scrolling: touch;
+  // code doesn't look good at normal text size, better to be a bit smaller
+  font-size: calc(var(--sn-stylekit-font-size-editor) - 0.1rem);
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  resize: none;
+  .cm-header {
+    color: var(--sn-stylekit-editor-foreground-color);
+  }
+  // Faded Markdown syntax
+  .cm-formatting-header, .cm-formatting-strong, .cm-formatting-em {
+    opacity: 0.2;
+  }
+  .cm-variable, .cm-variable-1, .cm-variable-2, .cm-variable-3, .cm-string-2 {
+    color: var(--sn-stylekit-info-color) !important;
+    &.CodeMirror-selectedtext {
+      color: var(--sn-stylekit-info-contrast-color) !important;
+      background: transparent;
+    }
+  }
+  .cm-qualifier, .cm-meta {
+    color: var(--sn-stylekit-neutral-color) !important;
+  }
+  .cm-error {
+    color: var(--sn-stylekit-danger-color) !important;
+  }
+  .cm-property {
+  }
+  .cm-def, .cm-atom {
+    color: var(--sn-stylekit-success-color);
+  }
+  .CodeMirror-linenumber {
+    color: var(--sn-stylekit-neutral-color) !important;
+    opacity: 0.5;
+  }
+}
+.CodeMirror-cursor {
+  border-color: var(--sn-stylekit-info-color) !important;
+}
+.CodeMirror-cursors {
+  z-index: 10 !important; // In Markdown mode, cursor is hidden behind code blocks
+}
+.CodeMirror-selected {
+  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;
+}
+.cm-header-1 { font-size: 150%; }
+.cm-header-2 { font-size: 130%; }
+.cm-header-3 { font-size: 120%; }
+.cm-header-4 { font-size: 110%; }
+.cm-header-5 { font-size: 100%; }
+.cm-header-6 { font-size: 90%; }
+.CodeMirror .cm-quote {
+  color: var(--sn-stylekit-foreground-color);
+  opacity: 0.6;
+}
+.cm-fat-cursor .CodeMirror-line > span[role="presentation"] {
+  caret-color: transparent;
+}

package/webpack.config.js ADDED Viewed

@@ -0,0 +1,61 @@
+const path = require('path')
+const CopyPlugin = require('copy-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+module.exports = {
+  entry: [path.resolve(__dirname, 'src', 'main.js'), path.resolve(__dirname, 'src', 'main.scss')],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: '[name].js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.s[ac]ss$/i,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          {
+            loader: 'sass-loader',
+            options: {
+              sassOptions: {
+                includePaths: ['src/main.scss'],
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new CopyPlugin({
+      patterns: [
+        {
+          from: path.resolve(__dirname, 'node_modules/codemirror/lib'),
+          to: path.resolve(__dirname, 'dist/codemirror/lib'),
+        },
+        {
+          from: path.resolve(__dirname, 'node_modules/codemirror/mode'),
+          to: path.resolve(__dirname, 'dist/codemirror/mode'),
+        },
+        {
+          from: path.resolve(__dirname, 'node_modules/codemirror/addon'),
+          to: path.resolve(__dirname, 'dist/codemirror/addon'),
+        },
+        {
+          from: path.resolve(__dirname, 'node_modules/codemirror/keymap/vim.js'),
+          to: path.resolve(__dirname, 'dist/codemirror/keymap'),
+        },
+        {
+          from: require.resolve('@standardnotes/component-relay/dist/dist.js'),
+          to: path.resolve(__dirname, 'dist/lib/component-relay.js'),
+        },
+        { from: require.resolve('sn-stylekit/dist/stylekit.css'), to: path.resolve(__dirname, 'dist/stylekit.css') },
+      ],
+    }),
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+      chunkFilename: '[id].css',
+    }),
+  ],
+}

package/webpack.dev.js ADDED Viewed

@@ -0,0 +1,11 @@
+const { merge } = require('webpack-merge')
+const config = require('./webpack.config.js')
+module.exports = merge(config, {
+  mode: 'development',
+  watch: true,
+  devtool: 'eval-cheap-module-source-map',
+  stats: {
+    colors: true,
+  },
+})

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',
+})