#428

frontend/src/mdx-components.tsx

@@ -1,10 +1,12 @@
-import { useMemo } from 'react'
+import { createElement, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 
 import PrefetchLink from '@/components/PrefetchLink'
+import { localiseUIChildren } from '@/components/LocalisedText'
+import { cn } from '@/lib/utils'
 
 import type { MDXComponents } from 'mdx/types'
-import type { ComponentProps } from 'react'
+import type { ComponentProps, HTMLAttributes } from 'react'
 
 
 const MDXLink = (
@@ -50,3 +52,28 @@ const MDXLink = (
 
 
 export const useMDXComponents = (): MDXComponents => ({ a: MDXLink })
+
+
+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'))
+  return AinuElement
+}
+
+
+// Opt in only for authored Ainu UI documents, never user-supplied Markdown.
+export const ainuMDXComponents: MDXComponents = {
+    p: ainuElement ('p'),
+    h1: ainuElement ('h1'),
+    h2: ainuElement ('h2'),
+    h3: ainuElement ('h3'),
+    h4: ainuElement ('h4'),
+    h5: ainuElement ('h5'),
+    h6: ainuElement ('h6'),
+    li: ainuElement ('li'),
+    dt: ainuElement ('dt'),
+    dd: ainuElement ('dd'),
+    th: ainuElement ('th'),
+    td: ainuElement ('td') }