Merge pull request #2905 from serlo/2893-editor-use-autofocus-attribu…

…te-in-templates-and-modals

feat(editor): improve autofocus

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))
         }
       }

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) => {

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}

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 ? (
@@ -64,6 +77,12 @@ export function ImageEditor(props: ImageProps) {
         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,
@@ -75,12 +94,6 @@ export function ImageEditor(props: ImageProps) {
           placeholder={renderPlaceholder()}
           forceNewTab
         />
-
-        {hasFocus && showInlineImageUrl ? (
-          <div className="absolute left-side top-side">
-            <InlineSrcControls {...props} />
-          </div>
-        ) : null}
       </div>
     </>
   )

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}

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}

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,8 @@ function CoursePageTypeEditor(
         <h1 className="serlo-h1 mt-12">
           {props.editable ? (
             <input
+              ref={titleRef}
+              autoFocus
               className={headerInputClasses}
               placeholder={placeholder}
               value={title.value}

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

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}

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}

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}

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}

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
 }

src/serlo-editor/store/documents/saga.ts

@@ -9,6 +9,7 @@ import {
   pureRemoveDocument,
   pureReplaceDocument,
   runReplaceDocumentSaga,
+  insertAndFocusDocument,
 } from '.'
 import type { ReversibleAction } from '..'
 import {
@@ -42,7 +43,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 +121,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 +169,8 @@ function* replaceDocumentSaga(
   const [actions]: [ReversibleAction[], unknown] = yield call(
     handleRecursiveInserts,
     () => {},
-    pendingDocs
+    pendingDocs,
+    true // shouldFocusInsertedDocument
   )
 
   const reversibleAction: ReversibleAction = {
@@ -191,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: {
@@ -205,19 +212,20 @@ export function* handleRecursiveInserts(
     },
   }
   const result = act(helpers)
+
   for (let doc; (doc = pendingDocs.pop()); ) {
     const plugin = editorPlugins.getByType(doc.plugin)
     if (!plugin) {
       // eslint-disable-next-line no-console
       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,
@@ -237,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,

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,

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
 >

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
+      }
     )
   },
 })