[Bug]: ReferenceError: Can't find variable: DragEvent

[D-Sketon]

Which packages did you experience the bug in?

core, react

What Tiptap version are you using?

2.1.11/2.1.12

What’s the bug you are facing?

related PR: https://github.com/ueberdosis/tiptap/pull/4354 I'm using IOS 13.6 and IOS 12.5.7 DragEvent is not supported in Safari and an exception will be thrown when the Editor is created.

What browser are you using?

Safari

Code example

No response

What did you expect to happen?

no error and I can create Editor successfully

Anything to add? (optional)

No response

Did you update your dependencies?

• [X] Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

• [ ] Yes, I’m a sponsor. 💖

[Ashster]

i also find this problem, how to resolve it?

[aliaszz]

The same problem

[ejellard]

We also have this problem.

[dbousamra]

We also have this problem

[zenonux]

We also have this problem

[jacobmllr95]

We ended up polyfilling DragEvent and DataTransfer to work around our browser compatibility issues.

drag-event.js:

(() => {
  if (typeof window.DragEvent !== 'undefined') {
    return;
  }

  window.DragEvent = function (type, eventInitDict) {
    eventInitDict = eventInitDict || { bubbles: false, cancelable: false };
    let event = document.createEvent('MouseEvent');
    event.initMouseEvent(
      type,
      eventInitDict.bubbles,
      eventInitDict.cancelable,
      window,
      0,
      eventInitDict.screenX || 0,
      eventInitDict.screenY || 0,
      eventInitDict.clientX || 0,
      eventInitDict.clientY || 0,
      eventInitDict.ctrlKey || false,
      eventInitDict.altKey || false,
      eventInitDict.shiftKey || false,
      eventInitDict.metaKey || false,
      eventInitDict.button || 0,
      eventInitDict.relatedTarget || null
    );
    return event;
  };
})();

data-transfer.js:

(() => {
  if (typeof window.DataTransfer !== 'undefined') {
    return;
  }

  window.DataTransfer = function () {
    this.dropEffect = '';
    this.effectAllowed = '';
    this.files = [];
    this.items = [];
    this.types = [];

    this.setData = function (format, data) {
      this.items.push({ format: format, data: data });
      this.types.push(format);
    };

    this.getData = function (format) {
      for (const item of this.items) {
        if (item.format === format) {
          return item.data;
        }
      }

      return '';
    };

    this.clearData = function (format) {
      if (format) {
        for (let i = 0; i < this.items.length; i++) {
          if (this.items[i].format === format) {
            this.items.splice(i, 1);
            this.types.splice(i, 1);
            i--;
          }
        }
      } else {
        this.items = [];
        this.types = [];
      }
    };
  };
})();