on-codemerge
Version:
A WYSIWYG editor for on-codemerge is a user-friendly interface that allows users to edit and view their code in real time, exactly as it will appear in the final product
99 lines (98 loc) • 3.26 kB
JavaScript
var i = Object.defineProperty;
var a = (l, e, t) => e in l ? i(l, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[e] = t;
var n = (l, e, t) => a(l, typeof e != "symbol" ? e + "" : e, t);
import { DomUtils as c } from "./DomUtils.mjs";
import { StyleManager as d } from "./StyleManager.mjs";
class S {
constructor(e) {
n(this, "domUtils");
n(this, "styleManager");
this.container = e, this.domUtils = new c(e), this.styleManager = new d();
}
toggleStyle(e) {
const t = window.getSelection();
if (!t) return;
const o = this.domUtils.getSelectedRoot(t);
o && o.forEach((s) => {
s.nodeType === Node.TEXT_NODE && (s = this.wrapTextNodeInSpan(s));
const r = s;
this.styleManager.has(r, e) ? this.domUtils.removeStyleFromNode(
s,
e,
this.styleManager.remove.bind(this.styleManager)
) : this.domUtils.applyStyleToNode(
s,
e,
this.styleManager.set.bind(this.styleManager)
);
});
}
setColor(e) {
this.applyStyleToSelectedNodes((t) => {
t.style.color = e;
});
}
setBackgroundColor(e) {
this.applyStyleToSelectedNodes((t) => {
t.style.backgroundColor = e;
});
}
setFont(e, t, o) {
this.applyStyleToSelectedNodes((s) => {
s.style.fontFamily = e, s.style.fontSize = t, s.style.lineHeight = o;
});
}
clearFont() {
this.applyStyleToSelectedNodes((e) => {
e.style.removeProperty("font-family"), e.style.removeProperty("font-size"), e.style.removeProperty("line-height");
});
}
applyBlock(e = "span") {
this.applyStyleToSelectedNodes((t) => {
const o = document.createElement(e);
o.textContent = t.textContent, o.classList.add("format-text-block"), t.parentNode && t.parentNode.replaceChild(o, t);
});
}
clearBlock() {
this.applyStyleToSelectedNodes((e) => {
const t = document.createElement("span");
t.textContent = e.textContent, e.style.removeProperty("font-family"), e.style.removeProperty("font-size"), e.style.removeProperty("line-height"), e.style.removeProperty("format-text-block"), e.parentNode && e.parentNode.replaceChild(t, e);
});
}
applyStyleToSelectedNodes(e) {
const t = window.getSelection();
if (!t) return;
const o = this.domUtils.getSelectedRoot(t, !1);
o && o.forEach((s) => {
s.nodeType === Node.ELEMENT_NODE && s !== this.container && e(s);
});
}
wrapTextNodeInSpan(e) {
var o;
const t = document.createElement("span");
return (o = e.parentNode) == null || o.replaceChild(t, e), t.appendChild(e), t;
}
hasClass(e) {
const t = window.getSelection();
if (!t || t.rangeCount === 0) return !1;
const o = this.domUtils.getSelectedRoot(t, !0);
return o ? o.some((s) => {
if (s.nodeType === Node.ELEMENT_NODE) {
const r = s;
return this.styleManager.has(r, e);
}
return !1;
}) : !1;
}
getStyle(e) {
const t = window.getSelection();
if (!t || t.rangeCount === 0) return null;
const o = this.domUtils.getSelectedRoot(t, !0);
if (!o) return null;
for (const s of o)
return s.nodeType === Node.ELEMENT_NODE ? s.style[e] ?? null : null;
}
}
export {
S as TextFormatter
};