Feature/#80 json view reader codemirror

apps/react-app/package.json

@@ -7,12 +7,14 @@
     "build": "vite build"
   },
   "dependencies": {
+    "@codemirror/lang-json": "^6.0.1",
     "@emotion/css": "^11.10.6",
     "@fontsource/inter": "^5.0.3",
     "@fontsource/sanchez": "^5.0.3",
     "@lemoncode/manfred2html": "*",
     "@lemoncode/manfred2md": "*",
     "@lemoncode/manfred2word": "*",
+    "codemirror": "^6.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.8.1"

apps/react-app/src/common-app/components/codemirror/codemirror.component.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { EditorState } from '@codemirror/state';
+import { json } from '@codemirror/lang-json';
+import { basicSetup } from 'codemirror';
+import { EditorView, ViewUpdate, placeholder } from '@codemirror/view';
+
+import { codeMirrorTheme } from './codemirror.styles';
+
+interface Props {
+  value: string;
+  onChange: (value: string) => void;
+  className?: string;
+}
+
+export const CodeMirrorComponent: React.FC<Props> = props => {
+  const { value, onChange, className } = props;
+  const codeRef = React.useRef<HTMLDivElement>(null);
+  const editorView = React.useRef<EditorView>();
+  React.useEffect(() => {
+    if (codeRef.current) {
+      editorView.current = new EditorView({
+        state: EditorState.create({
+          doc: value,
+          extensions: [
+            basicSetup,
+            json(),
+            EditorView.lineWrapping,
+            EditorView.updateListener.of((u: ViewUpdate) => onChange(u.state.doc.toString())),
+            placeholder('Pega aquí tu JSON en formato MAC'),
+            codeMirrorTheme,
+          ],
+        }),
+        parent: codeRef.current,
+      });
+    }
+
+    return () => editorView.current?.destroy();
+  }, []);
+
+  return <div className={className} ref={codeRef} />;
+};

apps/react-app/src/common-app/components/codemirror/codemirror.styles.ts

@@ -0,0 +1,22 @@
+import { EditorView } from 'codemirror';
+
+export const codeMirrorTheme = EditorView.theme({
+  '&': {
+    fontSize: '14px',
+    flexDirection: 'column',
+    display: 'flex',
+    flexGrow: '1',
+    maxHeight: '40vh',
+    height: '100%',
+    width: '100%',
+  },
+  '.cm-scroller': { overflow: 'auto' },
+  '.cm-gutterElement': { display: 'none' },
+  '.cm content, .cm-gutters,': {
+    minHeight: '100%',
+    backgroundColor: '#152128',
+    color: '#AAB0B1',
+    textAlign: 'start',
+    border: 'none',
+  },
+});

apps/react-app/src/common-app/components/codemirror/index.ts

@@ -0,0 +1 @@
+export * from './codemirror.component';

apps/react-app/src/common-app/components/index.ts

@@ -6,3 +6,4 @@ export * from './card';
 export * from './modal';
 export * from './export-config';
 export * from './alert-message';
+export * from './codemirror';

apps/react-app/src/pods/template-export/template-export.component.tsx

@@ -1,7 +1,16 @@
 import React from 'react';
 import { ExportHTMLSettings } from '@lemoncode/manfred2html';
 import { useUserChoiceContext } from '@/core';
-import { Button, Footer, Header, Modal, Navbar, ExportConfig, AlertMessage } from '@/common-app/components';
+import {
+  Button,
+  Footer,
+  Header,
+  Modal,
+  Navbar,
+  ExportConfig,
+  AlertMessage,
+  CodeMirrorComponent,
+} from '@/common-app/components';
 import * as classes from './template-export.styles';
 
 interface Props {
@@ -19,9 +28,7 @@ export const TemplateExport: React.FC<Props> = props => {
   const [text, setText] = React.useState<string>('');
   const [openSettingsModal, setOpenSettingsModal] = React.useState<boolean>(false);
 
-  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setText(event.target.value);
-  };
+  const handleChange = (value: string) => setText(value);
 
   const handleOnExportToWord = () => {
     setUserChoice({ ...userChoice, manfredJsonContent: text });
@@ -55,12 +62,7 @@ export const TemplateExport: React.FC<Props> = props => {
       <Navbar />
       <div className={classes.container}>
         <Header />
-        <textarea
-          onChange={handleChange}
-          value={text}
-          placeholder="Pega aquí tu JSON en formato MAC"
-          className={classes.textarea}
-        ></textarea>
+        <CodeMirrorComponent className={classes.textarea} value={text} onChange={handleChange}></CodeMirrorComponent>
         <div className={classes.buttonContainer}>
           <Button
             disabled={text ? false : true}