Monaco code editor

Author: Chuck Kosman

components/locations/Field.tsx

@@ -1,10 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { FieldAppSDK } from "@contentful/app-sdk";
 import { useSDK } from "@contentful/react-apps-toolkit";
-import Editor from "react-simple-code-editor";
-import { highlight, languages } from "prismjs";
-import "prismjs/components/prism-css";
-import "prismjs/themes/prism.css";
+import Editor from "@monaco-editor/react";
 
 const CONTENT_FIELD_ID = "css";
 
@@ -24,16 +21,12 @@ const Field = () => {
   return (
     <>
       <Editor
-        value={css}
-        onValueChange={(css) => {
-          setCss(css);
-          contentField.setValue(css);
-        }}
-        highlight={(css) => highlight(css, languages.css, "css")}
-        padding={10}
-        style={{
-          fontFamily: '"Fira code", "Fira Mono", monospace',
-          fontSize: 14,
+        height="100vh"
+        defaultValue={css}
+        defaultLanguage="css"
+        onChange={(value, event) => {
+          setCss(value);
+          contentField.setValue(value);
         }}
       />
     </>

package-lock.json

@@ -16,12 +16,10 @@
     "@contentful/f36-components": "4.45.0",
     "@contentful/f36-tokens": "4.0.2",
     "@contentful/react-apps-toolkit": "1.2.16",
-    "@types/prismjs": "^1.26.0",
+    "@monaco-editor/react": "^4.5.1",
     "next": "13.4.8",
-    "prismjs": "^1.29.0",
     "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-simple-code-editor": "^0.13.1"
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@contentful/app-scripts": "1.10.2",