Treat span with 'text', but a missing/undefined 'marks' as a text span

[bjoerge]

As originally reported by @mmgj on Gitter, the following code would throw an error:

const blockContentToHyperscript = require('@sanity/block-content-to-hyperscript')
blockContentToHyperscript({
  blocks: [
    {
      _key: 'P8F7ONes',
      _type: 'block',
      children: [
        {
          _key: 'ZG0Tz6QB',
          _type: 'span',
          text: 'Rush'
        }
      ]
    }
  ]
})

This was caused by the buildMarksTree() treating the span node above as a non-text node. If the span had an an empty array for marks, it would work just fine. Seems to me like a missing/undefined marks property should be treated the same way as an empty marks array, so I changed the isTextSpan() function to also check for a missing/undefined node.marks. Let me know if any of my assumptions are wrong or you think it should be solved differently.

[bjoerge]

Tests are passing locally. The CI error seems to be related to jsdom on Node 6.

[rexxars]

On a slightly related note, I'd be interested to know if the block editor handles this case without any issues.

[mmgj]

The editor handled the blocks in question with no complaint. I never got an error message before getting to the front-end. And what's more: Editing a block in the studio will correct the missing array for marks and thereby "fix" the broken block.

[rexxars]

Thanks, that is good to hear!

[bjoerge]

Tried to set "testEnvironment": "node" in package.json, but for some reason it looks like the generated HTML output differs from what the tests expects (notice the whitespace differences):

Expected value to equal:
      "<p><span style=\"border: 1px solid;\"><span style=\"border: 3px solid;\"><em>Sanity FTW</em></span></span></p>"
Received:
      "<p><span style=\"border:1px solid;\"><span style=\"border:3px solid;\"><em>Sanity FTW</em></span></span></p>"

I suggest we fix this in a separate pass.

[bjoerge]

It's actually even weirder than merely a whitespace issue. Here's another failing test. Notice style="text-decoration: underline;" vs style="textDecoration:underline;" when running with "testEnvironment": "node":

* builds all basic marks as expected

    expect(received).toEqual(expected)

    Expected value to equal:
      "<p><code>code</code><strong>strong</strong><em>em</em><span style=\"text-decoration: underline;\">underline</span><del>strike-through</del><a href=\"https://www.sanity.io/\">link</a></p>"
    Received:
      "<p><code>code</code><strong>strong</strong><em>em</em><span style=\"textDecoration:underline;\">underline</span><del>strike-through</del><a href=\"https://www.sanity.io/\">link</a></p>"

      at Object.test (node_modules/@sanity/block-content-tests/tests.js:123:20)