Pass full node to renderMark and/or allow overriding renderText
Opened this issue · 0 comments
janus-reith commented
I apply custom styles to my marks, e.g. color
, similar to how it's done in the Lexical playground.
Therefore I need to parse style
:
const renderText = React.useCallback(
(node: TextNode): React.ReactNode | null => {
if (!renderMark) {
throw new Error("'renderMark' prop not provided.");
}
if (!node.format) {
return renderMark({
text: node.text,
style: node.style,
});
}
return renderMark({
text: node.text,
bold: (node.format & IS_BOLD) > 0,
[...]
style: node.style,
});
},
[renderMark]
);
And use it like this:
export const defaultRenderMark: RenderMark = (mark) => {
const style: CSSProperties = { ...parseStyleString(mark.style) };
[...]
if (Object.keys(style).length === 0) {
return <>{mark.text}</>;
}
return <span style={style}>{mark.text}</span>;
};
I had to fork the component in order to pass node.style
to renderMark
.
Some ideas:
- A. Allow passing a custom function for
renderText
, similar torenderMark
.
B. Pass the full node torenderMark
. In addition, consider removingrenderText
altogether and just calling a function that matchesIS_BOLD
etc. from withinrenderMark
. That one could also be exported, so customrenderMark
implementations could reuse it. - Consider making parsing of styles and maybe other relevant node attributes like
class
part of the includedrenderMark
function.