Comments (9)
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.
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.
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.
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.
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.
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.
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.
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.
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)
- How to use setColumnAlign ? HOT 1
- How can merge cells be implemented inside slate-deep-table? HOT 3
- Captions for tables
- Is this package alive? HOT 1
- Copy cell content and paste will create nested table HOT 3
- Undo/Redo on removeNodeByKey HOT 3
- InsertTableByKey/Path HOT 1
- Suggested Enhancement: Copy Paste from external sources
- Colspan and rowspan handling
- Focus on first element when [New row] tab
- support typescript
- How to serialise table? HOT 2
- Support for v0.5 HOT 10
- onKeyDown swallows events HOT 2
- Does not work with latest slate version [email protected] HOT 1
- wrong new keyword HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from slate-deep-table.