richer-than-rich
Advanced tools
Comparing version 0.4.0 to 0.4.1
"use strict";/*! | ||
* richer-than-rich v0.4.0 | ||
* richer-than-rich v0.4.1 | ||
* (c) 2022 Antoni Andre | ||
* @license MIT | ||
*/const s=require("vue"),H=["p","ul","ol","table","h1","h2","h3","h4","h5","h6","iframe"],D=(t,e,n,c=!1)=>{const a=new Range;a.selectNode(t),K();const m=document.createElement(e);return a.surroundContents(m),c||w(n),m},O=(t,e,n)=>{const c=D(t,e,n,!0);return $(t),w(n),c},$=t=>{t.replaceWith(...t.childNodes)},K=()=>Q(),Q=()=>{const t=window.getSelection(),e=t.rangeCount&&t.getRangeAt(0);if(!e)return;t.removeAllRanges();const n=document.createElement("span");n.className="richer__selection-start",n.contentEditable=!1;const c=document.createElement("span");c.className="richer__selection-end",c.contentEditable=!1,e.insertNode(n),e.collapse(!1),e.insertNode(c)},w=t=>{const e=new Range,n=t.querySelector(".richer__selection-start"),c=t.querySelector(".richer__selection-end");if(!n||!c)return;e.setStartBefore(n),e.setEndAfter(c);const a=window.getSelection();a.removeAllRanges(),a.addRange(e),n.remove(),c.remove()},T=(t,e,n)=>(t=t.nodeType===3?t.parentNode:t,t.isSameNode(n)?n.childNodes[e]:t.closest(H.join(","))),X=t=>{[...t].forEach((e,n)=>{if(!["span","strong","em"].includes(e.nodeName.toLowerCase()))return;const a=t[n+1];a&&a.nodeType!==3&&a.nodeName===e.nodeName&&a.className===e.className&&(e.append(...a.childNodes),a.remove())})},q={replacements:{b:{tag:"strong",class:"bold"},i:{tag:"em",class:"italic"},u:{tag:"span",class:"underline"},s:{tag:"span",class:"strikethrough"},div:{tag:"p",class:"paragraph"}}},R=({inputField:t,content:e})=>{e.isProcessed=!1,F(t),U(t),t.normalize(),t.querySelectorAll("*:not(p,br):empty").forEach(n=>n.remove()),W(t.children||[]),t.normalize(),e.processed=t.innerHTML,e.isProcessed=!0,e.isEmpty=!e.processed||!!e.processed.match(/^\s*<p[^>]*>\s*<\/p>\s*$/)},Y=({inputField:t,content:e})=>{e.isProcessed=!1,F(t),U(t),t.normalize(),e.processed=t.innerHTML,e.isProcessed=!0,e.isEmpty=!e.processed||!!e.processed.match(/^\s*<p[^>]*>\s*<\/p>\s*$/)},F=t=>{if(!t.querySelectorAll(H.join(",")).length){K();const n=new Range;n.selectNodeContents(t),n.surroundContents(document.createElement("p")),w(t)}},U=t=>{const e=Object.keys(q.replacements).join(",");t.querySelectorAll(e).forEach(n=>{const{tag:c,class:a}=q.replacements[n.tagName.toLowerCase()],m=document.createElement(c);c==="span"&&(m.className=a),m.innerHTML=n.innerHTML,n.replaceWith(m)})},W=t=>{[...t].forEach(e=>{if(e.nodeType===3)return;const n=e.nodeName.toLowerCase(),c=n+(n==="span"?`.${e.className}`:""),a=e.querySelectorAll(c);a&&a.forEach(m=>$(m))}),X(t),[...t].forEach(e=>{e.hasChildNodes()&&W(e.childNodes)})},Z=({button:t,nearestBlockEl:e})=>{e.className=e.className.replace(/r-align-(left|center|right|justify)|/,`r-${t.name}`)},ee=({button:t,inputField:e,nearestBlockEl:n})=>{const c=t.name.substr(-2);if(n.nodeName.toLowerCase()===c)n.childNodes.forEach(a=>O(a,"p",e)),$(n);else{const a=O(n,"li",e);D(a,c,e)}},te=({button:t,inputField:e,sel:n})=>{const c=n.getRangeAt(0),a=document.createElement("table"),m=document.createElement("tr"),h=document.createElement("td");c.surroundContents(h),c.surroundContents(m),c.surroundContents(a)},ne=({button:t,sel:e,nearestBlockEl:n})=>{if(n){const c=+(n.className.match(/r-indent-(\d)/)||[,0])[1];let a=1;t.name==="indent"?a=Math.min(c+1,8):a=Math.max(c-1,0),n.classList.remove(`r-indent-${c}`),a>0&&n.classList.add(`r-indent-${a}`)}},V=Object.freeze(Object.defineProperty({__proto__:null,align:Z,list:ee,table:te,indent:ne},Symbol.toStringTag,{value:"Module"}));const se={class:"richer__menu"},ae={key:0,class:"richer__separator"},oe=["onClick","title"],ce={__name:"menu",props:{userButtons:{type:Object},shortcuts:{type:Object}},emits:["button-click","action"],setup(t,{expose:e,emit:n}){const c=t,{focus:a,process:m,wrapSelection:h,unwrapSelection:C,inputField:u,content:y}=s.inject("editor");let{menuButtons:f}=s.inject("editor");const S={"font-size":{label:"Text size"},"font-family":{label:"Font"},"text-color":{label:"Text color"},"background-color":{label:"Background color"},bold:{tag:"strong",label:"Bold",shortcut:"meta+b"},italic:{tag:"em",label:"Italic",shortcut:"meta+i"},underline:{label:"Underline",shortcut:"meta+u"},strikethrough:{label:"Strikethrough",size:130,shortcut:"meta+s"},"list-ul":{label:"Bulleted list",action:"list"},"list-ol":{label:"Numbered list",action:"list"},"align-left":{label:"Align left",action:"align"},"align-center":{label:"Align center",action:"align"},"align-right":{label:"Align right",action:"align"},"align-justify":{label:"Align justify",action:"align"},unindent:{label:"Unindent",action:"indent"},indent:{label:"indent",action:"indent"},subscript:{tag:"sub",label:"Subscript"},superscript:{tag:"sup",label:"Superscript"},link:{tag:"a",label:"Link"},image:{tag:"img",label:"Photo"},table:{tag:"table",label:"Table",action:"table"},code:{tag:"code",label:"Code"},undo:{label:"Undo"},redo:{label:"Redo"},"clear-format":{code:"x",label:"Clear format"}},E=["bold","italic","underline","strikethrough","|","list-ul","list-ol","|","align-left","align-center","align-right","align-justify"];(()=>{f.value=[];let d=c.userButtons.length?c.userButtons:E;d=d.map(o=>(typeof o=="string"&&(o={name:o}),{...S[o.name],...o,name:o.name})),f.value.push(...d.map(o=>(o.shortcut&&(c.shortcuts[o.shortcut]=o.name),{...o,tag:o.tag||"span",active:!1})))})();const k=(d,o)=>{o.active=!o.active,n("button-click",{e:d,button:s.toRaw(o)}),b(d,o)},b=(d,o)=>{a();const r=window.getSelection();if(o.action&&[typeof V[o.action],typeof o.action].includes("function")){let l=T(r.baseNode,r.baseOffset,u.value);const i={button:o,inputField:u.value,sel:r,e:d,nearestBlockEl:l};typeof o.action=="function"?o.action(i):V[o.action](i),m({inputField:u.value,content:y.value})}else r.isCollapsed||(o.active?h(r,o):C(r,o),m({inputField:u.value,content:y.value}));a(),n("action",{e:d,button:s.toRaw(o)})};return e({action:b,highlightButtons:()=>{const d=window.getSelection();f.value.forEach(o=>{if(o.name==="|")return;o.active=!1;const r=o.tag==="span"?`${o.tag}.r-${o.name}`:o.tag;if(d.isCollapsed){const l=d.baseNode.nodeType===3?d.baseNode.parentNode:d.baseNode;o.active=!!l.closest(r)}else{const{commonAncestorContainer:l,commonAncestorContainer:{nodeType:i,parentNode:p}}=d.getRangeAt(0),g=i===3?p:l;o.active=!!g.closest(r)}})}}),(d,o)=>(s.openBlock(),s.createElementBlock("div",se,[(s.openBlock(!0),s.createElementBlock(s.Fragment,null,s.renderList(s.unref(f),(r,l)=>(s.openBlock(),s.createElementBlock(s.Fragment,{key:l},[r.name==="|"?(s.openBlock(),s.createElementBlock("span",ae)):s.renderSlot(d.$slots,"button",{key:1,button:r,action:()=>k(d.$event,r),classes:{[`richer__button--${r.name} ${r.icon||`i-${r.name}`}`]:!0,"richer__button--active":r.active}},()=>[s.createElementVNode("button",{class:s.normalizeClass(["richer__button",{[`richer__button--${r.name} ${r.icon||`i-${r.name}`}`]:!0,"richer__button--active":r.active}]),onClick:i=>k(i,r),type:"button",title:r.label,style:s.normalizeStyle({fontSize:r.size?`${r.size}%`:null})},[s.createElementVNode("span",null,s.toDisplayString(r.label),1)],14,oe)])],64))),128))]))}};const le={class:"content-wrap"},re=["innerHTML"],ie={key:0,class:"richer__placeholder"},de={__name:"index",props:{modelValue:{type:String,default:""},placeholder:{type:String,default:"Type something..."},buttons:{type:Array,default:()=>[]},darkMode:{type:[Boolean,String]},contentProps:{type:Object,default:()=>({})}},emits:["focus","blur","keydown","keyup","input","click","paste","html","button-click"],setup(t,{emit:e}){const n=t,c=s.ref(null),a=s.ref(null);s.ref(n.darkMode);const m={},h=s.ref([]),C=s.ref(n.placeholder),u=s.ref({initial:n.modelValue||"",processed:n.modelValue||"",isEmpty:!0,isProcessed:!1}),y=(l,i)=>{const p=l.getRangeAt(0),g=document.createElement(i.tag);i.tag==="span"&&(g.className=`r-${i.name}`);try{p.surroundContents(g)}catch{const v=p.extractContents();g.appendChild(v),p.insertNode(g)}R({inputField:a.value,content:u.value})},f=(l,i)=>{const p=T(l.baseNode,l.baseOffset,a.value),g=T(l.extentNode,l.extentOffset,a.value),N=l.getRangeAt(0),v=new Range;v.setStart(p,0),v.setEnd(N.startContainer,N.startOffset);const I=v.extractContents(),A=l.getRangeAt(0).extractContents(),x=i.tag,G=x==="span"?`.r-${i.name}`:"";A.querySelectorAll(x+G).forEach(L=>{L.replaceWith(...L.childNodes)});const _=new Range;_.selectNodeContents(g),_.setStart(N.endContainer,N.endOffset);const J=_.extractContents(),P=new DocumentFragment,j=document.createElement("span");j.className="richer__selection-start";const z=document.createElement("span");z.className="richer__selection-end",P.append(...I.childNodes,j,...A.childNodes,z,...J.childNodes);const B=new Range;B.setStart(v.startContainer,0),B.setEnd(_.endContainer,_.endOffset),B.insertNode(P),w(a.value)},S=l=>{if(c.value.highlightButtons(),l.metaKey){const i=m[`meta+${l.key}`],p=h.value.find(g=>g.name===i);i&&p&&(c.value.action(l,p),l.preventDefault())}e("keydown",{e:l,html:u.value.processed})},E=l=>{c.value.highlightButtons(),e("keyup",{e:l,html:u.value.processed})},k=l=>{c.value.highlightButtons(),e("click",{e:l,html:u.value.processed})},b=l=>{R({inputField:a.value,content:u.value}),e("input",{e:l,html:u.value.processed})},M=l=>{const i=document.createElement("p");a.value.innerHTML||a.value.appendChild(i),e("focus",{e:l,html:u.value.processed})},d=l=>{e("blur",{e:l,html:u.value.processed})},o=l=>{e("paste",{e:l,html:u.value.processed})},r=()=>a.value.focus();return s.onMounted(()=>{n.darkMode==="auto"&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches,Y({inputField:a.value,content:u.value})}),s.provide("editor",{focus:r,process:R,wrapSelection:y,unwrapSelection:f,inputField:a,menuButtons:h,content:u}),(l,i)=>(s.openBlock(),s.createElementBlock("div",{class:s.normalizeClass(["richer",{"richer--dark":t.darkMode}])},[s.createVNode(ce,{ref_key:"menu",ref:c,buttons:h.value,"onUpdate:buttons":i[0]||(i[0]=p=>h.value=p),"user-buttons":n.buttons,shortcuts:m},{button:s.withCtx(p=>[s.renderSlot(l.$slots,"button",s.normalizeProps(s.guardReactiveProps(p)))]),_:3},8,["buttons","user-buttons"]),s.createElementVNode("div",le,[s.createElementVNode("div",s.mergeProps({class:"richer__content",ref_key:"inputField",ref:a,contenteditable:"",onInput:b,onClick:k,onKeyup:E,onKeydown:S,onFocus:M,onBlur:d,onPaste:o},n.contentProps,{innerHTML:u.value.initial}),null,16,re),C.value&&u.value.isEmpty?(s.openBlock(),s.createElementBlock("div",ie,s.toDisplayString(n.placeholder),1)):s.createCommentVNode("",!0)])],2))}};module.exports=de; |
import { inject as V, openBlock as _, createElementBlock as y, Fragment as K, renderList as oe, unref as ce, renderSlot as I, createElementVNode as S, normalizeClass as G, normalizeStyle as le, toDisplayString as J, toRaw as D, ref as v, onMounted as re, provide as ie, createVNode as de, withCtx as ue, normalizeProps as me, guardReactiveProps as pe, mergeProps as ge, createCommentVNode as he } from "vue"; | ||
/*! | ||
* richer-than-rich v0.4.0 | ||
* richer-than-rich v0.4.1 | ||
* (c) 2022 Antoni Andre | ||
@@ -5,0 +5,0 @@ * @license MIT |
(function(s,h){typeof exports=="object"&&typeof module<"u"?module.exports=h(require("vue")):typeof define=="function"&&define.amd?define(["vue"],h):(s=typeof globalThis<"u"?globalThis:s||self,s.RicherThanRich=h(s.Vue))})(this,function(s){"use strict";/*! | ||
* richer-than-rich v0.4.0 | ||
* richer-than-rich v0.4.1 | ||
* (c) 2022 Antoni Andre | ||
* @license MIT | ||
*/const h=["p","ul","ol","table","h1","h2","h3","h4","h5","h6","iframe"],A=(t,e,n,c=!1)=>{const a=new Range;a.selectNode(t),P();const u=document.createElement(e);return a.surroundContents(u),c||b(n),u},x=(t,e,n)=>{const c=A(t,e,n,!0);return E(t),b(n),c},E=t=>{t.replaceWith(...t.childNodes)},P=()=>I(),I=()=>{const t=window.getSelection(),e=t.rangeCount&&t.getRangeAt(0);if(!e)return;t.removeAllRanges();const n=document.createElement("span");n.className="richer__selection-start",n.contentEditable=!1;const c=document.createElement("span");c.className="richer__selection-end",c.contentEditable=!1,e.insertNode(n),e.collapse(!1),e.insertNode(c)},b=t=>{const e=new Range,n=t.querySelector(".richer__selection-start"),c=t.querySelector(".richer__selection-end");if(!n||!c)return;e.setStartBefore(n),e.setEndAfter(c);const a=window.getSelection();a.removeAllRanges(),a.addRange(e),n.remove(),c.remove()},B=(t,e,n)=>(t=t.nodeType===3?t.parentNode:t,t.isSameNode(n)?n.childNodes[e]:t.closest(h.join(","))),G=t=>{[...t].forEach((e,n)=>{if(!["span","strong","em"].includes(e.nodeName.toLowerCase()))return;const a=t[n+1];a&&a.nodeType!==3&&a.nodeName===e.nodeName&&a.className===e.className&&(e.append(...a.childNodes),a.remove())})},j={replacements:{b:{tag:"strong",class:"bold"},i:{tag:"em",class:"italic"},u:{tag:"span",class:"underline"},s:{tag:"span",class:"strikethrough"},div:{tag:"p",class:"paragraph"}}},v=({inputField:t,content:e})=>{e.isProcessed=!1,z(t),L(t),t.normalize(),t.querySelectorAll("*:not(p,br):empty").forEach(n=>n.remove()),O(t.children||[]),t.normalize(),e.processed=t.innerHTML,e.isProcessed=!0,e.isEmpty=!e.processed||!!e.processed.match(/^\s*<p[^>]*>\s*<\/p>\s*$/)},J=({inputField:t,content:e})=>{e.isProcessed=!1,z(t),L(t),t.normalize(),e.processed=t.innerHTML,e.isProcessed=!0,e.isEmpty=!e.processed||!!e.processed.match(/^\s*<p[^>]*>\s*<\/p>\s*$/)},z=t=>{if(!t.querySelectorAll(h.join(",")).length){P();const n=new Range;n.selectNodeContents(t),n.surroundContents(document.createElement("p")),b(t)}},L=t=>{const e=Object.keys(j.replacements).join(",");t.querySelectorAll(e).forEach(n=>{const{tag:c,class:a}=j.replacements[n.tagName.toLowerCase()],u=document.createElement(c);c==="span"&&(u.className=a),u.innerHTML=n.innerHTML,n.replaceWith(u)})},O=t=>{[...t].forEach(e=>{if(e.nodeType===3)return;const n=e.nodeName.toLowerCase(),c=n+(n==="span"?`.${e.className}`:""),a=e.querySelectorAll(c);a&&a.forEach(u=>E(u))}),G(t),[...t].forEach(e=>{e.hasChildNodes()&&O(e.childNodes)})},V=Object.freeze(Object.defineProperty({__proto__:null,align:({button:t,nearestBlockEl:e})=>{e.className=e.className.replace(/r-align-(left|center|right|justify)|/,`r-${t.name}`)},list:({button:t,inputField:e,nearestBlockEl:n})=>{const c=t.name.substr(-2);if(n.nodeName.toLowerCase()===c)n.childNodes.forEach(a=>x(a,"p",e)),E(n);else{const a=x(n,"li",e);A(a,c,e)}},table:({button:t,inputField:e,sel:n})=>{const c=n.getRangeAt(0),a=document.createElement("table"),u=document.createElement("tr"),f=document.createElement("td");c.surroundContents(f),c.surroundContents(u),c.surroundContents(a)},indent:({button:t,sel:e,nearestBlockEl:n})=>{if(n){const c=+(n.className.match(/r-indent-(\d)/)||[,0])[1];let a=1;t.name==="indent"?a=Math.min(c+1,8):a=Math.max(c-1,0),n.classList.remove(`r-indent-${c}`),a>0&&n.classList.add(`r-indent-${a}`)}}},Symbol.toStringTag,{value:"Module"})),de="",Q={class:"richer__menu"},X={key:0,class:"richer__separator"},Y=["onClick","title"],Z={__name:"menu",props:{userButtons:{type:Object},shortcuts:{type:Object}},emits:["button-click","action"],setup(t,{expose:e,emit:n}){const c=t,{focus:a,process:u,wrapSelection:f,unwrapSelection:T,inputField:m,content:w}=s.inject("editor");let{menuButtons:_}=s.inject("editor");const R={"font-size":{label:"Text size"},"font-family":{label:"Font"},"text-color":{label:"Text color"},"background-color":{label:"Background color"},bold:{tag:"strong",label:"Bold",shortcut:"meta+b"},italic:{tag:"em",label:"Italic",shortcut:"meta+i"},underline:{label:"Underline",shortcut:"meta+u"},strikethrough:{label:"Strikethrough",size:130,shortcut:"meta+s"},"list-ul":{label:"Bulleted list",action:"list"},"list-ol":{label:"Numbered list",action:"list"},"align-left":{label:"Align left",action:"align"},"align-center":{label:"Align center",action:"align"},"align-right":{label:"Align right",action:"align"},"align-justify":{label:"Align justify",action:"align"},unindent:{label:"Unindent",action:"indent"},indent:{label:"indent",action:"indent"},subscript:{tag:"sub",label:"Subscript"},superscript:{tag:"sup",label:"Superscript"},link:{tag:"a",label:"Link"},image:{tag:"img",label:"Photo"},table:{tag:"table",label:"Table",action:"table"},code:{tag:"code",label:"Code"},undo:{label:"Undo"},redo:{label:"Redo"},"clear-format":{code:"x",label:"Clear format"}},$=["bold","italic","underline","strikethrough","|","list-ul","list-ol","|","align-left","align-center","align-right","align-justify"];(()=>{_.value=[];let d=c.userButtons.length?c.userButtons:$;d=d.map(o=>(typeof o=="string"&&(o={name:o}),{...R[o.name],...o,name:o.name})),_.value.push(...d.map(o=>(o.shortcut&&(c.shortcuts[o.shortcut]=o.name),{...o,tag:o.tag||"span",active:!1})))})();const C=(d,o)=>{o.active=!o.active,n("button-click",{e:d,button:s.toRaw(o)}),S(d,o)},S=(d,o)=>{a();const r=window.getSelection();if(o.action&&[typeof V[o.action],typeof o.action].includes("function")){let l=B(r.baseNode,r.baseOffset,m.value);const i={button:o,inputField:m.value,sel:r,e:d,nearestBlockEl:l};typeof o.action=="function"?o.action(i):V[o.action](i),u({inputField:m.value,content:w.value})}else r.isCollapsed||(o.active?f(r,o):T(r,o),u({inputField:m.value,content:w.value}));a(),n("action",{e:d,button:s.toRaw(o)})};return e({action:S,highlightButtons:()=>{const d=window.getSelection();_.value.forEach(o=>{if(o.name==="|")return;o.active=!1;const r=o.tag==="span"?`${o.tag}.r-${o.name}`:o.tag;if(d.isCollapsed){const l=d.baseNode.nodeType===3?d.baseNode.parentNode:d.baseNode;o.active=!!l.closest(r)}else{const{commonAncestorContainer:l,commonAncestorContainer:{nodeType:i,parentNode:p}}=d.getRangeAt(0),g=i===3?p:l;o.active=!!g.closest(r)}})}}),(d,o)=>(s.openBlock(),s.createElementBlock("div",Q,[(s.openBlock(!0),s.createElementBlock(s.Fragment,null,s.renderList(s.unref(_),(r,l)=>(s.openBlock(),s.createElementBlock(s.Fragment,{key:l},[r.name==="|"?(s.openBlock(),s.createElementBlock("span",X)):s.renderSlot(d.$slots,"button",{key:1,button:r,action:()=>C(d.$event,r),classes:{[`richer__button--${r.name} ${r.icon||`i-${r.name}`}`]:!0,"richer__button--active":r.active}},()=>[s.createElementVNode("button",{class:s.normalizeClass(["richer__button",{[`richer__button--${r.name} ${r.icon||`i-${r.name}`}`]:!0,"richer__button--active":r.active}]),onClick:i=>C(i,r),type:"button",title:r.label,style:s.normalizeStyle({fontSize:r.size?`${r.size}%`:null})},[s.createElementVNode("span",null,s.toDisplayString(r.label),1)],14,Y)])],64))),128))]))}},me="",ue="",ee={class:"content-wrap"},te=["innerHTML"],ne={key:0,class:"richer__placeholder"};return{__name:"index",props:{modelValue:{type:String,default:""},placeholder:{type:String,default:"Type something..."},buttons:{type:Array,default:()=>[]},darkMode:{type:[Boolean,String]},contentProps:{type:Object,default:()=>({})}},emits:["focus","blur","keydown","keyup","input","click","paste","html","button-click"],setup(t,{emit:e}){const n=t,c=s.ref(null),a=s.ref(null);s.ref(n.darkMode);const u={},f=s.ref([]),T=s.ref(n.placeholder),m=s.ref({initial:n.modelValue||"",processed:n.modelValue||"",isEmpty:!0,isProcessed:!1}),w=(l,i)=>{const p=l.getRangeAt(0),g=document.createElement(i.tag);i.tag==="span"&&(g.className=`r-${i.name}`);try{p.surroundContents(g)}catch{const y=p.extractContents();g.appendChild(y),p.insertNode(g)}v({inputField:a.value,content:m.value})},_=(l,i)=>{const p=B(l.baseNode,l.baseOffset,a.value),g=B(l.extentNode,l.extentOffset,a.value),N=l.getRangeAt(0),y=new Range;y.setStart(p,0),y.setEnd(N.startContainer,N.startOffset);const se=y.extractContents(),H=l.getRangeAt(0).extractContents(),D=i.tag,ae=D==="span"?`.r-${i.name}`:"";H.querySelectorAll(D+ae).forEach(W=>{W.replaceWith(...W.childNodes)});const k=new Range;k.selectNodeContents(g),k.setStart(N.endContainer,N.endOffset);const oe=k.extractContents(),K=new DocumentFragment,F=document.createElement("span");F.className="richer__selection-start";const U=document.createElement("span");U.className="richer__selection-end",K.append(...se.childNodes,F,...H.childNodes,U,...oe.childNodes);const M=new Range;M.setStart(y.startContainer,0),M.setEnd(k.endContainer,k.endOffset),M.insertNode(K),b(a.value)},R=l=>{if(c.value.highlightButtons(),l.metaKey){const i=u[`meta+${l.key}`],p=f.value.find(g=>g.name===i);i&&p&&(c.value.action(l,p),l.preventDefault())}e("keydown",{e:l,html:m.value.processed})},$=l=>{c.value.highlightButtons(),e("keyup",{e:l,html:m.value.processed})},C=l=>{c.value.highlightButtons(),e("click",{e:l,html:m.value.processed})},S=l=>{v({inputField:a.value,content:m.value}),e("input",{e:l,html:m.value.processed})},q=l=>{const i=document.createElement("p");a.value.innerHTML||a.value.appendChild(i),e("focus",{e:l,html:m.value.processed})},d=l=>{e("blur",{e:l,html:m.value.processed})},o=l=>{e("paste",{e:l,html:m.value.processed})},r=()=>a.value.focus();return s.onMounted(()=>{n.darkMode==="auto"&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches,J({inputField:a.value,content:m.value})}),s.provide("editor",{focus:r,process:v,wrapSelection:w,unwrapSelection:_,inputField:a,menuButtons:f,content:m}),(l,i)=>(s.openBlock(),s.createElementBlock("div",{class:s.normalizeClass(["richer",{"richer--dark":t.darkMode}])},[s.createVNode(Z,{ref_key:"menu",ref:c,buttons:f.value,"onUpdate:buttons":i[0]||(i[0]=p=>f.value=p),"user-buttons":n.buttons,shortcuts:u},{button:s.withCtx(p=>[s.renderSlot(l.$slots,"button",s.normalizeProps(s.guardReactiveProps(p)))]),_:3},8,["buttons","user-buttons"]),s.createElementVNode("div",ee,[s.createElementVNode("div",s.mergeProps({class:"richer__content",ref_key:"inputField",ref:a,contenteditable:"",onInput:S,onClick:C,onKeyup:$,onKeydown:R,onFocus:q,onBlur:d,onPaste:o},n.contentProps,{innerHTML:m.value.initial}),null,16,te),T.value&&m.value.isEmpty?(s.openBlock(),s.createElementBlock("div",ne,s.toDisplayString(n.placeholder),1)):s.createCommentVNode("",!0)])],2))}}}); |
{ | ||
"name": "richer-than-rich", | ||
"version": "0.4.0", | ||
"version": "0.4.1", | ||
"description": "Another modern rich text editor $$. A promising one. 🚧 WIP", | ||
"author": "Antoni Andre <antoniandre.web@gmail.com>", | ||
"homepage": "https://antoniandre.github.io/richer-than-rich", | ||
"repository": "https://github.com/antoniandre/richer-than-rich", | ||
"license": "MIT", | ||
"repository": "https://github.com/antoniandre/richer-than-rich", | ||
"homepage": "https://antoniandre.github.io/richer-than-rich", | ||
"funding": "https://github.com/sponsors/antoniandre", | ||
@@ -14,2 +14,6 @@ "main": "./dist/richer-than-rich.umd.js", | ||
"module": "./dist/richer-than-rich.es.js", | ||
"files": [ | ||
"dist", | ||
"src/richer-than-rich" | ||
], | ||
"exports": { | ||
@@ -23,6 +27,2 @@ ".": { | ||
}, | ||
"files": [ | ||
"dist", | ||
"src/richer-than-rich" | ||
], | ||
"type": "module", | ||
@@ -44,13 +44,16 @@ "keywords": [ | ||
}, | ||
"peerDependencies": { | ||
"vue": "^3.0.0" | ||
}, | ||
"devDependencies": { | ||
"@vitejs/plugin-vue": "^3.0.0", | ||
"@vitejs/plugin-vue": "^3.1.2", | ||
"autoprefixer": "^10.4.12", | ||
"path": "^0.12.7", | ||
"sass": "^1.54.3", | ||
"postcss": "^8.4.18", | ||
"pug": "^3.0.2", | ||
"sass": "^1.55.0", | ||
"simple-syntax-highlighter": "^2.2.3", | ||
"vite": "^3.0.0", | ||
"vite-plugin-pug": "^0.3.1" | ||
"vite": "^3.1.8", | ||
"vue": "^3.2.41" | ||
}, | ||
"peerDependencies": { | ||
"vue": "^2.6.14 || ^3.2.0" | ||
} | ||
} |
@@ -113,3 +113,2 @@ /** | ||
const nestedDupes = node.querySelectorAll(selector) | ||
console.log('cleaning nested dupes', { nestedDupes, selector, node }) | ||
if (nestedDupes) nestedDupes.forEach(node => unwrapNode(node)) | ||
@@ -116,0 +115,0 @@ }) |
@@ -114,3 +114,2 @@ /** | ||
node = node.nodeType === 3 ? node.parentNode : node | ||
console.log('👨🚀', node) | ||
if (node.isSameNode(richerInputField)) { | ||
@@ -130,6 +129,4 @@ // Find the next sibling at caret position. | ||
if (nextNode) console.log(nextNode, nextNode.nodeType, nextNode.nodeName, node.nodeName, nextNode.className, node.className, 'la') | ||
if (nextNode && nextNode.nodeType !== 3 && nextNode.nodeName === node.nodeName && nextNode.className === node.className) { | ||
node.append(...nextNode.childNodes) | ||
console.log('merging!!') | ||
nextNode.remove() | ||
@@ -136,0 +133,0 @@ } |
Sorry, the diff of this file is not supported yet
122049
9
748