self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-11-24 08:12:24 +02:00
Code Issues Releases Activity

Desktop: Fixes #9528: Fix maximum width setting not respected by beta editor (#9529)

Browse Source
This commit is contained in:
Henry Heino 2023-12-17 12:57:12 -08:00 committed by GitHub
parent 872fadf454
commit 0bd164642e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useStyles.ts
View File

@ -7,7 +7,9 @@ import { useMemo } from 'react';
const useStyles = (props: NoteBodyEditorProps) => {
return useMemo(() => {
return buildStyle(['CodeMirror', props.fontSize], props.themeId, (theme: Theme) => {
return buildStyle([
'CodeMirror', props.fontSize, props.contentMaxWidth,
], props.themeId, (theme: Theme) => {
return {
root: {
position: 'relative',
@ -70,6 +72,7 @@ const useStyles = (props: NoteBodyEditorProps) => {
// CM6 only
globalTheme: {
...theme,
contentMaxWidth: props.contentMaxWidth ? `${props.contentMaxWidth}px` : undefined,
fontFamily: 'inherit',
fontSize: props.fontSize,
fontSizeUnits: 'px',
@ -77,6 +80,6 @@ const useStyles = (props: NoteBodyEditorProps) => {
},
};
});
}, [props.style, props.themeId, props.fontSize]);
}, [props.style, props.themeId, props.fontSize, props.contentMaxWidth]);
};
export default useStyles;

12
packages/editor/CodeMirror/theme.ts vendored
View File

@ -9,6 +9,7 @@ import { EditorView } from '@codemirror/view';
import { Extension } from '@codemirror/state';
import { inlineMathTag, mathTag } from './markdown/markdownMathParser';
import { EditorTheme } from '../types';
// For an example on how to customize the theme, see:
//
@ -24,7 +25,7 @@ import { inlineMathTag, mathTag } from './markdown/markdownMathParser';
// use '&.cm-focused' in the theme.
//
// [theme] should be a joplin theme (see @joplin/lib/theme)
const createTheme = (theme: any): Extension[] => {
const createTheme = (theme: EditorTheme): Extension[] => {
// If the theme hasn't loaded yet, return nothing.
// (createTheme should be called again after the theme has loaded).
if (!theme) {
@ -166,6 +167,15 @@ const createTheme = (theme: any): Extension[] => {
'& .cm-tableHeader, & .cm-tableRow, & .cm-tableDelimiter': monospaceStyle,
'& .cm-taskMarker': monospaceStyle,
// Applies maximum width styles to individual lines.
'& .cm-line': theme.contentMaxWidth ? {
maxWidth: theme.contentMaxWidth,
// Center
marginLeft: 'auto',
marginRight: 'auto',
} : undefined,
// Override the default URL style when the URL is within a link
'& .tok-url.tok-link, & .tok-link.tok-meta, & .tok-link.tok-string': {
opacity: theme.isDesktop ? 0.6 : 1,

11
packages/editor/types.ts
View File

@ -108,11 +108,20 @@ export enum EditorKeymap {
Emacs = 'emacs',
}
export interface EditorTheme extends Theme {
fontFamily: string;
fontSize?: number;
fontSizeUnits?: number;
isDesktop?: boolean;
monospaceFont?: string;
contentMaxWidth?: number;
}
export interface EditorSettings {
// EditorSettings objects are deserialized within WebViews, where
// [themeStyle(themeId: number)] doesn't work. As such, we need both
// a Theme must be provided.
themeData: Theme;
themeData: EditorTheme;
// True if the search panel is implemented outside of the editor (e.g. with
// React Native).