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

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/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

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