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
2 lines (1 loc) • 3.53 kB
JavaScript
"use strict";var s=Object.defineProperty;var u=(r,t,e)=>t in r?s(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);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css */;/* empty css */const c=require("./components/LinkMenu.cjs"),h=require("../ToolbarPlugin/utils.cjs"),a=require("../../icons/delete.svg.cjs"),d=require("../../icons/edit.svg.cjs"),f=require("../../icons/link.svg.cjs"),g=require("../../core/ui/ContextMenu.cjs"),m=require("../../utils/helpers.cjs");class x{constructor(){i(this,"name","link");i(this,"hotkeys",[{keys:"Ctrl+Alt+K",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 o;const e=t.target.closest("a");if(e instanceof HTMLAnchorElement){t.preventDefault();const n=t.clientX+window.scrollX,l=t.clientY+window.scrollY;console.log("Mouse coordinates with scroll:",n,l),(o=this.contextMenu)==null||o.show(e,n,l)}})}initialize(t){var e,o;this.menu=new c.LinkMenu(t),this.contextMenu=new g.ContextMenu(t,[{label:(e=this.editor)==null?void 0:e.t("Edit"),icon:d.default,iconPosition:"right",hotkey:"S",onClick:n=>{n&&this.editLink(n)}},{type:"divider"},{label:(o=this.editor)==null?void 0:o.t("Remove"),icon:a.default,iconPosition:"right",hotkey:"D",onClick:n=>{n&&this.removeLink(n)}}],{orientation:"horizontal"}),this.editor=t,this.addToolbarButton(),this.setupContextMenu(),this.editor.on("link",()=>{this.openModal()})}addToolbarButton(){var e;const t=document.querySelector(".editor-toolbar");t&&(this.toolbarButton=h.createToolbarButton({icon:f.default,title:(e=this.editor)==null?void 0:e.t("Insert Link"),onClick:()=>{this.openModal()}}),t.appendChild(this.toolbarButton))}setupContextMenu(){if(!this.editor)return;this.editor.getContainer().addEventListener("contextmenu",this.handleContextMenu)}openModal(){var o,n;if(!this.editor)return;(o=this.editor)==null||o.ensureEditorFocus();const t=window.getSelection();t&&t.rangeCount>0&&(this.currentRange=t.getRangeAt(0).cloneRange());const e=t?t.toString().trim():"";(n=this.menu)==null||n.show(l=>{this.handleLinkInsertion(l,e)},{anchor:e})}handleLinkInsertion(t,e){if(!this.editor||!this.currentRange)return;const o=t.anchor||e,n=m.createLink(o,t.url);t.title&&(n.title=t.title),t.nofollow&&(n.rel="nofollow"),t.targetBlank&&(n.target="_blank"),this.currentRange.deleteContents(),this.currentRange.insertNode(n),this.currentRange.collapse(!1),this.currentRange=null}editLink(t){var o;if(!this.editor)return;const e={url:t.href,anchor:t.textContent||"",title:t.title,nofollow:t.rel.includes("nofollow"),targetBlank:t.target==="_blank"};(o=this.menu)==null||o.show(n=>{t.href=n.url,t.textContent=n.anchor||n.url,t.title=n.title||"",t.rel=n.nofollow?"nofollow":"",t.target=n.targetBlank?"_blank":""},e)}removeLink(t){if(!this.editor)return;const e=document.createTextNode(t.textContent||"");t.replaceWith(e)}destroy(){var e,o;(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=(o=this.editor)==null?void 0:o.getContainer();t&&t.removeEventListener("contextmenu",this.handleContextMenu),this.menu=null,this.editor=null,this.currentRange=null}}exports.LinkPlugin=x;