Server side capability via jsdom

README.md

@@ -65,7 +65,7 @@ The following options are supported for configuring a format (adapted from Quill
 
 `style: 'fontSize'` -- set an inline style using the given name and the value from the delta
 
-`add: function(node, value)` -- a hook for custom behavior, runs after logic for other options. e.g.
+`add: function(node, value[, dom])` -- a hook for custom behavior, runs after logic for other options. e.g.
 
 ```javascript
 convert(delta, {

browser.js

@@ -0,0 +1,6 @@
+var convert = require('./lib/convert');
+
+module.exports = function(delta, formats, options) {
+  options.document = document;
+  return convert(delta, formats, options);
+};

index.js

@@ -1,9 +1,8 @@
-var Doc = require('./lib/doc');
+var jsdom = require('jsdom').jsdom;
+var convert = require('./lib/convert');
 
 module.exports = function(delta, formats, options) {
-  var doc = new Doc(formats, options);
-  for (var i = 0; i < delta.ops.length; i++) {
-    doc.writeOp(delta.ops[i]);
-  }
-  return doc.getHTML();
+  options.document = jsdom();
+  return convert(delta, formats, options);
 };
+

karma.conf.js

@@ -0,0 +1,24 @@
+var webpackConfig = require('./webpack.conf');
+
+module.exports = function(config) {
+  config.set({
+    basePath: '',
+    browsers: ['PhantomJS'],
+    frameworks: ['mocha', 'chai', 'phantomjs-shim'],
+    plugins: [
+      'karma-phantomjs-shim',
+      'karma-phantomjs-launcher',
+      'karma-webpack',
+      'karma-mocha',
+      'karma-chai'
+    ],
+    files: ['test/client/*.js'],
+    preprocessors: {
+      'test/client/*.js': ['webpack']
+    },
+    reporters: ['dots'],
+    webpack: webpackConfig,
+    webpackMiddleware: { noInfo: true },
+    singleRun: true
+  });
+}

lib/convert.js

@@ -0,0 +1,9 @@
+var Doc = require('./doc');
+
+module.exports = function(delta, formats, options) {
+  var doc = new Doc(formats, options);
+  for (var i = 0; i < delta.ops.length; i++) {
+    doc.writeOp(delta.ops[i]);
+  }
+  return doc.getHTML();
+};

lib/doc.js

@@ -4,9 +4,10 @@ module.exports = Doc;
 
 function Doc(formats, options) {
   this.formats = formats;
+  this.document = options.document;
   this.blockTag = options && options.blockTag || 'div';
   this.inlineTag = options && options.inlineTag || 'span';
-  this.root = document.createElement('div');
+  this.root = this.document.createElement('div');
 }
 
 Doc.prototype.getHTML = function() {
@@ -40,13 +41,13 @@ Doc.prototype.writeOp = function(op) {
 
 Doc.prototype.writeText = function(text, attrs) {
   if (!this.line) {
-    this.line = document.createElement(this.blockTag);
+    this.line = this.document.createElement(this.blockTag);
     this.root.appendChild(this.line);
   }
 
   if (!text.length) { return }
 
-  var node = document.createTextNode(text);
+  var node = this.document.createTextNode(text);
 
   this.line.appendChild(node);
 
@@ -70,7 +71,7 @@ Doc.prototype.applyFormat = function(node, format, value) {
       node = dom(node).switchTag(format.tag).get();
     } else {
       if (dom.VOID_TAGS[format.tag]) {
-        node = dom(node).replaceWith(document.createElement(format.tag)).get();
+        node = dom(node).replaceWith(this.document.createElement(format.tag)).get();
       } else {
         node = dom(node).wrap(format.tag).get();
       }
@@ -95,15 +96,21 @@ Doc.prototype.applyFormat = function(node, format, value) {
       node.setAttribute(format.attribute, value);
     }
     if (format.class) {
-      node.classList.add(format.class + value);
+      if (typeof node.classList === 'undefined') {
+        var newClass = format.class + value;
+        var className = node.className;
+        node.className = className.length ? (className + ' ' + newClass) : (className + newClass);
+      } else {
+        node.classList.add(format.class + value);
+      }
     }
     if (format.style && value !== format.default) {
       node.style[format.style] = value;
     }
   }
 
   if (typeof format.add === 'function') {
-    node = format.add(node, value);
+    node = format.add(node, value, dom);
   }
 
   return node;

lib/dom.js

@@ -4,6 +4,7 @@ var dom = module.exports = function(node) {
   }
 
   this.node = node;
+  this.document = node.ownerDocument;
 };
 
 dom.ELEMENT_NODE = 1;
@@ -120,7 +121,7 @@ dom.prototype.replaceWith = function(newNode) {
 dom.prototype.switchTag = function(newTag) {
   newTag = newTag.toUpperCase();
   if (this.node.tagName === newTag) { return this.node; }
-  var newNode = document.createElement(newTag);
+  var newNode = this.document.createElement(newTag);
   var attributes = this.attributes();
   if (!dom.VOID_TAGS[newTag]) { this.moveChildren(newNode); }
   this.replaceWith(newNode);
@@ -161,7 +162,7 @@ dom.prototype.text = function(text) {
 };
 
 dom.prototype.wrap = function(tag) {
-  var wrapper = document.createElement(tag);
+  var wrapper = this.document.createElement(tag);
   if (this.node.parentNode) {
     this.node.parentNode.insertBefore(wrapper, this.node);
   }

package.json

@@ -3,11 +3,12 @@
   "version": "1.2.1",
   "description": "Convert an insert-only rich-text delta into HTML",
   "main": "index.js",
+  "browser": "browser.js",
   "scripts": {
     "info": "make info",
     "lint": "make lint",
     "start": "make start",
-    "test": "make test"
+    "test": "NODE_ENV=test karma start && mocha test/server/server.js -R spec"
   },
   "repository": {
     "type": "git",
@@ -26,13 +27,24 @@
     "url": "https://github.com/thomsbg/convert-rich-text/issues"
   },
   "homepage": "https://github.com/thomsbg/convert-rich-text",
-  "dependencies": {},
+  "dependencies": {
+    "jsdom": "^3.1.2"
+  },
   "devDependencies": {
     "browserify": "^9.0.8",
     "chai": "^2.2.0",
     "http-server": "^0.8.0",
     "jshint": "^2.7.0",
+    "karma": "^0.13.22",
+    "karma-chai": "^0.1.0",
+    "karma-mocha": "^0.2.2",
+    "karma-phantomjs-launcher": "^1.0.0",
+    "karma-phantomjs-shim": "^1.2.0",
+    "karma-source-map-support": "^1.1.0",
+    "karma-webpack": "^1.7.0",
     "mocha-phantomjs": "^3.5.3",
-    "watchify": "^3.2.0"
+    "phantomjs-prebuilt": "^2.1.7",
+    "watchify": "^3.2.0",
+    "webpack": "^1.12.15"
   }
 }

test/client/client.js

@@ -0,0 +1,31 @@
+var assert = require('chai').assert;
+var convert = require('../../browser');
+
+var data = require('../data');
+var formats = data.formats;
+var tests = data.tests;
+
+function runTest(test) {
+  it(test.desc, function(done) {
+    if (!test.hasOwnProperty('opts')) {
+      test.opts = {};
+    }
+    var result = convert(test.delta, formats, test.opts);
+    if (typeof test.expected === 'object') {
+      assert.equal(result, test.expected.client);
+    } else {
+      assert.equal(result, test.expected);
+    }
+    done();
+  });
+}
+
+describe('client-side', function() {
+  tests.forEach(runTest);
+
+  it('throws an error for a delta with non-inserts', function() {
+    assert.throws(function() {
+      convert({ ops: [{ insert: 'abc' }, { retain: 3 }] }, formats, {});
+    }, 'Cannot convert delta with non-insert operations');
+  });
+});

test/test.js → test/data.js

@@ -1,7 +1,4 @@
-var assert = require('chai').assert;
-var convert = require('convert-rich-text');
-var dom = require('../lib/dom');
-var formats = {
+exports.formats = {
   bold: { tag: 'B' },
   color: { style: 'color' },
   user: { class: 'user-' },
@@ -11,31 +8,34 @@ var formats = {
   className: { attribute: 'class' },
   bullet: { type: 'line', tag: 'LI', parentTag: 'UL' },
   list: { type: 'line', tag: 'LI', parentTag: 'OL' },
-  reverse: { add: function(node) {
-    var newNode = document.createTextNode(node.textContent.split('').reverse().join(''));
+  reverse: { add: function(node, value, dom) {
+    var doc = dom(node).document;
+    var newNode = doc.createTextNode(node.textContent.split('').reverse().join(''));
     node.parentNode.replaceChild(newNode, node);
     return newNode;
   } },
-  repeat: { add: function(node, value) {
-    var frag = document.createDocumentFragment();
+  repeat: { add: function(node, value, dom) {
+    var doc = dom(node).document;
+    var frag = doc.createDocumentFragment();
     for (var i = 0, n = parseInt(value); i < n; i++) {
       frag.appendChild(node.cloneNode(true));
     }
     node.parentNode.replaceChild(frag, node);
     return frag;
   } },
-  parent: { add: function(node, value) {
+  parent: { add: function(node, value, dom) {
     dom(node.parentNode).switchTag(value);
     return node;
   } },
   data: { type: 'line', add: function(node, value) {
     Object.keys(value).forEach(function(key) {
-      node.dataset[key] = value[key];
+      node.setAttribute('data-' + key, value[key]);
     });
     return node;
   } }
 };
-var tests = [
+
+exports.tests = [
   {
     desc: 'No formats',
     delta: { ops: [
@@ -80,8 +80,10 @@ var tests = [
       {insert: 'Hello world', attributes: { color: 'red', user: 1234 }},
       {insert: '\n'}
     ]},
-    expected:
-      '<div><span style="color: red; " class="user-1234">Hello world</span></div>'
+    expected: {
+      client: '<div><span class="user-1234" style="color: red;">Hello world</span></div>',
+      server: '<div><span style="color: red;" class="user-1234">Hello world</span></div>'
+    }
   },
   {
     desc: 'attribute with implicit span tag',
@@ -165,16 +167,3 @@ var tests = [
     expected: '<h1></h1>'
   }
 ];
-
-tests.forEach(function(test) {
-  it(test.desc, function() {
-    var result = convert(test.delta, formats, test.opts);
-    assert.equal(result, test.expected);
-  });
-});
-
-it('throws an error for a delta with non-inserts', function() {
-  assert.throws(function() {
-    convert({ ops: [{ insert: 'abc' }, { retain: 3 }] }, formats);
-  }, 'Cannot convert delta with non-insert operations');
-});

test/server/server.js

@@ -0,0 +1,29 @@
+var assert = require('chai').assert;
+var convert = require('../../index');
+
+var data = require('../data');
+var formats = data.formats;
+var tests = data.tests;
+
+describe('server-side', function() {
+  tests.forEach(function(test) {
+    it(test.desc, function(done) {
+      if (!test.hasOwnProperty('opts')) {
+        test.opts = {};
+      }
+      var result = convert(test.delta, formats, test.opts);
+      if (typeof test.expected === 'object') {
+        assert.equal(result, test.expected.server);
+      } else {
+        assert.equal(result, test.expected);
+      }
+      done();
+    });
+  });
+
+  it('throws an error for a delta with non-inserts', function() {
+    assert.throws(function() {
+      convert({ ops: [{ insert: 'abc' }, { retain: 3 }] }, formats, {});
+    }, 'Cannot convert delta with non-insert operations');
+  });
+});

webpack.conf.js

@@ -0,0 +1,11 @@
+var webpack = require('webpack');
+
+module.exports = {
+  progress: false,
+  output: {
+    path: __dirname + '/build',
+    publicPath: '/js/',
+    filename: 'bundle.js'
+  },
+  devtool: 'source-map',
+};