@dxos/react-ui-form 0.8.4-main.8360d9e660 → 0.8.4-main.8baae0fced

package/src/components/Form/FormField.tsx

@@ -23,9 +23,9 @@ import {
 import { useTranslation } from '@dxos/react-ui';
 import { type ProjectionModel } from '@dxos/schema';
 
-import { translationKey } from '../../translations';
-import { getRefProps } from '../../util';
+import { translationKey } from '#translations';
 
+import { getRefProps } from '../../util';
 import {
   ArrayField,
   BooleanField,
@@ -78,14 +78,21 @@ export type FormFieldProps = {
    * Function to lookup custom renderers for specific properties.
    */
   fieldProvider?: FormFieldProvider;
+  /**
+   * Typename of the ref type that the create props apply to.
+   * When set, createOptionLabel/createOptionIcon/createInitialValuePath/createFieldMap/onCreate
+   * are only passed to ref fields whose typename matches.
+   */
+  createTypename?: string;
 } & Pick<FormFieldComponentProps, 'autoFocus' | 'readonly' | 'layout'> &
   Pick<
     RefFieldProps,
     | 'createOptionLabel'
     | 'createOptionIcon'
     | 'createInitialValuePath'
+    | 'createFieldMap'
     | 'db'
-    | 'schemaHook'
+    | 'useSchema'
     | 'getOptions'
     | 'onCreate'
   >;
@@ -102,12 +109,14 @@ export const FormField = (props: FormFieldProps) => {
     layout,
 
     // RefFieldProps
+    createTypename,
     createOptionLabel,
     createOptionIcon,
     createInitialValuePath,
+    createFieldMap,
     db,
-    schemaHook,
-    getOptions: getRefOptions,
+    useSchema: schemaHook,
+    getOptions,
     onCreate,
   } = props;
   const { t } = useTranslation(translationKey);
@@ -117,7 +126,7 @@ export const FormField = (props: FormFieldProps) => {
 
   const label = useMemo(() => title ?? String.capitalize(name), [title, name]);
   const placeholder = useMemo(
-    () => (examples?.length ? `${t('example placeholder')}: ${examples[0]}` : (description ?? label)),
+    () => (examples?.length ? `${t('example.placeholder')}: ${examples[0]}` : (description ?? label)),
     [examples, description, label],
   );
 
@@ -129,6 +138,7 @@ export const FormField = (props: FormFieldProps) => {
     label,
     placeholder,
     layout,
+    db,
     ...fieldState,
   };
 
@@ -169,7 +179,7 @@ export const FormField = (props: FormFieldProps) => {
   // Select field.
   //
 
-  const options = getOptions(type);
+  const options = getSelectOptions(type);
   if (options) {
     // Resolve labels from projection metadata when available.
     const fieldProjections = projection?.getFieldProjections();
@@ -196,16 +206,18 @@ export const FormField = (props: FormFieldProps) => {
 
   const refProps = getRefProps(type);
   if (refProps) {
+    const isCreateTarget = !createTypename || refProps.typename === createTypename;
     return (
       <RefField
         {...fieldProps}
         {...refProps}
-        createOptionLabel={createOptionLabel}
-        createOptionIcon={createOptionIcon}
-        createInitialValuePath={createInitialValuePath}
+        createOptionLabel={isCreateTarget ? createOptionLabel : undefined}
+        createOptionIcon={isCreateTarget ? createOptionIcon : undefined}
+        createInitialValuePath={isCreateTarget ? createInitialValuePath : undefined}
+        createFieldMap={isCreateTarget ? createFieldMap : undefined}
         db={db}
-        schemaHook={schemaHook}
-        getOptions={getRefOptions}
+        useSchema={schemaHook}
+        getOptions={getOptions}
         onCreate={onCreate}
       />
     );
@@ -237,8 +249,8 @@ export const FormField = (props: FormFieldProps) => {
           createOptionIcon={createOptionIcon}
           createInitialValuePath={createInitialValuePath}
           db={db}
-          schemaHook={schemaHook}
-          getOptions={getRefOptions}
+          useSchema={schemaHook}
+          getOptions={getOptions}
           onCreate={onCreate}
         />
       );
@@ -285,7 +297,7 @@ const getFormField = ({ type, format }: FormFieldComponentProps): FormFieldCompo
   }
 };
 
-const getOptions = (ast: SchemaAST.AST): Format.Options[] | undefined => {
+const getSelectOptions = (ast: SchemaAST.AST): Format.Options[] | undefined => {
   if (isLiteralUnion(ast)) {
     return ast.types.map((type) => type.literal).filter((v): v is string | number => v !== null);
   }

package/src/components/Form/FormFieldComponent.tsx

@@ -13,6 +13,7 @@ import React, {
   type ReactNode,
 } from 'react';
 
+import { type Database } from '@dxos/echo';
 import { type Format } from '@dxos/echo/internal';
 import { Icon, Input, Tooltip } from '@dxos/react-ui';
 import { inputTextLabel } from '@dxos/ui-theme';
@@ -50,6 +51,8 @@ export type FormFieldComponentProps<T = any> = {
   placeholder?: string;
   autoFocus?: boolean;
   layout?: Presentation;
+  /** Database the form is editing against; populated for fields whose value is an ECHO object/Ref. */
+  db?: Database.Database;
 } & FormFieldStateProps<T>;
 
 /**
@@ -77,7 +80,7 @@ export type FormFieldLabelProps = {
 export const FormFieldLabel = ({ label, error, readonly, asChild }: FormFieldLabelProps) => {
   const Label = readonly || asChild ? 'span' : Input.Label;
   return (
-    <div role='none' className='flex items-center justify-between'>
+    <div className='flex items-center justify-between'>
       <Label className={inputTextLabel}>{label}</Label>
       {error && (
         <Tooltip.Trigger asChild content={error} side='bottom'>
@@ -113,7 +116,7 @@ export const FormFieldWrapper = <T,>(props: FormFieldWrapperProps<T>) => {
   const str = String(value ?? '');
 
   return (
-    <div role='none' className='contents'>
+    <div className='contents'>
       <Input.Root validationValence={status}>
         {layout !== 'inline' && <FormFieldLabel error={error} readonly={readonly} label={label} />}
         {layout === 'static' ? <p>{str}</p> : children ? children({ value }) : null}
@@ -156,7 +159,7 @@ export class FormFieldErrorBoundary extends Component<FormFieldErrorBoundaryProp
     if (this.state.error) {
       return (
         <div className='flex gap-2 border border-rose-fill font-mono text-sm'>
-          <span className='bg-rose-fill text-surface-text px-1 font-thin'>ERROR</span>
+          <span className='bg-rose-fill text-base-foreground px-1 font-thin'>ERROR</span>
           {String(this.props.path?.join('.'))}
         </div>
       );

package/src/components/Form/FormFieldSet.tsx

@@ -9,7 +9,6 @@ import { type SchemaProperty } from '@dxos/effect';
 
 import { type FormHandlerProps } from '../../hooks';
 import { getFormProperties } from '../../util';
-
 import { useFormValues } from './Form';
 import { FormField, type FormFieldProps } from './FormField';
 import { FormFieldErrorBoundary, FormFieldLabel } from './FormFieldComponent';
@@ -30,11 +29,13 @@ export type FormFieldSetProps<T extends AnyProperties> = {
     | 'projection'
     | 'fieldMap'
     | 'fieldProvider'
+    | 'createTypename'
     | 'createOptionLabel'
     | 'createOptionIcon'
     | 'createInitialValuePath'
+    | 'createFieldMap'
     | 'db'
-    | 'schemaHook'
+    | 'useSchema'
     | 'getOptions'
     | 'onCreate'
   >;
@@ -54,10 +55,54 @@ export const FormFieldSet = ({
   ...props
 }: FormFieldSetProps<any>) => {
   const values = useFormValues(FORM_FIELDSET_NAME, path);
+  const properties = useFormFieldSetProperties({ schema, values, exclude, sort, projection });
+  if ((readonly || layout === 'static') && values == null) {
+    return null;
+  }
 
+  return (
+    <>
+      {layout !== 'inline' && label && <FormFieldLabel label={label} asChild />}
+      {properties.map((property) => {
+        const name = property.name.toString();
+        return (
+          <FormFieldErrorBoundary key={name} path={[...(path ?? []), name]}>
+            <FormField
+              type={property.type}
+              name={name}
+              path={[...(path ?? []), name]}
+              readonly={readonly}
+              layout={layout}
+              projection={projection}
+              {...props}
+            />
+          </FormFieldErrorBoundary>
+        );
+      })}
+    </>
+  );
+};
+
+FormFieldSet.displayName = FORM_FIELDSET_NAME;
+
+type UseFormFieldSetPropertiesParams = Pick<FormFieldSetProps<any>, 'schema' | 'exclude' | 'projection' | 'sort'> & {
+  values: AnyProperties | undefined;
+  sort?: string[];
+};
+
+/**
+ * Resolves ordered schema properties for a field set (projection order, exclude, or sort).
+ */
+const useFormFieldSetProperties = ({
+  schema,
+  exclude,
+  projection,
+  values,
+  sort,
+}: UseFormFieldSetPropertiesParams): SchemaProperty[] => {
   // TODO(burdon): Updates on every value change.
   //  Remove values dep if can remove from getSchemaProperties.
-  const properties = useMemo(() => {
+  return useMemo(() => {
     if (!schema) {
       return [];
     }
@@ -78,7 +123,7 @@ export const FormFieldSet = ({
       // Add properties in projection field order.
       for (const fieldProjection of fieldProjections) {
         const fieldPath = String(fieldProjection.field.path);
-        const prop = visibleProps.find((p) => p.name === fieldPath);
+        const prop = visibleProps.find((prop) => prop.name === fieldPath);
         if (prop) {
           orderedProps.push(prop);
         }
@@ -96,32 +141,4 @@ export const FormFieldSet = ({
       ? [...filteredProps].sort(({ name: a }, { name: b }) => sort.indexOf(a.toString()) - sort.indexOf(b.toString()))
       : filteredProps;
   }, [schema, values, exclude, sort, projection]);
-
-  if ((readonly || layout === 'static') && values == null) {
-    return null;
-  }
-
-  return (
-    <>
-      {layout !== 'inline' && label && <FormFieldLabel label={label} asChild />}
-      {properties.map((property) => {
-        const name = property.name.toString();
-        return (
-          <FormFieldErrorBoundary key={name} path={[...(path ?? []), name]}>
-            <FormField
-              type={property.type}
-              name={name}
-              path={[...(path ?? []), name]}
-              readonly={readonly}
-              layout={layout}
-              projection={projection}
-              {...props}
-            />
-          </FormFieldErrorBoundary>
-        );
-      })}
-    </>
-  );
 };
-
-FormFieldSet.displayName = FORM_FIELDSET_NAME;

package/src/components/Form/fields/ArrayField.tsx

@@ -4,12 +4,13 @@
 
 import * as Option from 'effect/Option';
 import * as SchemaAST from 'effect/SchemaAST';
-import React, { Fragment, useCallback } from 'react';
+import React, { useCallback } from 'react';
 
 import { findNode, getArrayElementType, getDiscriminatedType, isDiscriminatedUnion, isNestedType } from '@dxos/effect';
 import { IconButton, useTranslation } from '@dxos/react-ui';
 
-import { translationKey } from '../../../translations';
+import { translationKey } from '#translations';
+
 import { getFormProperties } from '../../../util';
 import { useFormValues } from '../Form';
 import { FormField, type FormFieldProps } from '../FormField';
@@ -77,10 +78,10 @@ export const ArrayField = ({
         <FormFieldLabel readonly={readonly} label={label} asChild />
       )}
 
-      <div role='none' className='flex flex-col gap-2'>
+      <div className='flex flex-col gap-form-gap'>
         {values?.map((_, index) => {
           return (
-            <div role='none' key={index} className='grid grid-cols-[1fr_min-content] gap-2 last:mb-3'>
+            <div key={index} className='grid grid-cols-[1fr_min-content] gap-form-gap last:mb-form-gap items-center'>
               <FormField
                 autoFocus={index === values.length - 1}
                 type={elementType}
@@ -91,13 +92,13 @@ export const ArrayField = ({
               />
 
               {!readonly && layout !== 'static' && (
-                <div role='none' className='flex flex-col h-full justify-end'>
+                <div className='flex flex-col h-full justify-end'>
                   {/* NOTE: Aligns with center of last field if multi-field object. */}
-                  <div role='none' className='flex items-center h-[2rem]'>
+                  <div className='flex items-center h-[2rem]'>
                     <IconButton
                       icon='ph--x--regular'
                       iconOnly
-                      label={t('button remove')}
+                      label={t('remove.button')}
                       onClick={() => handleDelete(index)}
                       classNames='self-center'
                     />
@@ -111,7 +112,12 @@ export const ArrayField = ({
 
       {/* TODO(burdon): Get label from schema. */}
       {!readonly && layout !== 'static' && (
-        <IconButton classNames='flex w-full' icon='ph--plus--regular' label={t('add field')} onClick={handleAdd} />
+        <IconButton
+          classNames='flex w-full'
+          icon='ph--plus--regular'
+          label={t('add-item.button')}
+          onClick={handleAdd}
+        />
       )}
     </>
   );

package/src/components/Form/fields/GeoPointField.tsx

@@ -8,7 +8,8 @@ import { GeoLocation, type GeoPoint } from '@dxos/echo/internal';
 import { Input, useTranslation } from '@dxos/react-ui';
 import { safeParseFloat } from '@dxos/util';
 
-import { translationKey } from '../../../translations';
+import { translationKey } from '#translations';
+
 import { type FormFieldComponentProps, FormFieldLabel } from '../FormFieldComponent';
 
 export const GeoPointField = ({
@@ -62,17 +63,17 @@ export const GeoPointField = ({
       {layout === 'static' ? (
         <LatLng {...value} />
       ) : (
-        <div role='none' className='grid grid-cols-2 gap-2'>
+        <div className='grid grid-cols-2 gap-form-gap'>
           <div>
             <Input.Root>
-              {layout !== 'inline' && <Input.Label>{t('latitude label')}</Input.Label>}
+              {layout !== 'inline' && <Input.Label>{t('latitude.label')}</Input.Label>}
               <Input.TextInput
                 type='number'
                 step='0.00001'
                 min='-90'
                 max='90'
                 disabled={!!readonly}
-                placeholder={t('latitude placeholder')}
+                placeholder={t('latitude.placeholder')}
                 value={latitudeText ?? ''}
                 onChange={handleChange('latitude', setLatitudeText)}
                 onBlur={onBlur}
@@ -81,14 +82,14 @@ export const GeoPointField = ({
           </div>
           <div>
             <Input.Root>
-              {layout !== 'inline' && <Input.Label>{t('longitude label')}</Input.Label>}
+              {layout !== 'inline' && <Input.Label>{t('longitude.label')}</Input.Label>}
               <Input.TextInput
                 type='number'
                 step='0.00001'
                 min='-180'
                 max='180'
                 disabled={!!readonly}
-                placeholder={t('longitude placeholder')}
+                placeholder={t('longitude.placeholder')}
                 value={longitudeText ?? ''}
                 onChange={handleChange('longitude', setLongitudeText)}
                 onBlur={onBlur}
@@ -106,7 +107,7 @@ const LatLng = ({ latitude = 0, longitude = 0 }: GeoLocation) => {
   const lngHem = longitude >= 0 ? 'E' : 'W';
 
   return (
-    <span className='inline-flex items-center gap-1'>
+    <span className='inline-flex items-center gap-form-gap'>
       <span>
         <span>{Math.abs(latitude).toFixed(5)}</span>
         <span className='text-subdued'>°{latHem}</span>

package/src/components/Form/fields/MarkdownField.stories.tsx

@@ -0,0 +1,206 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Schema from 'effect/Schema';
+import React, { useMemo } from 'react';
+import { expect, userEvent } from 'storybook/test';
+
+import { Filter, Format, Obj, Ref } from '@dxos/echo';
+import { useQuery } from '@dxos/react-client/echo';
+import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
+import { Panel } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { Text } from '@dxos/schema';
+
+import { translations } from '#translations';
+
+import { TestLayout } from '../../testing';
+import { Form } from '../Form';
+
+//
+// String-backed markdown.
+//
+
+const StringSchema = Schema.Struct({
+  notes: Schema.String.pipe(Format.FormatAnnotation.set(Format.TypeFormat.Markdown)).annotations({ title: 'Notes' }),
+});
+
+const StringStory = () => (
+  <TestLayout>
+    <Form.Root schema={StringSchema} defaultValues={{ notes: '# Hello\n\nMarkdown text *here*.' }}>
+      <Form.Viewport>
+        <Form.Content>
+          <Form.FieldSet />
+        </Form.Content>
+      </Form.Viewport>
+    </Form.Root>
+  </TestLayout>
+);
+
+//
+// Ref<Text>-backed markdown.
+//
+
+const TextNoteHolder = Schema.Struct({
+  instructions: Ref.Ref(Text.Text)
+    .pipe(Format.FormatAnnotation.set(Format.TypeFormat.Markdown))
+    .annotations({ title: 'Instructions' }),
+});
+
+const RefStory = () => {
+  const { space } = useClientStory();
+  const [text] = useQuery(space?.db, Filter.type(Text.Text));
+  const values = useMemo(() => (text ? { instructions: Ref.make(text) } : undefined), [text]);
+
+  if (!space || !values) {
+    return null;
+  }
+
+  return (
+    <TestLayout>
+      <Panel.Root>
+        <Panel.Content asChild>
+          <Form.Root schema={TextNoteHolder} values={values as any} db={space.db}>
+            <Form.Viewport>
+              <Form.Content>
+                <Form.FieldSet />
+              </Form.Content>
+            </Form.Viewport>
+          </Form.Root>
+        </Panel.Content>
+      </Panel.Root>
+    </TestLayout>
+  );
+};
+
+//
+// Ref<Text> empty — shows the create button.
+//
+
+const EmptyRefSchema = Schema.Struct({
+  instructions: Schema.optional(
+    Ref.Ref(Text.Text)
+      .pipe(Format.FormatAnnotation.set(Format.TypeFormat.Markdown))
+      .annotations({ title: 'Instructions' }),
+  ),
+});
+
+const EmptyRefStory = () => {
+  const { space } = useClientStory();
+  if (!space) {
+    return null;
+  }
+
+  return (
+    <TestLayout>
+      <Panel.Root>
+        <Panel.Content asChild>
+          <Form.Root schema={EmptyRefSchema} defaultValues={{}} db={space.db}>
+            <Form.Viewport>
+              <Form.Content>
+                <Form.FieldSet />
+              </Form.Content>
+            </Form.Viewport>
+          </Form.Root>
+        </Panel.Content>
+      </Panel.Root>
+    </TestLayout>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-form/MarkdownField',
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const StringBacked: Story = {
+  render: () => <StringStory />,
+};
+
+// Regression test: keystrokes into a string-backed markdown field must not
+// blur the editor. Previously the EditorView was destroyed and recreated on
+// every change because `onChange` was a useTextEditor dep and form callbacks
+// are unstable across renders.
+export const StringBackedKeepsFocus: Story = {
+  render: () => (
+    <TestLayout>
+      <Form.Root schema={StringSchema} defaultValues={{ notes: '' }}>
+        <Form.Viewport>
+          <Form.Content>
+            <Form.FieldSet />
+          </Form.Content>
+        </Form.Viewport>
+      </Form.Root>
+    </TestLayout>
+  ),
+  play: async ({ canvasElement }) => {
+    const waitFor = async <T,>(predicate: () => T | null | undefined, message: string): Promise<T> => {
+      for (let attempt = 0; attempt < 50; attempt++) {
+        const value = predicate();
+        if (value) {
+          return value;
+        }
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      }
+      throw new Error(message);
+    };
+
+    const editorRoot = await waitFor(
+      () => canvasElement.querySelector<HTMLElement>('.cm-editor'),
+      'CodeMirror editor root (.cm-editor) not found',
+    );
+    const editorContent = editorRoot.querySelector<HTMLElement>('.cm-content')!;
+    await expect(editorContent).toBeVisible();
+
+    // Focus editor and wait for focus to settle inside the editor root.
+    editorContent.focus();
+    await waitFor(() => (editorRoot.contains(document.activeElement) ? true : null), 'Editor did not receive focus');
+
+    // Type several characters; focus must be preserved inside the editor root
+    // after every keystroke. Regression: previously the EditorView was
+    // destroyed and recreated on every change, which detached the focused
+    // contentDOM and blurred the input.
+    const phrase = 'hello world';
+    for (const ch of phrase) {
+      await userEvent.keyboard(ch);
+      await expect(editorRoot.contains(document.activeElement)).toBe(true);
+    }
+
+    await expect(editorContent).toHaveTextContent(phrase);
+  },
+};
+
+export const RefPopulated: Story = {
+  render: () => <RefStory />,
+  decorators: [
+    withClientProvider({
+      createIdentity: true,
+      createSpace: true,
+      types: [Text.Text],
+      onCreateSpace: async ({ space }) => {
+        space.db.add(Obj.make(Text.Text, { content: '# Magazine brief\n\nLong-form text describing what to gather.' }));
+      },
+    }),
+  ],
+};
+
+export const RefEmpty: Story = {
+  render: () => <EmptyRefStory />,
+  decorators: [
+    withClientProvider({
+      createIdentity: true,
+      createSpace: true,
+      types: [Text.Text],
+    }),
+  ],
+};