Editor.js: OutputData is wrongly manipulated and does not match expected output

[natterstefan]

Current Setup

Documented and prepared in this codesandbox example.

Note: It _doesn't matter if this is tested with or without react_ (I've prepared both, see links below)

Current Setup

Let's assume I've a the following data object:

export const data = {
  blocks: [
    {
      type: 'header',
      data: {
        text: 'Editor.js',
        level: 2,
      },
    },
    {
      type: 'react',
      data: {
        url: 'remote.adjust.rotate=0&remote.size.w=5575&remote.size.h=3717',
      },
    },
  ],
}

When passing this later on to EditorJS everything works fine (note: tested in a react setup, but it does not really matter if it's plain js or not).

Current Problem

When I now get the data from the editor with await editor.save() the data is corrupt and looks like this:

    {
      type: 'react',
      data: {
        url: 'remote.adjust.rotate=0&remote.size.w=5575&remote.size.h=3717',
      },
    },

remote.adjust.rotate=0& vs. remote.adjust.rotate=0&remote... :/

This only happens since @editorjs/[email protected] in the latest 2.16 release everything works still (see codesandbox with 2.16.1).

Example Apps

• @editorjs/[email protected] with the bug: https://codesandbox.io/s/vibrant-sun-ggivk
• @editorjs/[email protected] without the bug: https://codesandbox.io/s/vigilant-cookies-1o7bj
• @editorjs/[email protected] (without react): https://codepen.io/natterstefan/pen/dyPjaVx?editors=1111

[gohabereg]

Hi @natterstefan
Thanks for the report! It seems we need to escape entities after saving as html-janitor inserts data to temp DOM nodes on sanitizing

[natterstefan]

Hi and you're welcome @gohabereg.

Do you think this can be resolved pretty easily and quickly or is this something big?

[gohabereg]

Should not be too big, I will provide some details later

[natterstefan]

Thank you very much @gohabereg.

[gohabereg]

Hi @natterstefan

Thanks for the reminder :)

A method that sanitizes blocks after save called is here — https://github.com/codex-team/editor.js/blob/master/src/components/modules/sanitizer.ts#L59

As you can see, if there is no sanitize config of any kind, it returns data as it is. But the problem is there is always sanitize config for inline-tools as this method appends br and wbr tags (2.17 changes).

The solution is actually simple — if a tool doesn't provide inlineToolbar option, return an empty object from getInlineToolsConfig.

The second step would be to decode HTML entities after sanitize, but as we include inline tags to Editor's output, it would break the markup

[natterstefan]

Hi @gohabereg,

Okay, sounds doable. Is this a topic you gonna fix in editorjs itself, or is this something a user of the lib must fix individually?

Would you mind updating the attached codepen and show me how one would solve it, please? Both steps (getInlineToolsConfig and decode HTML entities after sanitize) are required, right?

[gohabereg]

Hi @natterstefan,

It should be fixed in the editor itself

[MohitKS5]

Any update or workaround on this ?
@natterstefan were you able to find something?

[thomas-obernberger]

is there any update on this?

[orbachar]

any update? is there a workaround?