@sanity/orderable-document-list

@sanity/orderable-document-list

NOTE

This is the Sanity Studio v3 version of @sanity/orderable-document-list.

For the v2 version, please refer to the v2-branch.

What is it?

Drag-and-drop Document Ordering without leaving the Editing surface.

This plugin aims to be OS-like in that you can select and move multiple documents by holding shift and clicking a second item, and toggling on/off selections by holding command/control.

Requirements

A Sanity Studio with Desk Structure configured:

import {createConfig} from "sanity";
import {deskTool, StructureBuilder} from "sanity/desk";

export default createConfig({
    //...
    plugins: [
        deskTool({
            structure: (S, context) => { /* Strucure code */},
        })
    ]
})

Installation

Run the following command in your studio directory

npm install --save @sanity/orderable-document-list@studio-v3

or

yarn add @sanity/orderable-document-list@studio-v3

Usage

1. Import the Document List into your Desk Structure

The config parameter requires type, S and context. It also accepts title, icon, filter and params. S and context are available in desk-tool structure callback, and should be forwarded as is:

import {createConfig} from "sanity";
import {deskTool, StructureBuilder} from "sanity/desk";
import {orderableDocumentListDeskItem} from '@sanity/orderable-document-list'

export default createConfig({
    //...
    plugins: [
        deskTool({
            structure: (S, context) => { 
                return  S.list()
                    .title('Content')
                    .items([
                        // Minimum required configuration
                        orderableDocumentListDeskItem({type: 'category', S, context}),

                        // Optional configuration
                        orderableDocumentListDeskItem({
                            type: 'project',
                            title: 'Projects',
                            icon: Paint,
                            // Required if using multiple lists of the same 'type'
                            id: 'orderable-en-projects',
                            // See notes on adding a `filter` below
                            filter: `__i18n_lang == $lang`,
                            params: {
                                lang: 'en_US'
                            },
                            // pass from the structure callback params above
                            S, 
                            context
                        }),

                        // ... all other desk items
                ])
            },
        })
    ]
})

Caution: Adding a filter

By default, the plugin will display all documents of the same type. However, you may wish to add a filter to reduce this down to a subset of documents. A typical usecase is for internationalized document schema to order documents of just the base language version.

However, order ranks are still computed based on all documents of the same type. Creating multiple lists with different filter settings could produce unexpected results.

2. Add the orderRank field to your schema(s).

You must pass in the type of the schema and the schema context, to create an initialValue value. Context is available in the schema callback, and should be forwarded as is.

Additionally, pass in overrides for the field, such as making it visible by passing hidden: false.

You cannot override the name, type or initialValue attributes.

// sanity.config.js
import {createConfig} from "sanity";
import {deskTool, StructureBuilder} from "sanity/desk";
import {orderableDocumentListDeskItem} from '@sanity/orderable-document-list'

export default createConfig({
    //...
    plugins: [
        deskTool({structure: (S, context) => {/* snip */}})
    ],
    schema: {
        types: (previousTypes) => {
            return [
                ...previousTypes, 
                {
                    name: "category",
                    title: "Category",
                    type: "document",
                    // Optional: The plugin also exports a set of 'orderings' for use in other Document Lists
                    // https://www.sanity.io/docs/sort-orders
                    orderings: [orderRankOrdering],
                    fields: [
                        // Minimum required configuration
                        orderRankField({ type: "category" }),

                        // OR you can override _some_ of the field settings
                        orderRankField({ type: 'category', hidden: false }),

                        // ...all other fields
                    ],
                },
            ]
        }
    }
}

3. Generate initial Ranks

On first load, your Document list will not have any Order. You can select "Reset Order" from the menu in the top right of the list. You can also re-run this at any time.

The orderRankField will query the last Document to set an initialValue to come after it. New Documents always start at the end of the Ordered list.

Querying Ordered Documents

Now when writing a GROQ Query for Documents, use the orderRank field value to return ordered results:

*[_type == "category"]|order(orderRank)

Notes

To get this first version out the door there are few configuration settings and a lot of opinions. Such as:

• The name of the orderRank field is constant
• The ability to only sort across all Documents of a type

Feedback and PRs welcome :)

Breaking change in the v3 version

orderableDocumentListDeskItem requires context from sanity config now. See the examples above.

How it works

Uses kvandakes's TypeScript implementation of Jira's Lexorank to create a "lexographical" Document order.

Put simply it updates the position of an individual – or many – Documents in an ordered list without updating any others. It's fast.

License

MIT © Simeon Griggs See LICENSE

Develop & test

This plugin uses @sanity/plugin-kit with default configuration for build & watch scripts.

See Testing a plugin in Sanity Studio on how to run this plugin with hotreload in the studio.d & watch

Release new version

Run "CI & Release" workflow. Make sure to select the v3 branch and check "Release new version".

Version will be automatically bumped based on conventional commits since the last release.

Semantic release will only release on configured branches, so it is safe to run release on any branch.