@open-mercato/ui 0.6.5-develop.5048.1.fd82f4ae17 → 0.6.5-develop.5116.1.f0af9e5080

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
 }

package/src/types/css.d.ts

@@ -0,0 +1,5 @@
+// Ambient declaration so side-effect CSS imports from third-party packages
+// (e.g. `import '@mdxeditor/editor/style.css'`) type-check. Packages that consume
+// @open-mercato/ui as source type-check this file's `.tsx` too, so MdxEditorImpl.tsx
+// pulls this declaration into their program via a `/// <reference path>` directive.
+declare module '*.css'