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
96 lines (95 loc) • 3.74 kB
JavaScript
var g = Object.defineProperty;
var k = (o, t, e) => t in o ? g(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
var n = (o, t, e) => k(o, typeof t != "symbol" ? t + "" : t, e);
/* empty css */
/* empty css */
import { TypographyMenu as b } from "./components/TypographyMenu.mjs";
import { createToolbarButton as f } from "../ToolbarPlugin/utils.mjs";
import B from "../../icons/typography.svg.mjs";
import { createHr as w } from "../../utils/helpers.mjs";
class S {
constructor() {
n(this, "name", "typography");
n(this, "hotkeys", [
{
keys: "Ctrl+Shift+Y",
description: "Adjust typography settings",
command: "typography-settings",
icon: "✒️"
}
]);
n(this, "editor", null);
n(this, "menu", null);
n(this, "toolbarButton", null);
}
initialize(t) {
this.menu = new b(t), this.editor = t, this.addToolbarButton(), this.setupEventListeners(), document.addEventListener("keydown", this.handleKeyDown), this.editor.on("typography", () => {
var e;
(e = this.editor) == null || e.ensureEditorFocus(), this.showMenu();
});
}
addToolbarButton() {
var e;
const t = document.querySelector(".editor-toolbar");
t && (this.toolbarButton = f({
icon: B,
title: (e = this.editor) == null ? void 0 : e.t("Typography"),
onClick: () => this.showMenu()
}), t.appendChild(this.toolbarButton));
}
setupEventListeners() {
this.editor && this.editor.getContainer().addEventListener("click", this.handleClick);
}
handleKeyDown(t) {
t.ctrlKey && t.key === "t" && (t.preventDefault(), this.showMenu());
}
handleClick() {
var t;
(t = this.editor) == null || t.getContainer().focus();
}
showMenu() {
var t;
this.editor && (this.editor.getContainer().focus(), (t = this.menu) == null || t.show((e) => this.applyStyle(e)));
}
applyStyle(t) {
var s, a, h, l, c, d, p, u, y, m;
if (!this.editor) return;
const e = window.getSelection();
if (!e || e.rangeCount === 0) return;
const r = e.getRangeAt(0);
if (r.commonAncestorContainer.parentElement)
switch (t) {
case "h1":
case "h2":
case "h3":
case "h4":
case "h5":
case "h6":
(a = (s = this.editor) == null ? void 0 : s.getTextFormatter()) == null || a.applyBlock(t);
break;
case "paragraph":
(l = (h = this.editor) == null ? void 0 : h.getTextFormatter()) == null || l.applyBlock("p");
break;
case "blockquote":
(d = (c = this.editor) == null ? void 0 : c.getTextFormatter()) == null || d.applyBlock("blockquote");
break;
case "pre":
(u = (p = this.editor) == null ? void 0 : p.getTextFormatter()) == null || u.applyBlock("pre");
break;
case "hr":
const i = w("my-4 border-t border-gray-300");
r.deleteContents(), r.insertNode(i), r.setStartAfter(i), r.setEndAfter(i), e.removeAllRanges(), e.addRange(r);
break;
case "clear":
(m = (y = this.editor) == null ? void 0 : y.getTextFormatter()) == null || m.clearBlock();
break;
}
}
destroy() {
var t, e;
this.editor && this.editor.getContainer().removeEventListener("click", this.handleClick), document.removeEventListener("keydown", this.handleKeyDown), this.toolbarButton && this.toolbarButton.parentElement && this.toolbarButton.parentElement.removeChild(this.toolbarButton), (t = this.menu) == null || t.destroy(), (e = this.editor) == null || e.off("typography"), this.editor = null, this.menu = null, this.toolbarButton = null;
}
}
export {
S as TypographyPlugin
};