'Hacking' custom Document Actions 😇

A little 'hack' when you work on custom Document actions

DividerAction.ts

const DividerAction = () => {
  return {
    label: '------------------------',
    disabled: true,
  };
};

export default DividerAction;

TitleSectionAction.ts

const TitleSectionAction = () => {
  return {
    label: 'My Section',
    disabled: true,
  };
};

export default TitleSectionAction;

sanity.config.ts

import DividerAction from './DividerAction';
import TitleAction from './TitleAction';
import CustomAction1 from './CustomAction1';
import CustomAction2 from './CustomAction2';

export default defineConfig({
  // ... other configuration
  document: {
    actions: (prev, context) => {
      prev.splice(1, 0, TitleAction);
      prev.splice(2, 0, CustomAction1);
      prev.splice(3, 0, CustomAction2);
      prev.splice(4, 0, SpacerAction);
      return prev;
    },
  },
  // ... other configuration
});

I don't know if there is a better or proper way to do it but my end goal was to visually separate my custom actions from the default ones.

With this little 'hack' I'm able to have a separate section with my custom actions defined.

In sanity.config file, my custom actions start from index 1 (screenshot).

Contributor

William Iommi

Junior/Senior/Lead Frontend @ Syskoplan Reply IT

Italy