@ndlib/component-library 0.0.71 → 0.0.73
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.
- package/dist/components/composites/NavMenu/index.js +1 -0
- package/dist/components/elements/Markdown/Markdown.stories.d.ts +1 -0
- package/dist/components/elements/Markdown/Markdown.stories.js +9 -0
- package/dist/components/elements/Markdown/Markdown.test.js +3 -0
- package/dist/components/elements/Markdown/index.d.ts +1 -0
- package/dist/components/elements/Markdown/index.js +2 -1
- package/package.json +1 -1
|
@@ -28,6 +28,7 @@ export const NavMenu = (props) => {
|
|
|
28
28
|
border: 'solid 1px',
|
|
29
29
|
borderColor: COLOR.EXTRA_LIGHT_GRAY,
|
|
30
30
|
borderRadius: '4px',
|
|
31
|
+
margin: '0px 10px 0px 10px',
|
|
31
32
|
} }, { children: [_jsx(Column, { sx: { flexGrow: 1 } }), submenu.items.map((submenuItem) => {
|
|
32
33
|
if (!(submenuItem.action.type === MENU_ACTION_TYPE.SUBMENU)) {
|
|
33
34
|
return null;
|
|
@@ -5,5 +5,6 @@ export default meta;
|
|
|
5
5
|
type Story = StoryObj<typeof Markdown>;
|
|
6
6
|
export declare const Default: Story;
|
|
7
7
|
export declare const WithHtml: Story;
|
|
8
|
+
export declare const CustomizeImages: Story;
|
|
8
9
|
export declare const CustomHtmlSanitize: Story;
|
|
9
10
|
export declare const NoHtml: Story;
|
|
@@ -17,6 +17,9 @@ const startingContent = `
|
|
|
17
17
|
# Inline styles
|
|
18
18
|
This paragraph has __bold content__ and **more bold content** and _italic content_ and *more italic content*
|
|
19
19
|
|
|
20
|
+
# Image
|
|
21
|
+
|
|
22
|
+
|
|
20
23
|
# Heading 1
|
|
21
24
|
${sampleParagraph}
|
|
22
25
|
|
|
@@ -69,6 +72,12 @@ export const WithHtml = {
|
|
|
69
72
|
enableHtml: true,
|
|
70
73
|
},
|
|
71
74
|
};
|
|
75
|
+
export const CustomizeImages = {
|
|
76
|
+
render: (args) => _jsx(Markdown, Object.assign({}, args, { imageStyles: { width: '200px' } })),
|
|
77
|
+
args: {
|
|
78
|
+
content: startingContent,
|
|
79
|
+
},
|
|
80
|
+
};
|
|
72
81
|
export const CustomHtmlSanitize = {
|
|
73
82
|
render: (args) => _jsx(Markdown, Object.assign({}, args)),
|
|
74
83
|
args: {
|
|
@@ -5,6 +5,9 @@ const testMarkdown = `
|
|
|
5
5
|
# Inline styles
|
|
6
6
|
This paragraph has __bold content__ and **more bold content** and _italic content_ and *more italic content*
|
|
7
7
|
|
|
8
|
+
# Image
|
|
9
|
+
|
|
10
|
+
|
|
8
11
|
# Heading 1
|
|
9
12
|
|
|
10
13
|
## Heading 2
|
|
@@ -10,6 +10,7 @@ export declare const DEFAULT_ALLOWED_IFRAME_DOMAINS: string[];
|
|
|
10
10
|
type MarkdownProps = StyledElementProps<HTMLDivElement, {
|
|
11
11
|
content: string;
|
|
12
12
|
enableHtml?: boolean;
|
|
13
|
+
imageStyles?: React.CSSProperties;
|
|
13
14
|
sanitizeHtmlOptions?: {
|
|
14
15
|
allowedTags?: string[];
|
|
15
16
|
allowedIframeDomains?: string[];
|
|
@@ -44,7 +44,7 @@ const paragraphStyles = {
|
|
|
44
44
|
},
|
|
45
45
|
};
|
|
46
46
|
export const Markdown = (_a) => {
|
|
47
|
-
var { content, enableHtml, sanitizeHtmlOptions } = _a, rest = __rest(_a, ["content", "enableHtml", "sanitizeHtmlOptions"]);
|
|
47
|
+
var { content, enableHtml, sanitizeHtmlOptions, imageStyles } = _a, rest = __rest(_a, ["content", "enableHtml", "sanitizeHtmlOptions", "imageStyles"]);
|
|
48
48
|
let sanitizedContent = content;
|
|
49
49
|
if (enableHtml) {
|
|
50
50
|
sanitizedContent = sanitizeHtml(content, {
|
|
@@ -70,5 +70,6 @@ export const Markdown = (_a) => {
|
|
|
70
70
|
p: (props) => _jsx(Paragraph, Object.assign({}, props, { sx: paragraphStyles })),
|
|
71
71
|
strong: (props) => _jsx(Bold, Object.assign({}, props)),
|
|
72
72
|
em: (props) => _jsx(Italic, Object.assign({}, props)),
|
|
73
|
+
img: (props) => _jsx("img", Object.assign({}, props, { style: imageStyles })),
|
|
73
74
|
} }, { children: sanitizedContent })) })));
|
|
74
75
|
};
|