feat: add improved dom filtering logic

This commit is contained in:
thecodrr
2021-11-20 12:26:39 +05:00
parent 95d1f17c40
commit 65e1ced04c
2 changed files with 32 additions and 6 deletions

View File

@@ -0,0 +1,24 @@
const ATTRIBUTE_DELETE_FILTERS = [
"[data-mce-selected]",
"[data-mce-src]",
"[data-mce-style]",
"[data-mce-type]",
];
const ELEMENT_DELETE_FILTERS = ["[data-mce-bogus]", "[data-mce-bookmark]"];
const ELEMENT_MODIFY_FILTERS = ["img[src]"];
export const QUERY = [
...ATTRIBUTE_DELETE_FILTERS,
...ELEMENT_DELETE_FILTERS,
...ELEMENT_MODIFY_FILTERS,
].join(",");
export const ATTRIBUTES = {
strip: [
"data-mce-selected",
"data-mce-src",
"data-mce-style",
"data-mce-type",
],
elementDelete: ["data-mce-bogus", "data-mce-bookmark"],
};

View File

@@ -1,4 +1,5 @@
const { addPluginToPluginManager } = require("../utils");
const { QUERY, ATTRIBUTES } = require("./filters");
function register(editor) {
/**
@@ -10,9 +11,7 @@ function register(editor) {
editor.getHTML = async function () {
const html = editor.getBody().innerHTML;
const document = new DOMParser().parseFromString(html, "text/html");
const elements = document.querySelectorAll(
"img[src],[data-mce-bogus],[data-mce-selected]"
);
const elements = document.querySelectorAll(QUERY);
for (let element of elements) {
switch (element.nodeName) {
case "IMG": {
@@ -28,9 +27,12 @@ function register(editor) {
image.src = datauri;
}
default: {
if (element.hasAttribute("data-mce-bogus")) element.remove();
else if (element.hasAttribute("data-mce-selected")) {
element.removeAttribute("data-mce-selected");
for (let attr of element.attributes) {
if (ATTRIBUTES.strip.indexOf(attr.name) > -1)
element.removeAttribute(attr.name);
else if (ATTRIBUTES.elementDelete.indexOf(attr.name) > -1) {
element.remove();
}
}
}
}