@iizotikov/editor-js-tg-spoiler
Version:
Inline tool for adding spoilers to text fragments, supporting export to telegram
53 lines (52 loc) • 2 kB
JavaScript
const o = class o {
constructor() {
this.commandName = "spoiler", this.CSS = {
button: "ce-inline-tool",
buttonActive: "ce-inline-tool--active",
buttonModifier: "ce-inline-tool--spoiler"
}, this.nodes = {
button: null
};
}
static get sanitize() {
return {
span: {
class: "tg-spoiler"
}
};
}
render() {
return this.nodes.button = document.createElement("button"), this.nodes.button.type = "button", this.nodes.button.classList.add(this.CSS.button, this.CSS.buttonModifier), this.nodes.button.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M14.5 8.50001C13.5 7 10.935 6.66476 9.75315 7.79706C9.27092 8.25909 9 8.88574 9 9.53915C9 10.1926 9.27092 10.8192 9.75315 11.2812C10.9835 12.46 13.0165 11.5457 14.2468 12.7244C14.7291 13.1865 15 13.8131 15 14.4665C15 15.1199 14.7291 15.7466 14.2468 16.2086C12.8659 17.5317 10 17.5 9 16"></path>
</svg>
`, this.nodes.button;
}
surround() {
document.execCommand(this.commandName), this.addSpoilerClass();
}
addSpoilerClass() {
const t = window.getSelection();
if (!t || !t.rangeCount) return;
const s = t.getRangeAt(0), e = s.commonAncestorContainer;
this.findAllSpoilerTags(e, s).forEach((i) => {
i.classList.contains("tg-spoiler") || i.classList.add("tg-spoiler");
});
}
findAllSpoilerTags(t, s) {
const e = [];
return t.nodeType === Node.ELEMENT_NODE && t.nodeName === "SPAN" && s.intersectsNode(t) && e.push(t), t.childNodes.forEach((n) => {
e.push(...this.findAllSpoilerTags(n, s));
}), e;
}
checkState() {
const t = document.queryCommandState(this.commandName);
return this.nodes.button.classList.toggle(this.CSS.buttonActive, t), t;
}
};
o.isInline = !0, o.title = "Spoiler";
let l = o;
export {
l as default
};