chore: apply label sizing to json-editors

Closes #1078
bpmn-io · Mar 4, 2024 · 615376d · 615376d
1 parent f43adfc
commit 615376d
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 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
@@ -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
@@ -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();