ui: remove codemirror and use formule's instead

Signed-off-by: Miguel Garcia Garcia <[email protected]>

Author: miguelgrc

ui/cap-react/package.json

@@ -31,22 +31,13 @@
   "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",
     "antd": "^5.4.2",
     "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",

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,30 +70,32 @@ const Header = ({
       uiSchema: (
         <CodeViewer
           value={JSON.stringify(formuleCurrentUiSchema, null, 2)}
-          lang={json}
+          lang="json"
           height="100%"
+          reset
         />
       ),
       schema: (
         <CodeViewer
           value={JSON.stringify(formuleCurrentSchema, null, 2)}
-          lang={json}
+          lang="json"
           height="100%"
+          reset
         />
       ),
       uiSchemaDiff: (
         <CodeDiffViewer
           left={JSON.stringify(formuleState?.initial?.uiSchema, null, 2)}
           right={JSON.stringify(formuleCurrentUiSchema, null, 2)}
-          lang={json}
+          lang="json"
           height="100%"
         />
       ),
       schemaDiff: (
         <CodeDiffViewer
           left={JSON.stringify(formuleState?.initial?.schema, null, 2)}
           right={JSON.stringify(formuleCurrentSchema, null, 2)}
-          lang={json}
+          lang="json"
           height="100%"
         />
       ),

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 (
     <>
       <Modal open={showModal} onCancel={() => setShowModal(false)}>
         <CodeEditor
-          lang={json}
-          value={JSON.stringify(data, null, 2)}
-          lint={jsonParseLinter}
-          isReadOnly={true}
+          lang="json"
+          initialValue={JSON.stringify(data, null, 2)}
+          lint="json"
+          isEditable={false} // TODO: Change to !isEditable?
           height="calc(100vh - 325px)"
         />
       </Modal>
@@ -33,7 +27,9 @@ const CAPDeposit = ({ data }) => {
           <Space style={{ flex: 1 }}>
             <Card.Meta
               size="small"
-              avatar={data?.schema?.fullname && <Tag>{data?.schema?.fullname}</Tag>}
+              avatar={
+                data?.schema?.fullname && <Tag>{data?.schema?.fullname}</Tag>
+              }
               title={data?.metadata?.general_title || "No title"}
               description={"No description"}
             />

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)",
+                },
+              }}
             >
               <CodeDiffViewer
                 left={JSON.stringify(
@@ -338,15 +339,16 @@ const Schemas = ({ match, pushPath }) => {
                 <Row justify="center" style={{ backgroundColor: "white" }}>
                   <Col xs={24}>
                     <CodeEditor
-                      value={JSON.stringify(
+                      initialValue={JSON.stringify(
                         selection === FULL_SCHEMA ? schema : schema[selection],
                         null,
                         2
                       )}
-                      lang={json}
-                      isReadOnly={!EDITABLE_FIELDS.includes(selection)}
+                      lang="json"
+                      isEditable={EDITABLE_FIELDS.includes(selection)}
                       handleEdit={handleEdit}
-                      lint={jsonParseLinter}
+                      lint="json"
+                      reset
                       schema={schema} // to render a new editor instance on schema change
                       height="calc(100vh - 325px)"
                     />

ui/cap-react/src/antd/utils/CodeDiffViewer.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",