feat(presentation): allow passing custom header component

sanity-io / visual-editing

MIT License

37 stars 20 forks source link

PR to allow passing a custom preview header component via components.unstable_header in the plugin config, similar to unstable_navigator.

This component passed replaces the entire preview header bar, so it also receives a renderDefault prop for convenience. In practice, this allows users to prepend or append a button/control/whatever to the preview header, as in this screenshot. This is maybe not fine-grained enough, as users may want to insert a component at some intermediate position.

Example component which appends a button:

import type {PreviewHeaderProps} from "@sanity/presentation"
// other imports...

export const CustomHeader: FunctionComponent<PreviewHeaderProps> = (props) => {
  return (
    <>
      {props.renderDefault(props)}
      <Button
        icon={HomeIcon}
        onClick={() => {...}}
      />
    </>
  );
};

Please be honest with feedback/ideas for changes, this is not urgent so may be good to discuss more before merging.

Name	Status	Preview	Comments	Updated (UTC)
live-visual-editing-next	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 11, 2024 1:00pm
visual-editing-next	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 11, 2024 1:00pm
visual-editing-next-with-i18n	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 11, 2024 1:00pm
visual-editing-nuxt	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 11, 2024 1:00pm
visual-editing-page-builder-demo	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 11, 2024 1:00pm
visual-editing-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 11, 2024 1:00pm
visual-editing-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 11, 2024 1:00pm
visual-editing-svelte	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 11, 2024 1:00pm

Name

Status

Preview

Comments

Updated (UTC)

live-visual-editing-next

✅ Ready (Inspect)

Visit Preview

💬 Add feedback

Nov 11, 2024 1:00pm

visual-editing-next

✅ Ready (Inspect)