refactor PlaygroundController

packages/editor/src/client/components-internal/playground/PlaygroundController.tsx

@@ -1,107 +1,11 @@
-import { useCallback } from 'react';
-
-import { useForm } from 'react-hook-form';
-
 import type { EditorTheme, KeyMapMode, PasteMode } from '../../../consts';
-import {
-  GlobalCodeMirrorEditorKey,
-  AllEditorTheme, AllKeyMap,
-  AllPasteMode,
-} from '../../../consts';
-import { useCodeMirrorEditorIsolated } from '../../stores/codemirror-editor';
-
-export const InitEditorValueRow = (): JSX.Element => {
-
-  const { data } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
-
-  const initDoc = data?.initDoc;
-  const initEditorValue = useCallback(() => {
-    initDoc?.('# Header\n\n- foo\n-bar\n');
-  }, [initDoc]);
-
-  return (
-    <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 } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
-  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>
-
-  );
-};
-
-
-type OutlineSecondaryButtonsProps<V> = {
-    update: (value: V) => void,
-    items: V[],
-}
-
-const OutlineSecondaryButtons = <V extends { toString: () => string }, >(
-  props: OutlineSecondaryButtonsProps<V>,
-): JSX.Element => {
-  const { update, items } = props;
-  return (
-    <div className="d-flex flex-wrap gap-1">
-      { items.map((item) => {
-        return (
-          <button
-            type="button"
-            className="btn btn-outline-secondary"
-            onClick={() => {
-              update(item);
-            }}
-          >
-            {item.toString()}
-          </button>
-        );
-      }) }
-    </div>
-  );
-};
 
+import { InitEditorValueRow } from './controller/InitEditorValueRow';
+import { KeymapControl } from './controller/KeymapControl';
+import { PasteModeControl } from './controller/PasteModeControl';
+import { SetCaretLineRow } from './controller/SetCaretLineRow';
+import { ThemeControl } from './controller/ThemeControl';
 
 type PlaygroundControllerProps = {
   setEditorTheme: (value: EditorTheme) => void
@@ -114,30 +18,10 @@ export const PlaygroundController = (props: PlaygroundControllerProps): JSX.Elem
   return (
     <div className="container">
       <InitEditorValueRow />
-
       <SetCaretLineRow />
-
-      <div className="row mt-5">
-        <h2>Themes</h2>
-        <div className="col">
-          <OutlineSecondaryButtons<EditorTheme> update={setEditorTheme} items={AllEditorTheme} />
-        </div>
-      </div>
-
-      <div className="row mt-5">
-        <h2>Keymaps</h2>
-        <div className="col">
-          <OutlineSecondaryButtons<KeyMapMode> update={setEditorKeymap} items={AllKeyMap} />
-        </div>
-      </div>
-
-      <div className="row mt-5">
-        <h2>Paste mode</h2>
-        <div className="col">
-          <OutlineSecondaryButtons<PasteMode> update={setEditorPaste} items={AllPasteMode} />
-        </div>
-      </div>
-
+      <ThemeControl setEditorTheme={setEditorTheme} />
+      <KeymapControl setEditorKeymap={setEditorKeymap} />
+      <PasteModeControl setEditorPaste={setEditorPaste} />
     </div>
   );
 };

packages/editor/src/client/components-internal/playground/controller/InitEditorValueRow.tsx

@@ -0,0 +1,27 @@
+import { useCallback } from 'react';
+
+import { GlobalCodeMirrorEditorKey } from '../../../../consts';
+import { useCodeMirrorEditorIsolated } from '../../../stores/codemirror-editor';
+
+export const InitEditorValueRow = (): JSX.Element => {
+  const { data } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
+
+  const initDoc = data?.initDoc;
+  const initEditorValue = useCallback(() => {
+    initDoc?.('# Header\n\n- foo\n-bar\n');
+  }, [initDoc]);
+
+  return (
+    <div className="row">
+      <div className="col">
+        <button
+          type="button"
+          className="btn btn-outline-secondary"
+          onClick={() => initEditorValue()}
+        >
+          Initialize editor value
+        </button>
+      </div>
+    </div>
+  );
+};

packages/editor/src/client/components-internal/playground/controller/KeymapControl.tsx

@@ -0,0 +1,19 @@
+import type { KeyMapMode } from '../../../../consts';
+import { AllKeyMap } from '../../../../consts';
+
+import { OutlineSecondaryButtons } from './OutlineSecondaryButtons';
+
+type KeymapControlProps = {
+  setEditorKeymap: (value: KeyMapMode) => void;
+};
+
+export const KeymapControl = ({ setEditorKeymap }: KeymapControlProps): JSX.Element => {
+  return (
+    <div className="row mt-5">
+      <h2>Keymaps</h2>
+      <div className="col">
+        <OutlineSecondaryButtons<KeyMapMode> update={setEditorKeymap} items={AllKeyMap} />
+      </div>
+    </div>
+  );
+};

packages/editor/src/client/components-internal/playground/controller/OutlineSecondaryButtons.tsx

@@ -0,0 +1,24 @@
+type OutlineSecondaryButtonsProps<V> = {
+  update: (value: V) => void,
+  items: V[],
+}
+
+export const OutlineSecondaryButtons = <V extends { toString: () => string }, >(
+  props: OutlineSecondaryButtonsProps<V>,
+): JSX.Element => {
+  const { update, items } = props;
+  return (
+    <div className="d-flex flex-wrap gap-1">
+      { items.map(item => (
+        <button
+          key={item.toString()}
+          type="button"
+          className="btn btn-outline-secondary"
+          onClick={() => update(item)}
+        >
+          {item.toString()}
+        </button>
+      )) }
+    </div>
+  );
+};

packages/editor/src/client/components-internal/playground/controller/PasteModeControl.tsx

@@ -0,0 +1,19 @@
+import type { PasteMode } from '../../../../consts';
+import { AllPasteMode } from '../../../../consts';
+
+import { OutlineSecondaryButtons } from './OutlineSecondaryButtons';
+
+type PasteModeControlProps = {
+  setEditorPaste: (value: PasteMode) => void;
+};
+
+export const PasteModeControl = ({ setEditorPaste }: PasteModeControlProps): JSX.Element => {
+  return (
+    <div className="row mt-5">
+      <h2>Paste mode</h2>
+      <div className="col">
+        <OutlineSecondaryButtons<PasteMode> update={setEditorPaste} items={AllPasteMode} />
+      </div>
+    </div>
+  );
+};

packages/editor/src/client/components-internal/playground/controller/SetCaretLineRow.tsx

@@ -0,0 +1,41 @@
+import { useForm } from 'react-hook-form';
+
+import { GlobalCodeMirrorEditorKey } from '../../../../consts';
+import { useCodeMirrorEditorIsolated } from '../../../stores/codemirror-editor';
+
+type SetCaretLineRowFormData = {
+  lineNumber: number | string;
+};
+
+export const SetCaretLineRow = (): JSX.Element => {
+  const { data } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
+  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>
+  );
+};

packages/editor/src/client/components-internal/playground/controller/ThemeControl.tsx

@@ -0,0 +1,19 @@
+import type { EditorTheme } from '../../../../consts';
+import { AllEditorTheme } from '../../../../consts';
+
+import { OutlineSecondaryButtons } from './OutlineSecondaryButtons';
+
+type ThemeControlProps = {
+  setEditorTheme: (value: EditorTheme) => void;
+};
+
+export const ThemeControl = ({ setEditorTheme }: ThemeControlProps): JSX.Element => {
+  return (
+    <div className="row mt-5">
+      <h2>Themes</h2>
+      <div className="col">
+        <OutlineSecondaryButtons<EditorTheme> update={setEditorTheme} items={AllEditorTheme} />
+      </div>
+    </div>
+  );
+};