Convert an HTML string into a rich-text delta using node.js and jsdom

README.md

This is a really ugly hack, but it works well enough for me to do as a one-off to convert a bunch of data from html strings into rich-text objects. I had originally stored my data in the long_text column as an html string, and now I want to store the raw JSON version of the same data in the rich_text column.

This is really just a demo of the idea, but if it helps anyone, I'll be happy that it does.

conversion.js

const Knex = require('knex');
const Promise = require('bluebird');
const jsdom = require('jsdom');
jsdom.defaultDocmentFeatures = {
  ProcessExternalResources: ['script'],
};

// shim for the mutation observer, which we don't need and jsdom doesn't provide.
class MutationObserver {
  observe() {
  }
  takeRecords() {
    return [];
  }
}

function loadBody(modelName, id) {
  return Knex.trellis(modelName) //use your own database here.
  .where({id: id})
  .select('long_text')
  .then((vals) => {
    if (vals.length) {
      return new Promise((resolve, reject) => {
        //apparently it needs a toolbar. go figure.
        jsdom.env(`
          <div id="editor-toolbar" class="flex child-horizontal-margin cross-stretch">
            <div class="flex nostretch">
              <button title="Bold" class="quill-toolbar-button ql-bold"></button>
              <button title="Italic" class="quill-toolbar-button ql-italic"></button>
              <button title="Underline" class="quill-toolbar-button ql-underline"></button>
            </div>

            <div class="flex nostretch">
              <button title="List" class="quill-toolbar-button ql-list" value="bullet"></button>
              <button title="Bullet" class="quill-toolbar-button ql-list" value="ordered"></button>
            </div>

            <div class="flex nostretch">
              <button title="Link" class="quill-toolbar-button ql-link"></button>
            </div>
          </div>
          <div id="quillfrom">${vals[0].long_text}</div>
          `,
          ['https://cdn.quilljs.com/1.0.0-beta.3/quill.js'],
          (err, w) => {
            w.MutationObserver = MutationObserver;
            w.quill = new w.Quill('#quillfrom', {
              theme: 'snow',
              formats: [
                'bold',
                'italic',
                'underline',
                'link',
                'list',
                'bullet',
                'header',
                'align',
              ],
              modules: {
                toolbar: {
                  container: '#editor-toolbar',
                },
              },
            });
            resolve(w.quill.getContents()); // the magic
            w.close();
          }
        );
      });
    } else {
      return Promise.reject(`${modelName}:${id} not found`);
    }
  }).then((delta) => {
    //yay! do with it what you will.
    console.log(JSON.stringify(delta, null, 2));
  }).catch((err) => {
    console.log(err);
  });
}

this leaks memory like crazy, by the way. but it's a one-off: i just run it until it coredumps, and run some more.

it looks like the leak is in fetching quill.js from the CDN like a hojillion times. If you download it as a local file and then just fs.readFileAsync it and inject it to the jsdom.env as a src option it works much better.