codex-team / codex-team/editor.js
Can `pasteConfig.tags` be made more granular?
- Vorherrschende Sprache
- TypeScript
- Sterne
- 31.9k
- Forks
- 2.2k
- Ø Merge
- 1 T. 1 Std.
- Gemergte PRs (30 T.)
- 1
Beschreibung
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"]`.
Beitragsleitfaden
Für dieses Repository ist kein Beitragsleitfaden indexiert
Rechercherichtung
Beginne mit docs/tools.md, insbesondere den im Issue verlinkten Abschnitten pasteConfig.tags und sanitize, und verfolge dann die bestehende pasteConfig-Verarbeitung ausgehend von diesen dokumentierten Verhaltensweisen zurück. Vergleiche die vorgeschlagenen Predicate- und CSS-Selektor-Ansätze mit dem aktuellen Verhalten „ein Tool pro Tag“. Als erledigt gilt die eindeutige Zuordnung für Beispiele wie div.alert und div.card, wobei jedes den vorgesehenen Blocktyp erzeugt.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- css, html, javascript, typescript
- Bereich
- frontend
- Issue-Typ
- Feature
- Schwierigkeit
- 5/5
- Geschätzter Aufwand
- Über eine Woche
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 35/100