codex-team / codex-team/editor.js
onPaste() does not fire when pasting more than one block
- 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.