Specifying Font Size

#1

Hi!

We’re working on a project, which uses ProseMirror as WYSIWYG editor for text in a photo books editor. One important feature we need is styling the text with various font families and font sizes. And we’ve hit some issues implementing that.

We currently implement font sizes and font families selectors as two marks. And the issues we have are:

  • ProseMirror clears the currently enabled marks if you select the font size, type some text, then delete all of it. Which is quite annoying from UX perspective.
  • ProseMirror doesn’t preserve the font size when user creates a new paragraph. So, if user selected 18px, then typed something, hit Enter, the font size got back to some default one inherited from CSS (e.g. 12px). Also quite annoying for users.
  • Sometimes photo books designs should have various default settings for text - e.g. it could be font like “Helvetica 24px” for all the new text items on the pages. There seems like no any way to specify default marks for the text in ProseMirror.

How would you recommend to solve those issues?

Thanks a lot! ProseMirror is really cool :slight_smile:

1 Like
#2

Marks are only inline and not across blocks. Why don’t you apply font selection to the current block ? Extend the schema so you have attributes which holds the font-size (and other font properties) and then you define some classes or inline styles tied to that attribute (in the schema). So when your user selects different font, you replace the whole block node with one which has the updated attributes.

#3

But this will make things like impossible. I.e. using various font sizes and font families within the same block.

#4

I think https://github.com/ProseMirror/prosemirror/issues/517 relates to your first issue where deleting text removes your selected marks. Sounds like an additional case where deleting highlighted text should set marks to that of highlighted text.

For your second case, you’ll need to customize the “enter” command to record the currently active marks, run the normal enter command code and then reset the active marks.

1 Like