Desktop: Fixes #10036: Applied font family and font size to RTE #10102
Conversation
| @@ -598,6 +598,7 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => { | |||
| ]; | |||
|
|
|||
| const editors = await (window as any).tinymce.init({ | |||
| content_style: `* {font-size: ${props.fontSize}px; font-family: "${props.fontFamily}"; line-height: 1.5;}`, | |||
There was a problem hiding this comment.
For some reason, the lines overlay on each other when the font size increases, So the line-height is going to prevent the overlay.
There was a problem hiding this comment.
Ok but a fixed size of 1.5 means the lines are going to be too tall for small fonts and still too small for large fonts. How is that solved in the Markdown editor or viewer?
There was a problem hiding this comment.
1.5 is not a fixed size. In CSS, when using a number without a unit, it changes depending on another attribute (in our case, font-size). 1.5 in our case means that the line-height would be 1.5x font-size.
There was a problem hiding this comment.
The original line-height for body in the Rich Text Editor is actually 1.6em:
so I think you need to set it to 1.6em here also to keep the same look.
There was a problem hiding this comment.
If it's already set in the body, why does it need to be set in content_style too? Or is this variable replacing (instead of overriding) the style? I'm wondering if we're losing certain important styles by doing this.
Also what if the font family is not set in the settings, what default does it use?
There was a problem hiding this comment.
The 1.6em is actually not a static value; it comes from the themeStyle. So, I used the same value in the TinyMCE.
There was a problem hiding this comment.
@laurent22
I will investigate whether it is replaced or overridden.
If the font family is not set in the settings, it takes the default font family, the same as what the code mirror does.
There was a problem hiding this comment.
- The
1.6emin thebodyis not applied to the text in the editor because the TinyMCE editor creates aniframeto isolate the editor's content from the rest of the application. Thisiframecontains its own HTML document with its own style, so theline-heightof the main body doesn't affect the elements in theiframe.
An alternate solution would be to give the body of the iframe (#tinymce) a line-height: inherit;
inherit.mp4
- The content_style doesn't replace the style; it is injected into the head of the page.
https://www.tiny.cloud/docs/configure/content-appearance/#content_style
There was a problem hiding this comment.
That's great, thank you for looking into this. Indeed if it's an iframe it's not going to get parent style.
| @@ -464,6 +464,7 @@ function NoteEditor(props: NoteEditorProps) { | |||
| noteToolbarButtonInfos: props.toolbarButtonInfos, | |||
| plugins: props.plugins, | |||
| fontSize: Setting.value('style.editor.fontSize'), | |||
| fontFamily: Setting.value('style.editor.fontFamily'), | |||
There was a problem hiding this comment.
You're passing the fontFamily as a property, but you could just get it from the theme (just like for theme.lineHeight), so could you change this please?
There was a problem hiding this comment.
In order to do so, I will have to change the fontFamily property in the globalStyle object in theme.ts, because it's given a static value ('Roboto').
So, should I change it and use theme.fontFamily or stay withprops.fontFamily?
There was a problem hiding this comment.
Oh you're right, it should indeed come from the settings since it's dynamic. All good then!
|
Reverted in eb06ac6 |
Fixes #10036
Behavior:
Font size and font family are applied to RTE
Screenshot
Changes:
GSoC Details