@open-mercato/ui 0.6.4-develop.4382.1.6b4f656b77 → 0.6.4

package/src/backend/__tests__/JsonBuilder.test.tsx

@@ -0,0 +1,135 @@
+/**
+ * @jest-environment jsdom
+ */
+import * as React from 'react'
+import { act, fireEvent, screen, waitFor } from '@testing-library/react'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+import { JsonBuilder } from '../JsonBuilder'
+
+// Radix Select uses pointer capture / scrollIntoView APIs that jsdom doesn't implement.
+// The confirm dialog uses the native <dialog> showModal/close APIs. Polyfill both so the
+// component can be exercised end to end (issue #2817).
+if (typeof window !== 'undefined') {
+  if (!Element.prototype.hasPointerCapture) {
+    Element.prototype.hasPointerCapture = () => false
+  }
+  if (!Element.prototype.releasePointerCapture) {
+    Element.prototype.releasePointerCapture = () => undefined
+  }
+  if (!Element.prototype.scrollIntoView) {
+    Element.prototype.scrollIntoView = () => undefined
+  }
+  Object.defineProperty(HTMLDialogElement.prototype, 'showModal', {
+    configurable: true,
+    value(this: HTMLDialogElement) {
+      this.setAttribute('open', '')
+    },
+  })
+  Object.defineProperty(HTMLDialogElement.prototype, 'close', {
+    configurable: true,
+    value(this: HTMLDialogElement) {
+      this.removeAttribute('open')
+    },
+  })
+}
+
+function ControlledHarness({ initial = {} as any }: { initial?: any }) {
+  const [value, setValue] = React.useState<any>(initial)
+  // Inline onChange recreated each render — mirrors how WebhookCustomHeadersField
+  // wires the builder. A stale effect dependency on this identity is what made
+  // Raw JSON uneditable before the fix.
+  return (
+    <>
+      <JsonBuilder value={value} onChange={(next) => setValue(next)} />
+      <div data-testid="value">{JSON.stringify(value)}</div>
+    </>
+  )
+}
+
+describe('JsonBuilder', () => {
+  it('lets the user type JSON in Raw mode without clobbering the text', () => {
+    renderWithProviders(<ControlledHarness />)
+
+    const textarea = screen.getByPlaceholderText('{"key": "value"}') as HTMLTextAreaElement
+
+    act(() => {
+      fireEvent.change(textarea, { target: { value: '{"a":"1"}' } })
+    })
+
+    // The exact typed text is preserved (not reformatted/reset by a value echo).
+    expect(textarea.value).toBe('{"a":"1"}')
+    // ...and the parsed object propagated to the parent.
+    expect(screen.getByTestId('value').textContent).toBe('{"a":"1"}')
+  })
+
+  it('mirrors an external value into the Raw textarea until the user edits it', () => {
+    function ExternalHarness() {
+      const [value, setValue] = React.useState<any>({})
+      return (
+        <>
+          <button type="button" onClick={() => setValue({ injected: 'hello' })}>
+            load
+          </button>
+          <JsonBuilder value={value} onChange={setValue} />
+        </>
+      )
+    }
+
+    renderWithProviders(<ExternalHarness />)
+    const textarea = screen.getByPlaceholderText('{"key": "value"}') as HTMLTextAreaElement
+
+    act(() => {
+      fireEvent.click(screen.getByRole('button', { name: 'load' }))
+    })
+
+    expect(textarea.value).toContain('injected')
+    expect(textarea.value).toContain('hello')
+  })
+
+  async function openBuilderAndChangeRootType() {
+    renderWithProviders(<ControlledHarness initial={{ foo: 'bar' }} />)
+
+    act(() => {
+      fireEvent.click(screen.getByRole('button', { name: 'Builder' }))
+    })
+
+    const rootTrigger = screen
+      .getAllByRole('combobox')
+      .find((element) => element.textContent?.trim() === 'Object')
+    expect(rootTrigger).toBeDefined()
+
+    fireEvent.pointerDown(rootTrigger!, { button: 0, ctrlKey: false })
+    fireEvent.click(rootTrigger!)
+
+    const stringOption = screen.getByRole('option', { name: 'String' })
+    await act(async () => {
+      fireEvent.pointerDown(stringOption)
+      fireEvent.click(stringOption)
+    })
+  }
+
+  it('asks for confirmation before a destructive root type change and preserves data on cancel', async () => {
+    await openBuilderAndChangeRootType()
+
+    const cancelButton = await screen.findByRole('button', { name: 'Cancel' })
+    await act(async () => {
+      fireEvent.click(cancelButton)
+    })
+
+    // Cancelling leaves the configured properties intact.
+    expect(screen.getByTestId('value').textContent).toBe('{"foo":"bar"}')
+  })
+
+  it('discards data only after the destructive root type change is confirmed', async () => {
+    await openBuilderAndChangeRootType()
+
+    const confirmButton = await screen.findByRole('button', { name: 'Discard and change' })
+    await act(async () => {
+      fireEvent.click(confirmButton)
+    })
+
+    await waitFor(() => {
+      expect(screen.getByTestId('value').textContent).toBe('""')
+    })
+  })
+})

package/src/backend/__tests__/lazy-heavy-libraries.test.ts

@@ -24,10 +24,23 @@ describe('heavy libraries are lazy-loaded', () => {
     expect(source).not.toMatch(/next\/dynamic/)
   })
 
-  it('CrudForm does not statically import remark-gfm', () => {
+  it('CrudForm does not statically import the heavy markdown editor', () => {
     const source = read('packages/ui/src/backend/CrudForm.tsx')
-    expect(source).not.toMatch(/^[^\n/]*import\s+[^'\n]+from\s+['"]remark-gfm['"]/m)
-    expect(source).toMatch(/import\(['"]remark-gfm['"]\)/)
+    expect(source).not.toMatch(/from\s+['"]@mdxeditor\/editor['"]/)
+    expect(source).toMatch(/from\s+['"]\.\/inputs\/MarkdownField['"]/)
+  })
+
+  it('MarkdownField lazy-loads MdxEditorImpl and does not statically import it', () => {
+    const source = read('packages/ui/src/backend/inputs/MarkdownField.tsx')
+    expect(source).not.toMatch(/^[^\n/]*import\s+[^'\n]+from\s+['"]\.\/MdxEditorImpl['"]/m)
+    expect(source).toMatch(/import\(['"]\.\/MdxEditorImpl['"]\)/)
+    expect(source).toMatch(/next\/dynamic/)
+  })
+
+  it('MdxEditorImpl owns the @mdxeditor/editor runtime import and CSS', () => {
+    const source = read('packages/ui/src/backend/inputs/MdxEditorImpl.tsx')
+    expect(source).toMatch(/from\s+['"]@mdxeditor\/editor['"]/)
+    expect(source).toMatch(/['"]@mdxeditor\/editor\/style\.css['"]/)
   })
 
   it('resources resource-types list page does not import markdown libraries', () => {

package/src/backend/conflicts/RecordConflictBanner.tsx

@@ -0,0 +1,77 @@
+"use client"
+import * as React from 'react'
+import { RefreshCw, X } from 'lucide-react'
+import { Button } from '../../primitives/button'
+import { IconButton } from '../../primitives/icon-button'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { dismissRecordConflict, useRecordConflict } from './store'
+
+/**
+ * Persistent, error-styled bar that surfaces an optimistic-lock conflict
+ * ("this record was modified by someone else"). Rendered once in `AppShell`
+ * next to the undo `LastOperationBanner`, it is the unified, clearly-visible
+ * surface for the conflict across every form (CrudForm, useGuardedMutation,
+ * and custom pages all push through `conflicts/store`). Unlike the undo bar it
+ * does NOT auto-dismiss — the user resolves it by refreshing or dismissing.
+ */
+export function RecordConflictBanner() {
+  const t = useT()
+  const conflict = useRecordConflict()
+
+  const handleRefresh = React.useCallback(() => {
+    const onRefresh = conflict?.onRefresh ?? null
+    dismissRecordConflict()
+    if (onRefresh) {
+      onRefresh()
+      return
+    }
+    if (typeof window !== 'undefined' && typeof window.location?.reload === 'function') {
+      try {
+        const isJSDOM = typeof navigator !== 'undefined' && typeof navigator.userAgent === 'string'
+          ? navigator.userAgent.toLowerCase().includes('jsdom')
+          : false
+        if (!isJSDOM) window.location.reload()
+      } catch {
+        // noop in non-browser / jsdom environments
+      }
+    }
+  }, [conflict])
+
+  if (!conflict) return null
+
+  return (
+    <div
+      role="alert"
+      data-testid="record-conflict-banner"
+      className="mb-4 flex items-center justify-between gap-3 rounded-md border border-status-error-border bg-status-error-bg pl-3 pr-2 py-2 text-sm text-status-error-text shadow-xs sm:pr-3"
+    >
+      <div className="min-w-0">
+        <span className="font-medium text-status-error-text">
+          {conflict.title ?? t('ui.forms.conflict.title', 'Record changed')}
+        </span>
+        <span className="ml-2 text-status-error-text">{conflict.message}</span>
+      </div>
+      <div className="flex items-center gap-1">
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={handleRefresh}
+          className="border-status-error-border bg-status-error-bg text-status-error-text hover:bg-status-error-border hover:text-status-error-text px-2.5 sm:px-3"
+        >
+          <RefreshCw className="mr-1 size-4" aria-hidden="true" />
+          {t('ui.forms.conflict.refresh', 'Refresh')}
+        </Button>
+        <IconButton
+          type="button"
+          variant="ghost"
+          size="sm"
+          aria-label={t('ui.forms.conflict.dismiss', 'Dismiss')}
+          onClick={() => dismissRecordConflict()}
+        >
+          <X className="size-4" aria-hidden="true" />
+        </IconButton>
+      </div>
+    </div>
+  )
+}

package/src/backend/conflicts/__tests__/RecordConflictBanner.test.tsx

@@ -0,0 +1,61 @@
+/** @jest-environment jsdom */
+import * as React from 'react'
+import { act, render, screen } from '@testing-library/react'
+
+jest.mock('@open-mercato/shared/lib/i18n/context', () => ({
+  useT: () => (key: string, fallback?: string) => fallback ?? key,
+}))
+
+import { RecordConflictBanner } from '../RecordConflictBanner'
+import { dismissRecordConflict, showRecordConflict } from '../store'
+
+describe('RecordConflictBanner', () => {
+  beforeEach(() => dismissRecordConflict())
+  afterEach(() => dismissRecordConflict())
+
+  it('renders nothing when there is no active conflict', () => {
+    const { container } = render(<RecordConflictBanner />)
+    expect(container.querySelector('[data-testid="record-conflict-banner"]')).toBeNull()
+  })
+
+  it('renders the localized message + Refresh/Dismiss as an alert when a conflict is active', () => {
+    render(<RecordConflictBanner />)
+    act(() => {
+      showRecordConflict({
+        message: 'This record was modified by someone else. Refresh and try again.',
+      })
+    })
+    const banner = screen.getByTestId('record-conflict-banner')
+    expect(banner.getAttribute('role')).toBe('alert')
+    expect(banner.textContent).toContain('Record changed')
+    expect(banner.textContent).toContain('This record was modified by someone else. Refresh and try again.')
+    expect(screen.getByRole('button', { name: 'Refresh' })).not.toBeNull()
+    expect(screen.getByRole('button', { name: 'Dismiss' })).not.toBeNull()
+  })
+
+  it('invokes a custom onRefresh and clears the bar when Refresh is clicked', () => {
+    const onRefresh = jest.fn()
+    render(<RecordConflictBanner />)
+    act(() => {
+      showRecordConflict({ message: 'Changed', onRefresh })
+    })
+    act(() => {
+      screen.getByRole('button', { name: 'Refresh' }).click()
+    })
+    expect(onRefresh).toHaveBeenCalledTimes(1)
+    expect(screen.queryByTestId('record-conflict-banner')).toBeNull()
+  })
+
+  it('Dismiss clears the bar without refreshing', () => {
+    const onRefresh = jest.fn()
+    render(<RecordConflictBanner />)
+    act(() => {
+      showRecordConflict({ message: 'Changed', onRefresh })
+    })
+    act(() => {
+      screen.getByRole('button', { name: 'Dismiss' }).click()
+    })
+    expect(onRefresh).not.toHaveBeenCalled()
+    expect(screen.queryByTestId('record-conflict-banner')).toBeNull()
+  })
+})

package/src/backend/conflicts/__tests__/store.test.ts

@@ -0,0 +1,78 @@
+/** @jest-environment jsdom */
+import { CrudHttpError } from '@open-mercato/shared/lib/crud/errors'
+import { OPTIMISTIC_LOCK_CONFLICT_CODE } from '@open-mercato/shared/lib/crud/optimistic-lock-headers'
+import {
+  dismissRecordConflict,
+  getRecordConflictForTest,
+  showRecordConflict,
+  surfaceRecordConflict,
+} from '..'
+
+const t = (key: string, fallback?: string) => fallback ?? key
+
+describe('record conflict store + surfaceRecordConflict', () => {
+  beforeEach(() => dismissRecordConflict())
+
+  it('showRecordConflict sets the active entry; dismiss clears it', () => {
+    expect(getRecordConflictForTest()).toBeNull()
+    showRecordConflict({ message: 'Changed', currentUpdatedAt: '2026-05-25T08:00:01.000Z' })
+    const entry = getRecordConflictForTest()
+    expect(entry?.message).toBe('Changed')
+    expect(entry?.currentUpdatedAt).toBe('2026-05-25T08:00:01.000Z')
+    dismissRecordConflict()
+    expect(getRecordConflictForTest()).toBeNull()
+  })
+
+  it('surfaceRecordConflict pushes the localized message for an optimistic-lock 409 and returns true', () => {
+    const conflict = new CrudHttpError(409, {
+      error: 'record_modified',
+      code: OPTIMISTIC_LOCK_CONFLICT_CODE,
+      currentUpdatedAt: '2026-05-25T08:00:01.000Z',
+      expectedUpdatedAt: '2026-05-25T08:00:00.000Z',
+    })
+    const handled = surfaceRecordConflict(conflict, t)
+    expect(handled).toBe(true)
+    expect(getRecordConflictForTest()?.message).toBe(
+      'This record was modified by someone else. Refresh and try again.',
+    )
+  })
+
+  it('surfaceRecordConflict recognizes a plain apiCall-result envelope ({ status, body }) — used by custom admin pages whose apiCall does not throw on 409', () => {
+    const apiCallEnvelope = {
+      status: 409,
+      body: {
+        error: 'record_modified',
+        code: OPTIMISTIC_LOCK_CONFLICT_CODE,
+        currentUpdatedAt: '2026-05-25T08:00:01.000Z',
+        expectedUpdatedAt: '2026-05-25T08:00:00.000Z',
+      },
+    }
+    expect(surfaceRecordConflict(apiCallEnvelope, t)).toBe(true)
+    expect(getRecordConflictForTest()?.currentUpdatedAt).toBe('2026-05-25T08:00:01.000Z')
+  })
+
+  it('surfaceRecordConflict ignores a non-409 apiCall envelope (e.g. 500 with no conflict body)', () => {
+    expect(surfaceRecordConflict({ status: 500, body: { error: 'server_error' } }, t)).toBe(false)
+    expect(getRecordConflictForTest()).toBeNull()
+  })
+
+  it('surfaceRecordConflict is a no-op (returns false) for non-conflict errors', () => {
+    expect(surfaceRecordConflict(new CrudHttpError(422, { error: 'validation_failed' }), t)).toBe(false)
+    expect(surfaceRecordConflict(new Error('boom'), t)).toBe(false)
+    expect(getRecordConflictForTest()).toBeNull()
+  })
+
+  it('forwards a custom onRefresh callback', () => {
+    const onRefresh = jest.fn()
+    const conflict = new CrudHttpError(409, {
+      error: 'record_modified',
+      code: OPTIMISTIC_LOCK_CONFLICT_CODE,
+      currentUpdatedAt: '2026-05-25T08:00:01.000Z',
+      expectedUpdatedAt: '2026-05-25T08:00:00.000Z',
+    })
+    surfaceRecordConflict(conflict, t, { onRefresh, title: 'Order changed' })
+    const entry = getRecordConflictForTest()
+    expect(entry?.title).toBe('Order changed')
+    expect(entry?.onRefresh).toBe(onRefresh)
+  })
+})

package/src/backend/conflicts/index.ts

@@ -0,0 +1,49 @@
+import { extractOptimisticLockConflict } from '../utils/optimisticLock'
+import { showRecordConflict } from './store'
+
+export {
+  showRecordConflict,
+  dismissRecordConflict,
+  useRecordConflict,
+  getRecordConflictForTest,
+  type RecordConflictEntry,
+  type ShowRecordConflictInput,
+} from './store'
+export { RecordConflictBanner } from './RecordConflictBanner'
+
+type Translate = (key: string, fallback?: string) => string
+
+export type SurfaceRecordConflictOptions = {
+  /** Custom refresh handler. Omit to let the banner reload the page. */
+  onRefresh?: (() => void) | null
+  /** Localized title override; the banner falls back to a generic title. */
+  title?: string | null
+}
+
+/**
+ * If `error` is an OSS optimistic-lock conflict (HTTP 409 with
+ * `code: 'optimistic_lock_conflict'`), push the localized "record modified"
+ * message onto the shared conflict bar and return `true`. Otherwise return
+ * `false` so callers can fall back to their normal error handling.
+ *
+ * This is the single entry point every form uses, so the conflict surfaces the
+ * same persistent, error-styled bar everywhere.
+ */
+export function surfaceRecordConflict(
+  error: unknown,
+  t: Translate,
+  options: SurfaceRecordConflictOptions = {},
+): boolean {
+  const conflict = extractOptimisticLockConflict(error)
+  if (!conflict) return false
+  showRecordConflict({
+    message: t(
+      'ui.forms.flash.recordModified',
+      'This record was modified by someone else. Refresh and try again.',
+    ),
+    title: options.title ?? null,
+    currentUpdatedAt: conflict.currentUpdatedAt,
+    onRefresh: options.onRefresh ?? null,
+  })
+  return true
+}

package/src/backend/conflicts/store.ts

@@ -0,0 +1,94 @@
+"use client"
+import * as React from 'react'
+
+/**
+ * In-memory store for the unified record-conflict bar.
+ *
+ * When a mutation fails with an OSS optimistic-lock conflict (HTTP 409 with
+ * `code: 'optimistic_lock_conflict'`), forms surface it through this store so a
+ * persistent, error-styled bar — the `RecordConflictBanner` rendered once in
+ * `AppShell` — shows the "this record was modified" message app-wide, instead
+ * of a transient toast that scrolls away. Mirrors the undo `LastOperationBanner`
+ * pattern but for the error case, and is shared by `CrudForm`,
+ * `useGuardedMutation`, and any custom page, so every form behaves the same.
+ *
+ * Unlike the operations store this is NOT persisted to localStorage — it holds
+ * a live `onRefresh` callback and a conflict only matters for the current page
+ * session.
+ */
+export type RecordConflictEntry = {
+  id: string
+  /** Localized, user-facing message (e.g. ui.forms.flash.recordModified). */
+  message: string
+  /** Optional localized title; the banner falls back to a generic title. */
+  title?: string | null
+  /** The server's current `updated_at`, for diagnostics / future diffing. */
+  currentUpdatedAt?: string | null
+  /**
+   * Invoked when the user clicks "Refresh". When omitted the banner reloads
+   * the page (the safe default — re-fetches the latest server state).
+   */
+  onRefresh?: (() => void) | null
+  createdAt: number
+}
+
+let internalEntry: RecordConflictEntry | null = null
+let sequence = 0
+
+const emitter = new EventTarget()
+
+function emit(): void {
+  emitter.dispatchEvent(new Event('change'))
+}
+
+function subscribe(listener: () => void): () => void {
+  const wrapped = () => listener()
+  emitter.addEventListener('change', wrapped)
+  return () => emitter.removeEventListener('change', wrapped)
+}
+
+function nextId(): string {
+  sequence += 1
+  return `conflict:${sequence}`
+}
+
+export type ShowRecordConflictInput = {
+  message: string
+  title?: string | null
+  currentUpdatedAt?: string | null
+  onRefresh?: (() => void) | null
+}
+
+/** Show (or replace) the active record-conflict bar. */
+export function showRecordConflict(input: ShowRecordConflictInput): void {
+  internalEntry = {
+    id: nextId(),
+    message: input.message,
+    title: input.title ?? null,
+    currentUpdatedAt: input.currentUpdatedAt ?? null,
+    onRefresh: input.onRefresh ?? null,
+    createdAt: typeof Date !== 'undefined' ? Date.now() : 0,
+  }
+  emit()
+}
+
+/** Clear the active record-conflict bar. */
+export function dismissRecordConflict(): void {
+  if (internalEntry === null) return
+  internalEntry = null
+  emit()
+}
+
+/** Read the active conflict (null when none). Subscribes to changes. */
+export function useRecordConflict(): RecordConflictEntry | null {
+  return React.useSyncExternalStore(
+    subscribe,
+    () => internalEntry,
+    () => null,
+  )
+}
+
+/** Test-only accessor for the current entry without React. */
+export function getRecordConflictForTest(): RecordConflictEntry | null {
+  return internalEntry
+}

package/src/backend/detail/ActivitiesSection.tsx

@@ -395,6 +395,7 @@ function ActivityForm({
           allowInlineCreate
           appearanceLabels={appearanceLabels}
           selectClassName="w-full"
+          sortOptions="none"
           manageHref={manageHref}
         />
       ),

package/src/backend/detail/InlineEditors.tsx

@@ -1,7 +1,6 @@
 "use client"
 
 import * as React from 'react'
-import dynamic from 'next/dynamic'
 import { FileCode, Loader2, Mail, Pencil, Phone, X } from 'lucide-react'
 import type { PluggableList } from 'unified'
 import { PhoneNumberField } from '@open-mercato/ui/backend/inputs/PhoneNumberField'
@@ -444,40 +443,10 @@ export type InlineMultilineEditorProps = {
   renderDisplay?: (params: { value: string | null | undefined; emptyLabel: string }) => React.ReactNode
 }
 
-type UiMarkdownEditorProps = {
-  value?: string
-  height?: number
-  onChange?: (value?: string) => void
-  previewOptions?: { remarkPlugins?: unknown[] }
-}
-
 const isTestEnv =
   typeof process !== 'undefined' &&
   (process.env.NODE_ENV === 'test' || typeof process.env.JEST_WORKER_ID !== 'undefined')
 
-function MarkdownEditorFallback() {
-  const t = useT()
-  return (
-    <LoadingMessage label={t('ui.detail.inline.editorLoading', 'Loading editor…')} className="min-h-[200px] justify-center" />
-  )
-}
-
-const MarkdownEditorTestStub: React.ComponentType<UiMarkdownEditorProps> = ({ value, onChange }) => (
-  <Textarea
-    data-testid="markdown-editor"
-    rows={8}
-    value={value ?? ''}
-    onChange={(event) => onChange?.(event.target.value)}
-  />
-)
-
-const MarkdownEditorComponent: React.ComponentType<UiMarkdownEditorProps> = isTestEnv
-  ? MarkdownEditorTestStub
-  : (dynamic(() => import('@uiw/react-md-editor'), {
-      ssr: false,
-      loading: () => <MarkdownEditorFallback />,
-    }) as unknown as React.ComponentType<UiMarkdownEditorProps>)
-
 let markdownPluginsPromise: Promise<PluggableList> | null = null
 
 async function loadMarkdownPlugins(): Promise<PluggableList> {
@@ -510,7 +479,6 @@ export function InlineMultilineEditor({
   const [saving, setSaving] = React.useState(false)
   const [isMarkdownEnabled, setIsMarkdownEnabled] = React.useState(true)
   const textareaRef = React.useRef<HTMLTextAreaElement | null>(null)
-  const markdownEditorRef = React.useRef<HTMLDivElement | null>(null)
   const [markdownPlugins, setMarkdownPlugins] = React.useState<PluggableList>([])
   const fallbackError = React.useMemo(
     () => t('ui.detail.inline.error', 'Failed to save value.'),
@@ -540,14 +508,6 @@ export function InlineMultilineEditor({
 
   React.useEffect(() => {
     if (!editing) return
-    if (isMarkdownEnabled) {
-      const element = markdownEditorRef.current?.querySelector('textarea')
-      if (!element) return
-      window.requestAnimationFrame(() => {
-        element.focus()
-      })
-      return
-    }
     const element = textareaRef.current
     if (!element) return
     window.requestAnimationFrame(() => {
@@ -674,42 +634,20 @@ export function InlineMultilineEditor({
                 }
               }}
             >
-              {isMarkdownEnabled ? (
-                <div
-                  ref={markdownEditorRef}
-                  className={cn(
-                    'w-full rounded-md border border-muted-foreground/30 bg-background p-2',
-                    saving ? 'pointer-events-none opacity-75' : null,
-                  )}
-                >
-                  <div data-color-mode="light" className="w-full">
-                    <MarkdownEditorComponent
-                      value={draft}
-                      height={220}
-                      onChange={(nextValue) => {
-                        if (error) setError(null)
-                        setDraft(typeof nextValue === 'string' ? nextValue : '')
-                      }}
-                      previewOptions={{ remarkPlugins: markdownPlugins }}
-                    />
-                  </div>
-                </div>
-              ) : (
-                <Textarea
-                  ref={textareaRef}
-                  rows={3}
-                  className="w-full resize-none overflow-hidden rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                  placeholder={placeholder}
-                  value={draft}
-                  onChange={(event) => {
-                    if (error) setError(null)
-                    setDraft(event.target.value)
-                  }}
-                  onInput={(event) => adjustTextareaSize(event.currentTarget)}
-                  autoFocus
-                  disabled={saving}
-                />
-              )}
+              <Textarea
+                ref={textareaRef}
+                rows={isMarkdownEnabled ? 8 : 3}
+                className="w-full resize-none overflow-hidden rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                placeholder={placeholder}
+                value={draft}
+                onChange={(event) => {
+                  if (error) setError(null)
+                  setDraft(event.target.value)
+                }}
+                onInput={(event) => adjustTextareaSize(event.currentTarget)}
+                autoFocus
+                disabled={saving}
+              />
               {error ? <p className="text-xs text-destructive">{error}</p> : null}
               <div className="flex items-center gap-2">
                 <Button type="submit" size="sm" disabled={saving}>