From b6b95ebe13b62542fe820173c1eecd2c81e8f0f1 Mon Sep 17 00:00:00 2001 From: migalko94 Date: Tue, 31 Oct 2023 16:21:07 +0100 Subject: [PATCH 1/7] first iteration --- apps/react-app/package.json | 2 + .../codemirror/codemirror.component.tsx | 66 +++++ .../codemirror/codemirror.styles.ts | 19 ++ .../common-app/components/codemirror/index.ts | 1 + .../src/common-app/components/index.ts | 1 + .../template-export.component.tsx | 22 +- package-lock.json | 275 ++++++++++++++---- 7 files changed, 312 insertions(+), 74 deletions(-) create mode 100644 apps/react-app/src/common-app/components/codemirror/codemirror.component.tsx create mode 100644 apps/react-app/src/common-app/components/codemirror/codemirror.styles.ts create mode 100644 apps/react-app/src/common-app/components/codemirror/index.ts diff --git a/apps/react-app/package.json b/apps/react-app/package.json index 8b03596c..ed7cc504 100644 --- a/apps/react-app/package.json +++ b/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" diff --git a/apps/react-app/src/common-app/components/codemirror/codemirror.component.tsx b/apps/react-app/src/common-app/components/codemirror/codemirror.component.tsx new file mode 100644 index 00000000..7b673b0c --- /dev/null +++ b/apps/react-app/src/common-app/components/codemirror/codemirror.component.tsx @@ -0,0 +1,66 @@ +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 => { + const { value, onChange, className } = props; + + const [view, setView] = React.useState(null); + + const codeRef = React.useRef(null); + React.useEffect(() => { + if (codeRef.current) { + let editorState = EditorState.create({ + doc: value, + extensions: [ + basicSetup, + json(), + EditorView.updateListener.of((u: ViewUpdate) => onChange(u.state.doc.toString())), + placeholder('Pega aquí tu JSON en formato MAC'), + codeMirrorTheme, + ], + }); + + setView( + new EditorView({ + state: editorState, + parent: codeRef.current, + }) + ); + + return () => { + view?.destroy(); + }; + } else { + throw new Error('Se ha producido un error con el EditorJSON'); + } + }, []); + + React.useEffect(() => { + if (view) { + let transaction = view.state.update({ + changes: { + from: 0, + to: view.state.doc.length, + insert: value, + }, + }); + if (value !== view.state.doc.toString()) { + view.dispatch(transaction); + } + } + }, [value]); + + return
; +}; diff --git a/apps/react-app/src/common-app/components/codemirror/codemirror.styles.ts b/apps/react-app/src/common-app/components/codemirror/codemirror.styles.ts new file mode 100644 index 00000000..ed6e9356 --- /dev/null +++ b/apps/react-app/src/common-app/components/codemirror/codemirror.styles.ts @@ -0,0 +1,19 @@ +import { EditorView } from 'codemirror'; + +export const codeMirrorTheme = EditorView.theme({ + '&': { + fontSize: '14px', + display: 'flex', + flexGrow: '1', + width: '100%', + maxHeight: '50vh', + }, + + '.cm-scroller': { overflow: 'auto' }, + '.cm content, .cm-gutters, .cm-gutterElement,': { + backgroundColor: '#152128', + color: '#AAB0B1', + textAlign: 'start', + border: 'none', + }, +}); diff --git a/apps/react-app/src/common-app/components/codemirror/index.ts b/apps/react-app/src/common-app/components/codemirror/index.ts new file mode 100644 index 00000000..db091091 --- /dev/null +++ b/apps/react-app/src/common-app/components/codemirror/index.ts @@ -0,0 +1 @@ +export * from './codemirror.component'; diff --git a/apps/react-app/src/common-app/components/index.ts b/apps/react-app/src/common-app/components/index.ts index 291de313..00e6f514 100644 --- a/apps/react-app/src/common-app/components/index.ts +++ b/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'; diff --git a/apps/react-app/src/pods/template-export/template-export.component.tsx b/apps/react-app/src/pods/template-export/template-export.component.tsx index b1ed94a3..ecef284d 100644 --- a/apps/react-app/src/pods/template-export/template-export.component.tsx +++ b/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 => { const [text, setText] = React.useState(''); const [openSettingsModal, setOpenSettingsModal] = React.useState(false); - const handleChange = (event: React.ChangeEvent) => { - 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 => {
- +