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
130 lines (129 loc) • 4.82 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 h = Object.defineProperty;
var u = (r, t, e) => t in r ? h(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
var i = (r, t, e) => u(r, typeof t != "symbol" ? t + "" : t, e);
/* empty css */
/* empty css */
import { LinkMenu as c } from "./components/LinkMenu.mjs";
import { createToolbarButton as a } from "../ToolbarPlugin/utils.mjs";
import d from "../../icons/delete.svg.mjs";
import m from "../../icons/edit.svg.mjs";
import f from "../../icons/link.svg.mjs";
import { ContextMenu as g } from "../../core/ui/ContextMenu.mjs";
import { createLink as p } from "../../utils/helpers.mjs";
class E {
constructor() {
i(this, "name", "link");
i(this, "hotkeys", [{ keys: "Ctrl+Alt+Z", description: "Insert link", command: "link", icon: "🔗" }]);
i(this, "editor", null);
i(this, "menu", null);
i(this, "contextMenu", null);
i(this, "currentRange", null);
i(this, "toolbarButton", null);
i(this, "handleContextMenu", (t) => {
var n;
const e = t.target.closest("a");
if (e instanceof HTMLAnchorElement) {
t.preventDefault();
const o = t.clientX, l = t.clientY;
console.log("Mouse coordinates:", o, l), (n = this.contextMenu) == null || n.show(e, o, l);
}
});
}
initialize(t) {
var e, n;
this.menu = new c(t), this.contextMenu = new g(
t,
[
{
label: (e = this.editor) == null ? void 0 : e.t("Edit"),
icon: m,
iconPosition: "right",
hotkey: "S",
onClick: (o) => {
o && this.editLink(o);
}
},
{
type: "divider"
},
{
label: (n = this.editor) == null ? void 0 : n.t("Remove"),
icon: d,
iconPosition: "right",
hotkey: "D",
onClick: (o) => {
o && this.removeLink(o);
}
}
],
{
orientation: "horizontal"
}
), this.editor = t, this.addToolbarButton(), this.setupContextMenu(), this.editor.on("link", () => {
this.openModal();
});
}
addToolbarButton() {
var e, n;
const t = (e = this.editor) == null ? void 0 : e.getToolbar();
t && (this.toolbarButton = a({
icon: f,
title: (n = this.editor) == null ? void 0 : n.t("Insert Link"),
onClick: () => {
this.openModal();
}
}), t.appendChild(this.toolbarButton));
}
setupContextMenu() {
if (!this.editor) return;
this.editor.getContainer().addEventListener("contextmenu", this.handleContextMenu);
}
openModal() {
var n, o, l;
if (!this.editor) return;
(n = this.editor) == null || n.ensureEditorFocus();
const t = (o = this.editor.getTextFormatter()) == null ? void 0 : o.getSelection();
t && t.rangeCount > 0 && (this.currentRange = t.getRangeAt(0).cloneRange());
const e = t ? t.toString().trim() : "";
(l = this.menu) == null || l.show(
(s) => {
this.handleLinkInsertion(s, e);
},
{ anchor: e }
);
}
handleLinkInsertion(t, e) {
if (!this.editor || !this.currentRange) return;
const n = t.anchor || e, o = p(n, t.url);
t.title && (o.title = t.title), t.nofollow && (o.rel = "nofollow"), t.targetBlank && (o.target = "_blank"), this.currentRange.deleteContents(), this.currentRange.insertNode(o), this.currentRange.collapse(!1), this.currentRange = null;
}
editLink(t) {
var n;
if (!this.editor) return;
const e = {
url: t.href,
anchor: t.textContent || "",
title: t.title,
nofollow: t.rel.includes("nofollow"),
targetBlank: t.target === "_blank"
};
(n = this.menu) == null || n.show((o) => {
t.href = o.url, t.textContent = o.anchor || o.url, t.title = o.title || "", t.rel = o.nofollow ? "nofollow" : "", t.target = o.targetBlank ? "_blank" : "";
}, e);
}
removeLink(t) {
if (!this.editor) return;
const e = document.createTextNode(t.textContent || "");
t.replaceWith(e);
}
destroy() {
var e, n;
(e = this.editor) == null || e.off("link"), this.contextMenu && (this.contextMenu.destroy(), this.contextMenu = null), this.toolbarButton && this.toolbarButton.parentElement && (this.toolbarButton.parentElement.removeChild(this.toolbarButton), this.toolbarButton = null);
const t = (n = this.editor) == null ? void 0 : n.getContainer();
t && t.removeEventListener("contextmenu", this.handleContextMenu), this.menu = null, this.editor = null, this.currentRange = null;
}
}
export {
E as LinkPlugin
};