html deserializer behave unintuitively

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

Document/clarify html deserializer’s behavior

What’s the current behavior?

Consider the markup below containing two paragraphs:

const htmlContent = `
<p>
  Paragraph 1
  Hello World
</p>

<p>Paragraph 2</p>
`;

const initialValue = html.deserialize(htmlContent);

1. When this markup is deserialized, the rules are triggered in the following sequence (console output from the provided example):

---> el.tagName: P, block: paragraph
---> el.tagName: , block: undefined
---> el.tagName: , block: undefined
---> el.tagName: P, block: paragraph
---> el.tagName: , block: undefined

The two calls with el.tagName: P are understandable, but I cannot explain the three calls with no tagName. I suspect they are fired because of line breaks in the markup, but that’s not very intuitive. If these are intentional, how should they be handled?

1. The paragraphs are rendered as nested <p> and <span> tags (following the Slate data model), but that creates an issue with rendering of the first paragraph which has a line break inside the <p> tag.

Here’s the rendered markup:

And here’s how it is rendered on screen:

As you can see, paragraph 1 has extra space in the beginning and is broken into two lines. Based on the markup it should be all in one line - white space should be ignored. What is the recommended way to solve this issue?

1. Three paragraphs are rendered instead of two - see the large gap between paragraph 1 and paragraph 2 above. I suspect this is coming from the line break between the two paragraphs in the markup. What is the recommended way to work around this?

Supporting material:

• CodeSandbox reproducing the issue: https://codesandbox.io/s/slate-editor-issue-rktwj
• Slate: 0.47.4, Slate React: 0.22.4, Slate HTML Serializer: 0.8.6, latest Chrome, MacOS

What’s the expected behavior?

The deserializer should

• not trigger rules with undefined tag names (in the example above, only two rules should be fired with tagName = P)
• render paragraphs with line breaks correctly - leading whitespace and line breaks should be ignored
• line breaks between tags should be ignored

[ianstormtaylor]

I believe that this may be fixed by https://github.com/ianstormtaylor/slate/pull/3093, which has changed a lot of the logic in Slate and slate-react especially. I’m going to close this out, but as always, feel free to open a new issue if it persists for you. Thanks for understanding.

[nareshbhatia]

@minimaluminium, I have not made any progress on this. I am currently focused on other aspects of creating an off-the-shelf Slate editor. Here’s my work so far.