How to convert HTML to prosemirror JSON while retaining css

1

I’m using the following code to convert an existing HTML into prosemirror JSON.

const jsdom = require('jsdom');
const { parse } = require('path');
const { JSDOM } = jsdom;
const { DOMParser } = require('prosemirror-model');
const pmSchema = require('prosemirror-schema-basic');
const util = require('util')


const { document } = (new JSDOM(`<span role="presentation" dir="ltr"
style="left: 163.371px; top: 141.878px; font-size: 22.38px; font-family: sans-serif; transform: scaleX(0.97142);">ImageNet
Classification with Deep Convolutional</span><br role="presentation"><span role="presentation" dir="ltr"
style="left: 316.181px; top: 167.78px; font-size: 22.38px; font-family: sans-serif; transform: scaleX(0.986862);">Neural
Networks</span>
`)).window;
const parsedHTML = DOMParser.fromSchema(pmSchema.schema)
    .parse(document, { preserveWhitespace: true })
    .toJSON();
var json = JSON.stringify(parsedHTML);

The HTML has some inline style that I want to preserve and render in prosemirror. But the json output strips all the inline styles.

{
  "type": "doc",
  "content": [
    {
      "type": "paragraph",
      "content": [
        {
          "type": "text",
          "text": "ImageNet Classification with Deep Convolutional"
        },
        { "type": "hard_break" },
        { "type": "text", "text": "Neural Networks " }
      ]
    }
  ]
}

Is there any way to generate JSON with the styles preserved?

2

No — ProseMirror documents are a semantic representation of the document, they can’t represent CSS styling information.

3

Ok, is there any other way to send just the text alignment information using JSON?

4

You could set up your schema to store alignment information in the attributes of the nodes that need it.