@bpmn-io/properties-panel 3.40.5 → 3.41.0

package/dist/assets/properties-panel.css

@@ -569,6 +569,42 @@ 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);

package/dist/index.esm.js

@@ -1,13 +1,19 @@
 import { useContext, useState, useRef, useEffect, useLayoutEffect, useCallback, useMemo } from '../preact/hooks';
-import { isFunction, isArray, get, assign, set, isString, isNumber, debounce } from 'min-dash';
+import { isFunction, isArray, get, assign, set, isObject, isString, isNumber, debounce } from 'min-dash';
 import { createPortal, forwardRef } from '../preact/compat';
 import { jsx, jsxs, Fragment } from '../preact/jsx-runtime';
 import { createContext, createElement as createElement$1, render } from '../preact';
 import classnames from 'classnames';
 import { query, domify } from 'min-dom';
+import { EditorView, highlightSpecialChars, drawSelection, keymap, placeholder, lineNumbers } from '@codemirror/view';
+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 { linter } from '@codemirror/lint';
 import { FeelersEditor } from 'feelers';
 import Editor from '@bpmn-io/feel-editor';
-import { lineNumbers, EditorView } from '@codemirror/view';
 import * as focusTrap from 'focus-trap';
 
 var ArrowIcon = function ArrowIcon(props) {
@@ -1739,7 +1745,7 @@ function CheckboxEntry(props) {
     })]
   });
 }
-function isEdited$8(node) {
+function isEdited$9(node) {
   return node && !!node.checked;
 }
 
@@ -1816,6 +1822,195 @@ function CheckboxGroup(props) {
   });
 }
 
+const ExternalChange = Annotation.define();
+
+/**
+ * A CodeMirror based JSON editor for the properties panel.
+ *
+ * @param {object} props
+ * @param {string} props.id
+ * @param {string} props.label
+ * @param {string} [props.value]
+ * @param {Function} props.onInput
+ * @param {boolean} [props.disabled]
+ * @param {string} [props.placeholder]
+ * @param {string} [props.tooltip]
+ * @param {object} [props.element]
+ */
+function JsonEditor(props) {
+  const {
+    id,
+    label,
+    debounce,
+    value = '',
+    onInput: commitValue,
+    disabled,
+    placeholder: placeholder$1,
+    tooltip,
+    element
+  } = props;
+  const containerRef = useRef(null);
+  const viewRef = useRef(null);
+  const editorRef = useShowEntryEvent(id);
+  const onInput = useStaticCallback(newValue => {
+    commitValue(newValue === '' ? undefined : newValue);
+  });
+  const handleChange = useDebounce(onInput, debounce);
+  useEffect(() => {
+    const view = new EditorView({
+      state: EditorState.create({
+        doc: value,
+        extensions: [highlightSpecialChars(), history(), drawSelection(), syntaxHighlighting(defaultHighlightStyle, {
+          fallback: true
+        }), foldGutter(), bracketMatching(), closeBrackets(), keymap.of([...defaultKeymap, ...historyKeymap, ...closeBracketsKeymap, ...foldKeymap]), EditorState.tabSize.of(2), EditorView.lineWrapping, EditorState.readOnly.of(!!disabled), ...(placeholder$1 ? [placeholder(placeholder$1)] : []), EditorView.updateListener.of(update => {
+          const isExternal = update.transactions.some(tr => tr.annotation(ExternalChange));
+          if (update.docChanged && !isExternal) {
+            handleChange(update.state.doc.toString());
+          }
+        }), json(), linter(jsonParseLinter(), {
+          delay: 300
+        })]
+      }),
+      parent: containerRef.current
+    });
+    viewRef.current = view;
+
+    // Allow useShowEntryEvent to focus the editor
+    editorRef.current = view.contentDOM;
+    const prefixedId = `bio-properties-panel-${id}`;
+    view.contentDOM.setAttribute('id', prefixedId);
+    view.contentDOM.setAttribute('aria-label', label);
+    return () => {
+      view.destroy();
+    };
+  }, []);
+
+  // Sync external value changes into the editor
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+    const currentValue = view.state.doc.toString();
+    if (value === currentValue) return;
+    view.dispatch({
+      changes: {
+        from: 0,
+        to: currentValue.length,
+        insert: value || ''
+      },
+      annotations: ExternalChange.of(true)
+    });
+  }, [value]);
+
+  // Focus editor on label click manually, as the native `for`
+  // attribute does not work with contenteditable elements
+  const focusEditor = () => {
+    viewRef.current && viewRef.current.focus();
+  };
+  return jsxs("div", {
+    class: "bio-properties-panel-json-editor",
+    children: [jsx("label", {
+      class: "bio-properties-panel-label",
+      onClick: focusEditor,
+      children: jsx(TooltipWrapper, {
+        value: tooltip,
+        forId: id,
+        element: element,
+        children: label
+      })
+    }), jsx("div", {
+      ref: containerRef
+    })]
+  });
+}
+
+/**
+ * Entry wrapper for JsonEditor, handles getValue/setValue, built-in JSON validation, error display, and description.
+ *
+ * @param {object} props
+ * @param {object} props.element
+ * @param {string} props.id
+ * @param {string} [props.description]
+ * @param {string} props.label
+ * @param {Function} props.debounce
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {boolean} [props.disabled]
+ * @param {string} [props.placeholder]
+ * @param {string} [props.tooltip]
+ */
+function JsonEditorEntry(props) {
+  const {
+    element,
+    id,
+    description,
+    debounce,
+    label,
+    getValue,
+    setValue,
+    disabled,
+    placeholder,
+    tooltip
+  } = props;
+  const globalError = useError(id);
+  let value = getValue(element);
+  const [editorValue, setEditorValue] = useState(value);
+  useEffect(() => {
+    if (value === editorValue) {
+      return;
+    }
+    setEditorValue(value);
+  }, [value]);
+  const onInput = useStaticCallback(newValue => {
+    setEditorValue(newValue);
+    const currentValue = getValue(element);
+    if (newValue !== currentValue) {
+      setValue(newValue);
+    }
+  });
+  const error = globalError || validateJson(editorValue);
+  return jsxs("div", {
+    class: classnames('bio-properties-panel-entry', error && 'has-error'),
+    "data-entry-id": id,
+    children: [jsx(JsonEditor, {
+      id: id,
+      label: label,
+      debounce: debounce,
+      value: value,
+      onInput: onInput,
+      disabled: disabled,
+      placeholder: placeholder,
+      tooltip: tooltip,
+      element: element
+    }, element), error && jsx("div", {
+      class: "bio-properties-panel-error",
+      children: error
+    }), jsx(Description, {
+      forId: id,
+      element: element,
+      value: description
+    })]
+  });
+}
+
+/**
+ * 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;
+}
+
+// helpers /////////////////
+
+function validateJson(value) {
+  if (!value) return null;
+  try {
+    return isObject(JSON.parse(value)) ? null : 'JSON contains errors';
+  } catch (e) {
+    return 'JSON contains errors';
+  }
+}
+
 /**
  * Button to open popups.
  *
@@ -2024,6 +2219,7 @@ const FeelEditor = forwardRef((props, ref) => {
       onKeyDown: onKeyDown,
       onLint: onLint,
       placeholder: placeholder,
+      readOnly: disabled,
       tooltipContainer: tooltipContainer,
       value: localValue,
       variables,
@@ -4898,5 +5094,5 @@ var index = {
   feelPopupRenderer: ['type', FeelPopupRenderer]
 };
 
-export { ArrowIcon, CheckboxEntry, CheckboxGroup, CloseIcon, CollapsibleEntry, CreateIcon, index$1 as DebounceInputModule, DeleteIcon, DescriptionContext, Description as DescriptionEntry, DragIcon, DropdownButton, ErrorsContext, EventContext, ExternalLinkIcon, FeelCheckboxEntry, FeelEntry, FeelIcon$1 as FeelIcon, FeelLanguageContext, FeelNumberEntry, index as FeelPopupModule, FeelTemplatingEntry, FeelTextAreaEntry, FeelToggleSwitchEntry, Group, Header, HeaderButton, LaunchIcon, LayoutContext, List as ListEntry, ListGroup, ListItem, NumberFieldEntry, OpenPopupIcon, Placeholder, PropertiesPanel, LayoutContext as PropertiesPanelContext, SelectEntry, Simple as SimpleEntry, TemplatingEntry, TextAreaEntry, TextfieldEntry as TextFieldEntry, ToggleSwitchEntry, TooltipContext, TooltipWrapper as TooltipEntry, isEdited$8 as isCheckboxEntryEdited, isEdited$5 as isFeelEntryEdited, isEdited$6 as isNumberFieldEntryEdited, isEdited$3 as isSelectEntryEdited, isEdited$2 as isSimpleEntryEdited, isEdited$4 as isTemplatingEntryEdited, isEdited$1 as isTextAreaEntryEdited, isEdited as isTextFieldEntryEdited, isEdited$7 as isToggleSwitchEntryEdited, useDebounce, useDescriptionContext, useElementVisible, useError, useErrors, useEvent, useKeyFactory, useLayoutState, usePrevious, useShowEntryEvent, useStaticCallback, useStickyIntersectionObserver, useTooltipContext };
+export { ArrowIcon, CheckboxEntry, CheckboxGroup, CloseIcon, CollapsibleEntry, CreateIcon, index$1 as DebounceInputModule, DeleteIcon, DescriptionContext, Description as DescriptionEntry, DragIcon, DropdownButton, ErrorsContext, EventContext, ExternalLinkIcon, FeelCheckboxEntry, FeelEntry, FeelIcon$1 as FeelIcon, FeelLanguageContext, FeelNumberEntry, index as FeelPopupModule, FeelTemplatingEntry, FeelTextAreaEntry, FeelToggleSwitchEntry, Group, Header, HeaderButton, JsonEditorEntry, LaunchIcon, LayoutContext, List as ListEntry, ListGroup, ListItem, NumberFieldEntry, OpenPopupIcon, Placeholder, PropertiesPanel, LayoutContext as PropertiesPanelContext, SelectEntry, Simple as SimpleEntry, TemplatingEntry, TextAreaEntry, TextfieldEntry as TextFieldEntry, ToggleSwitchEntry, TooltipContext, TooltipWrapper as TooltipEntry, isEdited$9 as isCheckboxEntryEdited, isEdited$5 as isFeelEntryEdited, isEdited$8 as isJsonEditorEntryEdited, isEdited$6 as isNumberFieldEntryEdited, isEdited$3 as isSelectEntryEdited, isEdited$2 as isSimpleEntryEdited, isEdited$4 as isTemplatingEntryEdited, isEdited$1 as isTextAreaEntryEdited, isEdited as isTextFieldEntryEdited, isEdited$7 as isToggleSwitchEntryEdited, useDebounce, useDescriptionContext, useElementVisible, useError, useErrors, useEvent, useKeyFactory, useLayoutState, usePrevious, useShowEntryEvent, useStaticCallback, useStickyIntersectionObserver, useTooltipContext };
 //# sourceMappingURL=index.esm.js.map