Slate renders extra / incorrect markup
See original GitHub issueReporting a bug: Somewhere in the Slate rendering / deserialization process nodes get wrapped in <span>
-elements. You can notice this when inspecting the markup with the browser tools. Why / how this happens isn’t explained in the docs, which leads me to believe this is either a necessity for Slate to function or maybe a bug.
Here is an example fiddle: https://jsfiddle.net/kLh1yxeb/
Example of extra Slate wrappers:
<li data-key="12">
<span data-key="13">
<span data-slate-leaf="true" data-offset-key="13:0">
<span data-slate-content="true">
Item 1
</span>
</span>
</span>
</li>
Expected behavior: No extra spans are created. The spans are coloured red
and the “text content” inside the <li>
elements remains as the default color (black
).
Current behavior: Everything inside the <li>
-elements is colored red
, depending on the element order some of the content disappears entirely!
Environment information:
Operating system: Linux Mint 18.3
Browser: Brave 0.58.18 (Chromium: 71.0.3578.98)
- - -
"slate": "0.45.1"
"slate-html-serializer": "0.7.39"
"slate-react": "0.21.21"
Issue Analytics
- State:
- Created 4 years ago
- Reactions:3
- Comments:5 (2 by maintainers)
Top Results From Across the Web
The Joy of Liquid Markup - Slate Knowledge Base
Where can you use Liquid Markup within Slate? 01:38. Example 1: If Statements, 02:12 ... Removing Extra Space/Line Breaks, 10:55.
Read more >Text selection in React Slate no longer marked when focus ...
I have to use the timeout to get outside the react lifecycle and I have to add an additional flag since losing focus...
Read more >Rendering - Slate
To that end, Slate gives you control over the rendering behavior of your custom nodes and properties in your richtext domain.
Read more >markdown-it 13.0.1 API documentation
This is only for full CommonMark compatibility. breaks: false, // Convert '\n' in paragraphs into <br> ... Render markdown string into html.
Read more >27 R Markdown | R for Data Science
The distribution of the remainder is shown below: ```{r, echo = FALSE} ... + K. You can also do this programmatically with rmarkdown::render("1-example....
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Use Slate only to edit and write your own renderer (or ask around in Slate Slack) to render “clean” HTML from JSON state. That goes for email templates, regular front-end content consumption, etc. You wouldn’t want users to download extra JS: Slate, like all rich text editors, is not super small and it’s obviously not as performant as rendering with just plain React. You can store classes or inline CSS in
data
attribute.Slate has
readOnly
mode but I’d say it’s suitable for features like preview.Right, so Slate doesn’t support editing in place - A mention of this and a description of why/how Slate adds extra elements to the DOM would be super useful to have in the docs.
Still curious as to case of the vanishing content though - It’s a relatively show stopping bug for us.