From 58a00e677442c451724afd1551dc27da807d6caf Mon Sep 17 00:00:00 2001 From: Miguel Garcia Garcia Date: Wed, 14 Aug 2024 11:29:04 +0200 Subject: [PATCH] ui: remove codemirror and use formule's instead Signed-off-by: Miguel Garcia Garcia --- ui/cap-react/package.json | 9 --- .../src/antd/admin/components/Header.js | 15 +++-- .../forms/customFields/services/CAPDeposit.js | 26 +++---- .../src/antd/schemas/components/Schemas.js | 26 +++---- ui/cap-react/src/antd/utils/CodeDiffViewer.js | 67 ------------------- ui/cap-react/src/antd/utils/CodeEditor.js | 38 ----------- ui/cap-react/src/antd/utils/CodeViewer.js | 45 ------------- ui/cap-react/vite.config.js | 4 -- 8 files changed, 33 insertions(+), 197 deletions(-) delete mode 100644 ui/cap-react/src/antd/utils/CodeDiffViewer.js delete mode 100644 ui/cap-react/src/antd/utils/CodeEditor.js delete mode 100644 ui/cap-react/src/antd/utils/CodeViewer.js diff --git a/ui/cap-react/package.json b/ui/cap-react/package.json index e5314b7c2..6387c24ab 100644 --- a/ui/cap-react/package.json +++ b/ui/cap-react/package.json @@ -31,14 +31,6 @@ "dependencies": { "@ant-design/icons": "4.7.0", "@ant-design/pro-layout": "7.10.3", - "@codemirror/commands": "6.1.2", - "@codemirror/lang-json": "6.0.1", - "@codemirror/language": "6.6.0", - "@codemirror/legacy-modes": "6.3.0", - "@codemirror/lint": "6.1.0", - "@codemirror/merge": "6.0.0", - "@codemirror/state": "6.1.3", - "@codemirror/view": "6.4.2", "@datapunt/matomo-tracker-react": "0.5.1", "@sentry/react": "^5.0.0", "@vitejs/plugin-react": "^4.2.0", @@ -46,7 +38,6 @@ "axios": "0.27.2", "classnames": "2.3.1", "clean-deep": "3.3.0", - "codemirror": "6.0.1", "connected-react-router": "6.5.2", "dayjs": "1.11.7", "deep-equal": "2.0.3", diff --git a/ui/cap-react/src/antd/admin/components/Header.js b/ui/cap-react/src/antd/admin/components/Header.js index 4a3fdf109..7b2276b8e 100644 --- a/ui/cap-react/src/antd/admin/components/Header.js +++ b/ui/cap-react/src/antd/admin/components/Header.js @@ -22,9 +22,8 @@ import { SettingOutlined, } from "@ant-design/icons"; import { CMS } from "../../routes"; -import CodeViewer from "../../utils/CodeViewer"; -import { json } from "@codemirror/lang-json"; -import CodeDiffViewer from "../../utils/CodeDiffViewer"; +import { CodeViewer } from "react-formule"; +import { CodeDiffViewer } from "react-formule"; const { useBreakpoint } = Grid; const Header = ({ @@ -71,22 +70,24 @@ const Header = ({ uiSchema: ( ), schema: ( ), uiSchemaDiff: ( ), @@ -94,7 +95,7 @@ const Header = ({ ), diff --git a/ui/cap-react/src/antd/forms/customFields/services/CAPDeposit.js b/ui/cap-react/src/antd/forms/customFields/services/CAPDeposit.js index 5d0785b29..a4c5c67cc 100644 --- a/ui/cap-react/src/antd/forms/customFields/services/CAPDeposit.js +++ b/ui/cap-react/src/antd/forms/customFields/services/CAPDeposit.js @@ -1,28 +1,22 @@ import PropTypes from "prop-types"; -import { - Card, - Divider, - Modal, - Space, - Tag, - Typography, -} from "antd"; +import { Card, Divider, Modal, Space, Tag, Typography } from "antd"; import { EyeFilled, LinkOutlined } from "@ant-design/icons"; import { useState } from "react"; -import CodeEditor from "../../../utils/CodeEditor"; -import { json, jsonParseLinter } from "@codemirror/lang-json"; +import { CodeEditor } from "react-formule"; const CAPDeposit = ({ data }) => { const [showModal, setShowModal] = useState(false); + console.log(JSON.stringify(data, null, 2)); + return ( <> setShowModal(false)}> @@ -33,7 +27,9 @@ const CAPDeposit = ({ data }) => { {data?.schema?.fullname}} + avatar={ + data?.schema?.fullname && {data?.schema?.fullname} + } title={data?.metadata?.general_title || "No title"} description={"No description"} /> diff --git a/ui/cap-react/src/antd/schemas/components/Schemas.js b/ui/cap-react/src/antd/schemas/components/Schemas.js index a80337569..5b6edd1f0 100644 --- a/ui/cap-react/src/antd/schemas/components/Schemas.js +++ b/ui/cap-react/src/antd/schemas/components/Schemas.js @@ -21,9 +21,8 @@ import { UndoOutlined, } from "@ant-design/icons"; import ErrorScreen from "../../partials/Error"; -import CodeEditor from "../../utils/CodeEditor"; -import { json, jsonParseLinter } from "@codemirror/lang-json"; -import CodeDiffViewer from "../../utils/CodeDiffViewer"; +import { CodeEditor } from "react-formule"; +import { CodeDiffViewer } from "react-formule"; import { CMS } from "../../routes"; const { useBreakpoint } = Grid; @@ -165,11 +164,13 @@ const Schemas = ({ match, pushPath }) => { title={`${selection} diff`} width={1000} footer={null} - style={{ body: { - overflowX: "scroll", - overflowY: "auto", - maxHeight: "calc(100vh - 200px)", - }}} + style={{ + body: { + overflowX: "scroll", + overflowY: "auto", + maxHeight: "calc(100vh - 200px)", + }, + }} > { diff --git a/ui/cap-react/src/antd/utils/CodeDiffViewer.js b/ui/cap-react/src/antd/utils/CodeDiffViewer.js deleted file mode 100644 index 541a77310..000000000 --- a/ui/cap-react/src/antd/utils/CodeDiffViewer.js +++ /dev/null @@ -1,67 +0,0 @@ -import { useEffect, useRef } from "react"; -import { basicSetup } from "codemirror"; -import { EditorState } from "@codemirror/state"; -import { EditorView } from "@codemirror/view"; -import { MergeView } from "@codemirror/merge"; - -const CodeDiffViewer = ({ left, right, lang, height }) => { - const element = useRef(null); - - useEffect(() => { - element.current.innerHTML = ""; - - let extensions = [ - basicSetup, - EditorState.readOnly.of(true), - EditorView.theme({ - "&": { - width: "100%", - height: "100%", - }, - }), - ]; - - if (lang) { - extensions.push(lang()); - } - - let leftExtensions = [ - EditorView.theme({ - ".cm-changedLine": { - "background-color": "#ffeded !important", - }, - ".cm-changedText": { - "background-color": "#ffbaba !important", - }, - }), - ]; - - let rightExtensions = [ - EditorView.theme({ - ".cm-changedLine": { - "background-color": "#e8fbe8 !important", - }, - ".cm-changedText": { - "background-color": "#a6f1a6 !important", - }, - }), - ]; - - new MergeView({ - a: { - doc: left, - extensions: [...extensions, ...leftExtensions], - }, - b: { - doc: right, - extensions: [...extensions, ...rightExtensions], - }, - parent: element.current, - collapseUnchanged: {}, - }); - }, [left, right]); - - return
; -}; - -export default CodeDiffViewer; diff --git a/ui/cap-react/src/antd/utils/CodeEditor.js b/ui/cap-react/src/antd/utils/CodeEditor.js deleted file mode 100644 index 0af59793b..000000000 --- a/ui/cap-react/src/antd/utils/CodeEditor.js +++ /dev/null @@ -1,38 +0,0 @@ -import { EditorView, keymap } from "@codemirror/view"; -import { linter, lintGutter } from "@codemirror/lint"; -import { indentWithTab } from "@codemirror/commands"; -import CodeViewer from "./CodeViewer"; - -const CodeEditor = ({ - value, - lang, - lint, - isReadOnly, - handleEdit, - schema, - height, -}) => { - const extraExtensions = [ - keymap.of([indentWithTab]), - linter(lint()), - lintGutter(), - EditorView.updateListener.of(update => { - if (update.docChanged) { - handleEdit(update.state.doc.toString()); - } - }), - ]; - - return ( - - ); -}; - -export default CodeEditor; diff --git a/ui/cap-react/src/antd/utils/CodeViewer.js b/ui/cap-react/src/antd/utils/CodeViewer.js deleted file mode 100644 index 02453cfad..000000000 --- a/ui/cap-react/src/antd/utils/CodeViewer.js +++ /dev/null @@ -1,45 +0,0 @@ -import { useEffect, useRef } from "react"; -import { basicSetup } from "codemirror"; -import { EditorState } from "@codemirror/state"; -import { EditorView } from "@codemirror/view"; - -const CodeViewer = ({ - value, - lang, - isReadOnly = true, - extraExtensions = [], - height, - schema, -}) => { - const element = useRef(null); - - useEffect(() => { - element.current.innerHTML = ""; - - let extensions = [ - basicSetup, - EditorState.readOnly.of(isReadOnly), - EditorView.theme({ - "&": { - width: "100%", - height: "100%", - }, - }), - ]; - if (lang) { - extensions.push(lang()); - } - - new EditorView({ - state: EditorState.create({ - doc: value, - extensions: [...extensions, ...extraExtensions], - }), - parent: element.current, - }); - }, [value, schema]); - - return
; -}; - -export default CodeViewer; diff --git a/ui/cap-react/vite.config.js b/ui/cap-react/vite.config.js index d054932bf..c8787a18e 100644 --- a/ui/cap-react/vite.config.js +++ b/ui/cap-react/vite.config.js @@ -70,10 +70,6 @@ export default defineConfig(({ mode }) => { define: { "process.env": {}, }, - // Avoid duplicate dependencies (codemirror was breaking because of this) - resolve: { - dedupe: ["@codemirror/state", "@codemirror/view"], - }, // Avoid errors when accesing e.g. document from tests test: { environment: "happy-dom",