codex-team / codex-team/editor.js

Can `pasteConfig.tags` be made more granular?

オープン
#2,425 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る
主要言語
TypeScript
スター
31.9k
フォーク
2.2k
平均マージ
1日 1時間
マージ済み PR(30日)
1

説明

Is there some way we could make `pasteConfig` more granular so a Tool only accepts HTML tags _that also have specific attributes or classes?_

Right now the documentation makes clear that `pasteConfig.tags` only allows one Tool per HTML tag:

https://github.com/codex-team/editor.js/blob/0e64665b0f474c37196023b1acf619f640620a1e/docs/tools.md?plain=1#L166

But I think this would be really useful so we can have multiple Tools which share a common tag – e.g. `

` – but then use different attributes – e.g. `class=""`.

## 📝 Example

For example, imagine I have two Tools which create Bootstrap components:

1. **Alert** – which creates [Bootstrap Alerts](https://getbootstrap.com/docs/5.3/components/alerts/)
2. **Card** – which creates [Bootstrap Cards](https://getbootstrap.com/docs/5.3/components/card/)

When the user copies and pastes the following HTML content into the editor:

```html


A simple primary alert—check it out!



Card title

Some quick example text to build on the card title and make up the bulk of the card's content.


Go somewhere


```

I want Editor.js to create two blocks:

```json
{
"type": "alert",
"data": { ... }
},
{
"type": "card",
"data": { ... }
}
```

But right now this isn't possible because Tools can only specify `pasteConfig` by the HTML tags they accept:

```js
static get pasteConfig() {
return {
tags: ['div'],
};
}
```

There is also a [briefly documented feature](https://github.com/codex-team/editor.js/blob/0e64665b0f474c37196023b1acf619f640620a1e/docs/tools.md?plain=1#L168-L184) where you can set sanitize config for tags. However this just means the incoming HTML gets scrubbed of unwanted attributes – it doesn't act as a 'filter' to determine which Tools accept which HTML tags.

## 💡 A couple of ideas

### A function to accept tags

What if Tools could provide functions in their `pasteConfig` that would `return true` if the HTML tag should be accepted?

I'm thinking of something similar to the way [Array.prototype.filter()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) accepts a 'test' function.

For example:

```js
static get pasteConfig() {
return {
tags: [
div: {
filter: (element) => (element.classList.contains("alert")),
},
],
};
}
```

### Provide a CSS selector

Alternatively, Tools could provide a CSS selector that elements should conform to.

For example:

```js
static get pasteConfig() {
return {
tags: ['div.alert'],
};
}
```

Since this is a CSS selector, it would also support filtering based on particular attributes. For example, `div[role="alert"]`.

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

調査の方向性

docs/tools.md から始め、特に issue でリンクされている pasteConfig.tags と sanitize のセクションを確認し、その後、文書化されているこれらの挙動を起点に既存の pasteConfig の処理を追跡します。提案されている predicate アプローチと CSS セレクターアプローチを、現在の「タグごとに 1 つのツール」という挙動と比較します。div.alert や div.card のような例でそれぞれ別々にマッチし、各要素が意図したブロックタイプを生成すれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
css, html, javascript, typescript
領域
frontend
issue の種類
機能追加
難易度
5/5
見積もり時間
1週間以上
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。