4 ms·

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 n

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.

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.