Slate: Question: implementing a font picker

Created on 27 Mar 2017 · 5Comments · Source: ianstormtaylor/slate

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?

Source

optimistiks

Most helpful comment

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

vasike on 27 Sep 2018

👍3

All 5 comments

I didn't find another way. There is nothing for it but to use the data from node and schema for creating custom styling.
For example, please, look at here
As I see in code, attributes are not changeable from outside:
https://github.com/ianstormtaylor/slate/blob/d7962240e1eab9ded6183853f4ef4a85d0223bac/src/components/node.js#L286

Rebulus on 27 Mar 2017

Hey @optimistiks, good question!

From what I can tell, I would implement this using the "marks" concept from Slate.

You can use a single mark of type font for example. And then use the mark.data to store the font chosen, and maybe other things like size, depending on whether they are independent.