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
14 lines (13 loc) • 2.88 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 */
"use strict";var l=Object.defineProperty;var d=(o,t,e)=>t in o?l(o,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[t]=e;var r=(o,t,e)=>d(o,typeof t!="symbol"?t+"":t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css */;/* empty css */const h=require("../ToolbarPlugin/utils.cjs"),u=require("../../icons/track-changes.svg.cjs");class g{constructor(){r(this,"name","track-changes");r(this,"editor",null);r(this,"enabled",!1);r(this,"toolbarButton",null);r(this,"handleInput",t=>{var i,a,c;if(!this.enabled||!t.target)return;const n=(a=(i=this.editor)==null?void 0:i.getTextFormatter())==null?void 0:a.getSelection();if(n&&n.rangeCount>0){const s=n.getRangeAt(0).startContainer.parentElement;s&&((c=this.editor)!=null&&c.getContainer().contains(s))&&(s.classList.add("tracked-insert"),setTimeout(()=>s.classList.remove("tracked-insert"),1e3))}})}initialize(t){this.editor=t,this.addToolbarButton(),t.getContainer().addEventListener("input",this.handleInput)}addToolbarButton(){var e,n;const t=(e=this.editor)==null?void 0:e.getToolbar();t&&(t.querySelector("[data-track-changes-button]")||(this.toolbarButton=h.createToolbarButton({icon:u.default,title:(n=this.editor)==null?void 0:n.t("Track Changes"),onClick:()=>this.toggle()}),this.toolbarButton.setAttribute("data-track-changes-button","true"),t.appendChild(this.toolbarButton)))}toggle(){if(this.enabled=!this.enabled,this.editor){const t=this.enabled?this.editor.t("Track changes enabled"):this.editor.t("Track changes disabled");this.showInlineNotification(t)}}showInlineNotification(t){if(!this.editor)return;const e=this.editor.getDOMContext();if(!e)return;e.querySelectorAll(".track-changes-notification").forEach(a=>{a.parentNode&&a.parentNode.removeChild(a)});const i=document.createElement("div");i.className="track-changes-notification",i.id=`track-changes-notification-${Date.now()}`,i.textContent=t,i.style.cssText=`
position: absolute;
top: 10px;
right: 10px;
background: #3b82f6;
color: white;
padding: 8px 16px;
border-radius: 6px;
font-size: 14px;
z-index: 1000;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
`,e.appendChild(i),setTimeout(()=>{i.parentNode&&i.parentNode.removeChild(i)},3e3)}destroy(){if(!this.editor)return;this.editor.getContainer().removeEventListener("input",this.handleInput),this.toolbarButton&&(this.toolbarButton.remove(),this.toolbarButton=null),this.editor.off("track-changes"),this.editor.off("track-changes-enabled"),this.editor.off("track-changes-disabled"),this.editor=null,this.enabled=!1}}exports.TrackChangesPlugin=g;