Mobile: Add padding around beta text editor

laurent22 · Oct 30, 2021 · 365e152 · 365e152
1 parent 6393996
commit 365e152
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 2 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -969,6 +969,9 @@ packages/lib/commands/synchronize.js.map
 packages/lib/components/EncryptionConfigScreen/utils.d.ts
 packages/lib/components/EncryptionConfigScreen/utils.js
 packages/lib/components/EncryptionConfigScreen/utils.js.map
+packages/lib/database-driver-better-sqlite.d.ts
+packages/lib/database-driver-better-sqlite.js
+packages/lib/database-driver-better-sqlite.js.map
 packages/lib/database.d.ts
 packages/lib/database.js
 packages/lib/database.js.map

diff --git a/.gitignore b/.gitignore
@@ -952,6 +952,9 @@ packages/lib/commands/synchronize.js.map
 packages/lib/components/EncryptionConfigScreen/utils.d.ts
 packages/lib/components/EncryptionConfigScreen/utils.js
 packages/lib/components/EncryptionConfigScreen/utils.js.map
+packages/lib/database-driver-better-sqlite.d.ts
+packages/lib/database-driver-better-sqlite.js
+packages/lib/database-driver-better-sqlite.js.map
 packages/lib/database.d.ts
 packages/lib/database.js
 packages/lib/database.js.map

diff --git a/packages/app-mobile/components/NoteEditor/CodeMirror.ts b/packages/app-mobile/components/NoteEditor/CodeMirror.ts
@@ -32,6 +32,14 @@ function logMessage(...msg: any[]) {
 	postMessage('onLog', { value: msg });
 }
 
+// For an example on how to customize the theme, see:
+//
+// https://github.com/codemirror/theme-one-dark/blob/main/src/one-dark.ts
+//
+// Use Safari developer tools to view the content of the CodeMirror iframe while
+// the app is running. It seems that what appears as ".ͼ1" in the CSS is the
+// equivalent of "&" in the theme object. So to target ".ͼ1.cm-focused", you'd
+// use '&.cm-focused' in the theme.
 const createTheme = (theme: any): Extension => {
 	const baseTheme = EditorView.baseTheme({
 		'&': {
@@ -40,6 +48,10 @@ const createTheme = (theme: any): Extension => {
 			fontFamily: theme.fontFamily,
 			fontSize: `${theme.fontSize}px`,
 		},
+
+		'&.cm-focused': {
+			outline: 'none',
+		},
 	});
 
 	const appearanceTheme = EditorView.theme({}, { dark: theme.appearance === 'dark' });

diff --git a/packages/app-mobile/components/NoteEditor/NoteEditor.tsx b/packages/app-mobile/components/NoteEditor/NoteEditor.tsx
@@ -188,8 +188,8 @@ function useHtml(css: string): string {
 							${css}
 						</style>
 					</head>
-					<body style="margin:0; height:100vh; width:100vh; width:100vw; min-width:100vw;">
-						<div class="CodeMirror" style="height:100%;"></div>
+					<body style="margin:0; height:100vh; width:100vh; width:100vw; min-width:100vw; box-sizing: border-box; padding: 10px;">
+						<div class="CodeMirror" style="height:100%;" autocapitalize="on"></div>
 					</body>
 				</html>
 			`