codex-team / codex-team/editor.js

Can `pasteConfig.tags` be made more granular?

Ouverte
#2,425 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub
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. `

` – 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"]`.

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

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.