codex-team / codex-team/editor.js

Can `pasteConfig.tags` be made more granular?

Đang mở
#2,425 1 bình luận 0 reaction 0 người được giao Xem trên GitHub
Ngôn ngữ chính
TypeScript
Star
31.9k
Fork
2.2k
Merge trung bình
1 ngày 13 giờ
Pull request đã merge (30 ngày)
2

Mô tả

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

Hướng dẫn đóng góp

Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này

Hướng nghiên cứu

Bắt đầu với docs/tools.md, đặc biệt là các phần pasteConfig.tags và sanitize được liên kết trong issue, sau đó lần theo cách xử lý pasteConfig hiện có dựa trên các hành vi đã được tài liệu hóa đó. So sánh các cách tiếp cận predicate và bộ chọn CSS được đề xuất với hành vi hiện tại là một tool cho mỗi tag. Được xem là hoàn tất khi có sự khớp riêng biệt cho các ví dụ như div.alert và div.card, trong đó mỗi ví dụ tạo ra loại block dự kiến của nó.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
css, html, javascript, typescript
Lĩnh vực
frontend
Loại issue
Tính năng
Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
35/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.