@convertkit/editor-html - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

es/index.js

@@ -1,10 +0,1122 @@
-import React from 'react';
+import React, { Component } from 'react';
 
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  subClass.__proto__ = superClass;
+}
+
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return self;
+}
+
+var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function createCommonjsModule(fn, module) {
+	return module = { exports: {} }, fn(module, module.exports), module.exports;
+}
+
+var prism = createCommonjsModule(function (module) {
+/* **********************************************
+     Begin prism-core.js
+********************************************** */
+var _self = typeof window !== 'undefined' ? window // if in browser
+: typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope ? self // if in worker
+: {} // if in node js
+;
+/**
+ * Prism: Lightweight, robust, elegant syntax highlighting
+ * MIT license http://www.opensource.org/licenses/mit-license.php/
+ * @author Lea Verou http://lea.verou.me
+ */
+
+
+var Prism = function () {
+  // Private helper vars
+  var lang = /\blang(?:uage)?-([\w-]+)\b/i;
+  var uniqueId = 0;
+
+  var _ = _self.Prism = {
+    manual: _self.Prism && _self.Prism.manual,
+    disableWorkerMessageHandler: _self.Prism && _self.Prism.disableWorkerMessageHandler,
+    util: {
+      encode: function encode(tokens) {
+        if (tokens instanceof Token) {
+          return new Token(tokens.type, _.util.encode(tokens.content), tokens.alias);
+        } else if (_.util.type(tokens) === 'Array') {
+          return tokens.map(_.util.encode);
+        } else {
+          return tokens.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/\u00a0/g, ' ');
+        }
+      },
+      type: function type(o) {
+        return Object.prototype.toString.call(o).match(/\[object (\w+)\]/)[1];
+      },
+      objId: function objId(obj) {
+        if (!obj['__id']) {
+          Object.defineProperty(obj, '__id', {
+            value: ++uniqueId
+          });
+        }
+
+        return obj['__id'];
+      },
+      // Deep clone a language definition (e.g. to extend it)
+      clone: function clone(o, visited) {
+        var type = _.util.type(o);
+
+        visited = visited || {};
+
+        switch (type) {
+          case 'Object':
+            if (visited[_.util.objId(o)]) {
+              return visited[_.util.objId(o)];
+            }
+
+            var clone = {};
+            visited[_.util.objId(o)] = clone;
+
+            for (var key in o) {
+              if (o.hasOwnProperty(key)) {
+                clone[key] = _.util.clone(o[key], visited);
+              }
+            }
+
+            return clone;
+
+          case 'Array':
+            if (visited[_.util.objId(o)]) {
+              return visited[_.util.objId(o)];
+            }
+
+            var clone = [];
+            visited[_.util.objId(o)] = clone;
+            o.forEach(function (v, i) {
+              clone[i] = _.util.clone(v, visited);
+            });
+            return clone;
+        }
+
+        return o;
+      }
+    },
+    languages: {
+      extend: function extend(id, redef) {
+        var lang = _.util.clone(_.languages[id]);
+
+        for (var key in redef) {
+          lang[key] = redef[key];
+        }
+
+        return lang;
+      },
+
+      /**
+       * Insert a token before another token in a language literal
+       * As this needs to recreate the object (we cannot actually insert before keys in object literals),
+       * we cannot just provide an object, we need anobject and a key.
+       * @param inside The key (or language id) of the parent
+       * @param before The key to insert before. If not provided, the function appends instead.
+       * @param insert Object with the key/value pairs to insert
+       * @param root The object that contains `inside`. If equal to Prism.languages, it can be omitted.
+       */
+      insertBefore: function insertBefore(inside, before, insert, root) {
+        root = root || _.languages;
+        var grammar = root[inside];
+
+        if (arguments.length == 2) {
+          insert = arguments[1];
+
+          for (var newToken in insert) {
+            if (insert.hasOwnProperty(newToken)) {
+              grammar[newToken] = insert[newToken];
+            }
+          }
+
+          return grammar;
+        }
+
+        var ret = {};
+
+        for (var token in grammar) {
+          if (grammar.hasOwnProperty(token)) {
+            if (token == before) {
+              for (var newToken in insert) {
+                if (insert.hasOwnProperty(newToken)) {
+                  ret[newToken] = insert[newToken];
+                }
+              }
+            }
+
+            ret[token] = grammar[token];
+          }
+        } // Update references in other language definitions
+
+
+        _.languages.DFS(_.languages, function (key, value) {
+          if (value === root[inside] && key != inside) {
+            this[key] = ret;
+          }
+        });
+
+        return root[inside] = ret;
+      },
+      // Traverse a language definition with Depth First Search
+      DFS: function DFS(o, callback, type, visited) {
+        visited = visited || {};
+
+        for (var i in o) {
+          if (o.hasOwnProperty(i)) {
+            callback.call(o, i, o[i], type || i);
+
+            if (_.util.type(o[i]) === 'Object' && !visited[_.util.objId(o[i])]) {
+              visited[_.util.objId(o[i])] = true;
+
+              _.languages.DFS(o[i], callback, null, visited);
+            } else if (_.util.type(o[i]) === 'Array' && !visited[_.util.objId(o[i])]) {
+              visited[_.util.objId(o[i])] = true;
+
+              _.languages.DFS(o[i], callback, i, visited);
+            }
+          }
+        }
+      }
+    },
+    plugins: {},
+    highlightAll: function highlightAll(async, callback) {
+      _.highlightAllUnder(document, async, callback);
+    },
+    highlightAllUnder: function highlightAllUnder(container, async, callback) {
+      var env = {
+        callback: callback,
+        selector: 'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'
+      };
+
+      _.hooks.run("before-highlightall", env);
+
+      var elements = env.elements || container.querySelectorAll(env.selector);
+
+      for (var i = 0, element; element = elements[i++];) {
+        _.highlightElement(element, async === true, env.callback);
+      }
+    },
+    highlightElement: function highlightElement(element, async, callback) {
+      // Find language
+      var language,
+          grammar,
+          parent = element;
+
+      while (parent && !lang.test(parent.className)) {
+        parent = parent.parentNode;
+      }
+
+      if (parent) {
+        language = (parent.className.match(lang) || [, ''])[1].toLowerCase();
+        grammar = _.languages[language];
+      } // Set language on the element, if not present
+
+
+      element.className = element.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language;
+
+      if (element.parentNode) {
+        // Set language on the parent, for styling
+        parent = element.parentNode;
+
+        if (/pre/i.test(parent.nodeName)) {
+          parent.className = parent.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language;
+        }
+      }
+
+      var code = element.textContent;
+      var env = {
+        element: element,
+        language: language,
+        grammar: grammar,
+        code: code
+      };
+
+      _.hooks.run('before-sanity-check', env);
+
+      if (!env.code || !env.grammar) {
+        if (env.code) {
+          _.hooks.run('before-highlight', env);
+
+          env.element.textContent = env.code;
+
+          _.hooks.run('after-highlight', env);
+        }
+
+        _.hooks.run('complete', env);
+
+        return;
+      }
+
+      _.hooks.run('before-highlight', env);
+
+      if (async && _self.Worker) {
+        var worker = new Worker(_.filename);
+
+        worker.onmessage = function (evt) {
+          env.highlightedCode = evt.data;
+
+          _.hooks.run('before-insert', env);
+
+          env.element.innerHTML = env.highlightedCode;
+          callback && callback.call(env.element);
+
+          _.hooks.run('after-highlight', env);
+
+          _.hooks.run('complete', env);
+        };
+
+        worker.postMessage(JSON.stringify({
+          language: env.language,
+          code: env.code,
+          immediateClose: true
+        }));
+      } else {
+        env.highlightedCode = _.highlight(env.code, env.grammar, env.language);
+
+        _.hooks.run('before-insert', env);
+
+        env.element.innerHTML = env.highlightedCode;
+        callback && callback.call(element);
+
+        _.hooks.run('after-highlight', env);
+
+        _.hooks.run('complete', env);
+      }
+    },
+    highlight: function highlight(text, grammar, language) {
+      var env = {
+        code: text,
+        grammar: grammar,
+        language: language
+      };
+
+      _.hooks.run('before-tokenize', env);
+
+      env.tokens = _.tokenize(env.code, env.grammar);
+
+      _.hooks.run('after-tokenize', env);
+
+      return Token.stringify(_.util.encode(env.tokens), env.language);
+    },
+    matchGrammar: function matchGrammar(text, strarr, grammar, index, startPos, oneshot, target) {
+      var Token = _.Token;
+
+      for (var token in grammar) {
+        if (!grammar.hasOwnProperty(token) || !grammar[token]) {
+          continue;
+        }
+
+        if (token == target) {
+          return;
+        }
+
+        var patterns = grammar[token];
+        patterns = _.util.type(patterns) === "Array" ? patterns : [patterns];
+
+        for (var j = 0; j < patterns.length; ++j) {
+          var pattern = patterns[j],
+              inside = pattern.inside,
+              lookbehind = !!pattern.lookbehind,
+              greedy = !!pattern.greedy,
+              lookbehindLength = 0,
+              alias = pattern.alias;
+
+          if (greedy && !pattern.pattern.global) {
+            // Without the global flag, lastIndex won't work
+            var flags = pattern.pattern.toString().match(/[imuy]*$/)[0];
+            pattern.pattern = RegExp(pattern.pattern.source, flags + "g");
+          }
+
+          pattern = pattern.pattern || pattern; // Don’t cache length as it changes during the loop
+
+          for (var i = index, pos = startPos; i < strarr.length; pos += strarr[i].length, ++i) {
+            var str = strarr[i];
+
+            if (strarr.length > text.length) {
+              // Something went terribly wrong, ABORT, ABORT!
+              return;
+            }
+
+            if (str instanceof Token) {
+              continue;
+            }
+
+            if (greedy && i != strarr.length - 1) {
+              pattern.lastIndex = pos;
+              var match = pattern.exec(text);
+
+              if (!match) {
+                break;
+              }
+
+              var from = match.index + (lookbehind ? match[1].length : 0),
+                  to = match.index + match[0].length,
+                  k = i,
+                  p = pos;
+
+              for (var len = strarr.length; k < len && (p < to || !strarr[k].type && !strarr[k - 1].greedy); ++k) {
+                p += strarr[k].length; // Move the index i to the element in strarr that is closest to from
+
+                if (from >= p) {
+                  ++i;
+                  pos = p;
+                }
+              } // If strarr[i] is a Token, then the match starts inside another Token, which is invalid
+
+
+              if (strarr[i] instanceof Token) {
+                continue;
+              } // Number of tokens to delete and replace with the new match
+
+
+              delNum = k - i;
+              str = text.slice(pos, p);
+              match.index -= pos;
+            } else {
+              pattern.lastIndex = 0;
+              var match = pattern.exec(str),
+                  delNum = 1;
+            }
+
+            if (!match) {
+              if (oneshot) {
+                break;
+              }
+
+              continue;
+            }
+
+            if (lookbehind) {
+              lookbehindLength = match[1] ? match[1].length : 0;
+            }
+
+            var from = match.index + lookbehindLength,
+                match = match[0].slice(lookbehindLength),
+                to = from + match.length,
+                before = str.slice(0, from),
+                after = str.slice(to);
+            var args = [i, delNum];
+
+            if (before) {
+              ++i;
+              pos += before.length;
+              args.push(before);
+            }
+
+            var wrapped = new Token(token, inside ? _.tokenize(match, inside) : match, alias, match, greedy);
+            args.push(wrapped);
+
+            if (after) {
+              args.push(after);
+            }
+
+            Array.prototype.splice.apply(strarr, args);
+            if (delNum != 1) _.matchGrammar(text, strarr, grammar, i, pos, true, token);
+            if (oneshot) break;
+          }
+        }
+      }
+    },
+    tokenize: function tokenize(text, grammar, language) {
+      var strarr = [text];
+      var rest = grammar.rest;
+
+      if (rest) {
+        for (var token in rest) {
+          grammar[token] = rest[token];
+        }
+
+        delete grammar.rest;
+      }
+
+      _.matchGrammar(text, strarr, grammar, 0, 0, false);
+
+      return strarr;
+    },
+    hooks: {
+      all: {},
+      add: function add(name, callback) {
+        var hooks = _.hooks.all;
+        hooks[name] = hooks[name] || [];
+        hooks[name].push(callback);
+      },
+      run: function run(name, env) {
+        var callbacks = _.hooks.all[name];
+
+        if (!callbacks || !callbacks.length) {
+          return;
+        }
+
+        for (var i = 0, callback; callback = callbacks[i++];) {
+          callback(env);
+        }
+      }
+    }
+  };
+
+  var Token = _.Token = function (type, content, alias, matchedStr, greedy) {
+    this.type = type;
+    this.content = content;
+    this.alias = alias; // Copy of the full string this token was created from
+
+    this.length = (matchedStr || "").length | 0;
+    this.greedy = !!greedy;
+  };
+
+  Token.stringify = function (o, language, parent) {
+    if (typeof o == 'string') {
+      return o;
+    }
+
+    if (_.util.type(o) === 'Array') {
+      return o.map(function (element) {
+        return Token.stringify(element, language, o);
+      }).join('');
+    }
+
+    var env = {
+      type: o.type,
+      content: Token.stringify(o.content, language, parent),
+      tag: 'span',
+      classes: ['token', o.type],
+      attributes: {},
+      language: language,
+      parent: parent
+    };
+
+    if (o.alias) {
+      var aliases = _.util.type(o.alias) === 'Array' ? o.alias : [o.alias];
+      Array.prototype.push.apply(env.classes, aliases);
+    }
+
+    _.hooks.run('wrap', env);
+
+    var attributes = Object.keys(env.attributes).map(function (name) {
+      return name + '="' + (env.attributes[name] || '').replace(/"/g, '&quot;') + '"';
+    }).join(' ');
+    return '<' + env.tag + ' class="' + env.classes.join(' ') + '"' + (attributes ? ' ' + attributes : '') + '>' + env.content + '</' + env.tag + '>';
+  };
+
+  if (!_self.document) {
+    if (!_self.addEventListener) {
+      // in Node.js
+      return _self.Prism;
+    }
+
+    if (!_.disableWorkerMessageHandler) {
+      // In worker
+      _self.addEventListener('message', function (evt) {
+        var message = JSON.parse(evt.data),
+            lang = message.language,
+            code = message.code,
+            immediateClose = message.immediateClose;
+
+        _self.postMessage(_.highlight(code, _.languages[lang], lang));
+
+        if (immediateClose) {
+          _self.close();
+        }
+      }, false);
+    }
+
+    return _self.Prism;
+  } //Get current script and highlight
+
+
+  var script = document.currentScript || [].slice.call(document.getElementsByTagName("script")).pop();
+
+  if (script) {
+    _.filename = script.src;
+
+    if (!_.manual && !script.hasAttribute('data-manual')) {
+      if (document.readyState !== "loading") {
+        if (window.requestAnimationFrame) {
+          window.requestAnimationFrame(_.highlightAll);
+        } else {
+          window.setTimeout(_.highlightAll, 16);
+        }
+      } else {
+        document.addEventListener('DOMContentLoaded', _.highlightAll);
+      }
+    }
+  }
+
+  return _self.Prism;
+}();
+
+if (module.exports) {
+  module.exports = Prism;
+} // hack for components to work correctly in node.js
+
+
+if (typeof commonjsGlobal !== 'undefined') {
+  commonjsGlobal.Prism = Prism;
+}
+/* **********************************************
+     Begin prism-markup.js
+********************************************** */
+
+
+Prism.languages.markup = {
+  'comment': /<!--[\s\S]*?-->/,
+  'prolog': /<\?[\s\S]+?\?>/,
+  'doctype': /<!DOCTYPE[\s\S]+?>/i,
+  'cdata': /<!\[CDATA\[[\s\S]*?]]>/i,
+  'tag': {
+    pattern: /<\/?(?!\d)[^\s>\/=$<%]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i,
+    greedy: true,
+    inside: {
+      'tag': {
+        pattern: /^<\/?[^\s>\/]+/i,
+        inside: {
+          'punctuation': /^<\/?/,
+          'namespace': /^[^\s>\/:]+:/
+        }
+      },
+      'attr-value': {
+        pattern: /=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i,
+        inside: {
+          'punctuation': [/^=/, {
+            pattern: /(^|[^\\])["']/,
+            lookbehind: true
+          }]
+        }
+      },
+      'punctuation': /\/?>/,
+      'attr-name': {
+        pattern: /[^\s>\/]+/,
+        inside: {
+          'namespace': /^[^\s>\/:]+:/
+        }
+      }
+    }
+  },
+  'entity': /&#?[\da-z]{1,8};/i
+};
+Prism.languages.markup['tag'].inside['attr-value'].inside['entity'] = Prism.languages.markup['entity']; // Plugin to make entity title show the real entity, idea by Roman Komarov
+
+Prism.hooks.add('wrap', function (env) {
+  if (env.type === 'entity') {
+    env.attributes['title'] = env.content.replace(/&amp;/, '&');
+  }
+});
+Prism.languages.xml = Prism.languages.markup;
+Prism.languages.html = Prism.languages.markup;
+Prism.languages.mathml = Prism.languages.markup;
+Prism.languages.svg = Prism.languages.markup;
+/* **********************************************
+     Begin prism-css.js
+********************************************** */
+
+Prism.languages.css = {
+  'comment': /\/\*[\s\S]*?\*\//,
+  'atrule': {
+    pattern: /@[\w-]+?.*?(?:;|(?=\s*\{))/i,
+    inside: {
+      'rule': /@[\w-]+/ // See rest below
+
+    }
+  },
+  'url': /url\((?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,
+  'selector': /[^{}\s][^{};]*?(?=\s*\{)/,
+  'string': {
+    pattern: /("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
+    greedy: true
+  },
+  'property': /[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,
+  'important': /\B!important\b/i,
+  'function': /[-a-z0-9]+(?=\()/i,
+  'punctuation': /[(){};:]/
+};
+Prism.languages.css['atrule'].inside.rest = Prism.languages.css;
+
+if (Prism.languages.markup) {
+  Prism.languages.insertBefore('markup', 'tag', {
+    'style': {
+      pattern: /(<style[\s\S]*?>)[\s\S]*?(?=<\/style>)/i,
+      lookbehind: true,
+      inside: Prism.languages.css,
+      alias: 'language-css',
+      greedy: true
+    }
+  });
+  Prism.languages.insertBefore('inside', 'attr-value', {
+    'style-attr': {
+      pattern: /\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,
+      inside: {
+        'attr-name': {
+          pattern: /^\s*style/i,
+          inside: Prism.languages.markup.tag.inside
+        },
+        'punctuation': /^\s*=\s*['"]|['"]\s*$/,
+        'attr-value': {
+          pattern: /.+/i,
+          inside: Prism.languages.css
+        }
+      },
+      alias: 'language-css'
+    }
+  }, Prism.languages.markup.tag);
+}
+/* **********************************************
+     Begin prism-clike.js
+********************************************** */
+
+
+Prism.languages.clike = {
+  'comment': [{
+    pattern: /(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,
+    lookbehind: true
+  }, {
+    pattern: /(^|[^\\:])\/\/.*/,
+    lookbehind: true,
+    greedy: true
+  }],
+  'string': {
+    pattern: /(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
+    greedy: true
+  },
+  'class-name': {
+    pattern: /((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[\w.\\]+/i,
+    lookbehind: true,
+    inside: {
+      punctuation: /[.\\]/
+    }
+  },
+  'keyword': /\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,
+  'boolean': /\b(?:true|false)\b/,
+  'function': /[a-z0-9_]+(?=\()/i,
+  'number': /\b0x[\da-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:e[+-]?\d+)?/i,
+  'operator': /--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,
+  'punctuation': /[{}[\];(),.:]/
+};
+/* **********************************************
+     Begin prism-javascript.js
+********************************************** */
+
+Prism.languages.javascript = Prism.languages.extend('clike', {
+  'keyword': /\b(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,
+  'number': /\b(?:0[xX][\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+|NaN|Infinity)\b|(?:\b\d+\.?\d*|\B\.\d+)(?:[Ee][+-]?\d+)?/,
+  // Allow for all non-ASCII characters (See http://stackoverflow.com/a/2008444)
+  'function': /[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*\()/i,
+  'operator': /-[-=]?|\+[+=]?|!=?=?|<<?=?|>>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/
+});
+Prism.languages.insertBefore('javascript', 'keyword', {
+  'regex': {
+    pattern: /((?:^|[^$\w\xA0-\uFFFF."'\])\s])\s*)\/(\[[^\]\r\n]+]|\\.|[^/\\\[\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})\]]))/,
+    lookbehind: true,
+    greedy: true
+  },
+  // This must be declared before keyword because we use "function" inside the look-forward
+  'function-variable': {
+    pattern: /[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=\s*(?:function\b|(?:\([^()]*\)|[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/i,
+    alias: 'function'
+  },
+  'constant': /\b[A-Z][A-Z\d_]*\b/
+});
+Prism.languages.insertBefore('javascript', 'string', {
+  'template-string': {
+    pattern: /`(?:\\[\s\S]|\${[^}]+}|[^\\`])*`/,
+    greedy: true,
+    inside: {
+      'interpolation': {
+        pattern: /\${[^}]+}/,
+        inside: {
+          'interpolation-punctuation': {
+            pattern: /^\${|}$/,
+            alias: 'punctuation'
+          },
+          rest: null // See below
+
+        }
+      },
+      'string': /[\s\S]+/
+    }
+  }
+});
+Prism.languages.javascript['template-string'].inside['interpolation'].inside.rest = Prism.languages.javascript;
+
+if (Prism.languages.markup) {
+  Prism.languages.insertBefore('markup', 'tag', {
+    'script': {
+      pattern: /(<script[\s\S]*?>)[\s\S]*?(?=<\/script>)/i,
+      lookbehind: true,
+      inside: Prism.languages.javascript,
+      alias: 'language-javascript',
+      greedy: true
+    }
+  });
+}
+
+Prism.languages.js = Prism.languages.javascript;
+/* **********************************************
+     Begin prism-file-highlight.js
+********************************************** */
+
+(function () {
+  if (typeof self === 'undefined' || !self.Prism || !self.document || !document.querySelector) {
+    return;
+  }
+
+  self.Prism.fileHighlight = function () {
+    var Extensions = {
+      'js': 'javascript',
+      'py': 'python',
+      'rb': 'ruby',
+      'ps1': 'powershell',
+      'psm1': 'powershell',
+      'sh': 'bash',
+      'bat': 'batch',
+      'h': 'c',
+      'tex': 'latex'
+    };
+    Array.prototype.slice.call(document.querySelectorAll('pre[data-src]')).forEach(function (pre) {
+      var src = pre.getAttribute('data-src');
+      var language,
+          parent = pre;
+      var lang = /\blang(?:uage)?-([\w-]+)\b/i;
+
+      while (parent && !lang.test(parent.className)) {
+        parent = parent.parentNode;
+      }
+
+      if (parent) {
+        language = (pre.className.match(lang) || [, ''])[1];
+      }
+
+      if (!language) {
+        var extension = (src.match(/\.(\w+)$/) || [, ''])[1];
+        language = Extensions[extension] || extension;
+      }
+
+      var code = document.createElement('code');
+      code.className = 'language-' + language;
+      pre.textContent = '';
+      code.textContent = 'Loading…';
+      pre.appendChild(code);
+      var xhr = new XMLHttpRequest();
+      xhr.open('GET', src, true);
+
+      xhr.onreadystatechange = function () {
+        if (xhr.readyState == 4) {
+          if (xhr.status < 400 && xhr.responseText) {
+            code.textContent = xhr.responseText;
+            Prism.highlightElement(code);
+          } else if (xhr.status >= 400) {
+            code.textContent = '✖ Error ' + xhr.status + ' while fetching file: ' + xhr.statusText;
+          } else {
+            code.textContent = '✖ Error: File does not exist or is empty';
+          }
+        }
+      };
+
+      xhr.send(null);
+    });
+
+    if (Prism.plugins.toolbar) {
+      Prism.plugins.toolbar.registerButton('download-file', function (env) {
+        var pre = env.element.parentNode;
+
+        if (!pre || !/pre/i.test(pre.nodeName) || !pre.hasAttribute('data-src') || !pre.hasAttribute('data-download-link')) {
+          return;
+        }
+
+        var src = pre.getAttribute('data-src');
+        var a = document.createElement('a');
+        a.textContent = pre.getAttribute('data-download-link-label') || 'Download';
+        a.setAttribute('download', '');
+        a.href = src;
+        return a;
+      });
+    }
+  };
+
+  document.addEventListener('DOMContentLoaded', self.Prism.fileHighlight);
+})();
+});
+
+var getContent = function getContent(token) {
+  if (typeof token == "string") {
+    return token;
+  } else if (typeof token.content == "string") {
+    return token.content;
+  } else {
+    return token.content.map(getContent).join("");
+  }
+};
+
+var SyntaxHighlight = (function () {
+  return {
+    renderMark: function renderMark(props, editor, next) {
+      var children = props.children,
+          mark = props.mark,
+          attributes = props.attributes;
+
+      switch (mark.type) {
+        case "comment":
+          return React.createElement("span", _extends({}, attributes, {
+            style: {
+              opacity: "0.33"
+            }
+          }), children);
+
+        case "keyword":
+          return React.createElement("span", _extends({}, attributes, {
+            style: {
+              fontWeight: "bold"
+            }
+          }), children);
+
+        case "tag":
+          return React.createElement("span", _extends({}, attributes, {
+            style: {
+              fontWeight: "bold"
+            }
+          }), children);
+
+        case "punctuation":
+          return React.createElement("span", _extends({}, attributes, {
+            style: {
+              opacity: "0.75"
+            }
+          }), children);
+
+        default:
+          return next();
+      }
+    },
+    decorateNode: function decorateNode(node, editor, next) {
+      // Copied from the slate code edit example
+      var others = next() || [];
+      if (node.type != "html") return others;
+      var language = "html";
+      var texts = node.getTexts().toArray();
+      var string = texts.map(function (t) {
+        return t.text;
+      }).join("\n");
+      var grammar = prism.languages[language];
+      var tokens = prism.tokenize(string, grammar);
+      var decorations = [];
+      var startText = texts.shift();
+      var endText = startText;
+      var startOffset = 0;
+      var endOffset = 0;
+
+      for (var _iterator = tokens, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
+        var _ref;
+
+        if (_isArray) {
+          if (_i >= _iterator.length) break;
+          _ref = _iterator[_i++];
+        } else {
+          _i = _iterator.next();
+          if (_i.done) break;
+          _ref = _i.value;
+        }
+
+        var token = _ref;
+        startText = endText;
+        startOffset = endOffset;
+        var content = getContent(token);
+        var newlines = content.split("\n").length - 1;
+        var length = content.length - newlines;
+        var available = startText.text.length - startOffset;
+        var remaining = length;
+        endOffset = startOffset + remaining;
+
+        while (available < remaining && texts.length > 0) {
+          endText = texts.shift();
+          remaining = length - available;
+          available = endText.text.length;
+          endOffset = remaining;
+        }
+
+        if (typeof token != "string") {
+          var dec = {
+            anchor: {
+              key: startText.key,
+              offset: startOffset,
+              path: node.getPath(startText.key)
+            },
+            focus: {
+              key: endText.key,
+              offset: endOffset,
+              path: node.getPath(endText.key)
+            },
+            mark: {
+              type: token.type
+            }
+          };
+          decorations.push(dec);
+        }
+      }
+
+      return others.concat(decorations);
+    }
+  };
+});
+
+var HTMLNode =
+/*#__PURE__*/
+function (_Component) {
+  _inheritsLoose(HTMLNode, _Component);
+
+  function HTMLNode(props) {
+    var _this;
+
+    _this = _Component.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleClick", function (event) {
+      var changing = !_this.state.editing;
+
+      _this.setState({
+        editing: true
+      });
+
+      if (changing) _this.props.editor.moveToStartOfNode(_this.props.node);
+    });
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleClickOutside", function () {
+      _this.setState({
+        editing: false
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "toggle", function () {
+      _this.setState(function (prevState) {
+        return {
+          editing: !prevState.editing
+        };
+      });
+    });
+
+    _this.state = {
+      editing: false
+    };
+    return _this;
+  }
+
+  var _proto = HTMLNode.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        node = _this$props.node,
+        attributes = _this$props.attributes,
+        children = _this$props.children;
+    var className = "editor-html";
+    if (this.state.editing) className += " editing";
+    var texts = node.getTexts().toArray();
+    var html = texts.map(function (t) {
+      return t.text;
+    }).join("\n");
+    return React.createElement("div", _extends({
+      contentEditable: this.state.editing,
+      suppressContentEditableWarning: true,
+      className: className
+    }, attributes), React.createElement("div", {
+      className: "editor-html-rendered",
+      dangerouslySetInnerHTML: {
+        __html: html
+      }
+    }), React.createElement("div", {
+      className: "editor-html-source"
+    }, children), React.createElement("button", {
+      className: "editor-html-toggle",
+      onClick: this.toggle
+    }, this.state.editing ? "Preview" : "Edit"));
+  };
+
+  return HTMLNode;
+}(Component);
+
+var isCodeLine = function isCodeLine(value) {
+  return value.startBlock.type == "code_line";
+};
+
+var onTab = function onTab(event, editor, next) {
+  if (!isCodeLine(editor.value)) return;
+  event.preventDefault();
+  editor.insertText("  ");
+};
+
+var schema = {
+  blocks: {
+    html: {
+      nodes: [{
+        match: {
+          type: "code"
+        }
+      }]
+    },
+    code: {
+      nodes: [{
+        match: {
+          type: "code_line"
+        }
+      }]
+    },
+    code_line: {
+      nodes: [{
+        match: {
+          object: "text"
+        }
+      }]
+    }
+  }
+};
 var index = (function () {
-  return {
+  return [{
     commands: {},
+    onKeyDown: function onKeyDown(event, editor, next) {
+      switch (event.key) {
+        case "Tab":
+          return onTab(event, editor, next);
+
+        default:
+          return next();
+      }
+    },
     renderNode: function renderNode(props, editor, next) {
-      var node = props.node,
-          attributes = props.attributes,
-          children = props.children;
+      var node = props.node;
 
@@ -14,12 +1126,23 @@ switch (node.type) {
           {
-            return React.createElement("div", attributes, children);
+            return React.createElement(HTMLNode, _extends({}, props, {
+              editor: editor
+            }));
           }
 
+        case "code":
+          return React.createElement("div", props.attributes, props.children);
+
+        case "code_line":
+          {
+            return React.createElement("div", props.attributes, props.children);
+          }
+
         default:
           return next();
       }
-    }
-  };
+    },
+    schema: schema
+  }, SyntaxHighlight()];
 });
 
 export default index;

package.json

 {
   "name": "@convertkit/editor-html",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "A plugin for handling HTML in the ConvertKit Editor",
@@ -28,3 +28,6 @@ "main": "index.js",
   ],
-  "gitHead": "1473d9c752f57cb65fff3a57b70f1c89d5d1ff46"
+  "dependencies": {
+    "prismjs": "^1.15.0"
+  },
+  "gitHead": "c6dfdcbf07fc44433dc1e28ff777cdc898067c55"
 }

src/index.js

@@ -1,15 +0,121 @@
-import React from "react";
+import React, { Component } from "react";
+import SyntaxHighlight from "./plugins/syntax-highlight";
+import "./index.css";
 
-export default () => ({
-  commands: {},
-  renderNode(props, editor, next) {
-    const { node, attributes, children } = props;
-    switch (node.type) {
-      case "html": {
-        return <div {...attributes}>{children}</div>;
-      }
-      default:
-        return next();
+class HTMLNode extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      editing: false
+    };
+  }
+
+  handleClick = event => {
+    const changing = !this.state.editing;
+    this.setState({ editing: true });
+    if (changing) this.props.editor.moveToStartOfNode(this.props.node);
+  };
+
+  handleClickOutside = () => {
+    this.setState({ editing: false });
+  };
+
+  toggle = () => {
+    this.setState(prevState => ({
+      editing: !prevState.editing
+    }));
+  };
+
+  render() {
+    const { node, attributes, children } = this.props;
+    let className = "editor-html";
+    if (this.state.editing) className += " editing";
+
+    const texts = node.getTexts().toArray();
+    const html = texts.map(t => t.text).join("\n");
+
+    return (
+      <div
+        contentEditable={this.state.editing}
+        suppressContentEditableWarning={true}
+        className={className}
+        {...attributes}
+      >
+        <div
+          className="editor-html-rendered"
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+        <div className="editor-html-source">{children}</div>
+        <button className="editor-html-toggle" onClick={this.toggle}>
+          {this.state.editing ? "Preview" : "Edit"}
+        </button>
+      </div>
+    );
+  }
+}
+
+const isCodeLine = value => value.startBlock.type == "code_line";
+
+const onTab = (event, editor, next) => {
+  if (!isCodeLine(editor.value)) return;
+  event.preventDefault();
+  editor.insertText("  ");
+};
+
+const schema = {
+  blocks: {
+    html: {
+      nodes: [
+        {
+          match: { type: "code" }
+        }
+      ]
+    },
+    code: {
+      nodes: [
+        {
+          match: { type: "code_line" }
+        }
+      ]
+    },
+    code_line: {
+      nodes: [
+        {
+          match: { object: "text" }
+        }
+      ]
     }
   }
-});
+};
+
+export default () => [
+  {
+    commands: {},
+    onKeyDown(event, editor, next) {
+      switch (event.key) {
+        case "Tab":
+          return onTab(event, editor, next);
+        default:
+          return next();
+      }
+    },
+    renderNode(props, editor, next) {
+      const { node } = props;
+      switch (node.type) {
+        case "html": {
+          return <HTMLNode {...props} editor={editor} />;
+        }
+        case "code":
+          return <div {...props.attributes}>{props.children}</div>;
+        case "code_line": {
+          return <div {...props.attributes}>{props.children}</div>;
+        }
+        default:
+          return next();
+      }
+    },
+    schema
+  },
+  SyntaxHighlight()
+];

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

40586

increased by1930.32%

Number of package files

6

increased by20%

Lines of code

1245

increased by1975%

Worsened metrics

Dependency count

6

increased by20%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedprismjs@^1.15.0

• + Addedprismjs@1.29.0(transitive)