@bpmn-io/properties-panel 3.40.5 → 3.41.0

package/dist/index.js

@@ -7,9 +7,15 @@ var jsxRuntime = require('../preact/jsx-runtime');
 var preact = require('../preact');
 var classnames = require('classnames');
 var minDom = require('min-dom');
+var view = require('@codemirror/view');
+var state = require('@codemirror/state');
+var language = require('@codemirror/language');
+var autocomplete = require('@codemirror/autocomplete');
+var commands = require('@codemirror/commands');
+var langJson = require('@codemirror/lang-json');
+var lint = require('@codemirror/lint');
 var feelers = require('feelers');
 var Editor = require('@bpmn-io/feel-editor');
-var view = require('@codemirror/view');
 var focusTrap = require('focus-trap');
 
 function _interopNamespaceDefault(e) {
@@ -1760,7 +1766,7 @@ function CheckboxEntry(props) {
     })]
   });
 }
-function isEdited$8(node) {
+function isEdited$9(node) {
   return node && !!node.checked;
 }
 
@@ -1837,6 +1843,195 @@ function CheckboxGroup(props) {
   });
 }
 
+const ExternalChange = state.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,
+    tooltip,
+    element
+  } = props;
+  const containerRef = hooks.useRef(null);
+  const viewRef = hooks.useRef(null);
+  const editorRef = useShowEntryEvent(id);
+  const onInput = useStaticCallback(newValue => {
+    commitValue(newValue === '' ? undefined : newValue);
+  });
+  const handleChange = useDebounce(onInput, debounce);
+  hooks.useEffect(() => {
+    const view$1 = new view.EditorView({
+      state: state.EditorState.create({
+        doc: value,
+        extensions: [view.highlightSpecialChars(), commands.history(), view.drawSelection(), language.syntaxHighlighting(language.defaultHighlightStyle, {
+          fallback: true
+        }), language.foldGutter(), language.bracketMatching(), autocomplete.closeBrackets(), view.keymap.of([...commands.defaultKeymap, ...commands.historyKeymap, ...autocomplete.closeBracketsKeymap, ...language.foldKeymap]), state.EditorState.tabSize.of(2), view.EditorView.lineWrapping, state.EditorState.readOnly.of(!!disabled), ...(placeholder ? [view.placeholder(placeholder)] : []), view.EditorView.updateListener.of(update => {
+          const isExternal = update.transactions.some(tr => tr.annotation(ExternalChange));
+          if (update.docChanged && !isExternal) {
+            handleChange(update.state.doc.toString());
+          }
+        }), langJson.json(), lint.linter(langJson.jsonParseLinter(), {
+          delay: 300
+        })]
+      }),
+      parent: containerRef.current
+    });
+    viewRef.current = view$1;
+
+    // Allow useShowEntryEvent to focus the editor
+    editorRef.current = view$1.contentDOM;
+    const prefixedId = `bio-properties-panel-${id}`;
+    view$1.contentDOM.setAttribute('id', prefixedId);
+    view$1.contentDOM.setAttribute('aria-label', label);
+    return () => {
+      view$1.destroy();
+    };
+  }, []);
+
+  // Sync external value changes into the editor
+  hooks.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 jsxRuntime.jsxs("div", {
+    class: "bio-properties-panel-json-editor",
+    children: [jsxRuntime.jsx("label", {
+      class: "bio-properties-panel-label",
+      onClick: focusEditor,
+      children: jsxRuntime.jsx(TooltipWrapper, {
+        value: tooltip,
+        forId: id,
+        element: element,
+        children: label
+      })
+    }), jsxRuntime.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] = hooks.useState(value);
+  hooks.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 jsxRuntime.jsxs("div", {
+    class: classnames('bio-properties-panel-entry', error && 'has-error'),
+    "data-entry-id": id,
+    children: [jsxRuntime.jsx(JsonEditor, {
+      id: id,
+      label: label,
+      debounce: debounce,
+      value: value,
+      onInput: onInput,
+      disabled: disabled,
+      placeholder: placeholder,
+      tooltip: tooltip,
+      element: element
+    }, element), error && jsxRuntime.jsx("div", {
+      class: "bio-properties-panel-error",
+      children: error
+    }), jsxRuntime.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 minDash.isObject(JSON.parse(value)) ? null : 'JSON contains errors';
+  } catch (e) {
+    return 'JSON contains errors';
+  }
+}
+
 /**
  * Button to open popups.
  *
@@ -2045,6 +2240,7 @@ const FeelEditor = compat.forwardRef((props, ref) => {
       onKeyDown: onKeyDown,
       onLint: onLint,
       placeholder: placeholder,
+      readOnly: disabled,
       tooltipContainer: tooltipContainer,
       value: localValue,
       variables,
@@ -4946,6 +5142,7 @@ exports.FeelToggleSwitchEntry = FeelToggleSwitchEntry;
 exports.Group = Group;
 exports.Header = Header;
 exports.HeaderButton = HeaderButton;
+exports.JsonEditorEntry = JsonEditorEntry;
 exports.LaunchIcon = LaunchIcon;
 exports.LayoutContext = LayoutContext;
 exports.ListEntry = List;
@@ -4964,8 +5161,9 @@ exports.TextFieldEntry = TextfieldEntry;
 exports.ToggleSwitchEntry = ToggleSwitchEntry;
 exports.TooltipContext = TooltipContext;
 exports.TooltipEntry = TooltipWrapper;
-exports.isCheckboxEntryEdited = isEdited$8;
+exports.isCheckboxEntryEdited = isEdited$9;
 exports.isFeelEntryEdited = isEdited$5;
+exports.isJsonEditorEntryEdited = isEdited$8;
 exports.isNumberFieldEntryEdited = isEdited$6;
 exports.isSelectEntryEdited = isEdited$3;
 exports.isSimpleEntryEdited = isEdited$2;