mobiledoc-kit - npm Package Compare versions

Comparing version 0.6.1 to 0.6.2-beta1

dist/commonjs/mobiledoc-kit/cards/image.js

@@ -7,14 +7,13 @@ 'use strict';
   name: 'image',
+  type: 'dom',
 
-  display: {
-    setup: function setup(element, options, env, payload) {
-      var img = document.createElement('img');
-      img.src = payload.src || _utilsPlaceholderImageSrc['default'];
-      element.appendChild(img);
-      return img;
-    },
-    teardown: function teardown(element) {
-      element.parentNode.removeChild(element);
-    }
+  render: function render(_ref) {
+    var env = _ref.env;
+    var options = _ref.options;
+    var payload = _ref.payload;
+
+    var img = document.createElement('img');
+    img.src = payload.src || _utilsPlaceholderImageSrc['default'];
+    return img;
   }
 };

dist/commonjs/mobiledoc-kit/editor/editor.js

@@ -69,3 +69,5 @@ 'use strict';
   cardOptions: {},
-  unknownCardHandler: function unknownCardHandler(element, options, env) {
+  unknownCardHandler: function unknownCardHandler(_ref) {
+    var env = _ref.env;
+
     throw new Error('Unknown card encountered: ' + env.name);
@@ -135,3 +137,3 @@ },
       if (this.mobiledoc) {
-        return new _parsersMobiledoc['default'](this.builder).parse(this.mobiledoc);
+        return _parsersMobiledoc['default'].parse(this.builder, this.mobiledoc);
       } else if (this.html) {
@@ -425,2 +427,3 @@ if (typeof this.html === 'string') {
       this.removeAllViews();
+      this._renderer.destroy();
     }
@@ -427,0 +430,0 @@

dist/commonjs/mobiledoc-kit/models/card-node.js

@@ -7,4 +7,6 @@ 'use strict';
 
+var _utilsAssert = require('../utils/assert');
+
 var CardNode = (function () {
-  function CardNode(editor, card, section, element, cardOptions) {
+  function CardNode(editor, card, section, element, options) {
     _classCallCheck(this, CardNode);
@@ -15,7 +17,9 @@
     this.section = section;
-    this.cardOptions = cardOptions;
     this.element = element;
+    this.options = options;
 
     this.mode = null;
-    this.setupResult = null;
+
+    this._teardownCallback = null;
+    this._rendered = null;
   }
@@ -33,5 +37,26 @@
       this.mode = mode;
-      this.setupResult = this.card[mode].setup(this.element, this.cardOptions, this.env, this.section.payload);
+
+      var method = mode === 'display' ? 'render' : 'edit';
+
+      var rendered = this.card[method]({
+        env: this.env,
+        options: this.options,
+        payload: this.section.payload
+      });
+
+      this._validateAndAppendRenderResult(rendered);
     }
   }, {
+    key: 'teardown',
+    value: function teardown() {
+      if (this._teardownCallback) {
+        this._teardownCallback();
+        this._teardownCallback = null;
+      }
+      if (this._rendered) {
+        this.element.removeChild(this._rendered);
+        this._rendered = null;
+      }
+    }
+  }, {
     key: 'display',
@@ -56,9 +81,13 @@ value: function display() {
   }, {
-    key: 'teardown',
-    value: function teardown() {
-      if (this.mode) {
-        if (this.card[this.mode].teardown) {
-          this.card[this.mode].teardown(this.setupResult);
-        }
+    key: '_validateAndAppendRenderResult',
+    value: function _validateAndAppendRenderResult(rendered) {
+      if (!rendered) {
+        return;
       }
+
+      var name = this.card.name;
+
+      (0, _utilsAssert['default'])('Card "' + name + '" must render dom (render value was: "' + rendered + '")', !!rendered.nodeType);
+      this.element.appendChild(rendered);
+      this._rendered = rendered;
     }
@@ -72,2 +101,6 @@ }, {
         name: this.card.name,
+        isInEditor: true,
+        onTeardown: function onTeardown(callback) {
+          return _this2._teardownCallback = callback;
+        },
         edit: function edit() {
@@ -92,3 +125,3 @@ return _this2.edit();
         },
-        section: this.section
+        postModel: this.section
       };
@@ -95,0 +128,0 @@ }

dist/commonjs/mobiledoc-kit/renderers/editor-dom.js

@@ -23,2 +23,4 @@ 'use strict';
 
+var _utilsAssert = require('../utils/assert');
+
 var NO_BREAK_SPACE = ' ';
@@ -167,3 +169,3 @@ exports.NO_BREAK_SPACE = NO_BREAK_SPACE;
 function removeRenderNodeElementFromParent(renderNode) {
-  if (renderNode.element.parentNode) {
+  if (renderNode.element && renderNode.element.parentNode) {
     renderNode.element.parentNode.removeChild(renderNode.element);
@@ -173,2 +175,12 @@ }
 
+function validateCards() {
+  var cards = arguments.length <= 0 || arguments[0] === undefined ? [] : arguments[0];
+
+  (0, _utilsArrayUtils.forEach)(cards, function (card) {
+    (0, _utilsAssert['default'])('Card "' + card.name + '" must define type "dom", has: "' + card.type + '"', card.type === 'dom');
+    (0, _utilsAssert['default'])('Card "' + card.name + '" must define `render` method', !!card.render);
+  });
+  return cards;
+}
+
 var Visitor = (function () {
@@ -179,3 +191,3 @@ function Visitor(editor, cards, unknownCardHandler, options) {
     this.editor = editor;
-    this.cards = cards;
+    this.cards = validateCards(cards);
     this.unknownCardHandler = unknownCardHandler;
@@ -186,2 +198,22 @@ this.options = options;
   _createClass(Visitor, [{
+    key: '_findCard',
+    value: function _findCard(cardName) {
+      var card = (0, _utilsArrayUtils.detect)(this.cards, function (card) {
+        return card.name === cardName;
+      });
+      return card || this._createUnknownCard(cardName);
+    }
+  }, {
+    key: '_createUnknownCard',
+    value: function _createUnknownCard(cardName) {
+      (0, _utilsAssert['default'])('Unknown card "' + cardName + '" found, but no unknownCardHandler is defined', !!this.unknownCardHandler);
+
+      return {
+        name: cardName,
+        type: 'dom',
+        render: this.unknownCardHandler,
+        edit: this.unknownCardHandler
+      };
+    }
+  }, {
     key: _modelsTypes.POST_TYPE,
@@ -279,5 +311,3 @@ value: function value(renderNode, post, visit) {
 
-      var card = (0, _utilsArrayUtils.detect)(this.cards, function (card) {
-        return card.name === section.name;
-      });
+      var card = this._findCard(section.name);
 
@@ -292,11 +322,7 @@ var _renderCard = renderCard();
 
-      if (card) {
-        var cardNode = new _modelsCardNode['default'](editor, card, section, cardElement, options);
-        renderNode.cardNode = cardNode;
-        var initialMode = section._initialMode;
-        cardNode[initialMode]();
-      } else {
-        var env = { name: section.name };
-        this.unknownCardHandler(cardElement, options, env, section.payload);
-      }
+      var cardNode = new _modelsCardNode['default'](editor, card, section, cardElement, options);
+      renderNode.cardNode = cardNode;
+
+      var initialMode = section._initialMode;
+      cardNode[initialMode]();
     }
@@ -392,2 +418,9 @@ }]);
   _createClass(Renderer, [{
+    key: 'destroy',
+    value: function destroy() {
+      var renderNode = this.renderTree.rootNode;
+      var force = true;
+      removeDestroyedChildren(renderNode, force);
+    }
+  }, {
     key: 'visit',
@@ -413,2 +446,3 @@ value: function visit(renderTree, parentNode, postNodes) {
 
+      this.renderTree = renderTree;
       var renderNode = renderTree.rootNode;
@@ -415,0 +449,0 @@ var method = undefined,

dist/commonjs/mobiledoc-kit/utils/paste-utils.js

@@ -23,8 +23,14 @@ /* global JSON */
 
-  var cards = editor.cards;
-  var innerHTML = new _mobiledocHtmlRenderer['default']().render(mobiledoc, cards);
+  var unknownCardHandler = function unknownCardHandler() {}; // ignore unknown cards
 
+  var _render = new _mobiledocHtmlRenderer['default']({ unknownCardHandler: unknownCardHandler }).render(mobiledoc);
+
+  var innerHTML = _render.result;
+
   var html = '<div data-mobiledoc=\'' + JSON.stringify(mobiledoc) + '\'>' + innerHTML + '</div>';
-  var plain = new _mobiledocTextRenderer['default']().render(mobiledoc, cards);
 
+  var _render2 = new _mobiledocTextRenderer['default']({ unknownCardHandler: unknownCardHandler }).render(mobiledoc);
+
+  var plain = _render2.result;
+
   clipboardData.setData('text/plain', plain);
@@ -46,3 +52,3 @@ clipboardData.setData('text/html', html);
     mobiledoc = JSON.parse(mobiledocString);
-    post = new _parsersMobiledoc['default'](builder).parse(mobiledoc);
+    post = _parsersMobiledoc['default'].parse(builder, mobiledoc);
   } else {
@@ -49,0 +55,0 @@ post = new _parsersHtml['default'](builder, { cardParsers: cardParsers }).parse(html);

package.json

 {
   "name": "mobiledoc-kit",
-  "version": "0.6.1",
+  "version": "0.6.2-beta1",
   "description": "A toolkit for building WYSIWYG editors with Mobiledoc",
@@ -45,4 +45,4 @@ "repository": "https://github.com/bustlelabs/mobiledoc-kit",
     "jquery": "^2.1.4",
-    "mobiledoc-html-renderer": "^0.1.8",
-    "mobiledoc-text-renderer": "^0.1.1",
+    "mobiledoc-html-renderer": "^0.2.0",
+    "mobiledoc-text-renderer": "^0.2.0",
     "testem": "^0.8.4"
@@ -49,0 +49,0 @@ },

src/js/cards/image.js

@@ -5,14 +5,9 @@ import placeholderImageSrc from 'mobiledoc-kit/utils/placeholder-image-src';
   name: 'image',
+  type: 'dom',
 
-  display: {
-    setup(element, options, env, payload) {
-      let img = document.createElement('img');
-      img.src = payload.src || placeholderImageSrc;
-      element.appendChild(img);
-      return img;
-    },
-    teardown(element) {
-      element.parentNode.removeChild(element);
-    }
+  render({env, options, payload}) {
+    let img = document.createElement('img');
+    img.src = payload.src || placeholderImageSrc;
+    return img;
   }
 };

src/js/editor/editor.js

@@ -9,3 +9,3 @@ import Tooltip from '../views/tooltip';
 
-import MobiledocParser from '../parsers/mobiledoc';
+import mobiledocParsers from '../parsers/mobiledoc';
 import HTMLParser from '../parsers/html';
@@ -15,3 +15,3 @@ import DOMParser from '../parsers/dom';
 import RenderTree from 'mobiledoc-kit/models/render-tree';
-import MobiledocRenderer from '../renderers/mobiledoc';
+import mobiledocRenderers from '../renderers/mobiledoc';
 
@@ -53,3 +53,3 @@ import { mergeWithOptions } from 'content-kit-utils';
   cardOptions: {},
-  unknownCardHandler: (element, options, env) => {
+  unknownCardHandler: ({env}) => {
     throw new Error(`Unknown card encountered: ${env.name}`);
@@ -110,3 +110,3 @@ },
     if (this.mobiledoc) {
-      return new MobiledocParser(this.builder).parse(this.mobiledoc);
+      return mobiledocParsers.parse(this.builder, this.mobiledoc);
     } else if (this.html) {
@@ -373,3 +373,3 @@ if (typeof this.html === 'string') {
   serialize() {
-    return MobiledocRenderer.render(this.post);
+    return mobiledocRenderers.render(this.post);
   }
@@ -386,2 +386,3 @@
     this.removeAllViews();
+    this._renderer.destroy();
   }
@@ -388,0 +389,0 @@

src/js/models/card-node.js

@@ -0,11 +1,15 @@
+import assert from '../utils/assert';
+
 export default class CardNode {
-  constructor(editor, card, section, element, cardOptions) {
-    this.editor = editor;
-    this.card = card;
+  constructor(editor, card, section, element, options) {
+    this.editor  = editor;
+    this.card    = card;
     this.section = section;
-    this.cardOptions = cardOptions;
     this.element = element;
+    this.options = options;
 
     this.mode = null;
-    this.setupResult = null;
+
+    this._teardownCallback = null;
+    this._rendered         = null;
   }
@@ -19,13 +23,30 @@
     this.mode = mode;
-    this.setupResult = this.card[mode].setup(
-      this.element,
-      this.cardOptions,
-      this.env,
-      this.section.payload
-    );
+
+    let method = mode === 'display' ? 'render' : 'edit';
+
+    let rendered = this.card[method]({
+      env: this.env,
+      options: this.options,
+      payload: this.section.payload
+    });
+
+    this._validateAndAppendRenderResult(rendered);
   }
 
+  teardown() {
+    if (this._teardownCallback) {
+      this._teardownCallback();
+      this._teardownCallback = null;
+    }
+    if (this._rendered) {
+      this.element.removeChild(this._rendered);
+      this._rendered = null;
+    }
+  }
+
   get env() {
     return {
       name: this.card.name,
+      isInEditor: true,
+      onTeardown: (callback) => this._teardownCallback = callback,
       edit: () => this.edit(),
@@ -42,3 +63,3 @@ save: (payload, transition=true) => {
       remove: () => this.remove(),
-      section: this.section
+      postModel: this.section
     };
@@ -59,9 +80,15 @@ }
 
-  teardown() {
-    if (this.mode) {
-      if (this.card[this.mode].teardown) {
-        this.card[this.mode].teardown(this.setupResult);
-      }
+  _validateAndAppendRenderResult(rendered) {
+    if (!rendered) {
+      return;
     }
+
+    let { card: { name } } = this;
+    assert(
+      `Card "${name}" must render dom (render value was: "${rendered}")`,
+      !!rendered.nodeType
+    );
+    this.element.appendChild(rendered);
+    this._rendered = rendered;
   }
 }

src/js/models/post.js

@@ -5,3 +5,3 @@ import { POST_TYPE } from './types';
 import Set from 'mobiledoc-kit/utils/set';
-import MobiledocRenderer from 'mobiledoc-kit/renderers/mobiledoc';
+import mobiledocRenderers from 'mobiledoc-kit/renderers/mobiledoc';
 
@@ -231,4 +231,4 @@ export default class Post {
     });
-    return MobiledocRenderer.render(post);
+    return mobiledocRenderers.render(post);
   }
 }

src/js/renderers/editor-dom.js

 import CardNode from 'mobiledoc-kit/models/card-node';
-import { detect } from 'mobiledoc-kit/utils/array-utils';
+import { detect, forEach } from 'mobiledoc-kit/utils/array-utils';
 import {
@@ -15,2 +15,3 @@ POST_TYPE,
 import { MARKUP_SECTION_ELEMENT_NAMES } from '../models/markup-section';
+import assert from '../utils/assert';
 
@@ -159,3 +160,3 @@ export const NO_BREAK_SPACE = '\u00A0';
 function removeRenderNodeElementFromParent(renderNode) {
-  if (renderNode.element.parentNode) {
+  if (renderNode.element && renderNode.element.parentNode) {
     renderNode.element.parentNode.removeChild(renderNode.element);
@@ -165,6 +166,20 @@ }
 
+function validateCards(cards=[]) {
+  forEach(cards, card => {
+    assert(
+      `Card "${card.name}" must define type "dom", has: "${card.type}"`,
+      card.type === 'dom'
+    );
+    assert(
+      `Card "${card.name}" must define \`render\` method`,
+      !!card.render
+    );
+  });
+  return cards;
+}
+
 class Visitor {
   constructor(editor, cards, unknownCardHandler, options) {
     this.editor = editor;
-    this.cards = cards;
+    this.cards = validateCards(cards);
     this.unknownCardHandler = unknownCardHandler;
@@ -174,2 +189,21 @@ this.options = options;
 
+  _findCard(cardName) {
+    let card = detect(this.cards, card => card.name === cardName);
+    return card || this._createUnknownCard(cardName);
+  }
+
+  _createUnknownCard(cardName) {
+    assert(
+      `Unknown card "${cardName}" found, but no unknownCardHandler is defined`,
+      !!this.unknownCardHandler
+    );
+
+    return {
+      name: cardName,
+      type: 'dom',
+      render: this.unknownCardHandler,
+      edit:   this.unknownCardHandler
+    };
+  }
+
   [POST_TYPE](renderNode, post, visit) {
@@ -258,4 +292,5 @@ if (!renderNode.element) {
     const {editor, options} = this;
-    const card = detect(this.cards, card => card.name === section.name);
 
+    const card = this._findCard(section.name);
+
     let { wrapper, cardElement } = renderCard();
@@ -265,13 +300,8 @@ renderNode.element = wrapper;
 
-    if (card) {
-      const cardNode = new CardNode(
-        editor, card, section, cardElement, options);
-      renderNode.cardNode = cardNode;
-      const initialMode = section._initialMode;
-      cardNode[initialMode]();
-    } else {
-      const env = { name: section.name };
-      this.unknownCardHandler(
-        cardElement, options, env, section.payload);
-    }
+    const cardNode = new CardNode(
+      editor, card, section, cardElement, options);
+    renderNode.cardNode = cardNode;
+
+    const initialMode = section._initialMode;
+    cardNode[initialMode]();
   }
@@ -372,2 +402,8 @@ }
 
+  destroy() {
+    let renderNode = this.renderTree.rootNode;
+    let force = true;
+    removeDestroyedChildren(renderNode, force);
+  }
+
   visit(renderTree, parentNode, postNodes, visitAll=false) {
@@ -385,2 +421,3 @@ let previousNode;
   render(renderTree) {
+    this.renderTree = renderTree;
     let renderNode = renderTree.rootNode;
@@ -387,0 +424,0 @@ let method, postNode;

src/js/utils/paste-utils.js

 /* global JSON */
-import MobiledocParser from '../parsers/mobiledoc';
+import mobiledocParsers from '../parsers/mobiledoc';
 import HTMLParser from '../parsers/html';
@@ -14,8 +14,10 @@ import HTMLRenderer from 'mobiledoc-html-renderer';
 
-  let cards = editor.cards;
-  let innerHTML = new HTMLRenderer().render(mobiledoc, cards);
+  let unknownCardHandler = () => {}; // ignore unknown cards
+  let {result: innerHTML } = new HTMLRenderer({unknownCardHandler})
+                                     .render(mobiledoc);
 
   const html =
     `<div data-mobiledoc='${JSON.stringify(mobiledoc)}'>${innerHTML}</div>`;
-  const plain = new TextRenderer().render(mobiledoc, cards);
+  const {result: plain} = new TextRenderer({unknownCardHandler})
+                      .render(mobiledoc);
 
@@ -35,3 +37,3 @@ clipboardData.setData('text/plain', plain);
     mobiledoc = JSON.parse(mobiledocString);
-    post = new MobiledocParser(builder).parse(mobiledoc);
+    post = mobiledocParsers.parse(builder, mobiledoc);
   } else {
@@ -38,0 +40,0 @@ post = new HTMLParser(builder, {cardParsers}).parse(html);

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1885748

increased by3.52%

Number of package files

121

increased by3.42%

Lines of code

26897

increased by3.03%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes