mirror of
https://github.com/facebook/docusaurus.git
synced 2025-07-14 23:37:59 +02:00
fix(mdx-loader): improve mdxJsxTextElementToHtml (#9262)
This commit is contained in:
parent
b3c8f5c929
commit
9868babf75
3 changed files with 45 additions and 5 deletions
|
@ -8,26 +8,57 @@
|
|||
import escapeHtml from 'escape-html';
|
||||
import type {Parent} from 'unist';
|
||||
import type {PhrasingContent, Heading} from 'mdast';
|
||||
// @ts-expect-error: TODO see https://github.com/microsoft/TypeScript/issues/49721
|
||||
import type {MdxJsxAttributeValueExpression} from 'mdast-util-mdx';
|
||||
import type {
|
||||
MdxJsxAttribute,
|
||||
MdxJsxAttributeValueExpression,
|
||||
MdxJsxTextElement,
|
||||
// @ts-expect-error: TODO see https://github.com/microsoft/TypeScript/issues/49721
|
||||
} from 'mdast-util-mdx';
|
||||
|
||||
export function stringifyContent(
|
||||
node: Parent,
|
||||
toString: (param: unknown) => string, // TODO weird but works): string {
|
||||
toString: (param: unknown) => string, // TODO weird but works
|
||||
): string {
|
||||
return (node.children as PhrasingContent[])
|
||||
.map((item) => toValue(item, toString))
|
||||
.join('');
|
||||
}
|
||||
|
||||
// TODO This is really a workaround, and not super reliable
|
||||
// For now we only support serializing tagName, className and content
|
||||
// Can we implement the TOC with real JSX nodes instead of html strings later?
|
||||
function mdxJsxTextElementToHtml(
|
||||
element: MdxJsxTextElement,
|
||||
toString: (param: unknown) => string, // TODO weird but works
|
||||
): string {
|
||||
const tag = element.name;
|
||||
|
||||
const attributes = element.attributes.filter(
|
||||
(child): child is MdxJsxAttribute => child.type === 'mdxJsxAttribute',
|
||||
);
|
||||
|
||||
const classAttribute =
|
||||
attributes.find((attr) => attr.name === 'className') ??
|
||||
attributes.find((attr) => attr.name === 'class');
|
||||
|
||||
const classAttributeString = classAttribute
|
||||
? `class="${escapeHtml(String(classAttribute.value))}"`
|
||||
: ``;
|
||||
|
||||
const allAttributes = classAttributeString ? ` ${classAttributeString}` : '';
|
||||
|
||||
const content = stringifyContent(element, toString);
|
||||
|
||||
return `<${tag}${allAttributes}>${content}</${tag}>`;
|
||||
}
|
||||
|
||||
export function toValue(
|
||||
node: PhrasingContent | Heading,
|
||||
toString: (param: unknown) => string, // TODO weird but works
|
||||
): string {
|
||||
switch (node.type) {
|
||||
case 'mdxJsxTextElement': {
|
||||
const tag = node.name;
|
||||
return `<${tag}>${stringifyContent(node, toString)}</${tag}>`;
|
||||
return mdxJsxTextElementToHtml(node as MdxJsxTextElement, toString);
|
||||
}
|
||||
case 'text':
|
||||
return escapeHtml(node.value);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue