codex-team / codex-team/editor.js
onPaste() does not fire when pasting more than one block
- 主要言語
- TypeScript
- スター
- 31.9k
- フォーク
- 2.2k
- 平均マージ
- 1日 13時間
- マージ済み PR(30日)
- 2
説明
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',
}
}
}
```
コントリビューションガイド
このリポジトリのコントリビューションガイドは索引されていません
調査の方向性
まず、提供された OutlineTopic プラグインで問題を再現し、pasteConfig と onPaste(event) のエントリーポイントに注目します。エディターが複数の貼り付けブロックを処理する流れを追跡し、貼り付けられた各カスタムブロックに対して onPaste() が発火することを確認します。この動作がカバーされ、2 ブロックの再現が成功すれば、issue は完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- javascript, typescript
- 領域
- frontend
- issue の種類
- バグ
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 35/100