Will it be possible to use em instead of px for font size?

[jrohlandt]

I'm working on project where I need to display the content of the text editor as a smaller preview.
What I'm currently doing with Draftjs is I convert the text editor content to HTML and then use js to manually scale down the font sizes (and line height, word spacing etc).
I'm not getting very accurate results with that approach but I'm sure if I spend countless more hours on it I can get it to an acceptable level.

However I'm thinking if I the rich text editor was able to use em instead of px for the font sizes (and anything else that uses px). Then all I would have to do for the preview is to scale down the base font of the editor accordingly and then everything else would just be correct?

Is that a good idea and is it possible with Slatejs?

[Brian-McBride]

From what I am seeing, you have to define your element types yourself. So you will have complete control over the CSS.
This is from one of the examples;

const Element = ({ attributes, children, element }: RenderElementProps) => {
  const style = { textAlign: element.align || 'left' };
  switch (element.type) {
    case 'block-quote':
      return (
        <blockquote style={style} {...attributes}>
          {children}
        </blockquote>
      );
    case 'bulleted-list':
      return (
        <ul style={style} {...attributes}>
          {children}
        </ul>
      );
    case 'heading-one':
      return (
        <h1 style={style} {...attributes}>
          {children}
        </h1>
      );
    case 'heading-two':
      return (
        <h2 style={style} {...attributes}>
          {children}
        </h2>
      );
    case 'list-item':
      return (
        <li style={style} {...attributes}>
          {children}
        </li>
      );
    case 'numbered-list':
      return (
        <ol style={style} {...attributes}>
          {children}
        </ol>
      );
    case 'title':
      return (
        <p style={style} {...attributes}>
          {children}
        </p>
      );
    default:
      return (
        <p style={style} {...attributes}>
          {children}
        </p>
      );
  }
};

[jrohlandt]

Thanks for replying. I have not had a chance to try out Slatejs yet but this is definitely good to know.

[dylans]

Yes, it can be managed pretty easily with CSS.

We have editor previews for our app (Living Spec) which uses Slate and Plate for the editor. We make some additional optimizations for mini-previews, e.g. remove some of the plugins that aren't needed in read-only mode.