Skip to content
🎤 Builder Talk: The Story Behind Lady Gaga’s Digital Experience – Register now
Get help on Slack

Adding a mailto reference in markdown/BlockContent in Sanity.io

17 replies
Last updated: Jun 16, 2022
Is there a way to add a 
mailto:
reference in markdown/BlockContent? I tried the following, to no avail:
[myEmail](mailto:myEmail)

Jun 16, 2022, 4:38 PM
url won’t validate a mailto automatically, you could use a string and create a custom validation rule
Jun 16, 2022, 4:39 PM
I need this to be markdown unfortunately, as this piece of formatted text content must feature an email that users can click on.
What do you mean by custom validation rule?
Jun 16, 2022, 4:40 PM
You need to implicitly add 
mailto
in the options
Jun 16, 2022, 4:41 PM
Jun 16, 2022, 4:41 PM
Jun 16, 2022, 4:41 PM
Awesome I didn’t know about that
Jun 16, 2022, 4:41 PM
as this piece of formatted text content must feature an email that users can click on.
on the front end?
Jun 16, 2022, 4:42 PM
Using the annotation (as you’ve done) in Studio will allow you to make it a link in the front-end
Jun 16, 2022, 4:42 PM
I'm assuming you mean to add this as an option within my 
blockContent
schema , not in this particular document's schema, right?
Jun 16, 2022, 4:43 PM
as in, in here? (near the bottom)

export default {
  title: 'Block Content',
  name: 'blockContent',
  type: 'array',
  of: [
    {
      title: 'Block',
      type: 'block',     
      styles: [
        {title: 'Normal', value: 'normal'},
        {title: 'H1', value: 'h1'},
        {title: 'H2', value: 'h2'},
        {title: 'H3', value: 'h3'},
        {title: 'H4', value: 'h4'},
        {title: 'Quote', value: 'blockquote'},
      ],
      lists: [{title: 'Bullet', value: 'bullet'}],
  
      marks: {
        decorators: [
          {title: 'Strong', value: 'strong'},
          {title: 'Emphasis', value: 'em'},
        ],
        annotations: [
          {
            title: 'URL',
            name: 'link',
            type: 'object',
            fields: [
              {
                title: 'URL',
                name: 'href',
                type: 'url',
              },
            ],
          },
        ],
      },
    },
    {
      type: 'image',
      options: {hotspot: true},
    },
  ],
}
Jun 16, 2022, 4:44 PM
yeah, here
annotations: [
          {
            title: 'URL',
            name: 'link',
            type: 'object',
            fields: [
              {
                title: 'URL',
                name: 'href',
                type: 'url',
validation: Rule => Rule.uri({
    scheme: ['http', 'https', 'mailto']
  })
              },
            ],
          },
        ],
Jun 16, 2022, 4:45 PM
If it’s just email addresses, you could rename it
Jun 16, 2022, 4:45 PM
{
                title: 'Email address',
                name: 'email',
                type: 'url',
validation: Rule => Rule.uri({
    scheme: ['mailto']
})
}

Jun 16, 2022, 4:45 PM
it should be also usable for external links
Jun 16, 2022, 4:45 PM
Let me check if this worked 🙂
Jun 16, 2022, 4:46 PM
btw I think you mean 
Rule.url
not .uri correct?
Jun 16, 2022, 4:48 PM
Worked! Thanks so much 🙂
Jun 16, 2022, 4:52 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?