diff --git a/.changeset/twenty-lobsters-think.md b/.changeset/twenty-lobsters-think.md new file mode 100644 index 0000000000..de52155c19 --- /dev/null +++ b/.changeset/twenty-lobsters-think.md @@ -0,0 +1,5 @@ +--- +'@astrojs/markdoc': patch +--- + +Correctly renders boolean HTML attributes diff --git a/packages/integrations/markdoc/src/html/tagdefs/html.tag.ts b/packages/integrations/markdoc/src/html/tagdefs/html.tag.ts index 92d086d1aa..0c094227df 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 = { // pull out any "unsafe" attributes which need additional processing const { style, ...safeAttributes } = unsafeAttributes as Record; + // 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); diff --git a/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/simple.mdoc b/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/simple.mdoc index eaea6646a8..30b9b7f8fb 100644 --- a/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/simple.mdoc +++ b/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/simple.mdoc @@ -9,3 +9,7 @@ This is a simple Markdoc postThis is a paragraph!

This is a span inside a paragraph!

+ + \ No newline at end of file diff --git a/packages/integrations/markdoc/test/render-html.test.js b/packages/integrations/markdoc/test/render-html.test.js index 6f877d1e50..5bf7fe5cef 100644 --- a/packages/integrations/markdoc/test/render-html.test.js +++ b/packages/integrations/markdoc/test/render-html.test.js @@ -123,6 +123,11 @@ function renderSimpleChecks(html) { const p3 = document.querySelector('article > p:nth-of-type(3)'); assert.equal(p3.children.length, 1); assert.equal(p3.textContent, 'This is a span inside a paragraph!'); + + const video = document.querySelector('video'); + assert.ok(video, 'A video element should exist'); + assert.ok(video.hasAttribute('autoplay'), 'The video element should have the autoplay attribute'); + assert.ok(video.hasAttribute('muted'), 'The video element should have the muted attribute'); } /** @param {string} html */