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
62 lines (61 loc) • 2.91 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 r = Object.defineProperty;
var l = (o, t, a) => t in o ? r(o, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : o[t] = a;
var n = (o, t, a) => l(o, typeof t != "symbol" ? t + "" : t, a);
/* empty css */
/* empty css */
import { LanguageManager as s } from "./services/LanguageManager.mjs";
import { LanguageMenu as g } from "./components/LanguageMenu.mjs";
import u from "../../icons/globe.svg.mjs";
import { LocaleManager as c } from "../../core/services/LocaleManager.mjs";
class f {
constructor() {
n(this, "name", "language");
n(this, "editor", null);
n(this, "languageManager");
n(this, "menu", null);
n(this, "toolbarButton", null);
this.languageManager = new s();
}
initialize(t) {
this.editor = t, this.menu = new g(t, this.languageManager), this.addToolbarButton(), this.setupLanguageManager();
}
addToolbarButton() {
var a, e;
const t = (a = this.editor) == null ? void 0 : a.getToolbar();
t && (this.toolbarButton = document.createElement("div"), this.toolbarButton.className = "language-indicator flex items-center gap-2 py-1 bg-gray-100 rounded-lg text-sm font-medium text-gray-700 cursor-pointer hover:bg-gray-200 transition-colors", this.toolbarButton.title = ((e = this.editor) == null ? void 0 : e.t("Current locale - Click to change")) || "Current locale - Click to change", this.updateLanguageIndicator(), this.toolbarButton.addEventListener("click", () => {
var i;
(i = this.menu) == null || i.show(), this.updateLanguageIndicator();
}), t.appendChild(this.toolbarButton));
}
updateLanguageIndicator() {
var e;
if (!this.toolbarButton) return;
const t = ((e = this.editor) == null ? void 0 : e.getLocale()) || "en", a = c.getLocaleLabel(t);
this.toolbarButton.innerHTML = `
<span class="language-icon">${u}</span>
<span class="language-label">${a}</span>
`;
}
setupLanguageManager() {
if (!this.editor) return;
this.languageManager.initialize(this.editor);
const t = localStorage.getItem("editor-language");
t && this.editor.setLocale(t).catch(console.error);
const a = () => {
this.updateLanguageIndicator();
}, e = this.editor.setLocale.bind(this.editor);
this.editor.setLocale = async (i) => {
await e(i), a();
};
}
getLanguageManager() {
return this.languageManager;
}
destroy() {
this.toolbarButton && this.toolbarButton.parentElement && this.toolbarButton.parentElement.removeChild(this.toolbarButton), this.menu && this.menu.destroy(), this.editor = null, this.menu = null, this.toolbarButton = null;
}
}
export {
f as LanguagePlugin
};