Question: implementing a font picker

Hi,

I currently work on a font picker for our editor, trying to implement it as decoupled from the rest of the editor as possible. It means, font picker shouldn’t care about editor schema, what blocks are there, etc., and individual nodes shouldn’t care about font.

My first thought was, when font is selected, to somehow add a style to the attributes, so every node like this <p {...props.attributes} ... will automatically receive style with custom fontFamily. But I found no way to modify attributes.

Another approach is to use the data property. But it means I will need to change every node from <p {...props.attributes} ... to <p {...props.attributes} style={props.node.data.style} ..., and keep it in mind every time I need to create new custom node. Doesn’t look good.

Another way, is to implement something like CustomFontNode, and use it as a wrapper to apply fonts. So the resulting markup will be not like this <p class="paragraph" style="font-family: Whatever;" ..., but instead, something like <div class="custom-font-node" style="font-family: Whatever;"><p class="paragraph" ... .

The third way looks better for me, but maybe I’m missing something? Is there another way?

[vasike]

The new link url https://github.com/nossas/slate-editor/blob/master/packages/slate-editor-font-family-plugin/src/FontFamilyMark.js

[Hocoh]

https://github.com/nossas/slate-editor/blob/master/src/package/plugins/slate-font-family-plugin/FontFamilyMark.js is now 404error