From 365e15275877f2c97865e71ab78b79b49a67c70c Mon Sep 17 00:00:00 2001 From: Laurent Cozic Date: Sat, 30 Oct 2021 11:51:40 +0100 Subject: [PATCH] Mobile: Add padding around beta text editor --- .eslintignore | 3 +++ .gitignore | 3 +++ .../app-mobile/components/NoteEditor/CodeMirror.ts | 12 ++++++++++++ .../app-mobile/components/NoteEditor/NoteEditor.tsx | 4 ++-- 4 files changed, 20 insertions(+), 2 deletions(-) diff --git a/.eslintignore b/.eslintignore index 0649998a8..5ad2e4bee 100644 --- 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 index 63750c18f..f2b9ea42e 100644 --- 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 index 0daa0332a..0c2e6ba32 100644 --- 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 index 49f6eaa06..0fa514111 100644 --- 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} - -
+ +
`