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
3 lines (2 loc) • 5.7 kB
JavaScript
"use strict";var L=Object.defineProperty;var E=(c,e,t)=>e in c?L(c,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):c[e]=t;var d=(c,e,t)=>E(c,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css */;/* empty css */const f=require("../ToolbarPlugin/utils.cjs"),C=require("../../icons/list-bullet.svg.cjs"),N=require("../../icons/list-numbered.svg.cjs"),B=require("../../utils/helpers.cjs");class y{constructor(){d(this,"name","lists");d(this,"hotkeys",[{keys:"Ctrl+Shift+U",description:"Bulleted list",command:"lists-unordered",icon:"•"},{keys:"Ctrl+Shift+O",description:"Numbered list",command:"lists-ordered",icon:"1️⃣"}]);d(this,"editor",null);d(this,"ulButton",null);d(this,"olButton",null);d(this,"handleKeydown",e=>{(e.metaKey||e.ctrlKey)&&e.key==="Enter"&&(e.preventDefault(),this.exitListAndInsertBreak())})}initialize(e){this.editor=e,this.addToolbarButtons(),this.setupListHandling(),this.editor.on("lists-unordered",()=>{var t;(t=this.editor)==null||t.ensureEditorFocus(),this.toggleList("unordered")}),this.editor.on("lists-ordered",()=>{var t;(t=this.editor)==null||t.ensureEditorFocus(),this.toggleList("ordered")})}addToolbarButtons(){var t,o,i;const e=document.querySelector(".editor-toolbar");e&&(this.ulButton=f.createToolbarButton({icon:C.default,title:(t=this.editor)==null?void 0:t.t("Bullet List"),onClick:()=>{var n;(n=this.editor)==null||n.ensureEditorFocus(),this.toggleList("unordered"),this.handleSelectionChange()}}),this.olButton=f.createToolbarButton({icon:N.default,title:(o=this.editor)==null?void 0:o.t("Numbered List"),onClick:()=>{var n;(n=this.editor)==null||n.ensureEditorFocus(),this.toggleList("ordered"),this.handleSelectionChange()}}),e.appendChild(this.ulButton),e.appendChild(this.olButton),(i=this.editor)==null||i.on("selectionchange",()=>this.handleSelectionChange()))}handleSelectionChange(){var n,l,s,a,r,u,h;const e=window.getSelection();if(!e||!e.rangeCount)return;const o=e.getRangeAt(0).commonAncestorContainer,i=o.nodeType===Node.ELEMENT_NODE?o.closest("ul, ol"):(n=o.parentElement)==null?void 0:n.closest("ul, ol");i?i.tagName==="UL"?((l=this.ulButton)==null||l.classList.add("active"),(s=this.olButton)==null||s.classList.remove("active")):i.tagName==="OL"&&((a=this.olButton)==null||a.classList.add("active"),(r=this.ulButton)==null||r.classList.remove("active")):((u=this.ulButton)==null||u.classList.remove("active"),(h=this.olButton)==null||h.classList.remove("active"))}setupListHandling(){this.editor&&this.editor.getContainer().addEventListener("keydown",this.handleKeydown)}exitListAndInsertBreak(){var i,n,l;const e=window.getSelection();if(!e||!e.rangeCount)return;const t=e.getRangeAt(0),o=(i=t.commonAncestorContainer.parentElement)==null?void 0:i.closest("li");if(o){const s=o.parentElement;if(!s)return;const a=B.createP("my-4");s.nextSibling?(n=s.parentNode)==null||n.insertBefore(a,s.nextSibling):(l=s.parentNode)==null||l.appendChild(a),t.selectNodeContents(a),t.collapse(!0),e.removeAllRanges(),e.addRange(t)}}toggleList(e){var l;if(!this.editor)return;const t=window.getSelection();if(!t||!t.rangeCount)return;const o=t.getRangeAt(0),i=o.commonAncestorContainer,n=i.nodeType===Node.ELEMENT_NODE?i.closest("ul, ol"):(l=i.parentElement)==null?void 0:l.closest("ul, ol");n?e==="ordered"&&n.tagName==="OL"||e==="unordered"&&n.tagName==="UL"?this.unwrapList(n):this.replaceList(n,e):this.createNewList(o,e)}unwrapList(e){var n,l,s;const t=Array.from(e.querySelectorAll("li")),o=document.createElement("div");t.forEach((a,r)=>{o.appendChild(document.createTextNode(a.textContent||"")),r<t.length-1&&o.appendChild(document.createElement("br"))}),(n=e.parentNode)==null||n.replaceChild(o,e);const i=document.createRange();i.selectNodeContents(o),(l=window.getSelection())==null||l.removeAllRanges(),(s=window.getSelection())==null||s.addRange(i)}replaceList(e,t){var n;const o=t==="ordered"?"ol":"ul",i=document.createElement(o);Array.from(e.children).forEach(l=>{const s=document.createElement("li");s.innerHTML=l.innerHTML,i.appendChild(s)}),(n=e.parentNode)==null||n.replaceChild(i,e),this.applyListStyles(i,t)}createNewList(e,t){var s,a;const o=e.extractContents(),i=t==="ordered"?"ol":"ul",n=document.createElement(i);if(Array.from(o.childNodes).forEach(r=>{var u,h;if(r.nodeType===Node.TEXT_NODE)(((u=r.textContent)==null?void 0:u.split(`
`).filter(g=>g.trim()!==""))||[]).forEach(g=>{const p=document.createElement("li");p.textContent=g.trim(),n.appendChild(p)});else if(r.nodeName!=="BR"){if(r.nodeType===Node.ELEMENT_NODE&&((h=r.textContent)==null?void 0:h.trim())!==""){const m=document.createElement("li");m.appendChild(r.cloneNode(!0)),n.appendChild(m)}}}),n.children.length===0){const r=document.createElement("li");r.textContent="List item",n.appendChild(r)}e.insertNode(n),this.applyListStyles(n,t);const l=document.createRange();l.selectNodeContents(n.lastElementChild||n),(s=window.getSelection())==null||s.removeAllRanges(),(a=window.getSelection())==null||a.addRange(l)}applyListStyles(e,t){t==="ordered"?e.className="list-decimal pl-8 my-4 space-y-2":e.className="list-disc pl-8 my-4 space-y-2",e.querySelectorAll("li").forEach(o=>{o.className="pl-2"})}destroy(){var e,t;this.editor&&this.editor.getContainer().removeEventListener("keydown",this.handleKeydown),this.ulButton&&this.ulButton.parentElement&&this.ulButton.parentElement.removeChild(this.ulButton),this.olButton&&this.olButton.parentElement&&this.olButton.parentElement.removeChild(this.olButton),(e=this.editor)==null||e.off("selectionchange"),(t=this.editor)==null||t.off("lists"),this.editor=null,this.ulButton=null,this.olButton=null}}exports.ListsPlugin=y;