1
import { Typography } from "antd";
2

3
export const { Text, Title, Paragraph } = Typography;
4

5
const uniqueKey: { [tag: string]: number } = {};
6

7
// Note: this is e.g. necessary to render text in a modal, where some caching happens, apparently
8
function getKey(tag: string): number {
9
  const n = (uniqueKey[tag] ?? 0) + 1;
10
  uniqueKey[tag] = n;
11
  return n;
12
}
13

14
export const LOCALIZE_DEFAULT_ELEMENTS = {
15
  strong: (ch) => (
16
    <Text strong key={getKey("strong")}>
17
      {ch}
18
    </Text>
19
  ),
20
  b: (ch) => (
21
    <Text strong key={getKey("b")}>
22
      {ch}
23
    </Text>
24
  ),
25
  i: (ch) => (
26
    <Text italic key={getKey("i")}>
27
      {ch}
28
    </Text>
29
  ),
30
  p: (ch) => <Paragraph key={getKey("p")}>{ch}</Paragraph>,
31
  code: (ch) => (
32
    <Text code key={getKey("code")}>
33
      {ch}
34
    </Text>
35
  ),
36
  ul: (e) => <ul key={getKey("ul")}>{e}</ul>,
37
  ol: (e) => <ol key={getKey("ol")}>{e}</ol>,
38
  li: (e) => <li key={getKey("li")}>{e}</li>,
39
} as const;
40

41