voxmedia/convert-rich-text

Name: convert-rich-text

Owner: Vox Media

Description: Convert an insert-only rich-text delta into HTML

Forked from: thomsbg/convert-rich-text

Created: 2016-04-11 16:57:24.0

Updated: 2018-05-21 18:41:26.0

Pushed: 2018-05-21 18:41:24.0

Homepage:

Size: 146

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

convert-rich-text

Convert a rich-text document (i.e. insert-only delta) into HTML.

Install

m install [--save] convert-rich-text

Usage

convert = require('convert-rich-text');
html = convert(delta, formats, options); // last argument optional

Specify an object of format names and config values, using the same conventions as QuillJS:

convert = require('convert-rich-text');
delta = {ops: [
nsert: 'Hello, World!'},
nsert: '\n', attributes: {firstheader: true}},
nsert: 'This is a '},
nsert: 'demo', attributes: {bold: true}},
nsert: ' of convert-rich-text\n'},
nsert: 1, attributes: {image: 'monkey.png'}

formats = {
rstheader: { type: 'line', tag: 'H1' },
ld: { tag: 'EM' },
age: { tag: 'IMG', attribute: 'src' }

options = {
ockTag: 'P',
lineTag: 'SPAN'

html = convert(delta, formats, options);
ole.log(html);

Result:

Hello, World!</h1>
his is a <b>demo</b> of convert-rich-text</p>
img src="monkey.png"></p>

Formats

The following options are supported for configuring a format (adapted from QuillJS):

type: 'line' – make this format apply only to the line as a whole (via attributes to newline characters).

tag: 'B' – wrap the applicable text in that tag

parentTag: 'UL', tag: 'LI' – used for line formats to create multi-level tag structures; consecutive lines with the same parentTag will share the parent.

attribute: 'href' – set an attribute using the given name and the value from the delta

class: 'cursor-' – add a class with the given prefix, e.g. convert({ ops: [{ insert: 'hello', attributes: { cursor: 1234 } }] }, { cursor: { class: 'cursor-' })=>hello`

style: 'fontSize' – set an inline style using the given name and the value from the delta

add: function(node, value[, dom]) – a hook for custom behavior, runs after logic for other options. e.g.

ert(delta, {
 wrap in a span, and set data attributes,
 e.g. `{insert: 'hello', { data: { foo: 'bar' } } }` => `<span data-foo="bar">hello</span>`
ta: { tag: 'span', add: function(node, data) {
Object.keys(data).forEach(function(key) {
  node.dataset[key] = data[key];
});
return node;
},
 repeat the line N times
 e.g. `{insert: 'hello\n', { times: 3 } }` => `<p>hello</p><p>hello</p><p>hello</p>`
peat: { type: 'line', add: function(node, value) {
var clone = node;
for (var i = 1, n = parseInt(value); i < n; i++) {
  clone = node.cloneNode(true);
  node.parentNode.appendChild(clone);
}
return clone;
}

Options

Each line of rich-text is wrapped with a block element (default <div>).

attribute-, class- and style-based formats wrap text with an inline element if there is no other tag to work on (default <span>).

You can change these tags with the blockTag and inlineTag options:

ert(delta, formats, { blockTag: 'FIGURE', inlineTag: 'INS' });

Changelog

• 2.0.2 [Relax jsdom and node version requirements]
• 2.0.0 Server-side support via jsdom, node version locked to <=0.12
• 1.2.1 Beginning of changelog

Development

Run npm start to spin up a static web server and watchify. Open http://localhost:8080/test in a browser to run and debug tests.

Credit

Thank you @kbjr for https://github.com/UmbraEngineering/quilljs-renderer on which this project is forked.