Toggle headers and deserialization

[qlecler]

Hi there !

I'm trying to deserialize the table, it works but the headers part (thead => headless) doesn't work.

Here is the code :

   const type = BLOCK_TAGS[el.tagName.toLowerCase()];
      if (type) {
        const headless = el.firstChild
          ? el.firstChild.nodeName === "THEAD"
          : false;
...
return {
          object: "block",
          type: type,
          data: {
            className: el.getAttribute("class"),
            align,
            color,
            headless
          },
          nodes: next(el.childNodes)

Thanks 👍

[jasonphillips]

In the latest commit (and published version on npm), I added a function on the main export that will generate default deserializer / serializer rules for you, which may make this easier. Use it something like this:

import DeepTable from 'slate-deep-table';
import Html from 'slate-html-serializer';

const myHtml = new Html({
    rules: [
      ...DeepTable.makeSerializerRules(/* can pass same options as plugin */),
      // your additional rules here if needed
    ],
})

Alternatively (since you're doing other custom things it looks like, with colors etc in the data), just look at my implementation to fix up yours: https://github.com/jasonphillips/slate-deep-table/blob/master/lib/defaultSerializers.js

I suspect you just need to swap el.firstChild with el.firstElementChild and then ensure you call .toLowerCase() on the tagnames when comparing since they can inexplicably be uppercase.

[qlecler]

Thanks.

For the header to be greyed out in the editor is there some styling to be applied manually ?

When I toggle the headers it doesn't change anything on the screen but the serialization and deserialization works just fine.

[jasonphillips]

The default rendering simply switches the table from having a thead or not, based on the headerless attribute. I believe you now just need to apply a style to thead elements as desired.

[qlecler]

When I click "toggle the headers" there is no thead tag rendered in the editor, only tbody / tr / td.

The headerless attribute is ok tho as it works on the html serialization end.

It just isn't rendered in the editor.

[jasonphillips]

Hm, that seems odd -- could you note which version of Slate you're on?

Check out the included example code and demo, which is very minimal; there, I don't do anything outside the plugin to make the headers work (other than css styling for thead), they just work out of the box. Something must be different with your setup.

[qlecler]

Hi,

Here is what I'm using :

 "slate": "0.47.3",
    "slate-deep-table": "0.8.0",
    "slate-html-serializer": "0.8.5",
    "slate-react": "0.22.3",
    "slate-soft-break": "0.9.0",

I've checked the source code when I toggle the table headers. No thead tags are added.

[jasonphillips]

It looks like your version of this plugin isn't my latest -- try switching to "slate-deep-table": "0.9.6" and reinstalling.

[qlecler]

It still doesn't work with the latest version.

Do you have an example with the headers (source of https://jasonphillips.github.io/slate-deep-table/)

Thanks.

[jasonphillips]

This is the full source of that demo:
https://github.com/jasonphillips/slate-deep-table/blob/master/example/main.js

But notice that there are no references to thead / tbody in that code, because they just work out of the box; the plugin itself export a renderBlock function (defined in the plugin here: https://github.com/jasonphillips/slate-deep-table/blob/master/lib/defaultRenderers.js; Slate documentation here: https://docs.slatejs.org/slate-react/plugins#renderblock) that handles it automatically when added to a Slate editor.

I suspect there must be something else going on in your code or your library versions, but it's difficult to guess what it is. Do you perhaps define your own rendering function that takes priority over the built-in one?