Info required on Paragraph Component (Not a Bug)

[imransilvake]

I am using a Paragraph component to render the text with styles. i.e

const EditorJsParagraph = (props: IParagraphProps) => {
	const { text } = props.data;

	return <VHtmlText text={text} textClass="text-base text-52 dark:text-52" />;
};
export default EditorJsParagraph;

I need to change the text color based on Light and dark mode. How can I pass the information to EditorJsParagraph component so that I can change the text color?

Desired Behaviour:

if (darkMode) {
return <VHtmlText text={text} textClass="text-base text-52 dark:text-52" />;
}
return <VHtmlText text={text} textClass="text-base text-50 dark:text-50" />;

Setup

const EditorJsViewerNative = createEditorJsViewer({
	tools: {
		header: { Component: EditorJsHeader },
		paragraph: { Component: EditorJsParagraph },
		list: { Component: EditorJsList },
		image: { Component: EditorJsImage }
	},
	showBlockFallback: true
});

[alexdieudonne]

You can achieve what you want by the following this, but if you want to render a specific Component you have to duplicate the corresponding tool and accept the text={text}, textClass arguments

const EditorJsViewerNative = createEditorJsViewer({
    list: {
      Component: (d) =>
        List({
          ...d,
          containerStyle: { paddingHorizontal: 15 },
        }),
    },
  },
});