mobiledoc-dom-renderer - npm Package Compare versions

Comparing version 0.3.0-beta2 to 0.3.0-beta3

dist/amd/mobiledoc-dom-renderer.js

@@ -82,2 +82,3 @@ define('mobiledoc-dom-renderer/cards/image', ['exports', 'mobiledoc-dom-renderer/utils/dom', 'mobiledoc-dom-renderer/utils/render-type'], function (exports, _mobiledocDomRendererUtilsDom, _mobiledocDomRendererUtilsRenderType) {
       var unknownAtomHandler = _ref.unknownAtomHandler;
+      var sectionElementRenderer = _ref.sectionElementRenderer;
 
@@ -92,3 +93,10 @@ _classCallCheck(this, RendererFactory);
 
-      this.state = { cards: cards, atoms: atoms, cardOptions: cardOptions, unknownCardHandler: unknownCardHandler, unknownAtomHandler: unknownAtomHandler };
+      this.state = {
+        cards: cards,
+        atoms: atoms,
+        cardOptions: cardOptions,
+        unknownCardHandler: unknownCardHandler,
+        unknownAtomHandler: unknownAtomHandler,
+        sectionElementRenderer: sectionElementRenderer
+      };
     }
@@ -165,4 +173,4 @@
       var cardOptions = state.cardOptions;
-      var atoms = state.atoms;
       var unknownCardHandler = state.unknownCardHandler;
+      var sectionElementRenderer = state.sectionElementRenderer;
       var version = mobiledoc.version;
@@ -182,6 +190,14 @@ var sectionData = mobiledoc.sections;
       this.cards = cards;
-      this.atoms = atoms;
       this.cardOptions = cardOptions;
       this.unknownCardHandler = unknownCardHandler || this._defaultUnknownCardHandler;
 
+      this.sectionElementRenderer = {};
+      if (sectionElementRenderer) {
+        for (var key in sectionElementRenderer) {
+          if (sectionElementRenderer.hasOwnProperty(key)) {
+            this.sectionElementRenderer[key.toLowerCase()] = sectionElementRenderer[key];
+          }
+        }
+      }
+
       this._teardownCallbacks = [];
@@ -417,3 +433,9 @@ this._renderedChildNodes = [];
 
-        var element = (0, _mobiledocDomRendererUtilsDom.createElement)(tagName);
+        var renderer = _mobiledocDomRendererUtilsDom.createElement;
+        var lowerCaseTagName = tagName.toLowerCase();
+        if (this.sectionElementRenderer[lowerCaseTagName]) {
+          renderer = this.sectionElementRenderer[lowerCaseTagName];
+        }
+
+        var element = renderer(tagName);
         this.renderMarkersOnElement(element, markers);
@@ -487,2 +509,3 @@ return element;
       var unknownAtomHandler = state.unknownAtomHandler;
+      var sectionElementRenderer = state.sectionElementRenderer;
       var version = mobiledoc.version;
@@ -507,2 +530,11 @@ var sections = mobiledoc.sections;
 
+      this.sectionElementRenderer = {};
+      if (sectionElementRenderer) {
+        for (var key in sectionElementRenderer) {
+          if (sectionElementRenderer.hasOwnProperty(key)) {
+            this.sectionElementRenderer[key.toLowerCase()] = sectionElementRenderer[key];
+          }
+        }
+      }
+
       this._teardownCallbacks = [];
@@ -853,3 +885,9 @@ }
 
-        var element = (0, _mobiledocDomRendererUtilsDom.createElement)(tagName);
+        var renderer = _mobiledocDomRendererUtilsDom.createElement;
+        var lowerCaseTagName = tagName.toLowerCase();
+        if (this.sectionElementRenderer[lowerCaseTagName]) {
+          renderer = this.sectionElementRenderer[lowerCaseTagName];
+        }
+
+        var element = renderer(tagName);
         this.renderMarkersOnElement(element, markers);
@@ -856,0 +894,0 @@ return element;

dist/commonjs/mobiledoc-dom-renderer/renderer-factory.js

@@ -60,2 +60,3 @@ 'use strict';
     var unknownAtomHandler = _ref.unknownAtomHandler;
+    var sectionElementRenderer = _ref.sectionElementRenderer;
 
@@ -70,3 +71,10 @@ _classCallCheck(this, RendererFactory);
 
-    this.state = { cards: cards, atoms: atoms, cardOptions: cardOptions, unknownCardHandler: unknownCardHandler, unknownAtomHandler: unknownAtomHandler };
+    this.state = {
+      cards: cards,
+      atoms: atoms,
+      cardOptions: cardOptions,
+      unknownCardHandler: unknownCardHandler,
+      unknownAtomHandler: unknownAtomHandler,
+      sectionElementRenderer: sectionElementRenderer
+    };
   }
@@ -73,0 +81,0 @@

dist/commonjs/mobiledoc-dom-renderer/renderers/0-2.js

@@ -56,4 +56,4 @@ 'use strict';
     var cardOptions = state.cardOptions;
-    var atoms = state.atoms;
     var unknownCardHandler = state.unknownCardHandler;
+    var sectionElementRenderer = state.sectionElementRenderer;
     var version = mobiledoc.version;
@@ -73,6 +73,14 @@ var sectionData = mobiledoc.sections;
     this.cards = cards;
-    this.atoms = atoms;
     this.cardOptions = cardOptions;
     this.unknownCardHandler = unknownCardHandler || this._defaultUnknownCardHandler;
 
+    this.sectionElementRenderer = {};
+    if (sectionElementRenderer) {
+      for (var key in sectionElementRenderer) {
+        if (sectionElementRenderer.hasOwnProperty(key)) {
+          this.sectionElementRenderer[key.toLowerCase()] = sectionElementRenderer[key];
+        }
+      }
+    }
+
     this._teardownCallbacks = [];
@@ -308,3 +316,9 @@ this._renderedChildNodes = [];
 
-      var element = (0, _utilsDom.createElement)(tagName);
+      var renderer = _utilsDom.createElement;
+      var lowerCaseTagName = tagName.toLowerCase();
+      if (this.sectionElementRenderer[lowerCaseTagName]) {
+        renderer = this.sectionElementRenderer[lowerCaseTagName];
+      }
+
+      var element = renderer(tagName);
       this.renderMarkersOnElement(element, markers);
@@ -311,0 +325,0 @@ return element;

dist/commonjs/mobiledoc-dom-renderer/renderers/0-3.js

@@ -61,2 +61,3 @@ 'use strict';
     var unknownAtomHandler = state.unknownAtomHandler;
+    var sectionElementRenderer = state.sectionElementRenderer;
     var version = mobiledoc.version;
@@ -81,2 +82,11 @@ var sections = mobiledoc.sections;
 
+    this.sectionElementRenderer = {};
+    if (sectionElementRenderer) {
+      for (var key in sectionElementRenderer) {
+        if (sectionElementRenderer.hasOwnProperty(key)) {
+          this.sectionElementRenderer[key.toLowerCase()] = sectionElementRenderer[key];
+        }
+      }
+    }
+
     this._teardownCallbacks = [];
@@ -427,3 +437,9 @@ }
 
-      var element = (0, _utilsDom.createElement)(tagName);
+      var renderer = _utilsDom.createElement;
+      var lowerCaseTagName = tagName.toLowerCase();
+      if (this.sectionElementRenderer[lowerCaseTagName]) {
+        renderer = this.sectionElementRenderer[lowerCaseTagName];
+      }
+
+      var element = renderer(tagName);
       this.renderMarkersOnElement(element, markers);
@@ -430,0 +446,0 @@ return element;

dist/global/mobiledoc-dom-renderer.js

@@ -282,2 +282,3 @@ ;(function() {
       var unknownAtomHandler = _ref.unknownAtomHandler;
+      var sectionElementRenderer = _ref.sectionElementRenderer;
 
@@ -292,3 +293,10 @@ _classCallCheck(this, RendererFactory);
 
-      this.state = { cards: cards, atoms: atoms, cardOptions: cardOptions, unknownCardHandler: unknownCardHandler, unknownAtomHandler: unknownAtomHandler };
+      this.state = {
+        cards: cards,
+        atoms: atoms,
+        cardOptions: cardOptions,
+        unknownCardHandler: unknownCardHandler,
+        unknownAtomHandler: unknownAtomHandler,
+        sectionElementRenderer: sectionElementRenderer
+      };
     }
@@ -365,4 +373,4 @@
       var cardOptions = state.cardOptions;
-      var atoms = state.atoms;
       var unknownCardHandler = state.unknownCardHandler;
+      var sectionElementRenderer = state.sectionElementRenderer;
       var version = mobiledoc.version;
@@ -382,6 +390,14 @@ var sectionData = mobiledoc.sections;
       this.cards = cards;
-      this.atoms = atoms;
       this.cardOptions = cardOptions;
       this.unknownCardHandler = unknownCardHandler || this._defaultUnknownCardHandler;
 
+      this.sectionElementRenderer = {};
+      if (sectionElementRenderer) {
+        for (var key in sectionElementRenderer) {
+          if (sectionElementRenderer.hasOwnProperty(key)) {
+            this.sectionElementRenderer[key.toLowerCase()] = sectionElementRenderer[key];
+          }
+        }
+      }
+
       this._teardownCallbacks = [];
@@ -617,3 +633,9 @@ this._renderedChildNodes = [];
 
-        var element = (0, _mobiledocDomRendererUtilsDom.createElement)(tagName);
+        var renderer = _mobiledocDomRendererUtilsDom.createElement;
+        var lowerCaseTagName = tagName.toLowerCase();
+        if (this.sectionElementRenderer[lowerCaseTagName]) {
+          renderer = this.sectionElementRenderer[lowerCaseTagName];
+        }
+
+        var element = renderer(tagName);
         this.renderMarkersOnElement(element, markers);
@@ -687,2 +709,3 @@ return element;
       var unknownAtomHandler = state.unknownAtomHandler;
+      var sectionElementRenderer = state.sectionElementRenderer;
       var version = mobiledoc.version;
@@ -707,2 +730,11 @@ var sections = mobiledoc.sections;
 
+      this.sectionElementRenderer = {};
+      if (sectionElementRenderer) {
+        for (var key in sectionElementRenderer) {
+          if (sectionElementRenderer.hasOwnProperty(key)) {
+            this.sectionElementRenderer[key.toLowerCase()] = sectionElementRenderer[key];
+          }
+        }
+      }
+
       this._teardownCallbacks = [];
@@ -1053,3 +1085,9 @@ }
 
-        var element = (0, _mobiledocDomRendererUtilsDom.createElement)(tagName);
+        var renderer = _mobiledocDomRendererUtilsDom.createElement;
+        var lowerCaseTagName = tagName.toLowerCase();
+        if (this.sectionElementRenderer[lowerCaseTagName]) {
+          renderer = this.sectionElementRenderer[lowerCaseTagName];
+        }
+
+        var element = renderer(tagName);
         this.renderMarkersOnElement(element, markers);
@@ -1056,0 +1094,0 @@ return element;

dist/tests/built-amd-tests.js

@@ -345,2 +345,3 @@ module('JSHint - tests/jshint/cards');
   test('rendering nested mobiledocs in cards', function (assert) {
+    var renderer = undefined;
     var cards = [{
@@ -374,3 +375,3 @@ name: 'nested-card',
 
-    var renderer = new _mobiledocDomRenderer['default']({ cards: cards });
+    renderer = new _mobiledocDomRenderer['default']({ cards: cards });
 
@@ -572,2 +573,29 @@ var _renderer$render10 = renderer.render(mobiledoc);
   });
+
+  test('renders a mobiledoc with sectionElementRenderer', function (assert) {
+    var mobiledoc = {
+      version: MOBILEDOC_VERSION,
+      sections: [[], // markers
+      [// sections
+      [_mobiledocDomRendererUtilsSectionTypes.MARKUP_SECTION_TYPE, 'P', [[[], 0, 'hello world']]], [_mobiledocDomRendererUtilsSectionTypes.MARKUP_SECTION_TYPE, 'p', [[[], 0, 'hello world']]], [_mobiledocDomRendererUtilsSectionTypes.MARKUP_SECTION_TYPE, 'h1', [[[], 0, 'hello world']]]]]
+    };
+    renderer = new _mobiledocDomRenderer['default']({
+      sectionElementRenderer: {
+        p: function p() {
+          return document.createElement('pre');
+        },
+        H1: function H1() {
+          return document.createElement('h2');
+        }
+      }
+    });
+    var renderResult = renderer.render(mobiledoc);
+    var rendered = renderResult.result;
+
+    assert.equal(rendered.childNodes.length, 3, 'renders three sections');
+    assert.equal(rendered.childNodes[0].tagName, 'PRE', 'renders a pre');
+    assert.equal(rendered.childNodes[0].textContent, 'hello world', 'renders the text');
+    assert.equal(rendered.childNodes[1].tagName, 'PRE', 'renders a pre');
+    assert.equal(rendered.childNodes[2].tagName, 'H2', 'renders an h2');
+  });
 });
@@ -870,2 +898,3 @@ define('tests/unit/renderers/0-3-test', ['exports', 'mobiledoc-dom-renderer', 'mobiledoc-dom-renderer/cards/image', 'mobiledoc-dom-renderer/utils/section-types', 'mobiledoc-dom-renderer/utils/marker-types'], function (exports, _mobiledocDomRenderer, _mobiledocDomRendererCardsImage, _mobiledocDomRendererUtilsSectionTypes, _mobiledocDomRendererUtilsMarkerTypes) {
   test('rendering nested mobiledocs in cards', function (assert) {
+    var renderer = undefined;
     var cards = [{
@@ -901,3 +930,3 @@ name: 'nested-card',
 
-    var renderer = new _mobiledocDomRenderer['default']({ cards: cards });
+    renderer = new _mobiledocDomRenderer['default']({ cards: cards });
 
@@ -1256,2 +1285,30 @@ var _renderer$render10 = renderer.render(mobiledoc);
   });
+
+  test('renders a mobiledoc with sectionElementRenderer', function (assert) {
+    var mobiledoc = {
+      version: MOBILEDOC_VERSION,
+      atoms: [],
+      cards: [],
+      markups: [],
+      sections: [[_mobiledocDomRendererUtilsSectionTypes.MARKUP_SECTION_TYPE, 'P', [[_mobiledocDomRendererUtilsMarkerTypes.MARKUP_MARKER_TYPE, [], 0, 'hello world']]], [_mobiledocDomRendererUtilsSectionTypes.MARKUP_SECTION_TYPE, 'p', [[_mobiledocDomRendererUtilsMarkerTypes.MARKUP_MARKER_TYPE, [], 0, 'hello world']]], [_mobiledocDomRendererUtilsSectionTypes.MARKUP_SECTION_TYPE, 'h1', [[_mobiledocDomRendererUtilsMarkerTypes.MARKUP_MARKER_TYPE, [], 0, 'hello world']]]]
+    };
+    renderer = new _mobiledocDomRenderer['default']({
+      sectionElementRenderer: {
+        p: function p() {
+          return document.createElement('pre');
+        },
+        H1: function H1() {
+          return document.createElement('h2');
+        }
+      }
+    });
+    var renderResult = renderer.render(mobiledoc);
+    var rendered = renderResult.result;
+
+    assert.equal(rendered.childNodes.length, 3, 'renders three sections');
+    assert.equal(rendered.childNodes[0].tagName, 'PRE', 'renders a pre');
+    assert.equal(rendered.childNodes[0].textContent, 'hello world', 'renders the text');
+    assert.equal(rendered.childNodes[1].tagName, 'PRE', 'renders a pre');
+    assert.equal(rendered.childNodes[2].tagName, 'H2', 'renders an h2');
+  });
 });

lib/renderer-factory.js

@@ -44,3 +44,10 @@ import Renderer_0_2, { MOBILEDOC_VERSION as MOBILEDOC_VERSION_0_2 } from './renderers/0-2';
  export default class RendererFactory {
-   constructor({cards, atoms, cardOptions, unknownCardHandler, unknownAtomHandler}={}) {
+   constructor({
+     cards,
+     atoms,
+     cardOptions,
+     unknownCardHandler,
+     unknownAtomHandler,
+     sectionElementRenderer
+   }={}) {
      cards = cards || [];
@@ -52,3 +59,10 @@ validateCards(cards);
 
-     this.state = {cards, atoms, cardOptions, unknownCardHandler, unknownAtomHandler};
+     this.state = {
+       cards,
+       atoms,
+       cardOptions,
+       unknownCardHandler,
+       unknownAtomHandler,
+       sectionElementRenderer
+     };
    }
@@ -55,0 +69,0 @@

lib/renderers/0-2.js

@@ -47,4 +47,12 @@ import {
   constructor(mobiledoc, state) {
-    let { cards, cardOptions, atoms, unknownCardHandler } = state;
-    let { version, sections: sectionData } = mobiledoc;
+    let {
+      cards,
+      cardOptions,
+      unknownCardHandler,
+      sectionElementRenderer
+    } = state;
+    let {
+      version,
+      sections: sectionData
+    } = mobiledoc;
     validateVersion(version);
@@ -58,6 +66,14 @@
     this.cards              = cards;
-    this.atoms              = atoms;
     this.cardOptions        = cardOptions;
     this.unknownCardHandler = unknownCardHandler || this._defaultUnknownCardHandler;
 
+    this.sectionElementRenderer = {};
+    if (sectionElementRenderer) {
+      for (let key in sectionElementRenderer) {
+        if (sectionElementRenderer.hasOwnProperty(key)) {
+          this.sectionElementRenderer[key.toLowerCase()] = sectionElementRenderer[key];
+        }
+      }
+    }
+
     this._teardownCallbacks  = [];
@@ -236,3 +252,9 @@ this._renderedChildNodes = [];
 
-    const element = createElement(tagName);
+    let renderer = createElement;
+    let lowerCaseTagName = tagName.toLowerCase();
+    if (this.sectionElementRenderer[lowerCaseTagName]) {
+      renderer = this.sectionElementRenderer[lowerCaseTagName];
+    }
+
+    let element = renderer(tagName);
     this.renderMarkersOnElement(element, markers);
@@ -239,0 +261,0 @@ return element;

lib/renderers/0-3.js

@@ -53,4 +53,17 @@ import {
 
-    let { cards, cardOptions, atoms, unknownCardHandler, unknownAtomHandler } = state;
-    let { version, sections, atoms: atomTypes, cards: cardTypes, markups: markerTypes } = mobiledoc;
+    let {
+      cards,
+      cardOptions,
+      atoms,
+      unknownCardHandler,
+      unknownAtomHandler,
+      sectionElementRenderer
+    } = state;
+    let {
+      version,
+      sections,
+      atoms: atomTypes,
+      cards: cardTypes,
+      markups: markerTypes
+    } = mobiledoc;
     validateVersion(version);
@@ -69,2 +82,11 @@
 
+    this.sectionElementRenderer = {};
+    if (sectionElementRenderer) {
+      for (let key in sectionElementRenderer) {
+        if (sectionElementRenderer.hasOwnProperty(key)) {
+          this.sectionElementRenderer[key.toLowerCase()] = sectionElementRenderer[key];
+        }
+      }
+    }
+
     this._teardownCallbacks  = [];
@@ -337,3 +359,9 @@ }
 
-    const element = createElement(tagName);
+    let renderer = createElement;
+    let lowerCaseTagName = tagName.toLowerCase();
+    if (this.sectionElementRenderer[lowerCaseTagName]) {
+      renderer = this.sectionElementRenderer[lowerCaseTagName];
+    }
+
+    let element = renderer(tagName);
     this.renderMarkersOnElement(element, markers);
@@ -340,0 +368,0 @@ return element;

package.json

 {
   "name": "mobiledoc-dom-renderer",
-  "version": "0.3.0-beta2",
+  "version": "0.3.0-beta3",
   "description": "Renders Mobiledoc input to DOM output",
@@ -5,0 +5,0 @@ "scripts": {

README.md

@@ -41,4 +41,9 @@ ## Mobiledoc DOM Renderer [![Build Status](https://travis-ci.org/bustlelabs/mobiledoc-dom-renderer.svg?branch=master)](https://travis-ci.org/bustlelabs/mobiledoc-dom-renderer)
   * `cards` [array] - The list of card objects that the renderer may encounter in the mobiledoc
-  * `cardOptions` [object] - Options to pass to cards when they are rendered
+  * `atoms` [array] - The list of atom objects that the renderer may encounter in the mobiledoc
+  * `cardOptions` [object] - Options to pass to cards and atoms when they are rendered
   * `unknownCardHandler` [function] - Will be called when any unknown card is enountered
+  * `unknownAtomHandler` [function] - Will be called when any unknown atom is enountered
+  * `sectionElementRenderer` [object] - A map of hooks for section element rendering.
+    * Valid keys are P, H1, H2, H3, BLOCKQUOTE, PULL-QUOTE
+    * A valid value is a function that returns an element
 
@@ -49,2 +54,23 @@ The return value from `renderer.render(mobiledoc)` is an object with two properties:
 
+#### sectionElementRenderer
+
+Use this renderer option to customize what element is used when rendering
+a section.
+
+```
+var renderer = new MobiledocDOMRenderer({
+  sectionElementRenderer: {
+    P: function() { return document.createElement('span'); },
+    H1: function() { return document.createElement('h2'); },
+    H2: function() {
+      var element = document.createElement('h2');
+      element.setAttribute('class', 'subheadline');
+      return element;
+    }
+    /* Valid keys are P, H1, H2, H3, BLOCKQUOTE, PULL-QUOTE */
+  }
+});
+var rendered = renderer.render(mobiledoc);
+```
+
 ### Tests
@@ -51,0 +77,0 @@

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

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

317726

increased by2.83%

Lines of code

8218

increased by2.71%

Number of lines in readme file

85

increased by44.07%

No dependency changes