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 13h
Merged PRs (30d)
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"]`.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with docs/tools.md, especially the pasteConfig.tags and sanitize sections linked in the issue, then trace the existing pasteConfig handling from those documented behaviors. Compare the proposed predicate and CSS-selector approaches against the current one-tool-per-tag behavior. Done means distinct matching for examples such as div.alert and div.card, with each producing its intended block type.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html, javascript, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.