jasonphillips / slate-deep-table Goto Github PK
View Code? Open in Web Editor NEWPlugin for the Slate editor, allowing for creation of tables with nested content
License: Apache License 2.0
Plugin for the Slate editor, allowing for creation of tables with nested content
License: Apache License 2.0
I'm not sure why there's a new keyword at this line, classes are extended without it:
https://facebook.github.io/immutable-js/docs/#/Record
If you like I can submit a PR.
History is not recovered when trying to undo a row/column deletion, or redo a row/column insertion.
case 1:
case 2:
I've tested on the given schema, but seems the problem doesn't relate to normalisation. I can't verify if this is possibly a bug on slate regarding history management. Since both the above operations are dealing with removeNodeByKey.
I am using Slate 0.47.4 slate-deep-table 0.9.6.
Is there going to be an upgrade to slate v0.5? Really hoping so. Cheers
Hi! I found when I did copy/paste content within a table cell will cause unexpected table nesting. What I have done:
The above can be replicated from official demo: https://jasonphillips.github.io/slate-deep-table/
Maybe it's because of the nested table feature? If so how can I avoid this?
Hi,
THANK YOU for adding thead support in this release, really much appreciated.
I'm struggling to use this within a serialiser, as I'm finding the tbody
and thead
tags being stripped out. Is there a recommended method for this?
I'm using a fairly standard implementation of the seraliser as seen in the docs.
Here's an (abridged) version:
const rules = [
{
deserialize(el, next) {
const type = BLOCK_TAGS[el.tagName.toLowerCase()]
if (type) {
return {
object: 'block',
type: type,
nodes: next(el.childNodes),
}
}
},
serialize(obj, children) {
if (obj.object == 'block') {
switch (obj.type) {
case 'table': return (<table>{children}</table>);
case 'table_row': return (<tr>{children}</tr>);
case 'table_cell': return (<td>{children}</td>);
[...]
}
}
},
}
];
Something like the above will strip out the thead
and tbody
, and if I add cases for them in the switch
statement, they're not ever seen by the seralizer.
I appreciate this isn't a support forum, so I understand if you remove this issue, although any pointers appreciated :)
Is there any lead on this or a way to access lib
utilities such as TablePosition
?
Hi.
I tried to use setColumnAlign but with no joy.
Should I refer to it using Editor object or plugin itself ?
Thanks.
Has anyone explored the possibility of handling copy/paste events from external sources such as word/excel/google docs?
The onKeyDown implementation stops event propagation, leading to some whacky behavior as we integrate this plugin to Slate.
One way to prevent this is by calling next()
when the current selection is not in the table, letting other onKeyDown
implementations handle the event. I'm happy to create a pull request that does the following:
/**
* User is pressing a key in the editor
*/
function onKeyDown(event, change, next) {
const { value } = change;
// Only handle events in cells
if (!isSelectionInTable(value)) {
return next();
}
// Build arguments list
const args = [ event, change, opts ];
switch (event.key) {
case KEY_TAB:
return onTab(...args);
case KEY_DOWN:
case KEY_UP:
return onUpDown(...args);
}
}
At the moment, when we create a new row by tabbing the last element, the editor focus on the last element of the newly created row. In google docs/word, the default behavior is to focus on the first element instead of the last.
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 ๐
add typescript support
How complicated would this be to add?
Haven't looked into the source code much, but if you think it's feasible for a new contributor to build, I'd like to give it a shot since it's something we need at work in order to use this plugin.
Firstly, we are pretty much thankful to you for this package, but the issues have been opened since a while and they're not getting cleared. Maybe the creators have been busy but at least to keep it alive, it would be better if there are at least a few discussions going on.
Problem:
We are currently using this plugin for our project to facilitate table creation and edit.
While the insertTable()
seems to work fine on the default slate document schema, we are running into the problem of inserting the Table in its own block since it uses editor.insertBlock()
.
Our schema structure consist of a custom type block that wraps paragraph block and other custom block within it and editor.insertBlock()
will just Insert a new block at the same level as the current block,
which is within the custom block.
Proposal:
Having a InsertTableByKey/Path
that utilises insertNodeByKey/Path
command to insert at document level by obtaining the document key.
This also gives more flexibility to user who might want to insert deep within the slate tree if they have a complex document schema.
I can create the function and make a PR for it. Would love for you guys to support it.
Slate had introduced breaking changes and slate-deep-table is no more compatible with latest slate.
Hey, I am looking forward to implementing captions for tables. To implement captions, I need to define the schema for tables which I cannot access from slate-deep-table. Please let me know how I can implement captions for slate-deep-table!
This is the sandbox where I have a working example for image captions and tried a few things with slate-deep-table but didn't work out.
sandbox
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.