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
138 lines (137 loc) • 6.96 kB
JavaScript
var E = Object.defineProperty;
var L = (c, e, t) => e in c ? E(c, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[e] = t;
var d = (c, e, t) => L(c, typeof e != "symbol" ? e + "" : e, t);
/* empty css */
/* empty css */
import { createToolbarButton as f } from "../ToolbarPlugin/utils.mjs";
import C from "../../icons/list-bullet.svg.mjs";
import N from "../../icons/list-numbered.svg.mjs";
import { createP as B } from "../../utils/helpers.mjs";
class x {
// private menu: ListsMenu;
constructor() {
d(this, "name", "lists");
d(this, "hotkeys", [
{ keys: "Ctrl+Shift+U", description: "Bulleted list", command: "lists-unordered", icon: "•" },
{ keys: "Ctrl+Shift+O", description: "Numbered list", command: "lists-ordered", icon: "1️⃣" }
]);
d(this, "editor", null);
d(this, "ulButton", null);
d(this, "olButton", null);
d(this, "handleKeydown", (e) => {
(e.metaKey || e.ctrlKey) && e.key === "Enter" && (e.preventDefault(), this.exitListAndInsertBreak());
});
}
initialize(e) {
this.editor = e, this.addToolbarButtons(), this.setupListHandling(), this.editor.on("lists-unordered", () => {
var t;
(t = this.editor) == null || t.ensureEditorFocus(), this.toggleList("unordered");
}), this.editor.on("lists-ordered", () => {
var t;
(t = this.editor) == null || t.ensureEditorFocus(), this.toggleList("ordered");
});
}
addToolbarButtons() {
var t, o, i;
const e = document.querySelector(".editor-toolbar");
e && (this.ulButton = f({
icon: C,
title: (t = this.editor) == null ? void 0 : t.t("Bullet List"),
onClick: () => {
var n;
(n = this.editor) == null || n.ensureEditorFocus(), this.toggleList("unordered"), this.handleSelectionChange();
}
}), this.olButton = f({
icon: N,
title: (o = this.editor) == null ? void 0 : o.t("Numbered List"),
onClick: () => {
var n;
(n = this.editor) == null || n.ensureEditorFocus(), this.toggleList("ordered"), this.handleSelectionChange();
}
}), e.appendChild(this.ulButton), e.appendChild(this.olButton), (i = this.editor) == null || i.on("selectionchange", () => this.handleSelectionChange()));
}
handleSelectionChange() {
var n, l, s, a, r, u, h;
const e = window.getSelection();
if (!e || !e.rangeCount) return;
const o = e.getRangeAt(0).commonAncestorContainer, i = o.nodeType === Node.ELEMENT_NODE ? o.closest("ul, ol") : (n = o.parentElement) == null ? void 0 : n.closest("ul, ol");
i ? i.tagName === "UL" ? ((l = this.ulButton) == null || l.classList.add("active"), (s = this.olButton) == null || s.classList.remove("active")) : i.tagName === "OL" && ((a = this.olButton) == null || a.classList.add("active"), (r = this.ulButton) == null || r.classList.remove("active")) : ((u = this.ulButton) == null || u.classList.remove("active"), (h = this.olButton) == null || h.classList.remove("active"));
}
setupListHandling() {
this.editor && this.editor.getContainer().addEventListener("keydown", this.handleKeydown);
}
exitListAndInsertBreak() {
var i, n, l;
const e = window.getSelection();
if (!e || !e.rangeCount) return;
const t = e.getRangeAt(0), o = (i = t.commonAncestorContainer.parentElement) == null ? void 0 : i.closest("li");
if (o) {
const s = o.parentElement;
if (!s) return;
const a = B("my-4");
s.nextSibling ? (n = s.parentNode) == null || n.insertBefore(a, s.nextSibling) : (l = s.parentNode) == null || l.appendChild(a), t.selectNodeContents(a), t.collapse(!0), e.removeAllRanges(), e.addRange(t);
}
}
toggleList(e) {
var l;
if (!this.editor) return;
const t = window.getSelection();
if (!t || !t.rangeCount) return;
const o = t.getRangeAt(0), i = o.commonAncestorContainer, n = i.nodeType === Node.ELEMENT_NODE ? i.closest("ul, ol") : (l = i.parentElement) == null ? void 0 : l.closest("ul, ol");
n ? e === "ordered" && n.tagName === "OL" || e === "unordered" && n.tagName === "UL" ? this.unwrapList(n) : this.replaceList(n, e) : this.createNewList(o, e);
}
unwrapList(e) {
var n, l, s;
const t = Array.from(e.querySelectorAll("li")), o = document.createElement("div");
t.forEach((a, r) => {
o.appendChild(document.createTextNode(a.textContent || "")), r < t.length - 1 && o.appendChild(document.createElement("br"));
}), (n = e.parentNode) == null || n.replaceChild(o, e);
const i = document.createRange();
i.selectNodeContents(o), (l = window.getSelection()) == null || l.removeAllRanges(), (s = window.getSelection()) == null || s.addRange(i);
}
replaceList(e, t) {
var n;
const o = t === "ordered" ? "ol" : "ul", i = document.createElement(o);
Array.from(e.children).forEach((l) => {
const s = document.createElement("li");
s.innerHTML = l.innerHTML, i.appendChild(s);
}), (n = e.parentNode) == null || n.replaceChild(i, e), this.applyListStyles(i, t);
}
createNewList(e, t) {
var s, a;
const o = e.extractContents(), i = t === "ordered" ? "ol" : "ul", n = document.createElement(i);
if (Array.from(o.childNodes).forEach((r) => {
var u, h;
if (r.nodeType === Node.TEXT_NODE)
(((u = r.textContent) == null ? void 0 : u.split(`
`).filter((p) => p.trim() !== "")) || []).forEach((p) => {
const g = document.createElement("li");
g.textContent = p.trim(), n.appendChild(g);
});
else if (r.nodeName !== "BR") {
if (r.nodeType === Node.ELEMENT_NODE && ((h = r.textContent) == null ? void 0 : h.trim()) !== "") {
const m = document.createElement("li");
m.appendChild(r.cloneNode(!0)), n.appendChild(m);
}
}
}), n.children.length === 0) {
const r = document.createElement("li");
r.textContent = "List item", n.appendChild(r);
}
e.insertNode(n), this.applyListStyles(n, t);
const l = document.createRange();
l.selectNodeContents(n.lastElementChild || n), (s = window.getSelection()) == null || s.removeAllRanges(), (a = window.getSelection()) == null || a.addRange(l);
}
applyListStyles(e, t) {
t === "ordered" ? e.className = "list-decimal pl-8 my-4 space-y-2" : e.className = "list-disc pl-8 my-4 space-y-2", e.querySelectorAll("li").forEach((o) => {
o.className = "pl-2";
});
}
destroy() {
var e, t;
this.editor && this.editor.getContainer().removeEventListener("keydown", this.handleKeydown), this.ulButton && this.ulButton.parentElement && this.ulButton.parentElement.removeChild(this.ulButton), this.olButton && this.olButton.parentElement && this.olButton.parentElement.removeChild(this.olButton), (e = this.editor) == null || e.off("selectionchange"), (t = this.editor) == null || t.off("lists"), this.editor = null, this.ulButton = null, this.olButton = null;
}
}
export {
x as ListsPlugin
};