How to make attributes case insensitive before add the data?

[reypmusb]

I have the following code which is intended to parse markdown content in a Remark directive. Valid markdown until now has been:

:::notice{note}
A note
:::

:::notice{warning}
A warning
:::

Now I want (and have tried) to add support for the following "less-valid" examples (make it case insensitive):

:::notice{Note}
A note
:::

:::notice{NoTE}
A note
:::

:::notice{NOTE}
A note
:::

but I can't make it to work, with the first two examples it works like a charm, for the other ones Note, NoTE and NOTE it does not work, the resulting node comes out without any data and I can't find where my issue is. Can I get some ideas?

import { ContainerDirective, LeafDirective, TextDirective } from 'mdast-util-directive'
import type { Element } from 'hast'
import { toHast } from 'mdast-util-to-hast'

function processNotice(node: TextDirective | LeafDirective | ContainerDirective) {
  const allowedTypes = ['warning', 'important', 'note', 'tip', 'info']

  // @ts-ignore
  const firstElementKey = Object.keys(node.attributes)[0]
  let currentType: string | undefined = ''

  // @ts-ignore
  if (Object.hasOwn(node.attributes, 'title')) {
    // @ts-ignore
    currentType = String(node.attributes.title).toLowerCase()
  } else if (allowedTypes.indexOf(firstElementKey) !== -1) {
    currentType = firstElementKey.toLowerCase()
  } else {
    console.error('notice directive: invalid type', node)
    return
  }

  if (!allowedTypes.includes(currentType)) {
    console.error('Notice directive: invalid type', node)
    return
  }

  node.data = node.data ?? {}
  node.data.hName = 'section'
  node.data.hProperties = {
    className: 'sc-notice ' + currentType,
  }

  const icon: Element = {
    type: 'element',
    tagName: 'svg',
    properties: {
      className: 'notice-icon',
      variant: currentType,
    },
    children: [],
  }

  const content: Element = {
    type: 'element',
    tagName: 'p',
    properties: {
      className: node.name + '-icon',
    },
    children: [
      {
        type: 'text',
        value: currentType,
      },
    ],
  }

  node.data.hChildren = [
    {
      type: 'element',
      tagName: 'div',
      properties: {
        className: 'notice-title',
      },
      children: [icon, content],
    },
    {
      type: 'element',
      tagName: 'div',
      properties: {
        className: 'notice-content',
      },
      // @ts-expect-error not all content types can be translated as inner content of element
      children: node.children.map(toHast),
    },
  ]
}

export default processNotice

the above code is using from a ReactMarkdown component:

<ReactMarkdown
      remarkPlugins={[
        remarkGfm,
        [remarkFrontmatter, ['yaml', 'toml']],
        remarkHtml,
        remarkParse,
        remarkBreaks,
        [remarkMermaid],
        remarkDirective,
        shortcodePlugin,
        remarkUnwrapImages,
        [imgLinks, { absolutePath: process.env.CONTENT_DOMAIN }],
      ]}
      rehypePlugins={[
        rehypeSlug,
        rehypeExternalLinks,
        rehypeRaw
      ]}
      remarkRehypeOptions={{allowDangerousHtml: true}}
    >
      {data}
    </ReactMarkdown>

ShortcodePlugin.ts

import type {Root} from 'mdast'
import {visit} from 'unist-util-visit'
import processNotice from './Shortcodes/Notice'

/**
 * Plugin to support custom shortcodes(aka directives)
 *
 * @type {import('unified').Plugin<void[], Root>}
 */
const shortcodePlugin: import('unified').Plugin<[], Root> = function() {
  return (tree) => { 
    visit(
      tree,
      (node, index, parent) => {
        if ('name' in node && typeof index === 'number' && parent) {
          if (node.type === 'containerDirective' || node.type === 'leafDirective' || node.type === 'textDirective') {
            switch (node.name) {
               case 'notice':
                processNotice(node)
                break
              case 'image':
                processImage(node, index, parent)
                break;
              default:
            }
          }
        }
      })
  }
}

export default shortcodePlugin

[wooorm]

I’d do something along these lines:

const caseInsensitiveAttributeNames = new Set(['note', 'warning'])
let key

for (key in node.attributes) {
    const lower = key.toLowerCase()

    if (key !== lower && caseInsensitiveAttributeNames.has(lower)) {
        node.attributes[lower] = node.attributes[key]
        delete node.attributes[key]
    }
}