BUG: Worker - Headless "document is not defined"

[bgrand-ch]

GrapesJS version

• [X] I confirm to use the latest version of GrapesJS

What browser are you using?

114.0.5735.133

Reproducible demo link

Impossible to add a worker to reproduce.

Describe the bug

How to reproduce the bug?

1. Add a web worker.
2. Initialize GrapesJS with "headless" option inside the worker.
3. Add a plugin with "editor.DomComponents.addType" + "styles".
4. Post a message to worker.
5. ReferenceError: document is not defined.

What is the expected behavior? Use GrapesJS inside a worker without "ReferenceError: document is not defined" error.

What is the current behavior? ReferenceError: document is not defined.

If is necessary to execute some code in order to reproduce the bug, paste it here below:

plugin.js

const type = 'button'

function plugin (editor, options) {
  const domComponents = editor.DomComponents

  domComponents.addType(type, {
    isComponent (element) {
      return element.dataset.type === type
    },
    model: {
      defaults: {
        tagName: 'input',
        attributes: {
          type: 'button',
          'data-type': type
        },
        classes: [
          type
        ],
        styles: `
          .${type} {
            display: inline-block;
          }
        `
      }
    }
  })
}

worker.js

import addPlugin from './plugin.js'

onmessage = function (event) {
  try {
    grapesjs.init({
      headless: true,
      plugins: [
        addPlugin
      ]
    })
    postMessage({ success: true })
  } catch (error) {
    postMessage({ success: false, error })
  }
}

index.js

const worker = new Worker('worker.js')

worker.onmessage = (event) => {
  const data = event.data
  console.log('Editor worker result', data)
}

worker.postMessage({})

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[artf]

Hi @bgrand-ch unfortunately everything that involves the parser (HTML/CSS) requires the DOM related API to be available. For the CSS maybe you can try to use parser-postcss plugin, I'd expect it to work in the worker environment

[bgrand-ch]

Hi @artf, thanks a lot for your quick answer 😄 I will try this week.

[bgrand-ch]

@artf The Post CSS parser plugin works perfectly in a web worker! Thanks for your help.