Merge pull request #8015 from weseek/feat/new-editor-set-cursor

feat(editor): setCursor 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/package.json

@@ -32,6 +32,7 @@
     "bootstrap": "^5.3.1",
     "codemirror": "^6.0.1",
     "eslint-plugin-react-refresh": "^0.4.1",
+    "react-hook-form": "^7.45.4",
     "swr": "^2.0.3"
   }
 }

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

@@ -1,8 +1,10 @@
 import { useCallback } from 'react';
 
+import { useForm } from 'react-hook-form';
+
 import { useCodeMirrorEditorMain } from '../../stores';
 
-export const PlaygroundController = (): JSX.Element => {
+export const InitEditorValueRow = (): JSX.Element => {
 
   const { data } = useCodeMirrorEditorMain();
 
@@ -12,18 +14,64 @@ export const PlaygroundController = (): JSX.Element => {
   }, [initDoc]);
 
   return (
-    <>
-      <div className="row">
-        <div className="column">
-          <button
-            type="button"
-            className="btn btn-outline-secondary"
-            onClick={() => initEditorValue()}
-          >
-            Initialize editor value
-          </button>
+    <div className="row">
+      <div className="col">
+        <button
+          type="button"
+          className="btn btn-outline-secondary"
+          onClick={() => initEditorValue()}
+        >
+          Initialize editor value
+        </button>
+      </div>
+    </div>
+  );
+};
+
+type SetCaretLineRowFormData = {
+  lineNumber: number | string;
+};
+
+export const SetCaretLineRow = (): JSX.Element => {
+
+  const { data } = useCodeMirrorEditorMain();
+  const { register, handleSubmit } = useForm<SetCaretLineRowFormData>({
+    defaultValues: {
+      lineNumber: 1,
+    },
+  });
+
+  const setCaretLine = data?.setCaretLine;
+  const onSubmit = handleSubmit((submitData) => {
+    const lineNumber = Number(submitData.lineNumber) || 1;
+    setCaretLine?.(lineNumber);
+  });
+
+  return (
+    <form className="row mt-3" onSubmit={onSubmit}>
+      <div className="col">
+        <div className="input-group">
+          <input
+            {...register('lineNumber')}
+            type="number"
+            className="form-control"
+            placeholder="Input line number"
+            aria-label="line number"
+            aria-describedby="button-set-cursor"
+          />
+          <button type="submit" className="btn btn-outline-secondary" id="button-set-cursor">Set the cursor</button>
         </div>
       </div>
-    </>
+    </form>
+
+  );
+};
+
+export const PlaygroundController = (): JSX.Element => {
+  return (
+    <div className="container">
+      <InitEditorValueRow />
+      <SetCaretLineRow />
+    </div>
   );
 };

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

@@ -12,6 +12,8 @@ export type UseCodeMirrorEditor = UseCodeMirror;
 type UseCodeMirrorEditorUtils = {
   initState: (config?: EditorStateConfig) => void,
   initDoc: (doc?: string) => void,
+  focus: () => void,
+  setCaretLine: (lineNumber?: number) => void,
 }
 
 export type UseCodeMirrorEditorResponse = UseCodeMirrorEditorStates & UseCodeMirrorEditorUtils;
@@ -56,6 +58,28 @@ export const useCodeMirrorEditor = (props?: UseCodeMirrorEditor): UseCodeMirrorE
     initState({ doc });
   }, [initState]);
 
+  // implement focus method
+  const focus = useCallback((): void => {
+    view?.focus();
+  }, [view]);
+
+  // implement setCaretLine method
+  const setCaretLine = useCallback((lineNumber?: number): void => {
+    if (view == null) {
+      return;
+    }
+
+    const posOfLineEnd = view.state.doc.line(lineNumber ?? 1).to;
+    view.dispatch({
+      selection: {
+        anchor: posOfLineEnd,
+        head: posOfLineEnd,
+      },
+    });
+    // focus
+    view.focus();
+  }, [view]);
+
   useEffect(() => {
     if (props?.container != null) {
       setContainer(props.container);
@@ -66,5 +90,7 @@ export const useCodeMirrorEditor = (props?: UseCodeMirrorEditor): UseCodeMirrorE
     ...codemirror,
     initState,
     initDoc,
+    focus,
+    setCaretLine,
   };
 };

yarn.lock

@@ -14333,6 +14333,11 @@ react-fast-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
   integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
 
+react-hook-form@^7.45.4:
+  version "7.45.4"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.45.4.tgz#73d228b704026ae95d7e5f7b207a681b173ec62a"
+  integrity sha512-HGDV1JOOBPZj10LB3+OZgfDBTn+IeEsNOKiq/cxbQAIbKaiJUe/KV8DBUzsx0Gx/7IG/orWqRRm736JwOfUSWQ==
+
 react-hotkeys@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/react-hotkeys/-/react-hotkeys-2.0.0.tgz#a7719c7340cbba888b0e9184f806a9ec0ac2c53f"