Code Monkey home page Code Monkey logo

Comments (9)

jasonphillips avatar jasonphillips commented on August 22, 2024

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.

from slate-deep-table.

qlecler avatar qlecler commented on August 22, 2024

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.

from slate-deep-table.

jasonphillips avatar jasonphillips commented on August 22, 2024

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.

from slate-deep-table.

qlecler avatar qlecler commented on August 22, 2024

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.

from slate-deep-table.

jasonphillips avatar jasonphillips commented on August 22, 2024

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.

from slate-deep-table.

qlecler avatar qlecler commented on August 22, 2024

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.

from slate-deep-table.

jasonphillips avatar jasonphillips commented on August 22, 2024

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

from slate-deep-table.

qlecler avatar qlecler commented on August 22, 2024

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.

from slate-deep-table.

jasonphillips avatar jasonphillips commented on August 22, 2024

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?

from slate-deep-table.

Related Issues (17)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.