The Desk tool crashed: Error: Cannot resolve a DOM node from Slate node

[robksawyer]

If you find a security vulnerability, do NOT open an issue. Email [email protected] instead.

Describe the bug

Error: Cannot resolve a DOM node from Slate node: {"children":[{"_type":"block","_key":"ede9ffc227ce","style":"normal","markDefs":[],"children":[{"_type":"span","_key":"b88f64109791","text":"","marks":[]}]}],"operations":[{"type":"set_selection","properties":null,"newProperties":{"focus":{"path":[0,0],"offset":0},"anchor":{"path":[0,0],"offset":0}}},{"type":"set_selection","properties":{"focus":{"path":[0,0],"offset":0},"anchor":{"path":[0,0],"offset":0}},"newProperties":null},{"type":"set_selection","properties":null,"newProperties":{"focus":{"path":[0,0],"offset":0},"anchor":{"path":[0,0],"offset":0}}}],"selection":{"focus":{"path":[0,0],"offset":0},"anchor":{"path":[0,0],"offset":0}},"marks":null,"maxBlocks":-1,"readOnly":false,"history":{"undos":[{"operations":[{"type":"set_selection","properties":null,"newProperties":{"focus":{"path":[0,0],"offset":0},"anchor":{"path":[0,0],"offset":0}}}],"timestamp":"2023-02-24T05:36:22.704Z"}],"redos":[]}}
    at Object.toDOMNode (/studio/static/js/app.bundle.js:531970:13)
    at Object.focus (/studio/static/js/app.bundle.js:531872:26)
    at Object.focus (/studio/static/js/app.bundle.js:21980:90)
    at PortableTextEditor.focus (/studio/static/js/app.bundle.js:25027:72)
    at PortableTextInput.focus (/studio/static/js/app.bundle.js:171323:46)
    at PortableTextInput.focus (/studio/static/js/app.bundle.js:646365:25)
    at SubscribePatch.focus (/studio/static/js/app.bundle.js:536804:21)
    at SubscribePatch.focus (/studio/static/js/app.bundle.js:646365:25)
    at FormBuilderInput.focus (/studio/static/js/app.bundle.js:39763:19)
    at FormBuilderInput.focus (/studio/static/js/app.bundle.js:646365:25)

To Reproduce

Steps to reproduce the behavior:

1. Added my custom module
2. It has a default freeform element based on https://github.com/ndimatteo/HULL/blob/main/components/freeform.js
3. And when I click into this new module to edit it, I get the error above.

Expected behavior

I would like to be able to edit the content that was added as an initialValue.

Screenshots

Which versions of Sanity are you using?

@sanity/cli (global)  3.5.0 (up to date)
@sanity/image-url     1.0.2 (up to date)

What operating system are you using?

MacBook Pro (16-inch, 2021) on Monterey

Which versions of Node.js / npm are you running?

8.19.2
v19.0.1

Additional context

Here is the new module that I'm making.

import { Columns } from 'phosphor-react'

import { getTypeTitles } from '../../lib/helpers'

export default {
  title: 'Hero Two Column',
  name: 'heroTwoCol',
  type: 'object',
  icon: Columns,
  fields: [
    {
      title: 'Left Content',
      name: 'gridLeft',
      type: 'array',
      description: 'The content that exists on the left',
      of: [{ type: 'gridColumn' }],
      initialValue: [
        {
          _type: 'gridColumn',
          blocks: [
            {
              _type: 'freeform',
              content: [
                {
                  _type: 'block',
                  children: [
                    {
                      _type: 'span',
                      marks: [],
                      text: 'Lorem Ipsum',
                    },
                  ],
                  markDefs: [],
                  style: 'h1',
                },
              ],
            },
          ],
          sizes: [
            {
              _type: 'gridSize',
              align: undefined,
              breakpoint: ' ',
              justify: undefined,
              start: undefined,
              width: 2,
            },
            {
              _type: 'gridSize',
              align: undefined,
              breakpoint: 'sm',
              justify: undefined,
              start: undefined,
              width: 1,
            },
          ],
        },
      ],
    },
    {
      title: 'Right Content',
      name: 'gridRight',
      type: 'array',
      description: 'The content that exists on the right',
      of: [
        {
          type: 'gridColumn',
        },
      ],
      initialValue: [
        {
          _type: 'gridColumn',
          blocks: [
            {
              _type: 'freeform',
              content: [
                {
                  _type: 'block',
                  children: [
                    {
                      _type: 'span',
                      marks: [],
                      text: 'Do ex exercitation occaecat eiusmod qui qui officia esse cillum non. Dolor nulla irure est occaecat.',
                    },
                  ],
                  markDefs: [],
                  style: 'h3',
                },
              ],
            },
          ],
          sizes: [
            {
              _type: 'gridSize',
              align: undefined,
              breakpoint: ' ',
              justify: undefined,
              start: undefined,
              width: 2,
            },
            {
              _type: 'gridSize',
              align: 'self-end',
              breakpoint: 'sm',
              justify: undefined,
              start: undefined,
              width: 1,
            },
          ],
        },
      ],
    },
  ],
  preview: {
    select: {
      gridLeft: 'gridLeft',
      gridRight: 'gridRight',
    },
    prepare({ gridLeft, gridRight }) {
      const nameLeft = getTypeTitles(gridLeft.map((col) => col.blocks[0]._type))
      const nameRight = getTypeTitles(
        gridRight.map((col) => col.blocks[0]._type)
      )

      const imageLeft = (gridLeft[0].blocks[0].content || []).find(
        (block) => block._type === 'photo'
      )
      const imageRight = (gridRight[0].blocks[0].content || []).find(
        (block) => block._type === 'photo'
      )

      return {
        title: 'Hero Two Column',
        subtitle: ' ',
        media: imageLeft || imageRight,
      }
    },
  },
}