Problems with the new Html deserializer

Do you want to request a feature or report a bug?

A bug.

What’s the current behavior?

The new Html deserializer doesn’t work with the default parseHtml function. You can see the errors trying to paste some html in the paste html example.

First you have this error: Uncaught TypeError: _this.parseHtml is not a function

That could be resolved by passing explicitily null to Html constructor like this, but I think it should be fixed to also use the default parser if the options is undefined:

const serializer = new Html({
    rules: RULES,
    parseHtml: null
});

Then I created this fiddle to show the next error: https://jsfiddle.net/6u1e543z/

Uncaught TypeError: elements.filter is not a function

This happen because elements is a NodeList, not an Array so filter is not defined there.

I don’t know if there are more, couldn’t get past this one.

What’s the expected behavior?

The Html should work as before after updating the deserialize methods.

[lucadegasperi]

Here’s my html serializer rules

const BLOCK_TAGS = {
    p: 'paragraph',
    ul: 'bulleted-list',
    ol: 'numbered-list',
    li: 'list-item',
    h3: 'heading-three',

};

const INLINE_TAGS = {
    a: 'link'
};

// Add a dictionary of mark tags.
const MARK_TAGS = {
    em: 'italic',
    strong: 'bold',
    u: 'underlined',
};

const rules = [
    {
        deserialize: function(el, next) {
            const type = BLOCK_TAGS[el.tagName];
            console.log(el);
            if (!type) { return; }
            return {
                kind: 'block',
                type: type,
                nodes: next(el.childNodes)
            };
        },
        serialize: function(object, children) {
            if (object.kind != 'block') { return; }
            console.log(object);
            switch (object.type) {
                case 'numbered-list':
                    return <ol>{children}</ol>;
                case 'bulleted-list':
                    return <ul>{children}</ul>;
                case 'list-item':
                    return <li>{children}</li>;
                case 'paragraph':
                    return <p>{children}</p>;
                case 'heading-three':
                    return <h3>{children}</h3>;
                case 'link':
                    return <a>{children}</a>;
            }
        }
    },
    // Add a new rule that handles marks...
    {
        deserialize: function(el, next) {
            const type = MARK_TAGS[el.tagName];
            if (!type) { return; }
            return {
                kind: 'mark',
                type: type,
                nodes: next(el.childNodes)
            };
        },
        serialize: function(object, children) {
            if (object.kind != 'mark') { return; }
            switch (object.type) {
                case 'bold':
                    return <strong>{children}</strong>;
                case 'italic':
                    return <em>{children}</em>;
                case 'underline':
                    return <u>{children}</u>;
            }
        }
    },
    {
        deserialize: function (el, next) {
            if (el.tagName != 'a') { return; }
            const type = INLINE_TAGS[el.tagName];

            if (!type) {
                return;
            }
            return {
                kind: 'inline',
                type: type,
                nodes: next(el.childNodes),
                data: {
                    href: el.attrs.find(({name}) => name == 'href').value
                }
            };
        },
        serialize: function (object, children) {

            if (object.kind != 'inline') {
                return;
            }

            switch (object.type) {
                case 'link':
                    return <a href={object.data.get('href')}>{children}</a>;
            }
        }
    },
];

const html = new Html({rules, parseHtml: null});

and this is the example I’m using

this.state = {
            state: html.deserialize('<p>In addition to block nodes</p>')
        };

initializing the state with the Raw serializer works fine

[enzoferey]

For people arriving here one year later. I was running into the same issue in a tests environment with Docker + Karma + PhantomJS. PhantomJS didn’t have access to the DOMParser API so it would fail. I tried adding JSDOM.fragment as suggested in the docs but it wasn’t working. The workaround was to move away from PhantomJS to a jsdom environment throught https://github.com/badeball/karma-jsdom-launcher. No longer needed to specify a parseHtml prop and bye-bye to the deprecated PhantomJS !