Config option to insert new item at start of list

README.md

@@ -161,6 +161,15 @@ You can also re-run this at any time.
 The `orderRankField` will query the last/first Document to set an `initialValue` to come after/before it.
 The placement of new documents can be configured by `newItemPosition` on the `orderRankField` in the document.
 
+### 4. Position of new items
+
+New Documents appear at the end of the list by default. You can configure where new Documents are inserted by configuring `orderRankField` with the optional `newItemPosition` option:
+
+```typescript
+// default value of newItemPosition is "after"
+orderRankField({ type: "category", newItemPosition: "before" }),
+```
+
 ## Querying Ordered Documents
 
 Now when writing a GROQ Query for Documents, use the `orderRank` field value to return ordered results:

package.json

@@ -1,6 +1,6 @@
 {
  "name": "@sanity/orderable-document-list",
- "version": "1.2.1",
+ "version": "1.2.0",
  "description": "Drag-and-drop Document Ordering without leaving the Editing surface",
  "keywords": [
  "sanity",

src/Document.tsx

@@ -1,5 +1,5 @@
 import {useContext, useMemo, type ReactNode} from 'react'
-import {ChevronDownIcon, ChevronUpIcon, DragHandleIcon} from '@sanity/icons'
+import {ChevronDownIcon, ChevronUpIcon, DoubleChevronUpIcon, DragHandleIcon} from '@sanity/icons'
 import {AvatarCounter, Card, Box, Button, Flex, Text} from '@sanity/ui'
 import {useSchema, SchemaType, PreviewCard, Preview} from 'sanity'
 import {usePaneRouter} from 'sanity/structure'
@@ -88,6 +88,15 @@ export default function Document({
  onClick={() => increment(index, index + 1, doc._id, entities)}
  icon={ChevronDownIcon}
  />
+
+ <Button
+ padding={2}
+ mode="ghost"
+ disabled={isFirst}
+ // eslint-disable-next-line react/jsx-no-bind
+ onClick={() => increment(index, 0, doc._id, entities)}
+ icon={DoubleChevronUpIcon}
+ />
  </Flex>
  )}
  <Box style={{width: `100%`}}>

src/fields/orderRankField.ts

@@ -21,6 +21,7 @@ export const orderRankField = (config: RankFieldConfig) => {
  }
 
  const {type, newItemPosition = 'after'} = config
+
  return defineField({
  title: 'Order Rank',
  readOnly: true,

src/helpers/prevRank.ts

@@ -0,0 +1,10 @@
+import {LexoRank} from 'lexorank'
+
+// Use in initial value field by passing in the rank value of the last document
+// If not value passed, generate a sensibly low rank
+export default function prevRank(lastRankValue = ``): string {
+ const lastRank = lastRankValue ? LexoRank.parse(lastRankValue) : LexoRank.min()
+ const nextRank = lastRank.genPrev()
+
+ return nextRank.toString()
+}