@ndlib/component-library 0.0.100 → 0.0.101

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

@@ -57,6 +57,8 @@ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
 reprehenderit in voluptate velit esse cillum dolore eu fugiat
 nulla pariatur.
+
+https://this-should-be-auto-linked.nd.edu
 `;
 export const Default = {
     render: (args) => _jsx(Markdown, Object.assign({}, args)),

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

@@ -35,6 +35,8 @@ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
 reprehenderit in voluptate velit esse cillum dolore eu fugiat
 nulla pariatur.
+
+https://this-should-be-auto-linked.nd.edu
 `;
 const htmlMarkdown = `
   ## HTML Content
@@ -74,12 +76,15 @@ describe('Markdown', () => {
             name: 'Heading 5',
             level: 6,
         })).toBeInTheDocument();
+        expect(getByRole('link', {
+            name: 'https://this-should-be-auto-linked.nd.edu',
+        })).toBeInTheDocument();
         expect(getAllByRole('list')).toHaveLength(3);
     });
     it('renders allowed html when included', () => {
-        const { container, getByText, getByRole } = render(_jsx(Markdown, { content: htmlMarkdown, enableHtml: true }));
+        const { container, getByText, getAllByRole } = render(_jsx(Markdown, { content: htmlMarkdown, enableHtml: true }));
         expect(getByText('hello world')).toBeDefined();
-        expect(getByRole('link')).toBeDefined();
+        expect(getAllByRole('link')).toBeDefined();
         expect(() => getByText(' ')).toThrow();
         expect(container.getElementsByTagName('script')).toHaveLength(0);
         expect(container.getElementsByTagName('img')).toHaveLength(0);

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

@@ -6,7 +6,6 @@ export declare const DEFAULT_ALLOWED_ATTRIBUTES: {
     iframe: string[];
     a: sanitizeHtml.AllowedAttribute[];
 };
-export declare const DEFAULT_ALLOWED_IFRAME_DOMAINS: string[];
 type MarkdownProps = StyledElementProps<HTMLDivElement, {
     content: string;
     enableHtml?: boolean;
@@ -14,7 +13,6 @@ type MarkdownProps = StyledElementProps<HTMLDivElement, {
     headingLevelOffset?: number;
     sanitizeHtmlOptions?: {
         allowedTags?: string[];
-        allowedIframeDomains?: string[];
         allowedAttributes?: sanitizeHtml.IOptions['allowedAttributes'];
     };
     customStyles?: Record<string, StylesProp>;

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

@@ -18,6 +18,7 @@ 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';
 export const DEFAULT_ALLOWED_TAGS = sanitizeHtml.defaults.allowedTags.concat([
     'iframe',
@@ -27,11 +28,6 @@ export const DEFAULT_ALLOWED_ATTRIBUTES = Object.assign(Object.assign({}, saniti
         'data-card-width',
         'data-card-controls',
     ]) });
-export const DEFAULT_ALLOWED_IFRAME_DOMAINS = [
-    'facebook.com',
-    'youtube.com',
-    'nd.edu',
-];
 const dynamicTopMarginStyles = {
     [firstChildAltSelector]: {
         mt: 0,
@@ -43,12 +39,10 @@ export const Markdown = (_a) => {
     if (enableHtml) {
         sanitizedContent = sanitizeHtml(content, {
             allowedTags: (sanitizeHtmlOptions === null || sanitizeHtmlOptions === void 0 ? void 0 : sanitizeHtmlOptions.allowedTags) || DEFAULT_ALLOWED_TAGS,
-            allowedIframeDomains: (sanitizeHtmlOptions === null || sanitizeHtmlOptions === void 0 ? void 0 : sanitizeHtmlOptions.allowedIframeDomains) ||
-                DEFAULT_ALLOWED_IFRAME_DOMAINS,
             allowedAttributes: (sanitizeHtmlOptions === null || sanitizeHtmlOptions === void 0 ? void 0 : sanitizeHtmlOptions.allowedAttributes) || DEFAULT_ALLOWED_ATTRIBUTES,
         });
     }
-    return (_jsx("div", Object.assign({}, rest, { children: _jsx(ReactMarkdown, Object.assign({ rehypePlugins: enableHtml ? [rehypeRaw] : [], components: {
+    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) }))),
                 h2: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.LG }, props, { level: props.level + headingLevelOffset, standalone: true, sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), customStyles.h2) }))),
                 h3: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, props, { level: props.level + headingLevelOffset, standalone: true, sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), customStyles.h3) }))),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndlib/component-library",
-  "version": "0.0.100",
+  "version": "0.0.101",
   "type": "module",
   "sideEffects": false,
   "files": [
@@ -77,7 +77,7 @@
     "storybook": "^7.0.17",
     "theme-ui": "^0.16.1",
     "typescript": "^5.0.2",
-    "vite": "^4.3.9",
+    "vite": "^4.5.2",
     "vitest": "^0.31.4"
   },
   "prettier": {
@@ -92,7 +92,8 @@
     "react-markdown": "^8.0.7",
     "react-modal": "^3.16.1",
     "rehype-raw": "^6.1.1",
-    "sanitize-html": "^2.11.0",
+    "remark-gfm": "^4.0.0",
+    "sanitize-html": "^2.12.1",
     "schema-dts": "^1.1.2"
   }
 }