@open-mercato/ui 0.6.1-develop.3246.1.dbef9d7392 → 0.6.1-develop.3260.1.dc719cac84

package/src/backend/inputs/DateTimePicker.tsx

@@ -1,199 +1,31 @@
+/**
+ * @deprecated Import `DatePicker` from `@open-mercato/ui/primitives/date-picker`
+ * and pass `withTime` instead. The standalone `DateTimePicker` is replaced by
+ * a `withTime` prop on the unified primitive in DS Foundation v3.
+ *
+ * Default footer is the Figma-aligned `'apply-cancel'` mode (per user
+ * directive 2026-05-09 — "zmień globalnie"). Consumers that explicitly
+ * need the legacy `Today` / `Clear` footer can pass `footer="today-clear"`.
+ *
+ * Migration: replace
+ *   import { DateTimePicker } from '@open-mercato/ui/backend/inputs/DateTimePicker'
+ *   <DateTimePicker value={...} onChange={...} />
+ * with
+ *   import { DatePicker } from '@open-mercato/ui/primitives/date-picker'
+ *   <DatePicker value={...} onChange={...} withTime />
+ */
+
 "use client"
 
 import * as React from 'react'
-import { format } from 'date-fns'
-import type { Locale } from 'date-fns'
-import { CalendarIcon } from 'lucide-react'
-import { cn } from '@open-mercato/shared/lib/utils'
-import { useT } from '@open-mercato/shared/lib/i18n/context'
-import { Popover, PopoverContent, PopoverTrigger } from '../../primitives/popover'
-import { Calendar } from '../../primitives/calendar'
-import { TimeInput } from './TimeInput'
-
-export type DateTimePickerProps = {
-  value?: Date | null
-  onChange: (date: Date | null) => void
-  placeholder?: string
-  disabled?: boolean
-  readOnly?: boolean
-  className?: string
-  locale?: Locale
-  displayFormat?: string
-  minuteStep?: number
-  showTodayButton?: boolean
-  showClearButton?: boolean
-  minDate?: Date
-  maxDate?: Date
-}
-
-const DAY_FIRST_LOCALE_CODES = new Set([
-  'pl', 'de', 'fr', 'es', 'it', 'pt', 'nl', 'ru', 'cs', 'sk', 'hu', 'ro',
-])
-
-function deriveDisplayFormat(locale?: Locale): string {
-  if (!locale) return 'MMM d, yyyy HH:mm'
-  const code = locale.code?.split('-')[0]?.toLowerCase() ?? ''
-  return DAY_FIRST_LOCALE_CODES.has(code) ? 'd MMM yyyy HH:mm' : 'MMM d, yyyy HH:mm'
-}
-
-function extractTime(date: Date): string {
-  const hour = String(date.getHours()).padStart(2, '0')
-  const minute = String(date.getMinutes()).padStart(2, '0')
-  return `${hour}:${minute}`
-}
-
-function applyTimeToDate(base: Date, time: string): Date {
-  const parts = time.split(':')
-  const hour = parseInt(parts[0] ?? '0', 10)
-  const minute = parseInt(parts[1] ?? '0', 10)
-  const next = new Date(base)
-  next.setHours(isNaN(hour) ? 0 : hour)
-  next.setMinutes(isNaN(minute) ? 0 : minute)
-  next.setSeconds(0)
-  next.setMilliseconds(0)
-  return next
-}
-
-export function DateTimePicker({
-  value,
-  onChange,
-  placeholder,
-  disabled = false,
-  readOnly = false,
-  className,
-  locale,
-  displayFormat,
-  minuteStep = 1,
-  showTodayButton = true,
-  showClearButton = true,
-  minDate,
-  maxDate,
-}: DateTimePickerProps) {
-  const t = useT()
-  const [open, setOpen] = React.useState(false)
-
-  const resolvedFormat = displayFormat ?? deriveDisplayFormat(locale)
-  const placeholderText = placeholder ?? t('ui.dateTimePicker.placeholder', 'Pick date and time')
-  const timeLabelText = t('ui.dateTimePicker.timeLabel', 'Time')
-  const todayText = t('ui.dateTimePicker.todayButton', 'Today')
-  const clearText = t('ui.dateTimePicker.clearButton', 'Clear')
-
-  const formattedValue = React.useMemo(() => {
-    if (!value) return null
-    try {
-      return format(value, resolvedFormat, locale ? { locale } : undefined)
-    } catch {
-      return null
-    }
-  }, [value, resolvedFormat, locale])
-
-  const handleDaySelect = React.useCallback(
-    (day: Date | undefined) => {
-      if (!day) return
-      const currentTime = value ? extractTime(value) : '00:00'
-      onChange(applyTimeToDate(day, currentTime))
-    },
-    [onChange, value]
-  )
-
-  const handleTimeChange = React.useCallback(
-    (time: string) => {
-      const base = value ?? null
-      if (!base) return
-      onChange(applyTimeToDate(base, time))
-    },
-    [onChange, value]
-  )
-
-  const handleToday = React.useCallback(() => {
-    const now = new Date()
-    const currentTime = value ? extractTime(value) : extractTime(now)
-    onChange(applyTimeToDate(now, currentTime))
-    setOpen(false)
-  }, [onChange, value])
-
-  const handleClear = React.useCallback(() => {
-    onChange(null)
-    setOpen(false)
-  }, [onChange])
-
-  const isInteractive = !disabled && !readOnly
+import {
+  DatePicker as DatePickerPrimitive,
+  type DatePickerProps as DatePickerPrimitiveProps,
+} from '../../primitives/date-picker'
 
-  const disabledMatcher = React.useMemo(() => {
-    if (!minDate && !maxDate) return undefined
-    const matchers: import('react-day-picker').Matcher[] = []
-    if (minDate) matchers.push({ before: minDate })
-    if (maxDate) matchers.push({ after: maxDate })
-    return matchers
-  }, [minDate, maxDate])
+export type DateTimePickerProps = Omit<DatePickerPrimitiveProps, 'withTime'>
 
-  return (
-    <Popover open={open} onOpenChange={isInteractive ? setOpen : undefined}>
-      <PopoverTrigger asChild>
-        <button
-          type="button"
-          data-crud-focus-target=""
-          disabled={disabled}
-          aria-haspopup="dialog"
-          className={cn(
-            'w-full h-9 flex items-center gap-2 rounded border px-3 text-sm text-left',
-            'bg-background transition-colors',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',
-            'disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed',
-            readOnly && 'cursor-default opacity-70',
-            !formattedValue && 'text-muted-foreground',
-            className
-          )}
-          onClick={isInteractive ? undefined : (e) => e.preventDefault()}
-        >
-          <CalendarIcon className="h-4 w-4 shrink-0 text-muted-foreground" />
-          <span className="flex-1 truncate">
-            {formattedValue ?? placeholderText}
-          </span>
-        </button>
-      </PopoverTrigger>
-      <PopoverContent className="p-0 w-auto">
-        <Calendar
-          mode="single"
-          selected={value ?? undefined}
-          onSelect={handleDaySelect}
-          locale={locale}
-          disabled={disabledMatcher}
-          initialFocus
-        />
-        <div className="border-t px-3 py-2 space-y-2">
-          <div className="flex items-center gap-2">
-            <span className="text-sm text-muted-foreground shrink-0">{timeLabelText}:</span>
-            <TimeInput
-              value={value ? extractTime(value) : undefined}
-              onChange={handleTimeChange}
-              minuteStep={minuteStep}
-            />
-          </div>
-          {(showTodayButton || showClearButton) && (
-            <div className="flex items-center justify-between gap-2">
-              {showTodayButton && (
-                <button
-                  type="button"
-                  onClick={handleToday}
-                  className="text-sm text-primary hover:underline focus-visible:outline-none"
-                >
-                  {todayText}
-                </button>
-              )}
-              {showClearButton && (
-                <button
-                  type="button"
-                  onClick={handleClear}
-                  className="text-sm text-muted-foreground hover:text-foreground hover:underline focus-visible:outline-none ml-auto"
-                >
-                  {clearText}
-                </button>
-              )}
-            </div>
-          )}
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
+/** @deprecated Use `DatePicker withTime` from `@open-mercato/ui/primitives/date-picker`. */
+export function DateTimePicker(props: DateTimePickerProps) {
+  return <DatePickerPrimitive {...props} withTime />
 }

package/src/backend/inputs/TagsInput.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Button } from '../../primitives/button'
-import { IconButton } from '../../primitives/icon-button'
+import { Tag } from '../../primitives/tag'
 
 export type TagsInputOption = {
   value: string
@@ -208,24 +208,21 @@ export function TagsInput({
           const label = option?.label ?? tag
           const description = option?.description
           return (
-            <span key={tag} className="inline-flex items-center gap-2 rounded-sm bg-muted px-2 py-0.5 text-xs">
+            <Tag
+              key={tag}
+              shape="square"
+              variant="default"
+              disabled={disabled}
+              onRemove={() => removeTag(tag)}
+              removeAriaLabel={t('ui.inputs.tagsInput.removeTag', 'Remove {label}', { label })}
+            >
               <span className="flex flex-col items-start leading-tight">
                 <span className="whitespace-nowrap">{label}</span>
                 {description ? (
                   <span className="text-overline text-muted-foreground">{description}</span>
                 ) : null}
               </span>
-              <IconButton
-                type="button"
-                variant="ghost"
-                size="xs"
-                className="opacity-60 hover:opacity-100"
-                onClick={() => removeTag(tag)}
-                disabled={disabled}
-              >
-                ×
-              </IconButton>
-            </span>
+            </Tag>
           )
         })}
         <input

package/src/backend/inputs/TimeInput.tsx

@@ -109,7 +109,8 @@ export function TimeInput({
   )
 
   const wrapperClass = 'w-14'
-  const innerInputClass = 'text-center tabular-nums'
+  const innerInputClass =
+    'text-center tabular-nums leading-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0 [&::-webkit-outer-spin-button]:m-0'
 
   return (
     <div className={cn('flex items-center gap-1', className)}>

package/src/backend/inputs/TimePicker.tsx

@@ -4,8 +4,10 @@ import * as React from 'react'
 import { ClockIcon } from 'lucide-react'
 import { cn } from '@open-mercato/shared/lib/utils'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
-import { Popover, PopoverContent, PopoverTrigger } from '../../primitives/popover'
-import { TimeInput } from './TimeInput'
+import {
+  TimePicker as TimePickerPrimitive,
+  formatTimePickerDisplay,
+} from '../../primitives/time-picker'
 
 export type TimePickerProps = {
   value?: string | null
@@ -26,6 +28,14 @@ function currentHHMM(): string {
   return `${hour}:${minute}`
 }
 
+/**
+ * Legacy popover-anchored time picker. Preserved for backward compatibility with
+ * existing CrudForm `type: 'time'` consumers and DateTimePicker. Internally a shim
+ * over the new `<TimePicker>` primitive from `@open-mercato/ui/primitives/time-picker`.
+ *
+ * `minuteStep` maps to `intervalMinutes` (default 30 for sane slot list size).
+ * `showNowButton` / `showClearButton` render as `legacyFooterActions`.
+ */
 export function TimePicker({
   value,
   onChange,
@@ -33,9 +43,13 @@ export function TimePicker({
   disabled = false,
   readOnly = false,
   className,
-  minuteStep = 1,
+  minuteStep = 30,
   showNowButton = true,
-  showClearButton = true,
+  // Default changed 2026-05-11 from `true` → `false`: the new primitive's Cancel
+  // button already exits the popover without committing, which is what users mean
+  // by "Clear" in most flows. Pass `showClearButton={true}` to opt back in when
+  // you need an explicit "set value to null" action distinct from "dismiss".
+  showClearButton = false,
 }: TimePickerProps) {
   const t = useT()
   const [open, setOpen] = React.useState(false)
@@ -43,78 +57,93 @@ export function TimePicker({
   const placeholderText = placeholder ?? t('ui.timePicker.placeholder', 'Pick a time')
   const nowText = t('ui.timePicker.nowButton', 'Now')
   const clearText = t('ui.timePicker.clearButton', 'Clear')
+  const isInteractive = !disabled && !readOnly
+
+  // Render the trigger label in the same 12h "HH:MM AM/PM" format as the slot list
+  // inside the popover so users see one consistent representation.
+  const displayValue = value
+    ? (() => {
+        const { main, suffix } = formatTimePickerDisplay(value, '12h')
+        return suffix ? `${main} ${suffix}` : main
+      })()
+    : null
 
-  const handleTimeChange = React.useCallback(
-    (time: string) => {
-      onChange(time)
-    },
-    [onChange]
+  const triggerButton = (
+    <button
+      type="button"
+      data-crud-focus-target=""
+      disabled={disabled}
+      aria-haspopup="dialog"
+      className={cn(
+        'w-full h-10 flex items-center gap-2 rounded-md border bg-background px-3 text-sm text-left transition-colors',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',
+        'disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed',
+        readOnly && 'cursor-default opacity-70',
+        !value && 'text-muted-foreground',
+        className,
+      )}
+      onClick={!isInteractive ? (event) => event.preventDefault() : undefined}
+    >
+      <ClockIcon className="h-4 w-4 shrink-0 text-muted-foreground" />
+      <span className="flex-1 truncate">{displayValue ?? placeholderText}</span>
+    </button>
   )
 
-  const handleNow = React.useCallback(() => {
-    onChange(currentHHMM())
-    setOpen(false)
-  }, [onChange])
+  if (!isInteractive) {
+    return triggerButton
+  }
 
-  const handleClear = React.useCallback(() => {
-    onChange(null)
-    setOpen(false)
-  }, [onChange])
+  const pinnedTopActions: Array<{
+    label: string
+    onClick: () => void
+    icon?: React.ReactNode
+    rightText?: string
+  }> = []
+  if (showNowButton) {
+    const nowValue = currentHHMM()
+    const { main: nowMain, suffix: nowSuffix } = formatTimePickerDisplay(nowValue, '12h')
+    pinnedTopActions.push({
+      label: nowText,
+      icon: <ClockIcon aria-hidden="true" />,
+      rightText: nowSuffix ? `${nowMain} ${nowSuffix}` : nowMain,
+      onClick: () => {
+        onChange(nowValue)
+        setOpen(false)
+      },
+    })
+  }
 
-  const isInteractive = !disabled && !readOnly
+  const legacyFooterActions: Array<{ label: string; onClick: () => void; variant: 'link' | 'muted' }> = []
+  if (showClearButton) {
+    legacyFooterActions.push({
+      label: clearText,
+      onClick: () => {
+        onChange(null)
+        setOpen(false)
+      },
+      variant: 'muted',
+    })
+  }
 
   return (
-    <Popover open={open} onOpenChange={isInteractive ? setOpen : undefined}>
-      <PopoverTrigger asChild>
-        <button
-          type="button"
-          data-crud-focus-target=""
-          disabled={disabled}
-          aria-haspopup="dialog"
-          className={cn(
-            'w-full h-9 flex items-center gap-2 rounded border px-3 text-sm text-left',
-            'bg-background transition-colors',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',
-            'disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed',
-            readOnly && 'cursor-default opacity-70',
-            !value && 'text-muted-foreground',
-            className
-          )}
-          onClick={isInteractive ? undefined : (e) => e.preventDefault()}
-        >
-          <ClockIcon className="h-4 w-4 shrink-0 text-muted-foreground" />
-          <span className="flex-1 truncate">{value ?? placeholderText}</span>
-        </button>
-      </PopoverTrigger>
-      <PopoverContent className="p-3 w-auto min-w-[180px]">
-        <TimeInput
-          value={value}
-          onChange={handleTimeChange}
-          minuteStep={minuteStep}
-        />
-        {(showNowButton || showClearButton) && (
-          <div className="flex items-center justify-between gap-2 mt-3 pt-2 border-t">
-            {showNowButton && (
-              <button
-                type="button"
-                onClick={handleNow}
-                className="text-sm text-primary hover:underline focus-visible:outline-none"
-              >
-                {nowText}
-              </button>
-            )}
-            {showClearButton && (
-              <button
-                type="button"
-                onClick={handleClear}
-                className="text-sm text-muted-foreground hover:text-foreground hover:underline focus-visible:outline-none ml-auto"
-              >
-                {clearText}
-              </button>
-            )}
-          </div>
-        )}
-      </PopoverContent>
-    </Popover>
+    <TimePickerPrimitive
+      value={value ?? null}
+      onChange={(next) => onChange(next)}
+      onApply={(next) => {
+        onChange(next)
+      }}
+      intervalMinutes={Math.max(1, minuteStep)}
+      // Trigger button already displays current value — don't duplicate it
+      // inside the popover header.
+      showHeader={false}
+      showFooter
+      headerPlaceholder={placeholderText}
+      pinnedTopActions={pinnedTopActions.length > 0 ? pinnedTopActions : undefined}
+      legacyFooterActions={legacyFooterActions.length > 0 ? legacyFooterActions : undefined}
+      trigger={triggerButton}
+      open={open}
+      onOpenChange={setOpen}
+      disabled={disabled}
+    />
   )
 }

package/src/backend/inputs/__tests__/ComboboxInput.test.tsx

@@ -0,0 +1,133 @@
+import * as React from 'react'
+import { act, render, fireEvent, waitFor } from '@testing-library/react'
+import { ComboboxInput } from '../ComboboxInput'
+
+function getInput(container: HTMLElement): HTMLInputElement {
+  const el = container.querySelector('input')
+  if (!el) throw new Error('input not found')
+  return el as HTMLInputElement
+}
+
+describe('ComboboxInput — eager label resolution', () => {
+  it('renders the raw value when nothing can resolve it', () => {
+    const { container } = render(<ComboboxInput value="uuid-123" onChange={() => {}} />)
+    expect(getInput(container).value).toBe('uuid-123')
+  })
+
+  it('hydrates the label from seedOptions without any interaction', () => {
+    const { container } = render(
+      <ComboboxInput
+        value="uuid-123"
+        onChange={() => {}}
+        seedOptions={[{ value: 'uuid-123', label: 'Acme Corp' }]}
+      />,
+    )
+    expect(getInput(container).value).toBe('Acme Corp')
+  })
+
+  it('resolves the label via resolveLabel (async) on mount', async () => {
+    const resolveLabel = jest.fn(async (value: string) => `Resolved ${value}`)
+    const { container } = render(
+      <ComboboxInput value="uuid-123" onChange={() => {}} resolveLabel={resolveLabel} />,
+    )
+    // before the promise resolves, falls back to the raw value
+    expect(getInput(container).value).toBe('uuid-123')
+    await waitFor(() => expect(getInput(container).value).toBe('Resolved uuid-123'))
+    expect(resolveLabel).toHaveBeenCalledWith('uuid-123')
+  })
+
+  it('resolves the label via a synchronous resolveLabel', () => {
+    const { container } = render(
+      <ComboboxInput
+        value="uuid-123"
+        onChange={() => {}}
+        resolveLabel={(value) => (value === 'uuid-123' ? 'Sync Label' : value)}
+      />,
+    )
+    expect(getInput(container).value).toBe('Sync Label')
+  })
+
+  it('does not call resolveLabel when the value is already covered by suggestions', () => {
+    const resolveLabel = jest.fn(() => 'should-not-be-used')
+    render(
+      <ComboboxInput
+        value="uuid-123"
+        onChange={() => {}}
+        suggestions={[{ value: 'uuid-123', label: 'Already Known' }]}
+        resolveLabel={resolveLabel}
+      />,
+    )
+    expect(resolveLabel).not.toHaveBeenCalled()
+  })
+
+  it('falls back to loadSuggestions() (no query) when resolveLabel is absent', async () => {
+    const loadSuggestions = jest.fn(async () => [{ value: 'uuid-123', label: 'From Loader' }])
+    const { container } = render(
+      <ComboboxInput value="uuid-123" onChange={() => {}} loadSuggestions={loadSuggestions} />,
+    )
+    await waitFor(() => expect(getInput(container).value).toBe('From Loader'))
+    expect(loadSuggestions).toHaveBeenCalledWith()
+  })
+
+  it('keeps the resolved label after a blur revert when custom values are disallowed', async () => {
+    const onChange = jest.fn()
+    const { container } = render(
+      <ComboboxInput
+        value="uuid-123"
+        onChange={onChange}
+        allowCustomValues={false}
+        resolveLabel={async () => 'Acme Corp'}
+      />,
+    )
+    await waitFor(() => expect(getInput(container).value).toBe('Acme Corp'))
+    const input = getInput(container)
+    act(() => {
+      fireEvent.change(input, { target: { value: 'partial typing' } })
+      fireEvent.blur(input)
+    })
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 250))
+    })
+    expect(getInput(container).value).toBe('Acme Corp')
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it('does not bake a placeholder back into the input on blur while resolution is pending', async () => {
+    let resolve: (label: string) => void = () => {}
+    const resolveLabel = jest.fn(
+      () => new Promise<string>((res) => { resolve = res }),
+    )
+    const { container } = render(
+      <ComboboxInput
+        value="uuid-123"
+        onChange={() => {}}
+        allowCustomValues={false}
+        resolveLabel={resolveLabel}
+      />,
+    )
+    const input = getInput(container)
+    // user clears the field before resolution lands, then blurs
+    act(() => {
+      fireEvent.change(input, { target: { value: '' } })
+      fireEvent.blur(input)
+    })
+    await act(async () => {
+      await new Promise((res) => setTimeout(res, 250))
+    })
+    // the raw uuid must not have been written into the visible input
+    expect(getInput(container).value).not.toBe('uuid-123')
+    // once resolution arrives, the label shows up
+    act(() => resolve('Acme Corp'))
+    await waitFor(() => expect(getInput(container).value).toBe('Acme Corp'))
+  })
+
+  it('updates the displayed label when the value changes to one resolvable via resolveLabel', async () => {
+    const resolveLabel = jest.fn(async (value: string) => `Label-${value}`)
+    const { container, rerender } = render(
+      <ComboboxInput value="a" onChange={() => {}} resolveLabel={resolveLabel} />,
+    )
+    await waitFor(() => expect(getInput(container).value).toBe('Label-a'))
+    rerender(<ComboboxInput value="b" onChange={() => {}} resolveLabel={resolveLabel} />)
+    await waitFor(() => expect(getInput(container).value).toBe('Label-b'))
+  })
+})

package/src/backend/inputs/__tests__/TimePicker.test.tsx

@@ -23,9 +23,9 @@ describe('TimePicker SSR render', () => {
     expect(html).toContain('Pick a time')
   })
 
-  it('shows HH:MM value in trigger when value is provided', () => {
+  it('shows 12h-formatted value in trigger when value is provided (matches slot list)', () => {
     const html = render(<TimePicker value="14:30" onChange={jest.fn()} />)
-    expect(html).toContain('14:30')
+    expect(html).toContain('02:30 PM')
   })
 
   it('renders trigger button with aria-haspopup="dialog"', () => {

package/src/backend/utils/__tests__/richTextSanitizer.test.ts

@@ -8,9 +8,12 @@ describe('richTextSanitizer', () => {
   })
 
   it('removes executable content and unsafe attributes', () => {
+    // `<img>` is allowlisted (RichEditor `insertImage` toolbar action), so
+    // the tag stays but `onerror` is stripped and `color:red` (CSS keyword,
+    // not in the hex/rgb regex) falls away too.
     expect(
       sanitizeHtmlRichText('<p onclick="alert(1)" style="color:red">Hi<script>alert(1)</script><img src=x onerror=alert(2)>there</p>'),
-    ).toBe('<p>Hithere</p>')
+    ).toBe('<p>Hi<img src="x" />there</p>')
   })
 
   it('removes unsafe href values from links', () => {
@@ -40,7 +43,7 @@ describe('richTextSanitizer', () => {
       ),
     ).toEqual({
       command: 'insertHTML',
-      value: '<p>Safe text</p><a>Bad link</a>',
+      value: '<p>Safe text</p><img src="x" /><a>Bad link</a>',
     })
   })
 

package/src/backend/utils/customFieldForms.ts

@@ -85,7 +85,7 @@ export function buildFormFieldFromCustomFieldDef(
     case 'datetime':
       return { id, label, type: 'datetime', ...baseProps }
     case 'multiline': {
-      let editor: 'simple' | 'uiw' | 'html' = 'uiw'
+      let editor: 'simple' | 'uiw' | 'html' = 'html'
       if (def.editor === 'simpleMarkdown') editor = 'simple'
       else if (def.editor === 'htmlRichText') editor = 'html'
       return { id, label, type: 'richtext', ...baseProps, editor }
@@ -136,7 +136,7 @@ export function buildFormFieldFromCustomFieldDef(
         return base
       }
       if (def.kind === 'text' && typeof def.editor === 'string' && def.editor) {
-        let editor: 'simple' | 'uiw' | 'html' = 'uiw'
+        let editor: 'simple' | 'uiw' | 'html' = 'html'
         if (def.editor === 'simpleMarkdown') editor = 'simple'
         else if (def.editor === 'htmlRichText') editor = 'html'
         return { id, label, type: 'richtext', ...baseProps, editor }