From 432312224a1bc19b47ba986a3aaa145799472bcb Mon Sep 17 00:00:00 2001
From: Harry Vangberg <harry@vangberg.name>
Date: Sat, 21 Dec 2024 22:16:27 +0100
Subject: [PATCH] NoteEditor: autofocus (#10)

---
 .../components/NoteEditor/AutoFocus.tsx         | 17 +++++++++++++++++
 .../renderer/components/NoteEditor/index.tsx    |  2 ++
 2 files changed, 19 insertions(+)
 create mode 100644 src/skrift-electron/renderer/components/NoteEditor/AutoFocus.tsx

diff --git a/src/skrift-electron/renderer/components/NoteEditor/AutoFocus.tsx b/src/skrift-electron/renderer/components/NoteEditor/AutoFocus.tsx
new file mode 100644
index 0000000..8130a63
--- /dev/null
+++ b/src/skrift-electron/renderer/components/NoteEditor/AutoFocus.tsx
@@ -0,0 +1,17 @@
+import { useEditorEffect } from "@nytimes/react-prosemirror";
+import { TextSelection } from "prosemirror-state";
+import React from "react";
+
+export const AutoFocus: React.FC = () => {
+    useEditorEffect((view) => {
+        // Set initial selection to end of document, so the initial
+        // focus after render starts at the end of the note.
+        view.dispatch(
+            view.state.tr.setSelection(TextSelection.atEnd(view.state.doc))
+        );
+
+        view.dom.focus();
+    }, []);
+
+    return null;
+};
diff --git a/src/skrift-electron/renderer/components/NoteEditor/index.tsx b/src/skrift-electron/renderer/components/NoteEditor/index.tsx
index a16861a..10afdee 100644
--- a/src/skrift-electron/renderer/components/NoteEditor/index.tsx
+++ b/src/skrift-electron/renderer/components/NoteEditor/index.tsx
@@ -15,6 +15,7 @@ import { mouseEventToMode } from "../../mouseEventToMode";
 import { nodeViews } from "./nodeViews";
 import { noteLinkPlugin } from "./noteLinkPlugin";
 import { buildInputRules } from "./inputrules";
+import { AutoFocus } from "./AutoFocus";
 
 interface Props {
   note: NoteWithLinks;
@@ -126,6 +127,7 @@ export const NoteEditor: React.FC<Props> = ({
         handleDOMEvents={handleDOMEvents}
         nodeViews={_nodeViews}
       >
+        <AutoFocus />
         <div ref={setMount} />
       </ProseMirror>
     </div>