@readme/markdown 6.75.0-beta.52 → 6.75.0-beta.54

package/components/Embed/index.tsx

@@ -13,24 +13,42 @@ interface EmbedProps {
   lazy?: boolean;
   url: string;
   title: string;
-  provider?: string;
+  providerName?: string;
+  providerUrl?: string;
   html?: string;
   iframe?: boolean;
   image?: string;
   favicon?: string;
+  typeOfEmbed?: string;
 }
 
-const Embed = ({ lazy = true, url, provider, title, html, iframe, image, favicon, ...attrs }: EmbedProps) => {
+const Embed = ({
+  lazy = true,
+  url,
+  html,
+  providerName,
+  providerUrl,
+  title,
+  iframe,
+  image,
+  favicon,
+  ...attrs
+}: EmbedProps) => {
+  if (typeof iframe !== 'boolean') iframe = iframe === 'true';
+  if (html === 'false') html = undefined;
+
   if (iframe) {
     return <iframe {...attrs} src={url} style={{ border: 'none', display: 'flex', margin: 'auto' }} />;
   }
 
-  if (!provider)
-    provider = new URL(url).hostname
+  if (!providerUrl && url)
+    providerUrl = new URL(url).hostname
       .split(/(?:www)?\./)
       .filter(i => i)
       .join('.');
 
+  if (!providerName) providerName = providerUrl;
+
   const classes = ['embed', image ? 'embed_hasImg' : ''];
 
   return (
@@ -40,13 +58,13 @@ const Embed = ({ lazy = true, url, provider, title, html, iframe, image, favicon
       ) : (
         <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 ? (
+          {title && title !== '@embed' ? (
             <div className="embed-body">
-              {!favicon || <Favicon alt={provider} src={favicon} />}
-              {provider && (
+              {!favicon || <Favicon alt={providerName} src={favicon} />}
+              {providerUrl && (
                 <small className="embed-provider">
-                  {provider.search(/^@{1}/) < 0 ? (
-                    provider
+                  {providerUrl.search(/^@{1}/) < 0 ? (
+                    providerName
                   ) : (
                     <code style={{ fontFamily: 'var(--md-code-font, monospace)' }}>{url}</code>
                   )}

package/components/Image/index.tsx

@@ -57,16 +57,16 @@ const Image = (Props: ImageProps) => {
 
   if (caption) {
     return (
-      <figure>
-        <span
-          aria-label={alt}
-          className={`img lightbox ${lightbox ? 'open' : 'closed'}`}
-          onClick={toggle}
-          onKeyDown={handleKeyDown}
-          role={'button'}
-          tabIndex={0}
-        >
-          <span className="lightbox-inner">
+      <span
+        aria-label={alt}
+        className={`img lightbox ${lightbox ? 'open' : 'closed'}`}
+        onClick={toggle}
+        onKeyDown={handleKeyDown}
+        role={'button'}
+        tabIndex={0}
+      >
+        <span className="lightbox-inner">
+          <figure>
             <img
               src={src}
               width={width}
@@ -76,34 +76,36 @@ const Image = (Props: ImageProps) => {
               alt={alt}
               loading={lazy ? 'lazy' : 'eager'}
             />
-          </span>
+            <figcaption>{caption}</figcaption>
+          </figure>
         </span>
-        <figcaption>{caption}</figcaption>
-      </figure>
+      </span>
     );
   }
 
   return (
-    <span
-      aria-label={alt}
-      className={`img lightbox ${lightbox ? 'open' : 'closed'}`}
-      onClick={toggle}
-      onKeyDown={handleKeyDown}
-      role={'button'}
-      tabIndex={0}
-    >
-      <span className="lightbox-inner">
-        <img
-          src={src}
-          width={width}
-          height={height}
-          title={title}
-          className={`img img-align-${align} ${border ? 'border' : ''}`}
-          alt={alt}
-          loading={lazy ? 'lazy' : 'eager'}
-        />
+    <p>
+      <span
+        aria-label={alt}
+        className={`img lightbox ${lightbox ? 'open' : 'closed'}`}
+        onClick={toggle}
+        onKeyDown={handleKeyDown}
+        role={'button'}
+        tabIndex={0}
+      >
+        <span className="lightbox-inner">
+          <img
+            src={src}
+            width={width}
+            height={height}
+            title={title}
+            className={`img img-align-${align} ${border ? 'border' : ''}`}
+            alt={alt}
+            loading={lazy ? 'lazy' : 'eager'}
+          />
+        </span>
       </span>
-    </span>
+    </p>
   );
 };
 

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

@@ -3,11 +3,13 @@ interface EmbedProps {
     lazy?: boolean;
     url: string;
     title: string;
-    provider?: string;
+    providerName?: string;
+    providerUrl?: string;
     html?: string;
     iframe?: boolean;
     image?: string;
     favicon?: string;
+    typeOfEmbed?: string;
 }
-declare const Embed: ({ lazy, url, provider, title, html, iframe, image, favicon, ...attrs }: EmbedProps) => React.JSX.Element;
+declare const Embed: ({ lazy, url, html, providerName, providerUrl, title, iframe, image, favicon, ...attrs }: EmbedProps) => React.JSX.Element;
 export default Embed;

package/dist/enums.d.ts

@@ -1,12 +1,12 @@
 export declare enum NodeTypes {
     callout = "rdme-callout",
     codeTabs = "code-tabs",
-    embed = "embed",
+    embedBlock = "embed-block",
     emoji = "gemoji",
     glossary = "readme-glossary-item",
     htmlBlock = "html-block",
     i = "i",
-    image = "image",
+    imageBlock = "image-block",
     reusableContent = "reusable-content",
     tutorialTile = "tutorial-tile",
     variable = "readme-variable"

package/dist/index.d.ts

@@ -1,12 +1,11 @@
 import * as Components from './components';
-import { compile, hast, run, mdast, mdx, plain } from './lib';
 import './styles/main.scss';
 declare const utils: {
     readonly options: any;
     getHref: any;
     calloutIcons: {};
 };
-export declare const reactProcessor: (opts?: {}) => import("unified").Processor<import("mdast").Root, import("estree").Program, import("estree").Program, import("estree").Program, string>;
 export declare const html: (text: string, opts?: {}) => void;
 export declare const esast: (text: string, opts?: {}) => void;
-export { compile, hast, run, mdast, mdx, plain, Components, utils };
+export { compile, hast, hastFromHtml, run, mdast, mdx, plain, remarkPlugins } from './lib';
+export { Components, utils };

package/dist/lib/hast.d.ts

@@ -2,4 +2,5 @@ interface Options {
     components?: Record<string, string>;
 }
 declare const hast: (text: string, opts?: Options) => import("hast").Root;
+export declare const hastFromHtml: (html: string) => import("hast").Root;
 export default hast;

package/dist/lib/index.d.ts

@@ -1,9 +1,9 @@
 import astProcessor, { MdastOpts, remarkPlugins } from './ast-processor';
 import compile from './compile';
-import hast from './hast';
+import hast, { hastFromHtml } from './hast';
 import mdast from './mdast';
 import mdx from './mdx';
 import plain from './plain';
 import run from './run';
 export type { MdastOpts };
-export { astProcessor, compile, hast, mdast, mdx, plain, run, remarkPlugins };
+export { astProcessor, compile, hast, hastFromHtml, mdast, mdx, plain, run, remarkPlugins };