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

package/components/Callout/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 interface Props extends React.PropsWithChildren<React.HTMLAttributes<HTMLQuoteElement>> {
-  attributes: {};
+  attributes?: {};
   icon: string;
   theme?: string;
   heading?: React.ReactElement;

package/components/Code/index.tsx

@@ -8,14 +8,12 @@ let syntaxHighlighter;
 let canonicalLanguage = _ => '';
 
 if (typeof window !== 'undefined') {
-  const module = await import('@readme/syntax-highlighter');
-
-  syntaxHighlighter = module.default;
-  canonicalLanguage = module.canonical;
+  import('@readme/syntax-highlighter').then(module => {
+    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>();
@@ -34,7 +32,8 @@ function CopyCode({ codeRef, rootClass = 'rdmd-code-copy', className = '' }) {
   return <button ref={button} aria-label="Copy Code" className={`${rootClass} ${className}`} onClick={copier} />;
 }
 
-interface Props extends Omit<HTMLElement, 'lang'> {
+interface CodeProps {
+  children?: string[] | string;
   copyButtons?: boolean;
   lang?: string;
   meta?: string;
@@ -42,7 +41,7 @@ interface Props extends Omit<HTMLElement, 'lang'> {
   value?: string;
 }
 
-const Code = (props: Props) => {
+const Code = (props: CodeProps) => {
   const { children, copyButtons, lang, theme, value } = props;
 
   const language = canonicalLanguage(lang);

package/components/Embed/index.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+
+interface FaviconProps {
+  src: string;
+  alt?: string;
+}
+
+const Favicon = ({ src, alt = 'favicon', ...attr }: FaviconProps) => (
+  <img {...attr} alt={alt} height="14" src={src} width="14" />
+);
+
+interface EmbedProps {
+  lazy?: boolean;
+  url: string;
+  title: string;
+  provider?: string;
+  html?: string;
+  iframe?: boolean;
+  image?: string;
+  favicon?: string;
+}
+
+const Embed = ({ lazy = true, url, provider, title, html, iframe, image, favicon, ...attrs }: EmbedProps) => {
+  if (iframe) {
+    return <iframe {...attrs} src={url} style={{ border: 'none', display: 'flex', margin: 'auto' }} />;
+  }
+
+  if (!provider)
+    provider = new URL(url).hostname
+      .split(/(?:www)?\./)
+      .filter(i => i)
+      .join('.');
+
+  const classes = ['embed', image ? 'embed_hasImg' : ''];
+
+  return (
+    <div className={classes.join(' ')}>
+      {html ? (
+        <div className="embed-media" dangerouslySetInnerHTML={{ __html: html }} />
+      ) : (
+        <a className="embed-link" href={url} rel="noopener noreferrer" target="_blank">
+          {!image || <img alt={title} className="embed-img" loading={lazy ? 'lazy' : undefined} src={image} />}
+          {title ? (
+            <div className="embed-body">
+              {!favicon || <Favicon alt={provider} src={favicon} />}
+              {provider && (
+                <small className="embed-provider">
+                  {provider.search(/^@{1}/) < 0 ? (
+                    provider
+                  ) : (
+                    <code style={{ fontFamily: 'var(--md-code-font, monospace)' }}>{url}</code>
+                  )}
+                </small>
+              )}
+              <div className="embed-title">{title}</div>
+            </div>
+          ) : (
+            <div className="embed-body">
+              <b>View</b>: <span className="embed-body-url">{url}</span>
+            </div>
+          )}
+        </a>
+      )}
+    </div>
+  );
+};
+
+export default Embed;

package/components/Image/index.tsx

@@ -1,18 +1,32 @@
 import * as React from 'react';
 
-const Image = ({
-  align = '',
-  alt = '',
-  border = false,
-  caption,
-  className = '',
-  height = 'auto',
-  src = '',
-  title = '',
-  width = 'auto',
-  lazy = false,
-}) => {
+interface ImageProps {
+  align?: string;
+  alt?: string;
+  border?: boolean;
+  caption?: string;
+  className?: string;
+  height?: string;
+  src: string;
+  title?: string;
+  width?: string;
+  lazy?: boolean;
+}
+
+const Image = (Props: ImageProps) => {
   const [lightbox, setLightbox] = React.useState(false);
+  const {
+    align = '',
+    alt = '',
+    border = false,
+    caption,
+    className = '',
+    height = 'auto',
+    src,
+    title = '',
+    width = 'auto',
+    lazy = false,
+  } = 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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 interface Props extends React.PropsWithChildren<React.HTMLAttributes<HTMLQuoteElement>> {
-    attributes: {};
+    attributes?: {};
     icon: string;
     theme?: string;
     heading?: React.ReactElement;

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

@@ -1,10 +1,11 @@
 import React from 'react';
-interface Props extends Omit<HTMLElement, 'lang'> {
+interface CodeProps {
+    children?: string[] | string;
     copyButtons?: boolean;
     lang?: string;
     meta?: string;
     theme?: string;
     value?: string;
 }
-declare const Code: (props: Props) => React.JSX.Element;
+declare const Code: (props: CodeProps) => React.JSX.Element;
 export default Code;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+interface EmbedProps {
+    lazy?: boolean;
+    url: string;
+    title: string;
+    provider?: string;
+    html?: string;
+    iframe?: boolean;
+    image?: string;
+    favicon?: string;
+}
+declare const Embed: ({ lazy, url, provider, title, html, iframe, image, favicon, ...attrs }: EmbedProps) => React.JSX.Element;
+export default Embed;

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

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

package/dist/enums.d.ts

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