How does plugins' renderElement/renderLeaf works

[bishoymelek]

Hi,

I found in the plugins exists that they are using a prop called renderElement and renderLeaf like:
renderLeaf: getRenderLeaf(MARK_BOLD)

I am trying to understand where is function or component which add the html or the font-weight styling?

I tried adding renderLeaf prop to editableProps being passed to the editor. and I check for my plugin (font-color) value, if exist i return it wrapped with needed styling, else I return null ... but it's breaking the basic-marks plugin styling

Thank you for the efforts 🙏

[zbeyens]

Hi, does this answer your question?

[bishoymelek]

Thanks @zbeyens for your reply. It's helpful, but I want to understand the usage of renderLeaf: getRenderLeaf(MARK_BOLD) ? Thank you

[zbeyens]

The options / components prop passed to SlatePlugins will be used by getRenderLeaf to render the component value stored at MARK_BOLD key

https://github.com/udecode/slate-plugins/blob/cca22c1bc0de8416c467e3dac8f8e97849d163a7/packages/core/src/utils/getRenderLeaf.ts#L9

https://github.com/udecode/slate-plugins/blob/ee5fe5618b865d595d6ec06a60f7ad92d12cc965/packages/core/src/utils/getEditableRenderLeaf.tsx#L15