#428

frontend/src/mdx-components.tsx

@@ -1,4 +1,4 @@
-import { createElement, useMemo } from 'react'
+import { createContext, createElement, useContext, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 
 import PrefetchLink from '@/components/PrefetchLink'
@@ -6,7 +6,24 @@ import { localiseUIChildren } from '@/components/LocalisedText'
 import { cn } from '@/lib/utils'
 
 import type { MDXComponents } from 'mdx/types'
-import type { ComponentProps, HTMLAttributes } from 'react'
+import type { ComponentProps, HTMLAttributes, ReactNode } from 'react'
+
+
+const DocumentLanguageContext = createContext ('ja')
+
+
+export const LocalisedDocument = (
+    { language, children, className }: {
+	language: string
+	children: ReactNode
+	className?: string },
+) => (
+    <DocumentLanguageContext.Provider value={language}>
+      <div lang={language === 'ain' ? 'ain-Kana' : language}
+	  className={cn ('localised-document', className)}>
+	{children}
+      </div>
+    </DocumentLanguageContext.Provider>)
 
 
 const MDXLink = (
@@ -51,20 +68,40 @@ const MDXLink = (
 }
 
 
-export const useMDXComponents = (): MDXComponents => ({ a: MDXLink })
+export const useMDXComponents = (): MDXComponents => {
+  const language = useContext (DocumentLanguageContext)
+  return {
+      a: MDXLink,
+      ...((language === 'ain' || language === 'ain-Kana') ? ainuMDXComponents : { }) }
+}
 
 
 const ainuElement = (element: string) => {
-  const AinuElement = ({ children, className, ...props }: HTMLAttributes<HTMLElement>) =>
-      createElement (element,
-	  { ...props, lang: 'ain-Kana', className: cn ('ainu-ui-text', className) },
-	  localiseUIChildren (children, 'ain-Kana'))
+  const AinuElement = (
+      { children, className, ...props }: HTMLAttributes<HTMLElement> & {
+	  node?: unknown },
+  ) => {
+    const documentLanguage = useContext (DocumentLanguageContext)
+    const language = props.lang ?? documentLanguage
+    // ReactMarkdown supplies its syntax node; it is not a DOM attribute.
+    delete props.node
+    return (
+	<DocumentLanguageContext.Provider value={language}>
+	  {createElement (element,
+	      { ...props,
+		lang: language === 'ain' ? 'ain-Kana' : language,
+		className: cn (
+		    (language === 'ain' || language === 'ain-Kana') && 'ainu-ui-text',
+		    className) },
+	      localiseUIChildren (children, language))}
+	</DocumentLanguageContext.Provider>)
+  }
   return AinuElement
 }
 
 
-// Opt in only for authored Ainu UI documents, never user-supplied Markdown.
-export const ainuMDXComponents: MDXComponents = {
+// Opt in using the document's language, independently of the URL locale.
+export const ainuMDXComponents = {
     p: ainuElement ('p'),
     h1: ainuElement ('h1'),
     h2: ainuElement ('h2'),
@@ -76,4 +113,7 @@ export const ainuMDXComponents: MDXComponents = {
     dt: ainuElement ('dt'),
     dd: ainuElement ('dd'),
     th: ainuElement ('th'),
-    td: ainuElement ('td') }
+    td: ainuElement ('td'),
+    em: ainuElement ('em'),
+    strong: ainuElement ('strong'),
+    del: ainuElement ('del') }