Use a shim function for components that use script function (not string)

The current approach that converts a component's script to text before placing it in the document is rather limiting. Wouldn't it be possible to use an approach like this, so that the scope is retained?

Put the function in window and use a shim function in the component instead.

original code:

var myVar = 'John';

editor.BlockManager.add('test-block', {
...
  script: function () {
    alert('Hi ' + myVar);
    console.log('the element', this);
  },
...
});

follows my suggestion:

function (as a function not string) detected, let's use a shim:

globalThis['test-block'] = identifierOfTheTestBlockComponent.script

<div id="c764"></div>
<script>
  var items = document.querySelectorAll('#c764');
  for (var i = 0, len = items.length; i < len; i++) {
    (window['test-block'].bind(items[i]))();
  }
</script>

originally mentioned in a PR here https://github.com/artf/grapesjs/pull/2479#issuecomment-569628660