codex-team / codex-team/editor.js

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

Abierto
#1,971 6 comentarios 4 reacciones 0 asignados Ver en GitHub
bug
Lenguaje dominante
TypeScript
Estrellas
31.9k
Forks
2.2k
Merge medio
1 d 13 h
PR fusionados (30 d)
2

Descripción

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

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Línea de trabajo

Empieza reproduciendo el problema con el plugin OutlineTopic proporcionado, centrándote en sus puntos de entrada pasteConfig y onPaste(event). Sigue el procesamiento del editor de varios bloques pegados y verifica que onPaste() se ejecute para cada bloque personalizado pegado; el issue estará terminado cuando este comportamiento esté cubierto y la reproducción con dos bloques tenga éxito.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
javascript, typescript
Área
frontend
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.