Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

mobiledoc-dom-renderer

Package Overview
Dependencies
Maintainers
2
Versions
52
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

mobiledoc-dom-renderer - npm Package Compare versions

Comparing version 0.4.0-beta2 to 0.4.0-beta3

8

dist/amd/mobiledoc-dom-renderer.js

@@ -450,5 +450,5 @@ define('mobiledoc-dom-renderer/cards/image', ['exports', 'mobiledoc-dom-renderer/utils/render-type'], function (exports, _mobiledocDomRendererUtilsRenderType) {

if (this.sectionElementRenderer[lowerCaseTagName]) {
element = this.sectionElementRenderer[lowerCaseTagName](tagName);
element = this.sectionElementRenderer[lowerCaseTagName](tagName, this.dom);
} else {
element = this.dom.createElement(tagName);
element = this.dom.createElement(tagName, this.dom);
}

@@ -904,5 +904,5 @@

if (this.sectionElementRenderer[lowerCaseTagName]) {
element = this.sectionElementRenderer[lowerCaseTagName](tagName);
element = this.sectionElementRenderer[lowerCaseTagName](tagName, this.dom);
} else {
element = this.dom.createElement(tagName);
element = this.dom.createElement(tagName, this.dom);
}

@@ -909,0 +909,0 @@

@@ -325,5 +325,5 @@ 'use strict';

if (this.sectionElementRenderer[lowerCaseTagName]) {
element = this.sectionElementRenderer[lowerCaseTagName](tagName);
element = this.sectionElementRenderer[lowerCaseTagName](tagName, this.dom);
} else {
element = this.dom.createElement(tagName);
element = this.dom.createElement(tagName, this.dom);
}

@@ -330,0 +330,0 @@

@@ -441,5 +441,5 @@ 'use strict';

if (this.sectionElementRenderer[lowerCaseTagName]) {
element = this.sectionElementRenderer[lowerCaseTagName](tagName);
element = this.sectionElementRenderer[lowerCaseTagName](tagName, this.dom);
} else {
element = this.dom.createElement(tagName);
element = this.dom.createElement(tagName, this.dom);
}

@@ -446,0 +446,0 @@

@@ -650,5 +650,5 @@ ;(function() {

if (this.sectionElementRenderer[lowerCaseTagName]) {
element = this.sectionElementRenderer[lowerCaseTagName](tagName);
element = this.sectionElementRenderer[lowerCaseTagName](tagName, this.dom);
} else {
element = this.dom.createElement(tagName);
element = this.dom.createElement(tagName, this.dom);
}

@@ -1104,5 +1104,5 @@

if (this.sectionElementRenderer[lowerCaseTagName]) {
element = this.sectionElementRenderer[lowerCaseTagName](tagName);
element = this.sectionElementRenderer[lowerCaseTagName](tagName, this.dom);
} else {
element = this.dom.createElement(tagName);
element = this.dom.createElement(tagName, this.dom);
}

@@ -1109,0 +1109,0 @@

@@ -568,4 +568,4 @@ define('tests/helpers/dom', ['exports'], function (exports) {

},
H1: function H1() {
return document.createElement('h2');
H1: function H1(tagName, dom) {
return dom.createElement('h2');
}

@@ -1287,4 +1287,4 @@ }

},
H1: function H1() {
return document.createElement('h2');
H1: function H1(tagName, dom) {
return dom.createElement('h2');
}

@@ -1291,0 +1291,0 @@ }

@@ -254,5 +254,5 @@ import { createTextNode } from '../utils/dom';

if (this.sectionElementRenderer[lowerCaseTagName]) {
element = this.sectionElementRenderer[lowerCaseTagName](tagName);
element = this.sectionElementRenderer[lowerCaseTagName](tagName, this.dom);
} else {
element = this.dom.createElement(tagName);
element = this.dom.createElement(tagName, this.dom);
}

@@ -259,0 +259,0 @@

@@ -356,5 +356,5 @@ import { createTextNode } from '../utils/dom';

if (this.sectionElementRenderer[lowerCaseTagName]) {
element = this.sectionElementRenderer[lowerCaseTagName](tagName);
element = this.sectionElementRenderer[lowerCaseTagName](tagName, this.dom);
} else {
element = this.dom.createElement(tagName);
element = this.dom.createElement(tagName, this.dom);
}

@@ -361,0 +361,0 @@

{
"name": "mobiledoc-dom-renderer",
"version": "0.4.0-beta2",
"version": "0.4.0-beta3",
"description": "Renders Mobiledoc input to DOM output",

@@ -5,0 +5,0 @@ "scripts": {

@@ -12,3 +12,3 @@ ## Mobiledoc DOM Renderer [![Build Status](https://travis-ci.org/bustlelabs/mobiledoc-dom-renderer.svg?branch=master)](https://travis-ci.org/bustlelabs/mobiledoc-dom-renderer)

```
```js
var mobiledoc = {

@@ -41,2 +41,3 @@ version: "0.2.0",

The Renderer constructor accepts a single object with the following optional properties:
* `cards` [array] - The list of card objects that the renderer may encounter in the mobiledoc

@@ -49,3 +50,6 @@ * `atoms` [array] - The list of atom objects that the renderer may encounter in the mobiledoc

* Valid keys are P, H1, H2, H3, BLOCKQUOTE, PULL-QUOTE
* Arguments are `tagName, dom`
* A valid value is a function that returns an element
* `dom` [object] - A native or [SimpleDOM](https://github.com/krisselden/simple-dom)
implementation of the DOM.

@@ -56,2 +60,30 @@ The return value from `renderer.render(mobiledoc)` is an object with two properties:

#### Rendering HTML
In a browser, rendering to HTML is simple:
```js
var renderer = new MobiledocDOMRenderer();
var rendered = renderer.render(mobiledoc);
var html = rendered.result.outerHTML;
```
However on the server in Node.js, native DOM APIs are not available. To make
server-rendering easy, this DOM
renderer is [SimpleDOM](https://github.com/krisselden/simple-dom)
compatible. You may pass an instance of a SimpleDOM document and serialize
its output. For example:
```js
var renderer = new MobiledocDOMRenderer({
dom: new SimpleDOM.Document()
});
var rendered = renderer.render(mobiledoc);
var serializer = new SimpleDOM.HTMLSerializer([]);
var html = serializer.serializeChildren(rendered.result);
```
This usage of the DOM renderer for rendering HTML has the advantage of allowing
developers to easily implement cards that work in a server and client context.
#### sectionElementRenderer

@@ -65,6 +97,6 @@

sectionElementRenderer: {
P: function() { return document.createElement('span'); },
H1: function() { return document.createElement('h2'); },
H2: function() {
var element = document.createElement('h2');
P: function(_, dom) { return dom.createElement('span'); },
H1: function(_, dom) { return dom.createElement('h2'); },
H2: function(tagName, dom) {
var element = dom.createElement(tagName);
element.setAttribute('class', 'subheadline');

@@ -71,0 +103,0 @@ return element;

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc