@multiplatform.one/rich-text 7.4.0 → 7.5.0

package/src/RichEditor.stories.tsx

@@ -3,9 +3,10 @@
  *
  * Stories: Main, WithInitialContent, WithoutToolbar, BubbleToolbarOnly,
  * MinimalToolbar, ReadOnly, WithError, WithMaxHeight, Interactive,
- * FormIntegrated, Skeleton
+ * FormIntegrated, Skeleton, InTable
  */
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import { useForm } from "@tanstack/react-form";
 import { useRef, useState } from "react";
 // Catalog Button (LC-56 story honesty): stories compose catalog controls, never raw tamagui ones.
@@ -518,3 +519,37 @@ export const WithUploadHooks: Story = {
       ),
   },
 };
+
+// ---------------------------------------------------------------------------
+// InTable (colocated DataTable cell — SB-KS-02 sized parent, no pagination)
+// ---------------------------------------------------------------------------
+
+type InTableRow = { id: string; label: string; value: string };
+
+export const InTable: Story = {
+  name: "In table",
+  render: () => {
+    const [data, setData] = useState<InTableRow[]>([
+      { id: "1", label: "Alpha", value: "<p>Hello <strong>world</strong></p>" },
+      { id: "2", label: "Beta", value: "" },
+      {
+        id: "3",
+        label: "Gamma",
+        value: "<ul><li>Draft</li><li>Review</li><li>Ship</li></ul>",
+      },
+    ]);
+    const columns: DataTableColumn<InTableRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      {
+        accessorKey: "value",
+        header: "Rich text",
+        field: "richtexteditor",
+      },
+    ];
+    return (
+      <YStack width="100%" height={360}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    );
+  },
+};

package/src/RichTextEditor/index.tsx

@@ -10,10 +10,11 @@
  * Uses custom empty check for '<p></p>' which is Tiptap's empty state.
  */
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
+import type { RefObject } from "react";
 import type React from "react";
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import type { LabelProps, SizeTokens } from "tamagui";
-import { YStack } from "tamagui";
+import { isWeb } from "tamagui";
 
 import {
   Field,
@@ -44,7 +45,83 @@ import { t } from "../shared/t";
  * Rich text empty check: treats null, undefined, empty string, and
  * Tiptap's default empty paragraph as empty values.
  */
-const richTextIsEmpty = (v: unknown): boolean => !v || v === "<p></p>" || v === "";
+export function richTextIsEmpty(v: unknown): boolean {
+  return !v || v === "<p></p>" || v === "";
+}
+
+function applyExternalContent(
+  editor: RichEditorRef | null,
+  next: string,
+  capabilities?: EditorCapabilities,
+) {
+  if (!editor) return;
+  if (capabilities === "markdown") {
+    editor.setMarkdown(next);
+    return;
+  }
+  editor.setHTML(next);
+}
+
+/**
+ * Mirrors a host value (controlled `value` or TanStack field state) into the
+ * editor after mount. Display-only: never emits onChange (LC-14).
+ */
+function RichTextExternalValueSync({
+  value,
+  editorRef,
+  capabilities,
+}: {
+  value: string;
+  editorRef: RefObject<RichEditorRef | null>;
+  capabilities?: EditorCapabilities;
+}) {
+  const isFirst = useRef(true);
+  const lastPushed = useRef(value);
+  useEffect(() => {
+    if (isFirst.current) {
+      isFirst.current = false;
+      lastPushed.current = value;
+      return;
+    }
+    if (value === lastPushed.current) return;
+    lastPushed.current = value;
+    applyExternalContent(editorRef.current, value, capabilities);
+  }, [value, editorRef, capabilities]);
+  return null;
+}
+
+function EditorFocusTarget({
+  id,
+  editorRef,
+}: {
+  id: string;
+  editorRef: RefObject<RichEditorRef | null>;
+}) {
+  if (!isWeb) return null;
+  return (
+    <textarea
+      id={id}
+      tabIndex={-1}
+      aria-hidden
+      readOnly
+      value=""
+      onFocus={(event) => {
+        event.currentTarget.blur();
+        editorRef.current?.focus();
+      }}
+      style={{
+        position: "absolute",
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: 0,
+        border: 0,
+        opacity: 0,
+        overflow: "hidden",
+      }}
+    />
+  );
+}
 
 // ---------------------------------------------------------------------------
 // Types
@@ -81,6 +158,7 @@ export type RichTextEditorProps<
     error?: string | boolean;
     required?: boolean;
     size?: SizeTokens;
+    id?: string;
     /** Show the formatting toolbar (default: true) */
     showToolbar?: boolean;
     /** Use compact sizing for toolbar (default: false) */
@@ -151,6 +229,7 @@ export function RichTextEditor<
     helperText,
     required,
     size,
+    id: idProp,
     value: controlledValue,
     onChange,
     onBlur,
@@ -167,11 +246,10 @@ export function RichTextEditor<
     onImageUpload,
     onFileUpload,
     mentions,
-    ..._restProps
   } = props;
 
   const placeholder = placeholderProp ?? t("Write something...");
-  const { resolvedForm, knobProps, id } = useFormField({ form });
+  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp, compact });
   const resolvedValidators = useResolvedValidators(
     required,
     validators,
@@ -192,13 +270,27 @@ export function RichTextEditor<
     [onChange],
   );
 
+  const layoutBind = {
+    id,
+    label,
+    labelProps,
+    helperText,
+    required,
+    size,
+    knobProps,
+    disabled,
+    purpose: "description" as const,
+    placeholder,
+  };
+
   // ── Branch 1: Skeleton ──────────────────────────────────────────
+  // LC-20: FieldLayout keeps live label/helper anatomy; only the control
+  // chrome is the skeleton, sized to the editor's minHeight.
   if (skeleton) {
     return (
-      <YStack gap="$2">
-        {label && <Skeleton variant="text" width="30%" height={14} />}
+      <FieldLayout {...layoutBind} error={errorProp}>
         <Skeleton variant="rounded" width="100%" height={minHeight} />
-      </YStack>
+      </FieldLayout>
     );
   }
 
@@ -210,47 +302,45 @@ export function RichTextEditor<
     hasError?: boolean,
   ) => {
     return (
-      <RichEditor
-        ref={editorRef}
-        initialContent={currentValue}
-        onChange={(html) => onValueChange(html)}
-        onBlur={handleBlur}
-        placeholder={placeholder}
-        editable={!disabled && !readOnly}
-        minHeight={minHeight}
-        maxHeight={maxHeight}
-        showToolbar={showToolbar}
-        showBubbleToolbar={showBubbleToolbar}
-        sections={sections}
-        capabilities={capabilities}
-        hasError={hasError}
-        size={size}
-        compact={compact}
-        fullscreen={fullscreen}
-        defaultFullscreen={defaultFullscreen}
-        onFullscreenChange={onFullscreenChange}
-        inlineEditing={inlineEditing}
-        onImageUpload={onImageUpload}
-        onFileUpload={onFileUpload}
-        mentions={mentions}
-      />
+      <>
+        <RichTextExternalValueSync
+          value={currentValue}
+          editorRef={editorRef}
+          capabilities={capabilities}
+        />
+        <EditorFocusTarget id={id} editorRef={editorRef} />
+        <RichEditor
+          ref={editorRef}
+          initialContent={currentValue}
+          onChange={(html) => onValueChange(html)}
+          onBlur={handleBlur}
+          placeholder={placeholder}
+          editable={!disabled && !readOnly}
+          minHeight={minHeight}
+          maxHeight={maxHeight}
+          showToolbar={showToolbar}
+          showBubbleToolbar={showBubbleToolbar}
+          sections={sections}
+          capabilities={capabilities}
+          hasError={hasError}
+          size={size}
+          compact={compact}
+          fullscreen={fullscreen}
+          defaultFullscreen={defaultFullscreen}
+          onFullscreenChange={onFullscreenChange}
+          inlineEditing={inlineEditing}
+          onImageUpload={onImageUpload}
+          onFileUpload={onFileUpload}
+          mentions={mentions}
+        />
+      </>
     );
   };
 
   // ── Branch 2: Standalone (no form context) ──────────────────────
   if (!resolvedForm || !name) {
     return (
-      <FieldLayout
-        id={id}
-        label={label}
-        labelProps={labelProps}
-        error={errorProp}
-        helperText={helperText}
-        required={required}
-        size={size}
-        knobProps={knobProps}
-        onBlur={onBlur}
-      >
+      <FieldLayout {...layoutBind} error={errorProp} onBlur={onBlur}>
         {renderEditor(value, handleChange, onBlur as any, !!errorProp)}
       </FieldLayout>
     );
@@ -272,14 +362,8 @@ export function RichTextEditor<
 
         return (
           <FieldLayout
-            id={id}
-            label={label}
-            labelProps={labelProps}
+            {...layoutBind}
             error={resolvedError}
-            helperText={helperText}
-            required={required}
-            size={size}
-            knobProps={knobProps}
             onBlur={mergeFieldHandler(field, "handleBlur", onBlur)}
           >
             {renderEditor(

package/src/RichTextEditor/richTextEditor.spec.tsx

@@ -1,32 +1,47 @@
-import { describe, it, expect, vi } from "vitest";
+import { forwardRef, useImperativeHandle } from "react";
+import { describe, expect, it, vi } from "vitest";
 
-// ---------------------------------------------------------------------------
-// Mocks -- must come before imports
-// ---------------------------------------------------------------------------
+const editorSpies = vi.hoisted(() => ({
+  setHTML: vi.fn(),
+  setMarkdown: vi.fn(),
+  focus: vi.fn(),
+}));
 
-vi.mock("@multiplatform.one/forms", async (importOriginal) => {
+vi.mock("@multiplatform.one/forms", async () => {
+  const React = await import("react");
   return {
-    ...(await importOriginal<Record<string, unknown>>()),
-    Field: ({ children, ...props }: any) => {
+    Field: ({ children, defaultValue }: any) => {
+      const [value, setValue] = React.useState(defaultValue ?? "");
       const field = {
-        state: { value: props.defaultValue ?? "", meta: { errors: [] } },
-        handleChange: vi.fn(),
+        state: { value, meta: { errors: [] } },
+        handleChange: vi.fn((next: string) => setValue(next)),
         handleBlur: vi.fn(),
       };
-      return <div data-testid="tanstack-field">{children(field)}</div>;
+      return (
+        <div data-testid="tanstack-field">
+          <button type="button" data-testid="simulate-reset" onClick={() => setValue("")}>
+            reset
+          </button>
+          {children(field)}
+        </div>
+      );
     },
     FieldLayout: ({ children, label, error, ...props }: any) => (
       <div
         data-testid="field-layout"
         data-label={label}
         data-error={error || undefined}
-        data-skeleton={props.skeleton || undefined}
+        data-id={props.id}
+        data-gap={props.knobProps?.gap?.gap}
+        data-disabled={props.disabled ? "true" : undefined}
+        data-purpose={props.purpose}
+        data-placeholder={props.placeholder}
       >
         {children}
       </div>
     ),
     Skeleton: ({ variant, width, height, ..._props }: any) => (
-      <div data-testid="skeleton" data-variant={variant} style={{ width, height }} />
+      <div data-testid="skeleton" data-variant={variant} data-width={width} data-height={height} />
     ),
     getFieldError: (field: any, propError: any) => {
       const fieldError = field.state.meta.errors.length
@@ -34,7 +49,7 @@ vi.mock("@multiplatform.one/forms", async (importOriginal) => {
         : undefined;
       return propError ?? fieldError;
     },
-    useFormField: ({ form }: any) => ({
+    useFormField: ({ form, id, compact }: any) => ({
       resolvedForm: form || undefined,
       knobProps: {
         body: {},
@@ -46,9 +61,9 @@ vi.mock("@multiplatform.one/forms", async (importOriginal) => {
         textAccentColor: "$color",
         transition: undefined,
         heading: {},
-        gap: { gap: "$2" },
+        gap: { gap: compact ? "$1" : "$2" },
       },
-      id: "test-id",
+      id: id || "test-id",
     }),
     useResolvedValidators: (
       required: boolean | undefined,
@@ -72,129 +87,50 @@ vi.mock("@multiplatform.one/forms", async (importOriginal) => {
         handler?.(...args);
       };
     },
-    clampRadiusForLargeComponent: (radiusToken: string | undefined, maxTokenNum = 4) => {
-      if (!radiusToken) return "$3";
-      if (radiusToken === "$0") return 0;
-      if (typeof radiusToken === "string" && radiusToken.startsWith("$")) {
-        const num = Number.parseInt(radiusToken.slice(1), 10);
-        return num > maxTokenNum ? `$${maxTokenNum}` : radiusToken;
-      }
-      return radiusToken;
-    },
-    Button: (props: any) => <button>{props.children}</button>,
   };
 });
 
-vi.mock("@multiplatform.one/components", async (importOriginal) => ({
-  ...(await importOriginal<Record<string, unknown>>()),
-  Tooltip: ({ children }: any) => children,
-}));
-
-vi.mock("@multiplatform.one/theme", async (importOriginal) => ({
-  ...(await importOriginal<Record<string, unknown>>()),
-  useResolvedKnobs: () => ({
-    knobProps: {
-      body: {},
-      borderRadius: { borderRadius: "$3", borderWidth: 1 },
-      elevation: undefined,
-      sizeToken: "$4",
-      outlined: false,
-      inputBackground: "$color2",
-      textAccentColor: "$color",
-      transition: undefined,
-      heading: {},
-      gap: { gap: "$2" },
-    },
-    control: {
-      hoverKnobProps: undefined,
-      pressKnobProps: undefined,
-      focusKnobProps: undefined,
-      focusVisibleKnobProps: undefined,
-    },
-  }),
-}));
-
-vi.mock("@tiptap/react/menus", () => ({
-  BubbleMenu: ({ children }: any) => <div data-testid="bubble-menu">{children}</div>,
-}));
-
-const mockEditor = {
-  isActive: vi.fn().mockReturnValue(false),
-  getAttributes: vi.fn().mockReturnValue({}),
-  can: vi.fn().mockReturnValue({ undo: () => false, redo: () => false }),
-  getHTML: vi.fn().mockReturnValue("<p></p>"),
-  getJSON: vi.fn().mockReturnValue({ type: "doc", content: [] }),
-  chain: vi.fn().mockReturnValue({
-    focus: vi.fn().mockReturnValue({
-      toggleBold: vi.fn().mockReturnValue({ run: vi.fn() }),
-    }),
+vi.mock("../RichEditor", () => ({
+  RichEditor: forwardRef((props: any, ref) => {
+    useImperativeHandle(ref, () => ({
+      setHTML: editorSpies.setHTML,
+      setMarkdown: editorSpies.setMarkdown,
+      focus: editorSpies.focus,
+      blur: vi.fn(),
+      getHTML: () => props.initialContent ?? "",
+      getJSON: () => null,
+      getMarkdown: () => "",
+      getState: () => ({}),
+      executeCommand: vi.fn(),
+    }));
+    return (
+      <div
+        data-testid="editor-content"
+        data-compact={props.compact ? "true" : "false"}
+        data-editable={String(props.editable !== false)}
+        data-initial={props.initialContent}
+        data-bubble={props.showBubbleToolbar ? "true" : undefined}
+        data-sections={props.sections ? JSON.stringify(props.sections) : undefined}
+      />
+    );
   }),
-  commands: {
-    setContent: vi.fn(),
-    focus: vi.fn(),
-    blur: vi.fn(),
-  },
-  setEditable: vi.fn(),
-  storage: {
-    mediaUpload: { handlers: {} },
-    suggestionChrome: { value: null },
-  },
-};
-
-vi.mock("@tiptap/react", () => ({
-  useEditor: vi.fn().mockReturnValue(mockEditor),
-  EditorContent: ({ editor: _editor }: any) => <div data-testid="editor-content">Editor</div>,
-}));
-
-vi.mock("@tiptap/starter-kit", () => ({
-  default: { configure: vi.fn().mockReturnValue({}) },
-}));
-vi.mock("@tiptap/extension-underline", () => ({ default: {} }));
-vi.mock("@tiptap/extension-link", () => ({
-  default: { configure: vi.fn().mockReturnValue({}) },
-}));
-vi.mock("@tiptap/extension-placeholder", () => ({
-  default: { configure: vi.fn().mockReturnValue({}) },
 }));
-vi.mock("@tiptap/extension-text-align", () => ({
-  default: { configure: vi.fn().mockReturnValue({}) },
-}));
-vi.mock("@tiptap/extension-color", () => ({ Color: {} }));
-vi.mock("@tiptap/extension-text-style", () => ({ TextStyle: {} }));
-vi.mock("@tiptap/extension-highlight", () => ({
-  Highlight: { configure: vi.fn().mockReturnValue({}) },
-}));
-vi.mock("@tiptap/extension-subscript", () => ({ Subscript: {} }));
-vi.mock("@tiptap/extension-superscript", () => ({ Superscript: {} }));
-vi.mock("@tiptap/extension-task-list", () => ({ default: {} }));
-vi.mock("@tiptap/extension-task-item", () => ({
-  default: { configure: vi.fn().mockReturnValue({}) },
-}));
-vi.mock("@tiptap/extension-image", () => ({
-  default: { configure: vi.fn().mockReturnValue({}) },
-}));
-
-// ---------------------------------------------------------------------------
-// Imports (after mocks)
-// ---------------------------------------------------------------------------
 
+import { act } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 
-const { RichTextEditor } = await import("./index");
-
-// ---------------------------------------------------------------------------
-// Tests
-// ---------------------------------------------------------------------------
+const { RichTextEditor, richTextIsEmpty } = await import("./index");
 
 describe("RichTextEditor form-integrated field", () => {
-  it("renders skeleton loading state when skeleton={true}", () => {
-    const { getAllByTestId, queryByTestId } = renderWithProviders(
-      <RichTextEditor skeleton label="Content" />,
+  it("renders skeleton as FieldLayout + control chrome, never a 14px label bar", () => {
+    const { getAllByTestId, getByTestId, queryByTestId } = renderWithProviders(
+      <RichTextEditor skeleton label="Content" minHeight={180} />,
     );
     const skeletons = getAllByTestId("skeleton");
-    // Should render label skeleton + editor skeleton
-    expect(skeletons.length).toBe(2);
-    // Should NOT render the editor content
+    expect(skeletons).toHaveLength(1);
+    expect(skeletons[0]).toHaveAttribute("data-variant", "rounded");
+    expect(skeletons[0]).toHaveAttribute("data-height", "180");
+    expect(getByTestId("field-layout")).toHaveAttribute("data-label", "Content");
     expect(queryByTestId("editor-content")).toBeNull();
   });
 
@@ -203,10 +139,8 @@ describe("RichTextEditor form-integrated field", () => {
     const { container } = renderWithProviders(
       <RichTextEditor label="Content" onChange={handleChange} placeholder="Write something..." />,
     );
-    // Should render FieldLayout wrapper
     const fieldLayout = container.querySelector("[data-testid='field-layout']");
     expect(fieldLayout).toBeTruthy();
-    // Should render the RichEditor inside
     const editorContent = container.querySelector("[data-testid='editor-content']");
     expect(editorContent).toBeTruthy();
   });
@@ -216,31 +150,91 @@ describe("RichTextEditor form-integrated field", () => {
     const { getByTestId } = renderWithProviders(
       <RichTextEditor form={mockForm} name="content" label="Content" required />,
     );
-    // Should render the TanStack Field wrapper
-    const field = getByTestId("tanstack-field");
-    expect(field).toBeTruthy();
-    // Should render FieldLayout inside the field
-    const fieldLayout = getByTestId("field-layout");
-    expect(fieldLayout).toBeTruthy();
+    expect(getByTestId("tanstack-field")).toBeTruthy();
+    expect(getByTestId("field-layout")).toBeTruthy();
   });
 
-  it("custom empty check recognizes '<p></p>' and '' as empty for required validation", () => {
-    // The custom isEmpty function should treat '<p></p>' and '' as empty
-    const isEmpty = (v: unknown) => !v || v === "<p></p>" || v === "";
-
-    expect(isEmpty("")).toBe(true);
-    expect(isEmpty("<p></p>")).toBe(true);
-    expect(isEmpty(null)).toBe(true);
-    expect(isEmpty(undefined)).toBe(true);
-    expect(isEmpty("<p>Hello</p>")).toBe(false);
-    expect(isEmpty("<h1>Title</h1>")).toBe(false);
+  it("treats Tiptap empty markup as empty for required validation", () => {
+    expect(richTextIsEmpty("")).toBe(true);
+    expect(richTextIsEmpty("<p></p>")).toBe(true);
+    expect(richTextIsEmpty(null)).toBe(true);
+    expect(richTextIsEmpty(undefined)).toBe(true);
+    expect(richTextIsEmpty("<p>Hello</p>")).toBe(false);
+    expect(richTextIsEmpty("<h1>Title</h1>")).toBe(false);
   });
 
   it("passes showBubbleToolbar and sections props through to RichEditor", () => {
-    const { container } = renderWithProviders(
+    const { getByTestId } = renderWithProviders(
       <RichTextEditor label="Content" showBubbleToolbar sections={["formatting", "list"]} />,
     );
-    // Should render without error (props are passed through)
-    expect(container.firstChild).toBeTruthy();
+    const editor = getByTestId("editor-content");
+    expect(editor).toHaveAttribute("data-bubble", "true");
+    expect(editor).toHaveAttribute("data-sections", JSON.stringify(["formatting", "list"]));
+  });
+
+  it("feeds compact into useFormField so layout gap and editor density both step down", () => {
+    const { getByTestId, rerender } = renderWithProviders(<RichTextEditor label="Content" />);
+    expect(getByTestId("field-layout")).toHaveAttribute("data-gap", "$2");
+    expect(getByTestId("editor-content")).toHaveAttribute("data-compact", "false");
+    rerender(<RichTextEditor label="Content" compact />);
+    expect(getByTestId("field-layout")).toHaveAttribute("data-gap", "$1");
+    expect(getByTestId("editor-content")).toHaveAttribute("data-compact", "true");
+  });
+
+  it("pushes controlled value changes into the editor after mount", () => {
+    editorSpies.setHTML.mockClear();
+    const { rerender } = renderWithProviders(<RichTextEditor label="Content" value="<p>one</p>" />);
+    expect(editorSpies.setHTML).not.toHaveBeenCalled();
+    rerender(<RichTextEditor label="Content" value="<p>two</p>" />);
+    expect(editorSpies.setHTML).toHaveBeenCalledWith("<p>two</p>");
+  });
+
+  it("pushes markdown capability values through setMarkdown", () => {
+    editorSpies.setMarkdown.mockClear();
+    const { rerender } = renderWithProviders(
+      <RichTextEditor label="Content" capabilities="markdown" value="hello" />,
+    );
+    rerender(<RichTextEditor label="Content" capabilities="markdown" value="world" />);
+    expect(editorSpies.setMarkdown).toHaveBeenCalledWith("world");
+  });
+
+  it("clears the editor when the form field value is reset", async () => {
+    editorSpies.setHTML.mockClear();
+    const { getByTestId } = renderWithProviders(
+      <RichTextEditor
+        form={{ store: {} } as any}
+        name="content"
+        defaultValue="<p>hello</p>"
+        label="Content"
+      />,
+    );
+    expect(getByTestId("editor-content")).toHaveAttribute("data-initial", "<p>hello</p>");
+    await act(async () => {
+      getByTestId("simulate-reset").click();
+    });
+    expect(editorSpies.setHTML).toHaveBeenCalledWith("");
+  });
+
+  it("associates the field id with a labelable control that forwards focus", () => {
+    editorSpies.focus.mockClear();
+    const { container, getByTestId } = renderWithProviders(
+      <RichTextEditor id="notes" label="Content" />,
+    );
+    expect(getByTestId("field-layout")).toHaveAttribute("data-id", "notes");
+    const target = container.querySelector("#notes") as HTMLTextAreaElement | null;
+    expect(target).toBeTruthy();
+    target?.focus();
+    expect(editorSpies.focus).toHaveBeenCalled();
+  });
+
+  it("passes disabled to FieldLayout and makes the editor non-editable", () => {
+    const { getByTestId } = renderWithProviders(<RichTextEditor label="Content" disabled />);
+    expect(getByTestId("field-layout")).toHaveAttribute("data-disabled", "true");
+    expect(getByTestId("editor-content")).toHaveAttribute("data-editable", "false");
+  });
+
+  it("declares description purpose so the field stretches full width", () => {
+    const { getByTestId } = renderWithProviders(<RichTextEditor label="Content" />);
+    expect(getByTestId("field-layout")).toHaveAttribute("data-purpose", "description");
   });
 });