@astrojs/markdoc 0.4.3 → 0.5.0-rc.1

package/README.md

@@ -93,7 +93,7 @@ const { Content } = await entry.render();
 
 📚 See the [Astro Content Collection docs][astro-content-collections] for more information.
 
-## Configuration
+## Markdoc config
 
 `@astrojs/markdoc` offers configuration options to use all of Markdoc's features and connect UI components to your content.
 
@@ -278,7 +278,7 @@ export default defineMarkdocConfig({
 
 ### Use client-side UI components
 
-Tags and nodes are restricted to `.astro` files. To embed client-side UI components in Markdoc, [use a wrapper `.astro` component that renders a framework component](/en/core-concepts/framework-components/#nesting-framework-components) with your desired `client:` directive.
+Tags and nodes are restricted to `.astro` files. To embed client-side UI components in Markdoc, [use a wrapper `.astro` component that renders a framework component](https://docs.astro.build/en/core-concepts/framework-components/#nesting-framework-components) with your desired `client:` directive.
 
 This example wraps a React `Aside.tsx` component with a `ClientAside.astro` component:
 
@@ -401,6 +401,32 @@ const { Content } = await entry.render();
 
 This can now be accessed as `$frontmatter` in your Markdoc.
 
+## Integration config options
+
+The Astro Markdoc integration handles configuring Markdoc options and capabilities that are not available through the `markdoc.config.js` file.
+
+### `allowHTML`
+
+Enables writing HTML markup alongside Markdoc tags and nodes.
+
+By default, Markdoc will not recognize HTML markup as semantic content.
+
+To achieve a more Markdown-like experience, where HTML elements can be included alongside your content, set `allowHTML:true` as a `markdoc` integration option. This will enable HTML parsing in Markdoc markup.
+
+```js {7} "allowHTML: true"
+// astro.config.mjs
+import { defineConfig } from 'astro/config';
+import markdoc from '@astrojs/markdoc';
+
+export default defineConfig({
+  // ...
+  integrations: [markdoc({ allowHTML: true })],
+});
+```
+
+> **Warning**
+> When `allowHTML` is enabled, HTML markup inside Markdoc documents will be rendered as actual HTML elements (including `<script>`), making attack vectors like XSS possible. Ensure that any HTML markup comes from trusted sources.
+
 ## Examples
 
 - The [Astro Markdoc starter template](https://github.com/withastro/astro/tree/latest/examples/with-markdoc) shows how to use Markdoc files in your Astro project.

package/dist/content-entry-type.d.ts

@@ -1,6 +1,8 @@
 import type { AstroConfig, ContentEntryType } from 'astro';
 import type { MarkdocConfigResult } from './load-config.js';
-export declare function getContentEntryType({ markdocConfigResult, astroConfig, }: {
+import type { MarkdocIntegrationOptions } from './options.js';
+export declare function getContentEntryType({ markdocConfigResult, astroConfig, options, }: {
     astroConfig: AstroConfig;
     markdocConfigResult?: MarkdocConfigResult;
+    options?: MarkdocIntegrationOptions;
 }): Promise<ContentEntryType>;

package/dist/content-entry-type.js

@@ -1,43 +1,49 @@
 import Markdoc from "@markdoc/markdoc";
+import { emitESMImage } from "astro/assets/utils";
 import matter from "gray-matter";
 import fs from "node:fs";
-import { fileURLToPath } from "node:url";
-import { isComponentConfig, isValidUrl, MarkdocError, prependForwardSlash } from "./utils.js";
-import { emitESMImage } from "astro/assets/utils";
 import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { htmlTokenTransform } from "./html/transform/html-token-transform.js";
 import { setupConfig } from "./runtime.js";
+import { getMarkdocTokenizer } from "./tokenizer.js";
+import { MarkdocError, isComponentConfig, isValidUrl, prependForwardSlash } from "./utils.js";
 async function getContentEntryType({
   markdocConfigResult,
-  astroConfig
+  astroConfig,
+  options
 }) {
   return {
     extensions: [".mdoc"],
     getEntryInfo,
     handlePropagation: true,
     async getRenderModule({ contents, fileUrl, viteId }) {
-      var _a, _b;
       const entry = getEntryInfo({ contents, fileUrl });
-      const tokens = markdocTokenizer.tokenize(entry.body);
+      const tokenizer = getMarkdocTokenizer(options);
+      let tokens = tokenizer.tokenize(entry.body);
+      if (options?.allowHTML) {
+        tokens = htmlTokenTransform(tokenizer, tokens);
+      }
       const ast = Markdoc.parse(tokens);
       const usedTags = getUsedTags(ast);
-      const userMarkdocConfig = (markdocConfigResult == null ? void 0 : markdocConfigResult.config) ?? {};
-      const markdocConfigUrl = markdocConfigResult == null ? void 0 : markdocConfigResult.fileUrl;
+      const userMarkdocConfig = markdocConfigResult?.config ?? {};
+      const markdocConfigUrl = markdocConfigResult?.fileUrl;
       let componentConfigByTagMap = {};
       for (const tag of usedTags) {
-        const render = (_b = (_a = userMarkdocConfig.tags) == null ? void 0 : _a[tag]) == null ? void 0 : _b.render;
+        const render = userMarkdocConfig.tags?.[tag]?.render;
         if (isComponentConfig(render)) {
           componentConfigByTagMap[tag] = render;
         }
       }
       let componentConfigByNodeMap = {};
       for (const [nodeType, schema] of Object.entries(userMarkdocConfig.nodes ?? {})) {
-        const render = schema == null ? void 0 : schema.render;
+        const render = schema?.render;
         if (isComponentConfig(render)) {
           componentConfigByNodeMap[nodeType] = render;
         }
       }
       const pluginContext = this;
-      const markdocConfig = await setupConfig(userMarkdocConfig);
+      const markdocConfig = await setupConfig(userMarkdocConfig, options);
       const filePath = fileURLToPath(fileUrl);
       const validationErrors = Markdoc.validate(
         ast,
@@ -67,18 +73,17 @@ async function getContentEntryType({
           }
         });
       }
-      if (astroConfig.experimental.assets) {
-        await emitOptimizedImages(ast.children, {
-          astroConfig,
-          pluginContext,
-          filePath
-        });
-      }
+      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(markdocConfigUrl.pathname)};` : "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)}
@@ -86,16 +91,19 @@ ${getStringifiedImports(componentConfigByNodeMap, "Node", astroConfig.root)}
 const tagComponentMap = ${getStringifiedMap(componentConfigByTagMap, "Tag")};
 const nodeComponentMap = ${getStringifiedMap(componentConfigByNodeMap, "Node")};
 
+const options = ${JSON.stringify(options)};
+
 const stringifiedAst = ${JSON.stringify(
         /* Double stringify to encode *as* stringified JSON */
         JSON.stringify(ast)
       )};
 
-export const getHeadings = createGetHeadings(stringifiedAst, markdocConfig);
+export const getHeadings = createGetHeadings(stringifiedAst, markdocConfig, options);
 export const Content = createContentComponent(
 	Renderer,
 	stringifiedAst,
 	markdocConfig,
+  options,
 	tagComponentMap,
 	nodeComponentMap,
 )`;
@@ -107,11 +115,6 @@ export const Content = createContentComponent(
     )
   };
 }
-const markdocTokenizer = new Markdoc.Tokenizer({
-  // Strip <!-- comments --> from rendered output
-  // Without this, they're rendered as strings!
-  allowComments: true
-});
 function getUsedTags(markdocAst) {
   const tags = /* @__PURE__ */ new Set();
   const validationErrors = Markdoc.validate(markdocAst);
@@ -136,12 +139,11 @@ 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 == null ? void 0 : resolved.id) && fs.existsSync(new URL(prependForwardSlash(resolved.id), "file://"))) {
+      if (resolved?.id && fs.existsSync(new URL(prependForwardSlash(resolved.id), "file://"))) {
         const src = await emitESMImage(
           resolved.id,
           ctx.pluginContext.meta.watchMode,
-          ctx.pluginContext.emitFile,
-          { config: ctx.astroConfig }
+          ctx.pluginContext.emitFile
         );
         node.attributes.__optimizedSrc = src;
       } else {

package/dist/extensions/prism.js

@@ -1,5 +1,5 @@
-import { unescapeHTML } from "astro/runtime/server/index.js";
 import { runHighlighterWithAstro } from "@astrojs/prism/dist/highlighter";
+import { unescapeHTML } from "astro/runtime/server/index.js";
 import { Markdoc } from "../config.js";
 function prism() {
   return {

package/dist/extensions/shiki.js

@@ -1,22 +1,6 @@
-import { unescapeHTML } from "astro/runtime/server/index.js";
 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)",
@@ -39,7 +23,6 @@ async function shiki({
   theme = "github-dark",
   wrap = false
 } = {}) {
-  theme = normalizeTheme(theme);
   const cacheID = typeof theme === "string" ? theme : theme.name;
   if (!highlighterCache.has(cacheID)) {
     highlighterCache.set(

package/dist/heading-ids.js

@@ -1,4 +1,5 @@
-import Markdoc from "@markdoc/markdoc";
+import Markdoc, {
+} from "@markdoc/markdoc";
 import Slugger from "github-slugger";
 import { getTextContent } from "./runtime.js";
 import { MarkdocError } from "./utils.js";
@@ -19,16 +20,15 @@ const heading = {
     level: { type: Number, required: true, default: 1 }
   },
   transform(node, config) {
-    var _a, _b, _c;
     const { level, ...attributes } = node.transformAttributes(config);
     const children = node.transformChildren(config);
-    if (!((_a = config.ctx) == null ? void 0 : _a.headingSlugger)) {
+    if (!config.ctx?.headingSlugger) {
       throw new MarkdocError({
         message: "Unexpected problem adding heading IDs to Markdoc file. Did you modify the `ctx.headingSlugger` property in your Markdoc config?"
       });
     }
     const slug = getSlug(attributes, children, config.ctx.headingSlugger);
-    const render = ((_c = (_b = config.nodes) == null ? void 0 : _b.heading) == null ? void 0 : _c.render) ?? `h${level}`;
+    const render = config.nodes?.heading?.render ?? `h${level}`;
     const tagProps = (
       // For components, pass down `level` as a prop,
       // alongside `__collectHeading` for our `headings` collector.

package/dist/html/css/parse-inline-css-to-react.d.ts

@@ -0,0 +1 @@
+export declare function parseInlineCSSToReactLikeObject(css: string | undefined | null): React.CSSProperties | undefined;

package/dist/html/css/parse-inline-css-to-react.js

@@ -0,0 +1,21 @@
+import { styleToObject } from "./style-to-object.js";
+function parseInlineCSSToReactLikeObject(css) {
+  if (typeof css === "string") {
+    const cssObject = {};
+    styleToObject(css, (originalCssDirective, value) => {
+      const reactCssDirective = convertCssDirectiveNameToReactCamelCase(originalCssDirective);
+      cssObject[reactCssDirective] = value;
+    });
+    return cssObject;
+  }
+  return void 0;
+}
+function convertCssDirectiveNameToReactCamelCase(original) {
+  const replaced = original.replace(/-([a-z0-9])/gi, (_match, char) => {
+    return char.toUpperCase();
+  });
+  return replaced;
+}
+export {
+  parseInlineCSSToReactLikeObject
+};

package/dist/html/css/parse-inline-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @param {String} style
+ * @param {Object} [options]
+ * @return {Object[]}
+ * @throws {TypeError}
+ * @throws {Error}
+ */
+export declare function parseInlineStyles(style: any, options: any): any[];

package/dist/html/css/parse-inline-styles.js

@@ -0,0 +1,153 @@
+/**
+ * @license MIT
+ *
+ * (The MIT License)
+ *
+ * Copyright (c) 2012 TJ Holowaychuk <tj@vision-media.ca>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+const COMMENT_REGEX = /\/\*[^*]*\*+([^/*][^*]*\*+)*\//g;
+const NEWLINE_REGEX = /\n/g;
+const WHITESPACE_REGEX = /^\s*/;
+const PROPERTY_REGEX = /^(\*?[-#/*\\\w]+(\[[0-9a-z_-]+\])?)\s*/;
+const COLON_REGEX = /^:\s*/;
+const VALUE_REGEX = /^((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^)]*?\)|[^};])+)/;
+const SEMICOLON_REGEX = /^[;\s]*/;
+const TRIM_REGEX = /^\s+|\s+$/g;
+const NEWLINE = "\n";
+const FORWARD_SLASH = "/";
+const ASTERISK = "*";
+const EMPTY_STRING = "";
+const TYPE_COMMENT = "comment";
+const TYPE_DECLARATION = "declaration";
+function parseInlineStyles(style, options) {
+  if (typeof style !== "string") {
+    throw new TypeError("First argument must be a string");
+  }
+  if (!style)
+    return [];
+  options = options || {};
+  let lineno = 1;
+  let column = 1;
+  function updatePosition(str) {
+    let lines = str.match(NEWLINE_REGEX);
+    if (lines)
+      lineno += lines.length;
+    let i = str.lastIndexOf(NEWLINE);
+    column = ~i ? str.length - i : column + str.length;
+  }
+  function position() {
+    let start = { line: lineno, column };
+    return function(node) {
+      node.position = new Position(start);
+      whitespace();
+      return node;
+    };
+  }
+  function Position(start) {
+    this.start = start;
+    this.end = { line: lineno, column };
+    this.source = options.source;
+  }
+  Position.prototype.content = style;
+  const errorsList = [];
+  function error(msg) {
+    const err = new Error(options.source + ":" + lineno + ":" + column + ": " + msg);
+    err.reason = msg;
+    err.filename = options.source;
+    err.line = lineno;
+    err.column = column;
+    err.source = style;
+    if (options.silent) {
+      errorsList.push(err);
+    } else {
+      throw err;
+    }
+  }
+  function match(re) {
+    const m = re.exec(style);
+    if (!m)
+      return;
+    const str = m[0];
+    updatePosition(str);
+    style = style.slice(str.length);
+    return m;
+  }
+  function whitespace() {
+    match(WHITESPACE_REGEX);
+  }
+  function comments(rules) {
+    let c;
+    rules = rules || [];
+    while (c = comment()) {
+      if (c !== false) {
+        rules.push(c);
+      }
+    }
+    return rules;
+  }
+  function comment() {
+    const pos = position();
+    if (FORWARD_SLASH != style.charAt(0) || ASTERISK != style.charAt(1))
+      return;
+    let i = 2;
+    while (EMPTY_STRING != style.charAt(i) && (ASTERISK != style.charAt(i) || FORWARD_SLASH != style.charAt(i + 1))) {
+      ++i;
+    }
+    i += 2;
+    if (EMPTY_STRING === style.charAt(i - 1)) {
+      return error("End of comment missing");
+    }
+    const str = style.slice(2, i - 2);
+    column += 2;
+    updatePosition(str);
+    style = style.slice(i);
+    column += 2;
+    return pos({
+      type: TYPE_COMMENT,
+      comment: str
+    });
+  }
+  function declaration() {
+    const pos = position();
+    const prop = match(PROPERTY_REGEX);
+    if (!prop)
+      return;
+    comment();
+    if (!match(COLON_REGEX))
+      return error("property missing ':'");
+    const val = match(VALUE_REGEX);
+    const ret = pos({
+      type: TYPE_DECLARATION,
+      property: trim(prop[0].replace(COMMENT_REGEX, EMPTY_STRING)),
+      value: val ? trim(val[0].replace(COMMENT_REGEX, EMPTY_STRING)) : EMPTY_STRING
+    });
+    match(SEMICOLON_REGEX);
+    return ret;
+  }
+  function declarations() {
+    const decls = [];
+    comments(decls);
+    let decl;
+    while (decl = declaration()) {
+      if (decl !== false) {
+        decls.push(decl);
+        comments(decls);
+      }
+    }
+    return decls;
+  }
+  whitespace();
+  return declarations();
+}
+function trim(str) {
+  return str ? str.replace(TRIM_REGEX, EMPTY_STRING) : EMPTY_STRING;
+}
+export {
+  parseInlineStyles
+};

package/dist/html/css/style-to-object.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Parses inline style to object.
+ *
+ * @example
+ * // returns { 'line-height': '42' }
+ * styleToObject('line-height: 42;');
+ *
+ * @param  {String}      style      - The inline style.
+ * @param  {Function}    [iterator] - The iterator function.
+ * @return {null|Object}
+ */
+export declare function styleToObject(style: any, iterator: any): {} | null;

package/dist/html/css/style-to-object.js

@@ -0,0 +1,53 @@
+/**
+ * @license MIT
+ *
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2017 Menglin "Mark" Xu <mark@remarkablemark.org>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining
+ * a copy of this software and associated documentation files (the
+ * "Software"), to deal in the Software without restriction, including
+ * without limitation the rights to use, copy, modify, merge, publish,
+ * distribute, sublicense, and/or sell copies of the Software, and to
+ * permit persons to whom the Software is furnished to do so, subject to
+ * the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+ * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+ * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+ * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+import { parseInlineStyles } from "./parse-inline-styles.js";
+function styleToObject(style, iterator) {
+  let output = null;
+  if (!style || typeof style !== "string") {
+    return output;
+  }
+  let declaration;
+  let declarations = parseInlineStyles(style);
+  let hasIterator = typeof iterator === "function";
+  let property;
+  let value;
+  for (let i = 0, len = declarations.length; i < len; i++) {
+    declaration = declarations[i];
+    property = declaration.property;
+    value = declaration.value;
+    if (hasIterator) {
+      iterator(property, value, declaration);
+    } else if (value) {
+      output || (output = {});
+      output[property] = value;
+    }
+  }
+  return output;
+}
+export {
+  styleToObject
+};

package/dist/html/index.d.ts

@@ -0,0 +1,2 @@
+export { htmlTag } from './tagdefs/html.tag';
+export { htmlTokenTransform } from './transform/html-token-transform';

package/dist/html/index.js

@@ -0,0 +1,6 @@
+import { htmlTag } from "./tagdefs/html.tag";
+import { htmlTokenTransform } from "./transform/html-token-transform";
+export {
+  htmlTag,
+  htmlTokenTransform
+};

package/dist/html/tagdefs/html.tag.d.ts

@@ -0,0 +1,2 @@
+import type { Config, Schema } from '@markdoc/markdoc';
+export declare const htmlTag: Schema<Config, never>;

package/dist/html/tagdefs/html.tag.js

@@ -0,0 +1,21 @@
+import Markdoc from "@markdoc/markdoc";
+import { parseInlineCSSToReactLikeObject } from "../css/parse-inline-css-to-react.js";
+const htmlTag = {
+  attributes: {
+    name: { type: String, required: true },
+    attrs: { type: Object }
+  },
+  transform(node, config) {
+    const { name, attrs: unsafeAttributes } = node.attributes;
+    const children = node.transformChildren(config);
+    const { style, ...safeAttributes } = unsafeAttributes;
+    if (typeof style === "string") {
+      const styleObject = parseInlineCSSToReactLikeObject(style);
+      safeAttributes.style = styleObject;
+    }
+    return new Markdoc.Tag(name, safeAttributes, children);
+  }
+};
+export {
+  htmlTag
+};

package/dist/html/transform/html-token-transform.d.ts

@@ -0,0 +1,3 @@
+import type { Tokenizer } from '@markdoc/markdoc';
+import type * as Token from 'markdown-it/lib/token';
+export declare function htmlTokenTransform(tokenizer: Tokenizer, tokens: Token[]): Token[];

package/dist/html/transform/html-token-transform.js

@@ -0,0 +1,154 @@
+import { Parser } from "htmlparser2";
+function htmlTokenTransform(tokenizer, tokens) {
+  const output = [];
+  let textBuffer = "";
+  let inCDATA = false;
+  const appendText = (text) => {
+    textBuffer += text;
+  };
+  const processTextBuffer = () => {
+    if (textBuffer.length > 0) {
+      const toks = tokenizer.tokenize(textBuffer);
+      if (toks.length === 3) {
+        const first = toks[0];
+        const second = toks[1];
+        const third = toks.at(2);
+        if (first.type === "paragraph_open" && second.type === "inline" && third && third.type === "paragraph_close" && Array.isArray(second.children)) {
+          for (const tok of second.children) {
+            if (tok.type === "text") {
+              if (tok.content.trim() == textBuffer.trim()) {
+                tok.content = textBuffer;
+              }
+            }
+            output.push(tok);
+          }
+        } else {
+          for (const tok of toks) {
+            output.push(tok);
+          }
+        }
+      } else {
+        for (const tok of toks) {
+          output.push(tok);
+        }
+      }
+      textBuffer = "";
+    }
+  };
+  const parser = new Parser(
+    {
+      oncdatastart() {
+        inCDATA = true;
+      },
+      oncdataend() {
+        inCDATA = false;
+      },
+      // when an HTML tag opens...
+      onopentag(name, attrs) {
+        processTextBuffer();
+        output.push({
+          type: "tag_open",
+          nesting: 1,
+          meta: {
+            tag: "html-tag",
+            attributes: [
+              { type: "attribute", name: "name", value: name },
+              { type: "attribute", name: "attrs", value: attrs }
+            ]
+          }
+        });
+      },
+      ontext(content) {
+        if (inCDATA) {
+          return;
+        }
+        if (typeof content === "string") {
+          appendText(content);
+        }
+      },
+      // when an HTML tag closes...
+      onclosetag(name) {
+        processTextBuffer();
+        output.push({
+          type: "tag_close",
+          nesting: -1,
+          meta: {
+            tag: "html-tag",
+            attributes: [{ type: "attribute", name: "name", value: name }]
+          }
+        });
+      }
+    },
+    {
+      decodeEntities: false,
+      recognizeCDATA: true,
+      recognizeSelfClosing: true
+    }
+  );
+  for (const token of tokens) {
+    if (token.type.startsWith("html")) {
+      parser.write(token.content);
+      continue;
+    }
+    if (token.type === "inline") {
+      if (token.children) {
+        token.children = htmlTokenTransform(tokenizer, token.children);
+      }
+    }
+    output.push(token);
+  }
+  processTextBuffer();
+  mutateAndCollapseExtraParagraphsUnderHtml(output);
+  return output;
+}
+function mutateAndCollapseExtraParagraphsUnderHtml(tokens) {
+  let done = false;
+  while (!done) {
+    const idx = findExtraParagraphUnderHtml(tokens);
+    if (typeof idx === "number") {
+      const actualChildTokens = tokens[idx + 2].children ?? [];
+      tokens.splice(idx, 5, ...actualChildTokens);
+    } else {
+      done = true;
+    }
+  }
+}
+function findExtraParagraphUnderHtml(tokens) {
+  if (tokens.length < 5) {
+    return null;
+  }
+  for (let i = 0; i < tokens.length; i++) {
+    const last = i + 4;
+    if (last > tokens.length - 1) {
+      break;
+    }
+    const slice = tokens.slice(i, last + 1);
+    const isMatch = isExtraParagraphPatternMatch(slice);
+    if (isMatch) {
+      return i;
+    }
+  }
+  return null;
+}
+function isExtraParagraphPatternMatch(slice) {
+  const match = isHtmlTagOpen(slice[0]) && isParagraphOpen(slice[1]) && isInline(slice[2]) && isParagraphClose(slice[3]) && isHtmlTagClose(slice[4]);
+  return match;
+}
+function isHtmlTagOpen(token) {
+  return token.type === "tag_open" && token.meta && token.meta.tag === "html-tag";
+}
+function isHtmlTagClose(token) {
+  return token.type === "tag_close" && token.meta && token.meta.tag === "html-tag";
+}
+function isParagraphOpen(token) {
+  return token.type === "paragraph_open";
+}
+function isParagraphClose(token) {
+  return token.type === "paragraph_close";
+}
+function isInline(token) {
+  return token.type === "inline";
+}
+export {
+  htmlTokenTransform
+};

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 import type { AstroIntegration } from 'astro';
-export default function markdocIntegration(legacyConfig?: any): AstroIntegration;
+import type { MarkdocIntegrationOptions } from './options.js';
+export default function markdocIntegration(options?: MarkdocIntegrationOptions): AstroIntegration;

package/dist/index.js

@@ -1,18 +1,9 @@
-import { bold, red } from "kleur/colors";
 import { getContentEntryType } from "./content-entry-type.js";
 import {
-  loadMarkdocConfig,
-  SUPPORTED_MARKDOC_CONFIG_FILES
+  SUPPORTED_MARKDOC_CONFIG_FILES,
+  loadMarkdocConfig
 } from "./load-config.js";
-function markdocIntegration(legacyConfig) {
-  if (legacyConfig) {
-    console.log(
-      `${red(
-        bold("[Markdoc]")
-      )} Passing Markdoc config from your \`astro.config\` is no longer supported. Configuration should be exported from a \`markdoc.config.mjs\` file. See the configuration docs for more: https://docs.astro.build/en/guides/integrations-guide/markdoc/#configuration`
-    );
-    process.exit(0);
-  }
+function markdocIntegration(options) {
   let markdocConfigResult;
   let astroConfig;
   return {
@@ -22,7 +13,9 @@ function markdocIntegration(legacyConfig) {
         const { updateConfig, addContentEntryType } = params;
         astroConfig = params.config;
         markdocConfigResult = await loadMarkdocConfig(astroConfig);
-        addContentEntryType(await getContentEntryType({ markdocConfigResult, astroConfig }));
+        addContentEntryType(
+          await getContentEntryType({ markdocConfigResult, astroConfig, options })
+        );
         updateConfig({
           vite: {
             ssr: {

package/dist/options.d.ts

@@ -0,0 +1,3 @@
+export interface MarkdocIntegrationOptions {
+    allowHTML?: boolean;
+}

package/dist/{experimental-assets-config.d.ts → runtime-assets-config.d.ts}

@@ -1,2 +1,2 @@
 import type { Config as MarkdocConfig } from '@markdoc/markdoc';
-export declare const experimentalAssetsConfig: MarkdocConfig;
+export declare const assetsConfig: MarkdocConfig;

package/dist/{experimental-assets-config.js → runtime-assets-config.js}

@@ -1,6 +1,6 @@
 import Markdoc from "@markdoc/markdoc";
 import { Image } from "astro:assets";
-const experimentalAssetsConfig = {
+const assetsConfig = {
   nodes: {
     image: {
       attributes: {
@@ -21,5 +21,5 @@ const experimentalAssetsConfig = {
   }
 };
 export {
-  experimentalAssetsConfig
+  assetsConfig
 };

package/dist/runtime.d.ts

@@ -1,19 +1,20 @@
 import type { MarkdownHeading } from '@astrojs/markdown-remark';
 import { type NodeType, type RenderableTreeNode } from '@markdoc/markdoc';
 import type { AstroInstance } from 'astro';
-import type { AstroMarkdocConfig } from './config.js';
+import { type AstroMarkdocConfig } from './config.js';
+import type { MarkdocIntegrationOptions } from './options.js';
 /**
  * Merge user config with default config and set up context (ex. heading ID slugger)
  * Called on each file's individual transform.
  * TODO: virtual module to merge configs per-build instead of per-file?
  */
-export declare function setupConfig(userConfig?: AstroMarkdocConfig): Promise<MergedConfig>;
+export declare function setupConfig(userConfig: AstroMarkdocConfig | undefined, options: MarkdocIntegrationOptions | undefined): Promise<MergedConfig>;
 /** Used for synchronous `getHeadings()` function */
-export declare function setupConfigSync(userConfig?: AstroMarkdocConfig): MergedConfig;
+export declare function setupConfigSync(userConfig: AstroMarkdocConfig | undefined, options: MarkdocIntegrationOptions | undefined): MergedConfig;
 type MergedConfig = Required<Omit<AstroMarkdocConfig, 'extends'>>;
 /** Merge function from `@markdoc/markdoc` internals */
 export declare function mergeConfig(configA: AstroMarkdocConfig, configB: AstroMarkdocConfig): MergedConfig;
-export declare function resolveComponentImports(markdocConfig: Required<Pick<AstroMarkdocConfig, 'tags' | 'nodes'>>, tagComponentMap: Record<string, AstroInstance['default']>, nodeComponentMap: Record<NodeType, AstroInstance['default']>): Required<Pick<AstroMarkdocConfig, "tags" | "nodes">>;
+export declare function resolveComponentImports(markdocConfig: Required<Pick<AstroMarkdocConfig, 'tags' | 'nodes'>>, tagComponentMap: Record<string, AstroInstance['default']>, nodeComponentMap: Record<NodeType, AstroInstance['default']>): Required<Pick<AstroMarkdocConfig, "nodes" | "tags">>;
 /**
  * Get text content as a string from a Markdoc transform AST
  */
@@ -23,6 +24,6 @@ export declare function getTextContent(childNodes: RenderableTreeNode[]): string
  * for `headings` result on `render()` return value
  */
 export declare function collectHeadings(children: RenderableTreeNode[], collectedHeadings: MarkdownHeading[]): void;
-export declare function createGetHeadings(stringifiedAst: string, userConfig: AstroMarkdocConfig): () => MarkdownHeading[];
-export declare function createContentComponent(Renderer: AstroInstance['default'], stringifiedAst: string, userConfig: AstroMarkdocConfig, tagComponentMap: Record<string, AstroInstance['default']>, nodeComponentMap: Record<NodeType, AstroInstance['default']>): any;
+export declare function createGetHeadings(stringifiedAst: string, userConfig: AstroMarkdocConfig, options: MarkdocIntegrationOptions | undefined): () => MarkdownHeading[];
+export declare function createContentComponent(Renderer: AstroInstance['default'], stringifiedAst: string, userConfig: AstroMarkdocConfig, options: MarkdocIntegrationOptions | undefined, tagComponentMap: Record<string, AstroInstance['default']>, nodeComponentMap: Record<NodeType, AstroInstance['default']>): import("astro/runtime/server/index.js").AstroComponentFactory;
 export {};

package/dist/runtime.js

@@ -1,7 +1,10 @@
-import Markdoc from "@markdoc/markdoc";
+import Markdoc, {
+} from "@markdoc/markdoc";
 import { createComponent, renderComponent } from "astro/runtime/server/index.js";
+import {} from "./config.js";
 import { setupHeadingConfig } from "./heading-ids.js";
-async function setupConfig(userConfig = {}) {
+import { htmlTag } from "./html/tagdefs/html.tag.js";
+async function setupConfig(userConfig = {}, options) {
   let defaultConfig = setupHeadingConfig();
   if (userConfig.extends) {
     for (let extension of userConfig.extends) {
@@ -11,11 +14,19 @@ async function setupConfig(userConfig = {}) {
       defaultConfig = mergeConfig(defaultConfig, extension);
     }
   }
-  return mergeConfig(defaultConfig, userConfig);
+  let merged = mergeConfig(defaultConfig, userConfig);
+  if (options?.allowHTML) {
+    merged = mergeConfig(merged, HTML_CONFIG);
+  }
+  return merged;
 }
-function setupConfigSync(userConfig = {}) {
+function setupConfigSync(userConfig = {}, options) {
   const defaultConfig = setupHeadingConfig();
-  return mergeConfig(defaultConfig, userConfig);
+  let merged = mergeConfig(defaultConfig, userConfig);
+  if (options?.allowHTML) {
+    merged = mergeConfig(merged, HTML_CONFIG);
+  }
+  return merged;
 }
 function mergeConfig(configA, configB) {
   return {
@@ -100,9 +111,9 @@ function collectHeadings(children, collectedHeadings) {
     collectHeadings(node.children, collectedHeadings);
   }
 }
-function createGetHeadings(stringifiedAst, userConfig) {
+function createGetHeadings(stringifiedAst, userConfig, options) {
   return function getHeadings() {
-    const config = setupConfigSync(userConfig);
+    const config = setupConfigSync(userConfig, options);
     const ast = Markdoc.Ast.fromJSON(stringifiedAst);
     const content = Markdoc.transform(ast, config);
     let collectedHeadings = [];
@@ -110,12 +121,12 @@ function createGetHeadings(stringifiedAst, userConfig) {
     return collectedHeadings;
   };
 }
-function createContentComponent(Renderer, stringifiedAst, userConfig, tagComponentMap, nodeComponentMap) {
+function createContentComponent(Renderer, stringifiedAst, userConfig, options, tagComponentMap, nodeComponentMap) {
   return createComponent({
     async factory(result, props) {
       const withVariables = mergeConfig(userConfig, { variables: props });
       const config = resolveComponentImports(
-        await setupConfig(withVariables),
+        await setupConfig(withVariables, options),
         tagComponentMap,
         nodeComponentMap
       );
@@ -124,6 +135,11 @@ function createContentComponent(Renderer, stringifiedAst, userConfig, tagCompone
     propagation: "self"
   });
 }
+const HTML_CONFIG = {
+  tags: {
+    "html-tag": htmlTag
+  }
+};
 export {
   collectHeadings,
   createContentComponent,

package/dist/tokenizer.d.ts

@@ -0,0 +1,3 @@
+import type { Tokenizer } from '@markdoc/markdoc';
+import type { MarkdocIntegrationOptions } from './options.js';
+export declare function getMarkdocTokenizer(options: MarkdocIntegrationOptions | undefined): Tokenizer;

package/dist/tokenizer.js

@@ -0,0 +1,24 @@
+import Markdoc from "@markdoc/markdoc";
+function getMarkdocTokenizer(options) {
+  const key = cacheKey(options);
+  if (!_cachedMarkdocTokenizers[key]) {
+    const tokenizerOptions = {
+      // Strip <!-- comments --> from rendered output
+      // Without this, they're rendered as strings!
+      allowComments: true
+    };
+    if (options?.allowHTML) {
+      tokenizerOptions.allowIndentation = true;
+      tokenizerOptions.html = true;
+    }
+    _cachedMarkdocTokenizers[key] = new Markdoc.Tokenizer(tokenizerOptions);
+  }
+  return _cachedMarkdocTokenizers[key];
+}
+let _cachedMarkdocTokenizers = {};
+function cacheKey(options) {
+  return JSON.stringify(options);
+}
+export {
+  getMarkdocTokenizer
+};

package/dist/utils.js

@@ -1,7 +1,11 @@
 class MarkdocError extends Error {
+  loc;
+  title;
+  hint;
+  frame;
+  type = "MarkdocError";
   constructor(props, ...params) {
     super(...params);
-    this.type = "MarkdocError";
     const { title = "MarkdocError", message, stack, location, hint, frame } = props;
     this.title = title;
     if (message)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/markdoc",
   "description": "Add support for Markdoc in your Astro site",
-  "version": "0.4.3",
+  "version": "0.5.0-rc.1",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -34,7 +34,7 @@
     ".": "./dist/index.js",
     "./components": "./components/index.ts",
     "./runtime": "./dist/runtime.js",
-    "./experimental-assets-config": "./dist/experimental-assets-config.js",
+    "./runtime-assets-config": "./dist/runtime-assets-config.js",
     "./package.json": "./package.json"
   },
   "typesVersions": {
@@ -56,35 +56,37 @@
     "template"
   ],
   "dependencies": {
-    "@astrojs/internal-helpers": "^0.1.0",
-    "@astrojs/prism": "^2.1.2",
     "@markdoc/markdoc": "^0.3.0",
-    "esbuild": "^0.17.19",
+    "esbuild": "^0.18.16",
     "github-slugger": "^2.0.0",
     "gray-matter": "^4.0.3",
+    "htmlparser2": "^9.0.0",
     "kleur": "^4.1.5",
     "shiki": "^0.14.1",
-    "zod": "^3.17.3"
+    "zod": "^3.17.3",
+    "@astrojs/internal-helpers": "0.2.0-rc.2",
+    "@astrojs/prism": "3.0.0-rc.1"
   },
   "peerDependencies": {
-    "astro": "^2.8.5"
+    "astro": "^3.0.0-rc.5"
   },
   "devDependencies": {
-    "@astrojs/markdown-remark": "^2.2.1",
     "@types/chai": "^4.3.5",
     "@types/html-escaper": "^3.0.0",
+    "@types/markdown-it": "^12.2.3",
     "@types/mocha": "^9.1.1",
     "chai": "^4.3.7",
     "devalue": "^4.3.2",
     "linkedom": "^0.14.26",
     "mocha": "^9.2.2",
     "rollup": "^3.25.1",
-    "vite": "^4.3.9",
-    "astro": "2.8.5",
+    "vite": "^4.4.6",
+    "@astrojs/markdown-remark": "3.0.0-rc.1",
+    "astro": "3.0.0-rc.5",
     "astro-scripts": "0.0.14"
   },
   "engines": {
-    "node": ">=16.12.0"
+    "node": ">=18.14.1"
   },
   "scripts": {
     "build": "astro-scripts build \"src/**/*.ts\" && tsc",