@open-mercato/ui 0.6.5-develop.5048.1.fd82f4ae17 → 0.6.5-develop.5099.1.85c0aff78c

package/dist/backend/markdown/markdownToPlainText.js

@@ -1,7 +1,35 @@
+const NAMED_HTML_ENTITIES = {
+  amp: "&",
+  lt: "<",
+  gt: ">",
+  quot: '"',
+  apos: "'",
+  nbsp: " ",
+  hellip: "\u2026",
+  mdash: "\u2014",
+  ndash: "\u2013",
+  rsquo: "\u2019",
+  lsquo: "\u2018",
+  rdquo: "\u201D",
+  ldquo: "\u201C"
+};
+function decodeHtmlEntities(value) {
+  return value.replace(/&#(\d+);/g, (match, dec) => {
+    const code = Number(dec);
+    return Number.isFinite(code) ? String.fromCodePoint(code) : match;
+  }).replace(/&#x([0-9a-fA-F]+);/g, (match, hex) => {
+    const code = parseInt(hex, 16);
+    return Number.isFinite(code) ? String.fromCodePoint(code) : match;
+  }).replace(
+    /&([a-zA-Z][a-zA-Z0-9]*);/g,
+    (match, name) => Object.prototype.hasOwnProperty.call(NAMED_HTML_ENTITIES, name) ? NAMED_HTML_ENTITIES[name] : match
+  );
+}
 function markdownToPlainText(input) {
   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 +43,7 @@ function markdownToPlainText(input) {
   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;
 }

package/dist/backend/markdown/markdownToPlainText.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/backend/markdown/markdownToPlainText.ts"],
-  "sourcesContent": ["export function markdownToPlainText(input: string | null | undefined): string {\n  if (!input) return ''\n  let text = String(input)\n  text = text.replace(/```[\\s\\S]*?```/g, ' ')\n  text = text.replace(/`([^`]+)`/g, '$1')\n  text = text.replace(/!\\[[^\\]]*\\]\\([^)]*\\)/g, ' ')\n  text = text.replace(/\\[([^\\]]+)\\]\\([^)]*\\)/g, '$1')\n  text = text.replace(/^>\\s?/gm, '')\n  text = text.replace(/^#{1,6}\\s+/gm, '')\n  text = text.replace(/^\\s*[-*+]\\s+/gm, '')\n  text = text.replace(/^\\s*\\d+\\.\\s+/gm, '')\n  text = text.replace(/~~([^~]+)~~/g, '$1')\n  text = text.replace(/\\*\\*([^*]+)\\*\\*/g, '$1')\n  text = text.replace(/__([^_]+)__/g, '$1')\n  text = text.replace(/\\*([^*]+)\\*/g, '$1')\n  text = text.replace(/_([^_]+)_/g, '$1')\n  text = text.replace(/\\|/g, ' ')\n  text = text.replace(/\\s+/g, ' ').trim()\n  return text\n}\n"],
-  "mappings": "AAAO,SAAS,oBAAoB,OAA0C;AAC5E,MAAI,CAAC,MAAO,QAAO;AACnB,MAAI,OAAO,OAAO,KAAK;AACvB,SAAO,KAAK,QAAQ,mBAAmB,GAAG;AAC1C,SAAO,KAAK,QAAQ,cAAc,IAAI;AACtC,SAAO,KAAK,QAAQ,yBAAyB,GAAG;AAChD,SAAO,KAAK,QAAQ,0BAA0B,IAAI;AAClD,SAAO,KAAK,QAAQ,WAAW,EAAE;AACjC,SAAO,KAAK,QAAQ,gBAAgB,EAAE;AACtC,SAAO,KAAK,QAAQ,kBAAkB,EAAE;AACxC,SAAO,KAAK,QAAQ,kBAAkB,EAAE;AACxC,SAAO,KAAK,QAAQ,gBAAgB,IAAI;AACxC,SAAO,KAAK,QAAQ,oBAAoB,IAAI;AAC5C,SAAO,KAAK,QAAQ,gBAAgB,IAAI;AACxC,SAAO,KAAK,QAAQ,gBAAgB,IAAI;AACxC,SAAO,KAAK,QAAQ,cAAc,IAAI;AACtC,SAAO,KAAK,QAAQ,OAAO,GAAG;AAC9B,SAAO,KAAK,QAAQ,QAAQ,GAAG,EAAE,KAAK;AACtC,SAAO;AACT;",
+  "sourcesContent": ["const NAMED_HTML_ENTITIES: Record<string, string> = {\n  amp: '&',\n  lt: '<',\n  gt: '>',\n  quot: '\"',\n  apos: \"'\",\n  nbsp: ' ',\n  hellip: '\u2026',\n  mdash: '\u2014',\n  ndash: '\u2013',\n  rsquo: '\u2019',\n  lsquo: '\u2018',\n  rdquo: '\u201D',\n  ldquo: '\u201C',\n}\n\nfunction decodeHtmlEntities(value: string): string {\n  return value\n    .replace(/&#(\\d+);/g, (match, dec: string) => {\n      const code = Number(dec)\n      return Number.isFinite(code) ? String.fromCodePoint(code) : match\n    })\n    .replace(/&#x([0-9a-fA-F]+);/g, (match, hex: string) => {\n      const code = parseInt(hex, 16)\n      return Number.isFinite(code) ? String.fromCodePoint(code) : match\n    })\n    .replace(/&([a-zA-Z][a-zA-Z0-9]*);/g, (match, name: string) =>\n      Object.prototype.hasOwnProperty.call(NAMED_HTML_ENTITIES, name) ? NAMED_HTML_ENTITIES[name] : match,\n    )\n}\n\n/**\n * Converts a Markdown (or legacy HTML) string into a plain-text preview suitable for compact,\n * read-only contexts such as DataTable list cells. Strips Markdown syntax, strips HTML tags, and\n * decodes HTML entities, then collapses whitespace. Handling legacy HTML keeps list previews clean\n * for records authored before the editor moved back to Markdown \u2014 no data migration required.\n *\n * This is NOT a sanitizer \u2014 render rich content with the Markdown components, not this helper.\n */\nexport function markdownToPlainText(input: string | null | undefined): string {\n  if (!input) return ''\n  let text = String(input)\n  text = text.replace(/```[\\s\\S]*?```/g, ' ')\n  text = text.replace(/<[^>]+>/g, ' ')\n  text = text.replace(/`([^`]+)`/g, '$1')\n  text = text.replace(/!\\[[^\\]]*\\]\\([^)]*\\)/g, ' ')\n  text = text.replace(/\\[([^\\]]+)\\]\\([^)]*\\)/g, '$1')\n  text = text.replace(/^>\\s?/gm, '')\n  text = text.replace(/^#{1,6}\\s+/gm, '')\n  text = text.replace(/^\\s*[-*+]\\s+/gm, '')\n  text = text.replace(/^\\s*\\d+\\.\\s+/gm, '')\n  text = text.replace(/~~([^~]+)~~/g, '$1')\n  text = text.replace(/\\*\\*([^*]+)\\*\\*/g, '$1')\n  text = text.replace(/__([^_]+)__/g, '$1')\n  text = text.replace(/\\*([^*]+)\\*/g, '$1')\n  text = text.replace(/_([^_]+)_/g, '$1')\n  text = text.replace(/\\|/g, ' ')\n  text = decodeHtmlEntities(text)\n  text = text.replace(/\\s+/g, ' ').trim()\n  return text\n}\n"],
+  "mappings": "AAAA,MAAM,sBAA8C;AAAA,EAClD,KAAK;AAAA,EACL,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;AAEA,SAAS,mBAAmB,OAAuB;AACjD,SAAO,MACJ,QAAQ,aAAa,CAAC,OAAO,QAAgB;AAC5C,UAAM,OAAO,OAAO,GAAG;AACvB,WAAO,OAAO,SAAS,IAAI,IAAI,OAAO,cAAc,IAAI,IAAI;AAAA,EAC9D,CAAC,EACA,QAAQ,uBAAuB,CAAC,OAAO,QAAgB;AACtD,UAAM,OAAO,SAAS,KAAK,EAAE;AAC7B,WAAO,OAAO,SAAS,IAAI,IAAI,OAAO,cAAc,IAAI,IAAI;AAAA,EAC9D,CAAC,EACA;AAAA,IAAQ;AAAA,IAA6B,CAAC,OAAO,SAC5C,OAAO,UAAU,eAAe,KAAK,qBAAqB,IAAI,IAAI,oBAAoB,IAAI,IAAI;AAAA,EAChG;AACJ;AAUO,SAAS,oBAAoB,OAA0C;AAC5E,MAAI,CAAC,MAAO,QAAO;AACnB,MAAI,OAAO,OAAO,KAAK;AACvB,SAAO,KAAK,QAAQ,mBAAmB,GAAG;AAC1C,SAAO,KAAK,QAAQ,YAAY,GAAG;AACnC,SAAO,KAAK,QAAQ,cAAc,IAAI;AACtC,SAAO,KAAK,QAAQ,yBAAyB,GAAG;AAChD,SAAO,KAAK,QAAQ,0BAA0B,IAAI;AAClD,SAAO,KAAK,QAAQ,WAAW,EAAE;AACjC,SAAO,KAAK,QAAQ,gBAAgB,EAAE;AACtC,SAAO,KAAK,QAAQ,kBAAkB,EAAE;AACxC,SAAO,KAAK,QAAQ,kBAAkB,EAAE;AACxC,SAAO,KAAK,QAAQ,gBAAgB,IAAI;AACxC,SAAO,KAAK,QAAQ,oBAAoB,IAAI;AAC5C,SAAO,KAAK,QAAQ,gBAAgB,IAAI;AACxC,SAAO,KAAK,QAAQ,gBAAgB,IAAI;AACxC,SAAO,KAAK,QAAQ,cAAc,IAAI;AACtC,SAAO,KAAK,QAAQ,OAAO,GAAG;AAC9B,SAAO,mBAAmB,IAAI;AAC9B,SAAO,KAAK,QAAQ,QAAQ,GAAG,EAAE,KAAK;AACtC,SAAO;AACT;",
   "names": []
 }

package/dist/types/css.d.js

@@ -0,0 +1 @@
+//# sourceMappingURL=css.d.js.map

package/dist/types/css.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.6.5-develop.5048.1.fd82f4ae17",
+  "version": "0.6.5-develop.5099.1.85c0aff78c",
   "type": "module",
   "main": "./dist/index.js",
   "scripts": {
@@ -131,6 +131,7 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@mdxeditor/editor": "^4.0.2",
     "@radix-ui/react-accordion": "^1.2.4",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-popover": "^1.1.6",
@@ -149,13 +150,13 @@
     "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.6.5-develop.5048.1.fd82f4ae17",
+    "@open-mercato/shared": "0.6.5-develop.5099.1.85c0aff78c",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-is": ">=18.0.0"
   },
   "devDependencies": {
-    "@open-mercato/shared": "0.6.5-develop.5048.1.fd82f4ae17",
+    "@open-mercato/shared": "0.6.5-develop.5099.1.85c0aff78c",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",

package/src/backend/CrudForm.tsx

@@ -29,7 +29,6 @@ import {
   SelectValue,
 } from '../primitives/select'
 import { flash } from './FlashMessages'
-import dynamic from 'next/dynamic'
 import { FormHeader } from './forms/FormHeader'
 import { FormFooter } from './forms/FormFooter'
 import { Button } from '../primitives/button'
@@ -89,7 +88,6 @@ import { withScopedApiRequestHeaders } from './utils/apiCall'
 import { buildOptimisticLockHeader, extractOptimisticLockConflict } from './utils/optimisticLock'
 import { surfaceRecordConflict } from './conflicts'
 import type { CustomFieldDefLike } from '@open-mercato/shared/modules/entities/validation'
-import type { MDEditorProps as UiWMDEditorProps } from '@uiw/react-md-editor'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../primitives/dialog'
 import { FieldDefinitionsManager, type FieldDefinitionsManagerHandle } from './custom-fields/FieldDefinitionsManager'
 import { useConfirmDialog } from './confirm-dialog'
@@ -107,6 +105,7 @@ import type { InjectionFieldDefinition, FieldContext } from '@open-mercato/share
 import { evaluateInjectedVisibility } from './injection/visibility-utils'
 import { ComponentReplacementHandles } from '@open-mercato/shared/modules/widgets/component-registry'
 import { RichEditor, type RichEditorLabels } from '../primitives/rich-editor'
+import MarkdownField from './inputs/MarkdownField'
 
 // Stable empty options array to avoid creating a new [] every render
 const EMPTY_OPTIONS: CrudFieldOption[] = []
@@ -3894,74 +3893,11 @@ function TextAreaInput({
   )
 }
 
-// Markdown editor using @uiw/react-md-editor (client-only)
+// Markdown editor — WYSIWYG MDXEditor (Lexical) wired to the CrudForm value/onChange contract.
 type MDProps = { value?: string; onChange: (md: string) => void }
-const MDEditor = dynamic(async () => {
-  const mod = await import('@uiw/react-md-editor')
-  return mod.default
-}, { ssr: false }) as React.ComponentType<UiWMDEditorProps>
-
-type MarkdownPreviewOptions = NonNullable<UiWMDEditorProps['previewOptions']>
-
-let markdownPreviewOptionsPromise: Promise<MarkdownPreviewOptions> | null = null
-
-async function loadMarkdownPreviewOptions(): Promise<MarkdownPreviewOptions> {
-  if (!markdownPreviewOptionsPromise) {
-    markdownPreviewOptionsPromise = import('remark-gfm')
-      .then((mod) => ({ remarkPlugins: [mod.default ?? mod] } as MarkdownPreviewOptions))
-      .catch(() => ({} as MarkdownPreviewOptions))
-  }
-  return markdownPreviewOptionsPromise
-}
-
-const EMPTY_PREVIEW_OPTIONS: MarkdownPreviewOptions = {}
 
 const MarkdownEditor = React.memo(function MarkdownEditor({ value = '', onChange }: MDProps) {
-  const containerRef = React.useRef<HTMLDivElement | null>(null)
-  const [local, setLocal] = React.useState<string>(value)
-  const [previewOptions, setPreviewOptions] = React.useState<MarkdownPreviewOptions>(EMPTY_PREVIEW_OPTIONS)
-  const typingRef = React.useRef(false)
-
-  React.useEffect(() => {
-    if (!typingRef.current) setLocal(value)
-  }, [value])
-
-  React.useEffect(() => {
-    let mounted = true
-    void loadMarkdownPreviewOptions().then((resolved) => {
-      if (!mounted) return
-      setPreviewOptions(resolved)
-    })
-    return () => {
-      mounted = false
-    }
-  }, [])
-
-  const handleChange = React.useCallback((v?: string) => {
-    typingRef.current = true
-    setLocal(v ?? '')
-  }, [])
-
-  const commit = React.useCallback(() => {
-    if (!typingRef.current) return
-    typingRef.current = false
-    onChange(local)
-    requestAnimationFrame(() => {
-      const ta = containerRef.current?.querySelector('textarea') as HTMLTextAreaElement | null
-      ta?.focus()
-    })
-  }, [local, onChange])
-
-  return (
-    <div ref={containerRef} data-color-mode="light" className="w-full" onBlur={() => commit()}>
-      <MDEditor
-        value={local}
-        height={220}
-        onChange={handleChange}
-        previewOptions={previewOptions}
-      />
-    </div>
-  )
+  return <MarkdownField value={value} onChange={onChange} />
 }, (prev, next) => prev.value === next.value)
 
 // HTML Rich Text editor wrapper for the CrudForm builtin `editor: 'html'`.

package/src/backend/__tests__/CrudForm.custom-fields.test.tsx

@@ -14,7 +14,6 @@ jest.mock('next/navigation', () => ({
   useSearchParams: () => new URLSearchParams(),
 }))
 jest.mock('remark-gfm', () => ({ __esModule: true, default: {} }))
-jest.mock('@uiw/react-md-editor', () => ({ __esModule: true, default: () => null }))
 jest.mock('../confirm-dialog', () => ({
   useConfirmDialog: () => ({
     confirm: jest.fn().mockResolvedValue(true),

package/src/backend/__tests__/CrudForm.datetime.test.tsx

@@ -4,7 +4,6 @@ jest.mock('next/navigation', () => ({
   useSearchParams: () => new URLSearchParams(),
 }))
 jest.mock('remark-gfm', () => ({ __esModule: true, default: {} }))
-jest.mock('@uiw/react-md-editor', () => ({ __esModule: true, default: () => null }))
 
 import * as React from 'react'
 import { renderToString } from 'react-dom/server'

package/src/backend/__tests__/CrudForm.defaults.test.tsx

@@ -9,7 +9,6 @@ jest.mock('next/navigation', () => ({
   useSearchParams: () => new URLSearchParams(),
 }))
 jest.mock('remark-gfm', () => ({ __esModule: true, default: {} }))
-jest.mock('@uiw/react-md-editor', () => ({ __esModule: true, default: () => null }))
 jest.mock('../confirm-dialog', () => ({
   useConfirmDialog: () => ({
     confirm: jest.fn().mockResolvedValue(true),

package/src/backend/__tests__/CrudForm.dotPath.test.tsx

@@ -16,7 +16,6 @@ jest.mock('next/navigation', () => ({
   useSearchParams: () => new URLSearchParams(),
 }))
 jest.mock('remark-gfm', () => ({ __esModule: true, default: {} }))
-jest.mock('@uiw/react-md-editor', () => ({ __esModule: true, default: () => null }))
 jest.mock('../confirm-dialog', () => ({
   useConfirmDialog: () => ({
     confirm: jest.fn().mockResolvedValue(true),

package/src/backend/__tests__/CrudForm.doubleSubmit.test.tsx

@@ -7,7 +7,6 @@ jest.mock('next/navigation', () => ({
   useSearchParams: () => new URLSearchParams(),
 }))
 jest.mock('remark-gfm', () => ({ __esModule: true, default: {} }))
-jest.mock('@uiw/react-md-editor', () => ({ __esModule: true, default: () => null }))
 jest.mock('../injection/InjectionSpot', () => ({
   __esModule: true,
   InjectionSpot: () => null,

package/src/backend/__tests__/CrudForm.navigation.test.tsx

@@ -9,7 +9,6 @@ jest.mock('next/navigation', () => ({
   useSearchParams: () => new URLSearchParams(),
 }))
 jest.mock('remark-gfm', () => ({ __esModule: true, default: {} }))
-jest.mock('@uiw/react-md-editor', () => ({ __esModule: true, default: () => null }))
 jest.mock('../confirm-dialog', () => ({
   useConfirmDialog: () => ({
     confirm: confirmDialogMock,

package/src/backend/__tests__/CrudForm.optimisticLock.test.tsx

@@ -16,7 +16,6 @@ jest.mock('next/navigation', () => ({
   useSearchParams: () => new URLSearchParams(),
 }))
 jest.mock('remark-gfm', () => ({ __esModule: true, default: {} }))
-jest.mock('@uiw/react-md-editor', () => ({ __esModule: true, default: () => null }))
 jest.mock('../confirm-dialog', () => ({
   useConfirmDialog: () => ({
     confirm: jest.fn().mockResolvedValue(true),

package/src/backend/__tests__/CrudForm.render.test.tsx

@@ -12,7 +12,6 @@ jest.mock('next/navigation', () => ({
   useSearchParams: () => new URLSearchParams(),
 }))
 jest.mock('remark-gfm', () => ({ __esModule: true, default: {} }))
-jest.mock('@uiw/react-md-editor', () => ({ __esModule: true, default: () => null }))
 jest.mock('../injection/InjectionSpot', () => ({
   __esModule: true,
   InjectionSpot: () => null,

package/src/backend/__tests__/CrudForm.sortable.test.tsx

@@ -12,7 +12,6 @@ jest.mock('next/navigation', () => ({
   useSearchParams: () => new URLSearchParams(),
 }))
 jest.mock('remark-gfm', () => ({ __esModule: true, default: {} }))
-jest.mock('@uiw/react-md-editor', () => ({ __esModule: true, default: () => null }))
 jest.mock('../injection/InjectionSpot', () => ({
   __esModule: true,
   InjectionSpot: () => null,

package/src/backend/__tests__/CrudForm.transformData.test.tsx

@@ -11,7 +11,6 @@ jest.mock('next/navigation', () => ({
   useSearchParams: () => new URLSearchParams(),
 }))
 jest.mock('remark-gfm', () => ({ __esModule: true, default: {} }))
-jest.mock('@uiw/react-md-editor', () => ({ __esModule: true, default: () => null }))
 jest.mock('../confirm-dialog', () => ({
   useConfirmDialog: () => ({
     confirm: confirmDialogMock,

package/src/backend/__tests__/CrudForm.unsavedNavigation.test.tsx

@@ -13,7 +13,6 @@ jest.mock('next/navigation', () => ({
   useSearchParams: () => new URLSearchParams(),
 }))
 jest.mock('remark-gfm', () => ({ __esModule: true, default: {} }))
-jest.mock('@uiw/react-md-editor', () => ({ __esModule: true, default: () => null }))
 jest.mock('../confirm-dialog', () => ({
   useConfirmDialog: () => ({
     confirm: confirmDialogMock,

package/src/backend/__tests__/CrudForm.validation.test.tsx

@@ -7,7 +7,6 @@ jest.mock('next/navigation', () => ({
   useSearchParams: () => new URLSearchParams(),
 }))
 jest.mock('remark-gfm', () => ({ __esModule: true, default: {} }))
-jest.mock('@uiw/react-md-editor', () => ({ __esModule: true, default: () => null }))
 jest.mock('../injection/InjectionSpot', () => ({
   __esModule: true,
   InjectionSpot: () => null,

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

@@ -5,7 +5,6 @@ jest.mock('next/navigation', () => ({
   useSearchParams: () => new URLSearchParams(),
 }))
 jest.mock('remark-gfm', () => ({ __esModule: true, default: {} }))
-jest.mock('@uiw/react-md-editor', () => ({ __esModule: true, default: () => null }))
 
 import * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'

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/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}>

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>
+  )
+}