The block handle

The moves one block can make as a whole: dragged by its grip, or up and down. Which block it stands for is the caller's, usually one of RichText.blocksAt(document, selection): the outermost to move a whole list, an item to reorder a list.

import * as RichText from 'foldkit-richtext'
import { blockAnchor } from 'foldkit-richtext-dom/toolbar'
import { blockHandle } from 'foldkit-mixins-richtext'

const [outermost] = RichText.blocksAt(model.document, model.editor.selection)

// Drawn beside its block, in an element `blockAnchor` places and the block keys.
outermost === undefined
  ? h.empty
  : h.div(
      [h.Key(outermost.id), h.OnMount(blockAnchor({ hostId: 'body', node: outermost.id, gap: 8 }))],
      [
        blockHandle<Message>()(
          { document: model.document, hostId: 'body', node: outermost.id, wrap: edited },
          h,
        ),
      ],
    )

• The grip drags the block anywhere the vocabulary lets it stand (blockDrag). It is out of the tab order, since a drag has no keyboard form.
• Up and down send MovedBlock to put the block before its previous sibling or after its next. They move it only within its container, so moving it into another one has no keyboard path yet. Each is disabled at its end of the container, and both when the block is not in the document.
• The key matters. A Mount reads its args once, when its element is inserted, so without it the handle would stay beside, and drag, the first block the caret visited.