Add vanilla-jsoneditor dependency and update JSONEditor usage

package.json

@@ -13,5 +13,8 @@
     "prettier": "2.6.0",
     "typescript": "^4.5.4",
     "vite": "^2.9.0"
+  },
+  "dependencies": {
+    "vanilla-jsoneditor": "^0.23.1"
   }
 }

play/index.html

@@ -5,19 +5,6 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>RRWeb Debug</title>
-    <script
-      src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/10.0.2/jsoneditor.min.js"
-      integrity="sha512-QoEa+2J/Sie4bjZNs546qH2o7pK246K7bPYqMOkIU2J7Hdj6axTsPqYbbr0SgQ7iSAomOSa922z+z6yNbECGJQ=="
-      crossorigin="anonymous"
-      referrerpolicy="no-referrer"
-    ></script>
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/10.0.2/jsoneditor.min.css"
-      integrity="sha512-8G+Vb2+10BSrSo+wupdzJIylDLpGtEYniQhp0rsbTigPG7Onn2S08Ai/KEGlxN2Ncx9fGqVHtRehMuOjPb9f8g=="
-      crossorigin="anonymous"
-      referrerpolicy="no-referrer"
-    />
     <link
       href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
       rel="stylesheet"

src/play.js

@@ -1,5 +1,6 @@
 import versionsJson from "./versions.json";
 import populateVersions from "./populate-versions";
+import { JSONEditor } from "vanilla-jsoneditor";
 
 function allowedVersion(version) {
   const allVersions = Object.keys(versionsJson);
@@ -58,11 +59,10 @@ function playVideo(events, config) {
 function showJSON(json) {
   const container = document.getElementById("jsoneditor");
 
-  const options = {
-    mode: "view",
-  };
-
-  const editor = new JSONEditor(container, options, json);
+  const editor = new JSONEditor({
+    target: container,
+    props: { content: { json }, mode: "view" },
+  });
   window.events = events;
 }