codex-team / codex-team/editor.js
Can `pasteConfig.tags` be made more granular?
- Langage dominant
- TypeScript
- Étoiles
- 31.9k
- Forks
- 2.2k
- Merge moyen
- 1 j 13 h
- PR mergées (30 j)
- 2
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"]`.
Guide de contribution
Aucun guide de contribution indexé pour ce dépôt
Piste de recherche
Commencez par docs/tools.md, en particulier les sections pasteConfig.tags et sanitize référencées dans l’issue, puis suivez le traitement existant de pasteConfig à partir de ces comportements documentés. Comparez les approches proposées fondées sur un prédicat et sur des sélecteurs CSS avec le comportement actuel d’un outil par balise. C’est terminé lorsque des correspondances distinctes existent pour des exemples tels que div.alert et div.card, chacun produisant son type de bloc prévu.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- css, html, javascript, typescript
- Domaine
- frontend
- Type d'issue
- Fonctionnalité
- Difficulté
- 5/5
- Temps estimé
- Plus d'une semaine
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 35/100