From 46466f1d19fc26ccfd5227c18aa079ee33cb8b6c Mon Sep 17 00:00:00 2001
From: Botho <1258870+elbotho@users.noreply.github.com>
Date: Tue, 19 Sep 2023 12:52:33 +0200
Subject: [PATCH 1/6] wip: cleanup

---
 src/serlo-editor/store/documents/saga.ts | 24 +++++++++++++++---------
 src/serlo-editor/store/focus/slice.ts    | 11 ++++++++---
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/serlo-editor/store/documents/saga.ts b/src/serlo-editor/store/documents/saga.ts
index d54d8547ca..2a0e6c6aac 100644
--- a/src/serlo-editor/store/documents/saga.ts
+++ b/src/serlo-editor/store/documents/saga.ts
@@ -42,7 +42,9 @@ function* changeDocumentSaga(action: ReturnType<typeof runChangeDocumentSaga>) {
     handleRecursiveInserts,
     (helpers: StoreDeserializeHelpers) => {
       return stateHandler.initial(document.state, helpers)
-    }
+    },
+    [],
+    true // shouldFocusInsertedDocument
   )
 
   const createChange = (state: unknown): ReversibleAction => {
@@ -118,7 +120,9 @@ function* changeDocumentSaga(action: ReturnType<typeof runChangeDocumentSaga>) {
           handleRecursiveInserts,
           (helpers: StoreDeserializeHelpers) => {
             return updater(currentDocument.state, helpers)
-          }
+          },
+          [],
+          true // shouldFocusInsertedDocument
         )
       payload.callback(resolveActions, pureResolveState)
       if (payload.resolve || payload.reject) {
@@ -164,7 +168,8 @@ function* replaceDocumentSaga(
   const [actions]: [ReversibleAction[], unknown] = yield call(
     handleRecursiveInserts,
     () => {},
-    pendingDocs
+    pendingDocs,
+    true // shouldFocusInsertedDocument
   )
 
   const reversibleAction: ReversibleAction = {
@@ -205,6 +210,7 @@ export function* handleRecursiveInserts(
     },
   }
   const result = act(helpers)
+
   for (let doc; (doc = pendingDocs.pop()); ) {
     const plugin = editorPlugins.getByType(doc.plugin)
     if (!plugin) {
@@ -212,12 +218,12 @@ export function* handleRecursiveInserts(
       console.warn(`Invalid plugin '${doc.plugin}'`)
       continue
     }
-    let state: unknown
-    if (doc.state === undefined) {
-      state = plugin.state.createInitialState(helpers)
-    } else {
-      state = plugin.state.deserialize(doc.state, helpers)
-    }
+
+    const state: unknown =
+      doc.state === undefined
+        ? plugin.state.createInitialState(helpers)
+        : plugin.state.deserialize(doc.state, helpers)
+
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     const currentDocument: ReturnType<typeof selectDocument> = yield select(
       selectDocument,
diff --git a/src/serlo-editor/store/focus/slice.ts b/src/serlo-editor/store/focus/slice.ts
index 471013ca20..8be41d292d 100644
--- a/src/serlo-editor/store/focus/slice.ts
+++ b/src/serlo-editor/store/focus/slice.ts
@@ -1,7 +1,10 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 
 import { findNextChildTreeNode, findPreviousChildTreeNode } from './helpers'
-import { type ChildTreeNode, isPureInsertDocumentAction } from '../documents'
+import {
+  type ChildTreeNode,
+  isInsertAndFocusDocumentAction,
+} from '../documents'
 import { State } from '../types'
 
 const initialState: State['focus'] = null as State['focus']
@@ -29,8 +32,10 @@ export const focusSlice = createSlice({
   extraReducers: (builder) => {
     builder.addMatcher(
       // Always focus the newly inserted document
-      isPureInsertDocumentAction,
-      (_state, action) => action.payload.id
+      isInsertAndFocusDocumentAction,
+      (_state, action) => {
+        return action.payload.id
+      }
     )
   },
 })

From d96630796f73df5f7a677fd934eb72b7adc3ad84 Mon Sep 17 00:00:00 2001
From: Vitomir Budimir <budimirvitomir@gmail.com>
Date: Tue, 19 Sep 2023 10:46:18 +0200
Subject: [PATCH 2/6] test(editor store): control focus of newly inserted
 plugin

---
 src/serlo-editor/store/documents/matchers.ts | 10 +++++-----
 src/serlo-editor/store/documents/saga.ts     |  9 +++++++--
 src/serlo-editor/store/documents/slice.ts    | 12 ++++++++++++
 src/serlo-editor/store/documents/types.ts    |  4 ++++
 4 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/serlo-editor/store/documents/matchers.ts b/src/serlo-editor/store/documents/matchers.ts
index 81f9d65271..fafc65d8d7 100644
--- a/src/serlo-editor/store/documents/matchers.ts
+++ b/src/serlo-editor/store/documents/matchers.ts
@@ -1,10 +1,10 @@
 import { AnyAction } from '@reduxjs/toolkit'
 
-import { pureInsertDocument } from './slice'
-import type { PureInsertDocumentAction } from './types'
+import { insertAndFocusDocument } from './slice'
+import type { InsertAndFocusDocumentAction } from './types'
 
-export function isPureInsertDocumentAction(
+export function isInsertAndFocusDocumentAction(
   action: AnyAction
-): action is PureInsertDocumentAction {
-  return action.type === pureInsertDocument.type
+): action is InsertAndFocusDocumentAction {
+  return action.type === insertAndFocusDocument.type
 }
diff --git a/src/serlo-editor/store/documents/saga.ts b/src/serlo-editor/store/documents/saga.ts
index 2a0e6c6aac..ece19fd265 100644
--- a/src/serlo-editor/store/documents/saga.ts
+++ b/src/serlo-editor/store/documents/saga.ts
@@ -9,6 +9,7 @@ import {
   pureRemoveDocument,
   pureReplaceDocument,
   runReplaceDocumentSaga,
+  insertAndFocusDocument,
 } from '.'
 import type { ReversibleAction } from '..'
 import {
@@ -196,7 +197,8 @@ interface ChannelAction {
 
 export function* handleRecursiveInserts(
   act: (helpers: StoreDeserializeHelpers) => unknown,
-  initialDocuments: { id: string; plugin: string; state?: unknown }[] = []
+  initialDocuments: { id: string; plugin: string; state?: unknown }[] = [],
+  shouldFocusInsertedDocument: boolean = false
 ) {
   const actions: ReversibleAction[] = []
   const pendingDocs: {
@@ -243,8 +245,11 @@ export function* handleRecursiveInserts(
         }),
       })
     } else {
+      const action = shouldFocusInsertedDocument
+        ? insertAndFocusDocument
+        : pureInsertDocument
       actions.push({
-        action: pureInsertDocument({
+        action: action({
           id: doc.id,
           plugin: doc.plugin,
           state,
diff --git a/src/serlo-editor/store/documents/slice.ts b/src/serlo-editor/store/documents/slice.ts
index 1d4b906061..85ec86cc19 100644
--- a/src/serlo-editor/store/documents/slice.ts
+++ b/src/serlo-editor/store/documents/slice.ts
@@ -1,6 +1,7 @@
 import { createSlice } from '@reduxjs/toolkit'
 
 import type {
+  InsertAndFocusDocumentAction,
   PureChangeDocumentAction,
   PureInsertDocumentAction,
   PureRemoveDocumentAction,
@@ -14,6 +15,16 @@ export const documentsSlice = createSlice({
   name: 'documents',
   initialState,
   reducers: {
+    // The insert action with a side effect:
+    // Focus the newly inserted document (see `focus` slice)
+    insertAndFocusDocument(state, action: InsertAndFocusDocumentAction) {
+      const { id, plugin: type, state: pluginState } = action.payload
+      state[id] = {
+        plugin: type,
+        state: pluginState,
+      }
+    },
+    // The pure insert action (no side effects)
     pureInsertDocument(state, action: PureInsertDocumentAction) {
       const { id, plugin: type, state: pluginState } = action.payload
       state[id] = {
@@ -40,6 +51,7 @@ export const documentsSlice = createSlice({
 })
 
 export const {
+  insertAndFocusDocument,
   pureInsertDocument,
   pureRemoveDocument,
   pureChangeDocument,
diff --git a/src/serlo-editor/store/documents/types.ts b/src/serlo-editor/store/documents/types.ts
index fefdf8d72a..4ad6d143e0 100644
--- a/src/serlo-editor/store/documents/types.ts
+++ b/src/serlo-editor/store/documents/types.ts
@@ -2,6 +2,10 @@ import { PayloadAction } from '@reduxjs/toolkit'
 
 import type { DocumentState } from '../types'
 
+export type InsertAndFocusDocumentAction = PayloadAction<
+  { id: string } & DocumentState
+>
+
 export type PureInsertDocumentAction = PayloadAction<
   { id: string } & DocumentState
 >

From 7cab91c0c4cc8406e96795b0932b4a9a9c132001 Mon Sep 17 00:00:00 2001
From: Botho <1258870+elbotho@users.noreply.github.com>
Date: Tue, 19 Sep 2023 13:03:30 +0200
Subject: [PATCH 3/6] autoFocus for all templates with a title

---
 src/serlo-editor/plugins/serlo-template-plugins/applet.tsx       | 1 +
 src/serlo-editor/plugins/serlo-template-plugins/article.tsx      | 1 +
 .../plugins/serlo-template-plugins/course/course-page.tsx        | 1 +
 .../plugins/serlo-template-plugins/course/course.tsx             | 1 +
 src/serlo-editor/plugins/serlo-template-plugins/event.tsx        | 1 +
 src/serlo-editor/plugins/serlo-template-plugins/page.tsx         | 1 +
 src/serlo-editor/plugins/serlo-template-plugins/taxonomy.tsx     | 1 +
 src/serlo-editor/plugins/serlo-template-plugins/video.tsx        | 1 +
 8 files changed, 8 insertions(+)

diff --git a/src/serlo-editor/plugins/serlo-template-plugins/applet.tsx b/src/serlo-editor/plugins/serlo-template-plugins/applet.tsx
index 2afae0ba6b..b3f7c624b0 100644
--- a/src/serlo-editor/plugins/serlo-template-plugins/applet.tsx
+++ b/src/serlo-editor/plugins/serlo-template-plugins/applet.tsx
@@ -75,6 +75,7 @@ function AppletTypeEditor(props: EditorPluginProps<AppletTypePluginState>) {
       <h1 className="serlo-h1 mt-20">
         {props.editable ? (
           <input
+            autoFocus
             className={headerInputClasses}
             placeholder={appletStrings.placeholder}
             value={title.value}
diff --git a/src/serlo-editor/plugins/serlo-template-plugins/article.tsx b/src/serlo-editor/plugins/serlo-template-plugins/article.tsx
index 896f339040..110c2acda2 100644
--- a/src/serlo-editor/plugins/serlo-template-plugins/article.tsx
+++ b/src/serlo-editor/plugins/serlo-template-plugins/article.tsx
@@ -64,6 +64,7 @@ function ArticleTypeEditor(props: EditorPluginProps<ArticleTypePluginState>) {
       <h1 className="serlo-h1 mt-20" itemProp="name">
         {props.editable ? (
           <input
+            autoFocus
             className={headerInputClasses}
             placeholder={articleStrings.title}
             value={title.value}
diff --git a/src/serlo-editor/plugins/serlo-template-plugins/course/course-page.tsx b/src/serlo-editor/plugins/serlo-template-plugins/course/course-page.tsx
index 27bd9791ce..5c23d76ed8 100644
--- a/src/serlo-editor/plugins/serlo-template-plugins/course/course-page.tsx
+++ b/src/serlo-editor/plugins/serlo-template-plugins/course/course-page.tsx
@@ -53,6 +53,7 @@ function CoursePageTypeEditor(
         <h1 className="serlo-h1 mt-12">
           {props.editable ? (
             <input
+              autoFocus
               className={headerInputClasses}
               placeholder={placeholder}
               value={title.value}
diff --git a/src/serlo-editor/plugins/serlo-template-plugins/course/course.tsx b/src/serlo-editor/plugins/serlo-template-plugins/course/course.tsx
index dad3016fc4..88bd6551aa 100644
--- a/src/serlo-editor/plugins/serlo-template-plugins/course/course.tsx
+++ b/src/serlo-editor/plugins/serlo-template-plugins/course/course.tsx
@@ -144,6 +144,7 @@ function CourseTypeEditor(props: EditorPluginProps<CourseTypePluginState>) {
         title={
           props.editable ? (
             <input
+              autoFocus
               className={tw`
                 -ml-2 mt-1 min-w-[70%] rounded-xl border-2 border-transparent
                 bg-editor-primary-100 px-2 py-0 focus:border-editor-primary focus:outline-none
diff --git a/src/serlo-editor/plugins/serlo-template-plugins/event.tsx b/src/serlo-editor/plugins/serlo-template-plugins/event.tsx
index 139a9e8431..3ce98513eb 100644
--- a/src/serlo-editor/plugins/serlo-template-plugins/event.tsx
+++ b/src/serlo-editor/plugins/serlo-template-plugins/event.tsx
@@ -50,6 +50,7 @@ function EventTypeEditor(props: EditorPluginProps<EventTypePluginState>) {
       <h1 className="serlo-h1 mt-20">
         {props.editable ? (
           <input
+            autoFocus
             className={headerInputClasses}
             placeholder={placeholder}
             value={title.value}
diff --git a/src/serlo-editor/plugins/serlo-template-plugins/page.tsx b/src/serlo-editor/plugins/serlo-template-plugins/page.tsx
index f1ea0dbf3f..ee46689fd6 100644
--- a/src/serlo-editor/plugins/serlo-template-plugins/page.tsx
+++ b/src/serlo-editor/plugins/serlo-template-plugins/page.tsx
@@ -37,6 +37,7 @@ function PageTypeEditor(props: EditorPluginProps<PageTypePluginState>) {
       <h1 className="serlo-h1" itemProp="name">
         {props.editable ? (
           <input
+            autoFocus
             className={headerInputClasses}
             placeholder={placeholder}
             value={title.value}
diff --git a/src/serlo-editor/plugins/serlo-template-plugins/taxonomy.tsx b/src/serlo-editor/plugins/serlo-template-plugins/taxonomy.tsx
index c7026deb4e..a7b7538481 100644
--- a/src/serlo-editor/plugins/serlo-template-plugins/taxonomy.tsx
+++ b/src/serlo-editor/plugins/serlo-template-plugins/taxonomy.tsx
@@ -38,6 +38,7 @@ function TaxonomyTypeEditor(props: EditorPluginProps<TaxonomyTypePluginState>) {
         <h1 className="serlo-h1" itemProp="name">
           {props.editable ? (
             <input
+              autoFocus
               className={headerInputClasses}
               placeholder={editorStrings.taxonomy.title}
               value={term.name.value}
diff --git a/src/serlo-editor/plugins/serlo-template-plugins/video.tsx b/src/serlo-editor/plugins/serlo-template-plugins/video.tsx
index 6c197c7558..ffdf734915 100644
--- a/src/serlo-editor/plugins/serlo-template-plugins/video.tsx
+++ b/src/serlo-editor/plugins/serlo-template-plugins/video.tsx
@@ -51,6 +51,7 @@ function VideoTypeEditor(props: EditorPluginProps<VideoTypePluginState>) {
       <h1 className="serlo-h1 mt-32">
         {props.editable ? (
           <input
+            autoFocus
             className={headerInputClasses}
             placeholder={editorStrings.plugins.video.titlePlaceholder}
             value={title.value}

From ae22fce0662b81745328ea8fbcebb5bb7e677b3e Mon Sep 17 00:00:00 2001
From: Botho <1258870+elbotho@users.noreply.github.com>
Date: Tue, 19 Sep 2023 19:15:06 +0200
Subject: [PATCH 4/6] improve tab order

---
 src/serlo-editor/plugins/image/editor.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/serlo-editor/plugins/image/editor.tsx b/src/serlo-editor/plugins/image/editor.tsx
index 3689c22f43..83f61364ba 100644
--- a/src/serlo-editor/plugins/image/editor.tsx
+++ b/src/serlo-editor/plugins/image/editor.tsx
@@ -60,6 +60,12 @@ export function ImageEditor(props: ImageProps) {
         />
       ) : null}
 
+      {hasFocus && showInlineImageUrl ? (
+        <div className="absolute left-side top-side z-[3]">
+          <InlineSrcControls {...props} />
+        </div>
+      ) : null}
+
       <div
         className="relative z-[2] [&_img]:min-h-[4rem]"
         data-qa="plugin-image-editor"
@@ -75,12 +81,6 @@ export function ImageEditor(props: ImageProps) {
           placeholder={renderPlaceholder()}
           forceNewTab
         />
-
-        {hasFocus && showInlineImageUrl ? (
-          <div className="absolute left-side top-side">
-            <InlineSrcControls {...props} />
-          </div>
-        ) : null}
       </div>
     </>
   )

From 79de334d58513f5558f828cf77e6644d0f387b1e Mon Sep 17 00:00:00 2001
From: Botho <1258870+elbotho@users.noreply.github.com>
Date: Tue, 19 Sep 2023 19:30:35 +0200
Subject: [PATCH 5/6] manual focus useEffect in image plugin

---
 .../image/controls/inline-src-controls.tsx    |  8 +++++-
 src/serlo-editor/plugins/image/editor.tsx     | 27 ++++++++++++++-----
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/serlo-editor/plugins/image/controls/inline-src-controls.tsx b/src/serlo-editor/plugins/image/controls/inline-src-controls.tsx
index a2fe08fe02..bac3db8555 100644
--- a/src/serlo-editor/plugins/image/controls/inline-src-controls.tsx
+++ b/src/serlo-editor/plugins/image/controls/inline-src-controls.tsx
@@ -1,9 +1,14 @@
+import { RefObject } from 'react'
+
 import type { ImageProps } from '..'
 import { useEditorStrings } from '@/contexts/logged-in-data-context'
 import { tw } from '@/helper/tw'
 import { isTempFile } from '@/serlo-editor/plugin'
 
-export function InlineSrcControls({ state }: ImageProps) {
+export function InlineSrcControls({
+  state,
+  urlInputRef,
+}: ImageProps & { urlInputRef: RefObject<HTMLInputElement> }) {
   const imageStrings = useEditorStrings().plugins.image
   const { src } = state
 
@@ -18,6 +23,7 @@ export function InlineSrcControls({ state }: ImageProps) {
       <label>
         <b>{imageStrings.imageUrl}</b>
         <input
+          ref={urlInputRef}
           placeholder={placeholder}
           value={!isTempFile(src.value) ? src.value : ''}
           disabled={isTempFile(src.value) && !src.value.failed}
diff --git a/src/serlo-editor/plugins/image/editor.tsx b/src/serlo-editor/plugins/image/editor.tsx
index 83f61364ba..59745a24c4 100644
--- a/src/serlo-editor/plugins/image/editor.tsx
+++ b/src/serlo-editor/plugins/image/editor.tsx
@@ -1,5 +1,5 @@
 import { faImages } from '@fortawesome/free-solid-svg-icons'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 import type { ImageProps } from '.'
 import { InlineSrcControls } from './controls/inline-src-controls'
@@ -38,6 +38,8 @@ export function ImageEditor(props: ImageProps) {
   // eslint-disable-next-line @typescript-eslint/no-base-to-string
   const src = state.src.value.toString()
 
+  const urlInputRef = useRef<HTMLInputElement>(null)
+
   useEffect(() => {
     if (editable && !state.caption.defined) {
       state.caption.create({ plugin: EditorPluginType.Text })
@@ -50,6 +52,17 @@ export function ImageEditor(props: ImageProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editable, focused])
 
+  useEffect(() => {
+    // manually set focus to url after creating plugin
+    if (editable && focused) {
+      setTimeout(() => {
+        urlInputRef.current?.focus()
+      })
+    }
+    // only on first mount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
   return (
     <>
       {hasFocus ? (
@@ -60,16 +73,16 @@ export function ImageEditor(props: ImageProps) {
         />
       ) : null}
 
-      {hasFocus && showInlineImageUrl ? (
-        <div className="absolute left-side top-side z-[3]">
-          <InlineSrcControls {...props} />
-        </div>
-      ) : null}
-
       <div
         className="relative z-[2] [&_img]:min-h-[4rem]"
         data-qa="plugin-image-editor"
       >
+        {hasFocus && showInlineImageUrl ? (
+          <div className="absolute left-side top-side z-[3]">
+            <InlineSrcControls {...props} urlInputRef={urlInputRef} />
+          </div>
+        ) : null}
+
         <ImageRenderer
           image={{
             src,

From b27db93aa953e197e377bb3624cc1e73192c472c Mon Sep 17 00:00:00 2001
From: Botho <1258870+elbotho@users.noreply.github.com>
Date: Tue, 19 Sep 2023 20:07:08 +0200
Subject: [PATCH 6/6] improve plugin focus for exercises, coursePages

---
 src/serlo-editor/core/sub-document/editor.tsx |  4 ++++
 src/serlo-editor/plugins/anchor/editor.tsx    |  1 +
 .../course/course-page.tsx                    | 19 ++++++++++++++++++-
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/serlo-editor/core/sub-document/editor.tsx b/src/serlo-editor/core/sub-document/editor.tsx
index 632ff3d35e..38036bb533 100644
--- a/src/serlo-editor/core/sub-document/editor.tsx
+++ b/src/serlo-editor/core/sub-document/editor.tsx
@@ -37,6 +37,10 @@ export function SubDocumentEditor({ id, pluginProps }: SubDocumentProps) {
           const parent = selectChildTreeOfParent(store.getState(), id)
           if (parent) dispatch(focus(parent.id))
         } else {
+          // prevents parents from stealing focus of children
+          if (document?.plugin === 'exercise') return
+
+          // default focus dispatch
           dispatch(focus(id))
         }
       }
diff --git a/src/serlo-editor/plugins/anchor/editor.tsx b/src/serlo-editor/plugins/anchor/editor.tsx
index d899a824d8..ed5f6fa6ee 100644
--- a/src/serlo-editor/plugins/anchor/editor.tsx
+++ b/src/serlo-editor/plugins/anchor/editor.tsx
@@ -25,6 +25,7 @@ export const AnchorEditor = (props: AnchorProps) => {
             <label className="serlo-tooltip-trigger">
               <EditorTooltip text={editorStrings.plugins.anchor.anchorId} />
               <input
+                autoFocus
                 placeholder={editorStrings.plugins.anchor.identifier}
                 value={state.value}
                 onChange={(e) => {
diff --git a/src/serlo-editor/plugins/serlo-template-plugins/course/course-page.tsx b/src/serlo-editor/plugins/serlo-template-plugins/course/course-page.tsx
index 5c23d76ed8..e315ebc550 100644
--- a/src/serlo-editor/plugins/serlo-template-plugins/course/course-page.tsx
+++ b/src/serlo-editor/plugins/serlo-template-plugins/course/course-page.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 
 import {
   entity,
@@ -13,6 +13,7 @@ import {
   type EditorPluginProps,
   string,
 } from '@/serlo-editor/plugin'
+import { focus, useAppDispatch } from '@/serlo-editor/store'
 
 export const coursePageTypeState = entityType(
   {
@@ -39,12 +40,27 @@ function CoursePageTypeEditor(
   props: EditorPluginProps<CoursePageTypePluginState, { skipControls: boolean }>
 ) {
   const { title, content, icon } = props.state
+  const titleRef = useRef<HTMLInputElement>(null)
+
+  const dispatch = useAppDispatch()
 
   useEffect(() => {
     // setting not used any more, reset to explanation for now
     if (icon.value !== 'explanation') icon.set('explanation')
   })
 
+  useEffect(() => {
+    if (props.editable) {
+      // focus on title, remove focus from content
+      setTimeout(() => {
+        dispatch(focus(null))
+        titleRef.current?.focus()
+      })
+    }
+    // only after creating plugin
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
   const placeholder = useEditorStrings().templatePlugins.coursePage.title
 
   return (
@@ -53,6 +69,7 @@ function CoursePageTypeEditor(
         <h1 className="serlo-h1 mt-12">
           {props.editable ? (
             <input
+              ref={titleRef}
               autoFocus
               className={headerInputClasses}
               placeholder={placeholder}