onPaste() does not fire when pasting more than one block

[danlynkew]

I've defined a custom block as a plugin, and passed that plugin to Editor.js. When I copy and paste one such block, its onPaste() event fires. But when I copy-and-paste two or more such blocks, their onPaste() events do not fire.

Steps to reproduce:

1. Highlight and copy two blocks.
2. On a newline, paste those two blocks.

Expected behavior: onPaste() function should fire, but does not.

Screenshots: https://user-images.githubusercontent.com/38993262/154167067-d03c8581-563c-4108-93db-99ece2a1f4d7.mov

Device: MacBook Air (M1, 2020) Browser: Chrome Version 98.0.4758.80 (Official Build) (arm64) OS: macOS Big Sur Version 11.5.2

Editor.js version: "@editorjs/editorjs": "^2.18.0"

Plugins you use with their versions: "@editorjs/header": "^2.5.0" "@editorjs/paragraph": "^2.7.0"

Find below the full code for my custom block as a plugin:

import { v4 as uuid } from 'uuid'

export class OutlineTopic {
  static get DEFAULT_PLACEHOLDER() {
    return ''
  }

  constructor({ data, config, api }) {
    this.api = api

    this._CSS = {
      block: this.api.styles.block,
      wrapper: 'ce-header',
    }

    this.onKeyUp = this.onKeyUp.bind(this)

    const metadataKey = {
      metadata: data.metadata
        ? data.metadata
        : {
            id: uuid(),
          },
    }

    this._placeholder = config.placeholder ? config.placeholder : OutlineTopic.DEFAULT_PLACEHOLDER
    this._data = {
      ...metadataKey,
    }
    this._element = this.drawView()

    this.data = {
      ...data,
      ...metadataKey,
    }
  }

  onKeyUp(event) {
    if (event.code !== 'Backspace' && event.code !== 'Delete') {
      return
    }

    const { textContent } = this._element

    if (textContent === '') {
      this._element.innerHTML = ''
    }
  }

  drawView() {
    const h4 = document.createElement('h4')

    h4.classList.add(this._CSS.wrapper, this._CSS.block)
    h4.contentEditable = true
    h4.dataset.placeholder = this._placeholder
    h4.dataset.metadataid = ''

    h4.title = this._data.metadata.id

    h4.addEventListener('keyup', this.onKeyUp)

    return h4
  }

  render() {
    return this._element
  }

  merge(data) {
    const newData = {
      text: this.data.text + data.text,
      level: 4,
      metadata: this.data.metadata,
    }

    this.data = newData
  }

  validate(savedData) {
    if (savedData.text.trim() === '') {
      return false
    }

    return true
  }

  save(toolsContent) {
    return {
      text: toolsContent.innerHTML.replaceAll(' ', ' '),
      level: 4,
      metadata: this.data.metadata,
    }
  }

  onPaste(event) {
    console.log('onPaste() outline topic')

    const data = {
      text: event.detail.data.innerHTML,
      metadata: this.data.metadata,
    }

    this.data = data
  }

  static get conversionConfig() {
    return {
      export: 'text',
      import: 'text',
    }
  }

  static get sanitize() {
    return {
      level: {},
      b: true,
      i: true,
    }
  }

  get data() {
    this._data.text = this._element.innerHTML
    this._data.level = 4

    return this._data
  }

  set data(data) {
    this._data = data || {}

    this._element.innerHTML = this._data.text || ''
    this._element.dataset.metadataid = this._data.metadata && this._data.metadata.id ? this._data.metadata.id : ''
  }

  static get pasteConfig() {
    return {
      tags: ['H4'],
    }
  }

  static get toolbox() {
    return {
      icon: '<svg t="1593527086434" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="711" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14"><defs><style type="text/css"></style></defs><path d="M182.573147 891.797306a434.08313 434.08313 0 0 0 329.39851 131.850335 472.842582 472.842582 0 0 0 234.346921-60.071467 399.671329 399.671329 0 0 0 163.562614-168.279674q56.178473-108.32187 56.178473-297.373654 0-233.267113-126.991196-365.600521A433.372729 433.372729 0 0 0 511.971657 0.273078a448.973124 448.973124 0 0 0-305.188061 108.691278Q56.917504 239.905379 56.94592 511.761448q0 248.185523 125.627227 380.035858zM307.148981 230.670172A260.2055 260.2055 0 0 1 511.744328 137.550873a259.182523 259.182523 0 0 1 203.288211 93.602372q81.752891 93.602372 81.781307 275.237575 0 192.717451-81.32665 286.774479a258.216379 258.216379 0 0 1-203.742868 94.057028 259.63718 259.63718 0 0 1-204.595347-93.602372Q225.96441 700.017584 225.96441 511.761448T307.148981 230.670172z" p-id="712"></path></svg>',
      title: 'Outline Topic',
    }
  }
}

[zolotykh]

Same issue.

[JorrandeWit]

Same.

[Joseph-Azzam]

same

[ErBat]

same