Desktop, Mobile: Fixes #11673: Make tab size consistent between Markdown editor and viewer (and RTE) (#11940)

Co-authored-by: Henry Heino <46334387+personalizedrefrigerator@users.noreply.github.com>

packages/app-mobile/components/global-style.ts

@@ -15,6 +15,7 @@ const baseStyle = {
 	fontSizeSmaller: 14,
 	disabledOpacity: 0.2,
 	lineHeight: '1.6em',
+	listTabSize: '1.7em',
 	// The default, may be overridden in settings:
 	noteViewerFontSize: 16,
 };

packages/editor/CodeMirror/createEditor.ts

@@ -268,8 +268,6 @@ const createEditor = (
 					},
 				}),
 
-				EditorState.tabSize.of(4),
-
 				// Apply styles to entire lines (block-display decorations)
 				decoratorExtension,
 				dropCursor(),

packages/editor/CodeMirror/theme.ts

@@ -106,6 +106,14 @@ const createTheme = (theme: EditorTheme): Extension[] => {
 			marginLeft: `${theme.marginLeft}px`,
 			marginRight: `${theme.marginRight}px`,
 		},
+
+		'& .cm-listItem': {
+			// Needs to be !important because the tab-size is directly set on the element style
+			// attribute by CodeMirror. And the `EditorState.tabSize` function only accepts a
+			// number, while we need a "em" value to make it match the viewer tab size.
+			tabSize: `${theme.listTabSize} !important`,
+		},
+
 		'&.cm-focused .cm-cursor': baseCursorStyle,
 
 		// The desktop app sets the font for these elements to a specific font.

packages/editor/types.ts

@@ -146,6 +146,7 @@ export interface EditorTheme extends Theme {
 	contentMaxWidth?: number;
 	marginLeft?: number;
 	marginRight?: number;
+	listTabSize?: string;
 }
 
 export interface EditorSettings {

packages/lib/theme.ts

@@ -52,6 +52,7 @@ const globalStyle = (() => {
 		mainPadding: 12,
 		topRowHeight: 50,
 		editorPaddingLeft: 8,
+		listTabSize: '1.7em',
 
 		margin: margin,
 		marginRight: margin,

packages/renderer/noteStyle.ts

@@ -216,7 +216,7 @@ export default function(theme: any, options: Options = null) {
 		}
 		ul, ol {
 			padding-left: 0;
-			margin-left: 1.7em;
+			margin-left: ${theme.listTabSize};
 		}
 		li {
 			margin-bottom: .4em;