😎 Discover cool tips and tricks for customization in our next Developer Deep Dive virtual event - sign up now!

Migrating Document Actions and Badges

Document Actions lets you customize and control operations user can perform on a document. When you create a custom action it will be available in the actions menu in the document editor. A common use case is intercepting the publish action of a document to make changes to it before actually publishing.

The document action resolver part from v2 is replaced by tools such as {DocumentActionComponent, PublishAction, useAction} from the sanity package. The document.actions property accepts a callback function which is invoked with an array of any previous values as the first argument and the config context as the second.

This is an example of document action resolving in v2:

// sanity.json
{
  "root": true,
  "project": {
    "name": "My Project"
  },
  // ...
  "parts": [
    {
      "implements": "part:@sanity/base/document-actions/resolver", 
      "path": "./resolveDocumentActions.js" 
    }
  ]
}

// ./resolveDocumentActions.js
import defaultResolve from 'part:@sanity/base/document-actions'

import {HelloWorldAction} from './HelloWorldAction'

export default function resolveDocumentActions(props) {
  return [...defaultResolve(props), HelloWorldAction]
}

In v3, you would do it like this:

// sanity.config.ts
import {defineConfig} from 'sanity'
import {MyPublishAction} from './actions/MyPublishAction'

export default defineConfig({
  name: 'default',
  title: 'My Cool Project',
  projectId: 'my-project-id',
  dataset: 'production',
  document: {
    // no more need for `defaultResolve(props)`
    actions: (prev) =>
      prev.map((previousAction) =>
        previousAction.action === 'publish' ? MyPublishAction : previousAction
      ),
  },
})

// ./actions/MyPublishAction.ts
import {DocumentActionComponent, PublishAction, useAction} from 'sanity'

export const MyPublishAction: DocumentActionComponent = (props) => {
  const {label, ...rest} = PublishAction(props)
  return {label: 'My Publish', ...rest}
}

Feedback or questions?

These guides are under development. If you have questions or suggestions for improvement, then we want to hear from you. Get in touch via our GitHub discussions page.

Was this article helpful?