@readme/markdown 6.75.0-beta.30 → 6.75.0-beta.32

package/components/Callout/index.tsx

@@ -3,12 +3,29 @@ import * as React from 'react';
 interface Props extends React.PropsWithChildren<React.HTMLAttributes<HTMLQuoteElement>> {
   attributes: {};
   icon: string;
-  theme: string;
+  theme?: string;
   heading?: React.ReactElement;
 }
 
+const themes: Record<string, string> = {
+  '\uD83D\uDCD8': 'info',
+  '\uD83D\uDEA7': 'warn',
+  '\u26A0\uFE0F': 'warn',
+  '\uD83D\uDC4D': 'okay',
+  '\u2705': 'okay',
+  '\u2757\uFE0F': 'error',
+  '\u2757': 'error',
+  '\uD83D\uDED1': 'error',
+  '\u2049\uFE0F': 'error',
+  '\u203C\uFE0F': 'error',
+  '\u2139\uFE0F': 'info',
+  '\u26A0': 'warn',
+};
+
 const Callout = (props: Props) => {
-  const { attributes, children, theme, icon, heading } = props;
+  const { attributes, children, icon, heading } = props;
+
+  let theme = props.theme || themes[icon] || 'default';
 
   return (
     // @ts-ignore

package/components/Code/index.tsx

@@ -6,13 +6,16 @@ import React, { createRef } from 'react';
 // https://github.com/codemirror/CodeMirror/issues/3701#issuecomment-164904534
 let syntaxHighlighter;
 let canonicalLanguage = _ => '';
+
 if (typeof window !== 'undefined') {
-  // eslint-disable-next-line global-require
-  syntaxHighlighter = require('@readme/syntax-highlighter').default;
-  // eslint-disable-next-line global-require
-  ({ canonical: canonicalLanguage } = require('@readme/syntax-highlighter'));
+  const module = await import('@readme/syntax-highlighter');
+
+  syntaxHighlighter = module.default;
+  canonicalLanguage = module.canonical;
 }
 
+console.log(syntaxHighlighter);
+
 function CopyCode({ codeRef, rootClass = 'rdmd-code-copy', className = '' }) {
   const copyClass = `${rootClass}_copied`;
   const button = createRef<HTMLButtonElement>();
@@ -52,7 +55,7 @@ const Code = (props: Props) => {
     dark: theme === 'dark',
   };
 
-  const code = value ?? children?.[0] ?? children ?? '';
+  const code = value ?? (Array.isArray(children) ? children[0] : children) ?? '';
   const highlightedCode = syntaxHighlighter && code ? syntaxHighlighter(code, language, codeOpts) : code;
 
   return (

package/components/HTMLBlock/index.tsx

@@ -0,0 +1,36 @@
+import React, { useEffect } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+const MATCH_SCRIPT_TAGS = /<script\b[^>]*>([\s\S]*?)<\/script *>\n?/gim;
+
+const extractScripts = (html: string = ''): [string, () => void] => {
+  const scripts: string[] = [];
+  let match: RegExpExecArray | null;
+  while ((match = MATCH_SCRIPT_TAGS.exec(html)) !== null) {
+    scripts.push(match[1]);
+  }
+  const cleaned = html.replace(MATCH_SCRIPT_TAGS, '');
+  return [cleaned, () => scripts.map(js => window.eval(js))];
+};
+
+const HTMLBlock = ({ children = '', runScripts = false, safeMode = false }) => {
+  let html = children;
+  if (typeof html !== 'string') html = renderToStaticMarkup(html);
+  const [cleanedHtml, exec] = extractScripts(html);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined' && typeof runScripts === 'boolean' && runScripts) exec();
+  }, [runScripts, exec]);
+
+  if (safeMode) {
+    return (
+      <pre className="html-unsafe">
+        <code>{html}</code>
+      </pre>
+    );
+  }
+
+  return <div className="rdmd-html" dangerouslySetInnerHTML={{ __html: cleanedHtml }} />;
+};
+
+export default HTMLBlock;

package/components/Image/index.tsx

@@ -1,34 +1,19 @@
 import * as React from 'react';
 
-interface Props extends React.PropsWithChildren<React.HTMLAttributes<HTMLImageElement>> {
-  align: string;
-  alt: string;
-  border: boolean;
-  caption: string;
-  className: string;
-  height: string;
-  lazy: boolean;
-  src: string;
-  title: string;
-  width: string;
-}
-
-const Image = (props: Props) => {
+const Image = ({
+  align = '',
+  alt = '',
+  border = false,
+  caption,
+  className = '',
+  height = 'auto',
+  src = '',
+  title = '',
+  width = 'auto',
+  lazy = false,
+}) => {
   const [lightbox, setLightbox] = React.useState(false);
 
-  const {
-    align = '',
-    alt = '',
-    border = false,
-    caption,
-    className = '',
-    height = 'auto',
-    lazy,
-    src = '',
-    title = '',
-    width = 'auto',
-  } = props;
-
   if (className === 'emoji') {
     return <img src={src} width={width} height={height} title={title} alt={alt} loading={lazy ? 'lazy' : 'eager'} />;
   }

package/dist/components/Callout/index.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 interface Props extends React.PropsWithChildren<React.HTMLAttributes<HTMLQuoteElement>> {
     attributes: {};
     icon: string;
-    theme: string;
+    theme?: string;
     heading?: React.ReactElement;
 }
 declare const Callout: (props: Props) => React.JSX.Element;

package/dist/components/HTMLBlock/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const HTMLBlock: ({ children, runScripts, safeMode }: {
+    children?: string;
+    runScripts?: boolean;
+    safeMode?: boolean;
+}) => React.JSX.Element;
+export default HTMLBlock;

package/dist/components/Image/index.d.ts

@@ -1,15 +1,14 @@
 import * as React from 'react';
-interface Props extends React.PropsWithChildren<React.HTMLAttributes<HTMLImageElement>> {
-    align: string;
-    alt: string;
-    border: boolean;
-    caption: string;
-    className: string;
-    height: string;
-    lazy: boolean;
-    src: string;
-    title: string;
-    width: string;
-}
-declare const Image: (props: Props) => React.JSX.Element;
+declare const Image: ({ align, alt, border, caption, className, height, src, title, width, lazy, }: {
+    align?: string;
+    alt?: string;
+    border?: boolean;
+    caption: any;
+    className?: string;
+    height?: string;
+    src?: string;
+    title?: string;
+    width?: string;
+    lazy?: boolean;
+}) => React.JSX.Element;
 export default Image;

package/dist/enums.d.ts

@@ -1,6 +1,8 @@
 export declare enum NodeTypes {
+    callout = "callout",
     codeTabs = "code-tabs",
     emoji = "emoji",
     i = "i",
-    image = "image"
+    image = "image",
+    htmlBlock = "html-block"
 }

package/dist/example/App.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
+import './demo.scss';
 declare const App: () => React.JSX.Element;
 export default App;

package/dist/index.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
 import { RunOptions } from '@mdx-js/mdx';
 import * as Components from './components';
+type ComponentOpts = Record<string, (props: any) => React.ReactNode>;
 type RunOpts = Omit<RunOptions, 'Fragment'> & {
-    components?: Record<string, () => React.ReactNode>;
+    components?: ComponentOpts;
     imports?: Record<string, unknown>;
 };
 export { Components };