@readme/markdown 6.75.0-beta.31 → 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/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/enums.d.ts

@@ -1,4 +1,5 @@
 export declare enum NodeTypes {
+    callout = "callout",
     codeTabs = "code-tabs",
     emoji = "emoji",
     i = "i",

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 };