support local embeds

packages/fern-docs/ui/src/mdx/components/html/embed.tsx

@@ -0,0 +1,33 @@
+import { ComponentProps } from "react";
+
+import { FC } from "react";
+
+import { DocsV1Read, FdrAPI } from "@fern-api/fdr-sdk";
+import { useAtomValue } from "jotai";
+import { useMemo } from "react";
+import { FILES_ATOM } from "../../../atoms/files";
+
+export const Embed: FC<ComponentProps<"embed">> = ({ src, ...rest }) => {
+  const files = useAtomValue(FILES_ATOM);
+
+  const fernEmbedSrc = useMemo((): DocsV1Read.File_ | undefined => {
+    if (src == null) {
+      return undefined;
+    }
+
+    // if src starts with `file:`, assume it's a referenced file; fallback to src if not found
+    if (src.startsWith("file:")) {
+      const fileId = FdrAPI.FileId(src.slice(5));
+      return files[fileId] ?? { type: "url", url: FdrAPI.Url(src) };
+    }
+
+    return { type: "url", url: FdrAPI.Url(src) };
+  }, [files, src]);
+
+  return (
+    <embed
+      src={fernEmbedSrc?.url ? fernEmbedSrc.url.toString() : undefined}
+      {...rest}
+    />
+  );
+};

packages/fern-docs/ui/src/mdx/components/html/index.tsx

@@ -82,4 +82,5 @@ export const A: FC<AnchorHTMLAttributes<HTMLAnchorElement>> = ({
   );
 };
 
+export { Embed } from "./embed";
 export { Image } from "./image";

packages/fern-docs/ui/src/mdx/components/index.tsx

@@ -31,7 +31,7 @@ import { CodeGroup } from "./code/CodeGroup";
 import { Column, ColumnGroup } from "./columns";
 import { Feature } from "./feature";
 import { Frame } from "./frame";
-import { A, HeadingRenderer, Image, Li, Ol, Strong, Ul } from "./html";
+import { A, Embed, HeadingRenderer, Image, Li, Ol, Strong, Ul } from "./html";
 import { Table } from "./html-table";
 import { If } from "./if";
 import { IFrame } from "./iframe";
@@ -117,11 +117,13 @@ const HTML_COMPONENTS: MDXComponents = {
   li: Li,
   a: A,
   img: Image,
+  embed: Embed,
   strong: Strong,
 };
 
 const ALIASED_HTML_COMPONENTS = {
   Image,
+  Embed,
   IFrame,
   H1: (props: ComponentProps<"h1">): ReactElement => HeadingRenderer(1, props),
   H2: (props: ComponentProps<"h2">): ReactElement => HeadingRenderer(2, props),

packages/fern-docs/ui/src/mdx/plugins/rehypeFernComponents.ts

@@ -37,6 +37,8 @@ export function rehypeFernComponents(): (tree: Root) => void {
         } else if (node.name === "table") {
           // DO NOT coerce <table> into <Table> (see: https://buildwithfern.slack.com/archives/C06QKJWD4VD/p1722602687550179)
           // node.name = "Table";
+        } else if (node.name === "embed") {
+          node.name = "Embed";
         }
       }
     });