Added code editor to PublicationDataModal

css/main.css

@@ -168,3 +168,47 @@
   margin-left: 16px;
   color: inherit;
 }
+
+/* CodeMirror */
+.codeMirrorContainer {
+  margin-block-start: 6px;
+  text-align: left;
+}
+
+.prettifyButton {
+  margin-block-start: 10px;
+}
+
+.codeMirrorContainer * .cm-content {
+  border-radius: 0 !important;
+  border: none !important;
+}
+.codeMirrorContainer * .cm-editor {
+  outline: none !important;
+}
+.codeMirrorContainer.light > .vue-codemirror {
+  border: 1px dotted silver;
+}
+.codeMirrorContainer.dark > .vue-codemirror {
+  border: 1px dotted grey;
+}
+
+/* value text color */
+.codeMirrorContainer.light * .cm-content *::selection {
+  color: inherit !important;
+  background-color: #add6ff80 !important;
+}
+.codeMirrorContainer.dark * .cm-content *::selection {
+  color: inherit !important;
+  background-color: #add6ff26 !important;
+}
+
+/* value text color */
+.codeMirrorContainer.dark :deep(.ͼ2 .cm-activeLine) {
+  background-color: #add6ff26;
+}
+
+/* text cursor */
+.codeMirrorContainer :deep(.cm-content) * {
+  cursor: text !important;
+}

package.json

@@ -20,6 +20,7 @@
     "extends @nextcloud/browserslist-config"
   ],
   "dependencies": {
+    "@codemirror/lang-json": "^6.0.1",
     "@fortawesome/fontawesome-svg-core": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@nextcloud/axios": "^2.5.0",
@@ -28,6 +29,7 @@
     "@nextcloud/l10n": "^3.1.0",
     "@nextcloud/router": "^3.0.1",
     "@nextcloud/vue": "^8.17.0",
+    "@uiw/codemirror-theme-vscode": "^4.23.6",
     "@vueuse/core": "^11.0.1",
     "apexcharts": "^3.52.0",
     "axios": "^1.7.4",
@@ -43,6 +45,7 @@
     "validator": "^13.12.0",
     "vue": "^2.7.14",
     "vue-apexcharts": "^1.6.2",
+    "vue-codemirror6": "^1.3.8",
     "vue-loader": "^15.11.1 <16.0.0",
     "vue-loading-overlay": "^3.4.3",
     "vue-material-design-icons": "^5.3.0",