TinyMCE and Angular: ReferenceError: Buffer is not defined from liquidjs

[apazureck]

Hi,

I wanted to try out Dropkiq in our angular (13) project. I have a dynamic input, so I have an empty schema (no Database). I only have a context and a scope. So I left the schema empty (not sure, if this is even relevant).

I have the following dependencies in my project:

"liquidjs": "^9.42.1",
"tinymce": "^6.3.1",
"dropkiq": "^1.0.66",
"dropkiq-ui": "^1.0.76",

My setup looks like this:

setupEditor() {
    const schema = this.getSchemaFromParameters(); // returns { }
    const context = this.getContextFromParameters(); // retuns { } at first and the context types later on, when the user adds parameters
    const scope = this.getParametersObject(); // returns the default values for the parameters, so at first { }
    const that = this;

    this.tinyMceInit$.next({
      base_url: '/tinymce',
      suffix: '.min',
      promotion: false,
      language: 'de',
      language_url: '/assets/langs/de.js',
      entity_encoding: 'raw',
      setup: function (editor: Editor) {

        editor.on('init', function (e) {
          let iframe = editor.iframeElement;
          let element = editor.contentDocument.getElementById('tinymce');

          that.dropkiqUI = new DropkiqUI(
            element,
            schema,
            context,
            scope,
            undefined,
            {
              iframe: iframe as any,
            }
          );
        });

        editor.on('keydown', function (e) {
          if (e.key == 'Enter' && that.dropkiqUI!.menuIsOpen()) {
            return false;
          }
          return true;
        });
      },
    });
}

updateEditor() {
    this.dropkiqUI!.context = this.getContextFromParameters();
    this.dropkiqUI!.updateScope(this.getParametersObject());
}

When I type anything in the editor, it shows this error message:

Uncaught ReferenceError ReferenceError: Buffer is not defined
    at flatten (c:\div\mediware\maks-m\src\MaksApp\MaksAppFrontend\UI\node_modules\dropkiq\dist\liquidjs\src\parser\flatten\node.js:1:34)
    at e.tokenize (c:\div\mediware\maks-m\src\MaksApp\MaksAppFrontend\UI\node_modules\dropkiq\dist\liquidjs\src\parser\tokenizer.js:1:866)
    at t.setTextBodyAndCaretPositionWithUpdate (c:\div\mediware\maks-m\src\MaksApp\MaksAppFrontend\UI\node_modules\dropkiq\dist\DropkiqEngine.js:1:2385)
    at t.update (c:\div\mediware\maks-m\src\MaksApp\MaksAppFrontend\UI\node_modules\dropkiq\dist\DropkiqEngine.js:1:1734)
    at e.findResults (c:\div\mediware\maks-m\src\MaksApp\MaksAppFrontend\UI\node_modules\dropkiq-ui\dist\DropkiqUI.js:1:9294)
    at <anonymous> (c:\div\mediware\maks-m\src\MaksApp\MaksAppFrontend\UI\node_modules\dropkiq-ui\dist\DropkiqUI.js:1:4258)
    at timer (c:\div\mediware\maks-m\src\MaksApp\MaksAppFrontend\UI\node_modules\zone.js\fesm2015\zone.js:2378:1)
    at invokeTask (c:\div\mediware\maks-m\src\MaksApp\MaksAppFrontend\UI\node_modules\zone.js\fesm2015\zone.js:406:1)
    at runTask (c:\div\mediware\maks-m\src\MaksApp\MaksAppFrontend\UI\node_modules\zone.js\fesm2015\zone.js:178:1)
    at invokeTask (c:\div\mediware\maks-m\src\MaksApp\MaksAppFrontend\UI\node_modules\zone.js\fesm2015\zone.js:487:1)
    at ZoneTask.invoke (c:\div\mediware\maks-m\src\MaksApp\MaksAppFrontend\UI\node_modules\zone.js\fesm2015\zone.js:476:1)
    at data.args.<computed> (c:\div\mediware\maks-m\src\MaksApp\MaksAppFrontend\UI\node_modules\zone.js\fesm2015\zone.js:2358:1)
    --- setTimeout ---
    at scheduleTask (c:\div\mediware\maks-m\src\MaksApp\MaksAppFrontend\UI\node_modules\zone.js\fesm2015\zone.js:2360:1)
    at scheduleTask (c:\div\mediware\maks-m\src\MaksApp\MaksAppFrontend\UI\node_modules\zone.js\fesm2015\zone.js:393:1)
    at scheduleTask (c:\div\mediware\maks-m\src\MaksApp\MaksAppFrontend\UI\node_modules\zone.js\fesm2015\zone.js:221:1)
    at scheduleMacroTask (c:\div\mediware\maks-m\src\MaksApp\MaksAppFrontend\UI\node_modules\zone.js\fesm2015\zone.js:244:1)
    at scheduleMacroTaskWithCurrentZone (c:\div\mediware\maks-m\src\MaksApp\MaksAppFrontend\UI\node_modules\zone.js\fesm2015\zone.js:683:1)
    at <anonymous> (c:\div\mediware\maks-m\src\MaksApp\MaksAppFrontend\UI\node_modules\zone.js\fesm2015\zone.js:2402:1)
    at proto.<computed> (c:\div\mediware\maks-m\src\MaksApp\MaksAppFrontend\UI\node_modules\zone.js\fesm2015\zone.js:973:1)
    at p (c:\div\mediware\maks-m\src\MaksApp\MaksAppFrontend\UI\node_modules\dropkiq-ui\dist\DropkiqUI.js:1:4159)
    at c (c:\div\mediware\maks-m\src\MaksApp\MaksAppFrontend\UI\node_modules\dropkiq-ui\dist\DropkiqUI.js:1:4133)

Seems this is coming from liquidjs. The only thing I find about this in their repo, is that it is an older bug.

I also tried to generate the engine from scope, but the error persists.

Do you know, what this is about?