Is it possible to set height and width attributes while building an Image mdast node?

[reypm]

I have this piece of code that is processing a container directive:

import type { VFile } from 'vfile'
import type { ContainerDirective } from 'mdast-util-directive'
import { Image, Paragraph } from 'mdast'

const processImage = (
  node: ContainerDirective,
  index: number,
  parent: any,
  file: VFile
) => {
  const imgPath = node?.attributes?.id

  // Require a `imgPath` attribute, crash otherwise.
  if (typeof imgPath !== 'string') {
    file.fail('Expected `imgPath` attribute on image directive', node)
  }

  const img: Image = {
    type: 'image',
    url: imgPath,
    alt: node?.attributes?.alt || undefined,
    title: null
  }

  // Images cannot be directly in things. They are phrasing content.
  const paragraph: Paragraph = {
    type: 'paragraph',
    children: [img]
  }

  // Replace directive with paragraph.
  parent.children.splice(index, 1, paragraph)
}

export default processImage

the directive looks like:

:::image{id="<string>" alt="<string>" max-height="<number>" max-width="<number>"}
:::

is there any way that I can pass those two max-height and max-width to be height and width for the HTML img attributes?

[ChristianMurphy]

Heya @reypm 👋

is there any way that I can pass those two max-height and max-width to be height and width for the HTML img attributes?

Yes, by using data.hProperties on the newly created MDAST image node, you can add any HTML property you would like.
Similar to how you used it to add className in your last discussion thread https://github.com/orgs/syntax-tree/discussions/113#discussion-5544677