6 ms·

Seems fairly similar to Daft.js including one of the issues that stopped me from using Draft.js - lack of ability to stylize root Nodes specifically inability t

Seems fairly similar to Daft.js including one of the issues that stopped me from using Draft.js - lack of ability to stylize root Nodes specifically inability to add "text-align" style to paragraphs. Sure, there are some workarounds for that, but those are just terrible hacks bolted on top of the inflexible model system. I had to switch to ProseMirror where that was easier to implement. Another thing that irritated me a lot about Draft.js is the fact that Entities can't be applied to the same character in content block. One more reason I had to switch to ProseMirror.

ianstormtaylor 10y ago
Hey, Slate author here. I didn't realize this was going to get submitted to HN, Slate's still in beta but it's fairly production-ready. You actually can handle things like "text-align", by adding custom data to nodes, which you can then read back via: const alignment = node.data.get('alignment') Where .get(key) can be anything you want. So text alignment would just be deciding on a key/value to use, and then toggling styles in your React component based on the alignment value. That said, it doesn't handle text alignment "out of the box" if that's what you mean. It doesn't really handle anything out of the box, because you have to opt-in to anything that changes your schema. This is by design though, and it makes it a lot less complicated to use Slate than some of the other frameworks when you start building complex editors. But if you're looking for a drop-in editor that has basic features then Slate is not the right choice.
- Ronsenshi 10y ago
  It's been several months since I used Draft, but if I remember correctly some of the editors based on Draft use same approach with defining custom data on the node and then applying custom class with assignment (for example you end up with: `<p class="align-right">Text Text Text</p>`). Too hacky for me. I would have loved if Nodes had native style suppord. Kind of like a Mark but applied to the whole root node instead of character ranges. > it doesn't handle text alignment "out of the box" That's quite alright. ProseMirror doesn't handle that out of the box too. A lot of new frameworks for rich editors surprisingly don't have that.
  - ianstormtaylor 10y ago
    You can actually choose to use styles instead of classes fairly easily too. Since it's all defined in your custom React component you can do whatever you want, for example it would be written as....: function MyNodeComponent(props) { const { node } = props const textAlign = node.get('text_align') return <div style={{ textAlign }} {...props.attributes}>{props.children}</div> } Does that work for you? I'd be curious to hear what you mean by "marks but for nodes" and how you were thinking the API would look—sounds interesting! Slate is different than Draft in that it gives you full control over the rendering logic—one of the things that frustrated me when using Draft and that I wanted to solve when creating Slate. It's much more flexible than Draft in that sense.
    - Ronsenshi 10y ago
      That does indeed work. You do need to override Node component and if you want to have even more changes - all of those would have to be located within that custom component. I haven't really thought much about API or possible implementation for Marks for Nodes. My thoughts generally revolve around the idea that blocks should have extensible styling via Schema in the same way you can add custom Marks in your Schema. You should be able to change styling of the nodes within the Schema instead of overriding block simply because of the alignment or some other minor style.
      - ianstormtaylor 10y ago
        That makes sense. And you can do that with Slate! Since the components are all React components you can use the same types of extending patterns you'd use in React. In this case you'd probably use a higher-order component (HOC) that handles adding to the `style` property based on the node's data. And then you could wrap all of your other blocks with it... quote_block: alignment(QuoteBlock), code_block: alignment(CodeBlock), ... One of the things I started with was making sure that components are just React components, so that all of the patterns that the React ecosystem brings can be used with Slate.
- joshmarinacci 10y ago
  Slate looks outstanding. I stopped work on my own lib when ProseMirror came out, but since then I've found that it and Draft.js still don't meet my needs. How can I contribute to Slate? What do you need help with?
  - ianstormtaylor 10y ago
    Thanks! :D There are some bigger architectural things that I'd like to work on, but they're probably best handled by me since lots of context is required. But I've been marking lots of issues as "help please" [1] on GitHub. And other than those, anything marked "bug" [2] would be awesome to get help on too! [1]: https://github.com/ianstormtaylor/slate/issues?q=is%3Aissue+is%3Aopen+label%3A%22%E2%9C%8C+help-please%22 https://github.com/ianstormtaylor/slate/issues?q=is%3Aissue+... [2]: https://github.com/ianstormtaylor/slate/issues?q=is%3Aissue+is%3Aopen+label%3Abug https://github.com/ianstormtaylor/slate/issues?q=is%3Aissue+...
- slig 10y ago
  Hey, thank you for sharing! The docs are amazing and very easy to understand. Just a quick question: is it possible to have text nodes that can't be edited inlined with others editables? I'm thinking of using slate to let users edit specific parts of a legal document (e.g: name, address, DOB, etc). In other words, a WYSIWYG text editor with specific fill in place holders that won't let the user mess with the other parts of the document. Thanks!
  - ianstormtaylor 10y ago
    Thanks! Yeah that should be possible, although there might be some weird browser inconsistencies, not totally certain on that. But check out the "Check Lists" example, the checkboxes are actually non-editable content that's rendered right in front of the editable text of the list item.
    - slig 10y ago
      Thank you very much for replying and pointing me to the right direction.
- 824ueirwfjd 10y ago
  hey, could slate be used in an ember.js project or is it only for React? or do I need to install a react component inside ember to use this?
underwater 10y ago
It's been a few years since I worked on Draft, but can't you just define a custom block style to implement alignment?
- Ronsenshi 10y ago
  If you mean Block Styling like here: https://draftjs.org/docs/advanced-topics-block-styling.html#content https://draftjs.org/docs/advanced-topics-block-styling.html#... Than yes - that is certainly a one way to handle it. However this approach would apply a some alignment-related CSS class instead of applying style to the block itself. Here's what Draft.js would return: `<p class="align-right">Text Text Text</p>` I would prefer if it was: `<p style="text-align:right;">Text Text Text</p>`

ianstormtaylor 10y ago

Hey, Slate author here. I didn't realize this was going to get submitted to HN, Slate's still in beta but it's fairly production-ready. You actually can handle things like "text-align", by adding custom data to nodes, which you can then read back via: const alignment = node.data.get('alignment') Where .get(key) can be anything you want. So text alignment would just be deciding on a key/value to use, and then toggling styles in your React component based on the alignment value. That said, it doesn't handle text alignment "out of the box" if that's what you mean. It doesn't really handle anything out of the box, because you have to opt-in to anything that changes your schema. This is by design though, and it makes it a lot less complicated to use Slate than some of the other frameworks when you start building complex editors. But if you're looking for a drop-in editor that has basic features then Slate is not the right choice.

Ronsenshi 10y ago
It's been several months since I used Draft, but if I remember correctly some of the editors based on Draft use same approach with defining custom data on the node and then applying custom class with assignment (for example you end up with: `<p class="align-right">Text Text Text</p>`). Too hacky for me. I would have loved if Nodes had native style suppord. Kind of like a Mark but applied to the whole root node instead of character ranges. > it doesn't handle text alignment "out of the box" That's quite alright. ProseMirror doesn't handle that out of the box too. A lot of new frameworks for rich editors surprisingly don't have that.
- ianstormtaylor 10y ago
  You can actually choose to use styles instead of classes fairly easily too. Since it's all defined in your custom React component you can do whatever you want, for example it would be written as....: function MyNodeComponent(props) { const { node } = props const textAlign = node.get('text_align') return <div style={{ textAlign }} {...props.attributes}>{props.children}</div> } Does that work for you? I'd be curious to hear what you mean by "marks but for nodes" and how you were thinking the API would look—sounds interesting! Slate is different than Draft in that it gives you full control over the rendering logic—one of the things that frustrated me when using Draft and that I wanted to solve when creating Slate. It's much more flexible than Draft in that sense.
  - Ronsenshi 10y ago
    That does indeed work. You do need to override Node component and if you want to have even more changes - all of those would have to be located within that custom component. I haven't really thought much about API or possible implementation for Marks for Nodes. My thoughts generally revolve around the idea that blocks should have extensible styling via Schema in the same way you can add custom Marks in your Schema. You should be able to change styling of the nodes within the Schema instead of overriding block simply because of the alignment or some other minor style.
    - ianstormtaylor 10y ago
      That makes sense. And you can do that with Slate! Since the components are all React components you can use the same types of extending patterns you'd use in React. In this case you'd probably use a higher-order component (HOC) that handles adding to the `style` property based on the node's data. And then you could wrap all of your other blocks with it... quote_block: alignment(QuoteBlock), code_block: alignment(CodeBlock), ... One of the things I started with was making sure that components are just React components, so that all of the patterns that the React ecosystem brings can be used with Slate.
joshmarinacci 10y ago
Slate looks outstanding. I stopped work on my own lib when ProseMirror came out, but since then I've found that it and Draft.js still don't meet my needs. How can I contribute to Slate? What do you need help with?
- ianstormtaylor 10y ago
  Thanks! :D There are some bigger architectural things that I'd like to work on, but they're probably best handled by me since lots of context is required. But I've been marking lots of issues as "help please" [1] on GitHub. And other than those, anything marked "bug" [2] would be awesome to get help on too! [1]: https://github.com/ianstormtaylor/slate/issues?q=is%3Aissue+is%3Aopen+label%3A%22%E2%9C%8C+help-please%22 https://github.com/ianstormtaylor/slate/issues?q=is%3Aissue+... [2]: https://github.com/ianstormtaylor/slate/issues?q=is%3Aissue+is%3Aopen+label%3Abug https://github.com/ianstormtaylor/slate/issues?q=is%3Aissue+...
slig 10y ago
Hey, thank you for sharing! The docs are amazing and very easy to understand. Just a quick question: is it possible to have text nodes that can't be edited inlined with others editables? I'm thinking of using slate to let users edit specific parts of a legal document (e.g: name, address, DOB, etc). In other words, a WYSIWYG text editor with specific fill in place holders that won't let the user mess with the other parts of the document. Thanks!
- ianstormtaylor 10y ago
  Thanks! Yeah that should be possible, although there might be some weird browser inconsistencies, not totally certain on that. But check out the "Check Lists" example, the checkboxes are actually non-editable content that's rendered right in front of the editable text of the list item.
  - slig 10y ago
    Thank you very much for replying and pointing me to the right direction.
824ueirwfjd 10y ago
hey, could slate be used in an ember.js project or is it only for React? or do I need to install a react component inside ember to use this?

underwater 10y ago

It's been a few years since I worked on Draft, but can't you just define a custom block style to implement alignment?

Ronsenshi 10y ago
If you mean Block Styling like here: https://draftjs.org/docs/advanced-topics-block-styling.html#content https://draftjs.org/docs/advanced-topics-block-styling.html#... Than yes - that is certainly a one way to handle it. However this approach would apply a some alignment-related CSS class instead of applying style to the block itself. Here's what Draft.js would return: `<p class="align-right">Text Text Text</p>` I would prefer if it was: `<p style="text-align:right;">Text Text Text</p>`