How to use @sanity/block-tools - 10 common examples

function replaceValue(snapshot: null | JSONValue, editor: SlateEditor) {
    // console.log('Replacing value')
    if (snapshot) {
      const fragment = blocksToEditorValue(snapshot, blockContentType)
      // Store the old selection
      const select = createSelectionOperation(editor)
      editor.value.document.nodes.forEach(node => {
        editor.applyOperation({
          type: 'remove_node',
          path: [0],
          node: node
        })
      })
      fragment.document.nodes.reverse().forEach(node => {
        editor.applyOperation({
          type: 'insert_node',
          path: [0],
          node: node
        })
      })

function handlePaste(input) {
  const {event, type, path} = input
  const html = event.clipboardData.getData('text/html')
  // check if schema has the code type
  const hasCodeType = type.of.map(({name}) => name).includes('code')
  if (!hasCodeType) {
    console.log('Run `sanity install @sanity/code-input, and add `type: "code"` to your schema.')
  }
  if (html && hasCodeType) {
    const blocks = blockTools.htmlToBlocks(html, type, {
      rules: [
        {
          deserialize(el, next, block) {
            /**
             *  `el` and `next` is DOM Elements
             * learn all about them:
             * https://developer.mozilla.org/en-US/docs/Web/API/Element
             **/

            if (!el || !el.children || (el.tagName && el.tagName.toLowerCase() !== 'pre')) {
              return undefined
            }
            const code = el.children[0]
            const childNodes =
              code && code.tagName.toLowerCase() === 'code' ? code.childNodes : el.childNodes
            let text = ''

function mergeNodePatch(
    operation: Operation,
    afterValue: SlateValue,
    formBuilderValue: FormBuilderValue[] | null
  ) {
    const patches = []
    // Value is undefined
    if (!formBuilderValue) {
      const blocks = editorValueToBlocks(afterValue.toJSON(VALUE_TO_JSON_OPTS), blockContentType)
      return [setIfMissing(blocks), set(blocks)]
    }
    // Value is empty
    if (formBuilderValue && formBuilderValue.length === 0) {
      return [set(editorValueToBlocks(afterValue.toJSON(VALUE_TO_JSON_OPTS), blockContentType), [])]
    }
    if (operation.path.size === 1) {
      const mergedBlock = toBlock(afterValue, operation.path.get(0))
      const targetBlock = toBlock(afterValue, operation.path.get(0) - 1)
      patches.push(
        unset([
          {
            _key: mergedBlock._key
          }
        ])
      )

function insertNodePatch(
    operation: Operation,
    beforeValue: SlateValue,
    afterValue: SlateValue,
    formBuilderValue: FormBuilderValue[] | null
  ) {
    // Don't send anything if this is just a placeholder
    if (
      afterValue.document.nodes.size > 0 &&
      afterValue.document.nodes.every(node => node.data.get('placeholder'))
    ) {
      return []
    }
    // Value is undefined
    if (!formBuilderValue) {
      const blocks = editorValueToBlocks(afterValue.toJSON(VALUE_TO_JSON_OPTS), blockContentType)
      return [setIfMissing(blocks), set(blocks, [])]
    }
    // Value is empty
    if (formBuilderValue && formBuilderValue.length === 0) {
      return [set(editorValueToBlocks(afterValue.toJSON(VALUE_TO_JSON_OPTS), blockContentType), [])]
    }
    const block = toBlock(afterValue, operation.path.get(0))
    if (operation.path.size === 1) {
      let position: InsertPosition = 'after'
      let positionPath
      if (operation.path.get(0) === 0) {
        const firstNode = beforeValue.document.nodes.first()
        positionPath = firstNode ? [{_key: firstNode.key}] : [0]
        position = 'before'
      } else {
        positionPath = [{_key: beforeValue.document.nodes.get(operation.path.get(0) - 1).key}]

function splitNodePatch(
    operation: Operation,
    afterValue: SlateValue,
    formBuilderValue: FormBuilderValue[] | null
  ) {
    // Value is undefined
    if (!formBuilderValue) {
      const blocks = editorValueToBlocks(afterValue.toJSON(VALUE_TO_JSON_OPTS), blockContentType)
      return [setIfMissing(blocks), set(blocks)]
    }
    // Value is empty
    if (formBuilderValue && formBuilderValue.length === 0) {
      return [set(editorValueToBlocks(afterValue.toJSON(VALUE_TO_JSON_OPTS), blockContentType), [])]
    }
    const patches = []
    const splitBlock = toBlock(afterValue, operation.path.get(0))
    if (operation.path.size === 1) {
      patches.push(set(splitBlock, [{_key: splitBlock._key}]))
      const newBlock = toBlock(afterValue, operation.path.get(0) + 1)
      patches.push(insert([newBlock], 'after', [{_key: splitBlock._key}]))
    }
    if (operation.path.size > 1) {
      patches.push(set(splitBlock, [{_key: splitBlock._key}]))
    }

blocks: Block[],
  blockContentType
) {
  const operationIndex = operations.indexOf(operation)
  const nextOperation = operations.get(operationIndex + 1)
  if (
    nextOperation &&
    nextOperation.type === 'merge_node' &&
    nextOperation.path.length === 1 &&
    nextOperation.path[0] === operation.path[0] &&
    operation.type === 'set_node' &&
    isEqual(Object.keys(operation.properties), ['data'])
  ) {
    return []
  }
  const appliedBlocks = editorValueToBlocks(
    change.applyOperations([operation]).value.toJSON(VALUE_TO_JSON_OPTS),
    blockContentType
  )
  // Value is undefined
  if (!blocks && appliedBlocks) {
    return setIfMissing(appliedBlocks)
  }
  // Value is empty
  if (blocks && blocks.length === 0) {
    return set(appliedBlocks, [])
  }
  const changedBlock = appliedBlocks[operation.path[0]]
  setKey(changedBlock._key, changedBlock)
  return set(changedBlock, [{_key: blocks[operation.path[0]]._key}])
}

formBuilderValue: FormBuilderValue[] | null
  ) {
    if (
      afterValue.document.nodes.size > 0 &&
      afterValue.document.nodes.every(node => node.data.get('placeholder'))
    ) {
      return [unset([])]
    }
    // Value is undefined
    if (!formBuilderValue) {
      const blocks = editorValueToBlocks(afterValue.toJSON(VALUE_TO_JSON_OPTS), blockContentType)
      return [setIfMissing(blocks), set(blocks)]
    }
    // Value is empty
    if (formBuilderValue && formBuilderValue.length === 0) {
      return [set(editorValueToBlocks(afterValue.toJSON(VALUE_TO_JSON_OPTS), blockContentType), [])]
    }
    const block = toBlock(afterValue, operation.path.get(0))
    return [set(block, [{_key: block._key}])]
  }

function setNodePatchSimple(
  change: Change,
  operation: Operation,
  blocks: Block[],
  blockContentType
) {
  const appliedBlocks = editorValueToBlocks(
    change.applyOperations([operation]).value.toJSON(VALUE_TO_JSON_OPTS),
    blockContentType
  )
  // Value is undefined
  if (!blocks && appliedBlocks) {
    return setIfMissing(appliedBlocks)
  }
  // Value is empty
  if (blocks && blocks.length === 0) {
    return set(appliedBlocks, [])
  }
  const changedBlock = appliedBlocks[operation.path[0]]
  setKey(changedBlock._key, changedBlock)
  return set(changedBlock, [{_key: blocks[operation.path[0]]._key}])
}

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))