codex-team / codex-team/editor.js

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

Aperta
#1,971 6 commenti 4 reazioni 0 assegnatari Vedi su GitHub
bug
Lingua principale
TypeScript
Stelle
31.9k
Fork
2.2k
Merge medio
1g 1h
PR unite (30g)
1

Descrizione

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',
}
}
}
```

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Direzione di ricerca

Start by reproducing the issue with the supplied OutlineTopic plugin, focusing on its pasteConfig and onPaste(event) entry points. Trace the editor's handling of pasted multiple blocks and verify that onPaste() fires for each pasted custom block; the issue is done when this behavior is covered and the two-block reproduction succeeds.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
javascript, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.