@readme/markdown 14.2.6 → 14.3.0

package/components/Embed/index.tsx

@@ -14,7 +14,7 @@ const Favicon = ({ src, alt = 'favicon', ...attr }: FaviconProps) => (
 interface EmbedProps {
   favicon?: string;
   html?: string;
-  iframe?: boolean;
+  iframe?: boolean | string;
   image?: string;
   lazy?: boolean;
   providerName?: string;
@@ -24,6 +24,11 @@ interface EmbedProps {
   url: string;
 }
 
+const IFRAME_DERIVABLE_TYPES = new Set(['youtube', 'jsfiddle', 'pdf']);
+
+// HTML width/height attrs accept bare numbers (interpreted as px), but CSS does not, convert.
+const toCssSize = (v: string | undefined, fallback: string) => (v ? (/^\d+$/.test(v) ? `${v}px` : v) : fallback);
+
 const Embed = ({
   lazy = true,
   url,
@@ -34,9 +39,11 @@ const Embed = ({
   iframe,
   image,
   favicon,
+  typeOfEmbed,
   ...attrs
 }: EmbedProps) => {
-  if (typeof iframe !== 'boolean') iframe = iframe === 'true';
+  const explicitOptOut = iframe === false || iframe === 'false';
+  if (typeof iframe !== 'boolean') iframe = iframe === 'true' || typeOfEmbed === 'iframe';
 
   if (html) {
     try {
@@ -51,8 +58,21 @@ const Embed = ({
     }
   }
 
-  if (iframe) {
-    return <iframe {...attrs} src={url} style={{ border: 'none', display: 'flex', margin: 'auto' }} title={title} />;
+  const { height, width, ...spreadAttrs } = attrs as { height?: string; width?: string };
+  const iframeStyle = {
+    border: 'none',
+    display: 'flex',
+    margin: 'auto',
+    width: toCssSize(width, '100%'),
+    height: toCssSize(height, '480px'),
+  };
+
+  // Fall back to a direct iframe for URL-derivable embed types when html is missing.
+  const renderTypeAsIframe =
+    !html && !explicitOptOut && url && typeOfEmbed && IFRAME_DERIVABLE_TYPES.has(typeOfEmbed);
+
+  if (iframe || renderTypeAsIframe) {
+    return <iframe {...spreadAttrs} src={url} style={iframeStyle} title={title} />;
   }
 
   if (!providerUrl && url)

package/components/TailwindStyle/index.tsx

@@ -75,18 +75,31 @@ const TailwindStyle = ({ children, darkModeDataAttribute }: Props) => {
       records.forEach(record => {
         if (record.type === 'childList') {
           record.addedNodes.forEach(node => {
-            if (!(node instanceof HTMLElement) || !node.classList.contains(tailwindPrefix)) return;
-
-            traverse(node, addClasses);
-            shouldUpdate = true;
+            if (!(node instanceof HTMLElement)) return;
+
+            const sizeBefore = classesSet.current.size;
+
+            if (node.classList.contains(tailwindPrefix)) {
+              // traverse visits all descendants recursively, no need to querySelectorAll
+              traverse(node, addClasses);
+            } else {
+              // Node isn't a TailwindRoot itself — check descendants.
+              // React may insert a parent wrapper during navigation whose
+              // children contain TailwindRoot elements.
+              node.querySelectorAll(`.${tailwindPrefix}`).forEach(child => {
+                traverse(child, addClasses);
+              });
+            }
+
+            if (classesSet.current.size > sizeBefore) shouldUpdate = true;
           });
         } else if (record.type === 'attributes') {
           if (record.attributeName !== 'class' || !(record.target instanceof HTMLElement)) return;
 
+          const sizeBefore = classesSet.current.size;
           addClasses(record.target);
-          shouldUpdate = true;
+          if (classesSet.current.size > sizeBefore) shouldUpdate = true;
         }
-
       });
 
       if (shouldUpdate) {

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

@@ -2,7 +2,7 @@ import React from 'react';
 interface EmbedProps {
     favicon?: string;
     html?: string;
-    iframe?: boolean;
+    iframe?: boolean | string;
     image?: string;
     lazy?: boolean;
     providerName?: string;
@@ -11,5 +11,5 @@ interface EmbedProps {
     typeOfEmbed?: string;
     url: string;
 }
-declare const Embed: ({ lazy, url, html, providerName, providerUrl, title, iframe, image, favicon, ...attrs }: EmbedProps) => React.JSX.Element;
+declare const Embed: ({ lazy, url, html, providerName, providerUrl, title, iframe, image, favicon, typeOfEmbed, ...attrs }: EmbedProps) => React.JSX.Element;
 export default Embed;