Fix: 差分ツールを戻す

package.json

@@ -17,17 +17,13 @@
     "@faker-js/faker": "^8.0.2",
     "@monaco-editor/react": "^4.5.2",
     "@rsuite/icons": "^1.0.3",
-    "@uiw/codemirror-theme-vscode": "^4.21.19",
-    "@uiw/react-codemirror": "^4.21.19",
-    "@vercel/analytics": "^1.1.1",
     "dayjs": "^1.11.9",
     "iconv-lite": "^0.6.3",
     "iconv-urlencode": "^1.0.0",
     "next": "^14.0.3",
     "obtain-unicode": "^0.0.5",
     "punycode": "^2.1.1",
     "react": "^18.2.0",
-    "react-codemirror-merge": "^4.21.20",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.46.1",
     "rsuite": "^5.40.0",

src/components/pages/diff/Diff.tsx

@@ -1,45 +1,86 @@
 'use client';
 import React from 'react';
-import { FormProvider } from 'react-hook-form';
-import { Col, Grid, Panel, PanelGroup, Row, FlexboxGrid } from 'rsuite';
+import { Controller, FormProvider } from 'react-hook-form';
+import { ButtonToolbar, Col, Grid, Panel, PanelGroup, Row, FlexboxGrid } from 'rsuite';
 import { AppLayout } from '@/Layout/App';
 import { PageTitle } from '@/components/common/PageTitle';
 import { PanelHeader } from '@/components/common/PanelHeader';
 import { DiffEditor } from '@/components/pages/diff/DiffEditor';
 import { useDiff } from '@/components/pages/diff/useDiff';
-import { ButtonToolbar } from 'rsuite';
+import { Input } from '@/components/common/Form/Input';
 import { ClearButton } from '@/components/common/Form/ClearButton';
 
 export const Diff: React.FC = () => {
   const title = 'テキスト差分';
-  const { methods, original, modified, onClickOriginalReset } = useDiff();
+  const { methods, original, modified } = useDiff();
+  const INPUT_ROWS = 10;
 
   return (
     <FormProvider {...methods}>
       <AppLayout title={title}>
         <Grid fluid>
           <PageTitle title={title} />
+          <Row gutter={5}>
+            <Col xs={24} md={12}>
+              <PanelGroup bordered>
+                <Panel
+                  bordered
+                  header={
+                    <PanelHeader
+                      title="比較対象1"
+                      right={
+                        <ButtonToolbar>
+                          <ClearButton name="original" />
+                        </ButtonToolbar>
+                      }
+                    />
+                  }
+                >
+                  <Controller
+                    render={({ field }) => <Input as="textarea" rows={INPUT_ROWS} {...field} />}
+                    name="original"
+                    control={methods.control}
+                  />
+                </Panel>
+              </PanelGroup>
+            </Col>
+            <Col xs={24} md={12}>
+              <Panel
+                bordered
+                header={
+                  <PanelHeader
+                    title="比較対象2"
+                    right={
+                      <ButtonToolbar>
+                        <ClearButton name="modified" />
+                      </ButtonToolbar>
+                    }
+                  />
+                }
+              >
+                <Controller
+                  render={({ field }) => (
+                    <Input as="textarea" rows={INPUT_ROWS} {...field} ref={null} />
+                  )}
+                  name="modified"
+                  control={methods.control}
+                />
+              </Panel>
+            </Col>
+          </Row>
           <Row style={{ marginTop: '5px' }}>
             <Col xs={24}>
               <PanelGroup bordered>
                 <Panel collapsible={false} bordered header={<PanelHeader title="差分" />}>
-                  <Row>
-                    <Col xs={12}>
-                      <FlexboxGrid justify="end">
-                        <ButtonToolbar>
-                          {/*<ClearButton name="original" onClick={onClickOriginalReset} />*/}
-                        </ButtonToolbar>
-                      </FlexboxGrid>
-                    </Col>
-                    <Col xs={12}>
-                      <FlexboxGrid justify="end">
-                        <ButtonToolbar>{/*<ClearButton name="modified" />*/}</ButtonToolbar>
-                      </FlexboxGrid>
-                    </Col>
-                  </Row>
-                  <Row style={{ marginTop: '10px' }}>
-                    <DiffEditor original={original} modified={modified} />
-                  </Row>
+                  <DiffEditor
+                    original={original}
+                    modified={modified}
+                    width="100%"
+                    options={{
+                      fontSize: '14px',
+                      tabSize: 2,
+                    }}
+                  />
                 </Panel>
               </PanelGroup>
             </Col>

src/components/pages/diff/DiffEditor.tsx

@@ -1,35 +1,13 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import { useFormContext } from 'react-hook-form';
-import CodeMirrorMerge from 'react-codemirror-merge';
-import { EditorView } from 'codemirror';
-import { EditorState } from '@codemirror/state';
-import { vscodeDark } from '@uiw/codemirror-theme-vscode';
 import { DiffEditor as MonacoDiffEditor, DiffEditorProps } from '@monaco-editor/react';
 
 export const DiffEditor: React.FC<DiffEditorProps> = (props) => {
-  const { setValue } = useFormContext();
-  const Original = CodeMirrorMerge.Original;
-  const Modified = CodeMirrorMerge.Modified;
-
-  const onChangeOriginal = React.useCallback(
-    (value) => {
-      setValue('original', value);
-    },
-    [setValue],
-  );
-
-  const onChangeModified = React.useCallback(
-    (value) => {
-      setValue('modified', value);
-    },
-    [setValue],
-  );
-
   return (
-    <CodeMirrorMerge theme={vscodeDark} orientation="a-b">
-      <Original onChange={onChangeOriginal} value={props.original} />
-      <Modified onChange={onChangeModified} value={props.modified} extensions={[]} />
-    </CodeMirrorMerge>
+    <StyledWrapper>
+      <MonacoDiffEditor className="diff-editor" height="80vh" theme="vs-dark" {...props} />
+    </StyledWrapper>
   );
 };
+
+const StyledWrapper = styled.div``;