codex-team / codex-team/editor.js

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

Open
#1,971 6 comments 4 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
31.9k
Forks
2.2k
Avg merge
1d 1h
Merged PRs (30d)
1

Description

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: '',
title: 'Outline Topic',
}
}
}
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.