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

package/src/backend/injection/useGuardedMutation.ts

@@ -4,6 +4,8 @@ import * as React from 'react'
 import { useInjectionSpotEvents } from './InjectionSpot'
 import { GLOBAL_MUTATION_INJECTION_SPOT_ID, dispatchBackendMutationError } from './mutationEvents'
 import { withScopedApiRequestHeaders } from '../utils/apiCall'
+import { surfaceRecordConflict } from '../conflicts'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
 
 type GuardedMutationContext = Record<string, unknown>
 
@@ -30,6 +32,7 @@ export function useGuardedMutation<TContext extends GuardedMutationContext>({
   blockedMessage = 'Save blocked by validation',
   spotId = GLOBAL_MUTATION_INJECTION_SPOT_ID,
 }: UseGuardedMutationOptions) {
+  const t = useT()
   const { triggerEvent } = useInjectionSpotEvents<TContext, Record<string, unknown>>(spotId)
   const lastMutationRef = React.useRef<StoredMutation<TContext> | null>(null)
 
@@ -39,7 +42,19 @@ export function useGuardedMutation<TContext extends GuardedMutationContext>({
       formId: contextId,
       error,
     })
-  }, [contextId])
+    // Default UX for OSS optimistic-lock conflicts (spec
+    // .ai/specs/2026-05-25-oss-optimistic-locking.md §3.6): when the
+    // server returns 409 with `code: 'optimistic_lock_conflict'`,
+    // surface the conflict on the unified, persistent, error-styled
+    // RecordConflictBanner (rendered in AppShell) instead of a transient
+    // toast. Callers that have their own handler still see the dispatched
+    // event above and can suppress/override by catching the error first.
+    try {
+      surfaceRecordConflict(error, t)
+    } catch {
+      // ignore conflict-bar dispatch failures
+    }
+  }, [contextId, t])
 
   const runMutation = React.useCallback(async <TResult,>({
     operation,

package/src/backend/inputs/MarkdownField.tsx

@@ -0,0 +1,34 @@
+"use client"
+
+import * as React from 'react'
+import dynamic from 'next/dynamic'
+import type { ComponentType } from 'react'
+
+export type MarkdownFieldProps = {
+  value?: string
+  onChange: (markdown: string) => void
+}
+
+const isTestEnv =
+  typeof process !== 'undefined' &&
+  (process.env.NODE_ENV === 'test' || typeof process.env.JEST_WORKER_ID !== 'undefined')
+
+// Lightweight stand-in for unit tests (jsdom): MDXEditor/Lexical pull in ESM + CSS that jest
+// would have to transform, so under test we render a plain controlled textarea instead.
+const MarkdownFieldTestStub: ComponentType<MarkdownFieldProps> = ({ value, onChange }) => (
+  <textarea
+    data-testid="markdown-field"
+    className="min-h-[160px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+    value={value ?? ''}
+    onChange={(event) => onChange(event.target.value)}
+  />
+)
+
+const MarkdownFieldLive = dynamic(() => import('./MdxEditorImpl'), { ssr: false }) as ComponentType<MarkdownFieldProps>
+
+// Canonical Markdown editor for the whole app: a WYSIWYG MDXEditor (Lexical) that emits Markdown.
+// Client-only (Lexical needs the DOM), loaded via next/dynamic with ssr disabled. Use this
+// everywhere a Markdown editing field is needed.
+const MarkdownField: ComponentType<MarkdownFieldProps> = isTestEnv ? MarkdownFieldTestStub : MarkdownFieldLive
+
+export default MarkdownField

package/src/backend/inputs/MdxEditorImpl.tsx

@@ -0,0 +1,113 @@
+/// <reference path="../../types/css.d.ts" />
+"use client"
+
+import * as React from 'react'
+import {
+  MDXEditor,
+  type MDXEditorMethods,
+  headingsPlugin,
+  listsPlugin,
+  quotePlugin,
+  thematicBreakPlugin,
+  linkPlugin,
+  linkDialogPlugin,
+  imagePlugin,
+  tablePlugin,
+  markdownShortcutPlugin,
+  diffSourcePlugin,
+  toolbarPlugin,
+  UndoRedo,
+  BoldItalicUnderlineToggles,
+  CodeToggle,
+  StrikeThroughSupSubToggles,
+  ListsToggle,
+  BlockTypeSelect,
+  CreateLink,
+  InsertImage,
+  InsertTable,
+  InsertThematicBreak,
+  Separator,
+  DiffSourceToggleWrapper,
+} from '@mdxeditor/editor'
+import '@mdxeditor/editor/style.css'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useTheme } from '../../theme'
+
+type MdxEditorImplProps = {
+  value?: string
+  onChange: (markdown: string) => void
+}
+
+// WYSIWYG Markdown editor (MDXEditor / Lexical) wired to the CrudForm value/onChange
+// contract. Markdown is the source of truth. Edits are buffered locally and committed
+// on blur to avoid re-rendering the whole form on every keystroke.
+export default function MdxEditorImpl({ value = '', onChange }: MdxEditorImplProps) {
+  const editorRef = React.useRef<MDXEditorMethods>(null)
+  const latestRef = React.useRef<string>(value)
+  const typingRef = React.useRef(false)
+  const { resolvedTheme } = useTheme()
+
+  // External value changes (form reset / async initial load) are pushed into the editor,
+  // but never while the user is actively typing (would reset the caret).
+  React.useEffect(() => {
+    if (typingRef.current) return
+    if (value !== latestRef.current) {
+      latestRef.current = value
+      editorRef.current?.setMarkdown(value ?? '')
+    }
+  }, [value])
+
+  const commit = React.useCallback(() => {
+    if (!typingRef.current) return
+    typingRef.current = false
+    onChange(latestRef.current)
+  }, [onChange])
+
+  return (
+    <div className="w-full overflow-hidden rounded-md border border-input bg-background" onBlur={commit}>
+      <MDXEditor
+        ref={editorRef}
+        markdown={value ?? ''}
+        onChange={(markdown) => {
+          typingRef.current = true
+          latestRef.current = markdown
+        }}
+        className={cn('om-mdx-editor', resolvedTheme === 'dark' && 'dark-theme')}
+        contentEditableClassName="om-mdx-prose"
+        plugins={[
+          headingsPlugin(),
+          listsPlugin(),
+          quotePlugin(),
+          thematicBreakPlugin(),
+          linkPlugin(),
+          linkDialogPlugin(),
+          imagePlugin(),
+          tablePlugin(),
+          markdownShortcutPlugin(),
+          diffSourcePlugin({ viewMode: 'rich-text' }),
+          toolbarPlugin({
+            toolbarContents: () => (
+              <DiffSourceToggleWrapper>
+                <UndoRedo />
+                <Separator />
+                <BoldItalicUnderlineToggles />
+                <CodeToggle />
+                <StrikeThroughSupSubToggles />
+                <Separator />
+                <ListsToggle />
+                <Separator />
+                <BlockTypeSelect />
+                <Separator />
+                <CreateLink />
+                <InsertImage />
+                <Separator />
+                <InsertTable />
+                <InsertThematicBreak />
+              </DiffSourceToggleWrapper>
+            ),
+          }),
+        ]}
+      />
+    </div>
+  )
+}

package/src/backend/inputs/SwitchableMarkdownInput.tsx

@@ -29,11 +29,8 @@
 "use client"
 
 import * as React from 'react'
-import dynamic from 'next/dynamic'
 import type { PluggableList } from 'unified'
-import { LoadingMessage } from '../detail/LoadingMessage'
-import { useMarkdownRemarkPlugins } from '../markdown/useMarkdownRemarkPlugins'
-import { useTheme } from '../../theme'
+import MarkdownField from './MarkdownField'
 
 /** @deprecated See module-level JSDoc. */
 export type SwitchableMarkdownInputProps = {
@@ -53,75 +50,29 @@ export type SwitchableMarkdownInputProps = {
   remarkPlugins?: PluggableList
 }
 
-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')
-
-const MarkdownEditorTestStub: React.ComponentType<UiMarkdownEditorProps> = ({ value, onChange }) => (
-  <textarea
-    className="min-h-[160px] w-full rounded border px-3 py-2 text-sm"
-    value={value ?? ''}
-    onChange={(event) => onChange?.(event.target.value)}
-  />
-)
-
-const UiMarkdownEditor = isTestEnv
-  ? MarkdownEditorTestStub
-  : (dynamic(() => import('@uiw/react-md-editor'), {
-      ssr: false,
-      loading: () => (
-        <LoadingMessage
-          label="Loading editor..."
-          className="min-h-[220px] justify-center"
-        />
-      ),
-    }) as unknown as React.ComponentType<UiMarkdownEditorProps>)
-
 /** @deprecated Use `RichEditor` from `@open-mercato/ui/primitives/rich-editor` for new code. See module JSDoc. */
 export function SwitchableMarkdownInput({
   value,
   onChange,
   isMarkdownEnabled,
   disableMarkdown,
-  height = 220,
   placeholder,
   rows = 3,
   textareaRef,
   onTextareaInput,
   textareaClassName,
-  editorWrapperClassName,
-  editorClassName,
   disabled,
-  remarkPlugins,
 }: SwitchableMarkdownInputProps) {
-  const resolvedPlugins = useMarkdownRemarkPlugins(remarkPlugins)
-  const { resolvedTheme } = useTheme()
-  const editorWrapperClasses =
-    editorWrapperClassName ?? 'w-full rounded-lg border border-muted-foreground/20 bg-background p-2'
-  const editorClasses = editorClassName ?? 'w-full'
   const textareaClasses =
     textareaClassName
     ?? 'w-full resize-none overflow-hidden rounded-lg border border-muted-foreground/20 bg-background px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
 
   if (isMarkdownEnabled && !disableMarkdown) {
     return (
-      <div className={editorWrapperClasses}>
-        <div data-color-mode={resolvedTheme} className={editorClasses}>
-          <UiMarkdownEditor
-            value={value}
-            height={height}
-            onChange={(nextValue) => onChange(typeof nextValue === 'string' ? nextValue : '')}
-            previewOptions={resolvedPlugins.length ? { remarkPlugins: resolvedPlugins } : undefined}
-          />
-        </div>
-      </div>
+      <MarkdownField
+        value={value}
+        onChange={(nextValue) => onChange(typeof nextValue === 'string' ? nextValue : '')}
+      />
     )
   }
 

package/src/backend/markdown/__tests__/markdownToPlainText.test.ts

@@ -26,4 +26,17 @@ describe('markdownToPlainText', () => {
     const input = '> quoted text\n\n~~gone~~\n\n| a | b |\n| - | - |\n| 1 | 2 |'
     expect(markdownToPlainText(input)).toBe('quoted text gone a b - - 1 2')
   })
+
+  it('strips legacy HTML tags and separates block content', () => {
+    expect(markdownToPlainText('<span style="font-weight:bold">Backend</span> and frontend')).toBe(
+      'Backend and frontend',
+    )
+    expect(markdownToPlainText('<p>Hello</p><p>World</p>')).toBe('Hello World')
+  })
+
+  it('decodes named, decimal, and hex HTML entities', () => {
+    expect(markdownToPlainText('Tom &amp; Jerry')).toBe('Tom & Jerry')
+    expect(markdownToPlainText('it&#39;s &#x2014; done')).toBe("it's — done")
+    expect(markdownToPlainText('a&nbsp;b')).toBe('a b')
+  })
 })

package/src/backend/markdown/markdownToPlainText.ts

@@ -1,7 +1,47 @@
+const NAMED_HTML_ENTITIES: Record<string, string> = {
+  amp: '&',
+  lt: '<',
+  gt: '>',
+  quot: '"',
+  apos: "'",
+  nbsp: ' ',
+  hellip: '…',
+  mdash: '—',
+  ndash: '–',
+  rsquo: '’',
+  lsquo: '‘',
+  rdquo: '”',
+  ldquo: '“',
+}
+
+function decodeHtmlEntities(value: string): string {
+  return value
+    .replace(/&#(\d+);/g, (match, dec: string) => {
+      const code = Number(dec)
+      return Number.isFinite(code) ? String.fromCodePoint(code) : match
+    })
+    .replace(/&#x([0-9a-fA-F]+);/g, (match, hex: string) => {
+      const code = parseInt(hex, 16)
+      return Number.isFinite(code) ? String.fromCodePoint(code) : match
+    })
+    .replace(/&([a-zA-Z][a-zA-Z0-9]*);/g, (match, name: string) =>
+      Object.prototype.hasOwnProperty.call(NAMED_HTML_ENTITIES, name) ? NAMED_HTML_ENTITIES[name] : match,
+    )
+}
+
+/**
+ * Converts a Markdown (or legacy HTML) string into a plain-text preview suitable for compact,
+ * read-only contexts such as DataTable list cells. Strips Markdown syntax, strips HTML tags, and
+ * decodes HTML entities, then collapses whitespace. Handling legacy HTML keeps list previews clean
+ * for records authored before the editor moved back to Markdown — no data migration required.
+ *
+ * This is NOT a sanitizer — render rich content with the Markdown components, not this helper.
+ */
 export function markdownToPlainText(input: string | null | undefined): string {
   if (!input) return ''
   let text = String(input)
   text = text.replace(/```[\s\S]*?```/g, ' ')
+  text = text.replace(/<[^>]+>/g, ' ')
   text = text.replace(/`([^`]+)`/g, '$1')
   text = text.replace(/!\[[^\]]*\]\([^)]*\)/g, ' ')
   text = text.replace(/\[([^\]]+)\]\([^)]*\)/g, '$1')
@@ -15,6 +55,7 @@ export function markdownToPlainText(input: string | null | undefined): string {
   text = text.replace(/\*([^*]+)\*/g, '$1')
   text = text.replace(/_([^_]+)_/g, '$1')
   text = text.replace(/\|/g, ' ')
+  text = decodeHtmlEntities(text)
   text = text.replace(/\s+/g, ' ').trim()
   return text
 }