Export OrderableDocumentList component for use in views

[andrewmumblebee]

Is your feature request related to a problem? Please describe. In our site we have a multiple level navigation menu, the position of items on the navigation is determined by a parent child relationship between documents.

Each document has a parent reference field, which can be used to determine it's URL, i.e. a document with slug overview and parent with slug getting-started will have a generated URL getting-started/overview. Similar to say Vercel docs.

We needed a way to order nav items based on this relationship, so utilised this plugin, but initially had to have a weird deeply nested structure to get it so that we could allow editors to re-order the children of a document. As shown below, this worked, but at what cost 😆

This was because i couldn't figure out how to add this plugin in a better way, using the existing methods available.

I've now managed to improve the editing experience by using split views.

This was achieved by using the defaultDocumentNode method of the structure tool.

defaultDocumentNode: (S, options) => {
  if (options.schemaType === 'article') {
    // when viewing via orderable plugin, show children as first panel.
    if (window.location.pathname.includes('orderable-article')) {
      return S.document().views([
        S.view.component(OrderableView).title('Children'),
        S.view.form()
      ])
    }

    return S.document().views([
      S.view.form(),
      S.view.component(OrderableView).title('Children')
    ])
  }
}

My OrderableView component is simply this

const OrderableView: UserViewComponent = (props) => {
  const client = useSanityClient()

  return (
    <OrderableDocumentList
      options={{
        type: 'article',
        client,
        filter: '_type == "article" && parent._ref == $articleId',
        params: {articleId: props.document.displayed?._id}
      }}
    />
  )
}

However, i've had to copy across the OrderableDocumentList code from this repo temporarily to get it working, as this component isn't exported from the package, so i can't use it in npm.

Describe the solution you'd like

Add OrderableDocumentList to the exports in src/index.ts so that we can re-use this component in different places.

This plugin is super awesome, happy I've figured out a temporary solution, but would love to be able to use this plugin within document views aswell as list views.