codex-team / codex-team/editor.js

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

Offen
#1,971 6 Kommentare 4 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
bug
Vorherrschende Sprache
TypeScript
Sterne
31.9k
Forks
2.2k
Ø Merge
1 T. 13 Std.
Gemergte PRs (30 T.)
2

Beschreibung

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

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Rechercherichtung

Beginne damit, das Problem mit dem bereitgestellten OutlineTopic-Plugin zu reproduzieren, wobei du dich auf die Einstiegspunkte pasteConfig und onPaste(event) konzentrierst. Verfolge die Verarbeitung mehrerer eingefügter Blöcke durch den Editor und überprüfe, dass onPaste() für jeden eingefügten benutzerdefinierten Block ausgelöst wird; das Issue ist abgeschlossen, wenn dieses Verhalten abgedeckt ist und die Reproduktion mit zwei Blöcken erfolgreich ist.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.