@standardnotes/markdown-minimal 1.2.1

package/dist/sn-codemirror-search/searchcursor.js

@@ -0,0 +1,293 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: https://codemirror.net/LICENSE
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../../lib/codemirror"))
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../../lib/codemirror"], mod)
+  else // Plain browser env
+    mod(CodeMirror)
+})(function(CodeMirror) {
+  "use strict"
+  var Pos = CodeMirror.Pos
+
+  function regexpFlags(regexp) {
+    var flags = regexp.flags
+    return flags != null ? flags : (regexp.ignoreCase ? "i" : "")
+      + (regexp.global ? "g" : "")
+      + (regexp.multiline ? "m" : "")
+  }
+
+  function ensureFlags(regexp, flags) {
+    var current = regexpFlags(regexp), target = current
+    for (var i = 0; i < flags.length; i++) if (target.indexOf(flags.charAt(i)) == -1)
+      target += flags.charAt(i)
+    return current == target ? regexp : new RegExp(regexp.source, target)
+  }
+
+  function maybeMultiline(regexp) {
+    return /\\s|\\n|\n|\\W|\\D|\[\^/.test(regexp.source)
+  }
+
+  function searchRegexpForward(doc, regexp, start) {
+    regexp = ensureFlags(regexp, "g")
+    for (var line = start.line, ch = start.ch, last = doc.lastLine(); line <= last; line++, ch = 0) {
+      regexp.lastIndex = ch
+      var string = doc.getLine(line), match = regexp.exec(string)
+      if (match)
+        return {from: Pos(line, match.index),
+                to: Pos(line, match.index + match[0].length),
+                match: match}
+    }
+  }
+
+  function searchRegexpForwardMultiline(doc, regexp, start) {
+    if (!maybeMultiline(regexp)) return searchRegexpForward(doc, regexp, start)
+
+    regexp = ensureFlags(regexp, "gm")
+    var string, chunk = 1
+    for (var line = start.line, last = doc.lastLine(); line <= last;) {
+      // This grows the search buffer in exponentially-sized chunks
+      // between matches, so that nearby matches are fast and don't
+      // require concatenating the whole document (in case we're
+      // searching for something that has tons of matches), but at the
+      // same time, the amount of retries is limited.
+      for (var i = 0; i < chunk; i++) {
+        if (line > last) break
+        var curLine = doc.getLine(line++)
+        string = string == null ? curLine : string + "\n" + curLine
+      }
+      chunk = chunk * 2
+      regexp.lastIndex = start.ch
+      var match = regexp.exec(string)
+      if (match) {
+        var before = string.slice(0, match.index).split("\n"), inside = match[0].split("\n")
+        var startLine = start.line + before.length - 1, startCh = before[before.length - 1].length
+        return {from: Pos(startLine, startCh),
+                to: Pos(startLine + inside.length - 1,
+                        inside.length == 1 ? startCh + inside[0].length : inside[inside.length - 1].length),
+                match: match}
+      }
+    }
+  }
+
+  function lastMatchIn(string, regexp) {
+    var cutOff = 0, match
+    for (;;) {
+      regexp.lastIndex = cutOff
+      var newMatch = regexp.exec(string)
+      if (!newMatch) return match
+      match = newMatch
+      cutOff = match.index + (match[0].length || 1)
+      if (cutOff == string.length) return match
+    }
+  }
+
+  function searchRegexpBackward(doc, regexp, start) {
+    regexp = ensureFlags(regexp, "g")
+    for (var line = start.line, ch = start.ch, first = doc.firstLine(); line >= first; line--, ch = -1) {
+      var string = doc.getLine(line)
+      if (ch > -1) string = string.slice(0, ch)
+      var match = lastMatchIn(string, regexp)
+      if (match)
+        return {from: Pos(line, match.index),
+                to: Pos(line, match.index + match[0].length),
+                match: match}
+    }
+  }
+
+  function searchRegexpBackwardMultiline(doc, regexp, start) {
+    regexp = ensureFlags(regexp, "gm")
+    var string, chunk = 1
+    for (var line = start.line, first = doc.firstLine(); line >= first;) {
+      for (var i = 0; i < chunk; i++) {
+        var curLine = doc.getLine(line--)
+        string = string == null ? curLine.slice(0, start.ch) : curLine + "\n" + string
+      }
+      chunk *= 2
+
+      var match = lastMatchIn(string, regexp)
+      if (match) {
+        var before = string.slice(0, match.index).split("\n"), inside = match[0].split("\n")
+        var startLine = line + before.length, startCh = before[before.length - 1].length
+        return {from: Pos(startLine, startCh),
+                to: Pos(startLine + inside.length - 1,
+                        inside.length == 1 ? startCh + inside[0].length : inside[inside.length - 1].length),
+                match: match}
+      }
+    }
+  }
+
+  var doFold, noFold
+  if (String.prototype.normalize) {
+    doFold = function(str) { return str.normalize("NFD").toLowerCase() }
+    noFold = function(str) { return str.normalize("NFD") }
+  } else {
+    doFold = function(str) { return str.toLowerCase() }
+    noFold = function(str) { return str }
+  }
+
+  // Maps a position in a case-folded line back to a position in the original line
+  // (compensating for codepoints increasing in number during folding)
+  function adjustPos(orig, folded, pos, foldFunc) {
+    if (orig.length == folded.length) return pos
+    for (var min = 0, max = pos + Math.max(0, orig.length - folded.length);;) {
+      if (min == max) return min
+      var mid = (min + max) >> 1
+      var len = foldFunc(orig.slice(0, mid)).length
+      if (len == pos) return mid
+      else if (len > pos) max = mid
+      else min = mid + 1
+    }
+  }
+
+  function searchStringForward(doc, query, start, caseFold) {
+    // Empty string would match anything and never progress, so we
+    // define it to match nothing instead.
+    if (!query.length) return null
+    var fold = caseFold ? doFold : noFold
+    var lines = fold(query).split(/\r|\n\r?/)
+
+    search: for (var line = start.line, ch = start.ch, last = doc.lastLine() + 1 - lines.length; line <= last; line++, ch = 0) {
+      var orig = doc.getLine(line).slice(ch), string = fold(orig)
+      if (lines.length == 1) {
+        var found = string.indexOf(lines[0])
+        if (found == -1) continue search
+        var start = adjustPos(orig, string, found, fold) + ch
+        return {from: Pos(line, adjustPos(orig, string, found, fold) + ch),
+                to: Pos(line, adjustPos(orig, string, found + lines[0].length, fold) + ch)}
+      } else {
+        var cutFrom = string.length - lines[0].length
+        if (string.slice(cutFrom) != lines[0]) continue search
+        for (var i = 1; i < lines.length - 1; i++)
+          if (fold(doc.getLine(line + i)) != lines[i]) continue search
+        var end = doc.getLine(line + lines.length - 1), endString = fold(end), lastLine = lines[lines.length - 1]
+        if (endString.slice(0, lastLine.length) != lastLine) continue search
+        return {from: Pos(line, adjustPos(orig, string, cutFrom, fold) + ch),
+                to: Pos(line + lines.length - 1, adjustPos(end, endString, lastLine.length, fold))}
+      }
+    }
+  }
+
+  function searchStringBackward(doc, query, start, caseFold) {
+    if (!query.length) return null
+    var fold = caseFold ? doFold : noFold
+    var lines = fold(query).split(/\r|\n\r?/)
+
+    search: for (var line = start.line, ch = start.ch, first = doc.firstLine() - 1 + lines.length; line >= first; line--, ch = -1) {
+      var orig = doc.getLine(line)
+      if (ch > -1) orig = orig.slice(0, ch)
+      var string = fold(orig)
+      if (lines.length == 1) {
+        var found = string.lastIndexOf(lines[0])
+        if (found == -1) continue search
+        return {from: Pos(line, adjustPos(orig, string, found, fold)),
+                to: Pos(line, adjustPos(orig, string, found + lines[0].length, fold))}
+      } else {
+        var lastLine = lines[lines.length - 1]
+        if (string.slice(0, lastLine.length) != lastLine) continue search
+        for (var i = 1, start = line - lines.length + 1; i < lines.length - 1; i++)
+          if (fold(doc.getLine(start + i)) != lines[i]) continue search
+        var top = doc.getLine(line + 1 - lines.length), topString = fold(top)
+        if (topString.slice(topString.length - lines[0].length) != lines[0]) continue search
+        return {from: Pos(line + 1 - lines.length, adjustPos(top, topString, top.length - lines[0].length, fold)),
+                to: Pos(line, adjustPos(orig, string, lastLine.length, fold))}
+      }
+    }
+  }
+
+  function SearchCursor(doc, query, pos, options) {
+    this.atOccurrence = false
+    this.doc = doc
+    pos = pos ? doc.clipPos(pos) : Pos(0, 0)
+    this.pos = {from: pos, to: pos}
+
+    var caseFold
+    if (typeof options == "object") {
+      caseFold = options.caseFold
+    } else { // Backwards compat for when caseFold was the 4th argument
+      caseFold = options
+      options = null
+    }
+
+    if (typeof query == "string") {
+      if (caseFold == null) caseFold = false
+      this.matches = function(reverse, pos) {
+        return (reverse ? searchStringBackward : searchStringForward)(doc, query, pos, caseFold)
+      }
+    } else {
+      query = ensureFlags(query, "gm")
+      if (!options || options.multiline !== false)
+        this.matches = function(reverse, pos) {
+          return (reverse ? searchRegexpBackwardMultiline : searchRegexpForwardMultiline)(doc, query, pos)
+        }
+      else
+        this.matches = function(reverse, pos) {
+          return (reverse ? searchRegexpBackward : searchRegexpForward)(doc, query, pos)
+        }
+    }
+  }
+
+  SearchCursor.prototype = {
+    findNext: function() {return this.find(false)},
+    findPrevious: function() {return this.find(true)},
+
+    find: function(reverse) {
+      var result = this.matches(reverse, this.doc.clipPos(reverse ? this.pos.from : this.pos.to))
+
+      // Implements weird auto-growing behavior on null-matches for
+      // backwards-compatiblity with the vim code (unfortunately)
+      while (result && CodeMirror.cmpPos(result.from, result.to) == 0) {
+        if (reverse) {
+          if (result.from.ch) result.from = Pos(result.from.line, result.from.ch - 1)
+          else if (result.from.line == this.doc.firstLine()) result = null
+          else result = this.matches(reverse, this.doc.clipPos(Pos(result.from.line - 1)))
+        } else {
+          if (result.to.ch < this.doc.getLine(result.to.line).length) result.to = Pos(result.to.line, result.to.ch + 1)
+          else if (result.to.line == this.doc.lastLine()) result = null
+          else result = this.matches(reverse, Pos(result.to.line + 1, 0))
+        }
+      }
+
+      if (result) {
+        this.pos = result
+        this.atOccurrence = true
+        return this.pos.match || true
+      } else {
+        var end = Pos(reverse ? this.doc.firstLine() : this.doc.lastLine() + 1, 0)
+        this.pos = {from: end, to: end}
+        return this.atOccurrence = false
+      }
+    },
+
+    from: function() {if (this.atOccurrence) return this.pos.from},
+    to: function() {if (this.atOccurrence) return this.pos.to},
+
+    replace: function(newText, origin) {
+      if (!this.atOccurrence) return
+      var lines = CodeMirror.splitLines(newText)
+      this.doc.replaceRange(lines, this.pos.from, this.pos.to, origin)
+      this.pos.to = Pos(this.pos.from.line + lines.length - 1,
+                        lines[lines.length - 1].length + (lines.length == 1 ? this.pos.from.ch : 0))
+    }
+  }
+
+  CodeMirror.defineExtension("getSearchCursor", function(query, pos, caseFold) {
+    return new SearchCursor(this.doc, query, pos, caseFold)
+  })
+  CodeMirror.defineDocExtension("getSearchCursor", function(query, pos, caseFold) {
+    return new SearchCursor(this, query, pos, caseFold)
+  })
+
+  CodeMirror.defineExtension("selectMatches", function(query, caseFold) {
+    var ranges = []
+    var cur = this.getSearchCursor(query, this.getCursor("from"), caseFold)
+    while (cur.findNext()) {
+      if (CodeMirror.cmpPos(cur.to(), this.getCursor("to")) > 0) break
+      ranges.push({anchor: cur.from(), head: cur.to()})
+    }
+    if (ranges.length)
+      this.setSelections(ranges, 0)
+  })
+});

package/ext.json

@@ -0,0 +1,8 @@
+{
+    "identifier": "org.yourdomain.my-extension",
+    "name": "Minimal Markdown Editor",
+    "content_type": "SN|Component",
+    "area": "editor-editor",
+    "version": "1.0.0",
+    "url": "http://localhost:8005/"
+  }

package/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <base target="_blank">
+    <meta charset="UTF-8">
+
+    <script src="dist/dist.js"></script>
+
+    <script src="dist/sn-codemirror-search/search.js"></script>
+    <script src="dist/sn-codemirror-search/searchcursor.js"></script>
+    <script src="dist/sn-codemirror-search/dialog/dialog.js"></script>
+
+    <link rel="stylesheet" media="all" href="dist/dist.css">
+    <link rel="stylesheet" media="all" href="dist/sn-codemirror-search/dialog/dialog.css">
+  </head>
+
+  <body>
+    <div id="wrapper">
+      <textarea id="code" name="code"></textarea>
+    <div>
+
+  </body>
+</html>

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@standardnotes/markdown-minimal",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "1.2.1",
+  "description": "A minimal Markdown editor for Standard Notes.",
+  "author": "Standard Notes Retired",
+  "main": "dist/dist.js",
+  "sn": {
+    "name": "Minimal Markdown",
+    "content_type": "SN|Component",
+    "main": "index.html",
+    "area": "editor-editor",
+    "spellcheckControl": true,
+    "note_type": "markdown",
+    "file_type": "txt"
+  },
+  "scripts": {
+    "build": "grunt",
+    "test": "echo \"Error: no test specified\" && exit 0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.11.1",
+    "@babel/preset-env": "^7.11.0",
+    "@standardnotes/component-relay": "standardnotes/component-relay#839ff5db9bc92db9d42cad8d202ddc4df729597d",
+    "babel-cli": "^6.26.0",
+    "codemirror": "^5.56.0",
+    "grunt": "^1.2.1",
+    "grunt-babel": "^8.0.0",
+    "grunt-browserify": "^5.3.0",
+    "grunt-contrib-concat": "^1.0.1",
+    "grunt-contrib-copy": "^1.0.0",
+    "grunt-contrib-sass": "^1.0.0",
+    "grunt-contrib-watch": "^1.1.0",
+    "grunt-newer": "^1.3.0",
+    "sass": "*",
+    "sn-codemirror-search": "1.0.0",
+    "sn-stylekit": "2.1.0"
+  }
+}

package/src/main.js

@@ -0,0 +1,110 @@
+document.addEventListener('DOMContentLoaded', function (event) {
+  let componentRelay
+  let workingNote, clientData
+  let lastValue, lastUUID
+  let editor
+  let ignoreTextChange = false
+  let initialLoad = true
+
+  function loadComponentRelay() {
+    const initialPermissions = [{ name: 'stream-context-item' }]
+    componentRelay = new ComponentRelay({
+      initialPermissions,
+      targetWindow: window,
+      onReady: function () {
+        const platform = componentRelay.platform
+        if (platform) {
+          document.body.classList.add(platform)
+        }
+
+        loadEditor()
+
+        // only use CodeMirror selection color if we're not on mobile.
+        editor.setOption('styleSelectedText', !componentRelay.isMobile)
+      },
+      handleRequestForContentHeight: () => {
+        return undefined
+      },
+    })
+
+    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
+
+        // clear previews
+        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
+
+    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() {
+    editor = CodeMirror.fromTextArea(document.getElementById('code'), {
+      mode: 'gfm',
+      lineWrapping: true,
+      extraKeys: { 'Alt-F': 'findPersistent' },
+      inputStyle: getInputStyleForEnvironment(),
+    })
+    editor.setSize(undefined, '100%')
+
+    editor.on('change', function () {
+      if (ignoreTextChange) {
+        return
+      }
+      saveNote()
+    })
+  }
+
+  function getInputStyleForEnvironment() {
+    const environment = componentRelay.environment ?? 'web'
+    return environment === 'mobile' ? 'textarea' : 'contenteditable'
+  }
+
+  loadComponentRelay()
+})

package/src/main.scss

@@ -0,0 +1,151 @@
+body,
+html {
+  font-family: sans-serif;
+  font-size: var(--sn-stylekit-base-font-size);
+  height: 100%;
+  margin: 0;
+  background-color: transparent;
+}
+
+* {
+  // To prevent gray flash when focusing input on mobile Safari
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+#wrapper {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+  // padding-right: 20px;
+}
+
+.CodeMirror-scroll {
+  padding: 8px;
+}
+
+.CodeMirror {
+  background-color: var(--sn-stylekit-editor-background-color) !important;
+  color: var(--sn-stylekit-editor-foreground-color) !important;
+  border: 0 !important;
+  font-family: sans-serif;
+
+  -webkit-overflow-scrolling: touch;
+
+  flex: 1 1 auto;
+  height: 100%;
+  resize: none;
+  font-size: var(--sn-stylekit-font-size-editor);
+  padding: 0;
+
+  .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%; // font-family makes font look a bit big
+
+    &.CodeMirror-selectedtext {
+      color: var(--sn-stylekit-info-contrast-color) !important;
+      background: var(--sn-stylekit-info-color) !important;
+    }
+  }
+
+  .cm-header {
+    color: var(--sn-stylekit-editor-foreground-color);
+
+    &.CodeMirror-selectedtext {
+      color: var(--sn-stylekit-info-contrast-color) !important;
+      background: var(--sn-stylekit-info-color) !important;
+    }
+  }
+
+  // Faded Markdown syntax
+  .cm-formatting-header,
+  .cm-formatting-strong,
+  .cm-formatting-em {
+    opacity: 0.2;
+  }
+
+  .cm-variable-2, .cm-variable-3 {
+    color: var(--sn-stylekit-editor-foreground-color) !important;
+
+    &.CodeMirror-selectedtext {
+      color: var(--sn-stylekit-info-contrast-color) !important;
+      background: transparent;
+    }
+  }
+  .cm-variable-3 {
+    color: var(--sn-stylekit-editor-foreground-color) !important;
+
+    &.CodeMirror-selectedtext {
+      color: var(--sn-stylekit-info-contrast-color) !important;
+      background: transparent;
+    }
+  }
+
+  .cm-link,
+  .cm-string {
+    color: var(--sn-stylekit-info-color) !important;
+
+    &.CodeMirror-selectedtext {
+      color: var(--sn-stylekit-info-contrast-color) !important;
+      background: var(--sn-stylekit-info-color) !important;
+    }
+  }
+
+  .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) !important;
+  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-s-default .cm-variable-3, .cm-s-default .cm-type {
+  color: var(--sn-stylekit-success-color) !important;
+}
+
+.CodeMirror .cm-link, .CodeMirror .cm-string, .CodeMirror .cm-keyword {
+  color: var(--sn-stylekit-info-color);
+}