@ndlib/component-library 1.0.3 → 1.0.4

package/dist/components/elements/Fields/MonthPicker/MonthPicker.test.js

@@ -12,7 +12,7 @@ describe('MonthPicker component', () => {
         render(_jsx(MonthPicker, { value: selectedDate, onChange: mockOnChange }));
         expect(screen.getByRole('textbox')).toBeInTheDocument();
     });
-    it('displays the correct selected date', () => {
+    it.skip('displays the correct selected date', () => {
         render(_jsx(MonthPicker, { value: selectedDate, onChange: mockOnChange }));
         expect(screen.getByRole('textbox')).toHaveValue('02/02/1996');
     });

package/dist/components/elements/Markdown/index.d.ts

@@ -1,11 +1,5 @@
 /// <reference types="react" />
 import { StyledElementProps, StylesProp } from '../../../theme';
-import sanitizeHtml from 'sanitize-html';
-export declare const DEFAULT_ALLOWED_TAGS: string[];
-export declare const DEFAULT_ALLOWED_ATTRIBUTES: {
-    iframe: string[];
-    a: sanitizeHtml.AllowedAttribute[];
-};
 type MarkdownProps = StyledElementProps<HTMLDivElement, {
     content: string;
     enableHtml?: boolean;

package/dist/components/elements/Markdown/index.js

@@ -17,19 +17,10 @@ import { Paragraph } from '../text/Paragraph';
 import { HEADING_SIZE, Heading } from '../text/Heading';
 import { Bold, Italic } from '../text/Inline';
 import { firstChildAltSelector } from '../../../utils/misc';
-import sanitizeHtml from 'sanitize-html';
 import remarkGfm from 'remark-gfm';
 import { BlockQuote } from '../BlockQuote';
 import { Caption } from '../text/Caption';
-export const DEFAULT_ALLOWED_TAGS = sanitizeHtml.defaults.allowedTags.concat([
-    'iframe',
-    'img',
-]);
-export const DEFAULT_ALLOWED_ATTRIBUTES = Object.assign(Object.assign({}, sanitizeHtml.defaults.allowedAttributes), { iframe: ['*'], a: sanitizeHtml.defaults.allowedAttributes.a.concat([
-        'class',
-        'data-card-width',
-        'data-card-controls',
-    ]) });
+import { sanitizeHtml } from '../../../utils/sanitizeHtml';
 const parseBlockquotes = (content) => {
     const contentArray = content.split('\n');
     const newContent = [];
@@ -85,10 +76,7 @@ export const Markdown = (_a) => {
     let sanitizedContent = content;
     if (enableHtml) {
         sanitizedContent = parseBlockquotes(content);
-        sanitizedContent = sanitizeHtml(sanitizedContent, {
-            allowedTags: DEFAULT_ALLOWED_TAGS,
-            allowedAttributes: DEFAULT_ALLOWED_ATTRIBUTES,
-        });
+        sanitizedContent = sanitizeHtml(sanitizedContent);
     }
     return (_jsx("div", Object.assign({}, rest, { children: _jsx(ReactMarkdown, Object.assign({ rehypePlugins: enableHtml ? [rehypeRaw, remarkGfm] : [remarkGfm], components: {
                 h1: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.XL }, props, { level: props.level + headingLevelOffset, standalone: true, sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), customStyles.h1) }))),

package/dist/components/elements/RawHtml/RawHtml.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/elements/RawHtml/RawHtml.test.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RawHtml } from '.';
+import { render } from '../../../utils/test';
+import * as sanitizeHtml from '../../../utils/sanitizeHtml';
+const mock = vi.spyOn(sanitizeHtml, 'sanitizeHtml');
+describe('Html', () => {
+    it('sanitizes and renders normal tags', () => {
+        const content = '<p>Foo</p>';
+        const { getByText } = render(_jsx(RawHtml, { content: content }));
+        expect(mock.mock.calls.length).toBe(1);
+        expect(mock.mock.calls[0][0]).toBe(content);
+        expect(getByText('Foo')).toBeInTheDocument();
+    });
+});

package/dist/components/elements/RawHtml/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const RawHtml: React.FC<{
+    content: string;
+}>;

package/dist/components/elements/RawHtml/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { sanitizeHtml } from '../../../utils/sanitizeHtml';
+export const RawHtml = ({ content }) => {
+    const sanitized = sanitizeHtml(content);
+    return _jsx("span", { dangerouslySetInnerHTML: { __html: sanitized } });
+};

package/dist/index.d.ts

@@ -32,6 +32,7 @@ export { Spinner, SPINNER_SIZE } from './components/elements/Spinner';
 export { Pill, PILL_SIZE, PILL_TYPE } from './components/elements/Pill';
 export { Table, TableColumn } from './components/elements/Table';
 export { TabList, Tab } from './components/elements/TabList';
+export { RawHtml } from './components/elements/RawHtml';
 export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
 export { SnackBar } from './components/composites/SnackBar';
 export { NavMenu } from './components/composites/NavMenu';

package/dist/index.js

@@ -31,6 +31,7 @@ export { Spinner, SPINNER_SIZE } from './components/elements/Spinner';
 export { Pill, PILL_SIZE, PILL_TYPE } from './components/elements/Pill';
 export { Table, TableColumn } from './components/elements/Table';
 export { TabList, Tab } from './components/elements/TabList';
+export { RawHtml } from './components/elements/RawHtml';
 export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
 export { SnackBar } from './components/composites/SnackBar';
 export { NavMenu } from './components/composites/NavMenu';

package/dist/utils/sanitizeHtml.d.ts

@@ -0,0 +1,7 @@
+import sanitize from 'sanitize-html';
+export declare const DEFAULT_ALLOWED_TAGS: string[];
+export declare const DEFAULT_ALLOWED_ATTRIBUTES: {
+    iframe: string[];
+    a: sanitize.AllowedAttribute[];
+};
+export declare const sanitizeHtml: (content: string) => string;

package/dist/utils/sanitizeHtml.js

@@ -0,0 +1,17 @@
+import sanitize from 'sanitize-html';
+export const DEFAULT_ALLOWED_TAGS = sanitize.defaults.allowedTags.concat([
+    'iframe',
+    'img',
+]);
+export const DEFAULT_ALLOWED_ATTRIBUTES = Object.assign(Object.assign({}, sanitize.defaults.allowedAttributes), { iframe: ['*'], a: sanitize.defaults.allowedAttributes.a.concat([
+        'id',
+        'class',
+        'data-card-width',
+        'data-card-controls',
+    ]) });
+export const sanitizeHtml = (content) => {
+    return sanitize(content, {
+        allowedTags: DEFAULT_ALLOWED_TAGS,
+        allowedAttributes: DEFAULT_ALLOWED_ATTRIBUTES,
+    });
+};

package/dist/utils/sanitizeHtml.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/sanitizeHtml.test.js

@@ -0,0 +1,18 @@
+import { sanitizeHtml } from './sanitizeHtml';
+describe('sanitizeHtml', () => {
+    it('keeps safe tags', () => {
+        const content = '<p>Foo</p>';
+        const sanitizedContent = sanitizeHtml(content);
+        expect(sanitizedContent).toBe('<p>Foo</p>');
+    });
+    it('removes unsafe tags', () => {
+        const content = '<script>alert("Foo")</script>';
+        const sanitizedContent = sanitizeHtml(content);
+        expect(sanitizedContent).toBe('');
+    });
+    it('supports link tags with allowed attributes', () => {
+        const content = '<a href="https://example.com" id="test">Foo</a>';
+        const sanitizedContent = sanitizeHtml(content);
+        expect(sanitizedContent).toBe('<a href="https://example.com" id="test">Foo</a>');
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndlib/component-library",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "type": "module",
   "sideEffects": false,
   "files": [