How i can override the font-size of the RichTextEditor

[Vituli]

I’m using the mui-tiptap package along with the FontSize extension and TextStyle to manage font sizes in my editor. However, I’m having trouble overriding the default font size. I tried setting the default size through the FontSize extension configuration.

What’s the correct way to ensure the font size can be overridden by default in mui-tiptap, and how do I set it programmatically or via user selection? Here’s my current code setup:

<RichTextEditor
      ref={rteRef}
      RichTextFieldProps={{
        variant: 'outlined',
        footer: (
          <Box component={'div'} className="flex justify-between items-center">
            <Box component={'div'}>
              <Typography variant="caption" color="text.secondary" className="pl-2">
                Press <strong>Cmd+B</strong> to bold, <strong>Cmd+I</strong> to italicize.
              </Typography>
            </Box>
            <Box>
              <IconButton onClick={submitComment} size="small">
                <SendIcon fontSize="small" />
              </IconButton>
            </Box>
          </Box>
        ),
      }}
      extensions={extensions} // Optionally include `renderControls` for a menu-bar atop the editor:
      renderControls={() => <EditorMenuControls />}
    />

  export default function useExtensions({placeholder}: UseExtensionsOptions = {}): EditorOptions["extensions"] {
  const queryClient = useQueryClient();
  return useMemo(() => {
    return [
      TableImproved.configure({
        resizable: true,
      }),
      TableRow,
      TableHeader,
      TableCell,

      BulletList,
      CodeBlock,
      Document,
      HardBreak,
      ListItem,
      OrderedList,
      Paragraph,
      CustomSubscript,
      CustomSuperscript,
      Text,

      // Blockquote must come after Bold, since we want the "Cmd+B" shortcut to
      // have lower precedence than the Blockquote "Cmd+Shift+B" shortcut.
      // Otherwise using "Cmd+Shift+B" will mistakenly toggle the bold mark.
      // (See https://github.com/ueberdosis/tiptap/issues/4005,
      // https://github.com/ueberdosis/tiptap/issues/4006)
      Bold,
      Blockquote,

      Code,
      Italic,
      Underline,
      Strike,
      CustomLinkExtension.configure({
        // autolink is generally useful for changing text into links if they
        // appear to be URLs (like someone types in literally "example.com"),
        // though it comes with the caveat that if you then *remove* the link
        // from the text, and then add a space or newline directly after the
        // text, autolink will turn the text back into a link again. Not ideal,
        // but probably still overall worth having autolink enabled, and that's
        // how a lot of other tools behave as well.
        autolink: true,
        linkOnPaste: true,
        openOnClick: false,
      }),
      LinkBubbleMenuHandler,

      // Extensions
      Gapcursor,
      HeadingWithAnchor,
      TextAlign.configure({
        types: ["heading", "paragraph", "image"],
      }),
      TextStyle,
      FontSize,
      Color,
      FontFamily,
      Highlight.configure({ multicolor: true }),
      HorizontalRule,

      ResizableImage,
      // When images are dragged, we want to show the "drop cursor" for where they'll
      // land
      Dropcursor,

      TaskList,
      TaskItem.configure({
        nested: true,
      }),

      Mention.configure({
        suggestion: mentionSuggestionOptions(queryClient),

      }),

      Placeholder.configure({
        placeholder,
      }),

      // We use the regular `History` (undo/redo) extension when not using
      // collaborative editing
      History,
    ];
  }, [placeholder]);
}

export default function EditorMenuControls() {
  return (
    <MenuControlsContainer>
      <MenuSelectFontSize
      />
      <MenuDivider />

      <MenuButtonBold />
      <MenuButtonItalic />
      <MenuButtonUnderline />
      <MenuButtonStrikethrough />
      <MenuDivider />

      <MenuButtonEditLink />
      <MenuDivider />

      <MenuButtonOrderedList />
      <MenuButtonBulletedList />
      <MenuDivider />

      <MenuButtonBlockquote />
      <MenuDivider />

      <MenuButtonUndo />
      <MenuButtonRedo />
    </MenuControlsContainer>
  );
}

[sjdemartini]

@Vituli The way the FontSize extension works is that if you choose a specific font size, it will set it on the node in Tiptap. If you return to "Default" (or unset), it removes that specific font size and reverts to whatever the default style is for that node. So the default font size is whatever font-size style is in effect where you're rendering your editor, for the given node (e.g., it's different for a Heading 1 than a Paragraph body node).

mui-tiptap sets the default font in the editor (which is used for non-headings) based on the body1 typography from your MUI theme (font family, font size, font weight, letter spacing): https://github.com/sjdemartini/mui-tiptap/blob/597a540df2c09e037c5754b197a766d9f3dfff5a/src/styles.ts#L42-L44

So you can override the default font size by applying your own CSS where you're rendering your editor, or by tweaking your MUI theme (e.g. just around the editor like this). There's an example of the former (which is what I'd probably recommend) in the demo in this repo and in the CodeSandbox linked from the README which uses the Box component from MUI: https://github.com/sjdemartini/mui-tiptap/blob/5495076960f5717f99f820f7ae0f0019896dd5ad/src/demo/Editor.tsx#L127-L140

If you wanted to do something similar for font-size, it could look like:

<Box
  sx={{
    "&& .ProseMirror": {
      fontSize: "20px",
    },
  }}
>
  <RichTextEditor
    ...
  />
</Box>

Note that I'm using && and not just & to increase specificity and ensure this style takes precedence over the default font styles set in mui-tiptap.

Hope that helps! I'll close this out but let me know if there's further need to reopen.