Get help on Discord

How to insert inline blocks (like current date/time) in Portable Text?

5 replies
Last updated: Aug 5, 2022
Here’s one I’m having a hard time with.
I would like to create an “inline-block” in my portable text, such that I could have a way to insert the current date or time as a block. As far as I can tell, I cannot do this as a standalone thing, I would have to annotate text and use a mark to say it should display the current date before it or instead of it.

Is there another solution here that I’m not thinking of?
AI Update

Yes, you can absolutely create inline objects in Portable Text! You don't need to use annotations or marks for this.

The solution is to add your custom object type to the block's of array rather than the parent array's of. This makes the object appear inline within the text, rather than as a separate block.

Here's how to create an inline "current date" block:

{
  type: 'block',
  of: [
    {
      type: 'object',
      name: 'currentDate',
      title: 'Current Date',
      fields: [
        {
          name: 'format',
          type: 'string',
          options: {
            list: ['short', 'long', 'relative']
          }
        }
      ],
      // Optional: add an icon for the toolbar
      icon: () => '📅',
      // Optional: customize the preview
      components: {
        preview: {
          select: {
            format: 'format'
          },
          prepare({format}) {
            return {
              title: `📅 ${format || 'default'} date`
            }
          }
        }
      }
    }
  ]
}

The key difference is that objects in block.of appear inline within the text (like you can insert them mid-sentence), whereas objects in the parent array's of appear as separate block-level items.

When rendering on the frontend, you can use the Portable Text libraries to handle these inline objects. They'll have an isInline property you can check:

const components = {
  types: {
    currentDate: ({value, isInline}) => {
      const date = new Date();
      const format = value?.format || 'short';
      // Format according to preference
      return <span>{date.toLocaleDateString()}</span>;
    }
  }
}

This gives you true inline objects that editors can insert anywhere in the text, and they'll dynamically display the current date/time when rendered. Much cleaner than using annotations!

Show original thread
5 replies
I’m pretty sure you‘re correct, you’ll have to annotate the text and get rid of its content if you don’t use it.
gotcha, thank you for the reply. That’s what i ended up doing
You can make inline blocks though!
{
  type: 'block',
  of: [{type: 'currentDate' }] // <= must be an object type (I think)
}

The 
currentDate
object can type can also have an initial value that puts a predefined string
Juxtaposition may be helpful to underline this, because regular custom blocks can seem inline, whereas what
user Y
is saying is truly inline.
On the left is a similar example from the docs, juxtaposed on the right with a custom block that
follows after the editor block in the array that houses them, instead of being a specific of qualifier.
The ones he is showing you how to do are really powerful
because they can be right in the middle of text and I am always surprised to see how uncommon they are because of the utility they provide.

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?