エディターを改善 (#27)

su-u · Dec 4, 2023 · 9790070 · 9790070
2 parents e74caca + f385695
commit 9790070
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 24 deletions.
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "release-patch": "yarn version --patch"
   },
   "dependencies": {
+    "@codemirror/lang-json": "^6.0.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@faker-js/faker": "^8.0.2",

diff --git a/src/app/base64/page.tsx b/src/app/base64/page.tsx
@@ -5,8 +5,8 @@ import { Grid, Row, Col, Panel, ButtonToolbar } from 'rsuite';
 import { AppLayout } from '@/Layout/App';
 import { useBase64 } from '@/app/base64/useBase64';
 import { CopyButton } from '@/components/common/CopyButton';
+import { Editor, ex } from '@/components/common/Editor';
 import { ClearButton } from '@/components/common/Form/ClearButton';
-import { Input } from '@/components/common/Form/Input';
 import { PageTitle } from '@/components/common/PageTitle';
 import { PanelHeader } from '@/components/common/PanelHeader';
 
@@ -35,7 +35,7 @@ const Base64Page: React.FC = () => {
                 }
               >
                 <Controller
-                  render={({ field }) => <Input as="textarea" rows={20} {...field} ref={null} />}
+                  render={({ field }) => <Editor {...field} />}
                   name="input"
                   control={methods.control}
                 />
@@ -55,7 +55,7 @@ const Base64Page: React.FC = () => {
                   />
                 }
               >
-                <Input as="textarea" rows={20} readOnly value={output} />
+                <Editor value={output} readOnly extensions={[ex.lineWrapping]} />
               </Panel>
             </Col>
           </Row>

diff --git a/src/app/character_count/page.tsx b/src/app/character_count/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 import styled from '@emotion/styled';
-import React from 'react';
+import React, { useCallback } from 'react';
 import { Controller, FormProvider } from 'react-hook-form';
 import { Col, Form, Grid, Panel, Row, ButtonToolbar } from 'rsuite';
 import { AppLayout } from '@/Layout/App';
@@ -12,8 +12,8 @@ import {
   linesCount,
   spaceCount,
 } from '@/app/character_count/CharacterCountLib';
+import { Editor } from '@/components/common/Editor';
 import { ClearButton } from '@/components/common/Form/ClearButton';
-import { Input } from '@/components/common/Form/Input';
 import { LabelInput } from '@/components/common/Form/LabelInput';
 import { useCustomForm } from '@/components/common/Form/useCustomForm';
 import { PageTitle } from '@/components/common/PageTitle';
@@ -62,9 +62,7 @@ const CharacterCountPage: React.FC = () => {
                 }
               >
                 <Controller
-                  render={({ field }) => (
-                    <Input noResize="none" as="textarea" rows={14} {...field} ref={null} />
-                  )}
+                  render={({ field }) => <Editor {...field} />}
                   name="input"
                   control={control}
                 />

diff --git a/src/app/json_formatter/page.tsx b/src/app/json_formatter/page.tsx
@@ -5,9 +5,9 @@ import { ButtonToolbar, Col, Grid, Panel, PanelGroup, Row, InputNumber } from 'r
 import { AppLayout } from '@/Layout/App';
 import { useJsonFormatter } from '@/app/json_formatter/useJsonFormatter';
 import { CopyButton } from '@/components/common/CopyButton';
+import { Editor, ex } from '@/components/common/Editor';
 import { ClearButton } from '@/components/common/Form/ClearButton';
 import { FormRow } from '@/components/common/Form/FormRow';
-import { Input } from '@/components/common/Form/Input';
 import { PageTitle } from '@/components/common/PageTitle';
 import { PanelHeader } from '@/components/common/PanelHeader';
 
@@ -37,7 +37,7 @@ const JsonFormatterPage: React.FC = () => {
                   }
                 >
                   <Controller
-                    render={({ field }) => <Input as="textarea" rows={14} {...field} />}
+                    render={({ field }) => <Editor extensions={[ex.json]} {...field} />}
                     name="input"
                     control={methods.control}
                   />
@@ -75,7 +75,7 @@ const JsonFormatterPage: React.FC = () => {
                   />
                 }
               >
-                <Input value={output} as="textarea" readOnly rows={14} />
+                <Editor extensions={[ex.json]} value={output} readOnly />
               </Panel>
             </Col>
           </Row>

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,8 +1,8 @@
 import { Analytics } from '@vercel/analytics/react';
 import React from 'react';
 import 'rsuite/dist/rsuite.min.css';
-import '@/styles/rs-custom.globals.scss';
 import '@/styles/globals.scss';
+import '@/styles/rs-custom.globals.scss';
 import { Provider } from '@/app/Provider';
 import GoogleAnalytics from '@/components/common/GoogleAnalytics';
 

diff --git a/src/components/SideNavBar.tsx b/src/components/SideNavBar.tsx
@@ -167,7 +167,6 @@ NavLink.displayName = 'LinkComponent';
 
 const StyledSidebar = styled(Sidebar)`
   font-size: 12px;
-  background-color: #1a1d24;
 `;
 
 const NavItem = styled(Nav.Item)<{ expanded: boolean }>`

diff --git a/src/components/common/Editor.tsx b/src/components/common/Editor.tsx
@@ -1,6 +1,36 @@
-import MonacoEditor, { EditorProps } from '@monaco-editor/react';
+import { json } from '@codemirror/lang-json';
+import { EditorView } from '@codemirror/view';
+import styled from '@emotion/styled';
+import { vscodeDark } from '@uiw/codemirror-theme-vscode';
+import CodeMirror from '@uiw/react-codemirror';
+import { ReactCodeMirrorProps } from '@uiw/react-codemirror/src';
 import React from 'react';
 
-export const Editor: React.FC<EditorProps> = (props) => {
-  return <MonacoEditor height="50vh" theme="vs-dark" defaultLanguage="Markdown" {...props} />;
+export const Editor: React.FC<ReactCodeMirrorProps> = (props) => {
+  return (
+    <WrapperStyle>
+      <CodeMirror width="100%" height="60vh" theme={vscodeDark} {...props} />
+    </WrapperStyle>
+  );
+};
+
+const WrapperStyle = styled.div`
+  .cm-editor {
+    border-radius: 6px;
+  }
+  .cm-scroller {
+    border: 1px solid #a4a9b3;
+    border-radius: 6px;
+
+    &:active,
+    &:hover,
+    &:focus {
+      border-color: #34c3ff;
+    }
+  }
+`;
+
+export const ex = {
+  json: json(),
+  lineWrapping: EditorView.lineWrapping,
 };
diff --git a/src/styles/rs-custom.globals.scss b/src/styles/rs-custom.globals.scss
@@ -1,27 +1,43 @@
 :root {
-  --gray-color: #a4a9b3;
+  --color-gray: #a4a9b3;
+  --color-bg-primary: #181818;
+  --color-bg-code: #1e1e1e;
 }
 
 .rs-panel-group.rs-panel-group-bordered {
-  border-color: var(--gray-color);
+  border-color: var(--color-gray);
 }
 
 .rs-panel.rs-panel-bordered {
-  border-color: var(--gray-color);
+  border-color: var(--color-gray);
 }
 
 .rs-panel-group > .rs-panel + .rs-panel::before {
-  border-color: var(--gray-color);
+  border-color: var(--color-gray);
 }
 
 .rs-input-group:not(.rs-input-group-inside) {
-  border-color: var(--gray-color);
+  border-color: var(--color-gray);
 }
 
 .rs-input {
-  border-color: var(--gray-color);
+  border-color: var(--color-gray);
+  background-color: var(--color-bg-code);
 }
 
-.rs-picker-input {
-  border-color: var(--gray-color);
+.rs-picker .rs-picker-input {
+  border-color: var(--color-gray);
+  background-color: var(--color-bg-code);
+}
+
+.rs-sidebar {
+  background-color: var(--color-bg-primary);
+}
+
+.rs-picker-default .rs-btn, .rs-picker-default .rs-picker-toggle, .rs-picker-input .rs-btn, .rs-picker-input .rs-picker-toggle {
+  background-color: var(--color-bg-code) !important;
+}
+
+.rs-picker-menu {
+  background-color: var(--color-bg-code);
 }
diff --git a/yarn.lock b/yarn.lock
@@ -372,6 +372,14 @@
     "@codemirror/view" "^6.0.0"
     "@lezer/common" "^1.1.0"
 
+"@codemirror/lang-json@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-json/-/lang-json-6.0.1.tgz#0a0be701a5619c4b0f8991f9b5e95fe33f462330"
+  integrity sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@lezer/json" "^1.0.0"
+
 "@codemirror/language@^6.0.0":
   version "6.9.3"
   resolved "https://registry.yarnpkg.com/@codemirror/language/-/language-6.9.3.tgz#1c127dc43e025d4c9b1ba1b79f4b1ba081d5aeaa"
@@ -846,6 +854,14 @@
   dependencies:
     "@lezer/common" "^1.0.0"
 
+"@lezer/json@^1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@lezer/json/-/json-1.0.1.tgz#3bf5641f3d1408ec31a5f9b29e4e96c6e3a232e6"
+  integrity sha512-nkVC27qiEZEjySbi6gQRuMwa2sDu2PtfjSgz0A4QF81QyRGm3kb2YRzLcOPcTEtmcwvrX/cej7mlhbwViA4WJw==
+  dependencies:
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.0.0"
+
 "@lezer/lr@^1.0.0":
   version "1.3.14"
   resolved "https://registry.yarnpkg.com/@lezer/lr/-/lr-1.3.14.tgz#59d4a3b25698bdac0ef182fa6eadab445fc4f29a"