codex-team / codex-team/editor.js

Can `pasteConfig.tags` be made more granular?

Open
#2,425 1 comment 0 reactions 0 assignees View on GitHub
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. `

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

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.