question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Slate renders extra / incorrect markup

See original GitHub issue

Reporting 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:closed
  • Created 4 years ago
  • Reactions:3
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
adjourncommented, May 11, 2019

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.

1reaction
neutraalicommented, May 12, 2019

Use Slate only to edit and write your own renderer (or ask around in Slate Slack) to render “clean” HTML from JSON state

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found