ZUI editor pasting prototype

[richardolsson]

Description

This PR adds support for pasting links and images in the refactored ZUIEditor. I've also done some research into how copy/paste works.

Pasting in Remirror/ProseMirror is handled almost automatically, using the parseDOM() hook in the MarkExtensionSpec. When copy/pasting, the browser will paste the HTML, and ProseMirror will parse it using the matching extension. If there is no matching extension, the HTML will be stripped. For example, pasting bold text when BoldExtension is enabled inserts text marked with the BoldExtension mark, but if we disable the extension, the text is pasted with the bold styling stripped, as a regular paragraph. Perfect!

Our custom extensions LinkExtension and ImageExtension did not properly implement parseDOM(), because we did not actually parse any attributes. All this PR does in order to make pasting work is to parse and transfer the correct attributes from the pasted DOM.

Pasting is already supported by the builtin extensions we use, i.e. HeaderExtension and BoldExtension. I have tried them and they work as expected. As we add more extensions, builtin or custom, we need to make sure pasting works as it should.

I have also researched the more advanced createPasteRules() hook which allows an extension to create more arbitrary paste rules, which might become necessary if we build extensions with a more arbitrary DOM representation. Here's a rough cut from that experimentation.

  createPasteRules(): PasteRule[] {
    return [
      {
        priority: ExtensionPriority.Critical,
        //regexp: new RegExp(/<a\s*.*<\/\s*a\s*>/, 'i'),
        regexp: /Clara/,
        getAttributes(match, isReplacement) {
          console.log('get attributes', match, isReplacement);
          return {};
        },
        transformMatch(match) {
          console.log('PASTE', match);
          return false;
        },
        type: 'mark',
        markType: this.type,
      },
    ];
  }

Screenshots

None

Changes

• Adds attribute parsing to our LinkExtension
• Adds attribute parsing to our ImageExtension

Notes to reviewer

None

Related issues

Undocumented

[richardolsson]

Will merge without review, but please have a look at this when you get a chance @ziggabyte, because it contains some useful information.