@astrojs/markdoc 1.0.0-beta.0 → 1.0.0-beta.3

package/components/TreeNode.ts

@@ -1,20 +1,23 @@
-import type { AstroInstance } from 'astro';
-import type { RenderableTreeNode } from '@markdoc/markdoc';
+import type { RenderableTreeNodes } from '@markdoc/markdoc';
 import Markdoc from '@markdoc/markdoc';
+import type { AstroInstance, SSRResult } from 'astro';
+import type { HTMLString } from 'astro/runtime/server/index.js';
 import {
 	createComponent,
-	renderComponent,
+	createHeadAndContent,
+	isHTMLString,
 	render,
+	renderComponent,
 	renderScriptElement,
+	renderTemplate,
 	renderUniqueStylesheet,
-	createHeadAndContent,
 	unescapeHTML,
-	renderTemplate,
-	HTMLString,
-	isHTMLString,
 } from 'astro/runtime/server/index.js';
 
-export type TreeNode =
+type TreeNode =
+	// Markdoc `if` tag often returns an array of nodes in the AST, which gets translated
+	// here as an array of `TreeNode`s, which we'll render all without a wrapper.
+	| TreeNode[]
 	| {
 			type: 'text';
 			content: string | HTMLString;
@@ -35,81 +38,90 @@ export type TreeNode =
 			children: TreeNode[];
 	  };
 
-export const ComponentNode = createComponent({
-	factory(result: any, { treeNode }: { treeNode: TreeNode }) {
-		if (treeNode.type === 'text') return render`${treeNode.content}`;
-
-		const slots = {
-			default: () =>
-				render`${treeNode.children.map((child) =>
-					renderComponent(result, 'ComponentNode', ComponentNode, { treeNode: child })
-				)}`,
-		};
-		if (treeNode.type === 'component') {
-			let styles = '',
-				links = '',
-				scripts = '';
-			if (Array.isArray(treeNode.collectedStyles)) {
-				styles = treeNode.collectedStyles
-					.map((style: any) =>
-						renderUniqueStylesheet(result, {
-							type: 'inline',
-							content: style,
-						})
-					)
-					.join('');
-			}
-			if (Array.isArray(treeNode.collectedLinks)) {
-				links = treeNode.collectedLinks
-					.map((link: any) => {
-						return renderUniqueStylesheet(result, {
-							type: 'external',
-							src: link[0] === '/' ? link : '/' + link,
-						});
-					})
-					.join('');
-			}
-			if (Array.isArray(treeNode.collectedScripts)) {
-				scripts = treeNode.collectedScripts
-					.map((script: any) => renderScriptElement(script))
-					.join('');
-			}
-
-			const head = unescapeHTML(styles + links + scripts);
-
-			let headAndContent = createHeadAndContent(
-				head,
-				renderTemplate`${renderComponent(
-					result,
-					treeNode.component.name,
-					treeNode.component,
-					treeNode.props,
-					slots
-				)}`
-			);
-
-			// Let the runtime know that this component is being used.
-			// `result.propagators` has been moved to `result._metadata.propagators`
-			// TODO: remove this fallback in the next markdoc integration major
-			const propagators = result._metadata.propagators || result.propagators;
-			propagators.set(
-				{},
-				{
-					init() {
-						return headAndContent;
-					},
-				}
-			);
-
-			return headAndContent;
+function renderTreeNodeToFactoryResult(result: SSRResult, treeNode: TreeNode) {
+	if (Array.isArray(treeNode)) {
+		return Promise.all(
+			treeNode.map((node) =>
+				renderComponent(result, 'ComponentNode', ComponentNode, { treeNode: node }),
+			),
+		);
+	}
+
+	if (treeNode.type === 'text') return render`${treeNode.content}`;
+
+	const slots = {
+		default: () =>
+			render`${treeNode.children.map((child) =>
+				renderComponent(result, 'ComponentNode', ComponentNode, { treeNode: child }),
+			)}`,
+	};
+	if (treeNode.type === 'component') {
+		let styles = '',
+			links = '',
+			scripts = '';
+		if (Array.isArray(treeNode.collectedStyles)) {
+			styles = treeNode.collectedStyles
+				.map((style: any) =>
+					renderUniqueStylesheet(result, {
+						type: 'inline',
+						content: style,
+					}),
+				)
+				.join('');
+		}
+		if (Array.isArray(treeNode.collectedLinks)) {
+			links = treeNode.collectedLinks
+				.map((link: any) => {
+					return renderUniqueStylesheet(result, {
+						type: 'external',
+						src: link[0] === '/' ? link : '/' + link,
+					});
+				})
+				.join('');
+		}
+		if (Array.isArray(treeNode.collectedScripts)) {
+			scripts = treeNode.collectedScripts
+				.map((script: any) => renderScriptElement(script))
+				.join('');
 		}
-		return renderComponent(result, treeNode.tag, treeNode.tag, treeNode.attributes, slots);
+
+		const head = unescapeHTML(styles + links + scripts);
+
+		let headAndContent = createHeadAndContent(
+			head,
+			renderTemplate`${renderComponent(
+				result,
+				treeNode.component.name,
+				treeNode.component,
+				treeNode.props,
+				slots,
+			)}`,
+		);
+
+		// Let the runtime know that this component is being used.
+		// @ts-expect-error Astro only uses `init()` so specify it only (plus `_metadata` is internal)
+		result._metadata.propagators.add({
+			init() {
+				return headAndContent;
+			},
+		});
+
+		return headAndContent;
+	}
+	return renderComponent(result, treeNode.tag, treeNode.tag, treeNode.attributes, slots);
+}
+
+export const ComponentNode = createComponent({
+	factory(result: SSRResult, { treeNode }: { treeNode: TreeNode | TreeNode[] }) {
+		return renderTreeNodeToFactoryResult(result, treeNode);
 	},
 	propagation: 'self',
 });
 
-export async function createTreeNode(node: RenderableTreeNode): Promise<TreeNode> {
-	if (isHTMLString(node)) {
+export async function createTreeNode(node: RenderableTreeNodes): Promise<TreeNode> {
+	if (Array.isArray(node)) {
+		return Promise.all(node.map((child) => createTreeNode(child)));
+	} else if (isHTMLString(node)) {
 		return { type: 'text', content: node as HTMLString };
 	} else if (typeof node === 'string' || typeof node === 'number') {
 		return { type: 'text', content: String(node) };

package/dist/content-entry-type.js

@@ -1,13 +1,13 @@
-import Markdoc from "@markdoc/markdoc";
-import matter from "gray-matter";
 import fs from "node:fs";
 import path from "node:path";
-import { fileURLToPath } from "node:url";
-import { MarkdocError, isComponentConfig, isValidUrl, prependForwardSlash } from "./utils.js";
-import { emitESMImage } from "astro/assets/utils";
+import { fileURLToPath, pathToFileURL } from "node:url";
+import { parseFrontmatter } from "@astrojs/markdown-remark";
+import Markdoc from "@markdoc/markdoc";
+import { emitImageMetadata } from "astro/assets/utils/node";
 import { htmlTokenTransform } from "./html/transform/html-token-transform.js";
 import { setupConfig } from "./runtime.js";
 import { getMarkdocTokenizer } from "./tokenizer.js";
+import { isComponentConfig, isValidUrl, MarkdocError, prependForwardSlash } from "./utils.js";
 async function getContentEntryType({
   markdocConfigResult,
   astroConfig,
@@ -15,76 +15,82 @@ async function getContentEntryType({
 }) {
   return {
     extensions: [".mdoc"],
-    getEntryInfo,
+    getEntryInfo({ fileUrl, contents }) {
+      const parsed = safeParseFrontmatter(contents, fileURLToPath(fileUrl));
+      return {
+        data: parsed.frontmatter,
+        body: parsed.content.trim(),
+        slug: parsed.frontmatter.slug,
+        rawData: parsed.rawFrontmatter
+      };
+    },
     handlePropagation: true,
     async getRenderModule({ contents, fileUrl, viteId }) {
-      const entry = getEntryInfo({ contents, fileUrl });
+      const parsed = safeParseFrontmatter(contents, fileURLToPath(fileUrl));
       const tokenizer = getMarkdocTokenizer(options);
-      let tokens = tokenizer.tokenize(entry.body);
+      let tokens = tokenizer.tokenize(parsed.content);
       if (options?.allowHTML) {
         tokens = htmlTokenTransform(tokenizer, tokens);
       }
       const ast = Markdoc.parse(tokens);
-      const usedTags = getUsedTags(ast);
       const userMarkdocConfig = markdocConfigResult?.config ?? {};
       const markdocConfigUrl = markdocConfigResult?.fileUrl;
+      const pluginContext = this;
+      const markdocConfig = await setupConfig(userMarkdocConfig, options);
+      const filePath = fileURLToPath(fileUrl);
+      raiseValidationErrors({
+        ast,
+        /* Raised generics issue with Markdoc core https://github.com/markdoc/markdoc/discussions/400 */
+        markdocConfig,
+        viteId,
+        astroConfig,
+        filePath
+      });
+      await resolvePartials({
+        ast,
+        markdocConfig,
+        fileUrl,
+        allowHTML: options?.allowHTML,
+        tokenizer,
+        pluginContext,
+        root: astroConfig.root,
+        raisePartialValidationErrors: (partialAst, partialPath) => {
+          raiseValidationErrors({
+            ast: partialAst,
+            markdocConfig,
+            viteId,
+            astroConfig,
+            filePath: partialPath
+          });
+        }
+      });
+      const usedTags = getUsedTags(ast);
       let componentConfigByTagMap = {};
       for (const tag of usedTags) {
-        const render = userMarkdocConfig.tags?.[tag]?.render;
+        const render = markdocConfig.tags?.[tag]?.render;
         if (isComponentConfig(render)) {
           componentConfigByTagMap[tag] = render;
         }
       }
       let componentConfigByNodeMap = {};
-      for (const [nodeType, schema] of Object.entries(userMarkdocConfig.nodes ?? {})) {
+      for (const [nodeType, schema] of Object.entries(markdocConfig.nodes ?? {})) {
         const render = schema?.render;
         if (isComponentConfig(render)) {
           componentConfigByNodeMap[nodeType] = render;
         }
       }
-      const pluginContext = this;
-      const markdocConfig = await setupConfig(userMarkdocConfig, options);
-      const filePath = fileURLToPath(fileUrl);
-      const validationErrors = Markdoc.validate(
-        ast,
-        /* Raised generics issue with Markdoc core https://github.com/markdoc/markdoc/discussions/400 */
-        markdocConfig
-      ).filter((e) => {
-        return (
-          // Ignore `variable-undefined` errors.
-          // Variables can be configured at runtime,
-          // so we cannot validate them at build time.
-          e.error.id !== "variable-undefined" && (e.error.level === "error" || e.error.level === "critical")
-        );
+      await emitOptimizedImages(ast.children, {
+        hasDefaultImage: Boolean(markdocConfig.nodes.image),
+        astroConfig,
+        pluginContext,
+        filePath
       });
-      if (validationErrors.length) {
-        const frontmatterBlockOffset = entry.rawData.split("\n").length + 2;
-        const rootRelativePath = path.relative(fileURLToPath(astroConfig.root), filePath);
-        throw new MarkdocError({
-          message: [
-            `**${String(rootRelativePath)}** contains invalid content:`,
-            ...validationErrors.map((e) => `- ${e.error.message}`)
-          ].join("\n"),
-          location: {
-            // Error overlay does not support multi-line or ranges.
-            // Just point to the first line.
-            line: frontmatterBlockOffset + validationErrors[0].lines[0],
-            file: viteId
-          }
-        });
-      }
-      if (astroConfig.experimental.assets) {
-        await emitOptimizedImages(ast.children, {
-          astroConfig,
-          pluginContext,
-          filePath
-        });
-      }
       const res = `import { Renderer } from '@astrojs/markdoc/components';
 import { createGetHeadings, createContentComponent } from '@astrojs/markdoc/runtime';
-${markdocConfigUrl ? `import markdocConfig from ${JSON.stringify(markdocConfigUrl.pathname)};` : "const markdocConfig = {};"}${astroConfig.experimental.assets ? `
-import { experimentalAssetsConfig } from '@astrojs/markdoc/experimental-assets-config';
-markdocConfig.nodes = { ...experimentalAssetsConfig.nodes, ...markdocConfig.nodes };` : ""}
+${markdocConfigUrl ? `import markdocConfig from ${JSON.stringify(fileURLToPath(markdocConfigUrl))};` : "const markdocConfig = {};"}
+
+import { assetsConfig } from '@astrojs/markdoc/runtime-assets-config';
+markdocConfig.nodes = { ...assetsConfig.nodes, ...markdocConfig.nodes };
 
 ${getStringifiedImports(componentConfigByTagMap, "Tag", astroConfig.root)}
 ${getStringifiedImports(componentConfigByNodeMap, "Node", astroConfig.root)}
@@ -104,7 +110,7 @@ export const Content = createContentComponent(
 	Renderer,
 	stringifiedAst,
 	markdocConfig,
-  options,
+	options,
 	tagComponentMap,
 	nodeComponentMap,
 )`;
@@ -116,43 +122,139 @@ export const Content = createContentComponent(
     )
   };
 }
+async function resolvePartials({
+  ast,
+  fileUrl,
+  root,
+  tokenizer,
+  allowHTML,
+  markdocConfig,
+  pluginContext,
+  raisePartialValidationErrors
+}) {
+  const relativePartialPath = path.relative(fileURLToPath(root), fileURLToPath(fileUrl));
+  for (const node of ast.walk()) {
+    if (node.type === "tag" && node.tag === "partial") {
+      const { file } = node.attributes;
+      if (!file) {
+        throw new MarkdocError({
+          // Should be caught by Markdoc validation step.
+          message: `(Uncaught error) Partial tag requires a 'file' attribute`
+        });
+      }
+      if (markdocConfig.partials?.[file]) continue;
+      let partialPath;
+      let partialContents;
+      try {
+        const resolved = await pluginContext.resolve(file, fileURLToPath(fileUrl));
+        let partialId = resolved?.id;
+        if (!partialId) {
+          const attemptResolveAsRelative = await pluginContext.resolve(
+            "./" + file,
+            fileURLToPath(fileUrl)
+          );
+          if (!attemptResolveAsRelative?.id) throw new Error();
+          partialId = attemptResolveAsRelative.id;
+        }
+        partialPath = fileURLToPath(new URL(prependForwardSlash(partialId), "file://"));
+        partialContents = await fs.promises.readFile(partialPath, "utf-8");
+      } catch {
+        throw new MarkdocError({
+          message: [
+            `**${String(relativePartialPath)}** contains invalid content:`,
+            `Could not read partial file \`${file}\`. Does the file exist?`
+          ].join("\n")
+        });
+      }
+      if (pluginContext.meta.watchMode) pluginContext.addWatchFile(partialPath);
+      let partialTokens = tokenizer.tokenize(partialContents);
+      if (allowHTML) {
+        partialTokens = htmlTokenTransform(tokenizer, partialTokens);
+      }
+      const partialAst = Markdoc.parse(partialTokens);
+      raisePartialValidationErrors(partialAst, partialPath);
+      await resolvePartials({
+        ast: partialAst,
+        root,
+        fileUrl: pathToFileURL(partialPath),
+        tokenizer,
+        allowHTML,
+        markdocConfig,
+        pluginContext,
+        raisePartialValidationErrors
+      });
+      Object.assign(node, partialAst);
+    }
+  }
+}
+function raiseValidationErrors({
+  ast,
+  markdocConfig,
+  viteId,
+  astroConfig,
+  filePath
+}) {
+  const validationErrors = Markdoc.validate(ast, markdocConfig).filter((e) => {
+    return (e.error.level === "error" || e.error.level === "critical") && // Ignore `variable-undefined` errors.
+    // Variables can be configured at runtime,
+    // so we cannot validate them at build time.
+    e.error.id !== "variable-undefined" && // Ignore missing partial errors.
+    // We will resolve these in `resolvePartials`.
+    !(e.error.id === "attribute-value-invalid" && /^Partial .+ not found/.test(e.error.message));
+  });
+  if (validationErrors.length) {
+    const rootRelativePath = path.relative(fileURLToPath(astroConfig.root), filePath);
+    throw new MarkdocError({
+      message: [
+        `**${String(rootRelativePath)}** contains invalid content:`,
+        ...validationErrors.map((e) => `- ${e.error.message}`)
+      ].join("\n"),
+      location: {
+        // Error overlay does not support multi-line or ranges.
+        // Just point to the first line.
+        line: validationErrors[0].lines[0],
+        file: viteId
+      }
+    });
+  }
+}
 function getUsedTags(markdocAst) {
   const tags = /* @__PURE__ */ new Set();
   const validationErrors = Markdoc.validate(markdocAst);
   for (const { error } of validationErrors) {
     if (error.id === "tag-undefined") {
-      const [, tagName] = error.message.match(/Undefined tag: '(.*)'/) ?? [];
+      const [, tagName] = /Undefined tag: '(.*)'/.exec(error.message) ?? [];
       tags.add(tagName);
     }
   }
   return tags;
 }
-function getEntryInfo({ fileUrl, contents }) {
-  const parsed = parseFrontmatter(contents, fileURLToPath(fileUrl));
-  return {
-    data: parsed.data,
-    body: parsed.content,
-    slug: parsed.data.slug,
-    rawData: parsed.matter
-  };
-}
 async function emitOptimizedImages(nodeChildren, ctx) {
   for (const node of nodeChildren) {
-    if (node.type === "image" && typeof node.attributes.src === "string" && shouldOptimizeImage(node.attributes.src)) {
-      const resolved = await ctx.pluginContext.resolve(node.attributes.src, ctx.filePath);
-      if (resolved?.id && fs.existsSync(new URL(prependForwardSlash(resolved.id), "file://"))) {
-        const src = await emitESMImage(
-          resolved.id,
-          ctx.pluginContext.meta.watchMode,
-          ctx.pluginContext.emitFile
-        );
-        node.attributes.__optimizedSrc = src;
-      } else {
-        throw new MarkdocError({
-          message: `Could not resolve image ${JSON.stringify(
-            node.attributes.src
-          )} from ${JSON.stringify(ctx.filePath)}. Does the file exist?`
-        });
+    let isComponent = node.type === "tag" && node.tag === "image" || node.type === "image" && ctx.hasDefaultImage;
+    if ((node.type === "image" || isComponent) && typeof node.attributes.src === "string") {
+      let attributeName = isComponent ? "src" : "__optimizedSrc";
+      if (shouldOptimizeImage(node.attributes.src)) {
+        const resolved = await ctx.pluginContext.resolve(node.attributes.src, ctx.filePath);
+        if (resolved?.id && fs.existsSync(new URL(prependForwardSlash(resolved.id), "file://"))) {
+          const src = await emitImageMetadata(resolved.id, ctx.pluginContext.emitFile);
+          const fsPath = resolved.id;
+          if (src) {
+            if (ctx.astroConfig.output === "static") {
+              if (globalThis.astroAsset.referencedImages)
+                globalThis.astroAsset.referencedImages.add(fsPath);
+            }
+            node.attributes[attributeName] = { ...src, fsPath };
+          }
+        } else {
+          throw new MarkdocError({
+            message: `Could not resolve image ${JSON.stringify(
+              node.attributes.src
+            )} from ${JSON.stringify(ctx.filePath)}. Does the file exist?`
+          });
+        }
+      } else if (isComponent) {
+        node.attributes[attributeName] = node.attributes.src;
       }
     }
     await emitOptimizedImages(node.children, ctx);
@@ -165,7 +267,7 @@ function getStringifiedImports(componentConfigMap, componentNamePrefix, root) {
   let stringifiedComponentImports = "";
   for (const [key, config] of Object.entries(componentConfigMap)) {
     const importName = config.namedExport ? `{ ${config.namedExport} as ${componentNamePrefix + toImportName(key)} }` : componentNamePrefix + toImportName(key);
-    const resolvedPath = config.type === "local" ? new URL(config.path, root).pathname : config.path;
+    const resolvedPath = config.type === "local" ? fileURLToPath(new URL(config.path, root)) : config.path;
     stringifiedComponentImports += `import ${importName} from ${JSON.stringify(resolvedPath)};
 `;
   }
@@ -183,10 +285,9 @@ function getStringifiedMap(componentConfigMap, componentNamePrefix) {
   stringifiedComponentMap += "}";
   return stringifiedComponentMap;
 }
-function parseFrontmatter(fileContents, filePath) {
+function safeParseFrontmatter(fileContents, filePath) {
   try {
-    matter.clearCache();
-    return matter(fileContents);
+    return parseFrontmatter(fileContents, { frontmatter: "empty-with-lines" });
   } catch (e) {
     if (e.name === "YAMLException") {
       const err = e;

package/dist/extensions/shiki.d.ts

@@ -1,3 +1,3 @@
 import type { ShikiConfig } from 'astro';
 import type { AstroMarkdocConfig } from '../config.js';
-export default function shiki({ langs, theme, wrap, }?: ShikiConfig): Promise<AstroMarkdocConfig>;
+export default function shiki(config?: ShikiConfig): Promise<AstroMarkdocConfig>;

package/dist/extensions/shiki.js

@@ -1,94 +1,23 @@
+import { createShikiHighlighter } from "@astrojs/markdown-remark";
 import Markdoc from "@markdoc/markdoc";
 import { unescapeHTML } from "astro/runtime/server/index.js";
-import { getHighlighter } from "shiki";
-const compatThemes = {
-  "material-darker": "material-theme-darker",
-  "material-default": "material-theme",
-  "material-lighter": "material-theme-lighter",
-  "material-ocean": "material-theme-ocean",
-  "material-palenight": "material-theme-palenight"
-};
-const normalizeTheme = (theme) => {
-  if (typeof theme === "string") {
-    return compatThemes[theme] || theme;
-  } else if (compatThemes[theme.name]) {
-    return { ...theme, name: compatThemes[theme.name] };
-  } else {
-    return theme;
-  }
-};
-const ASTRO_COLOR_REPLACEMENTS = {
-  "#000001": "var(--astro-code-color-text)",
-  "#000002": "var(--astro-code-color-background)",
-  "#000004": "var(--astro-code-token-constant)",
-  "#000005": "var(--astro-code-token-string)",
-  "#000006": "var(--astro-code-token-comment)",
-  "#000007": "var(--astro-code-token-keyword)",
-  "#000008": "var(--astro-code-token-parameter)",
-  "#000009": "var(--astro-code-token-function)",
-  "#000010": "var(--astro-code-token-string-expression)",
-  "#000011": "var(--astro-code-token-punctuation)",
-  "#000012": "var(--astro-code-token-link)"
-};
-const PRE_SELECTOR = /<pre class="(.*?)shiki(.*?)"/;
-const LINE_SELECTOR = /<span class="line"><span style="(.*?)">([\+|\-])/g;
-const INLINE_STYLE_SELECTOR = /style="(.*?)"/;
-const highlighterCache = /* @__PURE__ */ new Map();
-async function shiki({
-  langs = [],
-  theme = "github-dark",
-  wrap = false
-} = {}) {
-  theme = normalizeTheme(theme);
-  const cacheID = typeof theme === "string" ? theme : theme.name;
-  if (!highlighterCache.has(cacheID)) {
-    highlighterCache.set(
-      cacheID,
-      await getHighlighter({ theme }).then((hl) => {
-        hl.setColorReplacements(ASTRO_COLOR_REPLACEMENTS);
-        return hl;
-      })
-    );
-  }
-  const highlighter = highlighterCache.get(cacheID);
-  for (const lang of langs) {
-    await highlighter.loadLanguage(lang);
-  }
+async function shiki(config) {
+  const highlighter = await createShikiHighlighter({
+    langs: config?.langs,
+    theme: config?.theme,
+    themes: config?.themes
+  });
   return {
     nodes: {
       fence: {
         attributes: Markdoc.nodes.fence.attributes,
-        transform({ attributes }) {
-          let lang;
-          if (typeof attributes.language === "string") {
-            const langExists = highlighter.getLoadedLanguages().includes(attributes.language);
-            if (langExists) {
-              lang = attributes.language;
-            } else {
-              console.warn(
-                `[Shiki highlighter] The language "${attributes.language}" doesn't exist, falling back to plaintext.`
-              );
-              lang = "plaintext";
-            }
-          } else {
-            lang = "plaintext";
-          }
-          let html = highlighter.codeToHtml(attributes.content, { lang });
-          html = html.replace(PRE_SELECTOR, `<pre class="$1astro-code$2"`);
-          if (attributes.language === "diff") {
-            html = html.replace(
-              LINE_SELECTOR,
-              '<span class="line"><span style="$1"><span style="user-select: none;">$2</span>'
-            );
-          }
-          if (wrap === false) {
-            html = html.replace(INLINE_STYLE_SELECTOR, 'style="$1; overflow-x: auto;"');
-          } else if (wrap === true) {
-            html = html.replace(
-              INLINE_STYLE_SELECTOR,
-              'style="$1; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;"'
-            );
-          }
+        async transform({ attributes }) {
+          const lang = typeof attributes.language === "string" ? attributes.language : "plaintext";
+          const html = await highlighter.codeToHtml(attributes.content, lang, {
+            wrap: config?.wrap,
+            defaultColor: config?.defaultColor,
+            transformers: config?.transformers
+          });
           return unescapeHTML(html);
         }
       }

package/dist/heading-ids.d.ts

@@ -1,10 +1,10 @@
 import { type Config as MarkdocConfig, type Schema } from '@markdoc/markdoc';
 import Slugger from 'github-slugger';
-type HeadingIdConfig = MarkdocConfig & {
+interface HeadingIdConfig extends MarkdocConfig {
     ctx: {
         headingSlugger: Slugger;
     };
-};
+}
 export declare const heading: Schema;
 export declare function setupHeadingConfig(): HeadingIdConfig;
 export {};

package/dist/heading-ids.js

@@ -8,10 +8,7 @@ function getSlug(attributes, children, headingSlugger) {
     return attributes.id;
   }
   const textContent = attributes.content ?? getTextContent(children);
-  let slug = headingSlugger.slug(textContent);
-  if (slug.endsWith("-"))
-    slug = slug.slice(0, -1);
-  return slug;
+  return headingSlugger.slug(textContent);
 }
 const heading = {
   children: ["inline"],