Plugin for Phone Numbers

[steverecio]

Plugin to auto-link phone numbers with a tel:XXX href value

[Murderlon]

If you want to make a custom plugin yourself I believe @ChristianMurphy gave a good starting point in the initial issue you raised this: remarkjs/react-markdown#655 (comment).

[steverecio]

Started working on this here: https://github.com/steverecio/remark-phones/

I'm running into the question of whether remark plugins are supposed to return HTML or markdown. I read the guide and tried referencing other remarkjs plugins but nothing seems to answer that question for me.

If I want to write a plugin for autolinking items, should the plugin convert to HTML tags or markdown links?

[steverecio]

FWIW, I'm using the plugin in the following way:

<ReactMarkdown
    children={markdownStr}
    remarkPlugins={[remarkGfm, remarkPhones]} />

[ChristianMurphy]

remark plugins update mdast/markdown, that is then later turned into HTML by https://github.com/remarkjs/remark-rehype
It could also be made a rehype plugin and work on hast/HTML

Either way could work, but from what you are describing currently, it would generate markdown nodes https://github.com/syntax-tree/mdast (likely a link node)

[wooorm]

When working with plugins I recommend looking through existing plugins and finding something similar to what you want to achieve. One such example is https://github.com/remarkjs/remark-github.

Here’s something that might help you get started:

import {findAndReplace} from 'mdast-util-find-and-replace'

/** @type {import('unified').Plugin<Array<void>, import('mdast').Root>} */
export default function myRemarkTelephonePlugin() {
  return (tree) => {
    // To do: fix regex.
    findAndReplace(tree, /tel:(\d+)/g, (_, telephoneNumber) => {
      // To do: normalize phone number. Use `libphonenumber`?
      return {type: 'link', title: null, url: 'tel:' + telephoneNumber, children: [telephoneNumber]}
    }, {ignore: ['link', 'linkReference']})
  }
}