From e0c4b76d770d25dc7847875cf19aca495be0bdbf Mon Sep 17 00:00:00 2001
From: Valentin Serra <valentin.serra@camunda.com>
Date: Mon, 4 Mar 2024 04:43:22 +0100
Subject: [PATCH] chore: apply label sizing to json-editors

Closes #1078
---
 .../assets/form-js-editor-base.css            | 44 ++++++++++++-------
 .../src/components/JSONEditor.js              |  8 ++--
 2 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/packages/form-js-editor/assets/form-js-editor-base.css b/packages/form-js-editor/assets/form-js-editor-base.css
index add92d293..eff77e379 100644
--- a/packages/form-js-editor/assets/form-js-editor-base.css
+++ b/packages/form-js-editor/assets/form-js-editor-base.css
@@ -211,22 +211,6 @@
   display: flex;
 }
 
-.fjs-no-json-lint .cm-lint-marker,
-.fjs-no-json-lint .cm-lintPoint-error {
-  display: none;
-}
-
-.fjs-no-json-lint .cm-activeLine,
-.fjs-no-json-lint .cm-activeLineGutter {
-  background: none;
-}
-
-.fjs-no-json-lint .cm-placeholder {
-  font-size: 12px;
-  line-height: 16px;
-  color: var(--cds-text-placeholder, var(--color-grey-225-10-35));
-}
-
 .fjs-editor-container .fjs-form-editor {
   display: flex;
   flex: 1;
@@ -722,6 +706,34 @@
   color: var(--color-palette-text);
 }
 
+/**
+ * JSON Editors
+ */
+
+.fjs-json-editor .cm-editor {
+  font-size: var(--font-size-label);
+  line-height: var(--line-height-label);
+  letter-spacing: var(--letter-spacing-label);
+}
+
+.fjs-json-editor .cm-placeholder {
+  color: var(--cds-text-placeholder, var(--color-grey-225-10-35));
+}
+
+.fjs-json-editor .cm-placeholder > :first-child {
+  margin-top: 0;
+}
+
+.fjs-json-editor.fjs-cm-no-lint .cm-lint-marker,
+.fjs-json-editor.fjs-cm-no-lint .cm-lintPoint-error {
+  display: none;
+}
+
+.fjs-json-editor.fjs-cm-no-lint .cm-activeLine,
+.fjs-json-editor.fjs-cm-no-lint .cm-activeLineGutter {
+  background: none;
+}
+
 /**
  * Properties Panel
  */
diff --git a/packages/form-js-playground/src/components/JSONEditor.js b/packages/form-js-playground/src/components/JSONEditor.js
index 36d1e7646..02a307ed6 100644
--- a/packages/form-js-playground/src/components/JSONEditor.js
+++ b/packages/form-js-playground/src/components/JSONEditor.js
@@ -13,7 +13,7 @@ import {
   classes as domClasses
 } from 'min-dom';
 
-const NO_LINT_CLS = 'fjs-no-json-lint';
+const NO_LINT_CLS = 'fjs-cm-no-lint';
 
 
 /**
@@ -134,11 +134,13 @@ export function JSONEditor(options = {}) {
   this.attachTo = function(_container) {
     container = _container;
     container.appendChild(view.dom);
+    set(container, 'fjs-json-editor');
   };
 
   this.destroy = function() {
-    if (view.dom.parentNode) {
-      view.dom.parentNode.removeChild(view.dom);
+    if (container && view.dom) {
+      container.removeChild(view.dom);
+      unset(container, 'fjs-json-editor');
     }
 
     view.destroy();