Improve scrolling behavior for typewriter mode (#815)

MarkEdit-app · Jan 18, 2025 · 668e5aa · 668e5aa
1 parent a0c1639
commit 668e5aa
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/CoreEditor/src/core.ts b/CoreEditor/src/core.ts
@@ -66,7 +66,7 @@ export function resetEditor(initialContent: string) {
   setTimeout(ensureLineHeight, 600);
 
   // Makes sure the content doesn't have unwanted inset
-  scrollIntoView(0);
+  scrollIntoView(0, window.config.typewriterMode ? 'center' : undefined);
 
   const contentDOM = editor.contentDOM;
   contentDOM.addEventListener('blur', handleFocusLost);

diff --git a/CoreEditor/src/modules/config/index.ts b/CoreEditor/src/modules/config/index.ts
@@ -86,10 +86,9 @@ export function setReadOnlyMode(enabled: boolean) {
 
 export function setTypewriterMode(enabled: boolean) {
   window.config.typewriterMode = enabled;
+  styling.setTypewriterMode(enabled);
 
-  if (enabled) {
-    scrollToSelection('center');
-  }
+  scrollToSelection(enabled ? 'center' : 'nearest');
 }
 
 export function setFocusMode(enabled: boolean) {

diff --git a/CoreEditor/src/styling/config.ts b/CoreEditor/src/styling/config.ts
@@ -22,6 +22,7 @@ export default interface StyleSheets {
   accentColor?: HTMLStyleElement;
   fontFace?: HTMLStyleElement;
   fontSize?: HTMLStyleElement;
+  typewriterMode?: HTMLStyleElement;
   focusMode?: HTMLStyleElement;
   lineHeight?: HTMLStyleElement;
   taskMarker?: HTMLStyleElement;
@@ -32,6 +33,7 @@ export function setUp(config: Config, colors: EditorColors) {
   setFontFace(config.fontFace);
   setFontSize(config.fontSize);
   setInvisiblesBehavior(config.invisiblesBehavior);
+  setTypewriterMode(config.typewriterMode);
   setFocusMode(config.focusMode);
   setLineHeight(config.lineHeight);
 
@@ -157,6 +159,18 @@ export function setInvisiblesBehavior(behavior: InvisiblesBehavior) {
   }
 }
 
+export function setTypewriterMode(enabled: boolean) {
+  if (styleSheets.typewriterMode === undefined) {
+    styleSheets.typewriterMode = createStyleSheet(`
+      .cm-content {
+        padding-top: 50vh !important;
+      }
+    `, false);
+  }
+
+  styleSheets.typewriterMode.disabled = !enabled;
+}
+
 export function setFocusMode(enabled: boolean) {
   const editor = window.editor as EditorView | null;
   if (typeof editor?.dispatch === 'function') {