Trying to implement smth similar with pure Draft.js:
To be more precise, i want to have these hidden blocks of original message(s) that are editable and expandable by clicking three-dots icon
So, after some research i found out there are Custom Block Rendering and Custom Block Components, so i'm trying to extend the blockRenderMap with OriginalMessage component:
const OriginalMessage = ({ children }) => {
const [expanded, setExpanded] = useState(false);
const toggleExpanded = () => setExpanded(!expanded);
return (
<div>
<span style={{ display: 'inline-block', padding: 4 }} onClick={toggleExpanded}>
...
</span>
{children}
</div>
);
};
const blockRenderMap = Immutable.Map({
original: {
element: 'original',
wrapper: <OriginalMessage />,
},
});
const extendedBlockRenderMap = DefaultDraftBlockRenderMap.merge(blockRenderMap);
...
// rendering the Editor
<Editor
...
blockRenderMap={extendedBlockRenderMap}
/>
so, these are probably working pieces of code, and idea is - i need to parse following HTML into respective and recognizable blocks:
<p>For example, this is a template that every new email has</p>
<p>Here we have a signature</p>
<original>A lot of HTML here that includes previous messages blockquotes etc</original>
i use html-to-draftjs to get parse this html into blocks:
const blocksFromHTML = htmlToDraft(content, nodeName => {
if (nodeName === 'original') {
return {
type: 'original',
mutability: 'MUTABLE',
data: {},
};
}
});
// setting new State
const newEditorState = EditorState.createWithContent(
ContentState.createFromBlockArray(
blocksFromHTML.contentBlocks,
blocksFromHTML.entityMap,
),
decorator,
);
setEditorState(newEditorState);
But when i check the block that suppose to have original type, the type is unstyled.
The question is - how to make Editor recognise <original> tag as a block that needs to be customly rendered?
btw, not sure that it's the right approach to solve the issue - any help or advice appreciated. Thanks!
