@nuxtjs/mdc 0.9.5 → 0.11.0

package/dist/module.d.mts

@@ -3,6 +3,7 @@ import { BundledLanguage, LanguageRegistration, BundledTheme, ThemeRegistrationA
 import { Options } from 'remark-rehype';
 import { R as RehypeHighlightOption, M as MdcConfig, a as MdcThemeOptions } from './shared/mdc.4762b8bc.mjs';
 export { A as Awaitable, b as HighlightResult, c as Highlighter, H as HighlighterOptions, d as defineConfig } from './shared/mdc.4762b8bc.mjs';
+import { Options as Options$1 } from 'remark-stringify';
 import 'unified';
 import 'hast';
 
@@ -80,6 +81,14 @@ interface MDCParserResult {
     toc: Toc | undefined;
 }
 
+interface MDCStringifyOptions {
+    plugins?: {
+        remarkStringify?: {
+            options?: Options$1;
+        };
+    };
+}
+
 interface UnistPlugin {
     src?: string;
     options?: Record<string, any>;
@@ -515,6 +524,12 @@ interface Text extends Literal {
  */
 type TextData = Data;
 
+interface MDCRenderOptions {
+    documentMeta: MDCData;
+    parentScope: any;
+    resolveComponent: (component: any) => any;
+}
+
 declare const DefaultHighlightLangs: BundledLanguage[];
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
@@ -546,4 +561,4 @@ declare module '@nuxt/schema' {
     }
 }
 
-export { type Comment, type CommentData, type Content, type Data, DefaultHighlightLangs, type Doctype, type DoctypeData, type Element, type ElementContent, type ElementContentMap, type ElementData, type Literal, type Literals, type MDCComment, type MDCData, type MDCElement, type MDCNode, type MDCParseOptions, type MDCParserResult, type MDCRoot, type MDCText, MdcConfig, MdcThemeOptions, type ModuleOptions, type Node, type Nodes, type Parent, type Parents, type Properties, RehypeHighlightOption, type RehypePlugin, type RemarkPlugin, type Root, type RootContent, type RootContentMap, type RootData, type Text, type TextData, type Toc, type TocLink, type UnistPlugin, _default as default };
+export { type Comment, type CommentData, type Content, type Data, DefaultHighlightLangs, type Doctype, type DoctypeData, type Element, type ElementContent, type ElementContentMap, type ElementData, type Literal, type Literals, type MDCComment, type MDCData, type MDCElement, type MDCNode, type MDCParseOptions, type MDCParserResult, type MDCRenderOptions, type MDCRoot, type MDCStringifyOptions, type MDCText, MdcConfig, MdcThemeOptions, type ModuleOptions, type Node, type Nodes, type Parent, type Parents, type Properties, RehypeHighlightOption, type RehypePlugin, type RemarkPlugin, type Root, type RootContent, type RootContentMap, type RootData, type Text, type TextData, type Toc, type TocLink, type UnistPlugin, _default as default };

package/dist/module.d.ts

@@ -3,6 +3,7 @@ import { BundledLanguage, LanguageRegistration, BundledTheme, ThemeRegistrationA
 import { Options } from 'remark-rehype';
 import { R as RehypeHighlightOption, M as MdcConfig, a as MdcThemeOptions } from './shared/mdc.4762b8bc.js';
 export { A as Awaitable, b as HighlightResult, c as Highlighter, H as HighlighterOptions, d as defineConfig } from './shared/mdc.4762b8bc.js';
+import { Options as Options$1 } from 'remark-stringify';
 import 'unified';
 import 'hast';
 
@@ -80,6 +81,14 @@ interface MDCParserResult {
     toc: Toc | undefined;
 }
 
+interface MDCStringifyOptions {
+    plugins?: {
+        remarkStringify?: {
+            options?: Options$1;
+        };
+    };
+}
+
 interface UnistPlugin {
     src?: string;
     options?: Record<string, any>;
@@ -515,6 +524,12 @@ interface Text extends Literal {
  */
 type TextData = Data;
 
+interface MDCRenderOptions {
+    documentMeta: MDCData;
+    parentScope: any;
+    resolveComponent: (component: any) => any;
+}
+
 declare const DefaultHighlightLangs: BundledLanguage[];
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
@@ -546,4 +561,4 @@ declare module '@nuxt/schema' {
     }
 }
 
-export { type Comment, type CommentData, type Content, type Data, DefaultHighlightLangs, type Doctype, type DoctypeData, type Element, type ElementContent, type ElementContentMap, type ElementData, type Literal, type Literals, type MDCComment, type MDCData, type MDCElement, type MDCNode, type MDCParseOptions, type MDCParserResult, type MDCRoot, type MDCText, MdcConfig, MdcThemeOptions, type ModuleOptions, type Node, type Nodes, type Parent, type Parents, type Properties, RehypeHighlightOption, type RehypePlugin, type RemarkPlugin, type Root, type RootContent, type RootContentMap, type RootData, type Text, type TextData, type Toc, type TocLink, type UnistPlugin, _default as default };
+export { type Comment, type CommentData, type Content, type Data, DefaultHighlightLangs, type Doctype, type DoctypeData, type Element, type ElementContent, type ElementContentMap, type ElementData, type Literal, type Literals, type MDCComment, type MDCData, type MDCElement, type MDCNode, type MDCParseOptions, type MDCParserResult, type MDCRenderOptions, type MDCRoot, type MDCStringifyOptions, type MDCText, MdcConfig, MdcThemeOptions, type ModuleOptions, type Node, type Nodes, type Parent, type Parents, type Properties, RehypeHighlightOption, type RehypePlugin, type RemarkPlugin, type Root, type RootContent, type RootContentMap, type RootData, type Text, type TextData, type Toc, type TocLink, type UnistPlugin, _default as default };

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@nuxtjs/mdc",
   "configKey": "mdc",
-  "version": "0.9.5",
+  "version": "0.11.0",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -11,7 +11,9 @@ const registerMDCSlotTransformer = (resolver) => {
     const compilerOptions = config.vue.template.compilerOptions;
     compilerOptions.nodeTransforms = [
       function viteMDCSlot(node, context) {
-        if (node.tag === "MDCSlot") {
+        const isVueSlotWithUnwrap = node.tag === "slot" && node.props.find((p) => p.name === "mdc-unwrap" || p.name === "bind" && p.rawName === ":mdc-unwrap");
+        const isMDCSlot = node.tag === "MDCSlot";
+        if (isVueSlotWithUnwrap || isMDCSlot) {
           const transform = context.ssr ? context.nodeTransforms.find((nt) => nt.name === "ssrTransformSlotOutlet") : context.nodeTransforms.find((nt) => nt.name === "transformSlotOutlet");
           return () => {
             node.tag = "slot";

package/dist/runtime/components/MDCRenderer.vue

@@ -1,15 +1,17 @@
 <script>
-import { h, resolveComponent, reactive, watch, Text, Comment, defineAsyncComponent, defineComponent, toRaw, computed, getCurrentInstance } from "vue";
+import { h, resolveComponent as vueResolveComponent, reactive, watch, Text, Comment, defineAsyncComponent, defineComponent, toRaw, computed, getCurrentInstance } from "vue";
 import destr from "destr";
 import { kebabCase, pascalCase } from "scule";
 import { find, html } from "property-information";
 import htmlTags from "../parser/utils/html-tags-list";
 import { flatUnwrap } from "../utils/node";
+import { pick } from "../utils";
 const DEFAULT_SLOT = "default";
 const rxOn = /^@|^v-on:/;
 const rxBind = /^:|^v-bind:/;
 const rxModel = /^v-model/;
 const nativeInputs = ["select", "textarea", "input"];
+const specialParentTags = ["math", "svg"];
 const proseComponentMap = Object.fromEntries(["p", "a", "blockquote", "code", "pre", "code", "em", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "img", "ul", "ol", "li", "strong", "table", "thead", "tbody", "td", "th", "tr", "script"].map((t) => [t, `prose-${t}`]));
 export default defineComponent({
   name: "MDCRenderer",
@@ -104,20 +106,25 @@ export default defineComponent({
       return null;
     }
     const meta = { ...data, tags, $route: route, runtimeData, updateRuntimeData };
-    const component = tag !== false ? resolveVueComponent(tag || meta.component?.name || meta.component || "div") : void 0;
+    const component = tag !== false ? resolveComponentInstance(tag || meta.component?.name || meta.component || "div") : void 0;
     return component ? h(component, { ...meta.component?.props, class: ctx.class, ...this.$attrs, key: contentKey }, { default: defaultSlotRenderer }) : defaultSlotRenderer?.();
     function defaultSlotRenderer() {
+      const defaultSlot = _renderSlots(body, h, { documentMeta: meta, parentScope: meta, resolveComponent: resolveComponentInstance });
+      if (!defaultSlot?.default) {
+        return null;
+      }
       if (unwrap) {
         return flatUnwrap(
-          renderSlots(body, h, meta, meta).default(),
+          defaultSlot.default(),
           typeof unwrap === "string" ? unwrap.split(" ") : ["*"]
         );
       }
-      return renderSlots(body, h, meta, meta).default();
+      return defaultSlot.default();
     }
   }
 });
-function renderNode(node, h2, documentMeta, parentScope = {}) {
+function _renderNode(node, h2, options) {
+  const { documentMeta, parentScope, resolveComponent } = options;
   if (node.type === "text") {
     return h2(Text, node.value);
   }
@@ -129,7 +136,8 @@ function renderNode(node, h2, documentMeta, parentScope = {}) {
   if (node.tag === "binding") {
     return renderBinding(node, h2, documentMeta, parentScope);
   }
-  const component = resolveVueComponent(renderTag);
+  const _resolveComponent = isUnresolvableTag(renderTag) ? (component2) => component2 : resolveComponent;
+  const component = _resolveComponent(renderTag);
   if (typeof component === "object") {
     component.tag = originalTag;
   }
@@ -137,9 +145,59 @@ function renderNode(node, h2, documentMeta, parentScope = {}) {
   return h2(
     component,
     props,
-    renderSlots(node, h2, documentMeta, { ...parentScope, ...props })
+    _renderSlots(
+      node,
+      h2,
+      {
+        documentMeta,
+        parentScope: { ...parentScope, ...props },
+        resolveComponent: _resolveComponent
+      }
+    )
   );
 }
+function _renderSlots(node, h2, options) {
+  const { documentMeta, parentScope, resolveComponent } = options;
+  const children = node.children || [];
+  const slotNodes = children.reduce((data, node2) => {
+    if (!isTemplate(node2)) {
+      data[DEFAULT_SLOT].children.push(node2);
+      return data;
+    }
+    const slotName = getSlotName(node2);
+    data[slotName] = data[slotName] || { props: {}, children: [] };
+    if (node2.type === "element") {
+      data[slotName].props = node2.props;
+      data[slotName].children.push(...node2.children || []);
+    }
+    return data;
+  }, {
+    [DEFAULT_SLOT]: { props: {}, children: [] }
+  });
+  const slots = Object.entries(slotNodes).reduce((slots2, [name, { props, children: children2 }]) => {
+    if (!children2.length) {
+      return slots2;
+    }
+    slots2[name] = (data = {}) => {
+      const scopedProps = pick(data, Object.keys(props || {}));
+      let vNodes = children2.map((child) => _renderNode(
+        child,
+        h2,
+        {
+          documentMeta,
+          parentScope: { ...parentScope, ...scopedProps },
+          resolveComponent
+        }
+      ));
+      if (props?.unwrap) {
+        vNodes = flatUnwrap(vNodes, props.unwrap);
+      }
+      return mergeTextNodes(vNodes);
+    };
+    return slots2;
+  }, {});
+  return slots;
+}
 function renderBinding(node, h2, documentMeta, parentScope = {}) {
   const data = {
     ...documentMeta.runtimeData,
@@ -162,34 +220,6 @@ function renderBinding(node, h2, documentMeta, parentScope = {}) {
   const defaultValue = node.props?.defaultValue;
   return h2(Text, value ?? defaultValue ?? "");
 }
-function renderSlots(node, h2, documentMeta, parentProps) {
-  const children = node.children || [];
-  const slotNodes = children.reduce((data, node2) => {
-    if (!isTemplate(node2)) {
-      data[DEFAULT_SLOT].push(node2);
-      return data;
-    }
-    const slotName = getSlotName(node2);
-    data[slotName] = data[slotName] || [];
-    if (node2.type === "element") {
-      data[slotName].push(...node2.children || []);
-    }
-    return data;
-  }, {
-    [DEFAULT_SLOT]: []
-  });
-  const slots = Object.entries(slotNodes).reduce((slots2, [name, children2]) => {
-    if (!children2.length) {
-      return slots2;
-    }
-    slots2[name] = () => {
-      const vNodes = children2.map((child) => renderNode(child, h2, documentMeta, parentProps));
-      return mergeTextNodes(vNodes);
-    };
-    return slots2;
-  }, {});
-  return slots;
-}
 function propsToData(node, documentMeta) {
   const { tag = "", props = {} } = node;
   return Object.keys(props).reduce(function(data, key) {
@@ -244,12 +274,12 @@ function propsToDataRxBind(key, value, data, documentMeta) {
   data[key] = evalInContext(value, documentMeta);
   return data;
 }
-const resolveVueComponent = (component) => {
+const resolveComponentInstance = (component) => {
   if (typeof component === "string") {
     if (htmlTags.includes(component)) {
       return component;
     }
-    const _component = resolveComponent(pascalCase(component), false);
+    const _component = vueResolveComponent(pascalCase(component), false);
     if (!component || _component?.name === "AsyncComponentWrapper") {
       return _component;
     }
@@ -281,6 +311,9 @@ function getSlotName(node) {
 function isTemplate(node) {
   return node.tag === "template";
 }
+function isUnresolvableTag(tag) {
+  return specialParentTags.includes(tag);
+}
 function mergeTextNodes(nodes) {
   const mergedNodes = [];
   for (const node of nodes) {
@@ -302,7 +335,7 @@ async function resolveContentComponents(body, meta) {
     if (c?.render || c?.ssrRender || c?.__ssrInlineRender) {
       return;
     }
-    const resolvedComponent = resolveVueComponent(c);
+    const resolvedComponent = resolveComponentInstance(c);
     if (resolvedComponent?.__asyncLoader && !resolvedComponent.__asyncResolved) {
       await resolvedComponent.__asyncLoader();
     }
@@ -313,6 +346,9 @@ async function resolveContentComponents(body, meta) {
       return [];
     }
     const renderTag = findMappedTag(node, documentMeta.tags);
+    if (isUnresolvableTag(renderTag)) {
+      return [];
+    }
     const components2 = [];
     if (node.type !== "root" && !htmlTags.includes(renderTag)) {
       components2.push(renderTag);

package/dist/runtime/index.d.ts

@@ -1,4 +1,5 @@
-export { parseMarkdown, createMarkdownParser } from './parser/index.js';
+export { parseMarkdown, createMarkdownParser, createParseProcessor } from './parser/index.js';
+export { stringifyMarkdown, createMarkdownStringifier, createStringifyProcessor } from './stringify/index.js';
 export { rehypeHighlight } from './highlighter/rehype.js';
 export { createShikiHighlighter } from './highlighter/shiki.js';
 export * from './utils/node.js';

package/dist/runtime/index.js

@@ -1,4 +1,5 @@
-export { parseMarkdown, createMarkdownParser } from "./parser/index.js";
+export { parseMarkdown, createMarkdownParser, createParseProcessor } from "./parser/index.js";
+export { stringifyMarkdown, createMarkdownStringifier, createStringifyProcessor } from "./stringify/index.js";
 export { rehypeHighlight } from "./highlighter/rehype.js";
 export { createShikiHighlighter } from "./highlighter/shiki.js";
 export * from "./utils/node.js";

package/dist/runtime/parser/index.d.ts

@@ -1,5 +1,6 @@
 import type { Options as VFileOptions } from 'vfile';
 import type { MDCParseOptions, MDCParserResult, MDCRoot } from '@nuxtjs/mdc';
+export declare const createParseProcessor: (inlineOptions?: MDCParseOptions) => Promise<import("unified").Processor<undefined, undefined, undefined, undefined, undefined>>;
 export declare const createMarkdownParser: (inlineOptions?: MDCParseOptions) => Promise<(md: string, { fileOptions }?: {
     fileOptions?: VFileOptions;
 }) => Promise<MDCParserResult>>;

package/dist/runtime/parser/index.js

@@ -10,7 +10,7 @@ import { generateToc } from "./toc.js";
 import { compileHast } from "./compiler.js";
 let moduleOptions;
 let generatedMdcConfigs;
-export const createMarkdownParser = async (inlineOptions = {}) => {
+export const createParseProcessor = async (inlineOptions = {}) => {
   if (!moduleOptions) {
     moduleOptions = await import(
       "#mdc-imports"
@@ -67,6 +67,10 @@ export const createMarkdownParser = async (inlineOptions = {}) => {
   for (const config of mdcConfigs) {
     processor = await config.unified?.post?.(processor) || processor;
   }
+  return processor;
+};
+export const createMarkdownParser = async (inlineOptions = {}) => {
+  const processor = await createParseProcessor(inlineOptions);
   return async function parse(md, { fileOptions } = {}) {
     const { content, data: frontmatter } = await parseFrontMatter(md);
     const processedFile = await processor.process({ ...fileOptions, value: content, data: frontmatter });
@@ -78,7 +82,7 @@ export const createMarkdownParser = async (inlineOptions = {}) => {
     );
     let toc;
     if (data.toc !== false) {
-      const tocOption = defu(data.toc || {}, options.toc);
+      const tocOption = defu(data.toc || {}, inlineOptions.toc, defaults.toc);
       toc = generateToc(result.body, tocOption);
     }
     return {

package/dist/runtime/stringify/index.d.ts

@@ -0,0 +1,5 @@
+import { type Processor } from 'unified';
+import type { MDCStringifyOptions, MDCRoot } from '@nuxtjs/mdc';
+export declare function createStringifyProcessor(options?: MDCStringifyOptions): Processor<undefined, import("hast").Root, import("unist").Node, import("mdast").Root, string>;
+export declare function createMarkdownStringifier(options?: MDCStringifyOptions): (value: any, data?: Record<string, any>) => Promise<string>;
+export declare function stringifyMarkdown(MDCAst: MDCRoot, data: Record<string, any>, options?: MDCStringifyOptions): Promise<string | null>;

package/dist/runtime/stringify/index.js

@@ -0,0 +1,36 @@
+import { unified } from "unified";
+import gfm from "remark-gfm";
+import mdc, { stringifyFrontMatter } from "remark-mdc";
+import stringify from "remark-stringify";
+import { mdcRemark } from "./mdc-remark.js";
+export function createStringifyProcessor(options = {}) {
+  return unified().use(function jsonParser() {
+    this.parser = function(root) {
+      return JSON.parse(root);
+    };
+  }).use(mdcRemark).use(gfm).use(mdc).use(stringify, {
+    bullet: "-",
+    emphasis: "_",
+    rule: "-",
+    listItemIndent: "one",
+    fence: "`",
+    fences: true,
+    ...options?.plugins?.remarkStringify?.options
+  });
+}
+export function createMarkdownStringifier(options = {}) {
+  const processor = createStringifyProcessor(options);
+  async function stringify2(value, data = {}) {
+    const result = await processor.process({ value: JSON.stringify(value) });
+    if (Object.keys(data).length) {
+      return stringifyFrontMatter(data, result.value);
+    }
+    return result.value;
+  }
+  return stringify2;
+}
+export async function stringifyMarkdown(MDCAst, data, options = {}) {
+  const processor = createMarkdownStringifier(options);
+  if (!MDCAst) return null;
+  return await processor(MDCAst, data);
+}

package/dist/runtime/stringify/mdc-remark.d.ts

@@ -0,0 +1,8 @@
+import type { Root as HastRoot } from 'hast';
+import type { Options as ToMdastOptions } from 'hast-util-to-mdast';
+import type { Root as MDastRoot } from 'mdast';
+import type { VFile } from 'vfile';
+interface Options extends ToMdastOptions {
+}
+export declare function mdcRemark(options?: Options | undefined | null): (node: HastRoot, _file: VFile) => MDastRoot;
+export {};

package/dist/runtime/stringify/mdc-remark.js

@@ -0,0 +1,253 @@
+import { defaultHandlers, toMdast } from "hast-util-to-mdast";
+import { nodeTextContent } from "@nuxtjs/mdc/runtime/utils/node";
+import { hasProtocol } from "ufo";
+import { toHtml } from "hast-util-to-html";
+import { visit } from "unist-util-visit";
+import { format } from "hast-util-format";
+import { computeHighlightRanges } from "./utils.js";
+const mdcRemarkElementType = "mdc-element";
+const own = {}.hasOwnProperty;
+export function mdcRemark(options) {
+  return function(node, _file) {
+    const tree = preProcessElementNodes(node);
+    const mdast = toMdast(tree, {
+      /**
+       * Default to true in rehype-remark
+       * @see https://github.com/rehypejs/rehype-remark/blob/main/lib/index.js#L37ckages/remark/lib/index.js#L100
+       */
+      document: true,
+      ...options,
+      handlers: {
+        ...mdcRemarkHandlers,
+        ...options?.handlers
+      },
+      nodeHandlers: {
+        ...mdcRemarkNodeHandlers,
+        ...options?.nodeHandlers
+      }
+    });
+    return mdast;
+  };
+}
+function preProcessElementNodes(node) {
+  if (node.type === "element") {
+    if (node.children?.length && (node.children || []).every((child) => child.tag === "template")) {
+      node.children = node.children.flatMap((child) => {
+        if (typeof child.props?.["v-slot:default"] !== "undefined" && Object.keys(child.props).length === 1) {
+          return child.children || [];
+        }
+        return child;
+      });
+    }
+    const result = {
+      type: mdcRemarkElementType,
+      tagName: node.tag,
+      properties: node.props,
+      children: (node.children || []).map(preProcessElementNodes)
+    };
+    if (!node.children?.length) {
+      delete result.children;
+    }
+    return result;
+  }
+  if (node?.children) {
+    return {
+      ...node,
+      children: (node.children || []).map(preProcessElementNodes)
+    };
+  }
+  return node;
+}
+const mdcRemarkNodeHandlers = {
+  [mdcRemarkElementType]: (state, node, parent) => {
+    if (node.properties && node.properties.dataMdast === "ignore") {
+      return;
+    }
+    if (own.call(state.handlers, node.tagName)) {
+      return state.handlers[node.tagName](state, node, parent) || void 0;
+    }
+    if ("value" in node && typeof node.value === "string") {
+      const result = { type: "text", value: node.value };
+      state.patch(node, result);
+      return result;
+    }
+    const isInlineElement = (parent?.children || []).some((child) => child.type === "text") || ["p", "li"].includes(parent?.tagName);
+    if (isInlineElement) {
+      return {
+        type: "textComponent",
+        name: node.tagName,
+        attributes: node.properties,
+        children: state.all(node)
+      };
+    }
+    return {
+      type: "containerComponent",
+      name: node.tagName,
+      attributes: node.properties,
+      children: state.all(node)
+    };
+  }
+};
+const mdcRemarkHandlers = {
+  template: (state, node) => {
+    const vSlot = Object.keys(node.properties || {}).find((prop) => prop?.startsWith("v-slot:"))?.replace("v-slot:", "") || "default";
+    const attributes = Object.fromEntries(Object.entries(node.properties || {}).filter(([key]) => !key.startsWith("v-slot:")));
+    return {
+      type: "componentContainerSection",
+      name: vSlot,
+      attributes,
+      children: state.toFlow(state.all(node))
+    };
+  },
+  div: (state, node) => {
+    return {
+      type: "containerComponent",
+      name: "div",
+      attributes: node.properties,
+      children: state.toFlow(state.all(node))
+    };
+  },
+  code: (state, node) => {
+    const attributes = { ...node.properties };
+    if ("style" in attributes && !attributes.style) {
+      delete attributes.style;
+    }
+    if ("class" in attributes) {
+      attributes.className = String(attributes.class).split(" ").filter(Boolean);
+      delete attributes.class;
+    }
+    if (Array.isArray(attributes.className)) {
+      attributes.className = attributes.className.filter((name) => !name.startsWith("language-"));
+      if (Array.isArray(attributes.className) && !attributes.className.length) {
+        delete attributes.className;
+      }
+    }
+    if (attributes.language) {
+      attributes.lang = attributes.language;
+      delete attributes.language;
+    }
+    const result = { type: "inlineCode", value: nodeTextContent(node), attributes };
+    state.patch(node, result);
+    return result;
+  },
+  pre: (_state, node) => {
+    const meta = [
+      node.properties.filename ? `[${String(node.properties.filename).replace(/\]/g, "\\]")}]` : "",
+      node.properties.highlights?.length ? `{${computeHighlightRanges(node.properties.highlights)}}` : "",
+      node.properties.meta
+    ].filter(Boolean).join(" ");
+    const value = String(node.properties.code || "").replace(/\n$/, "");
+    return {
+      type: "code",
+      value,
+      lang: node.properties.language,
+      meta
+    };
+  },
+  binding: (state, node) => {
+    return {
+      type: "textComponent",
+      name: "binding",
+      attributes: node.properties,
+      children: state.toFlow(state.all(node))
+    };
+  },
+  span: (state, node) => {
+    const result = {
+      type: "textComponent",
+      name: "span",
+      attributes: node.properties,
+      children: state.all(node)
+    };
+    state.patch(node, result);
+    return result;
+  },
+  video: (state, node) => {
+    return {
+      type: "textComponent",
+      name: "video",
+      attributes: node.properties,
+      children: state.toFlow(state.all(node))
+    };
+  },
+  "nuxt-img": (state, node) => {
+    return {
+      type: "textComponent",
+      name: "nuxt-img",
+      attributes: node.properties,
+      children: state.toFlow(state.all(node))
+    };
+  },
+  "nuxt-picture": (state, node) => {
+    return {
+      type: "textComponent",
+      name: "nuxt-picture",
+      attributes: node.properties,
+      children: state.toFlow(state.all(node))
+    };
+  },
+  table: (state, node) => {
+    visit(node, (node2) => {
+      if (node2.type === "rehype-element") {
+        node2.type = "element";
+      }
+    });
+    if (Object.keys(node.properties).length) {
+      format({ type: "root", children: [node] });
+      return {
+        type: "html",
+        value: toHtml(node)
+      };
+    }
+    return defaultHandlers.table(state, node);
+  },
+  img: (state, node) => {
+    const { src, title, alt, ...attributes } = node.properties || {};
+    const result = {
+      type: "image",
+      url: state.resolve(String(src || "") || null),
+      title: title ? String(title) : null,
+      alt: alt ? String(alt) : "",
+      attributes
+    };
+    state.patch(node, result);
+    return result;
+  },
+  em: (state, node) => {
+    const result = { type: "emphasis", children: state.all(node), attributes: node.properties };
+    state.patch(node, result);
+    return result;
+  },
+  strong: (state, node) => {
+    const result = { type: "strong", children: state.all(node), attributes: node.properties };
+    state.patch(node, result);
+    return result;
+  },
+  a(state, node) {
+    const { href, title, ...attributes } = node.properties || {};
+    if (hasProtocol(String(href || ""))) {
+      if (attributes.target === "_blank") {
+        delete attributes.target;
+      }
+      if (["nofollow,noopener,noreferrer"].includes(String(attributes.rel))) {
+        delete attributes.rel;
+      }
+    }
+    const result = {
+      type: "link",
+      url: state.resolve(String(href || "") || null),
+      title: title ? String(title) : null,
+      children: state.all(node),
+      attributes
+    };
+    state.patch(node, result);
+    return result;
+  },
+  br(state, node) {
+    return {
+      type: "textComponent",
+      name: "br",
+      attributes: node.properties
+    };
+  }
+};

package/dist/runtime/stringify/utils.d.ts

@@ -0,0 +1 @@
+export declare function computeHighlightRanges(input: string[] | string): string;

package/dist/runtime/stringify/utils.js

@@ -0,0 +1,16 @@
+export function computeHighlightRanges(input) {
+  const numbers = Array.isArray(input) ? input.map(Number) : input.split(",").map(Number);
+  const ranges = [];
+  let start = numbers[0];
+  for (let i = 1; i <= numbers.length; i++) {
+    if (numbers[i] !== numbers[i - 1] + 1) {
+      if (start === numbers[i - 1]) {
+        ranges.push(`${start}`);
+      } else {
+        ranges.push(`${start}-${numbers[i - 1]}`);
+      }
+      start = numbers[i];
+    }
+  }
+  return ranges.join(",");
+}

package/dist/runtime/utils/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Pick keys from an object
+ */
+export declare function pick(obj: Record<string, any>, keys: string[]): Record<string, any>;

package/dist/runtime/utils/index.js

@@ -0,0 +1,12 @@
+export function pick(obj, keys) {
+  return keys.reduce((acc, key) => {
+    const value = get(obj, key);
+    if (value !== void 0) {
+      acc[key] = value;
+    }
+    return acc;
+  }, {});
+}
+function get(obj, key) {
+  return key.split(".").reduce((acc, k) => acc && acc[k], obj);
+}

package/dist/runtime/utils/node.js

@@ -31,7 +31,7 @@ export function nodeTextContent(node) {
     return node.map(nodeTextContent).join("");
   }
   if (isText(node)) {
-    return node.children || node.value || "";
+    return node.value || node.children || "";
   }
   const children = nodeChildren(node);
   if (Array.isArray(children)) {

package/dist/runtime/utils/slot.js

@@ -2,7 +2,7 @@ import { renderSlot as _renderSlot } from "vue";
 import { flatUnwrap } from "./node.js";
 export const renderSlot = (slots, name, props, ...rest) => {
   if (slots[name]) {
-    return _renderSlot({ ...slots, [name]: () => flatUnwrap(slots[name](), props?.unwrap) }, name, props, ...rest);
+    return _renderSlot({ ...slots, [name]: () => flatUnwrap(slots[name](), props?.unwrap || props?.mdcUnwrap) }, name, props, ...rest);
   }
   return _renderSlot(slots, name, props, ...rest);
 };

package/dist/runtime/utils/ssrSlot.js

@@ -2,7 +2,7 @@ import { ssrRenderSlot as _ssrRenderSlot } from "vue/server-renderer";
 import { flatUnwrap } from "./node.js";
 export const ssrRenderSlot = (slots, name, props, fallbackRenderFn, push, parentComponent, slotScopeId) => {
   if (slots[name]) {
-    return _ssrRenderSlot({ ...slots, [name]: () => flatUnwrap(slots[name](), props?.unwrap) }, name, props, fallbackRenderFn, push, parentComponent, slotScopeId);
+    return _ssrRenderSlot({ ...slots, [name]: () => flatUnwrap(slots[name](), props?.unwrap || props?.mdcUnwrap) }, name, props, fallbackRenderFn, push, parentComponent, slotScopeId);
   }
   return _ssrRenderSlot(slots, name, props, fallbackRenderFn, push, parentComponent, slotScopeId);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxtjs/mdc",
-  "version": "0.9.5",
+  "version": "0.11.0",
   "description": "Nuxt MDC module",
   "repository": "nuxt-modules/mdc",
   "license": "MIT",
@@ -72,16 +72,18 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.14.1592",
-    "@shikijs/transformers": "^1.23.1",
+    "@shikijs/transformers": "^1.24.1",
     "@types/hast": "^3.0.4",
     "@types/mdast": "^4.0.4",
     "@vue/compiler-core": "^3.5.13",
     "consola": "^3.2.3",
-    "debug": "^4.3.7",
+    "debug": "^4.4.0",
     "defu": "^6.1.4",
     "destr": "^2.0.3",
     "detab": "^3.0.2",
     "github-slugger": "^2.0.0",
+    "hast-util-format": "^1.1.0",
+    "hast-util-to-mdast": "^10.1.1",
     "hast-util-to-string": "^3.0.1",
     "mdast-util-to-hast": "^13.2.0",
     "micromark-util-sanitize-uri": "^2.0.1",
@@ -90,17 +92,20 @@
     "pathe": "^1.1.2",
     "property-information": "^6.5.0",
     "rehype-external-links": "^3.0.0",
+    "rehype-minify-whitespace": "^6.0.2",
     "rehype-raw": "^7.0.0",
+    "rehype-remark": "^10.0.0",
     "rehype-slug": "^6.0.0",
     "rehype-sort-attribute-values": "^5.0.1",
     "rehype-sort-attributes": "^5.0.1",
     "remark-emoji": "^5.0.1",
     "remark-gfm": "^4.0.0",
-    "remark-mdc": "^3.4.0",
+    "remark-mdc": "^3.5.0",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.1",
+    "remark-stringify": "^11.0.0",
     "scule": "^1.3.0",
-    "shiki": "^1.23.1",
+    "shiki": "^1.24.1",
     "ufo": "^1.5.4",
     "unified": "^11.0.5",
     "unist-builder": "^4.0.0",
@@ -110,26 +115,26 @@
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",
-    "@nuxt/eslint-config": "^0.7.1",
+    "@nuxt/eslint-config": "^0.7.2",
     "@nuxt/module-builder": "^0.8.4",
     "@nuxt/schema": "^3.14.1592",
-    "@nuxt/test-utils": "^3.14.4",
-    "@nuxt/ui": "^2.19.2",
+    "@nuxt/test-utils": "^3.15.1",
+    "@nuxt/ui": "^2.20.0",
     "@nuxtjs/mdc": "link:.",
-    "@types/node": "^22.9.1",
+    "@types/node": "^22.10.1",
     "changelogen": "^0.5.7",
-    "eslint": "^9.15.0",
+    "eslint": "^9.16.0",
     "nuxt": "^3.14.1592",
     "rehype": "^13.0.2",
     "release-it": "^17.10.0",
-    "typescript": "^5.6.3",
-    "vitest": "^2.1.5",
+    "typescript": "5.6.3",
+    "vitest": "^2.1.8",
     "vue-tsc": "^2.1.10"
   },
   "resolutions": {
     "@nuxtjs/mdc": "workspace:*"
   },
-  "packageManager": "pnpm@9.14.1",
+  "packageManager": "pnpm@9.15.0",
   "release-it": {
     "git": {
       "commitMessage": "chore(release): release v${version}"