on-codemerge/dist/src/plugins/HTMLViewerPlugin/index.mjs

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

var e = Object.defineProperty;
var l = (i, t, o) => t in i ? e(i, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : i[t] = o;
var r = (i, t, o) => l(i, typeof t != "symbol" ? t + "" : t, o);
/* empty css            */
/* empty css             */
import { HTMLViewerModal as n } from "./components/HTMLViewerModal.mjs";
import { createToolbarButton as s } from "../ToolbarPlugin/utils.mjs";
import h from "../../icons/html.svg.mjs";
class w {
  constructor() {
    r(this, "name", "html-viewer");
    r(this, "hotkeys", [{ keys: "Ctrl+Alt+W", description: "View HTML", command: "html-viewer", icon: "🖥️" }]);
    r(this, "editor", null);
    r(this, "modal", null);
    r(this, "toolbarButton", null);
  }
  initialize(t) {
    this.modal = new n(t), this.editor = t, this.addToolbarButton(), this.editor.on("html-viewer", () => {
      this.showHTML();
    });
  }
  addToolbarButton() {
    var o;
    const t = document.querySelector(".editor-toolbar");
    t && (this.toolbarButton = s({
      icon: h,
      title: ((o = this.editor) == null ? void 0 : o.t("View HTML")) ?? "",
      onClick: () => this.showHTML()
    }), t.appendChild(this.toolbarButton));
  }
  showHTML() {
    var t;
    this.editor && ((t = this.modal) == null || t.show(this.editor.getHtml()));
  }
  destroy() {
    var t;
    this.modal && (this.modal.destroy(), this.modal = null), this.toolbarButton && this.toolbarButton.parentElement && (this.toolbarButton.parentElement.removeChild(this.toolbarButton), this.toolbarButton = null), (t = this.editor) == null || t.off("html-viewer"), this.editor = null;
  }
}
export {
  w as HTMLViewerPlugin
};