@object-ui/fields 17.2.0 → 17.5.0

package/src/widgets/RecordPickerDialog.selectLabel.test.tsx

@@ -0,0 +1,112 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Record Picker select-column label resolution — #3333.
+ *
+ * The "Browse all records" picker table must format cells with the SAME
+ * field metadata the list view uses. Pre-fix the dialog handed the cell
+ * renderer a bare `{ name, type }` descriptor, so a `select` column had no
+ * `options` and fell back to title-casing the raw stored value
+ * (`manufacturing` → "Manufacturing" instead of the authored label).
+ *
+ * With `fieldsMeta` (the referenced object's schema `fields` map) the dialog
+ * enriches each column's field descriptor — options, currency, scale, … —
+ * so select columns resolve their option labels, and string-authored
+ * `lookup_columns` (no `type` on the column def) inherit the schema field's
+ * type and format identically.
+ */
+
+import { render, screen, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { RecordPickerDialog } from './RecordPickerDialog';
+import { getCellRenderer } from '../index';
+
+const projects = [
+  { id: 'p1', name: 'Line A retooling', project_phase: 'manufacturing' },
+];
+
+const projectFields = {
+  name: { type: 'text', label: 'Name' },
+  project_phase: {
+    type: 'select',
+    label: 'Project Phase',
+    options: [
+      { label: '01 立项', value: 'initiation' },
+      { label: '03 制造', value: 'manufacturing' },
+    ],
+  },
+};
+
+function makeDataSource() {
+  const find = vi.fn(async () => ({ data: projects, total: projects.length }));
+  return { find } as any;
+}
+
+describe('RecordPickerDialog — select columns resolve option labels (#3333)', () => {
+  it('renders the authored option label when fieldsMeta provides options', async () => {
+    render(
+      <RecordPickerDialog
+        open
+        onOpenChange={() => {}}
+        dataSource={makeDataSource()}
+        objectName="projects"
+        columns={[
+          { field: 'name', label: 'Name', type: 'text' },
+          { field: 'project_phase', label: 'Project Phase', type: 'select' },
+        ]}
+        onSelect={() => {}}
+        cellRenderer={getCellRenderer}
+        fieldsMeta={projectFields}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('03 制造')).toBeInTheDocument();
+    });
+    expect(screen.queryByText('Manufacturing')).not.toBeInTheDocument();
+  });
+
+  it('string-authored columns without a type inherit the schema field type', async () => {
+    render(
+      <RecordPickerDialog
+        open
+        onOpenChange={() => {}}
+        dataSource={makeDataSource()}
+        objectName="projects"
+        columns={['name', 'project_phase']}
+        onSelect={() => {}}
+        cellRenderer={getCellRenderer}
+        fieldsMeta={projectFields}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('03 制造')).toBeInTheDocument();
+    });
+    expect(screen.queryByText('Manufacturing')).not.toBeInTheDocument();
+  });
+
+  it('falls back to the humanized raw value without fieldsMeta (legacy behavior)', async () => {
+    render(
+      <RecordPickerDialog
+        open
+        onOpenChange={() => {}}
+        dataSource={makeDataSource()}
+        objectName="projects"
+        columns={[{ field: 'project_phase', label: 'Project Phase', type: 'select' }]}
+        onSelect={() => {}}
+        cellRenderer={getCellRenderer}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Manufacturing')).toBeInTheDocument();
+    });
+  });
+});

package/src/widgets/RecordPickerDialog.tsx

@@ -38,6 +38,11 @@ import {
   X,
 } from 'lucide-react';
 import type { DataSource, LookupColumnDef, LookupFilterDef } from '@object-ui/types';
+// The repo's single filter sink (`packages/core/src/utils/filter-converter.ts`)
+// — shared with plugin-list's `buildEffectiveFilter` and plugin-view's
+// ObjectView, so a spec `ViewFilterRule[]` lowers in exactly one place.
+import { mergeFilterNodes } from '@object-ui/core';
+import { useSafeFieldLabel, useDisplayLocale } from '@object-ui/i18n';
 import { useFieldTranslation } from './useFieldTranslation';
 import { useRecordQuery } from './useRecordQuery';
 
@@ -184,10 +189,107 @@ export function lookupFiltersToRecord(
   return result;
 }
 
+/**
+ * A select option as the object schema declares it — `{ value, label }` plus
+ * whatever the renderer also reads (`color`, …), which the i18n translation
+ * carries through untouched.
+ */
+type SchemaOption = { value: any; label: string; [key: string]: any };
+
+/**
+ * Resolve a field's select options from the referenced object's schema field
+ * definition (`fieldsMeta[field]`), translated through the shared i18n option
+ * path.
+ *
+ * This is the SINGLE source for both surfaces that need option labels: the
+ * table cells (#3333) and the filter panel's select inputs (#3336) — so a
+ * picker column and the filter input for that same column can never disagree
+ * about what an option is called.
+ *
+ * Returns `undefined` when the schema field declares no options: a select
+ * field with no authored options genuinely has nothing to offer, and
+ * synthesising entries from the loaded page's raw stored values would paper
+ * over the metadata gap with a list that changes per page.
+ */
+function resolveSchemaOptions(
+  meta: { options?: unknown } | undefined,
+  objectName: string,
+  fieldName: string,
+  translateOptions: (o: string, f: string, opts: SchemaOption[]) => SchemaOption[],
+): SchemaOption[] | undefined {
+  const raw = meta?.options;
+  if (!Array.isArray(raw) || raw.length === 0) return undefined;
+  const options = raw as SchemaOption[];
+  if (!objectName) return options;
+  return translateOptions(objectName, fieldName, options);
+}
+
+/**
+ * Option-value round-trip helpers for the filter panel's `select` input
+ * (#3422).
+ *
+ * Radix `Select` speaks strings only: an option renders as
+ * `value={String(opt.value)}` and `onValueChange` hands that same string back.
+ * A filter option's value, however, is whatever the metadata author wrote —
+ * `lookup_filters: [{ field: 'level', operator: 'in', value: [1, 2, 3] }]`
+ * derives options with NUMBER values (`LookupFilterDef.value` is `unknown`) —
+ * so writing the control's string straight into `$filter` queried
+ * `{ level: "1" }` against records storing `level: 1`, and the panel returned
+ * nothing for an option that plainly has records.
+ *
+ * The remap therefore happens at the CONTROL boundary, not in
+ * `filterValuesToRecord`: the control speaks string, the payload keeps the
+ * authored type. Coercing downstream would mean guessing whether `"1"` meant
+ * `1` or `"1"` — a guess the option list already answers exactly.
+ *
+ * Replicated from `matchOptionValue` / `toControlValue` in
+ * `packages/components/src/renderers/form/option-value.ts` (#3090), which
+ * solved the identical morph for the standalone form's select. Those two are
+ * module-private to `@object-ui/components` (its public barrel does not export
+ * them and the package publishes no deep subpath), so `@object-ui/fields`
+ * keeps its own copy of the four lines rather than widening another package's
+ * API to share them.
+ */
+
+/**
+ * Stringify a value for a string-speaking control, preserving null/undefined
+ * (an absent value must stay absent, not become `"undefined"`).
+ */
+function toControlValue(value: unknown): string | undefined {
+  return value == null ? undefined : String(value);
+}
+
+/**
+ * Map a control's string back to the authored option value, so a numeric /
+ * boolean / object option round-trips with its type intact. Falls back to the
+ * raw string when nothing matches (a stale value, or a column that declares no
+ * options) — the pre-#3422 behaviour, so unmatched paths change nothing.
+ *
+ * When two options share a `String()` form — `1` and `'1'`, or two object
+ * values that both print `[object Object]` — the FIRST match wins. Such a list
+ * is already unrenderable as a dropdown (Radix would receive two `SelectItem`s
+ * with the same `value`, and React two children with the same key), so this
+ * tie-break exists to be deterministic, not to make an ambiguous option list
+ * work.
+ */
+function matchOptionValue(
+  options: ReadonlyArray<{ value: unknown }> | undefined,
+  raw: string,
+): unknown {
+  const hit = options?.find(o => String(o.value) === raw);
+  return hit ? hit.value : raw;
+}
+
 /**
  * Convert user-entered filter bar values into a $filter Record.
  * Each key is a field name, each value the user-entered value.
  * Empty/null values are ignored.
+ *
+ * Note the empty string is the "no filter on this field" sentinel here (and
+ * the `select` control's "nothing picked" value), so an option whose authored
+ * value is `''` cannot be expressed as an active filter. That predates #3422
+ * and is unchanged by it — the round-trip above restores an option's TYPE, it
+ * does not redefine what counts as an empty selection.
  */
 function filterValuesToRecord(
   values: Record<string, any>,
@@ -262,13 +364,39 @@ export interface RecordPickerDialogProps {
   lookupFilters?: LookupFilterDef[];
 
   /**
-   * Hard filter constraints applied to every query, in QueryParams.$filter
-   * record form. Unlike `lookupFilters`, entries here never surface in the
-   * filter bar and cannot be overridden by user filter input — used for the
-   * dependent (cascading) lookup chain, where the parent field's value MUST
-   * scope the candidate set (#2215).
+   * Hard filter constraint applied to every query. Unlike `lookupFilters`,
+   * entries here never surface in the filter bar and cannot be overridden by
+   * user filter input.
+   *
+   * Two shapes, discriminated STRUCTURALLY (`Array.isArray`), because the two
+   * callers speak two legitimate vocabularies and neither should be bent into
+   * the other:
+   *
+   * - **`QueryParams.$filter` record form** (`{ account: 'a1' }`) — the
+   *   dependent (cascading) lookup chain, where the parent field's value MUST
+   *   scope the candidate set (#2215). Merged by KEY OVERWRITE, so a cascaded
+   *   value REPLACES a stale `lookupFilters` entry on the same field instead of
+   *   intersecting with it. That precedence is load-bearing: an `and` of both
+   *   would ask for `account = 'stale' AND account = 'a1'` and return nothing.
+   * - **A spec `ViewFilterRule[]`** (`[{ field, operator, value? }]`) — an
+   *   author's `record:related_list.add.picker.filter`, handed over VERBATIM
+   *   (#3831). Lowered by `mergeFilterNodes`, the repo's single filter sink, so
+   *   all 19 `VIEW_FILTER_OPERATORS` reach the wire — including the four
+   *   (`before`, `after`, `is_empty`, `is_not_empty`) the record form has no
+   *   `$op` for. No second operator vocabulary is introduced here: two already
+   *   exist (the spec's `AST_OPERATOR_MAP`, data-objectstack's
+   *   `FILTER_OPERATOR_ALIASES`) and #3948 is what a third costs.
+   *
+   * The discriminator is exact rather than heuristic — every AST node is an
+   * ARRAY and a rule is a plain OBJECT, the same predicate `toFilterNode` uses.
+   *
+   * Typed `unknown` rather than `Record< string, any >` on purpose: that type
+   * ACCEPTED a rule array (TypeScript lets an array satisfy a string index of
+   * `any`), the old object-spread merge then flattened it to
+   * `{"0": {...}, "1": {...}}`, and the query filtered on columns literally
+   * named `0`/`1` — type-check green, wrong query, no diagnostic anywhere.
    */
-  baseFilter?: Record<string, any>;
+  baseFilter?: unknown;
 
   /**
    * Cell renderer resolver function.
@@ -278,6 +406,23 @@ export interface RecordPickerDialogProps {
    */
   cellRenderer?: CellRendererResolver;
 
+  /**
+   * The referenced object's schema `fields` map (field name → field
+   * definition). When provided, cell renderers receive the FULL field
+   * metadata — `options`, `currency`, `scale`, `precision`, `format`,
+   * `reference_to`, … — exactly like the list view enriches its columns from
+   * the object schema. Without it a `select` column falls back to
+   * title-casing the raw stored value instead of resolving the option label
+   * (#3333: `manufacturing` rendered as "Manufacturing" instead of the
+   * authored option label).
+   *
+   * The filter bar reads the same map: a `select` filter column with no
+   * authored `options` takes them from the schema field here, so the filter
+   * panel's dropdown offers exactly the options the table cells render
+   * (#3336 — it used to open empty, leaving the field unfilterable).
+   */
+  fieldsMeta?: Record<string, any>;
+
   /**
    * Filter bar column definitions.
    * When provided, shows an inline filter bar below the search input.
@@ -344,11 +489,16 @@ export function RecordPickerDialog({
   lookupFilters,
   baseFilter,
   cellRenderer,
+  fieldsMeta,
   filterColumns,
   renderFilterBar,
   renderGrid,
 }: RecordPickerDialogProps) {
   const { t } = useFieldTranslation();
+  const { translateOptions } = useSafeFieldLabel();
+  // The one date/number locale resolver: tenant regional default → active UI
+  // language → 'en' (objectui#4272). Read unconditionally at component level.
+  const displayLocale = useDisplayLocale();
 
   // Query state (records/loading/error/total + page/search/sort) lives in the
   // shared useRecordQuery kernel — instantiated after mergedFilter below.
@@ -385,9 +535,31 @@ export function RecordPickerDialog({
     return [{ field: displayField, label: fieldToLabel(displayField) }];
   }, [columnsProp, displayField]);
 
+  // Field descriptors handed to the type-aware cell renderers, enriched from
+  // the referenced object's schema (`fieldsMeta`) the same way the list view
+  // enriches its columns. This is what lets a `select` column resolve its
+  // option label (options + i18n) instead of title-casing the raw value
+  // (#3333). Columns whose def carries no `type` inherit the schema field's
+  // type so authored string `lookup_columns` format identically.
+  const columnFieldDescriptors = useMemo<Record<string, any>>(() => {
+    const map: Record<string, any> = {};
+    for (const col of resolvedColumns) {
+      const meta = fieldsMeta?.[col.field];
+      const type = col.type ?? meta?.type;
+      if (!type) continue;
+      const descriptor: any = meta
+        ? { ...meta, name: col.field, type }
+        : { name: col.field, type };
+      const options = resolveSchemaOptions(meta, objectName, col.field, translateOptions);
+      if (options) descriptor.options = options;
+      map[col.field] = descriptor;
+    }
+    return map;
+  }, [resolvedColumns, fieldsMeta, objectName, translateOptions]);
+
   // Auto-generate filter columns from lookupFilters when no explicit filterColumns given.
   // Each LookupFilterDef becomes a filterable field with inferred type.
-  const effectiveFilterColumns = useMemo<RecordPickerFilterColumn[] | undefined>(() => {
+  const baseFilterColumns = useMemo<RecordPickerFilterColumn[] | undefined>(() => {
     if (filterColumns && filterColumns.length > 0) return filterColumns;
     // Auto-derive from lookupFilters: each filter entry becomes a filterable field
     if (lookupFilters && lookupFilters.length > 0) {
@@ -425,18 +597,56 @@ export function RecordPickerDialog({
     return undefined;
   }, [filterColumns, lookupFilters]);
 
-  // Merge base lookup_filters with user filter bar values. The hard
-  // `baseFilter` constraint (dependent-lookup chain, #2215) is spread LAST so
-  // user filter-bar input can never widen it back out.
-  const mergedFilter = useMemo<Record<string, any> | undefined>(() => {
+  // Filter columns as the filter bar consumes them: every `select` filter
+  // carries the options its schema field declares. The filter panel's Select reads
+  // `col.options` — a derived select column (LookupField turns each typed picker
+  // column into a filter column) carries none, so the dropdown opened empty and
+  // the field could not be filtered at all (#3336).
+  //
+  // The options come from `fieldsMeta` through `resolveSchemaOptions`, i.e. the
+  // SAME schema source + i18n translation the table cells use (#3333) — not a
+  // second derivation that could drift from the cells. An explicitly authored
+  // `options` list on the filter column always wins (it is the more specific
+  // statement), and a schema field with no options stays optionless: an empty
+  // dropdown for THAT field is the honest rendering of missing metadata.
+  const effectiveFilterColumns = useMemo<RecordPickerFilterColumn[] | undefined>(() => {
+    if (!baseFilterColumns) return undefined;
+    return baseFilterColumns.map(col => {
+      if (col.type !== 'select') return col;
+      if (col.options && col.options.length > 0) return col;
+      const options = resolveSchemaOptions(fieldsMeta?.[col.field], objectName, col.field, translateOptions);
+      return options ? { ...col, options } : col;
+    });
+  }, [baseFilterColumns, fieldsMeta, objectName, translateOptions]);
+
+  // Merge base lookup_filters with user filter bar values, then apply the hard
+  // `baseFilter` constraint BY SHAPE (see the prop's own doc for why the two
+  // shapes exist):
+  //
+  //   record form → spread LAST, exactly as this merge has always done, so
+  //                 user filter-bar input can never widen it back out and a
+  //                 cascaded parent value replaces a stale same-field
+  //                 `lookupFilters` entry (#2215).
+  //   rule array  → its OWN `and` child via `mergeFilterNodes`, the shared
+  //                 sink, so a spec `ViewFilterRule[]` lowers losslessly
+  //                 (#3831) instead of being spread into `{0: rule}`.
+  //
+  // When BOTH are in play the record side is still built first and lowered as
+  // one node, so its key-overwrite precedence survives the conjunction.
+  const mergedFilter = useMemo<unknown>(() => {
     const lookupBase = lookupFilters?.length
       ? lookupFiltersToRecord(lookupFilters)
       : {};
     const userFilter = effectiveFilterColumns?.length
       ? filterValuesToRecord(filterValues, effectiveFilterColumns)
       : {};
-    const combined = { ...lookupBase, ...userFilter, ...(baseFilter ?? {}) };
-    return Object.keys(combined).length > 0 ? combined : undefined;
+    const rules = Array.isArray(baseFilter) ? baseFilter : undefined;
+    const recordBase = rules
+      ? undefined
+      : (baseFilter as Record<string, any> | undefined);
+    const combined = { ...lookupBase, ...userFilter, ...(recordBase ?? {}) };
+    const record = Object.keys(combined).length > 0 ? combined : undefined;
+    return rules ? mergeFilterNodes(record, rules) : record;
   }, [lookupFilters, effectiveFilterColumns, filterValues, baseFilter]);
 
   // Shared query kernel: builds params, fetches, and owns records/loading/error/
@@ -637,11 +847,13 @@ export function RecordPickerDialog({
 
     const val = record[col.field];
 
-    // Use type-aware renderer when column type and resolver are available
-    if (col.type && cellRenderer) {
-      const Renderer = cellRenderer(col.type);
+    // Use type-aware renderer when a field descriptor (column `type`, or the
+    // schema field's type via `fieldsMeta`) and a resolver are available.
+    const descriptor = columnFieldDescriptors[col.field];
+    if (descriptor && cellRenderer) {
+      const Renderer = cellRenderer(descriptor.type);
       if (Renderer) {
-        return <Renderer value={val} field={{ name: col.field, type: col.type } as any} />;
+        return <Renderer value={val} field={descriptor} />;
       }
     }
 
@@ -651,13 +863,13 @@ export function RecordPickerDialog({
       // Handle MongoDB types / expanded references
       if (val.$numberDecimal) return String(Number(val.$numberDecimal));
       if (val.$oid) return String(val.$oid);
-      if (val.$date) return new Date(val.$date).toLocaleDateString();
+      if (val.$date) return new Date(val.$date).toLocaleDateString(displayLocale);
       if (val.name || val.label) return String(val.name || val.label);
       return JSON.stringify(val);
     }
     if (typeof val === 'boolean') return val ? 'Yes' : 'No';
     return String(val);
-  }, [cellRenderer, titleFormat, displayField]);
+  }, [cellRenderer, titleFormat, displayField, columnFieldDescriptors, displayLocale]);
 
   // Render sort indicator for a column
   const renderSortIcon = useCallback((field: string) => {
@@ -727,9 +939,11 @@ export function RecordPickerDialog({
           return (
             <div className="space-y-1">
               <Label className="text-xs text-muted-foreground">{label}</Label>
+              {/* The control speaks string; the stored filter value keeps the
+                  authored option type (#3422 — see `matchOptionValue`). */}
               <Select
-                value={val !== undefined && val !== null ? String(val) : ''}
-                onValueChange={v => handleFilterChange(col.field, v)}
+                value={toControlValue(val) ?? ''}
+                onValueChange={v => handleFilterChange(col.field, matchOptionValue(col.options, v))}
               >
                 <SelectTrigger className="h-8 text-xs">
                   <SelectValue placeholder={t('lookup.filterPlaceholder', { label })} />

package/src/widgets/RichTextField.tsx

@@ -1,18 +1,112 @@
 import React from 'react';
-import { Textarea, EmptyValue } from '@object-ui/components';
+import { cn, Textarea, EmptyValue } from '@object-ui/components';
 import { useObjectTranslation } from '@object-ui/react';
+import { FullscreenFieldEditor } from './FullscreenFieldEditor';
 import { FieldWidgetComponentProps } from './types';
 
+/**
+ * The rich-text editing surface, rendered by `RichTextField` in BOTH positions:
+ * inline in the form, and inside the fullscreen dialog.
+ *
+ * Sharing it is the point of objectui#3301's acceptance criterion "the dialog
+ * holds the real editor". Had the dialog inlined a bare `<Textarea>` instead,
+ * the two surfaces would already disagree (no format indicator) and would keep
+ * disagreeing every time this widget gains an affordance — whatever the editor
+ * grows into (a toolbar, a TipTap/Lexical instance, a preview toggle), both
+ * positions get it at once because there is only one of them.
+ *
+ * `fullHeight` is the only difference between the two renderings: inline the
+ * textarea is `rows`-sized, in the dialog it fills the available height.
+ */
+function RichTextEditorSurface({
+  value,
+  onChange,
+  formatLabel,
+  hint,
+  placeholder,
+  rows,
+  disabled,
+  error,
+  className,
+  fullHeight,
+  autoFocus,
+  textareaTestId,
+  overlay,
+}: {
+  value: string;
+  onChange: (next: string) => void;
+  formatLabel: string;
+  hint: string;
+  placeholder?: string;
+  rows?: number;
+  disabled?: boolean;
+  error?: string;
+  className?: string;
+  fullHeight?: boolean;
+  autoFocus?: boolean;
+  textareaTestId?: string;
+  /** Absolutely-positioned children over the textarea (the expand affordance). */
+  overlay?: React.ReactNode;
+}) {
+  return (
+    <div className={cn('space-y-2', fullHeight && 'flex flex-col h-full')}>
+      <div className="flex items-center justify-between text-xs text-gray-500">
+        <span>{formatLabel}</span>
+        <span className="italic">{hint}</span>
+      </div>
+      <div className={cn('relative', fullHeight && 'flex-1 min-h-0')}>
+        <Textarea
+          value={value || ''}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={placeholder}
+          disabled={disabled}
+          autoFocus={autoFocus}
+          rows={fullHeight ? undefined : rows}
+          // `text-base` in the dialog for the same reason `TextAreaField` uses
+          // it there: sub-16px inputs make iOS Safari zoom on focus, which is
+          // exactly wrong for a surface the user opened to get more room.
+          className={cn(
+            'font-mono',
+            fullHeight ? 'text-base h-full min-h-full resize-none' : 'text-sm',
+            className,
+          )}
+          aria-invalid={!!error}
+          data-testid={textareaTestId}
+        />
+        {overlay}
+      </div>
+    </div>
+  );
+}
+
 /**
  * Rich text field with markdown/HTML support
  * For now, this is a simple textarea. A full implementation would use
  * a rich text editor like TipTap, Lexical, or Slate.
+ *
+ * Reached by forms as `field:markdown` and `field:html`; both resolve here.
+ *
+ * ## Fullscreen editing (objectui#3301)
+ *
+ * `ObjectForm` stamps `mobile_fullscreen` onto the metadata of every long-text
+ * field — textarea AND rich-text — when `ObjectFormSchema.mobile
+ * .fullscreenLongText` is set, and `ObjectFormSchema.mobile`'s own JSDoc has
+ * always promised "textarea/rich-text get an expand button". This widget never
+ * read the flag, so for `field:markdown` / `field:html` that promise did
+ * nothing at all: the producer stamped, and no consumer existed.
+ *
+ * The flag is read off `field` and nowhere else — the single metadata carrier
+ * since objectui#3233 — matching `TextAreaField` read for read, so a
+ * misspelled flag stays inert in both widgets rather than being caught by a
+ * tolerant fallback in one of them. The affordance and dialog themselves come
+ * from the shared `FullscreenFieldEditor`, so one form-level setting keeps
+ * producing one behaviour across both widgets.
  */
-export function RichTextField({ value, onChange, field, readonly, errorMessage, ...props }: FieldWidgetComponentProps<string>) {
+export function RichTextField({ value, onChange, field, readonly, error, ...props }: FieldWidgetComponentProps<string>) {
   const { t } = useObjectTranslation();
   if (readonly) {
     return (
-      <div 
+      <div
         className="text-sm prose prose-sm max-w-none"
       >
         {value || <EmptyValue />}
@@ -20,30 +114,63 @@ export function RichTextField({ value, onChange, field, readonly, errorMessage,
     );
   }
 
-  const richField = (field || (props as any).schema) as any;
+  const richField = field as any;
   const rows = richField?.rows || 8;
   const format = richField?.format || 'markdown'; // 'markdown' or 'html'
+  // Same single read as `TextAreaField`: the field metadata is the only
+  // carrier, and this widget is the second consumer the flag always had.
+  const showFullscreenButton = Boolean(richField?.mobile_fullscreen);
+  // Resolved once and given to BOTH renderings of the editor (objectui#3402) —
+  // exactly like `formatLabel` / `hint` / `placeholder` below, and for the same
+  // reason. Landing it on the inline surface alone left a disabled rich-text
+  // field greyed out next to a live expand button whose dialog committed any
+  // edit through `onCommit`. `disabled` also carries the form's `isSubmitting`.
+  const disabled = Boolean(props.disabled);
+
+  // Resolved once and handed to BOTH renderings of the editor, so the dialog
+  // cannot drift into showing different copy than the inline surface.
+  const formatLabel = t('fields.richText.format', { format, defaultValue: `Format: ${format}` });
+  const hint = t('fields.richText.basicEditorHint', { defaultValue: 'Rich text editor (basic)' });
+  const placeholder =
+    richField?.placeholder ||
+    t('fields.richText.placeholder', { defaultValue: 'Enter text…' });
 
   return (
-    <div className="space-y-2">
-      <div className="flex items-center justify-between text-xs text-gray-500">
-        <span>{t('fields.richText.format', { format, defaultValue: `Format: ${format}` })}</span>
-        <span className="italic">
-          {t('fields.richText.basicEditorHint', { defaultValue: 'Rich text editor (basic)' })}
-        </span>
-      </div>
-      <Textarea
-        value={value || ''}
-        onChange={(e) => onChange(e.target.value)}
-        placeholder={
-          richField?.placeholder ||
-          t('fields.richText.placeholder', { defaultValue: 'Enter text...' })
-        }
-        disabled={readonly || props.disabled}
-        rows={rows}
-        className={`font-mono text-sm ${props.className || ''}`}
-        aria-invalid={!!errorMessage}
-      />
-    </div>
+    <RichTextEditorSurface
+      value={value}
+      onChange={onChange}
+      formatLabel={formatLabel}
+      hint={hint}
+      placeholder={placeholder}
+      rows={rows}
+      disabled={readonly || disabled}
+      error={error}
+      className={props.className}
+      overlay={
+        showFullscreenButton && (
+          <FullscreenFieldEditor
+            value={value ?? ''}
+            onCommit={onChange}
+            label={richField?.label}
+            testIdPrefix="richtext"
+            disabled={disabled}
+          >
+            {(draft, setDraft, editorDisabled) => (
+              <RichTextEditorSurface
+                value={draft}
+                onChange={setDraft}
+                formatLabel={formatLabel}
+                hint={hint}
+                placeholder={placeholder}
+                disabled={editorDisabled}
+                autoFocus
+                fullHeight
+                textareaTestId="richtext-fullscreen-input"
+              />
+            )}
+          </FullscreenFieldEditor>
+        )
+      }
+    />
   );
 }