How to use the @sanity/block-tools.randomKey function in @sanity/block-tools

handleClick = (item: AnnotationItem, originalSelection: Range) => {
    const {editor, onFocus} = this.props
    if (item.disabled) {
      return
    }
    const key = randomKey(12)
    editor.command('toggleAnnotation', {annotationName: item.value, key})
    if (editor.value.startInline) {
      // Make the block editor focus the annotation input if we added an annotation
      editor.blur()
      const focusPath = [
        {_key: editor.value.focusBlock.key},
        'markDefs',
        {_key: key},
        FOCUS_TERMINATOR
      ]
      setTimeout(() => {
        onFocus(focusPath)
      }, 200)
      return
    }
    editor.command('focusNoScroll')

onCommand(command: any, editor: SlateEditor, next: (arg0: void) => void) {
      if (command.type !== 'insertInlineObject') {
        return next()
      }
      const options = command.args[0] || {}
      const {objectType} = options
      const key = options.key || randomKey(12)
      const inlineProps = {
        key,
        type: objectType.name,
        isVoid: true,
        data: {
          _key: key,
          value: {_type: objectType.name, _key: key}
        }
      }
      const inline = Inline.create(inlineProps)
      editor.insertInline(inline)

      // Normalize the keys in the block nodes to match what is sent to gradient
      const inlinePath = editor.value.selection.focus.path
      const block = editor.value.focusBlock
      editor.replaceNodeByKey(block.key, normalizeBlock(block))

onCommand(command: any, editor: SlateEditor, next: (arg0: void) => void) {
      if (command.type !== 'insertBlockObject') {
        return next()
      }
      const options = command.args[0] || {}
      const {objectType} = options
      const key = options.key || randomKey(12)
      const block = Block.create({
        type: objectType.name,
        isVoid: true,
        key: key,
        data: {
          _key: key,
          value: {_type: objectType.name, _key: key}
        }
      })
      const {focusBlock} = editor.value
      // If the focusBlock is not void and empty, replace it with the block to insert
      if (
        focusBlock &&
        !editor.query('isVoid', focusBlock) &&
        focusBlock.nodes.size === 1 &&
        focusBlock.text === ''

onCommand(command: any, editor: SlateEditor, next: (arg0: void) => void) {
      if (command.type !== 'toggleAnnotation') {
        return next()
      }
      const spans = editor.value.inlines.filter(inline => inline.type === 'span')
      const options = command.args[0] || {}
      const {annotationName} = options
      const key = options.key || randomKey(12)

      // Add annotation
      if (spans.size === 0) {
        return editor.command('wrapSpan', {key, annotationName})
      }

      // Remove annotation
      spans.forEach(span => {
        const annotations = span.data.get('annotations')
        if (!annotations || !annotations[annotationName]) {
          return
        }
        // Remove the whole span if this annotation is the only one left
        if (Object.keys(annotations).length === 1 && annotations[annotationName]) {
          editor.unwrapInlineByKey(span.key)
          return

const keyGenerator = () => randomKey(12)
KeyUtils.setGenerator(keyGenerator)

export default function createEmptyBlock(blockContentFeatures, options: Opts = {}) {
  const key = options.key || randomKey(12)
  const raw = {
    _key: key,
    _type: 'block',
    children: [
      {
        _type: 'span',
        _key: `${key}0`,
        text: '',
        marks: []
      }
    ],
    style: options.style || 'normal'
  }
  const allowedDecorators = blockContentFeatures.decorators.map(item => item.value)
  return deserialize([normalizeBlock(raw, {allowedDecorators})], blockContentFeatures.types.block).document.nodes.first()
}

function processNode(node, editor) {
  if (!node.get('nodes')) {
    return node
  }

  const newKey = blockTools.randomKey(12)

  const SlateType = node.constructor
  const newData = node.get('data') ? node.get('data').toObject() : {}
  newData._key = newKey
  if (newData.value && newData.value._key) {
    newData.value._key = newKey
  }
  if (newData.annotations) {
    Object.keys(newData.annotations).forEach(key => {
      newData.annotations[key]._key = blockTools.randomKey(12)
    })
  }
  return new SlateType({
    data: Data.create(newData),
    isVoid: editor.query('isVoid', node),
    key: newKey,

if (key !== 'Enter' || shiftKey) {
        return next()
      }
      const {value} = editor
      const isTextBlock = value.blocks.some((block: Block) => block.data.get('style'))
      const isListNode = value.blocks.some((block: Block) => block.data.get('listItem'))
      const {startBlock} = value
      if (
        isListNode ||
        !isTextBlock ||
        value.selection.isExpanded ||
        !value.selection.end.isAtEndOfNode(startBlock)
      ) {
        return next()
      }
      const blocKey = randomKey(12)
      event.preventDefault()
      editor.insertBlock({
        ...defaultBlock,
        key: blocKey,
        data: {...defaultBlock.data, _key: blocKey}
      })
      return editor
    }
  }

onCommand(command: any, editor: SlateEditor, next: (arg0: void) => void) {
      if (command.type !== 'wrapSpan') {
        return next()
      }
      const options = command.args[0] || {}
      const key = options.key || randomKey(12)
      const annotationName = options.annotationName || null
      const {selection} = editor.value
      if (!selection.isExpanded) {
        editor.command('expandToWord')
      }
      const originalSelection = editor.value.selection
      const span = {
        isVoid: false,
        type: 'span',
        object: 'inline',
        data: {
          annotations: {},
          focusedAnnotationName: null,
          originalSelection: originalSelection
        },
        key