codex-team / codex-team/editor.js
Can `pasteConfig.tags` be made more granular?
- Dominant language
- TypeScript
- Stars
- 31.9k
- Forks
- 2.2k
- Avg merge
- 1d 1h
- Merged PRs (30d)
- 1
Description
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"]`.
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.