Font size UI

[abarber7]

This could be considered as a feature request or an enhancement.
In editors like google docs and MS word users are able to increase and decrease the font size.

example:

[jgirardet]

Hi,
I need this so I'm thinking the way to do it.
From the api side I think the more natural way would be to add a parameter value to toggleMark.
https://github.com/udecode/slate-plugins/blob/437f656ca5a8aa5b379955eeebc40df8fdc5293c/packages/common/src/transforms/toggleMark.ts#L11

It would allow to pass a custom value to to addMark(mark, value) instead of the default true.
This could be used then for other plugins (color, backgroundcolor, ...).
All those have in common to be exclusive between each other, but can also have many values with various format.
what do you think ?

[zbeyens]

Yes that's possible if there is not too many options.

But I would do it this way:

• MARK_FONT_SIZE = 'font_size'
• create a plugin like above, except onKeyDown
• custom toggle mark that accepts a number parameter, which will set [MARK_FONT_SIZE]: 10, 12,... to the node. Used by the toolbar buttons.
• SP will check if font_size is defined in the node to render
• use a custom component or getNodeProps option to map MARK_FONT_SIZE to a prop like style

For hotkeys, let's see that later

[jgirardet]

Hi,
I've looked a bit on it.
It's not that complicated using a custom component.
The hard part is more about the toolbar.
It's ok to show the active MARK_FONT_SIZE in a dropdown/select when it has been set.
The real thing is about default fontsize of element. For example, H1 has 1.875 em but it's hardcoded in its own component so it's not easy to retrieve.
So what can we do ?

• is there a way to retrieve it ? is this the job of getNodeprops ? I don't understand the API about it.
• pass component style in slatePluginOptions ?
• forget it and just show default in the dropdown value (but I think it's not the desired behavior for the user)

I need your advice here.
Thanks

[zbeyens]

The default heading component is using StyledElement component, which renders:

<Tag {...attributes} className={classNames.root} {...nodeProps}>
  {children}
</Tag>

where:

• the class name is computed from the styles option (e.g. 1.875em)
• nodeProps is the returned value of getNodeProps, so this option can be used like this:

({element}) => ({
  style: {
    fontSize: element[MARK_FONT_SIZE]
  }
  // or className if you style with global css
})

or a custom component which would not need getNodeProps (like Placeholder)

[jgirardet]

sorry I don't get it.
I don't see how what you told me, can help me to find the 1.875em

[zbeyens]

In the toolbar button you need to use editor.addMark(MARK_FONT_SIZE, <font_size_value>) and the previous answer should work.

For more guidance, please give a try in a sandbox and share it here