diff options
author | 2024-12-02 14:37:00 +0000 | |
---|---|---|
committer | 2024-12-02 14:37:00 +0000 | |
commit | fa07002352147d45da193f28fd6e02d2d42dc67a (patch) | |
tree | 66492ef4ace0908eecbce5e2f85283acca055cb8 /packages/integrations/markdoc/src | |
parent | 15f000c3e7bc5308c39107095e5af4258c2373a5 (diff) | |
download | astro-fa07002352147d45da193f28fd6e02d2d42dc67a.tar.gz astro-fa07002352147d45da193f28fd6e02d2d42dc67a.tar.zst astro-fa07002352147d45da193f28fd6e02d2d42dc67a.zip |
fix(markdoc): correctly render boolean HTML attributes (#12584)
Diffstat (limited to 'packages/integrations/markdoc/src')
-rw-r--r-- | packages/integrations/markdoc/src/html/tagdefs/html.tag.ts | 39 |
1 files changed, 39 insertions, 0 deletions
diff --git a/packages/integrations/markdoc/src/html/tagdefs/html.tag.ts b/packages/integrations/markdoc/src/html/tagdefs/html.tag.ts index 92d086d1a..0c094227d 100644 --- a/packages/integrations/markdoc/src/html/tagdefs/html.tag.ts +++ b/packages/integrations/markdoc/src/html/tagdefs/html.tag.ts @@ -1,6 +1,37 @@ import type { Config, Schema } from '@markdoc/markdoc'; import Markdoc from '@markdoc/markdoc'; +const booleanAttributes = new Set([ + 'allowfullscreen', + 'async', + 'autofocus', + 'autoplay', + 'checked', + 'controls', + 'default', + 'defer', + 'disabled', + 'disablepictureinpicture', + 'disableremoteplayback', + 'download', + 'formnovalidate', + 'hidden', + 'inert', + 'ismap', + 'itemscope', + 'loop', + 'multiple', + 'muted', + 'nomodule', + 'novalidate', + 'open', + 'playsinline', + 'readonly', + 'required', + 'reversed', + 'selected', +]); + // local import { parseInlineCSSToReactLikeObject } from '../css/parse-inline-css-to-react.js'; @@ -18,6 +49,14 @@ export const htmlTag: Schema<Config, never> = { // pull out any "unsafe" attributes which need additional processing const { style, ...safeAttributes } = unsafeAttributes as Record<string, unknown>; + // Convert boolean attributes to boolean literals + for (const [key, value] of Object.entries(safeAttributes)) { + if (booleanAttributes.has(key)) { + // If the attribute exists, ensure its value is a boolean + safeAttributes[key] = value === '' || value === true || value === 'true'; + } + } + // if the inline "style" attribute is present we need to parse the HTML into a react-like React.CSSProperties object if (typeof style === 'string') { const styleObject = parseInlineCSSToReactLikeObject(style); |