fix: editor focus error.

Author: PttCodingMan

frontend/src/components/Editor/Editor.jsx

@@ -382,13 +382,14 @@ class WikilinkMenu {
 
 const wikilinkPluginKey = new PluginKey('wikilink-autocomplete')
 
-const Editor = forwardRef(function Editor({ defaultValue = '', onChange, onDrawioOpen, onMediaPickerOpen }, ref) {
+const Editor = forwardRef(function Editor({ defaultValue = '', onChange, onDrawioOpen, onMediaPickerOpen, onTabOut }, ref) {
   const { t } = useTranslation()
   const editorRef = useRef(null)
   const containerRef = useRef(null)
   const onChangeRef = useRef(onChange)
   const drawioHandlerRef = useRef(onDrawioOpen)
   const mediaHandlerRef = useRef(onMediaPickerOpen)
+  const onTabOutRef = useRef(onTabOut)
   const editorViewRef = useRef(null)
   // The slash menu and wikilink menu both render plain DOM (not React),
   // so they cannot read t() from context. Snapshot translated strings into
@@ -412,13 +413,22 @@ const Editor = forwardRef(function Editor({ defaultValue = '', onChange, onDrawi
     mediaHandlerRef.current = onMediaPickerOpen || null
   }, [onMediaPickerOpen])
 
+  useEffect(() => {
+    onTabOutRef.current = onTabOut || null
+  }, [onTabOut])
+
   useImperativeHandle(ref, () => ({
     insertText(text) {
       const view = editorViewRef.current
       if (!view) return
       const { state, dispatch } = view
       const pos = state.selection.from
       dispatch(state.tr.insertText(text, pos))
+    },
+    focus() {
+      const view = editorViewRef.current
+      if (!view) return
+      view.focus()
     }
   }), [])
 
@@ -478,6 +488,28 @@ const Editor = forwardRef(function Editor({ defaultValue = '', onChange, onDrawi
       })
     })
 
+    const tabOutPlugin = $prose(() => {
+      return new Plugin({
+        props: {
+          handleKeyDown(view, event) {
+            if (event.key !== 'Tab' || event.shiftKey) return false
+            if (event.isComposing || event.keyCode === 229) return false
+            if (!onTabOutRef.current) return false
+            const { $from } = view.state.selection
+            for (let depth = $from.depth; depth >= 0; depth--) {
+              const name = $from.node(depth).type.name
+              if (['list_item', 'bullet_list', 'ordered_list', 'code_block', 'table'].includes(name)) {
+                return false
+              }
+            }
+            event.preventDefault()
+            onTabOutRef.current()
+            return true
+          },
+        },
+      })
+    })
+
     const init = async () => {
       const editor = await MilkdownEditor.make()
         .config((ctx) => {
@@ -508,6 +540,7 @@ const Editor = forwardRef(function Editor({ defaultValue = '', onChange, onDrawi
         .use(slash)
         .use(wikilink)
         .use(wikilinkPlugin)
+        .use(tabOutPlugin)
         .create()
 
       // StrictMode: if cleanup ran while we were awaiting, destroy immediately

frontend/src/pages/NewPage.jsx

@@ -52,6 +52,10 @@ export default function NewPage() {
   const [error, setError] = useState('')
   const [editorKey, setEditorKey] = useState(0)
   const editorRef = useRef(null)
+  const createBtnRef = useRef(null)
+  const handleEditorTabOut = useCallback(() => {
+    createBtnRef.current?.focus()
+  }, [])
   const dirty = !saved && !showTemplates && (title.trim() !== '' || content.trim() !== '')
 
   // Draw.io state
@@ -269,6 +273,12 @@ export default function NewPage() {
           type="text"
           value={title}
           onChange={(e) => setTitle(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Tab' && !e.shiftKey) {
+              e.preventDefault()
+              editorRef.current?.focus()
+            }
+          }}
           className="text-2xl font-bold text-text bg-transparent border-none outline-none flex-1 mr-4"
           placeholder={t('newPage.titlePlaceholder')}
           autoFocus
@@ -281,6 +291,7 @@ export default function NewPage() {
             {t('newPage.cancel')}
           </button>
           <button
+            ref={createBtnRef}
             onClick={handleSave}
             disabled={saving || !title.trim()}
             className="px-3 py-1.5 text-sm bg-primary text-primary-text rounded-lg hover:bg-primary-hover disabled:opacity-50"
@@ -324,6 +335,7 @@ export default function NewPage() {
           onChange={setContent}
           onDrawioOpen={handleDrawioOpen}
           onMediaPickerOpen={handleMediaPickerOpen}
+          onTabOut={handleEditorTabOut}
         />
       </div>
 

frontend/src/pages/PageEdit.jsx

@@ -29,6 +29,10 @@ export default function PageEdit() {
   const [original, setOriginal] = useState({ title: '', content: '' })
   const baseVersionRef = useRef(null)
   const editorRef = useRef(null)
+  const saveBtnRef = useRef(null)
+  const handleEditorTabOut = useCallback(() => {
+    saveBtnRef.current?.focus()
+  }, [])
 
   const dirty = !!page && (title !== original.title || content !== original.content)
 
@@ -261,6 +265,12 @@ export default function PageEdit() {
           type="text"
           value={title}
           onChange={(e) => setTitle(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Tab' && !e.shiftKey) {
+              e.preventDefault()
+              editorRef.current?.focus()
+            }
+          }}
           className="text-2xl font-bold text-text bg-transparent border-none outline-none w-full"
           placeholder={t('pageEdit.titlePlaceholder')}
         />
@@ -316,6 +326,7 @@ export default function PageEdit() {
               onChange={setContent}
               onDrawioOpen={handleDrawioOpen}
               onMediaPickerOpen={handleMediaPickerOpen}
+              onTabOut={handleEditorTabOut}
             />
           </div>
 
@@ -388,6 +399,7 @@ export default function PageEdit() {
           {t('pageEdit.cancel')}
         </button>
         <button
+          ref={saveBtnRef}
           onClick={handleSave}
           disabled={saving}
           className="fab-btn fab-btn-primary"