Function RawStringEditor

frontend/src/react/components/ExprEditor.tsx:1276–1319

({
  expr,
  groupPath,
  operandIndex,
}: {
  expr: RawStringExpr;
  groupPath: Path;
  operandIndex: number;
})

// ============================================================

function RawStringEditor({
  expr,
  groupPath,
  operandIndex,
}: {
  expr: RawStringExpr;
  groupPath: Path;
  operandIndex: number;
}) {
  const { readonly } = useExprEditorCtx();
  const doUpdate = useImmutableUpdate(groupPath);

  return (
    <div className="w-full flex items-start gap-x-1">
      <textarea
        className="flex-1 min-h-16 max-h-24 px-2 py-1 text-sm rounded-xs border border-control-border bg-background resize-y disabled:opacity-50"
        placeholder="Enter raw CEL expression"
        value={expr.content}
        disabled={readonly}
        rows={2}
        onChange={(e) => {
          const newContent = e.target.value;
          doUpdate((group) => {
            const raw = group.args[operandIndex] as RawStringExpr;
            raw.content = newContent;
          });
        }}
      />
      {!readonly && (
        <button
          type="button"
          className="shrink-0 size-7 flex items-center justify-center rounded-xs text-control-placeholder hover:text-control hover:bg-control-bg"
          onClick={() =>
            doUpdate((group) => {
              group.args.splice(operandIndex, 1);
            })
          }
        >
          <Trash2 className="size-3.5" />
        </button>
      )}
    </div>
  );
}

// ============================================================
// ConditionGroup (recursive)