How can you pass the href to a defaultRichTextElements for the <a> HTML element?

[scottdickerson]

The example here describes that anchor tags <a can be formatted to apply design system rules. However, I don't understand how to pass the href to the custom formatting function.

I've tried to parse the ...chunks function parameter based on some convention but those are returned as ReactNode[] not string[] so I can't map any of them to the href attribute of the <a tag.

   defaultRichTextElements={{
          a: (...chunks) => {
            // expects Markdown syntax for links in the
            console.log('chunks', chunks)
            const linksAndText = chunks.match(/(text) (link)/)
            return <a href={linksAndText[1]}>{linksAndText[0]}</a>
          }
        }}

Console:

chunks [Array(1)]0: ['permission http://www.cnn.com']length: 1[[Prototype]]: Array(0)
react_devtools_backend.js:4012 Error: [@formatjs/intl Error FORMAT_ERROR] Error formatting message: "repositoryPermissionNeeded", using id as fallback.
MessageID: repositoryPermissionNeeded
Default Message: undefined
Description: undefined

Locale: en


chunks.match is not a function
TypeError: chunks.match is not a function

Is there a way to somehow pass this href attribute in the message?

This is the issue where this functionality was added:
#1752