Adding font-family and font-size control in RTE-Slate

[mikeljoe1]

@macrozone Hi, Is it possible to add control over the font in slate. looks like there is no option provided to change the font family or size of the text in the editor.

[macrozone]

hi @mikeljoe1 , not by default, but you could create a custom slate plugin doing that.

Take this as an example: https://github.com/react-page/react-page/blob/master/examples/plugins/customSlatePlugin.tsx

this changes the color of the marked text. just change color with fontFamily.

[mikeljoe1]

cool, i'm testing it out. see, here is the code.

import React, { useState } from 'react';

// The editor core
import type { Value } from '@react-page/editor';
import { pluginFactories } from '@react-page/plugins-slate';


export default pluginFactories.createComponentPlugin<{
    font: string;
  }>({
    addHoverButton: true,
    addToolbarButton: true,
    type: 'SetFont',
    object: 'mark',
    icon: <span>Font</span>,
    label: 'Set Font',
    Component: 'span',
    getStyle: ({ font }) => ({ font }),
    controls: {
      type: 'autoform',
      schema: {
        type: 'object',
        required: ['font'],
        properties: {
           font: {
            type: "string",
            enum: ["overpass", "lato", "capriola","Arial","veranda"],
          },
          },
        },
      },
    });

I could see font in the toolbars of slate but the style is not getting applied actually.

[mikeljoe1]

Nothing Happens when i change the fonts

[macrozone]

You are setting a style „font“ on a span, which is not a valid css style. It should be „fontFamily“

[mikeljoe1]

Thank you , It worked and I'm able to add font size also in a similar way