More advanced blocks, requiring custom React components, aren't supported at the moment. If you need this, feel free to create an issue.
What is the current behavior?
At the moment, for block types, the editor only supports customising their element, and auto-generates a CSS class so the blocks can be styled. This is very limited: it's impossible to make a block that’s not text-based, or to enhance a text editing blocks with extra UI.
What is the expected behavior?
It should be possible to use the more advanced Draft.js APIs for block rendering in conjunction with the blockType API:
Here are specific use cases I would like those new APIs to make possible:
[ ] Create blocks that do not contain any text – for example for separators, say in a Word-like editor, having a way to add "Page break" blocks. Currently this is possible with a block-level entity, but this feels strange for cases where the entity wouldn't have any data.
[ ] Create blocks that have text, and some UI.
[ ] A code block with a dropdown to pick the language to use for syntax highlighting. Ref: Dante2, impl. 1, impl. 2
The use cases above should inform what configuration should be allowed for custom blocks, and what props need to be provided to them (potentially the same as given to entity components?)
thibaudcolas
commented
5 years ago
From the blocks documentation:
What is the current behavior?
At the moment, for block types, the editor only supports customising their
element, and auto-generates a CSS class so the blocks can be styled. This is very limited: it's impossible to make a block that’s not text-based, or to enhance a text editing blocks with extra UI.What is the expected behavior?
It should be possible to use the more advanced Draft.js APIs for block rendering in conjunction with the
blockTypeAPI:blockRenderMap.blockRendererFn.Use cases
Here are specific use cases I would like those new APIs to make possible:
Implementation
Support for wrapper blocks should be straightforward. Add it to the
getBlockRenderMap: https://github.com/springload/draftail/blob/bfb2b3d3eedbcf1ab1f61c25328752495b77ecb0/lib/api/behavior.js#L34-L53Support for custom blocks should also be straightforward, overriding the
blockRenderer: https://github.com/springload/draftail/blob/bfb2b3d3eedbcf1ab1f61c25328752495b77ecb0/lib/components/DraftailEditor.js#L459-L488The use cases above should inform what configuration should be allowed for custom blocks, and what props need to be provided to them (potentially the same as given to entity components?)