diff --git a/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v6/CodeMirror.tsx b/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v6/CodeMirror.tsx index 14cf9e219..19a88ad44 100644 --- a/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v6/CodeMirror.tsx +++ b/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v6/CodeMirror.tsx @@ -378,6 +378,8 @@ const CodeMirror = (props: NoteBodyEditorProps, ref: ForwardedRef { // be at least this specific. const selectionBackgroundSelector = '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground'; + // Matches the editor only when there are no gutters (e.g. line numbers) added by + // plugins + const editorNoGuttersSelector = '&:not(:has(> .cm-scroller > .cm-gutters))'; + const baseHeadingStyle = { fontWeight: 'bold', fontFamily: theme.fontFamily, @@ -180,6 +184,12 @@ const createTheme = (theme: EditorTheme): Extension[] => { marginRight: 'auto', } : undefined, + // Allows editor content to be left-aligned with the toolbar on desktop. + // See https://github.com/laurent22/joplin/issues/11279 + [`${editorNoGuttersSelector} .cm-line`]: theme.isDesktop ? { + paddingLeft: 0, + } : 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: 0.6,