@xsolla/xui-markdown 0.158.0 → 0.159.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/README.md +28 -27
  2. package/native/index.d.mts +2 -0
  3. package/native/index.d.ts +2 -0
  4. package/native/index.js +2 -0
  5. package/native/index.js.map +1 -1
  6. package/native/index.mjs +2 -0
  7. package/native/index.mjs.map +1 -1
  8. package/package.json +3 -3
  9. package/web/index.d.mts +2 -0
  10. package/web/index.d.ts +2 -0
  11. package/web/index.js +2 -0
  12. package/web/index.js.map +1 -1
  13. package/web/index.mjs +2 -0
  14. package/web/index.mjs.map +1 -1
package/README.md CHANGED
@@ -11,14 +11,14 @@ npm install @xsolla/xui-markdown
11
11
  ## Imports
12
12
 
13
13
  ```tsx
14
- import { Markdown } from '@xsolla/xui-markdown';
14
+ import { Markdown } from "@xsolla/xui-markdown";
15
15
  ```
16
16
 
17
17
  ## Quick start
18
18
 
19
19
  ```tsx
20
- import * as React from 'react';
21
- import { Markdown } from '@xsolla/xui-markdown';
20
+ import * as React from "react";
21
+ import { Markdown } from "@xsolla/xui-markdown";
22
22
 
23
23
  export default function QuickStart() {
24
24
  return <Markdown>{`# Hello\n\nThis is **bold** text.`}</Markdown>;
@@ -29,10 +29,11 @@ export default function QuickStart() {
29
29
 
30
30
  ### `<Markdown>` (web only)
31
31
 
32
- | Prop | Type | Default | Description |
33
- | --- | --- | --- | --- |
34
- | `children` | `string` | — | **Required.** Markdown source to render. |
35
- | `className` | `string` | — | CSS class for the container. |
32
+ | Prop | Type | Default | Description |
33
+ | ----------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------- |
34
+ | `testID` | `string` | — | Test ID for testing frameworks. On web this renders as `data-testid`; on React Native it renders as `testID`. |
35
+ | `children` | `string` | — | **Required.** Markdown source to render. |
36
+ | `className` | `string` | — | CSS class for the container. |
36
37
 
37
38
  Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
38
39
 
@@ -40,26 +41,26 @@ The component pulls heading and body fonts from the resolved theme (`theme.fonts
40
41
 
41
42
  ### Supported syntax
42
43
 
43
- | Element | Syntax |
44
- | --- | --- |
45
- | Headings (h1–h4) | `# text` … `#### text` |
46
- | Bold | `**text**` |
47
- | Italic | `*text*` |
48
- | Link | `[text](https://example.com)` |
49
- | Image | `![alt](https://example.com/image.png)` |
50
- | Inline code | `` `code` `` |
51
- | Code block | ` ```language ` |
52
- | Blockquote | `> quote` |
53
- | Unordered list | `- item` |
54
- | Ordered list | `1. item` |
44
+ | Element | Syntax |
45
+ | ---------------- | --------------------------------------- |
46
+ | Headings (h1–h4) | `# text` … `#### text` |
47
+ | Bold | `**text**` |
48
+ | Italic | `*text*` |
49
+ | Link | `[text](https://example.com)` |
50
+ | Image | `![alt](https://example.com/image.png)` |
51
+ | Inline code | `` `code` `` |
52
+ | Code block | ` ```language ` |
53
+ | Blockquote | `> quote` |
54
+ | Unordered list | `- item` |
55
+ | Ordered list | `1. item` |
55
56
 
56
57
  ## Examples
57
58
 
58
59
  ### Rich content
59
60
 
60
61
  ```tsx
61
- import * as React from 'react';
62
- import { Markdown } from '@xsolla/xui-markdown';
62
+ import * as React from "react";
63
+ import { Markdown } from "@xsolla/xui-markdown";
63
64
 
64
65
  export default function RichContent() {
65
66
  const content = `# Product documentation
@@ -87,19 +88,19 @@ Visit our [documentation](https://docs.example.com).`;
87
88
  ### Live preview
88
89
 
89
90
  ```tsx
90
- import * as React from 'react';
91
- import { Markdown } from '@xsolla/xui-markdown';
91
+ import * as React from "react";
92
+ import { Markdown } from "@xsolla/xui-markdown";
92
93
 
93
94
  export default function LivePreview() {
94
- const [content, setContent] = React.useState('# Hello\n\nStart typing...');
95
+ const [content, setContent] = React.useState("# Hello\n\nStart typing...");
95
96
  return (
96
- <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
97
+ <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
97
98
  <textarea
98
99
  value={content}
99
100
  onChange={(e) => setContent(e.target.value)}
100
- style={{ height: 240, fontFamily: 'monospace' }}
101
+ style={{ height: 240, fontFamily: "monospace" }}
101
102
  />
102
- <div style={{ background: '#1a1a1a', padding: 16, borderRadius: 8 }}>
103
+ <div style={{ background: "#1a1a1a", padding: 16, borderRadius: 8 }}>
103
104
  <Markdown>{content}</Markdown>
104
105
  </div>
105
106
  </div>
package/native/index.d.mts CHANGED
@@ -4,6 +4,8 @@ import { ThemeOverrideProps } from '@xsolla/xui-core';
4
4
  interface MarkdownProps extends ThemeOverrideProps {
5
5
  children: string;
6
6
  className?: string;
7
+ /** Test ID for testing frameworks */
8
+ testID?: string;
7
9
  }
8
10
  declare const Markdown: React.FC<MarkdownProps>;
9
11
 
package/native/index.d.ts CHANGED
@@ -4,6 +4,8 @@ import { ThemeOverrideProps } from '@xsolla/xui-core';
4
4
  interface MarkdownProps extends ThemeOverrideProps {
5
5
  children: string;
6
6
  className?: string;
7
+ /** Test ID for testing frameworks */
8
+ testID?: string;
7
9
  }
8
10
  declare const Markdown: React.FC<MarkdownProps>;
9
11
 
package/native/index.js CHANGED
@@ -157,6 +157,7 @@ var MarkdownContainer = import_styled_components.default.div`
157
157
  var Markdown = ({
158
158
  children,
159
159
  className,
160
+ testID,
160
161
  themeMode,
161
162
  themeProductContext
162
163
  }) => {
@@ -167,6 +168,7 @@ var Markdown = ({
167
168
  className,
168
169
  themeColors: theme.colors,
169
170
  fonts: theme.fonts,
171
+ "data-testid": testID,
170
172
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_markdown.default, { children })
171
173
  }
172
174
  );
package/native/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/index.tsx","../../src/Markdown.tsx"],"sourcesContent":["export * from \"./Markdown\";\n","import React from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport styled from \"styled-components\";\nimport {\n useResolvedTheme,\n ThemeColors,\n type ThemeOverrideProps,\n} from \"@xsolla/xui-core\";\n\ninterface MarkdownContainerProps {\n themeColors: ThemeColors;\n fonts: { primary: string; heading?: string; body?: string };\n}\n\nconst MarkdownContainer = styled.div<MarkdownContainerProps>`\n color: ${(props) => props.themeColors?.content?.primary || \"white\"};\n font-family: ${(props) =>\n props.fonts?.body || props.fonts?.primary || \"sans-serif\"};\n\n h1,\n h2,\n h3,\n h4 {\n font-family: ${(props) =>\n props.fonts?.heading || props.fonts?.primary || \"sans-serif\"};\n }\n\n h1 {\n font-size: 40px;\n font-weight: 700;\n line-height: 48px;\n margin: 0;\n padding-top: 0px;\n padding-bottom: 6px;\n }\n\n h2 {\n font-size: 32px;\n font-weight: 700;\n line-height: 38px;\n margin: 0;\n padding-top: 2px;\n padding-bottom: 8px;\n }\n\n h3 {\n font-size: 28px;\n font-weight: 700;\n line-height: 34px;\n margin: 0;\n padding-top: 4px;\n padding-bottom: 8px;\n }\n\n h4 {\n font-size: 24px;\n font-weight: 700;\n line-height: 28px;\n margin: 0;\n padding-top: 6px;\n padding-bottom: 10px;\n }\n\n p {\n font-size: 16px;\n font-weight: 400;\n line-height: 22px;\n margin: 0;\n padding-top: 0px;\n padding-bottom: 4px;\n }\n\n img {\n max-width: 100%;\n height: auto;\n display: block;\n margin: 16px 0;\n }\n\n ul,\n ol {\n margin: 8px 0;\n padding-left: 24px;\n }\n\n li {\n font-size: 16px;\n line-height: 22px;\n margin-bottom: 4px;\n }\n\n code {\n background: rgba(255, 255, 255, 0.1);\n padding: 2px 4px;\n border-radius: 4px;\n font-family: monospace;\n }\n\n pre {\n background: rgba(255, 255, 255, 0.05);\n padding: 16px;\n border-radius: 8px;\n overflow-x: auto;\n margin: 16px 0;\n\n code {\n background: none;\n padding: 0;\n }\n }\n\n blockquote {\n border-left: 4px solid\n ${(props) => props.themeColors?.border?.brand || \"#66e6ff\"};\n margin: 16px 0;\n padding: 8px 16px;\n background: rgba(102, 230, 255, 0.05);\n\n p {\n padding-bottom: 0;\n }\n }\n\n a {\n color: ${(props) => props.themeColors?.control?.link?.primary || \"#66e6ff\"};\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n`;\n\nexport interface MarkdownProps extends ThemeOverrideProps {\n children: string;\n className?: string;\n}\n\nexport const Markdown: React.FC<MarkdownProps> = ({\n children,\n className,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n\n return (\n <MarkdownContainer\n className={className}\n themeColors={theme.colors}\n fonts={theme.fonts}\n >\n <ReactMarkdown>{children}</ReactMarkdown>\n </MarkdownContainer>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,4BAA0B;AAC1B,+BAAmB;AACnB,sBAIO;AAgJD;AAzIN,IAAM,oBAAoB,yBAAAA,QAAO;AAAA,WACtB,CAAC,UAAU,MAAM,aAAa,SAAS,WAAW,OAAO;AAAA,iBACnD,CAAC,UACd,MAAM,OAAO,QAAQ,MAAM,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAM1C,CAAC,UACd,MAAM,OAAO,WAAW,MAAM,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAyF1D,CAAC,UAAU,MAAM,aAAa,QAAQ,SAAS,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWnD,CAAC,UAAU,MAAM,aAAa,SAAS,MAAM,WAAW,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAavE,IAAM,WAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,QAAI,kCAAiB,EAAE,WAAW,oBAAoB,CAAC;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAa,MAAM;AAAA,MACnB,OAAO,MAAM;AAAA,MAEb,sDAAC,sBAAAC,SAAA,EAAe,UAAS;AAAA;AAAA,EAC3B;AAEJ;","names":["styled","ReactMarkdown"]}
1
+ {"version":3,"sources":["../../src/index.tsx","../../src/Markdown.tsx"],"sourcesContent":["export * from \"./Markdown\";\n","import React from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport styled from \"styled-components\";\nimport {\n useResolvedTheme,\n ThemeColors,\n type ThemeOverrideProps,\n} from \"@xsolla/xui-core\";\n\ninterface MarkdownContainerProps {\n themeColors: ThemeColors;\n fonts: { primary: string; heading?: string; body?: string };\n /** Test ID for testing frameworks */\n testID?: string;\n /** Test ID for testing frameworks (web) */\n \"data-testid\"?: string;\n}\n\nconst MarkdownContainer = styled.div<MarkdownContainerProps>`\n color: ${(props) => props.themeColors?.content?.primary || \"white\"};\n font-family: ${(props) =>\n props.fonts?.body || props.fonts?.primary || \"sans-serif\"};\n\n h1,\n h2,\n h3,\n h4 {\n font-family: ${(props) =>\n props.fonts?.heading || props.fonts?.primary || \"sans-serif\"};\n }\n\n h1 {\n font-size: 40px;\n font-weight: 700;\n line-height: 48px;\n margin: 0;\n padding-top: 0px;\n padding-bottom: 6px;\n }\n\n h2 {\n font-size: 32px;\n font-weight: 700;\n line-height: 38px;\n margin: 0;\n padding-top: 2px;\n padding-bottom: 8px;\n }\n\n h3 {\n font-size: 28px;\n font-weight: 700;\n line-height: 34px;\n margin: 0;\n padding-top: 4px;\n padding-bottom: 8px;\n }\n\n h4 {\n font-size: 24px;\n font-weight: 700;\n line-height: 28px;\n margin: 0;\n padding-top: 6px;\n padding-bottom: 10px;\n }\n\n p {\n font-size: 16px;\n font-weight: 400;\n line-height: 22px;\n margin: 0;\n padding-top: 0px;\n padding-bottom: 4px;\n }\n\n img {\n max-width: 100%;\n height: auto;\n display: block;\n margin: 16px 0;\n }\n\n ul,\n ol {\n margin: 8px 0;\n padding-left: 24px;\n }\n\n li {\n font-size: 16px;\n line-height: 22px;\n margin-bottom: 4px;\n }\n\n code {\n background: rgba(255, 255, 255, 0.1);\n padding: 2px 4px;\n border-radius: 4px;\n font-family: monospace;\n }\n\n pre {\n background: rgba(255, 255, 255, 0.05);\n padding: 16px;\n border-radius: 8px;\n overflow-x: auto;\n margin: 16px 0;\n\n code {\n background: none;\n padding: 0;\n }\n }\n\n blockquote {\n border-left: 4px solid\n ${(props) => props.themeColors?.border?.brand || \"#66e6ff\"};\n margin: 16px 0;\n padding: 8px 16px;\n background: rgba(102, 230, 255, 0.05);\n\n p {\n padding-bottom: 0;\n }\n }\n\n a {\n color: ${(props) => props.themeColors?.control?.link?.primary || \"#66e6ff\"};\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n`;\n\nexport interface MarkdownProps extends ThemeOverrideProps {\n children: string;\n className?: string;\n /** Test ID for testing frameworks */\n testID?: string;\n}\n\nexport const Markdown: React.FC<MarkdownProps> = ({\n children,\n className,\n testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n\n return (\n <MarkdownContainer\n className={className}\n themeColors={theme.colors}\n fonts={theme.fonts}\n data-testid={testID}\n >\n <ReactMarkdown>{children}</ReactMarkdown>\n </MarkdownContainer>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,4BAA0B;AAC1B,+BAAmB;AACnB,sBAIO;AAwJD;AA7IN,IAAM,oBAAoB,yBAAAA,QAAO;AAAA,WACtB,CAAC,UAAU,MAAM,aAAa,SAAS,WAAW,OAAO;AAAA,iBACnD,CAAC,UACd,MAAM,OAAO,QAAQ,MAAM,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAM1C,CAAC,UACd,MAAM,OAAO,WAAW,MAAM,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAyF1D,CAAC,UAAU,MAAM,aAAa,QAAQ,SAAS,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWnD,CAAC,UAAU,MAAM,aAAa,SAAS,MAAM,WAAW,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAevE,IAAM,WAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,QAAI,kCAAiB,EAAE,WAAW,oBAAoB,CAAC;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAa,MAAM;AAAA,MACnB,OAAO,MAAM;AAAA,MACb,eAAa;AAAA,MAEb,sDAAC,sBAAAC,SAAA,EAAe,UAAS;AAAA;AAAA,EAC3B;AAEJ;","names":["styled","ReactMarkdown"]}
package/native/index.mjs CHANGED
@@ -123,6 +123,7 @@ var MarkdownContainer = styled.div`
123
123
  var Markdown = ({
124
124
  children,
125
125
  className,
126
+ testID,
126
127
  themeMode,
127
128
  themeProductContext
128
129
  }) => {
@@ -133,6 +134,7 @@ var Markdown = ({
133
134
  className,
134
135
  themeColors: theme.colors,
135
136
  fonts: theme.fonts,
137
+ "data-testid": testID,
136
138
  children: /* @__PURE__ */ jsx(ReactMarkdown, { children })
137
139
  }
138
140
  );
package/native/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Markdown.tsx"],"sourcesContent":["import React from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport styled from \"styled-components\";\nimport {\n useResolvedTheme,\n ThemeColors,\n type ThemeOverrideProps,\n} from \"@xsolla/xui-core\";\n\ninterface MarkdownContainerProps {\n themeColors: ThemeColors;\n fonts: { primary: string; heading?: string; body?: string };\n}\n\nconst MarkdownContainer = styled.div<MarkdownContainerProps>`\n color: ${(props) => props.themeColors?.content?.primary || \"white\"};\n font-family: ${(props) =>\n props.fonts?.body || props.fonts?.primary || \"sans-serif\"};\n\n h1,\n h2,\n h3,\n h4 {\n font-family: ${(props) =>\n props.fonts?.heading || props.fonts?.primary || \"sans-serif\"};\n }\n\n h1 {\n font-size: 40px;\n font-weight: 700;\n line-height: 48px;\n margin: 0;\n padding-top: 0px;\n padding-bottom: 6px;\n }\n\n h2 {\n font-size: 32px;\n font-weight: 700;\n line-height: 38px;\n margin: 0;\n padding-top: 2px;\n padding-bottom: 8px;\n }\n\n h3 {\n font-size: 28px;\n font-weight: 700;\n line-height: 34px;\n margin: 0;\n padding-top: 4px;\n padding-bottom: 8px;\n }\n\n h4 {\n font-size: 24px;\n font-weight: 700;\n line-height: 28px;\n margin: 0;\n padding-top: 6px;\n padding-bottom: 10px;\n }\n\n p {\n font-size: 16px;\n font-weight: 400;\n line-height: 22px;\n margin: 0;\n padding-top: 0px;\n padding-bottom: 4px;\n }\n\n img {\n max-width: 100%;\n height: auto;\n display: block;\n margin: 16px 0;\n }\n\n ul,\n ol {\n margin: 8px 0;\n padding-left: 24px;\n }\n\n li {\n font-size: 16px;\n line-height: 22px;\n margin-bottom: 4px;\n }\n\n code {\n background: rgba(255, 255, 255, 0.1);\n padding: 2px 4px;\n border-radius: 4px;\n font-family: monospace;\n }\n\n pre {\n background: rgba(255, 255, 255, 0.05);\n padding: 16px;\n border-radius: 8px;\n overflow-x: auto;\n margin: 16px 0;\n\n code {\n background: none;\n padding: 0;\n }\n }\n\n blockquote {\n border-left: 4px solid\n ${(props) => props.themeColors?.border?.brand || \"#66e6ff\"};\n margin: 16px 0;\n padding: 8px 16px;\n background: rgba(102, 230, 255, 0.05);\n\n p {\n padding-bottom: 0;\n }\n }\n\n a {\n color: ${(props) => props.themeColors?.control?.link?.primary || \"#66e6ff\"};\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n`;\n\nexport interface MarkdownProps extends ThemeOverrideProps {\n children: string;\n className?: string;\n}\n\nexport const Markdown: React.FC<MarkdownProps> = ({\n children,\n className,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n\n return (\n <MarkdownContainer\n className={className}\n themeColors={theme.colors}\n fonts={theme.fonts}\n >\n <ReactMarkdown>{children}</ReactMarkdown>\n </MarkdownContainer>\n );\n};\n"],"mappings":";AACA,OAAO,mBAAmB;AAC1B,OAAO,YAAY;AACnB;AAAA,EACE;AAAA,OAGK;AAgJD;AAzIN,IAAM,oBAAoB,OAAO;AAAA,WACtB,CAAC,UAAU,MAAM,aAAa,SAAS,WAAW,OAAO;AAAA,iBACnD,CAAC,UACd,MAAM,OAAO,QAAQ,MAAM,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAM1C,CAAC,UACd,MAAM,OAAO,WAAW,MAAM,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAyF1D,CAAC,UAAU,MAAM,aAAa,QAAQ,SAAS,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWnD,CAAC,UAAU,MAAM,aAAa,SAAS,MAAM,WAAW,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAavE,IAAM,WAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,IAAI,iBAAiB,EAAE,WAAW,oBAAoB,CAAC;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAa,MAAM;AAAA,MACnB,OAAO,MAAM;AAAA,MAEb,8BAAC,iBAAe,UAAS;AAAA;AAAA,EAC3B;AAEJ;","names":[]}
1
+ {"version":3,"sources":["../../src/Markdown.tsx"],"sourcesContent":["import React from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport styled from \"styled-components\";\nimport {\n useResolvedTheme,\n ThemeColors,\n type ThemeOverrideProps,\n} from \"@xsolla/xui-core\";\n\ninterface MarkdownContainerProps {\n themeColors: ThemeColors;\n fonts: { primary: string; heading?: string; body?: string };\n /** Test ID for testing frameworks */\n testID?: string;\n /** Test ID for testing frameworks (web) */\n \"data-testid\"?: string;\n}\n\nconst MarkdownContainer = styled.div<MarkdownContainerProps>`\n color: ${(props) => props.themeColors?.content?.primary || \"white\"};\n font-family: ${(props) =>\n props.fonts?.body || props.fonts?.primary || \"sans-serif\"};\n\n h1,\n h2,\n h3,\n h4 {\n font-family: ${(props) =>\n props.fonts?.heading || props.fonts?.primary || \"sans-serif\"};\n }\n\n h1 {\n font-size: 40px;\n font-weight: 700;\n line-height: 48px;\n margin: 0;\n padding-top: 0px;\n padding-bottom: 6px;\n }\n\n h2 {\n font-size: 32px;\n font-weight: 700;\n line-height: 38px;\n margin: 0;\n padding-top: 2px;\n padding-bottom: 8px;\n }\n\n h3 {\n font-size: 28px;\n font-weight: 700;\n line-height: 34px;\n margin: 0;\n padding-top: 4px;\n padding-bottom: 8px;\n }\n\n h4 {\n font-size: 24px;\n font-weight: 700;\n line-height: 28px;\n margin: 0;\n padding-top: 6px;\n padding-bottom: 10px;\n }\n\n p {\n font-size: 16px;\n font-weight: 400;\n line-height: 22px;\n margin: 0;\n padding-top: 0px;\n padding-bottom: 4px;\n }\n\n img {\n max-width: 100%;\n height: auto;\n display: block;\n margin: 16px 0;\n }\n\n ul,\n ol {\n margin: 8px 0;\n padding-left: 24px;\n }\n\n li {\n font-size: 16px;\n line-height: 22px;\n margin-bottom: 4px;\n }\n\n code {\n background: rgba(255, 255, 255, 0.1);\n padding: 2px 4px;\n border-radius: 4px;\n font-family: monospace;\n }\n\n pre {\n background: rgba(255, 255, 255, 0.05);\n padding: 16px;\n border-radius: 8px;\n overflow-x: auto;\n margin: 16px 0;\n\n code {\n background: none;\n padding: 0;\n }\n }\n\n blockquote {\n border-left: 4px solid\n ${(props) => props.themeColors?.border?.brand || \"#66e6ff\"};\n margin: 16px 0;\n padding: 8px 16px;\n background: rgba(102, 230, 255, 0.05);\n\n p {\n padding-bottom: 0;\n }\n }\n\n a {\n color: ${(props) => props.themeColors?.control?.link?.primary || \"#66e6ff\"};\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n`;\n\nexport interface MarkdownProps extends ThemeOverrideProps {\n children: string;\n className?: string;\n /** Test ID for testing frameworks */\n testID?: string;\n}\n\nexport const Markdown: React.FC<MarkdownProps> = ({\n children,\n className,\n testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n\n return (\n <MarkdownContainer\n className={className}\n themeColors={theme.colors}\n fonts={theme.fonts}\n data-testid={testID}\n >\n <ReactMarkdown>{children}</ReactMarkdown>\n </MarkdownContainer>\n );\n};\n"],"mappings":";AACA,OAAO,mBAAmB;AAC1B,OAAO,YAAY;AACnB;AAAA,EACE;AAAA,OAGK;AAwJD;AA7IN,IAAM,oBAAoB,OAAO;AAAA,WACtB,CAAC,UAAU,MAAM,aAAa,SAAS,WAAW,OAAO;AAAA,iBACnD,CAAC,UACd,MAAM,OAAO,QAAQ,MAAM,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAM1C,CAAC,UACd,MAAM,OAAO,WAAW,MAAM,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAyF1D,CAAC,UAAU,MAAM,aAAa,QAAQ,SAAS,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWnD,CAAC,UAAU,MAAM,aAAa,SAAS,MAAM,WAAW,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAevE,IAAM,WAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,IAAI,iBAAiB,EAAE,WAAW,oBAAoB,CAAC;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAa,MAAM;AAAA,MACnB,OAAO,MAAM;AAAA,MACb,eAAa;AAAA,MAEb,8BAAC,iBAAe,UAAS;AAAA;AAAA,EAC3B;AAEJ;","names":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsolla/xui-markdown",
3
- "version": "0.158.0",
3
+ "version": "0.159.0",
4
4
  "main": "./web/index.js",
5
5
  "module": "./web/index.mjs",
6
6
  "types": "./web/index.d.ts",
@@ -10,8 +10,8 @@
10
10
  "build:native": "PLATFORM=native tsup"
11
11
  },
12
12
  "dependencies": {
13
- "@xsolla/xui-core": "0.158.0",
14
- "@xsolla/xui-primitives-core": "0.158.0",
13
+ "@xsolla/xui-core": "0.159.0",
14
+ "@xsolla/xui-primitives-core": "0.159.0",
15
15
  "react-markdown": "^9.0.0"
16
16
  },
17
17
  "peerDependencies": {
package/web/index.d.mts CHANGED
@@ -4,6 +4,8 @@ import { ThemeOverrideProps } from '@xsolla/xui-core';
4
4
  interface MarkdownProps extends ThemeOverrideProps {
5
5
  children: string;
6
6
  className?: string;
7
+ /** Test ID for testing frameworks */
8
+ testID?: string;
7
9
  }
8
10
  declare const Markdown: React.FC<MarkdownProps>;
9
11
 
package/web/index.d.ts CHANGED
@@ -4,6 +4,8 @@ import { ThemeOverrideProps } from '@xsolla/xui-core';
4
4
  interface MarkdownProps extends ThemeOverrideProps {
5
5
  children: string;
6
6
  className?: string;
7
+ /** Test ID for testing frameworks */
8
+ testID?: string;
7
9
  }
8
10
  declare const Markdown: React.FC<MarkdownProps>;
9
11
 
package/web/index.js CHANGED
@@ -157,6 +157,7 @@ var MarkdownContainer = import_styled_components.default.div`
157
157
  var Markdown = ({
158
158
  children,
159
159
  className,
160
+ testID,
160
161
  themeMode,
161
162
  themeProductContext
162
163
  }) => {
@@ -167,6 +168,7 @@ var Markdown = ({
167
168
  className,
168
169
  themeColors: theme.colors,
169
170
  fonts: theme.fonts,
171
+ "data-testid": testID,
170
172
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_markdown.default, { children })
171
173
  }
172
174
  );
package/web/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/index.tsx","../../src/Markdown.tsx"],"sourcesContent":["export * from \"./Markdown\";\n","import React from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport styled from \"styled-components\";\nimport {\n useResolvedTheme,\n ThemeColors,\n type ThemeOverrideProps,\n} from \"@xsolla/xui-core\";\n\ninterface MarkdownContainerProps {\n themeColors: ThemeColors;\n fonts: { primary: string; heading?: string; body?: string };\n}\n\nconst MarkdownContainer = styled.div<MarkdownContainerProps>`\n color: ${(props) => props.themeColors?.content?.primary || \"white\"};\n font-family: ${(props) =>\n props.fonts?.body || props.fonts?.primary || \"sans-serif\"};\n\n h1,\n h2,\n h3,\n h4 {\n font-family: ${(props) =>\n props.fonts?.heading || props.fonts?.primary || \"sans-serif\"};\n }\n\n h1 {\n font-size: 40px;\n font-weight: 700;\n line-height: 48px;\n margin: 0;\n padding-top: 0px;\n padding-bottom: 6px;\n }\n\n h2 {\n font-size: 32px;\n font-weight: 700;\n line-height: 38px;\n margin: 0;\n padding-top: 2px;\n padding-bottom: 8px;\n }\n\n h3 {\n font-size: 28px;\n font-weight: 700;\n line-height: 34px;\n margin: 0;\n padding-top: 4px;\n padding-bottom: 8px;\n }\n\n h4 {\n font-size: 24px;\n font-weight: 700;\n line-height: 28px;\n margin: 0;\n padding-top: 6px;\n padding-bottom: 10px;\n }\n\n p {\n font-size: 16px;\n font-weight: 400;\n line-height: 22px;\n margin: 0;\n padding-top: 0px;\n padding-bottom: 4px;\n }\n\n img {\n max-width: 100%;\n height: auto;\n display: block;\n margin: 16px 0;\n }\n\n ul,\n ol {\n margin: 8px 0;\n padding-left: 24px;\n }\n\n li {\n font-size: 16px;\n line-height: 22px;\n margin-bottom: 4px;\n }\n\n code {\n background: rgba(255, 255, 255, 0.1);\n padding: 2px 4px;\n border-radius: 4px;\n font-family: monospace;\n }\n\n pre {\n background: rgba(255, 255, 255, 0.05);\n padding: 16px;\n border-radius: 8px;\n overflow-x: auto;\n margin: 16px 0;\n\n code {\n background: none;\n padding: 0;\n }\n }\n\n blockquote {\n border-left: 4px solid\n ${(props) => props.themeColors?.border?.brand || \"#66e6ff\"};\n margin: 16px 0;\n padding: 8px 16px;\n background: rgba(102, 230, 255, 0.05);\n\n p {\n padding-bottom: 0;\n }\n }\n\n a {\n color: ${(props) => props.themeColors?.control?.link?.primary || \"#66e6ff\"};\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n`;\n\nexport interface MarkdownProps extends ThemeOverrideProps {\n children: string;\n className?: string;\n}\n\nexport const Markdown: React.FC<MarkdownProps> = ({\n children,\n className,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n\n return (\n <MarkdownContainer\n className={className}\n themeColors={theme.colors}\n fonts={theme.fonts}\n >\n <ReactMarkdown>{children}</ReactMarkdown>\n </MarkdownContainer>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,4BAA0B;AAC1B,+BAAmB;AACnB,sBAIO;AAgJD;AAzIN,IAAM,oBAAoB,yBAAAA,QAAO;AAAA,WACtB,CAAC,UAAU,MAAM,aAAa,SAAS,WAAW,OAAO;AAAA,iBACnD,CAAC,UACd,MAAM,OAAO,QAAQ,MAAM,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAM1C,CAAC,UACd,MAAM,OAAO,WAAW,MAAM,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAyF1D,CAAC,UAAU,MAAM,aAAa,QAAQ,SAAS,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWnD,CAAC,UAAU,MAAM,aAAa,SAAS,MAAM,WAAW,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAavE,IAAM,WAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,QAAI,kCAAiB,EAAE,WAAW,oBAAoB,CAAC;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAa,MAAM;AAAA,MACnB,OAAO,MAAM;AAAA,MAEb,sDAAC,sBAAAC,SAAA,EAAe,UAAS;AAAA;AAAA,EAC3B;AAEJ;","names":["styled","ReactMarkdown"]}
1
+ {"version":3,"sources":["../../src/index.tsx","../../src/Markdown.tsx"],"sourcesContent":["export * from \"./Markdown\";\n","import React from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport styled from \"styled-components\";\nimport {\n useResolvedTheme,\n ThemeColors,\n type ThemeOverrideProps,\n} from \"@xsolla/xui-core\";\n\ninterface MarkdownContainerProps {\n themeColors: ThemeColors;\n fonts: { primary: string; heading?: string; body?: string };\n /** Test ID for testing frameworks */\n testID?: string;\n /** Test ID for testing frameworks (web) */\n \"data-testid\"?: string;\n}\n\nconst MarkdownContainer = styled.div<MarkdownContainerProps>`\n color: ${(props) => props.themeColors?.content?.primary || \"white\"};\n font-family: ${(props) =>\n props.fonts?.body || props.fonts?.primary || \"sans-serif\"};\n\n h1,\n h2,\n h3,\n h4 {\n font-family: ${(props) =>\n props.fonts?.heading || props.fonts?.primary || \"sans-serif\"};\n }\n\n h1 {\n font-size: 40px;\n font-weight: 700;\n line-height: 48px;\n margin: 0;\n padding-top: 0px;\n padding-bottom: 6px;\n }\n\n h2 {\n font-size: 32px;\n font-weight: 700;\n line-height: 38px;\n margin: 0;\n padding-top: 2px;\n padding-bottom: 8px;\n }\n\n h3 {\n font-size: 28px;\n font-weight: 700;\n line-height: 34px;\n margin: 0;\n padding-top: 4px;\n padding-bottom: 8px;\n }\n\n h4 {\n font-size: 24px;\n font-weight: 700;\n line-height: 28px;\n margin: 0;\n padding-top: 6px;\n padding-bottom: 10px;\n }\n\n p {\n font-size: 16px;\n font-weight: 400;\n line-height: 22px;\n margin: 0;\n padding-top: 0px;\n padding-bottom: 4px;\n }\n\n img {\n max-width: 100%;\n height: auto;\n display: block;\n margin: 16px 0;\n }\n\n ul,\n ol {\n margin: 8px 0;\n padding-left: 24px;\n }\n\n li {\n font-size: 16px;\n line-height: 22px;\n margin-bottom: 4px;\n }\n\n code {\n background: rgba(255, 255, 255, 0.1);\n padding: 2px 4px;\n border-radius: 4px;\n font-family: monospace;\n }\n\n pre {\n background: rgba(255, 255, 255, 0.05);\n padding: 16px;\n border-radius: 8px;\n overflow-x: auto;\n margin: 16px 0;\n\n code {\n background: none;\n padding: 0;\n }\n }\n\n blockquote {\n border-left: 4px solid\n ${(props) => props.themeColors?.border?.brand || \"#66e6ff\"};\n margin: 16px 0;\n padding: 8px 16px;\n background: rgba(102, 230, 255, 0.05);\n\n p {\n padding-bottom: 0;\n }\n }\n\n a {\n color: ${(props) => props.themeColors?.control?.link?.primary || \"#66e6ff\"};\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n`;\n\nexport interface MarkdownProps extends ThemeOverrideProps {\n children: string;\n className?: string;\n /** Test ID for testing frameworks */\n testID?: string;\n}\n\nexport const Markdown: React.FC<MarkdownProps> = ({\n children,\n className,\n testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n\n return (\n <MarkdownContainer\n className={className}\n themeColors={theme.colors}\n fonts={theme.fonts}\n data-testid={testID}\n >\n <ReactMarkdown>{children}</ReactMarkdown>\n </MarkdownContainer>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,4BAA0B;AAC1B,+BAAmB;AACnB,sBAIO;AAwJD;AA7IN,IAAM,oBAAoB,yBAAAA,QAAO;AAAA,WACtB,CAAC,UAAU,MAAM,aAAa,SAAS,WAAW,OAAO;AAAA,iBACnD,CAAC,UACd,MAAM,OAAO,QAAQ,MAAM,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAM1C,CAAC,UACd,MAAM,OAAO,WAAW,MAAM,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAyF1D,CAAC,UAAU,MAAM,aAAa,QAAQ,SAAS,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWnD,CAAC,UAAU,MAAM,aAAa,SAAS,MAAM,WAAW,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAevE,IAAM,WAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,QAAI,kCAAiB,EAAE,WAAW,oBAAoB,CAAC;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAa,MAAM;AAAA,MACnB,OAAO,MAAM;AAAA,MACb,eAAa;AAAA,MAEb,sDAAC,sBAAAC,SAAA,EAAe,UAAS;AAAA;AAAA,EAC3B;AAEJ;","names":["styled","ReactMarkdown"]}
package/web/index.mjs CHANGED
@@ -123,6 +123,7 @@ var MarkdownContainer = styled.div`
123
123
  var Markdown = ({
124
124
  children,
125
125
  className,
126
+ testID,
126
127
  themeMode,
127
128
  themeProductContext
128
129
  }) => {
@@ -133,6 +134,7 @@ var Markdown = ({
133
134
  className,
134
135
  themeColors: theme.colors,
135
136
  fonts: theme.fonts,
137
+ "data-testid": testID,
136
138
  children: /* @__PURE__ */ jsx(ReactMarkdown, { children })
137
139
  }
138
140
  );
package/web/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Markdown.tsx"],"sourcesContent":["import React from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport styled from \"styled-components\";\nimport {\n useResolvedTheme,\n ThemeColors,\n type ThemeOverrideProps,\n} from \"@xsolla/xui-core\";\n\ninterface MarkdownContainerProps {\n themeColors: ThemeColors;\n fonts: { primary: string; heading?: string; body?: string };\n}\n\nconst MarkdownContainer = styled.div<MarkdownContainerProps>`\n color: ${(props) => props.themeColors?.content?.primary || \"white\"};\n font-family: ${(props) =>\n props.fonts?.body || props.fonts?.primary || \"sans-serif\"};\n\n h1,\n h2,\n h3,\n h4 {\n font-family: ${(props) =>\n props.fonts?.heading || props.fonts?.primary || \"sans-serif\"};\n }\n\n h1 {\n font-size: 40px;\n font-weight: 700;\n line-height: 48px;\n margin: 0;\n padding-top: 0px;\n padding-bottom: 6px;\n }\n\n h2 {\n font-size: 32px;\n font-weight: 700;\n line-height: 38px;\n margin: 0;\n padding-top: 2px;\n padding-bottom: 8px;\n }\n\n h3 {\n font-size: 28px;\n font-weight: 700;\n line-height: 34px;\n margin: 0;\n padding-top: 4px;\n padding-bottom: 8px;\n }\n\n h4 {\n font-size: 24px;\n font-weight: 700;\n line-height: 28px;\n margin: 0;\n padding-top: 6px;\n padding-bottom: 10px;\n }\n\n p {\n font-size: 16px;\n font-weight: 400;\n line-height: 22px;\n margin: 0;\n padding-top: 0px;\n padding-bottom: 4px;\n }\n\n img {\n max-width: 100%;\n height: auto;\n display: block;\n margin: 16px 0;\n }\n\n ul,\n ol {\n margin: 8px 0;\n padding-left: 24px;\n }\n\n li {\n font-size: 16px;\n line-height: 22px;\n margin-bottom: 4px;\n }\n\n code {\n background: rgba(255, 255, 255, 0.1);\n padding: 2px 4px;\n border-radius: 4px;\n font-family: monospace;\n }\n\n pre {\n background: rgba(255, 255, 255, 0.05);\n padding: 16px;\n border-radius: 8px;\n overflow-x: auto;\n margin: 16px 0;\n\n code {\n background: none;\n padding: 0;\n }\n }\n\n blockquote {\n border-left: 4px solid\n ${(props) => props.themeColors?.border?.brand || \"#66e6ff\"};\n margin: 16px 0;\n padding: 8px 16px;\n background: rgba(102, 230, 255, 0.05);\n\n p {\n padding-bottom: 0;\n }\n }\n\n a {\n color: ${(props) => props.themeColors?.control?.link?.primary || \"#66e6ff\"};\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n`;\n\nexport interface MarkdownProps extends ThemeOverrideProps {\n children: string;\n className?: string;\n}\n\nexport const Markdown: React.FC<MarkdownProps> = ({\n children,\n className,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n\n return (\n <MarkdownContainer\n className={className}\n themeColors={theme.colors}\n fonts={theme.fonts}\n >\n <ReactMarkdown>{children}</ReactMarkdown>\n </MarkdownContainer>\n );\n};\n"],"mappings":";AACA,OAAO,mBAAmB;AAC1B,OAAO,YAAY;AACnB;AAAA,EACE;AAAA,OAGK;AAgJD;AAzIN,IAAM,oBAAoB,OAAO;AAAA,WACtB,CAAC,UAAU,MAAM,aAAa,SAAS,WAAW,OAAO;AAAA,iBACnD,CAAC,UACd,MAAM,OAAO,QAAQ,MAAM,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAM1C,CAAC,UACd,MAAM,OAAO,WAAW,MAAM,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAyF1D,CAAC,UAAU,MAAM,aAAa,QAAQ,SAAS,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWnD,CAAC,UAAU,MAAM,aAAa,SAAS,MAAM,WAAW,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAavE,IAAM,WAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,IAAI,iBAAiB,EAAE,WAAW,oBAAoB,CAAC;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAa,MAAM;AAAA,MACnB,OAAO,MAAM;AAAA,MAEb,8BAAC,iBAAe,UAAS;AAAA;AAAA,EAC3B;AAEJ;","names":[]}
1
+ {"version":3,"sources":["../../src/Markdown.tsx"],"sourcesContent":["import React from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport styled from \"styled-components\";\nimport {\n useResolvedTheme,\n ThemeColors,\n type ThemeOverrideProps,\n} from \"@xsolla/xui-core\";\n\ninterface MarkdownContainerProps {\n themeColors: ThemeColors;\n fonts: { primary: string; heading?: string; body?: string };\n /** Test ID for testing frameworks */\n testID?: string;\n /** Test ID for testing frameworks (web) */\n \"data-testid\"?: string;\n}\n\nconst MarkdownContainer = styled.div<MarkdownContainerProps>`\n color: ${(props) => props.themeColors?.content?.primary || \"white\"};\n font-family: ${(props) =>\n props.fonts?.body || props.fonts?.primary || \"sans-serif\"};\n\n h1,\n h2,\n h3,\n h4 {\n font-family: ${(props) =>\n props.fonts?.heading || props.fonts?.primary || \"sans-serif\"};\n }\n\n h1 {\n font-size: 40px;\n font-weight: 700;\n line-height: 48px;\n margin: 0;\n padding-top: 0px;\n padding-bottom: 6px;\n }\n\n h2 {\n font-size: 32px;\n font-weight: 700;\n line-height: 38px;\n margin: 0;\n padding-top: 2px;\n padding-bottom: 8px;\n }\n\n h3 {\n font-size: 28px;\n font-weight: 700;\n line-height: 34px;\n margin: 0;\n padding-top: 4px;\n padding-bottom: 8px;\n }\n\n h4 {\n font-size: 24px;\n font-weight: 700;\n line-height: 28px;\n margin: 0;\n padding-top: 6px;\n padding-bottom: 10px;\n }\n\n p {\n font-size: 16px;\n font-weight: 400;\n line-height: 22px;\n margin: 0;\n padding-top: 0px;\n padding-bottom: 4px;\n }\n\n img {\n max-width: 100%;\n height: auto;\n display: block;\n margin: 16px 0;\n }\n\n ul,\n ol {\n margin: 8px 0;\n padding-left: 24px;\n }\n\n li {\n font-size: 16px;\n line-height: 22px;\n margin-bottom: 4px;\n }\n\n code {\n background: rgba(255, 255, 255, 0.1);\n padding: 2px 4px;\n border-radius: 4px;\n font-family: monospace;\n }\n\n pre {\n background: rgba(255, 255, 255, 0.05);\n padding: 16px;\n border-radius: 8px;\n overflow-x: auto;\n margin: 16px 0;\n\n code {\n background: none;\n padding: 0;\n }\n }\n\n blockquote {\n border-left: 4px solid\n ${(props) => props.themeColors?.border?.brand || \"#66e6ff\"};\n margin: 16px 0;\n padding: 8px 16px;\n background: rgba(102, 230, 255, 0.05);\n\n p {\n padding-bottom: 0;\n }\n }\n\n a {\n color: ${(props) => props.themeColors?.control?.link?.primary || \"#66e6ff\"};\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n`;\n\nexport interface MarkdownProps extends ThemeOverrideProps {\n children: string;\n className?: string;\n /** Test ID for testing frameworks */\n testID?: string;\n}\n\nexport const Markdown: React.FC<MarkdownProps> = ({\n children,\n className,\n testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n\n return (\n <MarkdownContainer\n className={className}\n themeColors={theme.colors}\n fonts={theme.fonts}\n data-testid={testID}\n >\n <ReactMarkdown>{children}</ReactMarkdown>\n </MarkdownContainer>\n );\n};\n"],"mappings":";AACA,OAAO,mBAAmB;AAC1B,OAAO,YAAY;AACnB;AAAA,EACE;AAAA,OAGK;AAwJD;AA7IN,IAAM,oBAAoB,OAAO;AAAA,WACtB,CAAC,UAAU,MAAM,aAAa,SAAS,WAAW,OAAO;AAAA,iBACnD,CAAC,UACd,MAAM,OAAO,QAAQ,MAAM,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAM1C,CAAC,UACd,MAAM,OAAO,WAAW,MAAM,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAyF1D,CAAC,UAAU,MAAM,aAAa,QAAQ,SAAS,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWnD,CAAC,UAAU,MAAM,aAAa,SAAS,MAAM,WAAW,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAevE,IAAM,WAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,IAAI,iBAAiB,EAAE,WAAW,oBAAoB,CAAC;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAa,MAAM;AAAA,MACnB,OAAO,MAAM;AAAA,MACb,eAAa;AAAA,MAEb,8BAAC,iBAAe,UAAS;AAAA;AAAA,EAC3B;AAEJ;","names":[]}