codex-team / codex-team/editor.js
Can `pasteConfig.tags` be made more granular?
- 主要言語
- 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. `
## 📝 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