@bpmn-io/properties-panel 3.41.0 → 3.41.2

package/dist/assets/properties-panel.css

@@ -569,42 +569,6 @@ textarea.bio-properties-panel-input {
   resize: vertical;
 }
 
-/**
- * JSON Editor (CodeMirror)
- */
-
-.bio-properties-panel-json-editor .cm-editor {
-  border: 1px solid var(--input-border-color);
-  border-radius: 2px;
-  background-color: var(--input-background-color);
-  font-size: var(--text-size-base);
-  font-family: var(--font-family-monospace);
-}
-
-.bio-properties-panel-json-editor .cm-editor.cm-focused {
-  outline: none;
-  background-color: var(--input-focus-background-color);
-  border-color: var(--input-focus-border-color);
-}
-
-.bio-properties-panel-json-editor .cm-scroller {
-  overflow: auto;
-  max-height: 215px;
-}
-
-.bio-properties-panel-json-editor .cm-content {
-  padding-right: 18px;
-}
-
-.bio-properties-panel-entry.has-error .bio-properties-panel-json-editor .cm-editor {
-  border-color: var(--input-error-border-color);
-  background-color: var(--input-error-background-color);
-}
-
-.bio-properties-panel-entry.has-error .bio-properties-panel-json-editor .cm-editor.cm-focused {
-  border-color: var(--input-error-focus-border-color);
-}
-
 .bio-properties-panel-entry.has-error .bio-properties-panel-input,
 .bio-properties-panel-entry.has-error .bio-properties-panel-feel-editor__open-popup-placeholder {
   border-color: var(--input-error-border-color);
@@ -635,6 +599,27 @@ textarea.bio-properties-panel-input {
   margin: auto;
 }
 
+/**
+ * JSON Editor (CodeMirror)
+ */
+
+.bio-properties-panel-json-editor .bio-properties-panel-input {
+  padding: 0;
+}
+
+.bio-properties-panel-json-editor .cm-editor {
+  font-family: var(--font-family-monospace);
+}
+
+.bio-properties-panel-json-editor .cm-editor.cm-focused {
+  outline: none;
+}
+
+.bio-properties-panel-json-editor .cm-scroller {
+  overflow: auto;
+  max-height: 215px;
+}
+
 /**
  * Toggle Switch
  */

package/dist/index.esm.js

@@ -10,7 +10,7 @@ import { Annotation, EditorState } from '@codemirror/state';
 import { syntaxHighlighting, foldGutter, bracketMatching, defaultHighlightStyle, foldKeymap } from '@codemirror/language';
 import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
 import { history, defaultKeymap, historyKeymap } from '@codemirror/commands';
-import { json, jsonParseLinter } from '@codemirror/lang-json';
+import { jsonParseLinter, json } from '@codemirror/lang-json';
 import { linter } from '@codemirror/lint';
 import { FeelersEditor } from 'feelers';
 import Editor from '@bpmn-io/feel-editor';
@@ -1823,6 +1823,7 @@ function CheckboxGroup(props) {
 }
 
 const ExternalChange = Annotation.define();
+const parseJsonLinter = jsonParseLinter();
 
 /**
  * A CodeMirror based JSON editor for the properties panel.
@@ -1867,7 +1868,11 @@ function JsonEditor(props) {
           if (update.docChanged && !isExternal) {
             handleChange(update.state.doc.toString());
           }
-        }), json(), linter(jsonParseLinter(), {
+        }), json(), linter(view => {
+          const content = view.state.doc.toString();
+          if (!content.trim()) return [];
+          return parseJsonLinter(view);
+        }, {
           delay: 300
         })]
       }),
@@ -1918,6 +1923,7 @@ function JsonEditor(props) {
         children: label
       })
     }), jsx("div", {
+      class: classnames('bio-properties-panel-input', value && 'edited'),
       ref: containerRef
     })]
   });
@@ -1996,14 +2002,13 @@ function JsonEditorEntry(props) {
  * Check if the JSON editor entry has been edited.
  */
 function isEdited$8(node) {
-  const cmContent = node && node.querySelector('.cm-content');
-  return cmContent ? cmContent.textContent.trim().length > 0 : false;
+  return node && node.classList.contains('edited');
 }
 
 // helpers /////////////////
 
 function validateJson(value) {
-  if (!value) return null;
+  if (!value || !value.trim()) return null;
   try {
     return isObject(JSON.parse(value)) ? null : 'JSON contains errors';
   } catch (e) {