use new setCaretLine method

apps/app/src/components/PageEditor/PageEditor.tsx

@@ -1,5 +1,5 @@
 import React, {
-  useCallback, useEffect, useMemo, useRef, useState,
+  useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState,
 } from 'react';
 
 import EventEmitter from 'events';
@@ -116,7 +116,7 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
   const { mutate: mutateRemoteRevisionLastUpdateUser } = useRemoteRevisionLastUpdateUser();
 
   const { data: codemirrorEditor } = useCodeMirrorEditorMain(codeMirrorEditorContainerRef.current);
-  const { initDoc } = codemirrorEditor ?? {};
+  const { initDoc, focus: focusToEditor, setCaretLine } = codemirrorEditor ?? {};
 
   const { data: rendererOptions } = usePreviewOptions();
   const { mutate: mutateIsEnabledUnsavedWarning } = useIsEnabledUnsavedWarning();
@@ -492,21 +492,14 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
 
   // initial caret line
   useEffect(() => {
-    // TODO: implement
-    // refs: https://redmine.weseek.co.jp/issues/126516
-    // if (editorRef.current != null) {
-    //   editorRef.current.setCaretLine(0);
-    // }
-  }, []);
+    setCaretLine?.();
+  }, [setCaretLine]);
 
   // set handler to set caret line
   useEffect(() => {
     const handler = (line) => {
-      // TODO: implement
-      // refs: https://redmine.weseek.co.jp/issues/126516
-      // if (editorRef.current != null) {
-      //   editorRef.current.setCaretLine(line);
-      // }
+      setCaretLine?.(line);
+
       if (previewRef.current != null) {
         scrollSyncHelper.scrollPreview(previewRef.current, line);
       }
@@ -516,7 +509,7 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
     return function cleanup() {
       globalEmitter.removeListener('setCaretLine', handler);
     };
-  }, []);
+  }, [setCaretLine]);
 
   // set handler to save and return to View
   useEffect(() => {
@@ -528,13 +521,11 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
   }, [saveAndReturnToViewHandler]);
 
   // set handler to focus
-  useEffect(() => {
-    // TODO: implement
-    // refs: https://redmine.weseek.co.jp/issues/126516
-    // if (editorRef.current != null && editorMode === EditorMode.Editor) {
-    //   editorRef.current.forceToFocus();
-    // }
-  }, [editorMode]);
+  useLayoutEffect(() => {
+    if (editorMode === EditorMode.Editor) {
+      focusToEditor?.();
+    }
+  }, [editorMode, focusToEditor]);
 
   // Detect indent size from contents (only when users are allowed to change it)
   useEffect(() => {
@@ -556,11 +547,8 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
   // UnControlled CodeMirror value does not reset, so explicitly set the value to initialValue
   const onRouterChangeComplete = useCallback(() => {
     initDoc?.(initialValue);
-
-    // TODO: implement
-    // refs: https://redmine.weseek.co.jp/issues/126516
-    // editorRef.current?.setCaretLine(0);
-  }, [initDoc, initialValue]);
+    setCaretLine?.();
+  }, [initDoc, initialValue, setCaretLine]);
 
   useEffect(() => {
     router.events.on('routeChangeComplete', onRouterChangeComplete);

packages/editor/src/components/playground/PlaygroundController.tsx

@@ -28,23 +28,23 @@ export const InitEditorValueRow = (): JSX.Element => {
   );
 };
 
-type SetCursorRowFormData = {
+type SetCaretLineRowFormData = {
   lineNumber: number | string;
 };
 
-export const SetCursorRow = (): JSX.Element => {
+export const SetCaretLineRow = (): JSX.Element => {
 
   const { data } = useCodeMirrorEditorMain();
-  const { register, handleSubmit } = useForm<SetCursorRowFormData>({
+  const { register, handleSubmit } = useForm<SetCaretLineRowFormData>({
     defaultValues: {
       lineNumber: 1,
     },
   });
 
-  const setCursor = data?.setCursor;
+  const setCaretLine = data?.setCaretLine;
   const onSubmit = handleSubmit((submitData) => {
     const lineNumber = Number(submitData.lineNumber) || 1;
-    setCursor?.(lineNumber);
+    setCaretLine?.(lineNumber);
   });
 
   return (
@@ -71,7 +71,7 @@ export const PlaygroundController = (): JSX.Element => {
   return (
     <div className="container">
       <InitEditorValueRow />
-      <SetCursorRow />
+      <SetCaretLineRow />
     </div>
   );
 };

packages/editor/src/services/codemirror-editor/use-codemirror-editor.ts

@@ -12,7 +12,8 @@ export type UseCodeMirrorEditor = UseCodeMirror;
 type UseCodeMirrorEditorUtils = {
   initState: (config?: EditorStateConfig) => void,
   initDoc: (doc?: string) => void,
-  setCursor: (lineNumber?: number) => void,
+  focus: () => void,
+  setCaretLine: (lineNumber?: number) => void,
 }
 
 export type UseCodeMirrorEditorResponse = UseCodeMirrorEditorStates & UseCodeMirrorEditorUtils;
@@ -57,8 +58,13 @@ export const useCodeMirrorEditor = (props?: UseCodeMirrorEditor): UseCodeMirrorE
     initState({ doc });
   }, [initState]);
 
-  // implement setCursor method
-  const setCursor = useCallback((lineNumber?: number): void => {
+  // implement focus method
+  const focus = useCallback((): void => {
+    view?.focus();
+  }, [view]);
+
+  // implement setCaretLine method
+  const setCaretLine = useCallback((lineNumber?: number): void => {
     if (view == null) {
       return;
     }
@@ -72,7 +78,6 @@ export const useCodeMirrorEditor = (props?: UseCodeMirrorEditor): UseCodeMirrorE
     });
     // focus
     view.focus();
-
   }, [view]);
 
   useEffect(() => {
@@ -85,6 +90,7 @@ export const useCodeMirrorEditor = (props?: UseCodeMirrorEditor): UseCodeMirrorE
     ...codemirror,
     initState,
     initDoc,
-    setCursor,
+    focus,
+    setCaretLine,
   };
 };