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
111 lines (110 loc) • 4.85 kB
JavaScript
/*! on-codemerge v1.3.1 @author Pavel Kuzmin @license MIT @homepage https://s00d.github.io/on-codemerge/ @repository git+https://github.com/s00d/on-codemerge.git Copyright (c) 2026 Pavel Kuzmin - Built on 2026-07-02T13:39:17.947Z */
var f = Object.defineProperty;
var k = (n, t, e) => t in n ? f(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
var r = (n, t, e) => k(n, typeof t != "symbol" ? t + "" : t, e);
/* empty css */
/* empty css */
import { TypographyMenu as w } from "./components/TypographyMenu.mjs";
import { createToolbarButton as T } from "../ToolbarPlugin/utils.mjs";
import C from "../../icons/typography.svg.mjs";
import { createHr as v } from "../../utils/helpers.mjs";
class L {
constructor() {
r(this, "name", "typography");
r(this, "hotkeys", [
{
keys: "Ctrl+Shift+W",
description: "Adjust typography settings",
command: "typography-settings",
icon: "✒️"
}
]);
r(this, "editor", null);
r(this, "menu", null);
r(this, "toolbarButton", null);
r(this, "boundKeyDown");
}
initialize(t) {
this.editor = t, this.menu = new w(t), this.addToolbarButton(), this.setupEventListeners(), this.setupKeyboardEvents(), this.boundKeyDown = (e) => this.handleKeyDown(e), document.addEventListener("keydown", this.boundKeyDown), this.editor.on("typography", () => {
var e;
(e = this.editor) == null || e.ensureEditorFocus(), this.showMenu();
});
}
addToolbarButton() {
var e, o;
const t = (e = this.editor) == null ? void 0 : e.getToolbar();
t && (this.toolbarButton = T({
icon: C,
title: ((o = this.editor) == null ? void 0 : o.t("Typography")) || "Typography",
onClick: () => this.showMenu()
}), t.appendChild(this.toolbarButton));
}
setupEventListeners() {
this.editor && this.editor.getContainer().addEventListener("click", this.handleClick);
}
setupKeyboardEvents() {
this.editor && (this.boundKeyDown = (t) => {
t.key === "Tab" && (t.preventDefault(), this.insertTab());
}, this.editor.getDOMContext().addEventListener("keydown", this.boundKeyDown));
}
insertTab() {
var i;
if (!this.editor) return;
const t = (i = this.editor.getTextFormatter()) == null ? void 0 : i.getSelection();
if (!t || t.rangeCount === 0) return;
const e = t.getRangeAt(0), o = document.createTextNode(" ");
e.deleteContents(), e.insertNode(o), e.setStartAfter(o), e.setEndAfter(o), t.removeAllRanges(), t.addRange(e);
}
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 a, h, d, l, c, u, p, y, g, m, b;
if (!this.editor) return;
const e = (a = this.editor.getTextFormatter()) == null ? void 0 : a.getSelection();
if (!e || e.rangeCount === 0) return;
const o = e.getRangeAt(0);
if (o.commonAncestorContainer.parentElement)
switch (t) {
case "h1":
case "h2":
case "h3":
case "h4":
case "h5":
case "h6":
(d = (h = this.editor) == null ? void 0 : h.getTextFormatter()) == null || d.applyBlock(t);
break;
case "paragraph":
(c = (l = this.editor) == null ? void 0 : l.getTextFormatter()) == null || c.applyBlock("p");
break;
case "blockquote":
(p = (u = this.editor) == null ? void 0 : u.getTextFormatter()) == null || p.applyBlock("blockquote");
break;
case "pre":
(g = (y = this.editor) == null ? void 0 : y.getTextFormatter()) == null || g.applyBlock("pre");
break;
case "hr":
const s = v("my-4 border-t border-gray-300");
o.deleteContents(), o.insertNode(s), o.setStartAfter(s), o.setEndAfter(s), e.removeAllRanges(), e.addRange(o);
break;
case "clear":
(b = (m = this.editor) == null ? void 0 : m.getTextFormatter()) == null || b.clearBlock();
break;
}
}
destroy() {
var t, e, o;
this.editor && this.editor.getContainer().removeEventListener("click", this.handleClick), this.boundKeyDown && ((t = this.editor) == null || t.getDOMContext().removeEventListener("keydown", this.boundKeyDown), this.boundKeyDown = void 0), this.toolbarButton && this.toolbarButton.parentElement && this.toolbarButton.parentElement.removeChild(this.toolbarButton), (e = this.menu) == null || e.destroy(), (o = this.editor) == null || o.off("typography"), this.editor = null, this.menu = null, this.toolbarButton = null;
}
}
export {
L as TypographyPlugin
};