@dynatrace/strato-components 3.7.1 → 3.9.0

package/esm/editors/base-code-editor/BaseCodeEditor.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { closeCompletion } from "@codemirror/autocomplete";
+import { closeCompletion, startCompletion } from "@codemirror/autocomplete";
 import {
   foldedRanges,
   forceParsing,
@@ -7,6 +7,7 @@ import {
   syntaxTreeAvailable
 } from "@codemirror/language";
 import {
+  Annotation,
   Compartment,
   EditorSelection,
   EditorState,
@@ -25,6 +26,7 @@ import {
 } from "react";
 import { useIntl } from "react-intl";
 import * as styles from "./BaseCodeEditor.sty.js";
+import { configureFormatKeymap } from "./configuration/configure-format-keymap.js";
 import { configureLineWrap } from "./configuration/configure-line-wrap.js";
 import { configurePlaceholder } from "./configuration/configure-placeholder.js";
 import { configureReadOnly } from "./configuration/configure-read-only.js";
@@ -43,6 +45,7 @@ import {
   baseCodeEditorScrollerTestId
 } from "./testIds.js";
 import { calculateFolding } from "./utils/calculate-folding.js";
+import { computeMinimalChange } from "./utils/compute-minimal-change.js";
 import { getKeyMaps } from "./utils/key-maps.js";
 import { runFoldings } from "./utils/run-foldings.js";
 import { sanitizeText } from "./utils/sanitize-text.js";
@@ -50,18 +53,20 @@ import { sanitizeValue } from "./utils/sanitize-value.js";
 import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { useControllableState } from "../../core/hooks/useControllableState.js";
 import { useFocusRing } from "../../core/hooks/useFocusRing.js";
-import { useFormControlState } from "../../core/hooks/useFormControlState.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
+import { devLog } from "../../core/utils/logging.js";
 import { InternalBaseItem as BaseItem } from "../../forms/forms-core/components/form-field-messages/FormFieldMessageBaseItem.js";
-import { useSyncedFormControlProps } from "../../forms/forms-core/hooks/useSyncedFormControlProps.js";
+import { useFormControl } from "../../forms/forms-core/hooks/useFormControl.js";
 import { inputGroupClassName } from "../../layouts/input-group/InputGroup.sty.js";
 EditorView.EDIT_CONTEXT = false;
+const controlledSyncAnnotation = Annotation.define();
 const languageCompartment = new Compartment();
 const editorBaseConfigCompartment = new Compartment();
 const lineWrappingCompartment = new Compartment();
 const keymapCompartment = new Compartment();
 const placeholderCompartment = new Compartment();
 const highlightOnChangeCompartment = new Compartment();
+const formatKeymapCompartment = new Compartment();
 const getEditorConfiguration = (intlProps, options) => {
   const { singleLine, gutterConfiguration, hideLineNumbers, required, size } = options;
   const isRequired = required ?? false;
@@ -98,6 +103,14 @@ function useLazyEditorViewRef() {
         return null;
       }
     });
+    const originalPosAndSideAtCoords = view.posAndSideAtCoords.bind(view);
+    view.posAndSideAtCoords = ((coords, precise) => {
+      try {
+        return originalPosAndSideAtCoords(coords, precise);
+      } catch {
+        return { pos: 0, assoc: 1 };
+      }
+    });
     viewRef.current = view;
   }
   return viewRef;
@@ -124,6 +137,7 @@ const getDomEventHandlers = (onFocus, onBlur) => {
 };
 const BaseCodeEditor = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   const {
+    // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
     controlState,
     value,
     defaultValue,
@@ -145,6 +159,10 @@ const BaseCodeEditor = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     gutterConfiguration,
     id: propId,
     required = false,
+    format,
+    // DEPRECATION: [APPDEV-17404] BREAKING-CHANGE: Remove isControlled prop.
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    isControlled = false,
     style: consumerStyle,
     className: consumerClassName,
     "aria-label": ariaLabel,
@@ -160,7 +178,11 @@ const BaseCodeEditor = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   } = props;
   const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
   const intl = useIntl();
-  const [hasError, hint] = useFormControlState(controlState);
+  const { id, hint, hintProps, inputProps, showError, focusHandlers } = useFormControl({
+    propId,
+    controlState,
+    validationVisibility: "after-blur"
+  });
   const containerRef = useRef(null);
   const rootRef = useMergeRefs([containerRef]);
   const sanitizedOnChange = useCallback(
@@ -168,9 +190,41 @@ const BaseCodeEditor = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     [onChange]
   );
   const viewRef = useLazyEditorViewRef();
-  const { id } = useSyncedFormControlProps({
-    propId
-  });
+  const formatFunctionRef = useRef(format);
+  useEffect(() => {
+    formatFunctionRef.current = format;
+  }, [format]);
+  const handleFormat = useCallback(() => {
+    const currentFormatFunction = formatFunctionRef.current;
+    if (!currentFormatFunction) {
+      devLog(
+        "BaseCodeEditor: format() called but no format function is provided."
+      );
+      return;
+    }
+    const editorView = viewRef.current;
+    const currentValue = editorView.state.doc.toString();
+    let formattedValue;
+    try {
+      formattedValue = currentFormatFunction(currentValue);
+    } catch (error) {
+      devLog(
+        "BaseCodeEditor: format function threw an error, leaving content unchanged.",
+        error
+      );
+      return;
+    }
+    if (!formattedValue || formattedValue === currentValue) {
+      return;
+    }
+    editorView.dispatch({
+      changes: {
+        from: 0,
+        to: editorView.state.doc.length,
+        insert: formattedValue
+      }
+    });
+  }, [viewRef]);
   const valueChangeRef = useRef(void 0);
   const valueRef = useRef(value ?? defaultValue ?? "");
   const isMarkedDirtyRef = useRef(false);
@@ -178,8 +232,12 @@ const BaseCodeEditor = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   const prevLangConfigRef = useRef(void 0);
   const [previousValue, setPreviousValue] = useState("");
   const transactionRef = useRef(void 0);
+  const isControlledRef = useRef(isControlled);
+  const isUserEventComposeRef = useRef(false);
+  const prevControlledValueRef = useRef(void 0);
+  const pendingStartCompletionRef = useRef(false);
   const { focusProps, isFocusVisible } = useFocusRing({
-    color: hasError ? "critical" : "neutral"
+    color: showError ? "critical" : "neutral"
   });
   const [controlledFolding] = useControllableState({
     defaultValue: defaultFolding,
@@ -221,7 +279,8 @@ const BaseCodeEditor = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
           scrollIntoView: true
         });
         viewRef.current.focus();
-      }
+      },
+      format: handleFormat
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
@@ -238,8 +297,11 @@ const BaseCodeEditor = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     const ariaLabelledByAttribute = "aria-labelledby";
     const ariaDetailsAttribute = "aria-details";
     const ariaDescribedByAttribute = "aria-describedby";
-    if (ariaDescribedBy) {
-      contentDOM.setAttribute(ariaDescribedByAttribute, ariaDescribedBy);
+    if (ariaDescribedBy ?? inputProps["aria-describedby"]) {
+      contentDOM.setAttribute(
+        ariaDescribedByAttribute,
+        [ariaDescribedBy, inputProps["aria-describedby"]].filter(Boolean).join(" ")
+      );
     }
     if (ariaDetails) {
       contentDOM.setAttribute(ariaDetailsAttribute, ariaDetails);
@@ -262,7 +324,14 @@ const BaseCodeEditor = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       ariaDetailsAttribute,
       ariaDescribedByAttribute
     ].forEach((ariaAttribute) => contentDOM.removeAttribute(ariaAttribute));
-  }, [ariaLabel, ariaLabelledBy, ariaDetails, ariaDescribedBy, intl]);
+  }, [
+    ariaLabel,
+    ariaLabelledBy,
+    ariaDetails,
+    ariaDescribedBy,
+    inputProps,
+    intl
+  ]);
   useLayoutEffect(() => {
     viewRef.current.requestMeasure();
   }, [viewRef, size]);
@@ -292,15 +361,48 @@ const BaseCodeEditor = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
         doc: value ?? defaultValue ?? "",
         extensions: [
           getDomEventHandlers(onFocus, onBlur),
+          // Track IME composition state so controlled mode does not block candidate characters.
+          EditorView.domEventObservers({
+            compositionstart: () => {
+              isUserEventComposeRef.current = true;
+            },
+            // Defer the reset by one microtask so the CodeMirror commit transaction
+            // (dispatched synchronously during compositionend processing) still sees
+            // isUserEventComposeRef as true and is not blocked in controlled mode.
+            compositionend: () => {
+              queueMicrotask(() => {
+                isUserEventComposeRef.current = false;
+              });
+            }
+          }),
           Prec.highest(keymapCompartment.of(getKeyMaps(viewRef))),
           languageCompartment.of([]),
           editorBaseConfigCompartment.of([]),
           // Indent unit is two spaces instead of tab
           indentUnit.of("  "),
-          // Filter for transactions that gets applied before they are processed. This allows us
-          // to control which transactions go through as well as adding/editing transactions if we please.
+          // Filter for transactions before they are applied. Controls which transactions
+          // go through and allows editing/augmenting them.
           EditorState.transactionFilter.of((transaction) => {
             if (transaction.docChanged) {
+              if (transaction.annotation(controlledSyncAnnotation)) {
+                return handleValueChange(transaction);
+              }
+              if (isControlledRef.current && !isUserEventComposeRef.current) {
+                if (transaction.isUserEvent("undo") || transaction.isUserEvent("redo")) {
+                  return handleValueChange(transaction);
+                }
+                if (transaction.isUserEvent("input.complete")) {
+                  return handleValueChange(transaction);
+                }
+                const newValue = transaction.newDoc.toString();
+                if (transaction.effects.length > 0 || newValue === valueRef.current) {
+                  return handleValueChange(transaction);
+                }
+                transactionRef.current = transaction;
+                valueChangeRef.current?.(newValue);
+                pendingStartCompletionRef.current = true;
+                return [];
+              }
               return handleValueChange(transaction);
             }
             return transaction;
@@ -321,7 +423,8 @@ const BaseCodeEditor = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
           }),
           lineWrappingCompartment.of([]),
           placeholderCompartment.of([]),
-          highlightOnChangeCompartment.of([])
+          highlightOnChangeCompartment.of([]),
+          formatKeymapCompartment.of([])
         ]
       })
     );
@@ -397,10 +500,25 @@ const BaseCodeEditor = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   useEffect(() => {
     configureSpellCheck(spellCheck, readOnly, viewRef);
   }, [viewRef, readOnly, spellCheck]);
+  useEffect(() => {
+    if (format) {
+      configureFormatKeymap(handleFormat, viewRef, formatKeymapCompartment);
+    } else {
+      viewRef.current.dispatch({
+        effects: formatKeymapCompartment.reconfigure([])
+      });
+    }
+  }, [format]);
   useEffect(() => {
     valueChangeRef.current = onChange !== void 0 ? sanitizedOnChange : void 0;
   }, [onChange, sanitizedOnChange]);
   useEffect(() => {
+    isControlledRef.current = isControlled;
+  }, [isControlled]);
+  useEffect(() => {
+    if (isControlledRef.current) {
+      return;
+    }
     if (value === void 0) {
       return;
     }
@@ -443,18 +561,21 @@ const BaseCodeEditor = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       ])
     });
   }, [previousValue]);
+  const prevControlledFoldingRef = useRef([]);
   useEffect(() => {
-    runFoldings(controlledFolding ?? [], viewRef.current);
+    const next = controlledFolding ?? [];
+    runFoldings(next, viewRef.current, prevControlledFoldingRef.current);
+    prevControlledFoldingRef.current = next;
   }, [controlledFolding]);
   useEffect(() => {
     const codeEditorInput = viewRef.current.dom.querySelector(
       "div[contenteditable]"
     );
     if (codeEditorInput) {
-      hasError ? codeEditorInput.setAttribute("aria-invalid", "true") : codeEditorInput.removeAttribute("aria-invalid");
+      showError ? codeEditorInput.setAttribute("aria-invalid", "true") : codeEditorInput.removeAttribute("aria-invalid");
       codeEditorInput.tabIndex = -1;
     }
-  }, [hasError]);
+  }, [showError]);
   const handleOutsideEditorClick = useCallback(
     (e) => {
       const autoCompleteContainer = document.body.querySelector(
@@ -539,6 +660,46 @@ const BaseCodeEditor = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       editorScrollContainer?.removeEventListener("keydown", handleKeyDown);
     };
   }, [focusProps, readOnly, viewRef]);
+  if (isControlled && value !== void 0) {
+    const sanitizedNew = sanitizeValue(value);
+    if (prevControlledValueRef.current === void 0) {
+      prevControlledValueRef.current = sanitizedNew;
+    }
+    if (sanitizedNew !== prevControlledValueRef.current) {
+      prevControlledValueRef.current = sanitizedNew;
+      const valueToApply = sanitizedNew;
+      queueMicrotask(() => {
+        const shouldStartCompletion = pendingStartCompletionRef.current;
+        pendingStartCompletionRef.current = false;
+        if (viewRef.current.state.doc.toString() === valueToApply) {
+          if (shouldStartCompletion) {
+            startCompletion(viewRef.current);
+          }
+          return;
+        }
+        const lastTransaction = transactionRef.current;
+        const savedCursorAnchor = lastTransaction?.newSelection?.main?.anchor;
+        const anchor = savedCursorAnchor !== void 0 ? Math.min(savedCursorAnchor, valueToApply.length) : void 0;
+        valueRef.current = valueToApply;
+        try {
+          viewRef.current.dispatch(
+            viewRef.current.state.update({
+              changes: computeMinimalChange(
+                viewRef.current.state.doc.toString(),
+                valueToApply
+              ),
+              selection: anchor !== void 0 ? { anchor } : void 0,
+              annotations: controlledSyncAnnotation.of(true)
+            })
+          );
+        } catch {
+        }
+        if (shouldStartCompletion) {
+          startCompletion(viewRef.current);
+        }
+      });
+    }
+  }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "div",
@@ -548,7 +709,7 @@ const BaseCodeEditor = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
           styles.editorContainer({
             focusVisible: isFocusVisible,
             fullHeight,
-            hasError,
+            hasError: showError,
             lineNumbers: singleLine || hideLineNumbers ? "hidden" : void 0,
             readOnly,
             size
@@ -562,6 +723,7 @@ const BaseCodeEditor = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
         "data-dtrum-allow": dataDtrumAllow,
         ...behavioralTrackingProps,
         ...restProps,
+        ...focusHandlers,
         "data-dt-component": dataDtComponent
       }
     ),
@@ -589,13 +751,13 @@ const BaseCodeEditor = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
         }
       }
     ),
-    (hasError || hint) && /* @__PURE__ */ jsx(
+    hint && /* @__PURE__ */ jsx(
       "span",
       {
-        "aria-live": "polite",
+        ...hintProps,
         "data-dtrum-mask": dataDtrumMask,
         "data-dtrum-allow": dataDtrumAllow,
-        children: /* @__PURE__ */ jsx(BaseItem, { variant: hasError ? "error" : "hint", children: hint })
+        children: /* @__PURE__ */ jsx(BaseItem, { variant: showError ? "error" : "hint", children: hint })
       }
     )
   ] });