diff --git a/vendors/knockout/build/output/knockout-latest.debug.js b/vendors/knockout/build/output/knockout-latest.debug.js
index c9f3d8992..d08a196d5 100644
--- a/vendors/knockout/build/output/knockout-latest.debug.js
+++ b/vendors/knockout/build/output/knockout-latest.debug.js
@@ -788,22 +788,6 @@ ko.observableArray['fn'] = {
this.valueHasMutated();
}
return removedValues;
- },
-
- 'removeAll': function (arrayOfValues) {
- // If you passed zero args, we remove everything
- if (arrayOfValues === undefined) {
- var underlyingArray = this.peek();
- var allValues = underlyingArray.slice(0);
- this.valueWillMutate();
- underlyingArray.splice(0, underlyingArray.length);
- this.valueHasMutated();
- return allValues;
- }
- // If you passed an arg, we interpret it as an array of entries to remove
- if (!arrayOfValues)
- return [];
- return this['remove'](value => arrayOfValues.includes(value));
}
};
@@ -848,7 +832,7 @@ ko.isObservableArray = instance => {
ko.exportSymbol('observableArray', ko.observableArray);
ko.exportSymbol('isObservableArray', ko.isObservableArray);
-var arrayChangeEventName = 'arrayChange';
+const arrayChangeEventName = 'arrayChange';
ko.extenders['trackArrayChanges'] = (target, options) => {
// Use the provided options--each call to trackArrayChanges overwrites the previously set options
target.compareArrayOptions = {};
diff --git a/vendors/knockout/build/output/knockout-latest.js b/vendors/knockout/build/output/knockout-latest.js
index 755a6abcb..feb14080b 100644
--- a/vendors/knockout/build/output/knockout-latest.js
+++ b/vendors/knockout/build/output/knockout-latest.js
@@ -4,81 +4,80 @@
* License: MIT (http://www.opensource.org/licenses/mit-license.php)
*/
-(C=>{function F(a,c){return null===a||da[typeof a]?a===c:!1}function E(a,c){var e;return()=>{e||(e=b.a.setTimeout(()=>{e=0;a()},c))}}function J(a,c){var e;return()=>{clearTimeout(e);e=b.a.setTimeout(a,c)}}function S(a,c){null!==c&&c.o&&c.o()}function V(a,c){var e=this.hc,g=e[D];g.$||(this.Va&&this.za[c]?(e.wb(c,a,this.za[c]),this.za[c]=null,--this.Va):g.u[c]||e.wb(c,a,g.v?{V:a}:e.Yb(a)),a.ja&&a.bc())}var T=C.document,W={},b="undefined"!==typeof W?W:{};b.m=(a,c)=>{a=a.split(".");for(var e=b,g=0;g<
-a.length-1;g++)e=e[a[g]];e[a[a.length-1]]=c};b.Z=(a,c,e)=>{a[c]=e};b.version="3.5.1-sm";b.m("version",b.version);b.a={wa:(a,c)=>{c=a.indexOf(c);0{c&&Object.entries(c).forEach(e=>a[e[0]]=e[1]);return a},N:(a,c)=>a&&Object.entries(a).forEach(e=>c(e[0],e[1])),fb:(a,c,e)=>{if(!a)return a;var g={};Object.entries(a).forEach(k=>g[k[0]]=c.call(e,k[1],k[0],a));return g},Za:a=>{for(;a.firstChild;)b.removeNode(a.firstChild)},Rb:a=>{var c=[...a],e=(c[0]&&c[0].ownerDocument||
-T).createElement("div");a.forEach(g=>e.append(b.ea(g)));return e},ya:(a,c)=>Array.prototype.map.call(a,c?e=>b.ea(e.cloneNode(!0)):e=>e.cloneNode(!0)),sa:(a,c)=>{b.a.Za(a);c&&a.append(...c)},Aa:(a,c)=>{if(a.length){for(c=8===c.nodeType&&c.parentNode||c;a.length&&a[0].parentNode!==c;)a.splice(0,1);for(;1null==a?"":a.trim?a.trim():a.toString().replace(/^[\s\xa0]+|[\s\xa0]+$/g,
-""),Ec:(a,c)=>{a=a||"";return c.length>a.length?!1:a.substring(0,c.length)===c},kc:(a,c)=>c.contains(1!==a.nodeType?a.parentNode:a),Ya:a=>b.a.kc(a,a.ownerDocument.documentElement),Eb:a=>b.onError?function(){try{return a.apply(this,arguments)}catch(c){throw b.onError&&b.onError(c),c;}}:a,setTimeout:(a,c)=>setTimeout(b.a.Eb(a),c),Ib:a=>setTimeout(()=>{b.onError&&b.onError(a);throw a;},0),H:(a,c,e)=>{a.addEventListener(c,b.a.Eb(e),!1)},Zb:(a,c)=>{if(!a||!a.nodeType)throw Error("element must be a DOM node when calling triggerEvent");
-a.dispatchEvent(new Event(c))},g:a=>b.K(a)?a():a,jb:(a,c)=>a.textContent=b.a.g(c)||""};b.m("utils",b.a);b.m("unwrap",b.a.g);b.a.f=new function(){let a=0,c="__ko__"+Date.now(),e=new WeakMap;return{get:(g,k)=>(e.get(g)||{})[k],set:(g,k,t)=>{if(e.has(g))e.get(g)[k]=t;else{let d={};d[k]=t;e.set(g,d)}return t},ab:function(g,k,t){return this.get(g,k)||this.set(g,k,t)},clear:g=>e.delete(g),X:()=>a++ +c}};b.a.J=new function(){function a(d,f){var h=b.a.f.get(d,g);void 0===h&&f&&(h=[],b.a.f.set(d,g,h));return h}
-function c(d){var f=a(d,!1);if(f){f=f.slice(0);for(var h=0;h{if("function"!=typeof f)throw Error("Callback must be a function");a(d,!0).push(f)},ib:(d,f)=>{var h=a(d,!1);h&&(b.a.wa(h,f),0==h.length&&b.a.f.set(d,g,void 0))},ea:d=>
-{b.i.D(()=>{k[d.nodeType]&&(c(d),t[d.nodeType]&&e(d.getElementsByTagName("*")))});return d},removeNode:d=>{b.ea(d);d.parentNode&&d.parentNode.removeChild(d)}}};b.ea=b.a.J.ea;b.removeNode=b.a.J.removeNode;b.m("utils.domNodeDisposal",b.a.J);b.m("utils.domNodeDisposal.addDisposeCallback",b.a.J.ma);b.mb=(()=>{function a(){if(e)for(var d=e,f=0,h;kd){if(5E3<=++f){k=e;b.a.Ib(Error("'Too much recursion' after processing "+f+" task groups."));break}d=e}try{h()}catch(n){b.a.Ib(n)}}k=e=
-c.length=0}var c=[],e=0,g=1,k=0,t=(d=>{var f=T.createElement("div");(new MutationObserver(d)).observe(f,{attributes:!0});return()=>f.classList.toggle("foo")})(a);return{Vb:d=>{e||t(a);c[e++]=d;return g++},cancel:d=>{d-=g-e;d>=k&&da.Ha(e=>J(e,c)),rateLimit:(a,c)=>{if("number"==typeof c)var e=c;else{e=c.timeout;var g=c.method}var k="function"==typeof g?g:E;a.Ha(t=>k(t,e,c))},notify:(a,c)=>{a.equalityComparer="always"==c?null:F}};var da={undefined:1,
-"boolean":1,number:1,string:1};b.m("extenders",b.$a);class ea{constructor(a,c,e){this.V=a;this.pb=c;this.Cb=e;this.Na=!1;this.P=this.Ra=null;b.Z(this,"dispose",this.o);b.Z(this,"disposeWhenNodeIsRemoved",this.j)}o(){this.Na||(this.P&&b.a.J.ib(this.Ra,this.P),this.Na=!0,this.Cb(),this.V=this.pb=this.Cb=this.Ra=this.P=null)}j(a){this.Ra=a;b.a.J.ma(a,this.P=this.o.bind(this))}}b.T=function(){Object.setPrototypeOf(this,P);P.Ea(this)};var P={Ea:a=>{a.U={change:[]};a.vb=1},subscribe:function(a,c,e){var g=
-this;e=e||"change";var k=new ea(g,c?a.bind(c):a,()=>{b.a.wa(g.U[e],k);g.va&&g.va(e)});g.na&&g.na(e);g.U[e]||(g.U[e]=[]);g.U[e].push(k);return k},notifySubscribers:function(a,c){c=c||"change";"change"===c&&this.Ka();if(this.qa(c)){c="change"===c&&this.$b||this.U[c].slice(0);try{b.i.zb();for(var e=0,g;g=c[e++];)g.Na||g.pb(a)}finally{b.i.end()}}},Ca:function(){return this.vb},qc:function(a){return this.Ca()!==a},Ka:function(){++this.vb},Ha:function(a){var c=this,e=b.K(c),g,k,t,d,f;c.ua||(c.ua=c.notifySubscribers,
-c.notifySubscribers=function(n,p){p&&"change"!==p?"beforeChange"===p?this.sb(n):this.ua(n,p):this.tb(n)});var h=a(()=>{c.ja=!1;e&&d===c&&(d=c.qb?c.qb():c());var n=k||f&&c.Ga(t,d);f=k=g=!1;n&&c.ua(t=d)});c.tb=(n,p)=>{p&&c.ja||(f=!p);c.$b=c.U.change.slice(0);c.ja=g=!0;d=n;h()};c.sb=n=>{g||(t=n,c.ua(n,"beforeChange"))};c.ub=()=>{f=!0};c.bc=()=>{c.Ga(t,c.F(!0))&&(k=!0)}},qa:function(a){return this.U[a]&&this.U[a].length},Ga:function(a,c){return!this.equalityComparer||!this.equalityComparer(a,c)},toString:()=>
-"[object Object]",extend:function(a){var c=this;a&&b.a.N(a,(e,g)=>{e=b.$a[e];"function"==typeof e&&(c=e(c,g)||c)});return c}};b.Z(P,"init",P.Ea);b.Z(P,"subscribe",P.subscribe);b.Z(P,"extend",P.extend);Object.setPrototypeOf(P,Function.prototype);b.T.fn=P;b.tc=a=>null!=a&&"function"==typeof a.subscribe&&"function"==typeof a.notifySubscribers;b.i=(()=>{var a=[],c,e=0;return{zb:g=>{a.push(c);c=g},end:()=>c=a.pop(),Ub:g=>{if(c){if(!b.tc(g))throw Error("Only subscribable things can act as dependencies");
-c.dc.call(c.ec,g,g.ac||(g.ac=++e))}},D:(g,k,t)=>{try{return a.push(c),c=void 0,g.apply(k,t||[])}finally{c=a.pop()}},Ba:()=>c&&c.l.Ba(),cb:()=>c&&c.cb,l:()=>c&&c.l}})();const O=Symbol("_latestValue");b.ba=a=>{function c(){if(0null==c[O]?void 0:c[O].length});b.T.fn.Ea(c);Object.setPrototypeOf(c,Q);return c};var Q={toJSON:function(){let a=this[O];
-return a&&a.toJSON?a.toJSON():a},equalityComparer:F,F:function(){return this[O]},ta:function(){this.notifySubscribers(this[O],"spectate");this.notifySubscribers(this[O])},La:function(){this.notifySubscribers(this[O],"beforeChange")}};Object.setPrototypeOf(Q,b.T.fn);var R=b.ba.P="__ko_proto__";Q[R]=b.ba;b.K=a=>{if((a="function"==typeof a&&a[R])&&a!==Q[R]&&a!==b.l.fn[R])throw Error("Invalid object that looks like an observable; possibly from another Knockout instance");return!!a};b.vc=a=>"function"==
-typeof a&&(a[R]===Q[R]||a[R]===b.l.fn[R]&&a.rc);b.m("observable",b.ba);b.m("isObservable",b.K);b.m("observable.fn",Q);b.Z(Q,"valueHasMutated",Q.ta);b.ha=a=>{a=a||[];if("object"!=typeof a||!("length"in a))throw Error("The argument passed when initializing an observable array must be an array, or null, or undefined.");a=b.ba(a);Object.setPrototypeOf(a,b.ha.fn);return a.extend({trackArrayChanges:!0})};b.ha.fn={remove:function(a){for(var c=this.F(),e=[],g="function"!=typeof a||b.K(a)?function(d){return d===
-a}:a,k=c.length;k--;){var t=c[k];if(g(t)){0===e.length&&this.La();if(c[k]!==t)throw Error("Array modified during remove; cannot remove item");e.push(t);c.splice(k,1)}}e.length&&this.ta();return e},removeAll:function(a){if(void 0===a){var c=this.F(),e=c.slice(0);this.La();c.splice(0,c.length);this.ta();return e}return a?this.remove(g=>a.includes(g)):[]}};Object.setPrototypeOf(b.ha.fn,b.ba.fn);Object.getOwnPropertyNames(Array.prototype).forEach(a=>{"function"===typeof Array.prototype[a]&&"constructor"!=
-a&&("copyWithin fill pop push reverse shift sort splice unshift".split(" ").includes(a)?b.ha.fn[a]=function(...c){var e=this.F();this.La();this.Db(e,a,c);c=e[a](...c);this.ta();return c===e?this:c}:b.ha.fn[a]=function(...c){return this()[a](...c)})});b.Ob=a=>b.K(a)&&"function"==typeof a.remove&&"function"==typeof a.push;b.m("observableArray",b.ha);b.m("isObservableArray",b.Ob);b.$a.trackArrayChanges=(a,c)=>{function e(){function q(){if(f){var u=[].concat(a.F()||[]);if(a.qa("arrayChange")){if(!k||
-1++f,null,"spectate"),h=[].concat(a.F()||[]),k=null,t=a.subscribe(q))}a.Ta={};c&&"object"==typeof c&&b.a.extend(a.Ta,c);a.Ta.sparse=!0;if(!a.Db){var g=!1,k=null,t,d,f=0,h,n=a.na,p=a.va;a.na=q=>{n&&n.call(a,q);"arrayChange"===q&&e()};a.va=q=>{p&&p.call(a,q);"arrayChange"!==q||a.qa("arrayChange")||(t&&t.o(),d&&d.o(),d=t=null,g=!1,h=void 0)};a.Db=(q,u,x)=>{function l(G,z,M){return m[m.length]=
-{status:G,value:z,index:M}}if(g&&!f){var m=[],r=q.length,v=x.length,y=0;switch(u){case "push":y=r;case "unshift":for(u=0;ux[0]?r+x[0]:x[0]),r);r=1===v?r:Math.min(u+(x[1]||0),r);v=u+v-2;y=Math.max(r,v);for(var w=[],A=[],I=2;ua[e.ka]=
-e.V);return a},bb:function(a){if(!this[D].I)return!1;var c=this.oc();return c.includes(a)?!0:!!c.find(e=>e.bb&&e.bb(a))},wb:function(a,c,e){if(this[D].hb&&c===this)throw Error("A 'pure' computed must not be called recursively");this[D].u[a]=e;e.ka=this[D].I++;e.la=c.Ca()},ra:function(){var a,c=this[D].u;for(a in c)if(Object.prototype.hasOwnProperty.call(c,a)){var e=c[a];if(this.ia&&e.V.ja||e.V.qc(e.la))return!0}},Hc:function(){this.ia&&!this[D].Fa&&this.ia(!1)},ga:function(){var a=this[D];return a.W||
-0a.S(!0),c)):a.ia?a.ia(!0):a.S(!0)},S:function(a){var c=this[D],e=c.oa,g=!1;if(!c.Fa&&!c.$){if(c.j&&!b.a.Ya(c.j)||e&&e()){if(!c.lb){this.o();return}}else c.lb=!1;c.Fa=!0;try{g=this.mc(a)}finally{c.Fa=!1}return g}},mc:function(a){var c=this[D],e=c.hb?void 0:!c.I;var g={hc:this,
-za:c.u,Va:c.I};b.i.zb({ec:g,dc:V,l:this,cb:e});c.u={};c.I=0;var k=this.lc(c,g);c.I?g=this.Ga(c.L,k):(this.o(),g=!0);g&&(c.v?this.Ka():this.notifySubscribers(c.L,"beforeChange"),c.L=k,this.notifySubscribers(c.L,"spectate"),!c.v&&a&&this.notifySubscribers(c.L),this.ub&&this.ub());e&&this.notifySubscribers(c.L,"awake");return g},lc:(a,c)=>{try{return a.Tb()}finally{b.i.end(),c.Va&&!a.v&&b.a.N(c.za,S),a.aa=a.W=!1}},F:function(a){var c=this[D];(c.W&&(a||!c.I)||c.v&&this.ra())&&this.S();return c.L},Ha:function(a){b.T.fn.Ha.call(this,
-a);this.qb=function(){this[D].v||(this[D].aa?this.S():this[D].W=!1);return this[D].L};this.ia=function(c){this.sb(this[D].L);this[D].W=!0;c&&(this[D].aa=!0);this.tb(this,!c)}},o:function(){var a=this[D];!a.v&&a.u&&b.a.N(a.u,(c,e)=>e.o&&e.o());a.j&&a.Xa&&b.a.J.ib(a.j,a.Xa);a.u=void 0;a.I=0;a.$=!0;a.aa=!1;a.W=!1;a.v=!1;a.j=void 0;a.oa=void 0;a.Tb=void 0}},fa={na:function(a){var c=this,e=c[D];if(!e.$&&e.v&&"change"==a){e.v=!1;if(e.aa||c.ra())e.u=null,e.I=0,c.S()&&c.Ka();else{var g=[];b.a.N(e.u,(k,t)=>
-g[t.ka]=k);g.forEach((k,t)=>{var d=e.u[k],f=c.Yb(d.V);f.ka=t;f.la=d.la;e.u[k]=f});c.ra()&&c.S()&&c.Ka()}e.$||c.notifySubscribers(e.L,"awake")}},va:function(a){var c=this[D];c.$||"change"!=a||this.qa("change")||(b.a.N(c.u,(e,g)=>{g.o&&(c.u[e]={V:g.V,ka:g.ka,la:g.la},g.o())}),c.v=!0,this.notifySubscribers(void 0,"asleep"))},Ca:function(){var a=this[D];a.v&&(a.aa||this.ra())&&this.S();return b.T.fn.Ca.call(this)}},ha={na:function(a){"change"!=a&&"beforeChange"!=a||this.F()}};Object.setPrototypeOf(U,
-b.T.fn);U[b.ba.P]=b.l;b.m("computed",b.l);b.m("computed.fn",U);b.Z(U,"dispose",U.o);b.Ac=a=>{if("function"===typeof a)return b.l(a,{pure:!0});a=b.a.extend({},a);a.pure=!0;return b.l(a)};(()=>{b.A={O:a=>{switch(a.nodeName){case "OPTION":return!0===a.__ko__hasDomDataOptionValue__?b.a.f.get(a,b.b.options.gb):a.value;case "SELECT":return 0<=a.selectedIndex?b.A.O(a.options[a.selectedIndex]):void 0;default:return a.value}},Ma:(a,c,e)=>{switch(a.nodeName){case "OPTION":"string"===typeof c?(b.a.f.set(a,b.b.options.gb,
-void 0),delete a.__ko__hasDomDataOptionValue__,a.value=c):(b.a.f.set(a,b.b.options.gb,c),a.__ko__hasDomDataOptionValue__=!0,a.value="number"===typeof c?c:"");break;case "SELECT":for(var g=-1,k=""===c||null==c,t=0,d=a.options.length,f;t{function a(f){f=b.a.Xb(f);123===f.charCodeAt(0)&&(f=f.slice(1,-1));f+="\n,";var h=[],n=f.match(g),p=[],q=0;if(1=q){h.push(m&&p.length?{key:m,value:p.join("")}:{unknown:m||p.join("")});var m=q=0;p=[];continue}}else if(58===l){if(!q&&!m&&1===p.length){m=p.pop();continue}}else if(47===l&&1n(l.key||l.unknown,l.value));q.length&&n("_ko_property_writers","{"+q.join(",")+" }");return p.join(",")},wc:(f,h)=>-1<
-f.findIndex(n=>n.key==h),ob:(f,h,n,p,q)=>{if(f&&b.K(f))!b.vc(f)||q&&f.F()===p||f(p);else if((f=h.get("_ko_property_writers"))&&f[n])f[n](p)}}})();(()=>{function a(d){return 8==d.nodeType&&g.test(d.nodeValue)}function c(d){return 8==d.nodeType&&k.test(d.nodeValue)}function e(d,f){for(var h=d,n=1,p=[];h=h.nextSibling;){if(c(h)&&(b.a.f.set(h,t,!0),n--,0===n))return p;p.push(h);a(h)&&n++}if(!f)throw Error("Cannot find closing comment tag to match: "+d.nodeValue);return null}var g=/^\s*ko(?:\s+([\s\S]+))?\s*$/,
-k=/^\s*\/ko\s*$/,t="__ko_matchedEndComment__";b.h={ca:{},childNodes:d=>a(d)?e(d):d.childNodes,pa:d=>{if(a(d)){d=e(d);for(var f=0,h=d.length;f{if(a(d)){b.h.pa(d);d=d.nextSibling;for(var h=0,n=f.length;h{if(a(d)){var h=d.nextSibling;d=d.parentNode}else h=d.firstChild;d.insertBefore(f,h)},Nb:(d,f,h)=>{h?(h=h.nextSibling,a(d)&&(d=d.parentNode),d.insertBefore(f,h)):b.h.prepend(d,
-f)},firstChild:d=>{if(a(d))return!d.nextSibling||c(d.nextSibling)?null:d.nextSibling;if(d.firstChild&&c(d.firstChild))throw Error("Found invalid end comment, as the first child of "+d);return d.firstChild},nextSibling:d=>{if(a(d)){var f=e(d,void 0);d=f?0(d=d.nodeValue.match(g))?d[1]:null}})();(()=>{const a={};b.Bb=new class{xc(c){switch(c.nodeType){case 1:return null!=c.getAttribute("data-bind");case 8:return b.h.pc(c);default:return!1}}nc(c,e){a:{switch(c.nodeType){case 1:var g=c.getAttribute("data-bind");break a;case 8:g=b.h.Fc(c);break a}g=null}if(g){var k={valueAccessors:!0};try{var t=g+(k&&k.valueAccessors||""),d;if(!(d=a[t])){var f="with($context){with($data||{}){return{"+b.G.zc(g,k)+"}}}";var h=new Function("$context","$element",
-f);d=a[t]=h}var n=d(e,c)}catch(p){throw p.message="Unable to parse bindings.\nBindings value: "+g+"\nMessage: "+p.message,p;}}else n=null;return n}}})();(()=>{function a(l){var m=(l=b.a.f.get(l,x))&&l.C;m&&(l.C=null,m.Sb())}function c(l,m,r){this.node=l;this.Ab=m;this.xa=[];this.B=!1;m.C||b.a.J.ma(l,a);r&&r.C&&(r.C.xa.push(l),this.Oa=r)}function e(l){return b.a.fb(b.i.D(l),(m,r)=>()=>l()[r])}function g(l,m,r){return"function"===typeof l?e(l.bind(null,m,r)):b.a.fb(l,v=>()=>v)}function k(l,m){var r=
-b.h.firstChild(m);if(r)for(var v;v=r;)r=b.h.nextSibling(v),t(l,v);b.c.notify(m,b.c.B)}function t(l,m){var r=l;if(1===m.nodeType||b.Bb.xc(m))r=f(m,null,l).bindingContextForDescendants;r&&m.matches&&!m.matches("SCRIPT,TEXTAREA,TEMPLATE")&&k(r,m)}function d(l){var m=[],r={},v=[];b.a.N(l,function A(w){if(!r[w]){var I=b.getBindingHandler(w);I&&(I.after&&(v.push(w),I.after.forEach(G=>{if(l[G]){if(v.includes(G))throw Error("Cannot combine the following bindings, because they have a cyclic dependency: "+
-v.join(", "));A(G)}}),v.length--),m.push({key:w,Mb:I}));r[w]=!0}});return m}function f(l,m,r){var v=b.a.f.ab(l,x,{}),y=v.cc;if(!m){if(y)throw Error("You cannot apply bindings multiple times to the same element.");v.cc=!0}y||(v.context=r);v.eb||(v.eb={});if(m&&"function"!==typeof m)var w=m;else{var A=b.l(()=>{if(w=m?m(r,l):b.Bb.nc(l,r)){if(r[n])r[n]();if(r[q])r[q]()}return w},{j:l});w&&A.ga()||(A=null)}var I=r,G;if(w){var z=A?B=>()=>A()[B]():B=>w[B];function M(){return b.a.fb(A?A():w,B=>B())}M.get=
-B=>w[B]&&z(B)();M.has=B=>B in w;b.c.B in w&&b.c.subscribe(l,b.c.B,()=>{var B=w[b.c.B]();if(B){var H=b.h.childNodes(l);H.length&&B(H,b.Hb(H[0]))}});b.c.Y in w&&(I=b.c.kb(l,r),b.c.subscribe(l,b.c.Y,()=>{var B=w[b.c.Y]();B&&b.h.firstChild(l)&&B(l)}));d(w).forEach(B=>{var H=B.Mb.init,L=B.Mb.update,K=B.key;if(8===l.nodeType&&!b.h.ca[K])throw Error("The binding '"+K+"' cannot be used with virtual elements");try{"function"==typeof H&&b.i.D(()=>{var N=H(l,z(K),M,I.$data,I);if(N&&N.controlsDescendantBindings){if(void 0!==
-G)throw Error("Multiple bindings ("+G+" and "+K+") are trying to control descendant bindings of the same element. You cannot use these bindings together on the same element.");G=K}}),"function"==typeof L&&b.l(()=>L(l,z(K),M,I.$data,I),{j:l})}catch(N){throw N.message='Unable to process binding "'+K+": "+w[K]+'"\nMessage: '+N.message,N;}})}v=void 0===G;return{shouldBindDescendants:v,bindingContextForDescendants:v&&I}}function h(l,m){return l&&l instanceof b.R?l:new b.R(l,void 0,void 0,m)}var n=Symbol("_subscribable"),
-p=Symbol("_ancestorBindingInfo"),q=Symbol("_dataDependency");b.b={};b.getBindingHandler=l=>b.b[l];var u={};b.R=function(l,m,r,v,y){function w(){var H=z?G():G,L=b.a.g(H);m?(b.a.extend(A,m),p in m&&(A[p]=m[p])):(A.$parents=[],A.$root=L,A.ko=b);A[n]=B;I?L=A.$data:(A.$rawData=H,A.$data=L);r&&(A[r]=L);v&&v(A,m,L);if(m&&m[n]&&!b.i.l().bb(m[n]))m[n]();M&&(A[q]=M);return A.$data}var A=this,I=l===u,G=I?void 0:l,z="function"==typeof G&&!b.K(G),M=y&&y.dataDependency;if(y&&y.exportDependencies)w();else{var B=
-b.Ac(w);B.F();B.ga()?B.equalityComparer=null:A[n]=void 0}};b.R.prototype.createChildContext=function(l,m,r,v){!v&&m&&"object"==typeof m&&(v=m,m=v.as,r=v.extend);if(m&&v&&v.noChildContext){var y="function"==typeof l&&!b.K(l);return new b.R(u,this,null,w=>{r&&r(w);w[m]=y?l():l},v)}return new b.R(l,this,m,(w,A)=>{w.$parentContext=A;w.$parent=A.$data;w.$parents=(A.$parents||[]).slice(0);w.$parents.unshift(w.$parent);r&&r(w)},v)};b.R.prototype.extend=function(l,m){return new b.R(u,this,null,r=>b.a.extend(r,
-"function"==typeof l?l(r):l),m)};var x=b.a.f.X();c.prototype.Sb=function(){this.Oa&&this.Oa.C&&this.Oa.C.jc(this.node)};c.prototype.jc=function(l){b.a.wa(this.xa,l);!this.xa.length&&this.B&&this.Gb()};c.prototype.Gb=function(){this.B=!0;this.Ab.C&&!this.xa.length&&(this.Ab.C=null,b.a.J.ib(this.node,a),b.c.notify(this.node,b.c.Y),this.Sb())};b.c={B:"childrenComplete",Y:"descendantsComplete",subscribe:(l,m,r,v,y)=>{var w=b.a.f.ab(l,x,{});w.fa||(w.fa=new b.T);y&&y.notifyImmediately&&w.eb[m]&&b.i.D(r,
-v,[l]);return w.fa.subscribe(r,v,m)},notify:(l,m)=>{var r=b.a.f.get(l,x);if(r&&(r.eb[m]=!0,r.fa&&r.fa.notifySubscribers(l,m),m==b.c.B))if(r.C)r.C.Gb();else if(void 0===r.C&&r.fa&&r.fa.qa(b.c.Y))throw Error("descendantsComplete event not supported for bindings on this node");},kb:(l,m)=>{var r=b.a.f.ab(l,x,{});r.C||(r.C=new c(l,r,m[p]));return m[p]==r?m:m.extend(v=>{v[p]=r})}};b.Dc=l=>(l=b.a.f.get(l,x))&&l.context;b.Qa=(l,m,r)=>f(l,m,h(r));b.Gc=(l,m,r)=>{r=h(r);return b.Qa(l,g(m,r,l),r)};b.yb=(l,m)=>
-{1!==m.nodeType&&8!==m.nodeType||k(h(l),m)};b.xb=function(l,m,r){if(2>arguments.length){if(m=T.body,!m)throw Error("ko.applyBindings: could not find document.body; has the document been loaded?");}else if(!m||1!==m.nodeType&&8!==m.nodeType)throw Error("ko.applyBindings: first parameter should be your view model; second parameter should be a DOM node");t(h(l,r),m)};b.Hb=l=>(l=l&&[1,8].includes(l.nodeType)&&b.Dc(l))?l.$data:void 0;b.m("bindingHandlers",b.b);b.m("applyBindings",b.xb);b.m("applyBindingAccessorsToNode",
-b.Qa);b.m("dataFor",b.Hb)})();(()=>{function a(d,f){return Object.prototype.hasOwnProperty.call(d,f)?d[f]:void 0}function c(d,f){var h=a(k,d);if(h)h.subscribe(f);else{h=k[d]=new b.T;h.subscribe(f);e(d,(p,q)=>{q=!(!q||!q.synchronous);t[d]={definition:p,uc:q};delete k[d];n||q?h.notifySubscribers(p):b.mb.Vb(()=>h.notifySubscribers(p))});var n=!0}}function e(d,f){g("getConfig",[d],h=>{h?g("loadComponent",[d,h],n=>f(n,h)):f(null,null)})}function g(d,f,h,n){n||(n=b.s.loaders.slice(0));var p=n.shift();if(p){var q=
-p[d];if(q){var u=!1;if(void 0!==q.apply(p,f.concat(function(x){u?h(null):null!==x?h(x):g(d,f,h,n)}))&&(u=!0,!p.suppressLoaderExceptions))throw Error("Component loaders must supply values by invoking the callback, not by returning values synchronously.");}else g(d,f,h,n)}else h(null)}var k={},t={};b.s={get:(d,f)=>{var h=a(t,d);h?h.uc?b.i.D(()=>f(h.definition)):b.mb.Vb(()=>f(h.definition)):c(d,f)},fc:d=>delete t[d],rb:g};b.s.loaders=[];b.m("components",b.s)})();(()=>{function a(d,f,h,n){var p={},q=
-2;f=h.template;h=h.viewModel;f?b.s.rb("loadTemplate",[d,f],u=>{p.template=u;0===--q&&n(p)}):0===--q&&n(p);h?b.s.rb("loadViewModel",[d,h],u=>{p[t]=u;0===--q&&n(p)}):0===--q&&n(p)}function c(d,f,h){if("function"===typeof f)h(p=>new f(p));else if("function"===typeof f[t])h(f[t]);else if("instance"in f){var n=f.instance;h(()=>n)}else"viewModel"in f?c(d,f.viewModel,h):d("Unknown viewModel value: "+f)}function e(d){if(d.matches("TEMPLATE")&&d.content instanceof DocumentFragment)return b.a.ya(d.content.childNodes);
-throw"Template Source Element not a ";}function g(d){return f=>{throw Error("Component '"+d+"': "+f);}}var k={};b.s.register=(d,f)=>{if(!f)throw Error("Invalid configuration for "+d);if(b.s.Pb(d))throw Error("Component "+d+" is already registered");k[d]=f};b.s.Pb=d=>Object.prototype.hasOwnProperty.call(k,d);b.s.unregister=d=>{delete k[d];b.s.fc(d)};b.s.ic={getConfig:(d,f)=>{d=b.s.Pb(d)?k[d]:null;f(d)},loadComponent:(d,f,h)=>{var n=g(d);a(d,n,f,h)},loadTemplate:(d,f,h)=>{d=g(d);if(f instanceof
-Array)h(f);else if(f instanceof DocumentFragment)h([...f.childNodes]);else if(f.element)if(f=f.element,f instanceof HTMLElement)h(e(f));else if("string"===typeof f){var n=T.getElementById(f);n?h(e(n)):d("Cannot find element with ID "+f)}else d("Unknown element type: "+f);else d("Unknown template value: "+f)},loadViewModel:(d,f,h)=>c(g(d),f,h)};var t="createViewModel";b.m("components.register",b.s.register);b.s.loaders.push(b.s.ic)})();(()=>{function a(g,k,t){k=k.template;if(!k)throw Error("Component '"+
-g+"' has no template");g=b.a.ya(k);b.h.sa(t,g)}function c(g,k,t){var d=g.createViewModel;return d?d.call(g,k,t):k}var e=0;b.b.component={init:(g,k,t,d,f)=>{var h,n,p,q=()=>{var x=h&&h.dispose;"function"===typeof x&&x.call(h);p&&p.o();n=h=p=null},u=[...b.h.childNodes(g)];b.h.pa(g);b.a.J.ma(g,q);b.l(()=>{var x=b.a.g(k());if("string"===typeof x)var l=x;else{l=b.a.g(x.name);var m=b.a.g(x.params)}if(!l)throw Error("No component name specified");var r=b.c.kb(g,f),v=n=++e;b.s.get(l,y=>{if(n===v){q();if(!y)throw Error("Unknown component '"+
-l+"'");a(l,y,g);var w=c(y,m,{element:g,templateNodes:u});y=r.createChildContext(w,{extend:A=>{A.$component=w;A.$componentTemplateNodes=u}});w&&w.koDescendantsComplete&&(p=b.c.subscribe(g,b.c.Y,w.koDescendantsComplete,w));h=w;b.yb(y,g)}})},{j:g});return{controlsDescendantBindings:!0}}};b.h.ca.component=!0})();b.b.attr={update:(a,c)=>{c=b.a.g(c())||{};b.a.N(c,function(e,g){g=b.a.g(g);var k=e.indexOf(":");k="lookupNamespaceURI"in a&&0{c&&c.split(/\s+/).forEach(g=>a.classList.toggle(g,e))};b.b.css={update:(a,c)=>{c=b.a.g(c());null!==c&&"object"==typeof c?b.a.N(c,(e,g)=>{g=b.a.g(g);X(a,e,!!g)}):(c=b.a.Xb(c),X(a,a.__ko__cssValue,!1),a.__ko__cssValue=c,X(a,c,!0))}};b.b.enable={update:(a,c)=>{(c=b.a.g(c()))&&a.disabled?a.removeAttribute("disabled"):c||a.disabled||(a.disabled=
-!0)}};b.b.disable={update:(a,c)=>b.b.enable.update(a,()=>!b.a.g(c()))};b.b.event={init:(a,c,e,g,k)=>{var t=c()||{};b.a.N(t,d=>{"string"==typeof d&&b.a.H(a,d,function(f){var h=c()[d];if(h){try{g=k.$data;var n=h.apply(g,[g,...arguments])}finally{!0!==n&&f.preventDefault()}!1===e.get(d+"Bubble")&&(f.cancelBubble=!0,f.stopPropagation())}})})}};b.b.foreach={Qb:a=>()=>{var c=a(),e=b.K(c)?c.F():c;if(!e||"number"==typeof e.length)return{foreach:c};b.a.g(c);return{foreach:e.data,as:e.as,noChildContext:e.noChildContext,
-includeDestroyed:e.includeDestroyed,afterAdd:e.afterAdd,beforeRemove:e.beforeRemove,afterRender:e.afterRender,beforeMove:e.beforeMove,afterMove:e.afterMove}},init:(a,c)=>b.b.template.init(a,b.b.foreach.Qb(c)),update:(a,c,e,g,k)=>b.b.template.update(a,b.b.foreach.Qb(c),e,g,k)};b.G.Sa.foreach=!1;b.h.ca.foreach=!0;b.b.hasfocus={init:(a,c,e)=>{var g=t=>{a.__ko_hasfocusUpdating=!0;t=a.ownerDocument.activeElement===a;var d=c();b.G.ob(d,e,"hasfocus",t,!0);a.__ko_hasfocusLastValue=t;a.__ko_hasfocusUpdating=
-!1},k=g.bind(null,!0);g=g.bind(null,!1);b.a.H(a,"focus",k);b.a.H(a,"focusin",k);b.a.H(a,"blur",g);b.a.H(a,"focusout",g);a.__ko_hasfocusLastValue=!1},update:(a,c)=>{c=!!b.a.g(c());a.__ko_hasfocusUpdating||a.__ko_hasfocusLastValue===c||(c?a.focus():a.blur())}};b.G.nb.hasfocus=!0;b.b.html={init:()=>({controlsDescendantBindings:!0}),update:(a,c)=>{b.a.Za(a);c=b.a.g(c());if(null!=c){const e=T.createElement("template");e.innerHTML="string"!=typeof c?c.toString():c;a.appendChild(e.content)}}};(function(){function a(c,
-e,g){b.b[c]={init:(k,t,d,f,h)=>{var n,p,q={},u;if(e){f=d.get("as");var x=d.get("noChildContext");var l=!(f&&x);q={as:f,noChildContext:x,exportDependencies:l}}var m=(u="render"==d.get("completeOn"))||d.has(b.c.Y);b.l(()=>{var r=b.a.g(t()),v=!g!==!r,y=!p;if(l||v!==n){m&&(h=b.c.kb(k,h));if(v){if(!e||l)q.dataDependency=b.i.l();var w=e?h.createChildContext("function"==typeof r?r:t,q):b.i.Ba()?h.extend(null,q):h}y&&b.i.Ba()&&(p=b.a.ya(b.h.childNodes(k),!0));v?(y||b.h.sa(k,b.a.ya(p)),b.yb(w,k)):(b.h.pa(k),
-u||b.c.notify(k,b.c.B));n=v}},{j:k});return{controlsDescendantBindings:!0}}};b.G.Sa[c]=!1;b.h.ca[c]=!0}a("if");a("ifnot",!1,!0);a("with",!0)})();var Y={};b.b.options={init:a=>{if(!a.matches("SELECT"))throw Error("options binding applies only to SELECT elements");for(;0{function g(){return Array.from(a.options).filter(l=>l.selected)}function k(l,m,r){var v=typeof m;return"function"==v?m(l):"string"==v?l[m]:r}function t(l,
-m){u&&n?b.c.notify(a,b.c.B):p.length&&(l=p.includes(b.A.O(m[0])),m[0].selected=l,u&&!l&&b.i.D(b.a.Zb,null,[a,"change"]))}var d=a.multiple,f=0!=a.length&&d?a.scrollTop:null,h=b.a.g(c()),n=e.get("valueAllowUnset")&&e.has("value");c={};var p=[];n||(d?p=g().map(b.A.O):0<=a.selectedIndex&&p.push(b.A.O(a.options[a.selectedIndex])));if(h){"undefined"==typeof h.length&&(h=[h]);var q=h.filter(l=>l||null==l);e.has("optionsCaption")&&(h=b.a.g(e.get("optionsCaption")),null!==h&&void 0!==h&&q.unshift(Y))}var u=
-!1;c.beforeRemove=l=>a.removeChild(l);h=t;e.has("optionsAfterRender")&&"function"==typeof e.get("optionsAfterRender")&&(h=(l,m)=>{t(l,m);b.i.D(e.get("optionsAfterRender"),null,[m[0],l!==Y?l:void 0])});b.a.Wb(a,q,function(l,m,r){r.length&&(p=!n&&r[0].selected?[b.A.O(r[0])]:[],u=!0);m=a.ownerDocument.createElement("option");l===Y?(b.a.jb(m,e.get("optionsCaption")),b.A.Ma(m,void 0)):(r=k(l,e.get("optionsValue"),l),b.A.Ma(m,b.a.g(r)),l=k(l,e.get("optionsText"),r),b.a.jb(m,l));return[m]},c,h);if(!n){var x;
-d?x=p.length&&g().length{c=b.a.g(c()||{});b.a.N(c,(e,g)=>{g=b.a.g(g);if(null===g||void 0===g||!1===g)g="";if(/^--/.test(e))a.style.setProperty(e,g);else{e=e.replace(/-(\w)/g,(t,d)=>d.toUpperCase());var k=a.style[e];a.style[e]=
-g;g===k||a.style[e]!=k||isNaN(g)||(a.style[e]=g+"px")}})}};b.b.submit={init:(a,c,e,g,k)=>{if("function"!=typeof c())throw Error("The value for a submit binding must be a function");b.a.H(a,"submit",t=>{var d=c();try{var f=d.call(k.$data,a)}finally{!0!==f&&(t.preventDefault?t.preventDefault():t.returnValue=!1)}})}};b.b.text={init:()=>({controlsDescendantBindings:!0}),update:(a,c)=>b.a.jb(a,c())};b.h.ca.text=!0;b.b.textInput={init:(a,c,e)=>{var g=a.value,k,t,d=()=>{clearTimeout(k);t=k=void 0;var h=
-a.value;g!==h&&(g=h,b.G.ob(c(),e,"textInput",h))},f=()=>{var h=b.a.g(c());if(null===h||void 0===h)h="";void 0!==t&&h===t?b.a.setTimeout(f,4):a.value!==h&&(a.value=h,g=a.value)};b.a.H(a,"input",d);b.a.H(a,"change",d);b.a.H(a,"blur",d);b.l(f,{j:a})}};b.G.nb.textInput=!0;b.b.textinput={preprocess:(a,c,e)=>e("textInput",a)};b.b.value={init:(a,c,e)=>{var g=a.matches("SELECT"),k=a.matches("INPUT");if(!k||"checkbox"!=a.type&&"radio"!=a.type){var t=[],d=e.get("valueUpdate"),f=null;d&&("string"==typeof d?
-t=[d]:t=d?d.filter((q,u)=>d.indexOf(q)===u):[],b.a.wa(t,"change"));var h=()=>{f=null;var q=c(),u=b.A.O(a);b.G.ob(q,e,"value",u)};t.forEach(q=>{var u=h;b.a.Ec(q,"after")&&(u=()=>{f=b.A.O(a);b.a.setTimeout(h,0)},q=q.substring(5));b.a.H(a,q,u)});var n=k&&"file"==a.type?()=>{var q=b.a.g(c());null===q||void 0===q||""===q?a.value="":b.i.D(h)}:()=>{var q=b.a.g(c()),u=b.A.O(a);if(null!==f&&q===f)b.a.setTimeout(n,0);else if(q!==u||void 0===u)g?(u=e.get("valueAllowUnset"),b.A.Ma(a,q,u),u||q===b.A.O(a)||b.i.D(h)):
-b.A.Ma(a,q)};if(g){var p;b.c.subscribe(a,b.c.B,()=>{p?e.get("valueAllowUnset")?n():h():(b.a.H(a,"change",h),p=b.l(n,{j:a}))},null,{notifyImmediately:!0})}else b.a.H(a,"change",h),b.l(n,{j:a})}else b.Qa(a,{checkedValue:c})},update:()=>{}};b.G.nb.value=!0;b.b.visible={update:(a,c)=>{c=b.a.g(c());var e="none"!=a.style.display;c&&!e?a.style.display="":e&&!c&&(a.style.display="none")}};b.b.hidden={update:(a,c)=>a.hidden=!!b.a.g(c())};(function(a){b.b[a]={init:function(c,e,g,k,t){return b.b.event.init.call(this,
-c,()=>({[a]:e()}),g,k,t)}}})("click");(()=>{let a=b.a.f.X();class c{constructor(g){this.Wa=g}Ia(...g){let k=this.Wa;if(!g.length)return b.a.f.get(k,a)||(11===this.P?k.content:1===this.P?k:void 0);b.a.f.set(k,a,g[0])}}class e extends c{constructor(g){super(g);g&&(this.P=g.matches("TEMPLATE")&&g.content?g.content.nodeType:1)}}b.Ja={Wa:e,Pa:c}})();(()=>{function a(d,f){if(d.length){var h=d[0],n=h.parentNode;g(h,d[d.length-1],p=>{1!==p.nodeType&&8!==p.nodeType||b.xb(f,p)});b.a.Aa(d,n)}}function c(d,f,
-h,n,p){p=p||{};var q=(d&&(d.nodeType?d:0{var n;for(f=b.h.nextSibling(f);d&&(n=d)!==f;)d=b.h.nextSibling(n),h(n,d)};b.Bc=function(d,f,h,n){h=h||{};var p=p||"replaceChildren";if(n){var q=n.nodeType?
-n:0{var u=f&&f instanceof b.R?f:new b.R(f,null,null,null,{exportDependencies:!0}),x=e(d,u.$data,u);c(n,p,x,u,h)},{oa:()=>!q||!b.a.Ya(q),j:q})}console.log("no targetNodeOrNodeArray")};b.Cc=(d,f,h,n,p)=>{function q(y,w){b.i.D(b.a.Wb,null,[n,y,l,h,m,w]);b.c.notify(n,b.c.B)}var u,x=h.as,l=(y,w)=>{u=p.createChildContext(y,{as:x,noChildContext:h.noChildContext,extend:A=>{A.$index=w;x&&(A[x+"Index"]=w)}});y=e(d,y,u);return c(n,"ignoreTargetNode",y,u,h)},m=(y,w)=>{a(w,u);
-h.afterRender&&h.afterRender(w,y);u=null},r=!1===h.includeDestroyed;if(r||h.beforeRemove||!b.Ob(f))return b.l(()=>{var y=b.a.g(f)||[];"undefined"==typeof y.length&&(y=[y]);r&&(y=y.filter(w=>w||null==w));q(y)},{j:n});q(f.F());var v=f.subscribe(y=>{q(f(),y)},null,"arrayChange");v.j(n);return v};var k=b.a.f.X(),t=b.a.f.X();b.b.template={init:(d,f)=>{f=b.a.g(f());if("string"==typeof f||"name"in f)b.h.pa(d);else if("nodes"in f){f=f.nodes||[];if(b.K(f))throw Error('The "nodes" option must be a plain, non-observable array.');
-let h=f[0]&&f[0].parentNode;h&&b.a.f.get(h,t)||(h=b.a.Rb(f),b.a.f.set(h,t,!0));(new b.Ja.Pa(d)).Ia(h)}else if(f=b.h.childNodes(d),0{var q=f();f=b.a.g(q);h=!0;n=null;"string"==typeof f?f={}:(q="name"in f?f.name:d,"if"in f&&(h=b.a.g(f["if"])),h&&"ifnot"in f&&(h=!b.a.g(f.ifnot)),h&&!q&&(h=!1));"foreach"in f?n=b.Cc(q,
-h&&f.foreach||[],f,d,p):h?(h=p,"data"in f&&(h=p.createChildContext(f.data,{as:f.as,noChildContext:f.noChildContext,exportDependencies:!0})),n=b.Bc(q,h,f,d)):b.h.pa(d);p=n;(f=b.a.f.get(d,k))&&"function"==typeof f.o&&f.o();b.a.f.set(d,k,!p||p.ga&&!p.ga()?void 0:p)}};b.G.Sa.template=d=>{d=b.G.yc(d);return 1==d.length&&d[0].unknown||b.G.wc(d,"name")?null:"This template engine does not support anonymous templates nested within its templates"};b.h.ca.template=!0})();b.a.Lb=(a,c,e)=>{if(a.length&&c.length){var g,
-k,t,d,f;for(g=k=0;(!e||g{function a(c,e,g,k,t){var d=Math.min,f=Math.max,h=[],n,p=c.length,q,u=e.length,x=u-p||1,l=p+u+1,m;for(n=0;n<=p;n++){var r=m;h.push(m=[]);var v=d(u,n+x);for(q=f(0,n-1);q<=v;q++)m[q]=q?n?c[n-1]===e[q-1]?r[q-1]:d(r[q]||l,m[q-1]||l)+1:q+1:n+1}d=[];f=[];x=[];n=p;for(q=u;n||q;)u=h[n][q]-1,q&&u===h[n][q-1]?f.push(d[d.length]={status:g,value:e[--q],
-index:q}):n&&u===h[n-1][q]?x.push(d[d.length]={status:k,value:c[--n],index:n}):(--q,--n,t.sparse||d.push({status:"retained",value:e[q]}));b.a.Lb(x,f,!t.dontLimitMoves&&10*p);return d.reverse()}return function(c,e,g){g="boolean"===typeof g?{dontLimitMoves:g}:g||{};c=c||[];e=e||[];return c.length{function a(g,k,t,d,f){var h=[],n=b.l(()=>{var p=k(t,f,b.a.Aa(h,g))||[];if(0!!h.find(b.a.Ya)});return{M:h,Ua:n.ga()?n:void 0}}var c=b.a.f.X(),e=b.a.f.X();b.a.Wb=(g,k,t,d,f,h)=>{function n(H){z={da:H,Da:b.ba(r++)};l.push(z);x||I.push(z)}function p(H){z=u[H];r!==z.Da.F()&&A.push(z);z.Da(r++);b.a.Aa(z.M,g);l.push(z)}function q(H,L){if(H)for(var K=0,N=L.length;KH(ia,K,L[K].da))}
-k=k||[];"undefined"==typeof k.length&&(k=[k]);d=d||{};var u=b.a.f.get(g,c),x=!u,l=[],m=0,r=0,v=[],y=[],w=[],A=[],I=[],G=0;if(x)k.forEach(n);else{if(!h||u&&u._countWaitingForRemove)h=Array.prototype.map.call(u,H=>H.da),h=b.a.Fb(h,k,{dontLimitMoves:d.dontLimitMoves,sparse:!0});for(let H=0,L,K,N;L=h[H];H++)switch(K=L.moved,N=L.index,L.status){case "deleted":for(;m{function F(a,c){return null===a||da[typeof a]?a===c:!1}function E(a,c){var e;return()=>{e||(e=b.a.setTimeout(()=>{e=0;a()},c))}}function J(a,c){var e;return()=>{clearTimeout(e);e=b.a.setTimeout(a,c)}}function S(a,c){null!==c&&c.o&&c.o()}function V(a,c){var e=this.hc,h=e[D];h.$||(this.Ua&&this.ya[c]?(e.wb(c,a,this.ya[c]),this.ya[c]=null,--this.Ua):h.u[c]||e.wb(c,a,h.v?{V:a}:e.Yb(a)),a.ja&&a.bc())}var T=C.document,W={},b="undefined"!==typeof W?W:{};b.m=(a,c)=>{a=a.split(".");for(var e=b,h=0;h<
+a.length-1;h++)e=e[a[h]];e[a[a.length-1]]=c};b.Z=(a,c,e)=>{a[c]=e};b.version="3.5.1-sm";b.m("version",b.version);b.a={va:(a,c)=>{c=a.indexOf(c);0{c&&Object.entries(c).forEach(e=>a[e[0]]=e[1]);return a},N:(a,c)=>a&&Object.entries(a).forEach(e=>c(e[0],e[1])),eb:(a,c,e)=>{if(!a)return a;var h={};Object.entries(a).forEach(k=>h[k[0]]=c.call(e,k[1],k[0],a));return h},Ya:a=>{for(;a.firstChild;)b.removeNode(a.firstChild)},Rb:a=>{var c=[...a],e=(c[0]&&c[0].ownerDocument||
+T).createElement("div");a.forEach(h=>e.append(b.ea(h)));return e},xa:(a,c)=>Array.prototype.map.call(a,c?e=>b.ea(e.cloneNode(!0)):e=>e.cloneNode(!0)),sa:(a,c)=>{b.a.Ya(a);c&&a.append(...c)},za:(a,c)=>{if(a.length){for(c=8===c.nodeType&&c.parentNode||c;a.length&&a[0].parentNode!==c;)a.splice(0,1);for(;1null==a?"":a.trim?a.trim():a.toString().replace(/^[\s\xa0]+|[\s\xa0]+$/g,
+""),Ec:(a,c)=>{a=a||"";return c.length>a.length?!1:a.substring(0,c.length)===c},kc:(a,c)=>c.contains(1!==a.nodeType?a.parentNode:a),Xa:a=>b.a.kc(a,a.ownerDocument.documentElement),Eb:a=>b.onError?function(){try{return a.apply(this,arguments)}catch(c){throw b.onError&&b.onError(c),c;}}:a,setTimeout:(a,c)=>setTimeout(b.a.Eb(a),c),Ib:a=>setTimeout(()=>{b.onError&&b.onError(a);throw a;},0),H:(a,c,e)=>{a.addEventListener(c,b.a.Eb(e),!1)},Zb:(a,c)=>{if(!a||!a.nodeType)throw Error("element must be a DOM node when calling triggerEvent");
+a.dispatchEvent(new Event(c))},g:a=>b.K(a)?a():a,ib:(a,c)=>a.textContent=b.a.g(c)||""};b.m("utils",b.a);b.m("unwrap",b.a.g);b.a.f=new function(){let a=0,c="__ko__"+Date.now(),e=new WeakMap;return{get:(h,k)=>(e.get(h)||{})[k],set:(h,k,t)=>{if(e.has(h))e.get(h)[k]=t;else{let d={};d[k]=t;e.set(h,d)}return t},$a:function(h,k,t){return this.get(h,k)||this.set(h,k,t)},clear:h=>e.delete(h),X:()=>a++ +c}};b.a.J=new function(){function a(d,f){var g=b.a.f.get(d,h);void 0===g&&f&&(g=[],b.a.f.set(d,h,g));return g}
+function c(d){var f=a(d,!1);if(f){f=f.slice(0);for(var g=0;g{if("function"!=typeof f)throw Error("Callback must be a function");a(d,!0).push(f)},hb:(d,f)=>{var g=a(d,!1);g&&(b.a.va(g,f),0==g.length&&b.a.f.set(d,h,void 0))},ea:d=>
+{b.i.D(()=>{k[d.nodeType]&&(c(d),t[d.nodeType]&&e(d.getElementsByTagName("*")))});return d},removeNode:d=>{b.ea(d);d.parentNode&&d.parentNode.removeChild(d)}}};b.ea=b.a.J.ea;b.removeNode=b.a.J.removeNode;b.m("utils.domNodeDisposal",b.a.J);b.m("utils.domNodeDisposal.addDisposeCallback",b.a.J.ma);b.lb=(()=>{function a(){if(e)for(var d=e,f=0,g;kd){if(5E3<=++f){k=e;b.a.Ib(Error("'Too much recursion' after processing "+f+" task groups."));break}d=e}try{g()}catch(n){b.a.Ib(n)}}k=e=
+c.length=0}var c=[],e=0,h=1,k=0,t=(d=>{var f=T.createElement("div");(new MutationObserver(d)).observe(f,{attributes:!0});return()=>f.classList.toggle("foo")})(a);return{Vb:d=>{e||t(a);c[e++]=d;return h++},cancel:d=>{d-=h-e;d>=k&&da.Ga(e=>J(e,c)),rateLimit:(a,c)=>{if("number"==typeof c)var e=c;else{e=c.timeout;var h=c.method}var k="function"==typeof h?h:E;a.Ga(t=>k(t,e,c))},notify:(a,c)=>{a.equalityComparer="always"==c?null:F}};var da={undefined:1,
+"boolean":1,number:1,string:1};b.m("extenders",b.Za);class ea{constructor(a,c,e){this.V=a;this.pb=c;this.Cb=e;this.Ma=!1;this.P=this.Qa=null;b.Z(this,"dispose",this.o);b.Z(this,"disposeWhenNodeIsRemoved",this.j)}o(){this.Ma||(this.P&&b.a.J.hb(this.Qa,this.P),this.Ma=!0,this.Cb(),this.V=this.pb=this.Cb=this.Qa=this.P=null)}j(a){this.Qa=a;b.a.J.ma(a,this.P=this.o.bind(this))}}b.T=function(){Object.setPrototypeOf(this,P);P.Da(this)};var P={Da:a=>{a.U={change:[]};a.vb=1},subscribe:function(a,c,e){var h=
+this;e=e||"change";var k=new ea(h,c?a.bind(c):a,()=>{b.a.va(h.U[e],k);h.ua&&h.ua(e)});h.na&&h.na(e);h.U[e]||(h.U[e]=[]);h.U[e].push(k);return k},notifySubscribers:function(a,c){c=c||"change";"change"===c&&this.Ja();if(this.qa(c)){c="change"===c&&this.$b||this.U[c].slice(0);try{b.i.zb();for(var e=0,h;h=c[e++];)h.Ma||h.pb(a)}finally{b.i.end()}}},Ba:function(){return this.vb},qc:function(a){return this.Ba()!==a},Ja:function(){++this.vb},Ga:function(a){var c=this,e=b.K(c),h,k,t,d,f;c.ta||(c.ta=c.notifySubscribers,
+c.notifySubscribers=function(n,p){p&&"change"!==p?"beforeChange"===p?this.sb(n):this.ta(n,p):this.tb(n)});var g=a(()=>{c.ja=!1;e&&d===c&&(d=c.qb?c.qb():c());var n=k||f&&c.Fa(t,d);f=k=h=!1;n&&c.ta(t=d)});c.tb=(n,p)=>{p&&c.ja||(f=!p);c.$b=c.U.change.slice(0);c.ja=h=!0;d=n;g()};c.sb=n=>{h||(t=n,c.ta(n,"beforeChange"))};c.ub=()=>{f=!0};c.bc=()=>{c.Fa(t,c.G(!0))&&(k=!0)}},qa:function(a){return this.U[a]&&this.U[a].length},Fa:function(a,c){return!this.equalityComparer||!this.equalityComparer(a,c)},toString:()=>
+"[object Object]",extend:function(a){var c=this;a&&b.a.N(a,(e,h)=>{e=b.Za[e];"function"==typeof e&&(c=e(c,h)||c)});return c}};b.Z(P,"init",P.Da);b.Z(P,"subscribe",P.subscribe);b.Z(P,"extend",P.extend);Object.setPrototypeOf(P,Function.prototype);b.T.fn=P;b.tc=a=>null!=a&&"function"==typeof a.subscribe&&"function"==typeof a.notifySubscribers;b.i=(()=>{var a=[],c,e=0;return{zb:h=>{a.push(c);c=h},end:()=>c=a.pop(),Ub:h=>{if(c){if(!b.tc(h))throw Error("Only subscribable things can act as dependencies");
+c.dc.call(c.ec,h,h.ac||(h.ac=++e))}},D:(h,k,t)=>{try{return a.push(c),c=void 0,h.apply(k,t||[])}finally{c=a.pop()}},Aa:()=>c&&c.l.Aa(),bb:()=>c&&c.bb,l:()=>c&&c.l}})();const O=Symbol("_latestValue");b.ba=a=>{function c(){if(0null==c[O]?void 0:c[O].length});b.T.fn.Da(c);Object.setPrototypeOf(c,Q);return c};var Q={toJSON:function(){let a=this[O];
+return a&&a.toJSON?a.toJSON():a},equalityComparer:F,G:function(){return this[O]},Ka:function(){this.notifySubscribers(this[O],"spectate");this.notifySubscribers(this[O])},nb:function(){this.notifySubscribers(this[O],"beforeChange")}};Object.setPrototypeOf(Q,b.T.fn);var R=b.ba.P="__ko_proto__";Q[R]=b.ba;b.K=a=>{if((a="function"==typeof a&&a[R])&&a!==Q[R]&&a!==b.l.fn[R])throw Error("Invalid object that looks like an observable; possibly from another Knockout instance");return!!a};b.vc=a=>"function"==
+typeof a&&(a[R]===Q[R]||a[R]===b.l.fn[R]&&a.rc);b.m("observable",b.ba);b.m("isObservable",b.K);b.m("observable.fn",Q);b.Z(Q,"valueHasMutated",Q.Ka);b.ha=a=>{a=a||[];if("object"!=typeof a||!("length"in a))throw Error("The argument passed when initializing an observable array must be an array, or null, or undefined.");a=b.ba(a);Object.setPrototypeOf(a,b.ha.fn);return a.extend({trackArrayChanges:!0})};b.ha.fn={remove:function(a){for(var c=this.G(),e=[],h="function"!=typeof a||b.K(a)?function(d){return d===
+a}:a,k=c.length;k--;){var t=c[k];if(h(t)){0===e.length&&this.nb();if(c[k]!==t)throw Error("Array modified during remove; cannot remove item");e.push(t);c.splice(k,1)}}e.length&&this.Ka();return e}};Object.setPrototypeOf(b.ha.fn,b.ba.fn);Object.getOwnPropertyNames(Array.prototype).forEach(a=>{"function"===typeof Array.prototype[a]&&"constructor"!=a&&("copyWithin fill pop push reverse shift sort splice unshift".split(" ").includes(a)?b.ha.fn[a]=function(...c){var e=this.G();this.nb();this.Db(e,a,c);
+c=e[a](...c);this.Ka();return c===e?this:c}:b.ha.fn[a]=function(...c){return this()[a](...c)})});b.Ob=a=>b.K(a)&&"function"==typeof a.remove&&"function"==typeof a.push;b.m("observableArray",b.ha);b.m("isObservableArray",b.Ob);b.Za.trackArrayChanges=(a,c)=>{function e(){function q(){if(f){var u=[].concat(a.G()||[]);if(a.qa("arrayChange")){if(!k||1++f,null,"spectate"),g=[].concat(a.G()||
+[]),k=null,t=a.subscribe(q))}a.Sa={};c&&"object"==typeof c&&b.a.extend(a.Sa,c);a.Sa.sparse=!0;if(!a.Db){var h=!1,k=null,t,d,f=0,g,n=a.na,p=a.ua;a.na=q=>{n&&n.call(a,q);"arrayChange"===q&&e()};a.ua=q=>{p&&p.call(a,q);"arrayChange"!==q||a.qa("arrayChange")||(t&&t.o(),d&&d.o(),d=t=null,h=!1,g=void 0)};a.Db=(q,u,x)=>{function l(G,z,M){return m[m.length]={status:G,value:z,index:M}}if(h&&!f){var m=[],r=q.length,v=x.length,y=0;switch(u){case "push":y=r;case "unshift":for(u=0;ux[0]?r+x[0]:x[0]),r);r=1===v?r:Math.min(u+(x[1]||0),r);v=u+v-2;y=Math.max(r,v);for(var w=[],A=[],I=2;ua[e.ka]=e.V);return a},ab:function(a){if(!this[D].I)return!1;var c=this.oc();return c.includes(a)?!0:!!c.find(e=>e.ab&&e.ab(a))},wb:function(a,c,e){if(this[D].gb&&c===this)throw Error("A 'pure' computed must not be called recursively");this[D].u[a]=e;
+e.ka=this[D].I++;e.la=c.Ba()},ra:function(){var a,c=this[D].u;for(a in c)if(Object.prototype.hasOwnProperty.call(c,a)){var e=c[a];if(this.ia&&e.V.ja||e.V.qc(e.la))return!0}},Hc:function(){this.ia&&!this[D].Ea&&this.ia(!1)},ga:function(){var a=this[D];return a.W||0a.S(!0),c)):
+a.ia?a.ia(!0):a.S(!0)},S:function(a){var c=this[D],e=c.oa,h=!1;if(!c.Ea&&!c.$){if(c.j&&!b.a.Xa(c.j)||e&&e()){if(!c.kb){this.o();return}}else c.kb=!1;c.Ea=!0;try{h=this.mc(a)}finally{c.Ea=!1}return h}},mc:function(a){var c=this[D],e=c.gb?void 0:!c.I;var h={hc:this,ya:c.u,Ua:c.I};b.i.zb({ec:h,dc:V,l:this,bb:e});c.u={};c.I=0;var k=this.lc(c,h);c.I?h=this.Fa(c.L,k):(this.o(),h=!0);h&&(c.v?this.Ja():this.notifySubscribers(c.L,"beforeChange"),c.L=k,this.notifySubscribers(c.L,"spectate"),!c.v&&a&&this.notifySubscribers(c.L),
+this.ub&&this.ub());e&&this.notifySubscribers(c.L,"awake");return h},lc:(a,c)=>{try{return a.Tb()}finally{b.i.end(),c.Ua&&!a.v&&b.a.N(c.ya,S),a.aa=a.W=!1}},G:function(a){var c=this[D];(c.W&&(a||!c.I)||c.v&&this.ra())&&this.S();return c.L},Ga:function(a){b.T.fn.Ga.call(this,a);this.qb=function(){this[D].v||(this[D].aa?this.S():this[D].W=!1);return this[D].L};this.ia=function(c){this.sb(this[D].L);this[D].W=!0;c&&(this[D].aa=!0);this.tb(this,!c)}},o:function(){var a=this[D];!a.v&&a.u&&b.a.N(a.u,(c,
+e)=>e.o&&e.o());a.j&&a.Wa&&b.a.J.hb(a.j,a.Wa);a.u=void 0;a.I=0;a.$=!0;a.aa=!1;a.W=!1;a.v=!1;a.j=void 0;a.oa=void 0;a.Tb=void 0}},fa={na:function(a){var c=this,e=c[D];if(!e.$&&e.v&&"change"==a){e.v=!1;if(e.aa||c.ra())e.u=null,e.I=0,c.S()&&c.Ja();else{var h=[];b.a.N(e.u,(k,t)=>h[t.ka]=k);h.forEach((k,t)=>{var d=e.u[k],f=c.Yb(d.V);f.ka=t;f.la=d.la;e.u[k]=f});c.ra()&&c.S()&&c.Ja()}e.$||c.notifySubscribers(e.L,"awake")}},ua:function(a){var c=this[D];c.$||"change"!=a||this.qa("change")||(b.a.N(c.u,(e,h)=>
+{h.o&&(c.u[e]={V:h.V,ka:h.ka,la:h.la},h.o())}),c.v=!0,this.notifySubscribers(void 0,"asleep"))},Ba:function(){var a=this[D];a.v&&(a.aa||this.ra())&&this.S();return b.T.fn.Ba.call(this)}},ha={na:function(a){"change"!=a&&"beforeChange"!=a||this.G()}};Object.setPrototypeOf(U,b.T.fn);U[b.ba.P]=b.l;b.m("computed",b.l);b.m("computed.fn",U);b.Z(U,"dispose",U.o);b.Ac=a=>{if("function"===typeof a)return b.l(a,{pure:!0});a=b.a.extend({},a);a.pure=!0;return b.l(a)};(()=>{b.A={O:a=>{switch(a.nodeName){case "OPTION":return!0===
+a.__ko__hasDomDataOptionValue__?b.a.f.get(a,b.b.options.fb):a.value;case "SELECT":return 0<=a.selectedIndex?b.A.O(a.options[a.selectedIndex]):void 0;default:return a.value}},La:(a,c,e)=>{switch(a.nodeName){case "OPTION":"string"===typeof c?(b.a.f.set(a,b.b.options.fb,void 0),delete a.__ko__hasDomDataOptionValue__,a.value=c):(b.a.f.set(a,b.b.options.fb,c),a.__ko__hasDomDataOptionValue__=!0,a.value="number"===typeof c?c:"");break;case "SELECT":for(var h=-1,k=""===c||null==c,t=0,d=a.options.length,f;t<
+d;++t)if(f=b.A.O(a.options[t]),f==c||""===f&&k){h=t;break}if(e||0<=h||k&&1{function a(f){f=b.a.Xb(f);123===f.charCodeAt(0)&&(f=f.slice(1,-1));f+="\n,";var g=[],n=f.match(h),p=[],q=0;if(1=q){g.push(m&&p.length?{key:m,value:p.join("")}:{unknown:m||p.join("")});var m=q=0;p=[];continue}}else if(58===l){if(!q&&!m&&1===p.length){m=p.pop();continue}}else if(47===
+l&&1n(l.key||l.unknown,l.value));q.length&&n("_ko_property_writers","{"+q.join(",")+" }");return p.join(",")},wc:(f,g)=>-1n.key==g),ob:(f,g,n,p,q)=>{if(f&&b.K(f))!b.vc(f)||q&&f.G()===p||f(p);else if((f=g.get("_ko_property_writers"))&&f[n])f[n](p)}}})();(()=>{function a(d){return 8==d.nodeType&&h.test(d.nodeValue)}function c(d){return 8==d.nodeType&&k.test(d.nodeValue)}function e(d,f){for(var g=d,n=1,p=[];g=g.nextSibling;){if(c(g)&&(b.a.f.set(g,t,!0),n--,0===
+n))return p;p.push(g);a(g)&&n++}if(!f)throw Error("Cannot find closing comment tag to match: "+d.nodeValue);return null}var h=/^\s*ko(?:\s+([\s\S]+))?\s*$/,k=/^\s*\/ko\s*$/,t="__ko_matchedEndComment__";b.h={ca:{},childNodes:d=>a(d)?e(d):d.childNodes,pa:d=>{if(a(d)){d=e(d);for(var f=0,g=d.length;f{if(a(d)){b.h.pa(d);d=d.nextSibling;for(var g=0,n=f.length;g{if(a(d)){var g=d.nextSibling;
+d=d.parentNode}else g=d.firstChild;d.insertBefore(f,g)},Nb:(d,f,g)=>{g?(g=g.nextSibling,a(d)&&(d=d.parentNode),d.insertBefore(f,g)):b.h.prepend(d,f)},firstChild:d=>{if(a(d))return!d.nextSibling||c(d.nextSibling)?null:d.nextSibling;if(d.firstChild&&c(d.firstChild))throw Error("Found invalid end comment, as the first child of "+d);return d.firstChild},nextSibling:d=>{if(a(d)){var f=e(d,void 0);d=f?0(d=d.nodeValue.match(h))?d[1]:null}})();(()=>{const a={};b.Bb=new class{xc(c){switch(c.nodeType){case 1:return null!=c.getAttribute("data-bind");case 8:return b.h.pc(c);default:return!1}}nc(c,e){a:{switch(c.nodeType){case 1:var h=c.getAttribute("data-bind");break a;case 8:h=b.h.Fc(c);break a}h=null}if(h){var k={valueAccessors:!0};try{var t=h+(k&&
+k.valueAccessors||""),d;if(!(d=a[t])){var f="with($context){with($data||{}){return{"+b.F.zc(h,k)+"}}}";var g=new Function("$context","$element",f);d=a[t]=g}var n=d(e,c)}catch(p){throw p.message="Unable to parse bindings.\nBindings value: "+h+"\nMessage: "+p.message,p;}}else n=null;return n}}})();(()=>{function a(l){var m=(l=b.a.f.get(l,x))&&l.C;m&&(l.C=null,m.Sb())}function c(l,m,r){this.node=l;this.Ab=m;this.wa=[];this.B=!1;m.C||b.a.J.ma(l,a);r&&r.C&&(r.C.wa.push(l),this.Na=r)}function e(l){return b.a.eb(b.i.D(l),
+(m,r)=>()=>l()[r])}function h(l,m,r){return"function"===typeof l?e(l.bind(null,m,r)):b.a.eb(l,v=>()=>v)}function k(l,m){var r=b.h.firstChild(m);if(r)for(var v;v=r;)r=b.h.nextSibling(v),t(l,v);b.c.notify(m,b.c.B)}function t(l,m){var r=l;if(1===m.nodeType||b.Bb.xc(m))r=f(m,null,l).bindingContextForDescendants;r&&m.matches&&!m.matches("SCRIPT,TEXTAREA,TEMPLATE")&&k(r,m)}function d(l){var m=[],r={},v=[];b.a.N(l,function A(w){if(!r[w]){var I=b.getBindingHandler(w);I&&(I.after&&(v.push(w),I.after.forEach(G=>
+{if(l[G]){if(v.includes(G))throw Error("Cannot combine the following bindings, because they have a cyclic dependency: "+v.join(", "));A(G)}}),v.length--),m.push({key:w,Mb:I}));r[w]=!0}});return m}function f(l,m,r){var v=b.a.f.$a(l,x,{}),y=v.cc;if(!m){if(y)throw Error("You cannot apply bindings multiple times to the same element.");v.cc=!0}y||(v.context=r);v.cb||(v.cb={});if(m&&"function"!==typeof m)var w=m;else{var A=b.l(()=>{if(w=m?m(r,l):b.Bb.nc(l,r)){if(r[n])r[n]();if(r[q])r[q]()}return w},{j:l});
+w&&A.ga()||(A=null)}var I=r,G;if(w){var z=A?B=>()=>A()[B]():B=>w[B];function M(){return b.a.eb(A?A():w,B=>B())}M.get=B=>w[B]&&z(B)();M.has=B=>B in w;b.c.B in w&&b.c.subscribe(l,b.c.B,()=>{var B=w[b.c.B]();if(B){var H=b.h.childNodes(l);H.length&&B(H,b.Hb(H[0]))}});b.c.Y in w&&(I=b.c.jb(l,r),b.c.subscribe(l,b.c.Y,()=>{var B=w[b.c.Y]();B&&b.h.firstChild(l)&&B(l)}));d(w).forEach(B=>{var H=B.Mb.init,L=B.Mb.update,K=B.key;if(8===l.nodeType&&!b.h.ca[K])throw Error("The binding '"+K+"' cannot be used with virtual elements");
+try{"function"==typeof H&&b.i.D(()=>{var N=H(l,z(K),M,I.$data,I);if(N&&N.controlsDescendantBindings){if(void 0!==G)throw Error("Multiple bindings ("+G+" and "+K+") are trying to control descendant bindings of the same element. You cannot use these bindings together on the same element.");G=K}}),"function"==typeof L&&b.l(()=>L(l,z(K),M,I.$data,I),{j:l})}catch(N){throw N.message='Unable to process binding "'+K+": "+w[K]+'"\nMessage: '+N.message,N;}})}v=void 0===G;return{shouldBindDescendants:v,bindingContextForDescendants:v&&
+I}}function g(l,m){return l&&l instanceof b.R?l:new b.R(l,void 0,void 0,m)}var n=Symbol("_subscribable"),p=Symbol("_ancestorBindingInfo"),q=Symbol("_dataDependency");b.b={};b.getBindingHandler=l=>b.b[l];var u={};b.R=function(l,m,r,v,y){function w(){var H=z?G():G,L=b.a.g(H);m?(b.a.extend(A,m),p in m&&(A[p]=m[p])):(A.$parents=[],A.$root=L,A.ko=b);A[n]=B;I?L=A.$data:(A.$rawData=H,A.$data=L);r&&(A[r]=L);v&&v(A,m,L);if(m&&m[n]&&!b.i.l().ab(m[n]))m[n]();M&&(A[q]=M);return A.$data}var A=this,I=l===u,G=I?
+void 0:l,z="function"==typeof G&&!b.K(G),M=y&&y.dataDependency;if(y&&y.exportDependencies)w();else{var B=b.Ac(w);B.G();B.ga()?B.equalityComparer=null:A[n]=void 0}};b.R.prototype.createChildContext=function(l,m,r,v){!v&&m&&"object"==typeof m&&(v=m,m=v.as,r=v.extend);if(m&&v&&v.noChildContext){var y="function"==typeof l&&!b.K(l);return new b.R(u,this,null,w=>{r&&r(w);w[m]=y?l():l},v)}return new b.R(l,this,m,(w,A)=>{w.$parentContext=A;w.$parent=A.$data;w.$parents=(A.$parents||[]).slice(0);w.$parents.unshift(w.$parent);
+r&&r(w)},v)};b.R.prototype.extend=function(l,m){return new b.R(u,this,null,r=>b.a.extend(r,"function"==typeof l?l(r):l),m)};var x=b.a.f.X();c.prototype.Sb=function(){this.Na&&this.Na.C&&this.Na.C.jc(this.node)};c.prototype.jc=function(l){b.a.va(this.wa,l);!this.wa.length&&this.B&&this.Gb()};c.prototype.Gb=function(){this.B=!0;this.Ab.C&&!this.wa.length&&(this.Ab.C=null,b.a.J.hb(this.node,a),b.c.notify(this.node,b.c.Y),this.Sb())};b.c={B:"childrenComplete",Y:"descendantsComplete",subscribe:(l,m,r,
+v,y)=>{var w=b.a.f.$a(l,x,{});w.fa||(w.fa=new b.T);y&&y.notifyImmediately&&w.cb[m]&&b.i.D(r,v,[l]);return w.fa.subscribe(r,v,m)},notify:(l,m)=>{var r=b.a.f.get(l,x);if(r&&(r.cb[m]=!0,r.fa&&r.fa.notifySubscribers(l,m),m==b.c.B))if(r.C)r.C.Gb();else if(void 0===r.C&&r.fa&&r.fa.qa(b.c.Y))throw Error("descendantsComplete event not supported for bindings on this node");},jb:(l,m)=>{var r=b.a.f.$a(l,x,{});r.C||(r.C=new c(l,r,m[p]));return m[p]==r?m:m.extend(v=>{v[p]=r})}};b.Dc=l=>(l=b.a.f.get(l,x))&&l.context;
+b.Pa=(l,m,r)=>f(l,m,g(r));b.Gc=(l,m,r)=>{r=g(r);return b.Pa(l,h(m,r,l),r)};b.yb=(l,m)=>{1!==m.nodeType&&8!==m.nodeType||k(g(l),m)};b.xb=function(l,m,r){if(2>arguments.length){if(m=T.body,!m)throw Error("ko.applyBindings: could not find document.body; has the document been loaded?");}else if(!m||1!==m.nodeType&&8!==m.nodeType)throw Error("ko.applyBindings: first parameter should be your view model; second parameter should be a DOM node");t(g(l,r),m)};b.Hb=l=>(l=l&&[1,8].includes(l.nodeType)&&b.Dc(l))?
+l.$data:void 0;b.m("bindingHandlers",b.b);b.m("applyBindings",b.xb);b.m("applyBindingAccessorsToNode",b.Pa);b.m("dataFor",b.Hb)})();(()=>{function a(d,f){return Object.prototype.hasOwnProperty.call(d,f)?d[f]:void 0}function c(d,f){var g=a(k,d);if(g)g.subscribe(f);else{g=k[d]=new b.T;g.subscribe(f);e(d,(p,q)=>{q=!(!q||!q.synchronous);t[d]={definition:p,uc:q};delete k[d];n||q?g.notifySubscribers(p):b.lb.Vb(()=>g.notifySubscribers(p))});var n=!0}}function e(d,f){h("getConfig",[d],g=>{g?h("loadComponent",
+[d,g],n=>f(n,g)):f(null,null)})}function h(d,f,g,n){n||(n=b.s.loaders.slice(0));var p=n.shift();if(p){var q=p[d];if(q){var u=!1;if(void 0!==q.apply(p,f.concat(function(x){u?g(null):null!==x?g(x):h(d,f,g,n)}))&&(u=!0,!p.suppressLoaderExceptions))throw Error("Component loaders must supply values by invoking the callback, not by returning values synchronously.");}else h(d,f,g,n)}else g(null)}var k={},t={};b.s={get:(d,f)=>{var g=a(t,d);g?g.uc?b.i.D(()=>f(g.definition)):b.lb.Vb(()=>f(g.definition)):c(d,
+f)},fc:d=>delete t[d],rb:h};b.s.loaders=[];b.m("components",b.s)})();(()=>{function a(d,f,g,n){var p={},q=2;f=g.template;g=g.viewModel;f?b.s.rb("loadTemplate",[d,f],u=>{p.template=u;0===--q&&n(p)}):0===--q&&n(p);g?b.s.rb("loadViewModel",[d,g],u=>{p[t]=u;0===--q&&n(p)}):0===--q&&n(p)}function c(d,f,g){if("function"===typeof f)g(p=>new f(p));else if("function"===typeof f[t])g(f[t]);else if("instance"in f){var n=f.instance;g(()=>n)}else"viewModel"in f?c(d,f.viewModel,g):d("Unknown viewModel value: "+
+f)}function e(d){if(d.matches("TEMPLATE")&&d.content instanceof DocumentFragment)return b.a.xa(d.content.childNodes);throw"Template Source Element not a ";}function h(d){return f=>{throw Error("Component '"+d+"': "+f);}}var k={};b.s.register=(d,f)=>{if(!f)throw Error("Invalid configuration for "+d);if(b.s.Pb(d))throw Error("Component "+d+" is already registered");k[d]=f};b.s.Pb=d=>Object.prototype.hasOwnProperty.call(k,d);b.s.unregister=d=>{delete k[d];b.s.fc(d)};b.s.ic={getConfig:(d,f)=>
+{d=b.s.Pb(d)?k[d]:null;f(d)},loadComponent:(d,f,g)=>{var n=h(d);a(d,n,f,g)},loadTemplate:(d,f,g)=>{d=h(d);if(f instanceof Array)g(f);else if(f instanceof DocumentFragment)g([...f.childNodes]);else if(f.element)if(f=f.element,f instanceof HTMLElement)g(e(f));else if("string"===typeof f){var n=T.getElementById(f);n?g(e(n)):d("Cannot find element with ID "+f)}else d("Unknown element type: "+f);else d("Unknown template value: "+f)},loadViewModel:(d,f,g)=>c(h(d),f,g)};var t="createViewModel";b.m("components.register",
+b.s.register);b.s.loaders.push(b.s.ic)})();(()=>{function a(h,k,t){k=k.template;if(!k)throw Error("Component '"+h+"' has no template");h=b.a.xa(k);b.h.sa(t,h)}function c(h,k,t){var d=h.createViewModel;return d?d.call(h,k,t):k}var e=0;b.b.component={init:(h,k,t,d,f)=>{var g,n,p,q=()=>{var x=g&&g.dispose;"function"===typeof x&&x.call(g);p&&p.o();n=g=p=null},u=[...b.h.childNodes(h)];b.h.pa(h);b.a.J.ma(h,q);b.l(()=>{var x=b.a.g(k());if("string"===typeof x)var l=x;else{l=b.a.g(x.name);var m=b.a.g(x.params)}if(!l)throw Error("No component name specified");
+var r=b.c.jb(h,f),v=n=++e;b.s.get(l,y=>{if(n===v){q();if(!y)throw Error("Unknown component '"+l+"'");a(l,y,h);var w=c(y,m,{element:h,templateNodes:u});y=r.createChildContext(w,{extend:A=>{A.$component=w;A.$componentTemplateNodes=u}});w&&w.koDescendantsComplete&&(p=b.c.subscribe(h,b.c.Y,w.koDescendantsComplete,w));g=w;b.yb(y,h)}})},{j:h});return{controlsDescendantBindings:!0}}};b.h.ca.component=!0})();b.b.attr={update:(a,c)=>{c=b.a.g(c())||{};b.a.N(c,function(e,h){h=b.a.g(h);var k=e.indexOf(":");k=
+"lookupNamespaceURI"in a&&0{c&&c.split(/\s+/).forEach(h=>a.classList.toggle(h,e))};b.b.css={update:(a,c)=>{c=b.a.g(c());null!==c&&"object"==typeof c?b.a.N(c,(e,h)=>{h=b.a.g(h);X(a,e,!!h)}):(c=b.a.Xb(c),X(a,a.__ko__cssValue,!1),a.__ko__cssValue=c,X(a,c,!0))}};b.b.enable=
+{update:(a,c)=>{(c=b.a.g(c()))&&a.disabled?a.removeAttribute("disabled"):c||a.disabled||(a.disabled=!0)}};b.b.disable={update:(a,c)=>b.b.enable.update(a,()=>!b.a.g(c()))};b.b.event={init:(a,c,e,h,k)=>{var t=c()||{};b.a.N(t,d=>{"string"==typeof d&&b.a.H(a,d,function(f){var g=c()[d];if(g){try{h=k.$data;var n=g.apply(h,[h,...arguments])}finally{!0!==n&&f.preventDefault()}!1===e.get(d+"Bubble")&&(f.cancelBubble=!0,f.stopPropagation())}})})}};b.b.foreach={Qb:a=>()=>{var c=a(),e=b.K(c)?c.G():c;if(!e||"number"==
+typeof e.length)return{foreach:c};b.a.g(c);return{foreach:e.data,as:e.as,noChildContext:e.noChildContext,includeDestroyed:e.includeDestroyed,afterAdd:e.afterAdd,beforeRemove:e.beforeRemove,afterRender:e.afterRender,beforeMove:e.beforeMove,afterMove:e.afterMove}},init:(a,c)=>b.b.template.init(a,b.b.foreach.Qb(c)),update:(a,c,e,h,k)=>b.b.template.update(a,b.b.foreach.Qb(c),e,h,k)};b.F.Ra.foreach=!1;b.h.ca.foreach=!0;b.b.hasfocus={init:(a,c,e)=>{var h=t=>{a.__ko_hasfocusUpdating=!0;t=a.ownerDocument.activeElement===
+a;var d=c();b.F.ob(d,e,"hasfocus",t,!0);a.__ko_hasfocusLastValue=t;a.__ko_hasfocusUpdating=!1},k=h.bind(null,!0);h=h.bind(null,!1);b.a.H(a,"focus",k);b.a.H(a,"focusin",k);b.a.H(a,"blur",h);b.a.H(a,"focusout",h);a.__ko_hasfocusLastValue=!1},update:(a,c)=>{c=!!b.a.g(c());a.__ko_hasfocusUpdating||a.__ko_hasfocusLastValue===c||(c?a.focus():a.blur())}};b.F.mb.hasfocus=!0;b.b.html={init:()=>({controlsDescendantBindings:!0}),update:(a,c)=>{b.a.Ya(a);c=b.a.g(c());if(null!=c){const e=T.createElement("template");
+e.innerHTML="string"!=typeof c?c.toString():c;a.appendChild(e.content)}}};(function(){function a(c,e,h){b.b[c]={init:(k,t,d,f,g)=>{var n,p,q={},u;if(e){f=d.get("as");var x=d.get("noChildContext");var l=!(f&&x);q={as:f,noChildContext:x,exportDependencies:l}}var m=(u="render"==d.get("completeOn"))||d.has(b.c.Y);b.l(()=>{var r=b.a.g(t()),v=!h!==!r,y=!p;if(l||v!==n){m&&(g=b.c.jb(k,g));if(v){if(!e||l)q.dataDependency=b.i.l();var w=e?g.createChildContext("function"==typeof r?r:t,q):b.i.Aa()?g.extend(null,
+q):g}y&&b.i.Aa()&&(p=b.a.xa(b.h.childNodes(k),!0));v?(y||b.h.sa(k,b.a.xa(p)),b.yb(w,k)):(b.h.pa(k),u||b.c.notify(k,b.c.B));n=v}},{j:k});return{controlsDescendantBindings:!0}}};b.F.Ra[c]=!1;b.h.ca[c]=!0}a("if");a("ifnot",!1,!0);a("with",!0)})();var Y={};b.b.options={init:a=>{if(!a.matches("SELECT"))throw Error("options binding applies only to SELECT elements");for(;0{function h(){return Array.from(a.options).filter(l=>l.selected)}
+function k(l,m,r){var v=typeof m;return"function"==v?m(l):"string"==v?l[m]:r}function t(l,m){u&&n?b.c.notify(a,b.c.B):p.length&&(l=p.includes(b.A.O(m[0])),m[0].selected=l,u&&!l&&b.i.D(b.a.Zb,null,[a,"change"]))}var d=a.multiple,f=0!=a.length&&d?a.scrollTop:null,g=b.a.g(c()),n=e.get("valueAllowUnset")&&e.has("value");c={};var p=[];n||(d?p=h().map(b.A.O):0<=a.selectedIndex&&p.push(b.A.O(a.options[a.selectedIndex])));if(g){"undefined"==typeof g.length&&(g=[g]);var q=g.filter(l=>l||null==l);e.has("optionsCaption")&&
+(g=b.a.g(e.get("optionsCaption")),null!==g&&void 0!==g&&q.unshift(Y))}var u=!1;c.beforeRemove=l=>a.removeChild(l);g=t;e.has("optionsAfterRender")&&"function"==typeof e.get("optionsAfterRender")&&(g=(l,m)=>{t(l,m);b.i.D(e.get("optionsAfterRender"),null,[m[0],l!==Y?l:void 0])});b.a.Wb(a,q,function(l,m,r){r.length&&(p=!n&&r[0].selected?[b.A.O(r[0])]:[],u=!0);m=a.ownerDocument.createElement("option");l===Y?(b.a.ib(m,e.get("optionsCaption")),b.A.La(m,void 0)):(r=k(l,e.get("optionsValue"),l),b.A.La(m,b.a.g(r)),
+l=k(l,e.get("optionsText"),r),b.a.ib(m,l));return[m]},c,g);if(!n){var x;d?x=p.length&&h().length{c=b.a.g(c()||{});b.a.N(c,(e,h)=>{h=b.a.g(h);if(null===h||void 0===h||!1===h)h="";if(/^--/.test(e))a.style.setProperty(e,h);else{e=
+e.replace(/-(\w)/g,(t,d)=>d.toUpperCase());var k=a.style[e];a.style[e]=h;h===k||a.style[e]!=k||isNaN(h)||(a.style[e]=h+"px")}})}};b.b.submit={init:(a,c,e,h,k)=>{if("function"!=typeof c())throw Error("The value for a submit binding must be a function");b.a.H(a,"submit",t=>{var d=c();try{var f=d.call(k.$data,a)}finally{!0!==f&&(t.preventDefault?t.preventDefault():t.returnValue=!1)}})}};b.b.text={init:()=>({controlsDescendantBindings:!0}),update:(a,c)=>b.a.ib(a,c())};b.h.ca.text=!0;b.b.textInput={init:(a,
+c,e)=>{var h=a.value,k,t,d=()=>{clearTimeout(k);t=k=void 0;var g=a.value;h!==g&&(h=g,b.F.ob(c(),e,"textInput",g))},f=()=>{var g=b.a.g(c());if(null===g||void 0===g)g="";void 0!==t&&g===t?b.a.setTimeout(f,4):a.value!==g&&(a.value=g,h=a.value)};b.a.H(a,"input",d);b.a.H(a,"change",d);b.a.H(a,"blur",d);b.l(f,{j:a})}};b.F.mb.textInput=!0;b.b.textinput={preprocess:(a,c,e)=>e("textInput",a)};b.b.value={init:(a,c,e)=>{var h=a.matches("SELECT"),k=a.matches("INPUT");if(!k||"checkbox"!=a.type&&"radio"!=a.type){var t=
+[],d=e.get("valueUpdate"),f=null;d&&("string"==typeof d?t=[d]:t=d?d.filter((q,u)=>d.indexOf(q)===u):[],b.a.va(t,"change"));var g=()=>{f=null;var q=c(),u=b.A.O(a);b.F.ob(q,e,"value",u)};t.forEach(q=>{var u=g;b.a.Ec(q,"after")&&(u=()=>{f=b.A.O(a);b.a.setTimeout(g,0)},q=q.substring(5));b.a.H(a,q,u)});var n=k&&"file"==a.type?()=>{var q=b.a.g(c());null===q||void 0===q||""===q?a.value="":b.i.D(g)}:()=>{var q=b.a.g(c()),u=b.A.O(a);if(null!==f&&q===f)b.a.setTimeout(n,0);else if(q!==u||void 0===u)h?(u=e.get("valueAllowUnset"),
+b.A.La(a,q,u),u||q===b.A.O(a)||b.i.D(g)):b.A.La(a,q)};if(h){var p;b.c.subscribe(a,b.c.B,()=>{p?e.get("valueAllowUnset")?n():g():(b.a.H(a,"change",g),p=b.l(n,{j:a}))},null,{notifyImmediately:!0})}else b.a.H(a,"change",g),b.l(n,{j:a})}else b.Pa(a,{checkedValue:c})},update:()=>{}};b.F.mb.value=!0;b.b.visible={update:(a,c)=>{c=b.a.g(c());var e="none"!=a.style.display;c&&!e?a.style.display="":e&&!c&&(a.style.display="none")}};b.b.hidden={update:(a,c)=>a.hidden=!!b.a.g(c())};(function(a){b.b[a]={init:function(c,
+e,h,k,t){return b.b.event.init.call(this,c,()=>({[a]:e()}),h,k,t)}}})("click");(()=>{let a=b.a.f.X();class c{constructor(h){this.Va=h}Ha(...h){let k=this.Va;if(!h.length)return b.a.f.get(k,a)||(11===this.P?k.content:1===this.P?k:void 0);b.a.f.set(k,a,h[0])}}class e extends c{constructor(h){super(h);h&&(this.P=h.matches("TEMPLATE")&&h.content?h.content.nodeType:1)}}b.Ia={Va:e,Oa:c}})();(()=>{function a(d,f){if(d.length){var g=d[0],n=g.parentNode;h(g,d[d.length-1],p=>{1!==p.nodeType&&8!==p.nodeType||
+b.xb(f,p)});b.a.za(d,n)}}function c(d,f,g,n,p){p=p||{};var q=(d&&(d.nodeType?d:0{var n;for(f=b.h.nextSibling(f);d&&(n=d)!==f;)d=b.h.nextSibling(n),g(n,d)};b.Bc=function(d,f,g,n){g=g||{};var p=p||"replaceChildren";if(n){var q=n.nodeType?
+n:0{var u=f&&f instanceof b.R?f:new b.R(f,null,null,null,{exportDependencies:!0}),x=e(d,u.$data,u);c(n,p,x,u,g)},{oa:()=>!q||!b.a.Xa(q),j:q})}console.log("no targetNodeOrNodeArray")};b.Cc=(d,f,g,n,p)=>{function q(y,w){b.i.D(b.a.Wb,null,[n,y,l,g,m,w]);b.c.notify(n,b.c.B)}var u,x=g.as,l=(y,w)=>{u=p.createChildContext(y,{as:x,noChildContext:g.noChildContext,extend:A=>{A.$index=w;x&&(A[x+"Index"]=w)}});y=e(d,y,u);return c(n,"ignoreTargetNode",y,u,g)},m=(y,w)=>{a(w,u);
+g.afterRender&&g.afterRender(w,y);u=null},r=!1===g.includeDestroyed;if(r||g.beforeRemove||!b.Ob(f))return b.l(()=>{var y=b.a.g(f)||[];"undefined"==typeof y.length&&(y=[y]);r&&(y=y.filter(w=>w||null==w));q(y)},{j:n});q(f.G());var v=f.subscribe(y=>{q(f(),y)},null,"arrayChange");v.j(n);return v};var k=b.a.f.X(),t=b.a.f.X();b.b.template={init:(d,f)=>{f=b.a.g(f());if("string"==typeof f||"name"in f)b.h.pa(d);else if("nodes"in f){f=f.nodes||[];if(b.K(f))throw Error('The "nodes" option must be a plain, non-observable array.');
+let g=f[0]&&f[0].parentNode;g&&b.a.f.get(g,t)||(g=b.a.Rb(f),b.a.f.set(g,t,!0));(new b.Ia.Oa(d)).Ha(g)}else if(f=b.h.childNodes(d),0{var q=f();f=b.a.g(q);g=!0;n=null;"string"==typeof f?f={}:(q="name"in f?f.name:d,"if"in f&&(g=b.a.g(f["if"])),g&&"ifnot"in f&&(g=!b.a.g(f.ifnot)),g&&!q&&(g=!1));"foreach"in f?n=b.Cc(q,
+g&&f.foreach||[],f,d,p):g?(g=p,"data"in f&&(g=p.createChildContext(f.data,{as:f.as,noChildContext:f.noChildContext,exportDependencies:!0})),n=b.Bc(q,g,f,d)):b.h.pa(d);p=n;(f=b.a.f.get(d,k))&&"function"==typeof f.o&&f.o();b.a.f.set(d,k,!p||p.ga&&!p.ga()?void 0:p)}};b.F.Ra.template=d=>{d=b.F.yc(d);return 1==d.length&&d[0].unknown||b.F.wc(d,"name")?null:"This template engine does not support anonymous templates nested within its templates"};b.h.ca.template=!0})();b.a.Lb=(a,c,e)=>{if(a.length&&c.length){var h,
+k,t,d,f;for(h=k=0;(!e||h{function a(c,e,h,k,t){var d=Math.min,f=Math.max,g=[],n,p=c.length,q,u=e.length,x=u-p||1,l=p+u+1,m;for(n=0;n<=p;n++){var r=m;g.push(m=[]);var v=d(u,n+x);for(q=f(0,n-1);q<=v;q++)m[q]=q?n?c[n-1]===e[q-1]?r[q-1]:d(r[q]||l,m[q-1]||l)+1:q+1:n+1}d=[];f=[];x=[];n=p;for(q=u;n||q;)u=g[n][q]-1,q&&u===g[n][q-1]?f.push(d[d.length]={status:h,value:e[--q],
+index:q}):n&&u===g[n-1][q]?x.push(d[d.length]={status:k,value:c[--n],index:n}):(--q,--n,t.sparse||d.push({status:"retained",value:e[q]}));b.a.Lb(x,f,!t.dontLimitMoves&&10*p);return d.reverse()}return function(c,e,h){h="boolean"===typeof h?{dontLimitMoves:h}:h||{};c=c||[];e=e||[];return c.length{function a(h,k,t,d,f){var g=[],n=b.l(()=>{var p=k(t,f,b.a.za(g,h))||[];if(0!!g.find(b.a.Xa)});return{M:g,Ta:n.ga()?n:void 0}}var c=b.a.f.X(),e=b.a.f.X();b.a.Wb=(h,k,t,d,f,g)=>{function n(H){z={da:H,Ca:b.ba(r++)};l.push(z);x||I.push(z)}function p(H){z=u[H];r!==z.Ca.G()&&A.push(z);z.Ca(r++);b.a.za(z.M,h);l.push(z)}function q(H,L){if(H)for(var K=0,N=L.length;KH(ia,K,L[K].da))}
+k=k||[];"undefined"==typeof k.length&&(k=[k]);d=d||{};var u=b.a.f.get(h,c),x=!u,l=[],m=0,r=0,v=[],y=[],w=[],A=[],I=[],G=0;if(x)k.forEach(n);else{if(!g||u&&u._countWaitingForRemove)g=Array.prototype.map.call(u,H=>H.da),g=b.a.Fb(g,k,{dontLimitMoves:d.dontLimitMoves,sparse:!0});for(let H=0,L,K,N;L=g[H];H++)switch(K=L.moved,N=L.index,L.status){case "deleted":for(;m {
// Use the provided options--each call to trackArrayChanges overwrites the previously set options
target.compareArrayOptions = {};
diff --git a/vendors/knockout/src/subscribables/observableArray.js b/vendors/knockout/src/subscribables/observableArray.js
index c43b75678..04a18636b 100644
--- a/vendors/knockout/src/subscribables/observableArray.js
+++ b/vendors/knockout/src/subscribables/observableArray.js
@@ -32,22 +32,6 @@ ko.observableArray['fn'] = {
this.valueHasMutated();
}
return removedValues;
- },
-
- 'removeAll': function (arrayOfValues) {
- // If you passed zero args, we remove everything
- if (arrayOfValues === undefined) {
- var underlyingArray = this.peek();
- var allValues = underlyingArray.slice(0);
- this.valueWillMutate();
- underlyingArray.splice(0, underlyingArray.length);
- this.valueHasMutated();
- return allValues;
- }
- // If you passed an arg, we interpret it as an array of entries to remove
- if (!arrayOfValues)
- return [];
- return this['remove'](value => arrayOfValues.includes(value));
}
};
diff --git a/vendors/squire/build/squire-raw.js b/vendors/squire/build/squire-raw.js
index f482c05b5..bdca2d074 100644
--- a/vendors/squire/build/squire-raw.js
+++ b/vendors/squire/build/squire-raw.js
@@ -63,7 +63,7 @@ const
11: 1024
},
- inlineNodeNames = /^(?:#text|A|ABBR|ACRONYM|B|BR|BD[IO]|CITE|CODE|DATA|DEL|DFN|EM|FONT|HR|IMG|INPUT|INS|KBD|Q|RP|RT|RUBY|SAMP|SMALL|SPAN|STR(IKE|ONG)|SU[BP]|TIME|U|VAR|WBR)$/,
+ inlineNodeNames = /^(?:#text|A|ABBR|ACRONYM|B|BR|BD[IO]|CITE|CODE|DATA|DEL|DFN|EM|FONT|HR|I|IMG|INPUT|INS|KBD|Q|RP|RT|RUBY|S|SAMP|SMALL|SPAN|STR(IKE|ONG)|SU[BP]|TIME|U|VAR|WBR)$/,
// phrasingElements = 'ABBR,AUDIO,B,BDO,BR,BUTTON,CANVAS,CITE,CODE,COMMAND,DATA,DATALIST,DFN,EM,EMBED,I,IFRAME,IMG,INPUT,KBD,KEYGEN,LABEL,MARK,MATH,METER,NOSCRIPT,OBJECT,OUTPUT,PROGRESS,Q,RUBY,SAMP,SCRIPT,SELECT,SMALL,SPAN,STRONG,SUB,SUP,SVG,TEXTAREA,TIME,VAR,VIDEO,WBR',
leafNodeNames = {
@@ -168,7 +168,7 @@ const
},
getPath = ( node, root, config ) => {
- let path = '', classNames, styleNames;
+ let path = '', style;
if ( node && node !== root ) {
path = getPath( node.parentNode, root, config );
if ( node.nodeType === ELEMENT_NODE ) {
@@ -177,29 +177,13 @@ const
path += '#' + node.id;
}
if ( node.classList.length ) {
- classNames = [...node.classList].sort();
- path += '.' + classNames.join( '.' );
+ path += '.' + [...node.classList].sort().join( '.' );
}
if ( node.dir ) {
path += '[dir=' + node.dir + ']';
}
- if ( classNames ) {
- styleNames = config.classNames;
- if ( classNames.includes( styleNames.highlight ) ) {
- path += '[backgroundColor=' +
- node.style.backgroundColor.replace( / /g,'' ) + ']';
- }
- if ( classNames.includes( styleNames.colour ) ) {
- path += '[color=' +
- node.style.color.replace( / /g,'' ) + ']';
- }
- if ( classNames.includes( styleNames.fontFamily ) ) {
- path += '[fontFamily=' +
- node.style.fontFamily.replace( / /g,'' ) + ']';
- }
- if ( classNames.includes( styleNames.fontSize ) ) {
- path += '[fontSize=' + node.style.fontSize + ']';
- }
+ if ( style = node.style.cssText ) {
+ path += '[style=' + style + ']';
}
}
}
@@ -226,6 +210,16 @@ const
return frag;
},
+ setStyle = ( node, style ) => {
+ if (typeof style === 'object') {
+ for ( let p in style ) {
+ node.style[p] = style[p];
+ }
+ } else if ( style !== undefined ) {
+ node.setAttribute( 'style', style );
+ }
+ },
+
createElement = ( tag, props, children ) => {
let el = doc.createElement( tag ),
attr, value;
@@ -236,7 +230,9 @@ const
if ( props ) {
for ( attr in props ) {
value = props[ attr ];
- if ( value !== undefined ) {
+ if ('style' === attr) {
+ setStyle( el, value );
+ } else if ( value !== undefined ) {
el.setAttribute( attr, value );
}
}
@@ -280,12 +276,7 @@ const
child = node.firstChild;
}
if ( !child ) {
- if ( isWebKit ) {
- fixer = doc.createTextNode( ZWS );
- self._didAddZWS();
- } else {
- fixer = doc.createTextNode( '' );
- }
+ fixer = self._addZWS();
}
// } else if ( !node.querySelector( 'BR' ) ) {
// } else if ( !node.innerText.trim().length ) {
@@ -314,9 +305,9 @@ const
fixContainer = ( container, root ) => {
let children = container.childNodes;
let wrapper = null;
- let i, l, child, isBR;
+ let i = 0, l = children.length, child, isBR;
- for ( i = 0, l = children.length; i < l; ++i ) {
+ for ( ; i < l; ++i ) {
child = children[i];
isBR = child.nodeName === 'BR';
if ( !isBR && isInline( child )
@@ -1115,8 +1106,821 @@ const
// parent = end.parentNode;
// range.setEnd( parent, indexOf( parent.childNodes, end ) + 1 );
}
- };
+ },
+ didError = error => console.error( error ),
+
+ createRange = ( range, startOffset, endContainer, endOffset ) => {
+ if ( range instanceof Range ) {
+ return range.cloneRange();
+ }
+ let domRange = doc.createRange();
+ domRange.setStart( range, startOffset );
+ if ( endContainer ) {
+ domRange.setEnd( endContainer, endOffset );
+ } else {
+ domRange.setEnd( range, startOffset );
+ }
+ return domRange;
+ },
+
+ mapKeyTo = method => ( self, event ) => {
+ event.preventDefault();
+ self[ method ]();
+ },
+
+ mapKeyToFormat = ( tag, remove ) => {
+ return ( self, event ) => {
+ event.preventDefault();
+ self.toggleTag(tag, remove);
+ };
+ },
+
+ // If you delete the content inside a span with a font styling, Webkit will
+ // replace it with a tag (!). If you delete all the text inside a
+ // link in Opera, it won't delete the link. Let's make things consistent. If
+ // you delete all text inside an inline tag, remove the inline tag.
+ afterDelete = ( self, range ) => {
+ try {
+ if ( !range ) { range = self.getSelection(); }
+ let node = range.startContainer,
+ parent;
+ // Climb the tree from the focus point while we are inside an empty
+ // inline element
+ if ( node.nodeType === TEXT_NODE ) {
+ node = node.parentNode;
+ }
+ parent = node;
+ while ( isInline( parent ) &&
+ ( !parent.textContent || parent.textContent === ZWS ) ) {
+ node = parent;
+ parent = node.parentNode;
+ }
+ // If focused in empty inline element
+ if ( node !== parent ) {
+ // Move focus to just before empty inline(s)
+ range.setStart( parent,
+ indexOf( parent.childNodes, node ) );
+ range.collapse( true );
+ // Remove empty inline(s)
+ node.remove( );
+ // Fix cursor in block
+ if ( !isBlock( parent ) ) {
+ parent = getPreviousBlock( parent, self._root );
+ }
+ fixCursor( parent, self._root );
+ // Move cursor into text node
+ moveRangeBoundariesDownTree( range );
+ }
+ // If you delete the last character in the sole
in Chrome,
+ // it removes the div and replaces it with just a
inside the + // root. Detach the
; the _ensureBottomLine call will insert a new + // block. + if ( node === self._root && + ( node = node.firstChild ) && node.nodeName === 'BR' ) { + detach( node ); + } + self._ensureBottomLine(); + self.setSelection( range ); + self._updatePath( range, true ); + } catch ( error ) { + didError( error ); + } + }, + + detachUneditableNode = ( node, root ) => { + let parent; + while (( parent = node.parentNode )) { + if ( parent === root || parent.isContentEditable ) { + break; + } + node = parent; + } + detach( node ); + }, + + handleEnter = ( self, shiftKey, range ) => { + let root = self._root; + let block, parent, node, offset, nodeAfterSplit; + + // Save undo checkpoint and add any links in the preceding section. + // Remove any zws so we don't think there's content in an empty + // block. + self._recordUndoState( range ); + if ( self._config.addLinks ) { + addLinks( range.startContainer, root, self ); + } + self._removeZWS(); + self._getRangeAndRemoveBookmark( range ); + + // Selected text is overwritten, therefore delete the contents + // to collapse selection. + if ( !range.collapsed ) { + deleteContentsOfRange( range, root ); + } + + block = getStartBlockOfRange( range, root ); + + // Inside a PRE, insert literal newline, unless on blank line. + if ( block && ( parent = getClosest( block, root, 'PRE' ) ) ) { + moveRangeBoundariesDownTree( range ); + node = range.startContainer; + offset = range.startOffset; + if ( node.nodeType !== TEXT_NODE ) { + node = doc.createTextNode( '' ); + parent.insertBefore( node, parent.firstChild ); + } + // If blank line: split and insert default block + if ( !shiftKey && + ( node.data.charAt( offset - 1 ) === '\n' || + rangeDoesStartAtBlockBoundary( range, root ) ) && + ( node.data.charAt( offset ) === '\n' || + rangeDoesEndAtBlockBoundary( range, root ) ) ) { + node.deleteData( offset && offset - 1, offset ? 2 : 1 ); + nodeAfterSplit = + split( node, offset && offset - 1, root, root ); + node = nodeAfterSplit.previousSibling; + if ( !node.textContent ) { + detach( node ); + } + node = self.createDefaultBlock(); + nodeAfterSplit.before( node ); + if ( !nodeAfterSplit.textContent ) { + detach( nodeAfterSplit ); + } + range.setStart( node, 0 ); + } else { + node.insertData( offset, '\n' ); + fixCursor( parent, root ); + // Firefox bug: if you set the selection in the text node after + // the new line, it draws the cursor before the line break still + // but if you set the selection to the equivalent position + // in the parent, it works. + if ( node.length === offset + 1 ) { + range.setStartAfter( node ); + } else { + range.setStart( node, offset + 1 ); + } + } + range.collapse( true ); + self.setSelection( range ); + self._updatePath( range, true ); + self._docWasChanged(); + return; + } + + // If this is a malformed bit of document or in a table; + // just play it safe and insert a
. + if ( !block || shiftKey || /^T[HD]$/.test( block.nodeName ) ) { + // If inside an , move focus out + moveRangeBoundaryOutOf( range, 'A', root ); + insertNodeInRange( range, createElement( 'BR' ) ); + range.collapse( false ); + self.setSelection( range ); + self._updatePath( range, true ); + return; + } + + // If in a list, we'll split the LI instead. + block = getClosest( block, root, 'LI' ) || block; + + if ( isEmptyBlock( block ) && ( parent = getClosest( block, root, 'UL,OL,BLOCKQUOTE' ) ) ) { + return 'BLOCKQUOTE' === parent.nodeName + // Break blockquote + ? self.modifyBlocks( (/* frag */) => self.createDefaultBlock( createBookmarkNodes( self ) ), range ) + // Break list + : self.decreaseListLevel( range ); + } + + // Otherwise, split at cursor point. + nodeAfterSplit = splitBlock( self, block, + range.startContainer, range.startOffset ); + + // Clean up any empty inlines if we hit enter at the beginning of the block + removeZWS( block ); + removeEmptyInlines( block ); + fixCursor( block, root ); + + // Focus cursor + // If there's a / etc. at the beginning of the split + // make sure we focus inside it. + while ( nodeAfterSplit.nodeType === ELEMENT_NODE ) { + let child = nodeAfterSplit.firstChild, + next; + + // Don't continue links over a block break; unlikely to be the + // desired outcome. + if ( nodeAfterSplit.nodeName === 'A' && + ( !nodeAfterSplit.textContent || + nodeAfterSplit.textContent === ZWS ) ) { + child = doc.createTextNode( '' ); + nodeAfterSplit.replaceWith( child ); + nodeAfterSplit = child; + break; + } + + while ( child && child.nodeType === TEXT_NODE && !child.data ) { + next = child.nextSibling; + if ( !next || next.nodeName === 'BR' ) { + break; + } + detach( child ); + child = next; + } + + // 'BR's essentially don't count; they're a browser hack. + // If you try to select the contents of a 'BR', FF will not let + // you type anything! + if ( !child || child.nodeName === 'BR' || + child.nodeType === TEXT_NODE ) { + break; + } + nodeAfterSplit = child; + } + range = createRange( nodeAfterSplit, 0 ); + self.setSelection( range ); + self._updatePath( range, true ); + }, + + + changeIndentationLevel = direction => ( self, event ) => { + event.preventDefault(); + self.changeIndentationLevel(direction); + }, + + toggleList = ( type, methodIfNotInList ) => ( self, event ) => { + event.preventDefault(); + let parent = self.getSelectionClosest('UL,OL'); + if (parent && type == parent.nodeName) { + self.removeList(); + } else { + self[ methodIfNotInList ](); + } + }, + + fontSizes = { + 1: 'x-small', + 2: 'small', + 3: 'medium', + 4: 'large', + 5: 'x-large', + 6: 'xx-large', + 7: 'xxx-large', + '-1': 'smaller', + '+1': 'larger' + }, + + styleToSemantic = { + fontWeight: { + regexp: /^bold|^700/i, + replace: () => createElement( 'B' ) + }, + fontStyle: { + regexp: /^italic/i, + replace: () => createElement( 'I' ) + }, + fontFamily: { + regexp: notWS, + replace: ( doc, classNames, family ) => createElement( 'SPAN', { + style: 'font-family:' + family + }) + }, + fontSize: { + regexp: notWS, + replace: ( doc, classNames, size ) => createElement( 'SPAN', { + style: 'font-size:' + size + }) + }, + textDecoration: { + regexp: /^underline/i, + replace: () => createElement( 'U' ) + } + /* + textDecoration: { + regexp: /^line-through/i, + replace: doc => createElement( 'S' ) + } + */ + }, + + replaceWithTag = tag => node => { + let el = createElement( tag ); + Array.prototype.forEach.call( node.attributes, attr => el.setAttribute( attr.name, attr.value ) ); + node.replaceWith( el ); + el.append( empty( node ) ); + return el; + }, + + replaceStyles = ( node, parent, config ) => { + let style = node.style; + let attr, converter, css, newTreeBottom, newTreeTop, el; + + for ( attr in styleToSemantic ) { + converter = styleToSemantic[ attr ]; + css = style[ attr ]; + if ( css && converter.regexp.test( css ) ) { + el = converter.replace( doc, config.classNames, css ); + if ( el.nodeName === node.nodeName && + el.className === node.className ) { + continue; + } + if ( !newTreeTop ) { + newTreeTop = el; + } + if ( newTreeBottom ) { + newTreeBottom.append( el ); + } + newTreeBottom = el; + node.style[ attr ] = ''; + } + } + + if ( newTreeTop ) { + newTreeBottom.append( empty( node ) ); + node.append( newTreeTop ); + } + + return newTreeBottom || node; + }, + + stylesRewriters = { + SPAN: replaceStyles, + STRONG: replaceWithTag( 'B' ), + EM: replaceWithTag( 'I' ), + INS: replaceWithTag( 'U' ), + STRIKE: replaceWithTag( 'S' ), + FONT: node => { + let face = node.face, + size = node.size, + color = node.color, + newTag = createElement( 'SPAN' ), + css = newTag.style; + if ( face ) { + css.fontFamily = face; + } + if ( size ) { + css.fontSize = fontSizes[ size ]; + } + if ( color && /^#?([\dA-F]{3}){1,2}$/i.test( color ) ) { + if ( color.charAt( 0 ) !== '#' ) { + color = '#' + color; + } + css.color = color; + } + node.replaceWith( newTag ); + newTag.append( empty( node ) ); + return newTag; + }, + // KBD: + // VAR: + // CODE: + // SAMP: + TT: node => { + let el = createElement( 'SPAN', { + style: 'font-family:menlo,consolas,"courier new",monospace' + }); + node.replaceWith( el ); + el.append( empty( node ) ); + return el; + } + }, + + allowedBlock = /^(?:A(?:DDRESS|RTICLE|SIDE|UDIO)|BLOCKQUOTE|CAPTION|D(?:[DLT]|IV)|F(?:IGURE|IGCAPTION|OOTER)|H[1-6]|HEADER|L(?:ABEL|EGEND|I)|O(?:L|UTPUT)|P(?:RE)?|SECTION|T(?:ABLE|BODY|D|FOOT|H|HEAD|R)|COL(?:GROUP)?|UL)$/, + + blacklist = /^(?:HEAD|META|STYLE)/, + + /* + Two purposes: + + 1. Remove nodes we don't want, such as weird tags, comment nodes
+ and whitespace nodes.
+ 2. Convert inline tags into our preferred format.
+ */
+ cleanTree = ( node, config, preserveWS ) => {
+ let children = node.childNodes,
+ nonInlineParent, i, l, child, nodeName, nodeType, childLength,
+ startsWithWS, endsWithWS, data, sibling;
+
+ nonInlineParent = node;
+ while ( isInline( nonInlineParent ) ) {
+ nonInlineParent = nonInlineParent.parentNode;
+ }
+ let walker = createTreeWalker( nonInlineParent, SHOW_TEXT|SHOW_ELEMENT );
+
+ for ( i = 0, l = children.length; i < l; ++i ) {
+ child = children[i];
+ nodeName = child.nodeName;
+ nodeType = child.nodeType;
+ if ( nodeType === ELEMENT_NODE ) {
+ childLength = child.childNodes.length;
+ if ( stylesRewriters[ nodeName ] ) {
+ child = stylesRewriters[ nodeName ]( child );
+ } else if ( blacklist.test( nodeName ) ) {
+ child.remove( );
+ --i;
+ --l;
+ continue;
+ } else if ( !allowedBlock.test( nodeName ) && !isInline( child ) ) {
+ --i;
+ l += childLength - 1;
+ child.replaceWith( empty( child ) );
+ continue;
+ }
+ if ( childLength ) {
+ cleanTree( child, config,
+ preserveWS || ( nodeName === 'PRE' ) );
+ }
+ } else {
+ if ( nodeType === TEXT_NODE ) {
+ data = child.data;
+ startsWithWS = !notWS.test( data.charAt( 0 ) );
+ endsWithWS = !notWS.test( data.charAt( data.length - 1 ) );
+ if ( preserveWS || ( !startsWithWS && !endsWithWS ) ) {
+ continue;
+ }
+ // Iterate through the nodes; if we hit some other content
+ // before the start of a new block we don't trim
+ if ( startsWithWS ) {
+ walker.currentNode = child;
+ while ( sibling = walker.previousPONode() ) {
+ nodeName = sibling.nodeName;
+ if ( nodeName === 'IMG' ||
+ ( nodeName === '#text' &&
+ notWS.test( sibling.data ) ) ) {
+ break;
+ }
+ if ( !isInline( sibling ) ) {
+ sibling = null;
+ break;
+ }
+ }
+ data = data.replace( /^[ \t\r\n]+/g, sibling ? ' ' : '' );
+ }
+ if ( endsWithWS ) {
+ walker.currentNode = child;
+ while ( sibling = walker.nextNode() ) {
+ if ( nodeName === 'IMG' ||
+ ( nodeName === '#text' &&
+ notWS.test( sibling.data ) ) ) {
+ break;
+ }
+ if ( !isInline( sibling ) ) {
+ sibling = null;
+ break;
+ }
+ }
+ data = data.replace( /[ \t\r\n]+$/g, sibling ? ' ' : '' );
+ }
+ if ( data ) {
+ child.data = data;
+ continue;
+ }
+ }
+ child.remove( );
+ --i;
+ --l;
+ }
+ }
+ return node;
+ },
+
+ // ---
+
+ removeEmptyInlines = node => {
+ let children = node.childNodes,
+ l = children.length,
+ child;
+ while ( l-- ) {
+ child = children[l];
+ if ( child.nodeType === ELEMENT_NODE && !isLeaf( child ) ) {
+ removeEmptyInlines( child );
+ if ( isInline( child ) && !child.firstChild ) {
+ child.remove( );
+ }
+ } else if ( child.nodeType === TEXT_NODE && !child.data ) {
+ child.remove( );
+ }
+ }
+ },
+
+ // ---
+
+ notWSTextNode = node => node.nodeType === ELEMENT_NODE ? node.nodeName === 'BR' : notWS.test( node.data ),
+ isLineBreak = ( br, isLBIfEmptyBlock ) => {
+ let block = br.parentNode;
+ let walker;
+ while ( isInline( block ) ) {
+ block = block.parentNode;
+ }
+ walker = createTreeWalker( block, SHOW_ELEMENT|SHOW_TEXT, notWSTextNode );
+ walker.currentNode = br;
+ return !!walker.nextNode() ||
+ ( isLBIfEmptyBlock && !walker.previousNode() );
+ },
+
+ //
elements are treated specially, and differently depending on the + // browser, when in rich text editor mode. When adding HTML from external + // sources, we must remove them, replacing the ones that actually affect + // line breaks by wrapping the inline text in a
inside the + // root. Detach the
; the _ensureBottomLine call will insert a new + // block. + if ( node === self._root && + ( node = node.firstChild ) && node.nodeName === 'BR' ) { + detach( node ); + } + self._ensureBottomLine(); + self.setSelection( range ); + self._updatePath( range, true ); + } catch ( error ) { + didError( error ); + } + }, + + detachUneditableNode = ( node, root ) => { + let parent; + while (( parent = node.parentNode )) { + if ( parent === root || parent.isContentEditable ) { + break; + } + node = parent; + } + detach( node ); + }, + + handleEnter = ( self, shiftKey, range ) => { + let root = self._root; + let block, parent, node, offset, nodeAfterSplit; + + // Save undo checkpoint and add any links in the preceding section. + // Remove any zws so we don't think there's content in an empty + // block. + self._recordUndoState( range ); + if ( self._config.addLinks ) { + addLinks( range.startContainer, root, self ); + } + self._removeZWS(); + self._getRangeAndRemoveBookmark( range ); + + // Selected text is overwritten, therefore delete the contents + // to collapse selection. + if ( !range.collapsed ) { + deleteContentsOfRange( range, root ); + } + + block = getStartBlockOfRange( range, root ); + + // Inside a PRE, insert literal newline, unless on blank line. + if ( block && ( parent = getClosest( block, root, 'PRE' ) ) ) { + moveRangeBoundariesDownTree( range ); + node = range.startContainer; + offset = range.startOffset; + if ( node.nodeType !== TEXT_NODE ) { + node = doc.createTextNode( '' ); + parent.insertBefore( node, parent.firstChild ); + } + // If blank line: split and insert default block + if ( !shiftKey && + ( node.data.charAt( offset - 1 ) === '\n' || + rangeDoesStartAtBlockBoundary( range, root ) ) && + ( node.data.charAt( offset ) === '\n' || + rangeDoesEndAtBlockBoundary( range, root ) ) ) { + node.deleteData( offset && offset - 1, offset ? 2 : 1 ); + nodeAfterSplit = + split( node, offset && offset - 1, root, root ); + node = nodeAfterSplit.previousSibling; + if ( !node.textContent ) { + detach( node ); + } + node = self.createDefaultBlock(); + nodeAfterSplit.before( node ); + if ( !nodeAfterSplit.textContent ) { + detach( nodeAfterSplit ); + } + range.setStart( node, 0 ); + } else { + node.insertData( offset, '\n' ); + fixCursor( parent, root ); + // Firefox bug: if you set the selection in the text node after + // the new line, it draws the cursor before the line break still + // but if you set the selection to the equivalent position + // in the parent, it works. + if ( node.length === offset + 1 ) { + range.setStartAfter( node ); + } else { + range.setStart( node, offset + 1 ); + } + } + range.collapse( true ); + self.setSelection( range ); + self._updatePath( range, true ); + self._docWasChanged(); + return; + } + + // If this is a malformed bit of document or in a table; + // just play it safe and insert a
. + if ( !block || shiftKey || /^T[HD]$/.test( block.nodeName ) ) { + // If inside an , move focus out + moveRangeBoundaryOutOf( range, 'A', root ); + insertNodeInRange( range, createElement( 'BR' ) ); + range.collapse( false ); + self.setSelection( range ); + self._updatePath( range, true ); + return; + } + + // If in a list, we'll split the LI instead. + block = getClosest( block, root, 'LI' ) || block; + + if ( isEmptyBlock( block ) && ( parent = getClosest( block, root, 'UL,OL,BLOCKQUOTE' ) ) ) { + return 'BLOCKQUOTE' === parent.nodeName + // Break blockquote + ? self.modifyBlocks( (/* frag */) => self.createDefaultBlock( createBookmarkNodes( self ) ), range ) + // Break list + : self.decreaseListLevel( range ); + } + + // Otherwise, split at cursor point. + nodeAfterSplit = splitBlock( self, block, + range.startContainer, range.startOffset ); + + // Clean up any empty inlines if we hit enter at the beginning of the block + removeZWS( block ); + removeEmptyInlines( block ); + fixCursor( block, root ); + + // Focus cursor + // If there's a / etc. at the beginning of the split + // make sure we focus inside it. + while ( nodeAfterSplit.nodeType === ELEMENT_NODE ) { + let child = nodeAfterSplit.firstChild, + next; + + // Don't continue links over a block break; unlikely to be the + // desired outcome. + if ( nodeAfterSplit.nodeName === 'A' && + ( !nodeAfterSplit.textContent || + nodeAfterSplit.textContent === ZWS ) ) { + child = doc.createTextNode( '' ); + nodeAfterSplit.replaceWith( child ); + nodeAfterSplit = child; + break; + } + + while ( child && child.nodeType === TEXT_NODE && !child.data ) { + next = child.nextSibling; + if ( !next || next.nodeName === 'BR' ) { + break; + } + detach( child ); + child = next; + } + + // 'BR's essentially don't count; they're a browser hack. + // If you try to select the contents of a 'BR', FF will not let + // you type anything! + if ( !child || child.nodeName === 'BR' || + child.nodeType === TEXT_NODE ) { + break; + } + nodeAfterSplit = child; + } + range = createRange( nodeAfterSplit, 0 ); + self.setSelection( range ); + self._updatePath( range, true ); + }, + + + changeIndentationLevel = direction => ( self, event ) => { + event.preventDefault(); + self.changeIndentationLevel(direction); + }, + + toggleList = ( type, methodIfNotInList ) => ( self, event ) => { + event.preventDefault(); + let parent = self.getSelectionClosest('UL,OL'); + if (parent && type == parent.nodeName) { + self.removeList(); + } else { + self[ methodIfNotInList ](); + } + }, + + fontSizes = { + 1: 'x-small', + 2: 'small', + 3: 'medium', + 4: 'large', + 5: 'x-large', + 6: 'xx-large', + 7: 'xxx-large', + '-1': 'smaller', + '+1': 'larger' + }, + + styleToSemantic = { + fontWeight: { + regexp: /^bold|^700/i, + replace: () => createElement( 'B' ) + }, + fontStyle: { + regexp: /^italic/i, + replace: () => createElement( 'I' ) + }, + fontFamily: { + regexp: notWS, + replace: ( doc, classNames, family ) => createElement( 'SPAN', { + style: 'font-family:' + family + }) + }, + fontSize: { + regexp: notWS, + replace: ( doc, classNames, size ) => createElement( 'SPAN', { + style: 'font-size:' + size + }) + }, + textDecoration: { + regexp: /^underline/i, + replace: () => createElement( 'U' ) + } + /* + textDecoration: { + regexp: /^line-through/i, + replace: doc => createElement( 'S' ) + } + */ + }, + + replaceWithTag = tag => node => { + let el = createElement( tag ); + Array.prototype.forEach.call( node.attributes, attr => el.setAttribute( attr.name, attr.value ) ); + node.replaceWith( el ); + el.append( empty( node ) ); + return el; + }, + + replaceStyles = ( node, parent, config ) => { + let style = node.style; + let attr, converter, css, newTreeBottom, newTreeTop, el; + + for ( attr in styleToSemantic ) { + converter = styleToSemantic[ attr ]; + css = style[ attr ]; + if ( css && converter.regexp.test( css ) ) { + el = converter.replace( doc, config.classNames, css ); + if ( el.nodeName === node.nodeName && + el.className === node.className ) { + continue; + } + if ( !newTreeTop ) { + newTreeTop = el; + } + if ( newTreeBottom ) { + newTreeBottom.append( el ); + } + newTreeBottom = el; + node.style[ attr ] = ''; + } + } + + if ( newTreeTop ) { + newTreeBottom.append( empty( node ) ); + node.append( newTreeTop ); + } + + return newTreeBottom || node; + }, + + stylesRewriters = { + SPAN: replaceStyles, + STRONG: replaceWithTag( 'B' ), + EM: replaceWithTag( 'I' ), + INS: replaceWithTag( 'U' ), + STRIKE: replaceWithTag( 'S' ), + FONT: node => { + let face = node.face, + size = node.size, + color = node.color, + newTag = createElement( 'SPAN' ), + css = newTag.style; + if ( face ) { + css.fontFamily = face; + } + if ( size ) { + css.fontSize = fontSizes[ size ]; + } + if ( color && /^#?([\dA-F]{3}){1,2}$/i.test( color ) ) { + if ( color.charAt( 0 ) !== '#' ) { + color = '#' + color; + } + css.color = color; + } + node.replaceWith( newTag ); + newTag.append( empty( node ) ); + return newTag; + }, + // KBD: + // VAR: + // CODE: + // SAMP: + TT: node => { + let el = createElement( 'SPAN', { + style: 'font-family:menlo,consolas,"courier new",monospace' + }); + node.replaceWith( el ); + el.append( empty( node ) ); + return el; + } + }, + + allowedBlock = /^(?:A(?:DDRESS|RTICLE|SIDE|UDIO)|BLOCKQUOTE|CAPTION|D(?:[DLT]|IV)|F(?:IGURE|IGCAPTION|OOTER)|H[1-6]|HEADER|L(?:ABEL|EGEND|I)|O(?:L|UTPUT)|P(?:RE)?|SECTION|T(?:ABLE|BODY|D|FOOT|H|HEAD|R)|COL(?:GROUP)?|UL)$/, + + blacklist = /^(?:HEAD|META|STYLE)/, + + /* + Two purposes: + + 1. Remove nodes we don't want, such as weird
elements are treated specially, and differently depending on the + // browser, when in rich text editor mode. When adding HTML from external + // sources, we must remove them, replacing the ones that actually affect + // line breaks by wrapping the inline text in a
. Browsers that want
+ // elements at the end of each block will then have them added back in a later + // fixCursor method call. + cleanupBRs = ( node, root, keepForBlankLine ) => { + let brs = node.querySelectorAll( 'BR' ); + let brBreaksLine = []; + let l = brs.length; + let i, br, parent; + + // Must calculate whether the
breaks a line first, because if we + // have two
s next to each other, after the first one is converted + // to a block split, the second will be at the end of a block and + // therefore seem to not be a line break. But in its original context it + // was, so we should also convert it to a block split. + for ( i = 0; i < l; ++i ) { + brBreaksLine[i] = isLineBreak( brs[i], keepForBlankLine ); + } + while ( l-- ) { + br = brs[l]; + // Cleanup may have removed it + parent = br.parentNode; + if ( !parent ) { continue; } + // If it doesn't break a line, just remove it; it's not doing + // anything useful. We'll add it back later if required by the + // browser. If it breaks a line, wrap the content in div tags + // and replace the brs. + if ( !brBreaksLine[l] ) { + detach( br ); + } else if ( !isInline( parent ) ) { + fixContainer( parent, root ); + } + } + }, + + // The (non-standard but supported enough) innerText property is based on the + // render tree in Firefox and possibly other browsers, so we must insert the + // DOM node into the document to ensure the text part is correct. + setClipboardData = + ( event, contents, root ) => { + let clipboardData = event.clipboardData; + let body = doc.body; + let node = createElement( 'div' ); + let html, text; + + node.append( contents ); + + html = node.innerHTML; + + // Firefox will add an extra new line for BRs at the end of block when + // calculating innerText, even though they don't actually affect + // display, so we need to remove them first. + cleanupBRs( node, root, true ); + node.setAttribute( 'style', + 'position:fixed;overflow:hidden;bottom:100%;right:100%;' ); + body.append( node ); + text = node.innerText || node.textContent; + text = text.replace( NBSP, ' ' ); // Replace nbsp with regular space + node.remove( ); + + // Firefox (and others?) returns unix line endings (\n) even on Windows. + // If on Windows, normalise to \r\n, since Notepad and some other crappy + // apps do not understand just \n. + if ( isWin ) { + text = text.replace( /\r?\n/g, '\r\n' ); + } + + if ( text !== html ) { + clipboardData.setData( 'text/html', html ); + } + clipboardData.setData( 'text/plain', text ); + event.preventDefault(); + }, + + mergeObjects = ( base, extras, mayOverride ) => { + let prop, value; + if ( !base ) { + base = {}; + } + if ( extras ) { + for ( prop in extras ) { + if ( mayOverride || !( prop in base ) ) { + value = extras[ prop ]; + base[ prop ] = ( value && value.constructor === Object ) ? + mergeObjects( base[ prop ], value, mayOverride ) : + value; + } + } + } + return base; + }, + + // --- Events --- + + // Subscribing to these events won't automatically add a listener to the + // document node, since these events are fired in a custom manner by the + // editor code. + customEvents = { + pathChange: 1, select: 1, input: 1, undoStateChange: 1 + }, + + // --- Workaround for browsers that can't focus empty text nodes --- + + // WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=15256 + + // Walk down the tree starting at the root and remove any ZWS. If the node only + // contained ZWS space then remove it too. We may want to keep one ZWS node at + // the bottom of the tree so the block can be selected. Define that node as the + // keepNode. + removeZWS = ( root, keepNode ) => { + let walker = createTreeWalker( root, SHOW_TEXT ); + let parent, node, index; + while ( node = walker.nextNode() ) { + while ( ( index = node.data.indexOf( ZWS ) ) > -1 && + ( !keepNode || node.parentNode !== keepNode ) ) { + if ( node.length === 1 ) { + do { + parent = node.parentNode; + node.remove( ); + node = parent; + walker.currentNode = parent; + } while ( isInline( node ) && !getLength( node ) ); + break; + } else { + node.deleteData( index, 1 ); + } + } + } + }, + + // --- Bookmarking --- + + startSelectionId = 'squire-selection-start', + endSelectionId = 'squire-selection-end', + + createBookmarkNodes = () => [ + createElement( 'INPUT', { + id: startSelectionId, + type: 'hidden' + }), + createElement( 'INPUT', { + id: endSelectionId, + type: 'hidden' + }) + ], + + // --- Block formatting --- + + tagAfterSplit = { + DT: 'DD', + DD: 'DT', + LI: 'LI', + PRE: 'PRE' + }, + + splitBlock = ( self, block, node, offset ) => { + let splitTag = tagAfterSplit[ block.nodeName ], + nodeAfterSplit = split( node, offset, block.parentNode, self._root ), + config = self._config; + + if ( !splitTag ) { + splitTag = config.blockTag; + } + + // Make sure the new node is the correct type. + if ( !hasTagAttributes( nodeAfterSplit, splitTag, {} ) ) { + block = createElement( splitTag ); + if ( nodeAfterSplit.dir ) { + block.dir = nodeAfterSplit.dir; + } + nodeAfterSplit.replaceWith( block ); + block.append( empty( nodeAfterSplit ) ); + nodeAfterSplit = block; + } + return nodeAfterSplit; + }, + + getListSelection = ( range, root ) => { + // Get start+end li in single common ancestor + let list = range.commonAncestorContainer; + let startLi = range.startContainer; + let endLi = range.endContainer; + while ( list && list !== root && !/^[OU]L$/.test( list.nodeName ) ) { + list = list.parentNode; + } + if ( !list || list === root ) { + return null; + } + if ( startLi === list ) { + startLi = startLi.childNodes[ range.startOffset ]; + } + if ( endLi === list ) { + endLi = endLi.childNodes[ range.endOffset ]; + } + while ( startLi && startLi.parentNode !== list ) { + startLi = startLi.parentNode; + } + while ( endLi && endLi.parentNode !== list ) { + endLi = endLi.parentNode; + } + return [ list, startLi, endLi ]; + }, + + makeList = ( self, frag, type ) => { + let walker = getBlockWalker( frag, self._root ), + node, tag, prev, newLi; + + while ( node = walker.nextNode() ) { + if ( node.parentNode.nodeName === 'LI' ) { + node = node.parentNode; + walker.currentNode = node.lastChild; + } + if ( node.nodeName !== 'LI' ) { + newLi = createElement( 'LI' ); + if ( node.dir ) { + newLi.dir = node.dir; + } + + // Have we replaced the previous block with a new
+ // elements at the end of each block will then have them added back in a later + // fixCursor method call. + cleanupBRs = ( node, root, keepForBlankLine ) => { + let brs = node.querySelectorAll( 'BR' ); + let brBreaksLine = []; + let l = brs.length; + let i, br, parent; + + // Must calculate whether the
breaks a line first, because if we + // have two
s next to each other, after the first one is converted + // to a block split, the second will be at the end of a block and + // therefore seem to not be a line break. But in its original context it + // was, so we should also convert it to a block split. + for ( i = 0; i < l; ++i ) { + brBreaksLine[i] = isLineBreak( brs[i], keepForBlankLine ); + } + while ( l-- ) { + br = brs[l]; + // Cleanup may have removed it + parent = br.parentNode; + if ( !parent ) { continue; } + // If it doesn't break a line, just remove it; it's not doing + // anything useful. We'll add it back later if required by the + // browser. If it breaks a line, wrap the content in div tags + // and replace the brs. + if ( !brBreaksLine[l] ) { + detach( br ); + } else if ( !isInline( parent ) ) { + fixContainer( parent, root ); + } + } + }, + + // The (non-standard but supported enough) innerText property is based on the + // render tree in Firefox and possibly other browsers, so we must insert the + // DOM node into the document to ensure the text part is correct. + setClipboardData = + ( event, contents, root ) => { + let clipboardData = event.clipboardData; + let body = doc.body; + let node = createElement( 'div' ); + let html, text; + + node.append( contents ); + + html = node.innerHTML; + + // Firefox will add an extra new line for BRs at the end of block when + // calculating innerText, even though they don't actually affect + // display, so we need to remove them first. + cleanupBRs( node, root, true ); + node.setAttribute( 'style', + 'position:fixed;overflow:hidden;bottom:100%;right:100%;' ); + body.append( node ); + text = node.innerText || node.textContent; + text = text.replace( NBSP, ' ' ); // Replace nbsp with regular space + node.remove( ); + + // Firefox (and others?) returns unix line endings (\n) even on Windows. + // If on Windows, normalise to \r\n, since Notepad and some other crappy + // apps do not understand just \n. + if ( isWin ) { + text = text.replace( /\r?\n/g, '\r\n' ); + } + + if ( text !== html ) { + clipboardData.setData( 'text/html', html ); + } + clipboardData.setData( 'text/plain', text ); + event.preventDefault(); + }, + + mergeObjects = ( base, extras, mayOverride ) => { + let prop, value; + if ( !base ) { + base = {}; + } + if ( extras ) { + for ( prop in extras ) { + if ( mayOverride || !( prop in base ) ) { + value = extras[ prop ]; + base[ prop ] = ( value && value.constructor === Object ) ? + mergeObjects( base[ prop ], value, mayOverride ) : + value; + } + } + } + return base; + }, + + // --- Events --- + + // Subscribing to these events won't automatically add a listener to the + // document node, since these events are fired in a custom manner by the + // editor code. + customEvents = { + pathChange: 1, select: 1, input: 1, undoStateChange: 1 + }, + + // --- Workaround for browsers that can't focus empty text nodes --- + + // WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=15256 + + // Walk down the tree starting at the root and remove any ZWS. If the node only + // contained ZWS space then remove it too. We may want to keep one ZWS node at + // the bottom of the tree so the block can be selected. Define that node as the + // keepNode. + removeZWS = ( root, keepNode ) => { + let walker = createTreeWalker( root, SHOW_TEXT ); + let parent, node, index; + while ( node = walker.nextNode() ) { + while ( ( index = node.data.indexOf( ZWS ) ) > -1 && + ( !keepNode || node.parentNode !== keepNode ) ) { + if ( node.length === 1 ) { + do { + parent = node.parentNode; + node.remove( ); + node = parent; + walker.currentNode = parent; + } while ( isInline( node ) && !getLength( node ) ); + break; + } else { + node.deleteData( index, 1 ); + } + } + } + }, + + // --- Bookmarking --- + + startSelectionId = 'squire-selection-start', + endSelectionId = 'squire-selection-end', + + createBookmarkNodes = () => [ + createElement( 'INPUT', { + id: startSelectionId, + type: 'hidden' + }), + createElement( 'INPUT', { + id: endSelectionId, + type: 'hidden' + }) + ], + + // --- Block formatting --- + + tagAfterSplit = { + DT: 'DD', + DD: 'DT', + LI: 'LI', + PRE: 'PRE' + }, + + splitBlock = ( self, block, node, offset ) => { + let splitTag = tagAfterSplit[ block.nodeName ], + nodeAfterSplit = split( node, offset, block.parentNode, self._root ), + config = self._config; + + if ( !splitTag ) { + splitTag = config.blockTag; + } + + // Make sure the new node is the correct type. + if ( !hasTagAttributes( nodeAfterSplit, splitTag, {} ) ) { + block = createElement( splitTag ); + if ( nodeAfterSplit.dir ) { + block.dir = nodeAfterSplit.dir; + } + nodeAfterSplit.replaceWith( block ); + block.append( empty( nodeAfterSplit ) ); + nodeAfterSplit = block; + } + return nodeAfterSplit; + }, + + getListSelection = ( range, root ) => { + // Get start+end li in single common ancestor + let list = range.commonAncestorContainer; + let startLi = range.startContainer; + let endLi = range.endContainer; + while ( list && list !== root && !/^[OU]L$/.test( list.nodeName ) ) { + list = list.parentNode; + } + if ( !list || list === root ) { + return null; + } + if ( startLi === list ) { + startLi = startLi.childNodes[ range.startOffset ]; + } + if ( endLi === list ) { + endLi = endLi.childNodes[ range.endOffset ]; + } + while ( startLi && startLi.parentNode !== list ) { + startLi = startLi.parentNode; + } + while ( endLi && endLi.parentNode !== list ) { + endLi = endLi.parentNode; + } + return [ list, startLi, endLi ]; + }, + + makeList = ( self, frag, type ) => { + let walker = getBlockWalker( frag, self._root ), + node, tag, prev, newLi; + + while ( node = walker.nextNode() ) { + if ( node.parentNode.nodeName === 'LI' ) { + node = node.parentNode; + walker.currentNode = node.lastChild; + } + if ( node.nodeName !== 'LI' ) { + newLi = createElement( 'LI' ); + if ( node.dir ) { + newLi.dir = node.dir; + } + + // Have we replaced the previous block with a new
- /
- ?
+ if ( ( prev = node.previousSibling ) && prev.nodeName === type ) {
+ prev.append( newLi );
+ detach( node );
+ }
+ // Otherwise, replace this block with the
- /
-
+ else {
+ node.replaceWith(
+ createElement( type, null, [
+ newLi
+ ])
+ );
+ }
+ newLi.append( empty( node ) );
+ walker.currentNode = newLi;
+ } else {
+ node = node.parentNode;
+ tag = node.nodeName;
+ if ( tag !== type && ( /^[OU]L$/.test( tag ) ) ) {
+ node.replaceWith(
+ createElement( type, null, [ empty( node ) ] )
+ );
+ }
+ }
+ }
+
+ return frag;
+ },
+
+ linkRegExp = /\b(?:((?:(?:ht|f)tps?:\/\/|www\d{0,3}[.]|[a-z0-9][a-z0-9.-]*[.][a-z]{2,}\/)(?:[^\s()<>]+|\([^\s()<>]+\))+(?:[^\s?&`!()[\]{};:'".,<>«»“”‘’]|\([^\s()<>]+\)))|([\w\-.%+]+@(?:[\w-]+\.)+[a-z]{2,}\b(?:[?][^&?\s]+=[^\s?&`!()[\]{};:'".,<>«»“”‘’]+(?:&[^&?\s]+=[^\s?&`!()[\]{};:'".,<>«»“”‘’]+)*)?))/i,
+
+ addLinks = ( frag, root ) => {
+ let walker = createTreeWalker( frag, SHOW_TEXT, node => !getClosest( node, root, 'A' ) );
+ let node, data, parent, match, index, endIndex, child;
+ while (( node = walker.nextNode() )) {
+ data = node.data;
+ parent = node.parentNode;
+ while (( match = linkRegExp.exec( data ) )) {
+ index = match.index;
+ endIndex = index + match[0].length;
+ if ( index ) {
+ child = doc.createTextNode( data.slice( 0, index ) );
+ parent.insertBefore( child, node );
+ }
+ child = createElement( 'A', mergeObjects({
+ href: match[1] ?
+ /^(?:ht|f)tps?:/i.test( match[1] ) ?
+ match[1] :
+ 'http://' + match[1] :
+ 'mailto:' + match[0]
+ }, null, false ));
+ child.textContent = data.slice( index, endIndex );
+ parent.insertBefore( child, node );
+ node.data = data = data.slice( endIndex );
+ }
+ }
+ },
+
+ escapeHTML = text => text.replace( '&', '&' )
+ .replace( '<', '<' )
+ .replace( '>', '>' )
+ .replace( '"', '"' ),
+
+ removeFormatting = ( self, root, clean ) => {
+ let node, next;
+ for ( node = root.firstChild; node; node = next ) {
+ next = node.nextSibling;
+ if ( isInline( node ) ) {
+ if ( node.nodeType === TEXT_NODE || node.nodeName === 'BR' || node.nodeName === 'IMG' ) {
+ clean.append( node );
+ continue;
+ }
+ } else if ( isBlock( node ) ) {
+ clean.append( self.createDefaultBlock([
+ removeFormatting(
+ self, node, doc.createDocumentFragment() )
+ ]));
+ continue;
+ }
+ removeFormatting( self, node, clean );
+ }
+ return clean;
+ };
let contentWalker,
nodeCategoryCache = new WeakMap();
@@ -1143,7 +1947,7 @@ TreeWalker.prototype.previousPONode = function () {
return null;
};
-let onKey = function ( event ) {
+function onKey ( event ) {
if ( event.defaultPrevented ) {
return;
}
@@ -1181,231 +1985,224 @@ let onKey = function ( event ) {
this.setSelection( range );
this._updatePath( range, true );
}
-};
+}
-let mapKeyTo = method => ( self, event ) => {
- event.preventDefault();
- self[ method ]();
-};
+function onCut ( event ) {
+ let range = this.getSelection();
+ let root = this._root;
+ let self = this;
+ let startBlock, endBlock, copyRoot, contents, parent, newContents;
-let mapKeyToFormat = ( tag, remove ) => {
- remove = remove || null;
- return ( self, event ) => {
+ // Nothing to do
+ if ( range.collapsed ) {
event.preventDefault();
- let range = self.getSelection();
- if ( self.hasFormat( tag, null, range ) ) {
- self.changeFormat( null, { tag: tag }, range );
- } else {
- self.changeFormat( { tag: tag }, remove, range );
- }
- };
-};
+ return;
+ }
-// If you delete the content inside a span with a font styling, Webkit will
-// replace it with a tag (!). If you delete all the text inside a
-// link in Opera, it won't delete the link. Let's make things consistent. If
-// you delete all text inside an inline tag, remove the inline tag.
-let afterDelete = ( self, range ) => {
- try {
- if ( !range ) { range = self.getSelection(); }
- let node = range.startContainer,
- parent;
- // Climb the tree from the focus point while we are inside an empty
- // inline element
- if ( node.nodeType === TEXT_NODE ) {
- node = node.parentNode;
+ // Save undo checkpoint
+ this.saveUndoState( range );
+
+ // Edge only seems to support setting plain text as of 2016-03-11.
+ if ( !isEdge && event.clipboardData ) {
+ // Clipboard content should include all parents within block, or all
+ // parents up to root if selection across blocks
+ startBlock = getStartBlockOfRange( range, root );
+ endBlock = getEndBlockOfRange( range, root );
+ copyRoot = ( ( startBlock === endBlock ) && startBlock ) || root;
+ // Extract the contents
+ contents = deleteContentsOfRange( range, root );
+ // Add any other parents not in extracted content, up to copy root
+ parent = range.commonAncestorContainer;
+ if ( parent.nodeType === TEXT_NODE ) {
+ parent = parent.parentNode;
}
- parent = node;
- while ( isInline( parent ) &&
- ( !parent.textContent || parent.textContent === ZWS ) ) {
- node = parent;
- parent = node.parentNode;
+ while ( parent && parent !== copyRoot ) {
+ newContents = parent.cloneNode( false );
+ newContents.append( contents );
+ contents = newContents;
+ parent = parent.parentNode;
}
- // If focused in empty inline element
- if ( node !== parent ) {
- // Move focus to just before empty inline(s)
- range.setStart( parent,
- indexOf( parent.childNodes, node ) );
- range.collapse( true );
- // Remove empty inline(s)
- node.remove( );
- // Fix cursor in block
- if ( !isBlock( parent ) ) {
- parent = getPreviousBlock( parent, self._root );
+ // Set clipboard data
+ setClipboardData( event, contents, root );
+ } else {
+ setTimeout( () => {
+ try {
+ // If all content removed, ensure div at start of root.
+ self._ensureBottomLine();
+ } catch ( error ) {
+ didError( error );
}
- fixCursor( parent, self._root );
- // Move cursor into text node
- moveRangeBoundariesDownTree( range );
- }
- // If you delete the last character in the sole
in Chrome,
- // it removes the div and replaces it with just a
inside the - // root. Detach the
; the _ensureBottomLine call will insert a new - // block. - if ( node === self._root && - ( node = node.firstChild ) && node.nodeName === 'BR' ) { - detach( node ); - } - self._ensureBottomLine(); - self.setSelection( range ); - self._updatePath( range, true ); - } catch ( error ) { - self.didError( error ); - } -}; - -let detachUneditableNode = ( node, root ) => { - let parent; - while (( parent = node.parentNode )) { - if ( parent === root || parent.isContentEditable ) { - break; - } - node = parent; - } - detach( node ); -}; - -let handleEnter = ( self, shiftKey, range ) => { - let root = self._root; - let block, parent, node, offset, nodeAfterSplit; - - // Save undo checkpoint and add any links in the preceding section. - // Remove any zws so we don't think there's content in an empty - // block. - self._recordUndoState( range ); - if ( self._config.addLinks ) { - addLinks( range.startContainer, root, self ); - } - self._removeZWS(); - self._getRangeAndRemoveBookmark( range ); - - // Selected text is overwritten, therefore delete the contents - // to collapse selection. - if ( !range.collapsed ) { - deleteContentsOfRange( range, root ); + }, 0 ); } - block = getStartBlockOfRange( range, root ); + this.setSelection( range ); +} - // Inside a PRE, insert literal newline, unless on blank line. - if ( block && ( parent = getClosest( block, root, 'PRE' ) ) ) { +function onCopy ( event ) { + // Edge only seems to support setting plain text as of 2016-03-11. + if ( !isEdge && event.clipboardData ) { + let range = this.getSelection(), root = this._root, + // Clipboard content should include all parents within block, or all + // parents up to root if selection across blocks + startBlock = getStartBlockOfRange( range, root ), + endBlock = getEndBlockOfRange( range, root ), + copyRoot = ( ( startBlock === endBlock ) && startBlock ) || root, + contents, parent, newContents; + // Clone range to mutate, then move up as high as possible without + // passing the copy root node. + range = range.cloneRange(); moveRangeBoundariesDownTree( range ); - node = range.startContainer; - offset = range.startOffset; - if ( node.nodeType !== TEXT_NODE ) { - node = doc.createTextNode( '' ); - parent.insertBefore( node, parent.firstChild ); + moveRangeBoundariesUpTree( range, copyRoot, copyRoot, root ); + // Extract the contents + contents = range.cloneContents(); + // Add any other parents not in extracted content, up to copy root + parent = range.commonAncestorContainer; + if ( parent.nodeType === TEXT_NODE ) { + parent = parent.parentNode; } - // If blank line: split and insert default block - if ( !shiftKey && - ( node.data.charAt( offset - 1 ) === '\n' || - rangeDoesStartAtBlockBoundary( range, root ) ) && - ( node.data.charAt( offset ) === '\n' || - rangeDoesEndAtBlockBoundary( range, root ) ) ) { - node.deleteData( offset && offset - 1, offset ? 2 : 1 ); - nodeAfterSplit = - split( node, offset && offset - 1, root, root ); - node = nodeAfterSplit.previousSibling; - if ( !node.textContent ) { - detach( node ); - } - node = self.createDefaultBlock(); - nodeAfterSplit.before( node ); - if ( !nodeAfterSplit.textContent ) { - detach( nodeAfterSplit ); - } - range.setStart( node, 0 ); - } else { - node.insertData( offset, '\n' ); - fixCursor( parent, root ); - // Firefox bug: if you set the selection in the text node after - // the new line, it draws the cursor before the line break still - // but if you set the selection to the equivalent position - // in the parent, it works. - if ( node.length === offset + 1 ) { - range.setStartAfter( node ); - } else { - range.setStart( node, offset + 1 ); + while ( parent && parent !== copyRoot ) { + newContents = parent.cloneNode( false ); + newContents.append( contents ); + contents = newContents; + parent = parent.parentNode; + } + // Set clipboard data + setClipboardData( event, contents, root ); + } +} + +// Need to monitor for shift key like this, as event.shiftKey is not available +// in paste event. +function monitorShiftKey ( event ) { + this.isShiftDown = event.shiftKey; +} + +function onPaste ( event ) { + let clipboardData = event.clipboardData; + let items = clipboardData && clipboardData.items; + let choosePlain = this.isShiftDown; + let fireDrop = false; + let hasRTF = false; + let hasImage = false; + let plainItem = null; + let htmlItem = null; + let self = this; + let l, item, type, types, data; + + // Current HTML5 Clipboard interface + // --------------------------------- + // https://html.spec.whatwg.org/multipage/interaction.html + if ( items ) { + l = items.length; + while ( l-- ) { + item = items[l]; + type = item.type; + if ( type === 'text/html' ) { + htmlItem = item; + // iOS copy URL gives you type text/uri-list which is just a list + // of 1 or more URLs separated by new lines. Can just treat as + // plain text. + } else if ( type === 'text/plain' || type === 'text/uri-list' ) { + plainItem = item; + } else if ( type === 'text/rtf' ) { + hasRTF = true; + } else if ( /^image\/.*/.test( type ) ) { + hasImage = true; } } - range.collapse( true ); - self.setSelection( range ); - self._updatePath( range, true ); - self._docWasChanged(); + + // Treat image paste as a drop of an image file. When you copy + // an image in Chrome/Firefox (at least), it copies the image data + // but also an HTML version (referencing the original URL of the image) + // and a plain text version. + // + // However, when you copy in Excel, you get html, rtf, text, image; + // in this instance you want the html version! So let's try using + // the presence of text/rtf as an indicator to choose the html version + // over the image. + if ( hasImage && !( hasRTF && htmlItem ) ) { + event.preventDefault(); + this.fireEvent( 'dragover', { + dataTransfer: clipboardData, + /*jshint loopfunc: true */ + preventDefault: () => fireDrop = true + /*jshint loopfunc: false */ + }); + if ( fireDrop ) { + this.fireEvent( 'drop', { + dataTransfer: clipboardData + }); + } + return; + } + + // Edge only provides access to plain text as of 2016-03-11 and gives no + // indication there should be an HTML part. However, it does support + // access to image data, so we check for that first. Otherwise though, + // fall through to fallback clipboard handling methods + if ( !isEdge ) { + event.preventDefault(); + if ( htmlItem && ( !choosePlain || !plainItem ) ) { + htmlItem.getAsString( html => self.insertHTML( html, true ) ); + } else if ( plainItem ) { + plainItem.getAsString( text => self.insertPlainText( text, true ) ); + } + return; + } + } + + // Safari (and indeed many other OS X apps) copies stuff as text/rtf + // rather than text/html; even from a webpage in Safari. The only way + // to get an HTML version is to fallback to letting the browser insert + // the content. Same for getting image data. *Sigh*. + types = clipboardData && clipboardData.types; + if ( !isEdge && types && ( + indexOf( types, 'text/html' ) > -1 || ( + !isGecko && + indexOf( types, 'text/plain' ) > -1 && + indexOf( types, 'text/rtf' ) < 0 ) + )) { + event.preventDefault(); + // Abiword on Linux copies a plain text and html version, but the HTML + // version is the empty string! So always try to get HTML, but if none, + // insert plain text instead. On iOS, Facebook (and possibly other + // apps?) copy links as type text/uri-list, but also insert a **blank** + // text/plain item onto the clipboard. Why? Who knows. + if ( !choosePlain && ( data = clipboardData.getData( 'text/html' ) ) ) { + this.insertHTML( data, true ); + } else if ( + ( data = clipboardData.getData( 'text/plain' ) ) || + ( data = clipboardData.getData( 'text/uri-list' ) ) ) { + this.insertPlainText( data, true ); + } return; } +} - // If this is a malformed bit of document or in a table; - // just play it safe and insert a
. - if ( !block || shiftKey || /^T[HD]$/.test( block.nodeName ) ) { - // If inside an , move focus out - moveRangeBoundaryOutOf( range, 'A', root ); - insertNodeInRange( range, createElement( 'BR' ) ); - range.collapse( false ); - self.setSelection( range ); - self._updatePath( range, true ); - return; - } - - // If in a list, we'll split the LI instead. - block = getClosest( block, root, 'LI' ) || block; - - if ( isEmptyBlock( block ) && ( parent = getClosest( block, root, 'UL,OL,BLOCKQUOTE' ) ) ) { - return 'BLOCKQUOTE' === parent.nodeName - // Break blockquote - ? self.modifyBlocks( (/* frag */) => self.createDefaultBlock( createBookmarkNodes( self ) ), range ) - // Break list - : self.decreaseListLevel( range ); - } - - // Otherwise, split at cursor point. - nodeAfterSplit = splitBlock( self, block, - range.startContainer, range.startOffset ); - - // Clean up any empty inlines if we hit enter at the beginning of the block - removeZWS( block ); - removeEmptyInlines( block ); - fixCursor( block, root ); - - // Focus cursor - // If there's a / etc. at the beginning of the split - // make sure we focus inside it. - while ( nodeAfterSplit.nodeType === ELEMENT_NODE ) { - let child = nodeAfterSplit.firstChild, - next; - - // Don't continue links over a block break; unlikely to be the - // desired outcome. - if ( nodeAfterSplit.nodeName === 'A' && - ( !nodeAfterSplit.textContent || - nodeAfterSplit.textContent === ZWS ) ) { - child = doc.createTextNode( '' ); - nodeAfterSplit.replaceWith( child ); - nodeAfterSplit = child; +// On Windows you can drag an drop text. We can't handle this ourselves, because +// as far as I can see, there's no way to get the drop insertion point. So just +// save an undo state and hope for the best. +function onDrop ( event ) { + let types = event.dataTransfer.types; + let l = types.length; + let hasPlain = false; + let hasHTML = false; + while ( l-- ) { + switch ( types[l] ) { + case 'text/plain': + hasPlain = true; break; - } - - while ( child && child.nodeType === TEXT_NODE && !child.data ) { - next = child.nextSibling; - if ( !next || next.nodeName === 'BR' ) { - break; - } - detach( child ); - child = next; - } - - // 'BR's essentially don't count; they're a browser hack. - // If you try to select the contents of a 'BR', FF will not let - // you type anything! - if ( !child || child.nodeName === 'BR' || - child.nodeType === TEXT_NODE ) { + case 'text/html': + hasHTML = true; break; + default: + return; } - nodeAfterSplit = child; } - range = self.createRange( nodeAfterSplit, 0 ); - self.setSelection( range ); - self._updatePath( range, true ); -}; + if ( hasHTML || hasPlain ) { + this.saveUndoState(); + } +} let keyHandlers = { // This song and dance is to force iOS to do enable the shift key @@ -1486,7 +2283,7 @@ let keyHandlers = { if (parent) { return ( 'BLOCKQUOTE' === parent.nodeName ) // Break blockquote - ? self.modifyBlocks( decreaseBlockQuoteLevel, range ) + ? self.decreaseQuoteLevel( range ) // Break list : self.decreaseListLevel( range ); } @@ -1646,7 +2443,7 @@ let keyHandlers = { // implement this natively. Override to support it. function _moveCursorTo( self, toStart ) { let root = self._root, - range = self.createRange( root, toStart ? 0 : root.childNodes.length ); + range = createRange( root, toStart ? 0 : root.childNodes.length ); moveRangeBoundariesDownTree( range ); self.setSelection( range ); return self; @@ -1656,27 +2453,12 @@ if ( !isMac ) { keyHandlers.pagedown = self => _moveCursorTo( self, false ); } -const changeIndentationLevel = direction => ( self, event ) => { - event.preventDefault(); - self.changeIndentationLevel(direction); -}; - -const toggleList = ( type, methodIfNotInList ) => ( self, event ) => { - event.preventDefault(); - let parent = self.getSelectionClosest('UL,OL'); - if (parent && type == parent.nodeName) { - self.removeList(); - } else { - self[ methodIfNotInList ](); - } -}; - keyHandlers[ ctrlKey + 'b' ] = mapKeyToFormat( 'B' ); keyHandlers[ ctrlKey + 'i' ] = mapKeyToFormat( 'I' ); keyHandlers[ ctrlKey + 'u' ] = mapKeyToFormat( 'U' ); keyHandlers[ ctrlKey + 'shift-7' ] = mapKeyToFormat( 'S' ); -keyHandlers[ ctrlKey + 'shift-5' ] = mapKeyToFormat( 'SUB', { tag: 'SUP' } ); -keyHandlers[ ctrlKey + 'shift-6' ] = mapKeyToFormat( 'SUP', { tag: 'SUB' } ); +keyHandlers[ ctrlKey + 'shift-5' ] = mapKeyToFormat( 'SUB', 'SUP' ); +keyHandlers[ ctrlKey + 'shift-6' ] = mapKeyToFormat( 'SUP', 'SUB' ); keyHandlers[ ctrlKey + 'shift-8' ] = toggleList( 'UL', 'makeUnorderedList' ); keyHandlers[ ctrlKey + 'shift-9' ] = toggleList( 'OL', 'makeOrderedList' ); keyHandlers[ ctrlKey + '[' ] = changeIndentationLevel( 'decrease' ); @@ -1688,2260 +2470,1359 @@ keyHandlers[ ctrlKey + 'z' ] = mapKeyTo( 'undo' ); keyHandlers[ 'undo' ] = mapKeyTo( 'undo' ); keyHandlers[ ctrlKey + 'shift-z' ] = mapKeyTo( 'redo' ); -let fontSizes = { - 1: 10, - 2: 13, - 3: 16, - 4: 18, - 5: 24, - 6: 32, - 7: 48 -}; +class Squire +{ + constructor (root, config) { + this._root = root; -let styleToSemantic = { - fontWeight: { - regexp: /^bold|^700/i, - replace: () => createElement( 'B' ) - }, - fontStyle: { - regexp: /^italic/i, - replace: () => createElement( 'I' ) - }, - fontFamily: { - regexp: notWS, - replace: ( doc, classNames, family ) => createElement( 'SPAN', { - 'class': classNames.fontFamily, - style: 'font-family:' + family - }) - }, - fontSize: { - regexp: notWS, - replace: ( doc, classNames, size ) => createElement( 'SPAN', { - 'class': classNames.fontSize, - style: 'font-size:' + size - }) - }, - textDecoration: { - regexp: /^underline/i, - replace: () => createElement( 'U' ) - } -/* - textDecoration: { - regexp: /^line-through/i, - replace: doc => createElement( 'S' ) - } -*/ -}; + this._events = {}; -let replaceWithTag = tag => node => { - let el = createElement( tag ); - Array.prototype.forEach.call( node.attributes, attr => el.setAttribute( attr.name, attr.value ) ); - node.replaceWith( el ); - el.append( empty( node ) ); - return el; -}; + this._isFocused = false; + this._lastRange = null; -let replaceStyles = ( node, parent, config ) => { - let style = node.style; - let attr, converter, css, newTreeBottom, newTreeTop, el; + this._hasZWS = false; - for ( attr in styleToSemantic ) { - converter = styleToSemantic[ attr ]; - css = style[ attr ]; - if ( css && converter.regexp.test( css ) ) { - el = converter.replace( doc, config.classNames, css ); - if ( el.nodeName === node.nodeName && - el.className === node.className ) { - continue; - } - if ( !newTreeTop ) { - newTreeTop = el; - } - if ( newTreeBottom ) { - newTreeBottom.append( el ); - } - newTreeBottom = el; - node.style[ attr ] = ''; - } - } + this._lastAnchorNode = null; + this._lastFocusNode = null; + this._path = ''; - if ( newTreeTop ) { - newTreeBottom.append( empty( node ) ); - node.append( newTreeTop ); - } - - return newTreeBottom || node; -}; - -let stylesRewriters = { - SPAN: replaceStyles, - STRONG: replaceWithTag( 'B' ), - EM: replaceWithTag( 'I' ), - INS: replaceWithTag( 'U' ), - STRIKE: replaceWithTag( 'S' ), - FONT: ( node, parent, config ) => { - let face = node.face; - let size = node.size; - let colour = node.color; - let classNames = config.classNames; - let fontSpan, sizeSpan, colourSpan; - let newTreeBottom, newTreeTop; - if ( face ) { - fontSpan = createElement( 'SPAN', { - 'class': classNames.fontFamily, - style: 'font-family:' + face - }); - newTreeTop = fontSpan; - newTreeBottom = fontSpan; - } - if ( size ) { - sizeSpan = createElement( 'SPAN', { - 'class': classNames.fontSize, - style: 'font-size:' + fontSizes[ size ] + 'px' - }); - if ( !newTreeTop ) { - newTreeTop = sizeSpan; - } - if ( newTreeBottom ) { - newTreeBottom.append( sizeSpan ); - } - newTreeBottom = sizeSpan; - } - if ( colour && /^#?([\dA-F]{3}){1,2}$/i.test( colour ) ) { - if ( colour.charAt( 0 ) !== '#' ) { - colour = '#' + colour; - } - colourSpan = createElement( 'SPAN', { - 'class': classNames.colour, - style: 'color:' + colour - }); - if ( !newTreeTop ) { - newTreeTop = colourSpan; - } - if ( newTreeBottom ) { - newTreeBottom.append( colourSpan ); - } - newTreeBottom = colourSpan; - } - if ( !newTreeTop ) { - newTreeTop = newTreeBottom = createElement( 'SPAN' ); - } - node.replaceWith( newTreeTop ); - newTreeBottom.append( empty( node ) ); - return newTreeBottom; - }, -// KBD: -// VAR: -// CODE: -// SAMP: - TT: ( node, parent, config ) => { - let el = createElement( 'SPAN', { - 'class': config.classNames.fontFamily, - style: 'font-family:menlo,consolas,"courier new",monospace' - }); - node.replaceWith( el ); - el.append( empty( node ) ); - return el; - } -}; - -let allowedBlock = /^(?:A(?:DDRESS|RTICLE|SIDE|UDIO)|BLOCKQUOTE|CAPTION|D(?:[DLT]|IV)|F(?:IGURE|IGCAPTION|OOTER)|H[1-6]|HEADER|L(?:ABEL|EGEND|I)|O(?:L|UTPUT)|P(?:RE)?|SECTION|T(?:ABLE|BODY|D|FOOT|H|HEAD|R)|COL(?:GROUP)?|UL)$/; - -let blacklist = /^(?:HEAD|META|STYLE)/; - -/* - Two purposes: - - 1. Remove nodes we don't want, such as weird tags, comment nodes
- and whitespace nodes.
- 2. Convert inline tags into our preferred format.
-*/
-let cleanTree = ( node, config, preserveWS ) => {
- let children = node.childNodes,
- nonInlineParent, i, l, child, nodeName, nodeType, rewriter, childLength,
- startsWithWS, endsWithWS, data, sibling;
-
- nonInlineParent = node;
- while ( isInline( nonInlineParent ) ) {
- nonInlineParent = nonInlineParent.parentNode;
- }
- let walker = createTreeWalker( nonInlineParent, SHOW_TEXT|SHOW_ELEMENT );
-
- for ( i = 0, l = children.length; i < l; ++i ) {
- child = children[i];
- nodeName = child.nodeName;
- nodeType = child.nodeType;
- if ( nodeType === ELEMENT_NODE ) {
- rewriter = stylesRewriters[ nodeName ];
- childLength = child.childNodes.length;
- if ( rewriter ) {
- child = rewriter( child, node, config );
- } else if ( blacklist.test( nodeName ) ) {
- child.remove( );
- --i;
- --l;
- continue;
- } else if ( !allowedBlock.test( nodeName ) && !isInline( child ) ) {
- --i;
- l += childLength - 1;
- child.replaceWith( empty( child ) );
- continue;
- }
- if ( childLength ) {
- cleanTree( child, config,
- preserveWS || ( nodeName === 'PRE' ) );
- }
- } else {
- if ( nodeType === TEXT_NODE ) {
- data = child.data;
- startsWithWS = !notWS.test( data.charAt( 0 ) );
- endsWithWS = !notWS.test( data.charAt( data.length - 1 ) );
- if ( preserveWS || ( !startsWithWS && !endsWithWS ) ) {
- continue;
- }
- // Iterate through the nodes; if we hit some other content
- // before the start of a new block we don't trim
- if ( startsWithWS ) {
- walker.currentNode = child;
- while ( sibling = walker.previousPONode() ) {
- nodeName = sibling.nodeName;
- if ( nodeName === 'IMG' ||
- ( nodeName === '#text' &&
- notWS.test( sibling.data ) ) ) {
- break;
- }
- if ( !isInline( sibling ) ) {
- sibling = null;
- break;
- }
- }
- data = data.replace( /^[ \t\r\n]+/g, sibling ? ' ' : '' );
- }
- if ( endsWithWS ) {
- walker.currentNode = child;
- while ( sibling = walker.nextNode() ) {
- if ( nodeName === 'IMG' ||
- ( nodeName === '#text' &&
- notWS.test( sibling.data ) ) ) {
- break;
- }
- if ( !isInline( sibling ) ) {
- sibling = null;
- break;
- }
- }
- data = data.replace( /[ \t\r\n]+$/g, sibling ? ' ' : '' );
- }
- if ( data ) {
- child.data = data;
- continue;
+ let _willUpdatePath;
+ const selectionchange = () => {
+ if (root.contains(doc.activeElement)) {
+ if ( this._isFocused && !_willUpdatePath ) {
+ _willUpdatePath = setTimeout( () => {
+ _willUpdatePath = 0;
+ this._updatePath( this.getSelection() );
+ }, 0 );
}
+ } else {
+ this.removeEventListener('selectionchange', selectionchange);
}
- child.remove( );
- --i;
- --l;
- }
- }
- return node;
-};
+ };
+ this.addEventListener('selectstart', () => this.addEventListener('selectionchange', selectionchange));
-// ---
+ this._undoIndex = -1;
+ this._undoStack = [];
+ this._undoStackLength = 0;
+ this._isInUndoState = false;
+ this._ignoreChange = false;
+ this._ignoreAllChanges = false;
-let removeEmptyInlines = node => {
- let children = node.childNodes,
- l = children.length,
- child;
- while ( l-- ) {
- child = children[l];
- if ( child.nodeType === ELEMENT_NODE && !isLeaf( child ) ) {
- removeEmptyInlines( child );
- if ( isInline( child ) && !child.firstChild ) {
- child.remove( );
- }
- } else if ( child.nodeType === TEXT_NODE && !child.data ) {
- child.remove( );
- }
- }
-};
-
-// ---
-
-let notWSTextNode = node => node.nodeType === ELEMENT_NODE ? node.nodeName === 'BR' : notWS.test( node.data );
-let isLineBreak = ( br, isLBIfEmptyBlock ) => {
- let block = br.parentNode;
- let walker;
- while ( isInline( block ) ) {
- block = block.parentNode;
- }
- walker = createTreeWalker( block, SHOW_ELEMENT|SHOW_TEXT, notWSTextNode );
- walker.currentNode = br;
- return !!walker.nextNode() ||
- ( isLBIfEmptyBlock && !walker.previousNode() );
-};
-
-//
elements are treated specially, and differently depending on the -// browser, when in rich text editor mode. When adding HTML from external -// sources, we must remove them, replacing the ones that actually affect -// line breaks by wrapping the inline text in a
inside the - // root. Detach the
; the _ensureBottomLine call will insert a new - // block. - if ( node === self._root && - ( node = node.firstChild ) && node.nodeName === 'BR' ) { - detach( node ); - } - self._ensureBottomLine(); - self.setSelection( range ); - self._updatePath( range, true ); - } catch ( error ) { - self.didError( error ); - } -}; - -let detachUneditableNode = ( node, root ) => { - let parent; - while (( parent = node.parentNode )) { - if ( parent === root || parent.isContentEditable ) { - break; - } - node = parent; - } - detach( node ); -}; - -let handleEnter = ( self, shiftKey, range ) => { - let root = self._root; - let block, parent, node, offset, nodeAfterSplit; - - // Save undo checkpoint and add any links in the preceding section. - // Remove any zws so we don't think there's content in an empty - // block. - self._recordUndoState( range ); - if ( self._config.addLinks ) { - addLinks( range.startContainer, root, self ); - } - self._removeZWS(); - self._getRangeAndRemoveBookmark( range ); - - // Selected text is overwritten, therefore delete the contents - // to collapse selection. - if ( !range.collapsed ) { - deleteContentsOfRange( range, root ); + }, 0 ); } - block = getStartBlockOfRange( range, root ); + this.setSelection( range ); +} - // Inside a PRE, insert literal newline, unless on blank line. - if ( block && ( parent = getClosest( block, root, 'PRE' ) ) ) { +function onCopy ( event ) { + // Edge only seems to support setting plain text as of 2016-03-11. + if ( !isEdge && event.clipboardData ) { + let range = this.getSelection(), root = this._root, + // Clipboard content should include all parents within block, or all + // parents up to root if selection across blocks + startBlock = getStartBlockOfRange( range, root ), + endBlock = getEndBlockOfRange( range, root ), + copyRoot = ( ( startBlock === endBlock ) && startBlock ) || root, + contents, parent, newContents; + // Clone range to mutate, then move up as high as possible without + // passing the copy root node. + range = range.cloneRange(); moveRangeBoundariesDownTree( range ); - node = range.startContainer; - offset = range.startOffset; - if ( node.nodeType !== TEXT_NODE ) { - node = doc.createTextNode( '' ); - parent.insertBefore( node, parent.firstChild ); + moveRangeBoundariesUpTree( range, copyRoot, copyRoot, root ); + // Extract the contents + contents = range.cloneContents(); + // Add any other parents not in extracted content, up to copy root + parent = range.commonAncestorContainer; + if ( parent.nodeType === TEXT_NODE ) { + parent = parent.parentNode; } - // If blank line: split and insert default block - if ( !shiftKey && - ( node.data.charAt( offset - 1 ) === '\n' || - rangeDoesStartAtBlockBoundary( range, root ) ) && - ( node.data.charAt( offset ) === '\n' || - rangeDoesEndAtBlockBoundary( range, root ) ) ) { - node.deleteData( offset && offset - 1, offset ? 2 : 1 ); - nodeAfterSplit = - split( node, offset && offset - 1, root, root ); - node = nodeAfterSplit.previousSibling; - if ( !node.textContent ) { - detach( node ); - } - node = self.createDefaultBlock(); - nodeAfterSplit.before( node ); - if ( !nodeAfterSplit.textContent ) { - detach( nodeAfterSplit ); - } - range.setStart( node, 0 ); - } else { - node.insertData( offset, '\n' ); - fixCursor( parent, root ); - // Firefox bug: if you set the selection in the text node after - // the new line, it draws the cursor before the line break still - // but if you set the selection to the equivalent position - // in the parent, it works. - if ( node.length === offset + 1 ) { - range.setStartAfter( node ); - } else { - range.setStart( node, offset + 1 ); + while ( parent && parent !== copyRoot ) { + newContents = parent.cloneNode( false ); + newContents.append( contents ); + contents = newContents; + parent = parent.parentNode; + } + // Set clipboard data + setClipboardData( event, contents, root ); + } +} + +// Need to monitor for shift key like this, as event.shiftKey is not available +// in paste event. +function monitorShiftKey ( event ) { + this.isShiftDown = event.shiftKey; +} + +function onPaste ( event ) { + let clipboardData = event.clipboardData; + let items = clipboardData && clipboardData.items; + let choosePlain = this.isShiftDown; + let fireDrop = false; + let hasRTF = false; + let hasImage = false; + let plainItem = null; + let htmlItem = null; + let self = this; + let l, item, type, types, data; + + // Current HTML5 Clipboard interface + // --------------------------------- + // https://html.spec.whatwg.org/multipage/interaction.html + if ( items ) { + l = items.length; + while ( l-- ) { + item = items[l]; + type = item.type; + if ( type === 'text/html' ) { + htmlItem = item; + // iOS copy URL gives you type text/uri-list which is just a list + // of 1 or more URLs separated by new lines. Can just treat as + // plain text. + } else if ( type === 'text/plain' || type === 'text/uri-list' ) { + plainItem = item; + } else if ( type === 'text/rtf' ) { + hasRTF = true; + } else if ( /^image\/.*/.test( type ) ) { + hasImage = true; } } - range.collapse( true ); - self.setSelection( range ); - self._updatePath( range, true ); - self._docWasChanged(); + + // Treat image paste as a drop of an image file. When you copy + // an image in Chrome/Firefox (at least), it copies the image data + // but also an HTML version (referencing the original URL of the image) + // and a plain text version. + // + // However, when you copy in Excel, you get html, rtf, text, image; + // in this instance you want the html version! So let's try using + // the presence of text/rtf as an indicator to choose the html version + // over the image. + if ( hasImage && !( hasRTF && htmlItem ) ) { + event.preventDefault(); + this.fireEvent( 'dragover', { + dataTransfer: clipboardData, + /*jshint loopfunc: true */ + preventDefault: () => fireDrop = true + /*jshint loopfunc: false */ + }); + if ( fireDrop ) { + this.fireEvent( 'drop', { + dataTransfer: clipboardData + }); + } + return; + } + + // Edge only provides access to plain text as of 2016-03-11 and gives no + // indication there should be an HTML part. However, it does support + // access to image data, so we check for that first. Otherwise though, + // fall through to fallback clipboard handling methods + if ( !isEdge ) { + event.preventDefault(); + if ( htmlItem && ( !choosePlain || !plainItem ) ) { + htmlItem.getAsString( html => self.insertHTML( html, true ) ); + } else if ( plainItem ) { + plainItem.getAsString( text => self.insertPlainText( text, true ) ); + } + return; + } + } + + // Safari (and indeed many other OS X apps) copies stuff as text/rtf + // rather than text/html; even from a webpage in Safari. The only way + // to get an HTML version is to fallback to letting the browser insert + // the content. Same for getting image data. *Sigh*. + types = clipboardData && clipboardData.types; + if ( !isEdge && types && ( + indexOf( types, 'text/html' ) > -1 || ( + !isGecko && + indexOf( types, 'text/plain' ) > -1 && + indexOf( types, 'text/rtf' ) < 0 ) + )) { + event.preventDefault(); + // Abiword on Linux copies a plain text and html version, but the HTML + // version is the empty string! So always try to get HTML, but if none, + // insert plain text instead. On iOS, Facebook (and possibly other + // apps?) copy links as type text/uri-list, but also insert a **blank** + // text/plain item onto the clipboard. Why? Who knows. + if ( !choosePlain && ( data = clipboardData.getData( 'text/html' ) ) ) { + this.insertHTML( data, true ); + } else if ( + ( data = clipboardData.getData( 'text/plain' ) ) || + ( data = clipboardData.getData( 'text/uri-list' ) ) ) { + this.insertPlainText( data, true ); + } return; } +} - // If this is a malformed bit of document or in a table; - // just play it safe and insert a
. - if ( !block || shiftKey || /^T[HD]$/.test( block.nodeName ) ) { - // If inside an , move focus out - moveRangeBoundaryOutOf( range, 'A', root ); - insertNodeInRange( range, createElement( 'BR' ) ); - range.collapse( false ); - self.setSelection( range ); - self._updatePath( range, true ); - return; - } - - // If in a list, we'll split the LI instead. - block = getClosest( block, root, 'LI' ) || block; - - if ( isEmptyBlock( block ) && ( parent = getClosest( block, root, 'UL,OL,BLOCKQUOTE' ) ) ) { - return 'BLOCKQUOTE' === parent.nodeName - // Break blockquote - ? self.modifyBlocks( (/* frag */) => self.createDefaultBlock( createBookmarkNodes( self ) ), range ) - // Break list - : self.decreaseListLevel( range ); - } - - // Otherwise, split at cursor point. - nodeAfterSplit = splitBlock( self, block, - range.startContainer, range.startOffset ); - - // Clean up any empty inlines if we hit enter at the beginning of the block - removeZWS( block ); - removeEmptyInlines( block ); - fixCursor( block, root ); - - // Focus cursor - // If there's a / etc. at the beginning of the split - // make sure we focus inside it. - while ( nodeAfterSplit.nodeType === ELEMENT_NODE ) { - let child = nodeAfterSplit.firstChild, - next; - - // Don't continue links over a block break; unlikely to be the - // desired outcome. - if ( nodeAfterSplit.nodeName === 'A' && - ( !nodeAfterSplit.textContent || - nodeAfterSplit.textContent === ZWS ) ) { - child = doc.createTextNode( '' ); - nodeAfterSplit.replaceWith( child ); - nodeAfterSplit = child; +// On Windows you can drag an drop text. We can't handle this ourselves, because +// as far as I can see, there's no way to get the drop insertion point. So just +// save an undo state and hope for the best. +function onDrop ( event ) { + let types = event.dataTransfer.types; + let l = types.length; + let hasPlain = false; + let hasHTML = false; + while ( l-- ) { + switch ( types[l] ) { + case 'text/plain': + hasPlain = true; break; - } - - while ( child && child.nodeType === TEXT_NODE && !child.data ) { - next = child.nextSibling; - if ( !next || next.nodeName === 'BR' ) { - break; - } - detach( child ); - child = next; - } - - // 'BR's essentially don't count; they're a browser hack. - // If you try to select the contents of a 'BR', FF will not let - // you type anything! - if ( !child || child.nodeName === 'BR' || - child.nodeType === TEXT_NODE ) { + case 'text/html': + hasHTML = true; break; + default: + return; } - nodeAfterSplit = child; } - range = self.createRange( nodeAfterSplit, 0 ); - self.setSelection( range ); - self._updatePath( range, true ); -}; + if ( hasHTML || hasPlain ) { + this.saveUndoState(); + } +} let keyHandlers = { // This song and dance is to force iOS to do enable the shift key @@ -1486,7 +2283,7 @@ let keyHandlers = { if (parent) { return ( 'BLOCKQUOTE' === parent.nodeName ) // Break blockquote - ? self.modifyBlocks( decreaseBlockQuoteLevel, range ) + ? self.decreaseQuoteLevel( range ) // Break list : self.decreaseListLevel( range ); } @@ -1646,7 +2443,7 @@ let keyHandlers = { // implement this natively. Override to support it. function _moveCursorTo( self, toStart ) { let root = self._root, - range = self.createRange( root, toStart ? 0 : root.childNodes.length ); + range = createRange( root, toStart ? 0 : root.childNodes.length ); moveRangeBoundariesDownTree( range ); self.setSelection( range ); return self; @@ -1656,27 +2453,12 @@ if ( !isMac ) { keyHandlers.pagedown = self => _moveCursorTo( self, false ); } -const changeIndentationLevel = direction => ( self, event ) => { - event.preventDefault(); - self.changeIndentationLevel(direction); -}; - -const toggleList = ( type, methodIfNotInList ) => ( self, event ) => { - event.preventDefault(); - let parent = self.getSelectionClosest('UL,OL'); - if (parent && type == parent.nodeName) { - self.removeList(); - } else { - self[ methodIfNotInList ](); - } -}; - keyHandlers[ ctrlKey + 'b' ] = mapKeyToFormat( 'B' ); keyHandlers[ ctrlKey + 'i' ] = mapKeyToFormat( 'I' ); keyHandlers[ ctrlKey + 'u' ] = mapKeyToFormat( 'U' ); keyHandlers[ ctrlKey + 'shift-7' ] = mapKeyToFormat( 'S' ); -keyHandlers[ ctrlKey + 'shift-5' ] = mapKeyToFormat( 'SUB', { tag: 'SUP' } ); -keyHandlers[ ctrlKey + 'shift-6' ] = mapKeyToFormat( 'SUP', { tag: 'SUB' } ); +keyHandlers[ ctrlKey + 'shift-5' ] = mapKeyToFormat( 'SUB', 'SUP' ); +keyHandlers[ ctrlKey + 'shift-6' ] = mapKeyToFormat( 'SUP', 'SUB' ); keyHandlers[ ctrlKey + 'shift-8' ] = toggleList( 'UL', 'makeUnorderedList' ); keyHandlers[ ctrlKey + 'shift-9' ] = toggleList( 'OL', 'makeOrderedList' ); keyHandlers[ ctrlKey + '[' ] = changeIndentationLevel( 'decrease' ); @@ -1688,2260 +2470,1359 @@ keyHandlers[ ctrlKey + 'z' ] = mapKeyTo( 'undo' ); keyHandlers[ 'undo' ] = mapKeyTo( 'undo' ); keyHandlers[ ctrlKey + 'shift-z' ] = mapKeyTo( 'redo' ); -let fontSizes = { - 1: 10, - 2: 13, - 3: 16, - 4: 18, - 5: 24, - 6: 32, - 7: 48 -}; +class Squire +{ + constructor (root, config) { + this._root = root; -let styleToSemantic = { - fontWeight: { - regexp: /^bold|^700/i, - replace: () => createElement( 'B' ) - }, - fontStyle: { - regexp: /^italic/i, - replace: () => createElement( 'I' ) - }, - fontFamily: { - regexp: notWS, - replace: ( doc, classNames, family ) => createElement( 'SPAN', { - 'class': classNames.fontFamily, - style: 'font-family:' + family - }) - }, - fontSize: { - regexp: notWS, - replace: ( doc, classNames, size ) => createElement( 'SPAN', { - 'class': classNames.fontSize, - style: 'font-size:' + size - }) - }, - textDecoration: { - regexp: /^underline/i, - replace: () => createElement( 'U' ) - } -/* - textDecoration: { - regexp: /^line-through/i, - replace: doc => createElement( 'S' ) - } -*/ -}; + this._events = {}; -let replaceWithTag = tag => node => { - let el = createElement( tag ); - Array.prototype.forEach.call( node.attributes, attr => el.setAttribute( attr.name, attr.value ) ); - node.replaceWith( el ); - el.append( empty( node ) ); - return el; -}; + this._isFocused = false; + this._lastRange = null; -let replaceStyles = ( node, parent, config ) => { - let style = node.style; - let attr, converter, css, newTreeBottom, newTreeTop, el; + this._hasZWS = false; - for ( attr in styleToSemantic ) { - converter = styleToSemantic[ attr ]; - css = style[ attr ]; - if ( css && converter.regexp.test( css ) ) { - el = converter.replace( doc, config.classNames, css ); - if ( el.nodeName === node.nodeName && - el.className === node.className ) { - continue; - } - if ( !newTreeTop ) { - newTreeTop = el; - } - if ( newTreeBottom ) { - newTreeBottom.append( el ); - } - newTreeBottom = el; - node.style[ attr ] = ''; - } - } + this._lastAnchorNode = null; + this._lastFocusNode = null; + this._path = ''; - if ( newTreeTop ) { - newTreeBottom.append( empty( node ) ); - node.append( newTreeTop ); - } - - return newTreeBottom || node; -}; - -let stylesRewriters = { - SPAN: replaceStyles, - STRONG: replaceWithTag( 'B' ), - EM: replaceWithTag( 'I' ), - INS: replaceWithTag( 'U' ), - STRIKE: replaceWithTag( 'S' ), - FONT: ( node, parent, config ) => { - let face = node.face; - let size = node.size; - let colour = node.color; - let classNames = config.classNames; - let fontSpan, sizeSpan, colourSpan; - let newTreeBottom, newTreeTop; - if ( face ) { - fontSpan = createElement( 'SPAN', { - 'class': classNames.fontFamily, - style: 'font-family:' + face - }); - newTreeTop = fontSpan; - newTreeBottom = fontSpan; - } - if ( size ) { - sizeSpan = createElement( 'SPAN', { - 'class': classNames.fontSize, - style: 'font-size:' + fontSizes[ size ] + 'px' - }); - if ( !newTreeTop ) { - newTreeTop = sizeSpan; - } - if ( newTreeBottom ) { - newTreeBottom.append( sizeSpan ); - } - newTreeBottom = sizeSpan; - } - if ( colour && /^#?([\dA-F]{3}){1,2}$/i.test( colour ) ) { - if ( colour.charAt( 0 ) !== '#' ) { - colour = '#' + colour; - } - colourSpan = createElement( 'SPAN', { - 'class': classNames.colour, - style: 'color:' + colour - }); - if ( !newTreeTop ) { - newTreeTop = colourSpan; - } - if ( newTreeBottom ) { - newTreeBottom.append( colourSpan ); - } - newTreeBottom = colourSpan; - } - if ( !newTreeTop ) { - newTreeTop = newTreeBottom = createElement( 'SPAN' ); - } - node.replaceWith( newTreeTop ); - newTreeBottom.append( empty( node ) ); - return newTreeBottom; - }, -// KBD: -// VAR: -// CODE: -// SAMP: - TT: ( node, parent, config ) => { - let el = createElement( 'SPAN', { - 'class': config.classNames.fontFamily, - style: 'font-family:menlo,consolas,"courier new",monospace' - }); - node.replaceWith( el ); - el.append( empty( node ) ); - return el; - } -}; - -let allowedBlock = /^(?:A(?:DDRESS|RTICLE|SIDE|UDIO)|BLOCKQUOTE|CAPTION|D(?:[DLT]|IV)|F(?:IGURE|IGCAPTION|OOTER)|H[1-6]|HEADER|L(?:ABEL|EGEND|I)|O(?:L|UTPUT)|P(?:RE)?|SECTION|T(?:ABLE|BODY|D|FOOT|H|HEAD|R)|COL(?:GROUP)?|UL)$/; - -let blacklist = /^(?:HEAD|META|STYLE)/; - -/* - Two purposes: - - 1. Remove nodes we don't want, such as weird
elements are treated specially, and differently depending on the -// browser, when in rich text editor mode. When adding HTML from external -// sources, we must remove them, replacing the ones that actually affect -// line breaks by wrapping the inline text in a
. Browsers that want
-// elements at the end of each block will then have them added back in a later -// fixCursor method call. -let cleanupBRs = ( node, root, keepForBlankLine ) => { - let brs = node.querySelectorAll( 'BR' ); - let brBreaksLine = []; - let l = brs.length; - let i, br, parent; - - // Must calculate whether the
breaks a line first, because if we - // have two
s next to each other, after the first one is converted - // to a block split, the second will be at the end of a block and - // therefore seem to not be a line break. But in its original context it - // was, so we should also convert it to a block split. - for ( i = 0; i < l; ++i ) { - brBreaksLine[i] = isLineBreak( brs[i], keepForBlankLine ); - } - while ( l-- ) { - br = brs[l]; - // Cleanup may have removed it - parent = br.parentNode; - if ( !parent ) { continue; } - // If it doesn't break a line, just remove it; it's not doing - // anything useful. We'll add it back later if required by the - // browser. If it breaks a line, wrap the content in div tags - // and replace the brs. - if ( !brBreaksLine[l] ) { - detach( br ); - } else if ( !isInline( parent ) ) { - fixContainer( parent, root ); - } - } -}; - -// The (non-standard but supported enough) innerText property is based on the -// render tree in Firefox and possibly other browsers, so we must insert the -// DOM node into the document to ensure the text part is correct. -let setClipboardData = - ( event, contents, root, willCutCopy, toPlainText, plainTextOnly ) => { - let clipboardData = event.clipboardData; - let body = doc.body; - let node = createElement( 'div' ); - let html, text; - - node.append( contents ); - - html = node.innerHTML; - if ( willCutCopy ) { - html = willCutCopy( html ); - } - - if ( toPlainText ) { - text = toPlainText( html ); - } else { - // Firefox will add an extra new line for BRs at the end of block when - // calculating innerText, even though they don't actually affect - // display, so we need to remove them first. - cleanupBRs( node, root, true ); - node.setAttribute( 'style', - 'position:fixed;overflow:hidden;bottom:100%;right:100%;' ); - body.append( node ); - text = node.innerText || node.textContent; - text = text.replace( NBSP, ' ' ); // Replace nbsp with regular space - node.remove( ); - } - // Firefox (and others?) returns unix line endings (\n) even on Windows. - // If on Windows, normalise to \r\n, since Notepad and some other crappy - // apps do not understand just \n. - if ( isWin ) { - text = text.replace( /\r?\n/g, '\r\n' ); - } - - if ( !plainTextOnly && text !== html ) { - clipboardData.setData( 'text/html', html ); - } - clipboardData.setData( 'text/plain', text ); - event.preventDefault(); -}; - -let onCut = function ( event ) { - let range = this.getSelection(); - let root = this._root; - let self = this; - let startBlock, endBlock, copyRoot, contents, parent, newContents; - - // Nothing to do - if ( range.collapsed ) { - event.preventDefault(); - return; - } - - // Save undo checkpoint - this.saveUndoState( range ); - - // Edge only seems to support setting plain text as of 2016-03-11. - if ( !isEdge && event.clipboardData ) { - // Clipboard content should include all parents within block, or all - // parents up to root if selection across blocks - startBlock = getStartBlockOfRange( range, root ); - endBlock = getEndBlockOfRange( range, root ); - copyRoot = ( ( startBlock === endBlock ) && startBlock ) || root; - // Extract the contents - contents = deleteContentsOfRange( range, root ); - // Add any other parents not in extracted content, up to copy root - parent = range.commonAncestorContainer; - if ( parent.nodeType === TEXT_NODE ) { - parent = parent.parentNode; - } - while ( parent && parent !== copyRoot ) { - newContents = parent.cloneNode( false ); - newContents.append( contents ); - contents = newContents; - parent = parent.parentNode; - } - // Set clipboard data - setClipboardData( - event, contents, root, this._config.willCutCopy, null, false ); - } else { - setTimeout( () => { - try { - // If all content removed, ensure div at start of root. - self._ensureBottomLine(); - } catch ( error ) { - self.didError( error ); - } - }, 0 ); - } - - this.setSelection( range ); -}; - -let onCopy = function ( event ) { - // Edge only seems to support setting plain text as of 2016-03-11. - if ( !isEdge && event.clipboardData ) { - let range = this.getSelection(), root = this._root, - // Clipboard content should include all parents within block, or all - // parents up to root if selection across blocks - startBlock = getStartBlockOfRange( range, root ), - endBlock = getEndBlockOfRange( range, root ), - copyRoot = ( ( startBlock === endBlock ) && startBlock ) || root, - contents, parent, newContents; - // Clone range to mutate, then move up as high as possible without - // passing the copy root node. - range = range.cloneRange(); - moveRangeBoundariesDownTree( range ); - moveRangeBoundariesUpTree( range, copyRoot, copyRoot, root ); - // Extract the contents - contents = range.cloneContents(); - // Add any other parents not in extracted content, up to copy root - parent = range.commonAncestorContainer; - if ( parent.nodeType === TEXT_NODE ) { - parent = parent.parentNode; - } - while ( parent && parent !== copyRoot ) { - newContents = parent.cloneNode( false ); - newContents.append( contents ); - contents = newContents; - parent = parent.parentNode; - } - // Set clipboard data - setClipboardData( event, contents, root, this._config.willCutCopy, null, false ); - } -}; - -// Need to monitor for shift key like this, as event.shiftKey is not available -// in paste event. -function monitorShiftKey ( event ) { - this.isShiftDown = event.shiftKey; -} - -let onPaste = function ( event ) { - let clipboardData = event.clipboardData; - let items = clipboardData && clipboardData.items; - let choosePlain = this.isShiftDown; - let fireDrop = false; - let hasRTF = false; - let hasImage = false; - let plainItem = null; - let htmlItem = null; - let self = this; - let l, item, type, types, data; - - // Current HTML5 Clipboard interface - // --------------------------------- - // https://html.spec.whatwg.org/multipage/interaction.html - if ( items ) { - l = items.length; - while ( l-- ) { - item = items[l]; - type = item.type; - if ( type === 'text/html' ) { - htmlItem = item; - // iOS copy URL gives you type text/uri-list which is just a list - // of 1 or more URLs separated by new lines. Can just treat as - // plain text. - } else if ( type === 'text/plain' || type === 'text/uri-list' ) { - plainItem = item; - } else if ( type === 'text/rtf' ) { - hasRTF = true; - } else if ( /^image\/.*/.test( type ) ) { - hasImage = true; - } - } - - // Treat image paste as a drop of an image file. When you copy - // an image in Chrome/Firefox (at least), it copies the image data - // but also an HTML version (referencing the original URL of the image) - // and a plain text version. - // - // However, when you copy in Excel, you get html, rtf, text, image; - // in this instance you want the html version! So let's try using - // the presence of text/rtf as an indicator to choose the html version - // over the image. - if ( hasImage && !( hasRTF && htmlItem ) ) { - event.preventDefault(); - this.fireEvent( 'dragover', { - dataTransfer: clipboardData, - /*jshint loopfunc: true */ - preventDefault: () => fireDrop = true - /*jshint loopfunc: false */ - }); - if ( fireDrop ) { - this.fireEvent( 'drop', { - dataTransfer: clipboardData - }); - } - return; - } - - // Edge only provides access to plain text as of 2016-03-11 and gives no - // indication there should be an HTML part. However, it does support - // access to image data, so we check for that first. Otherwise though, - // fall through to fallback clipboard handling methods - if ( !isEdge ) { - event.preventDefault(); - if ( htmlItem && ( !choosePlain || !plainItem ) ) { - htmlItem.getAsString( html => self.insertHTML( html, true ) ); - } else if ( plainItem ) { - plainItem.getAsString( text => self.insertPlainText( text, true ) ); - } - return; - } - } - - // Safari (and indeed many other OS X apps) copies stuff as text/rtf - // rather than text/html; even from a webpage in Safari. The only way - // to get an HTML version is to fallback to letting the browser insert - // the content. Same for getting image data. *Sigh*. - types = clipboardData && clipboardData.types; - if ( !isEdge && types && ( - indexOf( types, 'text/html' ) > -1 || ( - !isGecko && - indexOf( types, 'text/plain' ) > -1 && - indexOf( types, 'text/rtf' ) < 0 ) - )) { - event.preventDefault(); - // Abiword on Linux copies a plain text and html version, but the HTML - // version is the empty string! So always try to get HTML, but if none, - // insert plain text instead. On iOS, Facebook (and possibly other - // apps?) copy links as type text/uri-list, but also insert a **blank** - // text/plain item onto the clipboard. Why? Who knows. - if ( !choosePlain && ( data = clipboardData.getData( 'text/html' ) ) ) { - this.insertHTML( data, true ); - } else if ( - ( data = clipboardData.getData( 'text/plain' ) ) || - ( data = clipboardData.getData( 'text/uri-list' ) ) ) { - this.insertPlainText( data, true ); - } - return; - } -}; - -// On Windows you can drag an drop text. We can't handle this ourselves, because -// as far as I can see, there's no way to get the drop insertion point. So just -// save an undo state and hope for the best. -let onDrop = function ( event ) { - let types = event.dataTransfer.types; - let l = types.length; - let hasPlain = false; - let hasHTML = false; - while ( l-- ) { - switch ( types[l] ) { - case 'text/plain': - hasPlain = true; - break; - case 'text/html': - hasHTML = true; - break; - default: - return; - } - } - if ( hasHTML || hasPlain ) { - this.saveUndoState(); - } -}; - -function mergeObjects ( base, extras, mayOverride ) { - let prop, value; - if ( !base ) { - base = {}; - } - if ( extras ) { - for ( prop in extras ) { - if ( mayOverride || !( prop in base ) ) { - value = extras[ prop ]; - base[ prop ] = ( value && value.constructor === Object ) ? - mergeObjects( base[ prop ], value, mayOverride ) : - value; - } - } - } - return base; -} - -function Squire ( root, config ) { - this._root = root; - - this._events = {}; - - this._isFocused = false; - this._lastRange = null; - - this._hasZWS = false; - - this._lastAnchorNode = null; - this._lastFocusNode = null; - this._path = ''; - - let _willUpdatePath; - const selectionchange = () => { - if (root.contains(doc.activeElement)) { - if ( this._isFocused && !_willUpdatePath ) { - _willUpdatePath = setTimeout( () => { - _willUpdatePath = 0; - this._updatePath( this.getSelection() ); - }, 0 ); - } - } else { - this.removeEventListener('selectionchange', selectionchange); - } - }; - this.addEventListener('selectstart', () => this.addEventListener('selectionchange', selectionchange)); - - this._undoIndex = -1; - this._undoStack = []; - this._undoStackLength = 0; - this._isInUndoState = false; - this._ignoreChange = false; - this._ignoreAllChanges = false; - - this._mutation = new MutationObserver( ()=>this._docWasChanged() ); - this._mutation.observe( root, { - childList: true, - attributes: true, - characterData: true, - subtree: true - }); - - // On blur, restore focus except if the user taps or clicks to focus a - // specific point. Can't actually use click event because focus happens - // before click, so use mousedown/touchstart - this._restoreSelection = false; - // https://caniuse.com/mdn-api_document_pointerup_event - this.addEventListener( 'blur', () => this._restoreSelection = true ) - .addEventListener( 'pointerdown mousedown touchstart', () => this._restoreSelection = false ) - .addEventListener( 'focus', () => this._restoreSelection && this.setSelection( this._lastRange ) ) - .addEventListener( 'cut', onCut ) - .addEventListener( 'copy', onCopy ) - .addEventListener( 'keydown keyup', monitorShiftKey ) - .addEventListener( 'paste', onPaste ) - .addEventListener( 'drop', onDrop ) - .addEventListener( 'keydown', onKey ) - .addEventListener( 'pointerup keyup mouseup touchend', ()=>this.getSelection() ); - - // Add key handlers - this._keyHandlers = Object.create( keyHandlers ); - - // Override default properties - this.setConfig( config ); - - root.setAttribute( 'contenteditable', 'true' ); - // Grammarly breaks the editor, *sigh* - root.setAttribute( 'data-gramm', 'false' ); - - // Remove Firefox's built-in controls - try { - doc.execCommand( 'enableObjectResizing', false, 'false' ); - doc.execCommand( 'enableInlineTableEditing', false, 'false' ); - } catch ( error ) {} - - root.__squire__ = this; - - // Need to register instance before calling setHTML, so that the fixCursor - // function can lookup any default block tag options set. - this.setHTML( '' ); -} - -let proto = Squire.prototype; - -let sanitizeToDOMFragment = ( html ) => { - let frag = html ? win.DOMPurify.sanitize( html, { - ALLOW_UNKNOWN_PROTOCOLS: true, - WHOLE_DOCUMENT: false, - RETURN_DOM: true, - RETURN_DOM_FRAGMENT: true - }) : null; - return frag ? doc.importNode( frag, true ) : doc.createDocumentFragment(); -}; - -proto.setConfig = function ( config ) { - config = mergeObjects({ - blockTag: 'DIV', - blockAttributes: null, - tagAttributes: { - blockquote: null, - ul: null, - ol: null, - li: null, - a: null - }, - classNames: { - colour: 'colour', - fontFamily: 'font', - fontSize: 'size', - highlight: 'highlight' - }, - leafNodeNames: leafNodeNames, - undo: { - documentSizeThreshold: -1, // -1 means no threshold - undoLimit: -1 // -1 means no limit - }, - isInsertedHTMLSanitized: true, - isSetHTMLSanitized: true, - sanitizeToDOMFragment: win.DOMPurify && win.DOMPurify.isSupported ? sanitizeToDOMFragment : null, - willCutCopy: null, - addLinks: true - }, config, true ); - - // Users may specify block tag in lower case - config.blockTag = config.blockTag.toUpperCase(); - - this._config = config; - - return this; -}; - -proto.createDefaultBlock = function ( children ) { - let config = this._config; - return fixCursor( - createElement( config.blockTag, config.blockAttributes, children ), - this._root - ); -}; - -proto.didError = error => console.error( error ); - -proto.getRoot = function () { - return this._root; -}; - -proto.modifyDocument = function ( modificationCallback ) { - let mutation = this._mutation; - if ( mutation ) { - if ( mutation.takeRecords().length ) { - this._docWasChanged(); - } - mutation.disconnect(); - } - - this._ignoreAllChanges = true; - modificationCallback(); - this._ignoreAllChanges = false; - - if ( mutation ) { - mutation.observe( this._root, { + this._mutation = new MutationObserver( ()=>this._docWasChanged() ); + this._mutation.observe( root, { childList: true, attributes: true, characterData: true, subtree: true }); - this._ignoreChange = false; + + // On blur, restore focus except if the user taps or clicks to focus a + // specific point. Can't actually use click event because focus happens + // before click, so use mousedown/touchstart + this._restoreSelection = false; + // https://caniuse.com/mdn-api_document_pointerup_event + this.addEventListener( 'blur', () => this._restoreSelection = true ) + .addEventListener( 'pointerdown mousedown touchstart', () => this._restoreSelection = false ) + .addEventListener( 'focus', () => this._restoreSelection && this.setSelection( this._lastRange ) ) + .addEventListener( 'cut', onCut ) + .addEventListener( 'copy', onCopy ) + .addEventListener( 'keydown keyup', monitorShiftKey ) + .addEventListener( 'paste', onPaste ) + .addEventListener( 'drop', onDrop ) + .addEventListener( 'keydown', onKey ) + .addEventListener( 'pointerup keyup mouseup touchend', ()=>this.getSelection() ); + + // Add key handlers + this._keyHandlers = Object.create( keyHandlers ); + + // Override default properties + this.setConfig( config ); + + root.setAttribute( 'contenteditable', 'true' ); + // Grammarly breaks the editor, *sigh* + root.setAttribute( 'data-gramm', 'false' ); + + // Remove Firefox's built-in controls + try { + doc.execCommand( 'enableObjectResizing', false, 'false' ); + doc.execCommand( 'enableInlineTableEditing', false, 'false' ); + } catch ( error ) {} + + root.__squire__ = this; + + // Need to register instance before calling setHTML, so that the fixCursor + // function can lookup any default block tag options set. + this.setHTML( '' ); } -}; -// --- Events --- + setConfig ( config ) { + config = mergeObjects({ + blockTag: 'DIV', + undo: { + documentSizeThreshold: -1, // -1 means no threshold + undoLimit: -1 // -1 means no limit + }, + sanitizeToDOMFragment: null, + addLinks: true + }, config, true ); -// Subscribing to these events won't automatically add a listener to the -// document node, since these events are fired in a custom manner by the -// editor code. -let customEvents = { - pathChange: 1, select: 1, input: 1, undoStateChange: 1 -}; + // Users may specify block tag in lower case + config.blockTag = config.blockTag.toUpperCase(); -proto.fireEvent = function ( type, event ) { - let handlers = this._events[ type ]; - let isFocused, l, obj; - // UI code, especially modal views, may be monitoring for focus events and - // immediately removing focus. In certain conditions, this can cause the - // focus event to fire after the blur event, which can cause an infinite - // loop. So we detect whether we're actually focused/blurred before firing. - if ( /^(?:focus|blur)/.test( type ) ) { - isFocused = this._root === doc.activeElement; - if ( type === 'focus' ) { - if ( !isFocused || this._isFocused ) { - return this; + this._config = config; + + return this; + } + + createDefaultBlock ( children ) { + let config = this._config; + return fixCursor( + createElement( config.blockTag, null, children ), + this._root + ); + } + + getRoot () { + return this._root; + } + + modifyDocument ( modificationCallback ) { + let mutation = this._mutation; + if ( mutation ) { + if ( mutation.takeRecords().length ) { + this._docWasChanged(); } - this._isFocused = true; - } else { - if ( isFocused || !this._isFocused ) { - return this; - } - this._isFocused = false; + mutation.disconnect(); } - } - if ( handlers ) { - if ( !event ) { - event = {}; - } - if ( event.type !== type ) { - event.type = type; - } - // Clone handlers array, so any handlers added/removed do not affect it. - handlers = handlers.slice(); - l = handlers.length; - while ( l-- ) { - obj = handlers[l]; - try { - if ( obj.handleEvent ) { - obj.handleEvent( event ); - } else { - obj.call( this, event ); - } - } catch ( error ) { - error.details = 'Squire: fireEvent error. Event type: ' + type; - this.didError( error ); - } - } - } - return this; -}; -proto.destroy = function () { - let events = this._events; - let type; + this._ignoreAllChanges = true; + modificationCallback(); + this._ignoreAllChanges = false; - for ( type in events ) { - this.removeEventListener( type ); - } - if ( this._mutation ) { - this._mutation.disconnect(); - } - delete this._root.__squire__; - - // Destroy undo stack - this._undoIndex = -1; - this._undoStack = []; - this._undoStackLength = 0; -}; - -proto.handleEvent = function ( event ) { - this.fireEvent( event.type, event ); -}; - -proto.addEventListener = function ( type, fn ) { - type.split(/\s+/).forEach(type=>{ - let handlers = this._events[ type ], - target = this._root; - if ( !fn ) { - this.didError({ - name: 'Squire: addEventListener with null or undefined fn', - message: 'Event type: ' + type + if ( mutation ) { + mutation.observe( this._root, { + childList: true, + attributes: true, + characterData: true, + subtree: true }); - return this; + this._ignoreChange = false; } - if ( !handlers ) { - handlers = this._events[ type ] = []; - if ( !customEvents[ type ] ) { - if ( type === 'selectionchange' ) { - target = doc; + } + + // --- Events --- + + fireEvent ( type, event ) { + let handlers = this._events[ type ]; + let isFocused, l, obj; + // UI code, especially modal views, may be monitoring for focus events and + // immediately removing focus. In certain conditions, this can cause the + // focus event to fire after the blur event, which can cause an infinite + // loop. So we detect whether we're actually focused/blurred before firing. + if ( /^(?:focus|blur)/.test( type ) ) { + isFocused = this._root === doc.activeElement; + if ( type === 'focus' ) { + if ( !isFocused || this._isFocused ) { + return this; } - target.addEventListener( type, this, {capture:true,passive:'touchstart'===type} ); + this._isFocused = true; + } else { + if ( isFocused || !this._isFocused ) { + return this; + } + this._isFocused = false; } } - handlers.push( fn ); - }); - return this; -}; - -proto.removeEventListener = function ( type, fn ) { - let handlers = this._events[ type ]; - let target = this._root; - let l; - if ( handlers ) { - if ( fn ) { + if ( handlers ) { + if ( !event ) { + event = {}; + } + if ( event.type !== type ) { + event.type = type; + } + // Clone handlers array, so any handlers added/removed do not affect it. + handlers = handlers.slice(); l = handlers.length; while ( l-- ) { - if ( handlers[l] === fn ) { - handlers.splice( l, 1 ); + obj = handlers[l]; + try { + if ( obj.handleEvent ) { + obj.handleEvent( event ); + } else { + obj.call( this, event ); + } + } catch ( error ) { + error.details = 'Squire: fireEvent error. Event type: ' + type; + didError( error ); } } - } else { - handlers.length = 0; } - if ( !handlers.length ) { - delete this._events[ type ]; - if ( !customEvents[ type ] ) { - if ( type === 'selectionchange' ) { - target = doc; + return this; + } + + destroy () { + let events = this._events; + let type; + + for ( type in events ) { + this.removeEventListener( type ); + } + if ( this._mutation ) { + this._mutation.disconnect(); + } + delete this._root.__squire__; + + // Destroy undo stack + this._undoIndex = -1; + this._undoStack = []; + this._undoStackLength = 0; + } + + handleEvent ( event ) { + this.fireEvent( event.type, event ); + } + + addEventListener ( type, fn ) { + type.split(/\s+/).forEach(type=>{ + let handlers = this._events[ type ], + target = this._root; + if ( !fn ) { + didError({ + name: 'Squire: addEventListener with null or undefined fn', + message: 'Event type: ' + type + }); + return this; + } + if ( !handlers ) { + handlers = this._events[ type ] = []; + if ( !customEvents[ type ] ) { + if ( type === 'selectionchange' ) { + target = doc; + } + target.addEventListener( type, this, {capture:true,passive:'touchstart'===type} ); } - target.removeEventListener( type, this, true ); } - } - } - return this; -}; - -// --- Selection and Path --- - -proto.createRange = ( range, startOffset, endContainer, endOffset ) => { - if ( range instanceof win.Range ) { - return range.cloneRange(); - } - let domRange = doc.createRange(); - domRange.setStart( range, startOffset ); - if ( endContainer ) { - domRange.setEnd( endContainer, endOffset ); - } else { - domRange.setEnd( range, startOffset ); - } - return domRange; -}; - -proto.getCursorPosition = function ( range ) { - if ( ( !range && !( range = this.getSelection() ) ) || - !range.getBoundingClientRect ) { - return null; - } - // Get the bounding rect - let rect = range.getBoundingClientRect(); - let node, parent; - if ( rect && !rect.top ) { - this._ignoreChange = true; - node = createElement( 'SPAN' ); - node.textContent = ZWS; - insertNodeInRange( range, node ); - rect = node.getBoundingClientRect(); - parent = node.parentNode; - node.remove( ); - mergeInlines( parent, range ); - } - return rect; -}; - -proto.setSelection = function ( range ) { - if ( range ) { - this._lastRange = range; - // If we're setting selection, that automatically, and synchronously, // triggers a focus event. So just store the selection and mark it as - // needing restore on focus. - if ( !this._isFocused ) { - this._restoreSelection = true; - } else { - // iOS bug: if you don't focus the iframe before setting the - // selection, you can end up in a state where you type but the input - // doesn't get directed into the contenteditable area but is instead - // lost in a black hole. Very strange. - if ( isIOS ) { - win.focus(); - } - let sel = win.getSelection(); - if ( sel && sel.setBaseAndExtent ) { - sel.setBaseAndExtent( - range.startContainer, - range.startOffset, - range.endContainer, - range.endOffset, - ); - } else if ( sel ) { - // This is just for IE11 - sel.removeAllRanges(); - sel.addRange( range ); - } - } - } - return this; -}; - -proto.getSelection = function () { - let sel = win.getSelection(); - let root = this._root; - let range, startContainer, endContainer, node; - // If not focused, always rely on cached range; another function may - // have set it but the DOM is not modified until focus again - if ( this._isFocused && sel && sel.rangeCount ) { - range = sel.getRangeAt( 0 ).cloneRange(); - startContainer = range.startContainer; - endContainer = range.endContainer; - // FF can return the range as being inside an![]()
. WTF?
- if ( startContainer && isLeaf( startContainer ) ) {
- range.setStartBefore( startContainer );
- }
- if ( endContainer && isLeaf( endContainer ) ) {
- range.setEndBefore( endContainer );
- }
- }
- if ( range && root.contains( range.commonAncestorContainer ) ) {
- this._lastRange = range;
- } else {
- range = this._lastRange;
- node = range.commonAncestorContainer;
- // Check the editor is in the live document; if not, the range has
- // probably been rewritten by the browser and is bogus
- if ( !doc.contains( node ) ) {
- range = null;
- }
- }
- return range || this.createRange( root.firstChild, 0 );
-};
-
-proto.getSelectionClosest = function (selector) {
- let range = this.getSelection();
- return range && getClosest(range.commonAncestorContainer, this._root, selector);
-};
-
-proto.selectionContains = function (selector) {
- let range = this.getSelection(),
- node = range && range.commonAncestorContainer;
- if (node && !range.collapsed) {
- node = node.querySelector ? node : node.parentElement;
- // TODO: isNodeContainedInRange( range, node ) for real selection match?
- return !!(node && node.querySelector(selector));
- }
- return false;
-};
-
-proto.getSelectedText = function () {
- let range = this.getSelection();
- if ( !range || range.collapsed ) {
- return '';
- }
- let walker = createTreeWalker(
- range.commonAncestorContainer,
- SHOW_TEXT|SHOW_ELEMENT,
- node => isNodeContainedInRange( range, node )
- );
- let startContainer = range.startContainer;
- let endContainer = range.endContainer;
- let node = walker.currentNode = startContainer;
- let textContent = '';
- let addedTextInBlock = false;
- let value;
-
- if ( filterAccept != walker.filter.acceptNode( node ) ) {
- node = walker.nextNode();
+ handlers.push( fn );
+ });
+ return this;
}
- while ( node ) {
- if ( node.nodeType === TEXT_NODE ) {
- value = node.data;
- if ( value && ( /\S/.test( value ) ) ) {
- if ( node === endContainer ) {
- value = value.slice( 0, range.endOffset );
+ removeEventListener ( type, fn ) {
+ let handlers = this._events[ type ];
+ let target = this._root;
+ let l;
+ if ( handlers ) {
+ if ( fn ) {
+ l = handlers.length;
+ while ( l-- ) {
+ if ( handlers[l] === fn ) {
+ handlers.splice( l, 1 );
+ }
}
- if ( node === startContainer ) {
- value = value.slice( range.startOffset );
- }
- textContent += value;
- addedTextInBlock = true;
- }
- } else if ( node.nodeName === 'BR' ||
- addedTextInBlock && !isInline( node ) ) {
- textContent += '\n';
- addedTextInBlock = false;
- }
- node = walker.nextNode();
- }
-
- return textContent;
-};
-
-proto.getPath = function () {
- return this._path;
-};
-
-// --- Workaround for browsers that can't focus empty text nodes ---
-
-// WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=15256
-
-// Walk down the tree starting at the root and remove any ZWS. If the node only
-// contained ZWS space then remove it too. We may want to keep one ZWS node at
-// the bottom of the tree so the block can be selected. Define that node as the
-// keepNode.
-let removeZWS = ( root, keepNode ) => {
- let walker = createTreeWalker( root, SHOW_TEXT );
- let parent, node, index;
- while ( node = walker.nextNode() ) {
- while ( ( index = node.data.indexOf( ZWS ) ) > -1 &&
- ( !keepNode || node.parentNode !== keepNode ) ) {
- if ( node.length === 1 ) {
- do {
- parent = node.parentNode;
- node.remove( );
- node = parent;
- walker.currentNode = parent;
- } while ( isInline( node ) && !getLength( node ) );
- break;
} else {
- node.deleteData( index, 1 );
+ handlers.length = 0;
+ }
+ if ( !handlers.length ) {
+ delete this._events[ type ];
+ if ( !customEvents[ type ] ) {
+ if ( type === 'selectionchange' ) {
+ target = doc;
+ }
+ target.removeEventListener( type, this, true );
+ }
}
}
+ return this;
}
-};
-proto._didAddZWS = function () {
- this._hasZWS = true;
-};
-proto._removeZWS = function () {
- if ( !this._hasZWS ) {
- return;
- }
- removeZWS( this._root );
- this._hasZWS = false;
-};
+ // --- Selection and Path ---
-// --- Path change events ---
-
-proto._updatePath = function ( range, force ) {
- if ( !range ) {
- return;
- }
- let anchor = range.startContainer,
- focus = range.endContainer,
- newPath;
- if ( force || anchor !== this._lastAnchorNode ||
- focus !== this._lastFocusNode ) {
- this._lastAnchorNode = anchor;
- this._lastFocusNode = focus;
- newPath = ( anchor && focus ) ? ( anchor === focus ) ?
- getPath( focus, this._root, this._config ) : '(selection)' : '';
- if ( this._path !== newPath ) {
- this._path = newPath;
- this.fireEvent( 'pathChange', { path: newPath } );
+ getCursorPosition ( range ) {
+ if ( ( !range && !( range = this.getSelection() ) ) ||
+ !range.getBoundingClientRect ) {
+ return null;
}
- }
- this.fireEvent( range.collapsed ? 'cursor' : 'select', {
- range: range
- });
-};
-
-// --- Focus ---
-
-proto.focus = function () {
- this._root.focus({ preventScroll: true });
- return this;
-};
-
-proto.blur = function () {
- this._root.blur();
- return this;
-};
-
-// --- Bookmarking ---
-
-let startSelectionId = 'squire-selection-start';
-let endSelectionId = 'squire-selection-end';
-
-const createBookmarkNodes = () => [
- createElement( 'INPUT', {
- id: startSelectionId,
- type: 'hidden'
- }),
- createElement( 'INPUT', {
- id: endSelectionId,
- type: 'hidden'
- })
-];
-
-proto._saveRangeToBookmark = function ( range ) {
- let [startNode, endNode] = createBookmarkNodes(this),
- temp;
-
- insertNodeInRange( range, startNode );
- range.collapse( false );
- insertNodeInRange( range, endNode );
-
- // In a collapsed range, the start is sometimes inserted after the end!
- if ( startNode.compareDocumentPosition( endNode ) &
- DOCUMENT_POSITION_PRECEDING ) {
- startNode.id = endSelectionId;
- endNode.id = startSelectionId;
- temp = startNode;
- startNode = endNode;
- endNode = temp;
+ // Get the bounding rect
+ let rect = range.getBoundingClientRect();
+ let node, parent;
+ if ( rect && !rect.top ) {
+ this._ignoreChange = true;
+ node = createElement( 'SPAN' );
+ node.textContent = ZWS;
+ insertNodeInRange( range, node );
+ rect = node.getBoundingClientRect();
+ parent = node.parentNode;
+ node.remove( );
+ mergeInlines( parent, range );
+ }
+ return rect;
}
- range.setStartAfter( startNode );
- range.setEndBefore( endNode );
-};
-
-proto._getRangeAndRemoveBookmark = function ( range ) {
- let root = this._root,
- start = root.querySelector( '#' + startSelectionId ),
- end = root.querySelector( '#' + endSelectionId );
-
- if ( start && end ) {
- let startContainer = start.parentNode,
- endContainer = end.parentNode,
- startOffset = indexOf( startContainer.childNodes, start ),
- endOffset = indexOf( endContainer.childNodes, end );
-
- if ( startContainer === endContainer ) {
- --endOffset;
+ setSelection ( range ) {
+ if ( range ) {
+ this._lastRange = range;
+ // If we're setting selection, that automatically, and synchronously, // triggers a focus event. So just store the selection and mark it as
+ // needing restore on focus.
+ if ( !this._isFocused ) {
+ this._restoreSelection = true;
+ } else {
+ // iOS bug: if you don't focus the iframe before setting the
+ // selection, you can end up in a state where you type but the input
+ // doesn't get directed into the contenteditable area but is instead
+ // lost in a black hole. Very strange.
+ if ( isIOS ) {
+ win.focus();
+ }
+ let sel = win.getSelection();
+ if ( sel && sel.setBaseAndExtent ) {
+ sel.setBaseAndExtent(
+ range.startContainer,
+ range.startOffset,
+ range.endContainer,
+ range.endOffset,
+ );
+ } else if ( sel ) {
+ // This is just for IE11
+ sel.removeAllRanges();
+ sel.addRange( range );
+ }
+ }
}
+ return this;
+ }
- detach( start );
- detach( end );
-
- if ( !range ) {
- range = doc.createRange();
- }
- range.setStart( startContainer, startOffset );
- range.setEnd( endContainer, endOffset );
-
- // Merge any text nodes we split
- mergeInlines( startContainer, range );
- if ( startContainer !== endContainer ) {
- mergeInlines( endContainer, range );
- }
-
- // If we didn't split a text node, we should move into any adjacent
- // text node to current selection point
- if ( range.collapsed ) {
+ getSelection () {
+ let sel = win.getSelection();
+ let root = this._root;
+ let range, startContainer, endContainer, node;
+ // If not focused, always rely on cached range; another function may
+ // have set it but the DOM is not modified until focus again
+ if ( this._isFocused && sel && sel.rangeCount ) {
+ range = sel.getRangeAt( 0 ).cloneRange();
startContainer = range.startContainer;
- if ( startContainer.nodeType === TEXT_NODE ) {
- endContainer = startContainer.childNodes[ range.startOffset ];
- if ( !endContainer || endContainer.nodeType !== TEXT_NODE ) {
- endContainer =
- startContainer.childNodes[ range.startOffset - 1 ];
- }
- if ( endContainer && endContainer.nodeType === TEXT_NODE ) {
- range.setStart( endContainer, 0 );
- range.collapse( true );
- }
+ endContainer = range.endContainer;
+ // FF can return the range as being inside an ![]()
. WTF?
+ if ( startContainer && isLeaf( startContainer ) ) {
+ range.setStartBefore( startContainer );
+ }
+ if ( endContainer && isLeaf( endContainer ) ) {
+ range.setEndBefore( endContainer );
}
}
- }
- return range || null;
-};
-
-// --- Undo ---
-
-proto._keyUpDetectChange = event => {
- let code = event.keyCode;
- // Presume document was changed if:
- // 1. A modifier key (other than shift) wasn't held down
- // 2. The key pressed is not in range 16<=x<=20 (control keys)
- // 3. The key pressed is not in range 33<=x<=45 (navigation keys)
- if ( !event[osKey] && !event.altKey &&
- ( code < 16 || code > 20 ) &&
- ( code < 33 || code > 45 ) ) {
- this._docWasChanged();
- }
-};
-
-proto._docWasChanged = function () {
- nodeCategoryCache = new WeakMap();
- if ( this._ignoreAllChanges ) {
- return;
- }
-
- if ( this._ignoreChange ) {
- this._ignoreChange = false;
- return;
- }
- if ( this._isInUndoState ) {
- this._isInUndoState = false;
- this.fireEvent( 'undoStateChange', {
- canUndo: true,
- canRedo: false
- });
- }
- this.fireEvent( 'input' );
-};
-
-// Leaves bookmark
-proto._recordUndoState = function ( range, replace ) {
- // Don't record if we're already in an undo state
- if ( !this._isInUndoState|| replace ) {
- // Advance pointer to new position
- let undoIndex = this._undoIndex;
- let undoStack = this._undoStack;
- let undoConfig = this._config.undo;
- let undoThreshold = undoConfig.documentSizeThreshold;
- let undoLimit = undoConfig.undoLimit;
- let html;
-
- if ( !replace ) {
- ++undoIndex;
- }
-
- // Truncate stack if longer (i.e. if has been previously undone)
- if ( undoIndex < this._undoStackLength ) {
- undoStack.length = this._undoStackLength = undoIndex;
- }
-
- // Get data
- if ( range ) {
- this._saveRangeToBookmark( range );
- }
- html = this._getHTML();
-
- // If this document is above the configured size threshold,
- // limit the number of saved undo states.
- // Threshold is in bytes, JS uses 2 bytes per character
- if ( undoThreshold > -1 && html.length * 2 > undoThreshold ) {
- if ( undoLimit > -1 && undoIndex > undoLimit ) {
- undoStack.splice( 0, undoIndex - undoLimit );
- undoIndex = undoLimit;
- this._undoStackLength = undoLimit;
+ if ( range && root.contains( range.commonAncestorContainer ) ) {
+ this._lastRange = range;
+ } else {
+ range = this._lastRange;
+ node = range.commonAncestorContainer;
+ // Check the editor is in the live document; if not, the range has
+ // probably been rewritten by the browser and is bogus
+ if ( !doc.contains( node ) ) {
+ range = null;
}
}
-
- // Save data
- undoStack[ undoIndex ] = html;
- this._undoIndex = undoIndex;
- ++this._undoStackLength;
- this._isInUndoState = true;
+ return range || createRange( root.firstChild, 0 );
}
-};
-proto.saveUndoState = function ( range ) {
- if ( range === undefined ) {
- range = this.getSelection();
+ getSelectionClosest (selector) {
+ let range = this.getSelection();
+ return range && getClosest(range.commonAncestorContainer, this._root, selector);
}
- this._recordUndoState( range, this._isInUndoState );
- this._getRangeAndRemoveBookmark( range );
- return this;
-};
-
-proto.undo = function () {
- // Sanity check: must not be at beginning of the history stack
- if ( this._undoIndex !== 0 || !this._isInUndoState ) {
- // Make sure any changes since last checkpoint are saved.
- this._recordUndoState( this.getSelection(), false );
-
- --this._undoIndex;
- this._setHTML( this._undoStack[ this._undoIndex ] );
- let range = this._getRangeAndRemoveBookmark();
- if ( range ) {
- this.setSelection( range );
+ selectionContains (selector) {
+ let range = this.getSelection(),
+ node = range && range.commonAncestorContainer;
+ if (node && !range.collapsed) {
+ node = node.querySelector ? node : node.parentElement;
+ // TODO: isNodeContainedInRange( range, node ) for real selection match?
+ return !!(node && node.querySelector(selector));
}
- this._isInUndoState = true;
- this.fireEvent( 'undoStateChange', {
- canUndo: this._undoIndex !== 0,
- canRedo: true
- });
- this.fireEvent( 'input' );
- }
- return this;
-};
-
-proto.redo = function () {
- // Sanity check: must not be at end of stack and must be in an undo
- // state.
- let undoIndex = this._undoIndex,
- undoStackLength = this._undoStackLength;
- if ( undoIndex + 1 < undoStackLength && this._isInUndoState ) {
- ++this._undoIndex;
- this._setHTML( this._undoStack[ this._undoIndex ] );
- let range = this._getRangeAndRemoveBookmark();
- if ( range ) {
- this.setSelection( range );
- }
- this.fireEvent( 'undoStateChange', {
- canUndo: true,
- canRedo: undoIndex + 2 < undoStackLength
- });
- this.fireEvent( 'input' );
- }
- return this;
-};
-
-// --- Inline formatting ---
-
-// Looks for matching tag and attributes, so won't work
-// if instead of etc.
-proto.hasFormat = function ( tag, attributes, range ) {
- // 1. Normalise the arguments and get selection
- tag = tag.toUpperCase();
- if ( !attributes ) { attributes = {}; }
- if ( !range && !( range = this.getSelection() ) ) {
return false;
}
- // Sanitize range to prevent weird IE artifacts
- if ( !range.collapsed &&
- range.startContainer.nodeType === TEXT_NODE &&
- range.startOffset === range.startContainer.length &&
- range.startContainer.nextSibling ) {
- range.setStartBefore( range.startContainer.nextSibling );
- }
- if ( !range.collapsed &&
- range.endContainer.nodeType === TEXT_NODE &&
- range.endOffset === 0 &&
- range.endContainer.previousSibling ) {
- range.setEndAfter( range.endContainer.previousSibling );
+ getSelectedText () {
+ let range = this.getSelection();
+ if ( !range || range.collapsed ) {
+ return '';
+ }
+ let walker = createTreeWalker(
+ range.commonAncestorContainer,
+ SHOW_TEXT|SHOW_ELEMENT,
+ node => isNodeContainedInRange( range, node )
+ );
+ let startContainer = range.startContainer;
+ let endContainer = range.endContainer;
+ let node = walker.currentNode = startContainer;
+ let textContent = '';
+ let addedTextInBlock = false;
+ let value;
+
+ if ( filterAccept != walker.filter.acceptNode( node ) ) {
+ node = walker.nextNode();
+ }
+
+ while ( node ) {
+ if ( node.nodeType === TEXT_NODE ) {
+ value = node.data;
+ if ( value && ( /\S/.test( value ) ) ) {
+ if ( node === endContainer ) {
+ value = value.slice( 0, range.endOffset );
+ }
+ if ( node === startContainer ) {
+ value = value.slice( range.startOffset );
+ }
+ textContent += value;
+ addedTextInBlock = true;
+ }
+ } else if ( node.nodeName === 'BR' ||
+ addedTextInBlock && !isInline( node ) ) {
+ textContent += '\n';
+ addedTextInBlock = false;
+ }
+ node = walker.nextNode();
+ }
+
+ return textContent;
}
- // If the common ancestor is inside the tag we require, we definitely
- // have the format.
- let root = this._root;
- let common = range.commonAncestorContainer;
- let walker, node;
- if ( getNearest( common, root, tag, attributes ) ) {
- return true;
+ getPath () {
+ return this._path;
}
- // If common ancestor is a text node and doesn't have the format, we
- // definitely don't have it.
- if ( common.nodeType === TEXT_NODE ) {
- return false;
+ // --- Workaround for browsers that can't focus empty text nodes ---
+
+ // WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=15256
+
+ _addZWS () {
+ if ( isWebKit ) {
+ this._hasZWS = true;
+ return doc.createTextNode( ZWS );
+ }
+ return doc.createTextNode( '' );
+ }
+ _removeZWS () {
+ if ( this._hasZWS ) {
+ removeZWS( this._root );
+ this._hasZWS = false;
+ }
}
- // Otherwise, check each text node at least partially contained within
- // the selection and make sure all of them have the format we want.
- walker = createTreeWalker( common, SHOW_TEXT, node => isNodeContainedInRange( range, node ) );
+ // --- Path change events ---
- let seenNode = false;
- while ( node = walker.nextNode() ) {
- if ( !getNearest( node, root, tag, attributes ) ) {
+ _updatePath ( range, force ) {
+ if ( !range ) {
+ return;
+ }
+ let anchor = range.startContainer,
+ focus = range.endContainer,
+ newPath;
+ if ( force || anchor !== this._lastAnchorNode ||
+ focus !== this._lastFocusNode ) {
+ this._lastAnchorNode = anchor;
+ this._lastFocusNode = focus;
+ newPath = ( anchor && focus ) ? ( anchor === focus ) ?
+ getPath( focus, this._root, this._config ) : '(selection)' : '';
+ if ( this._path !== newPath ) {
+ this._path = newPath;
+ this.fireEvent( 'pathChange', { path: newPath } );
+ }
+ }
+ this.fireEvent( range.collapsed ? 'cursor' : 'select', {
+ range: range
+ });
+ }
+
+ // --- Focus ---
+
+ focus () {
+ this._root.focus({ preventScroll: true });
+ return this;
+ }
+
+ blur () {
+ this._root.blur();
+ return this;
+ }
+
+ // --- Bookmarking ---
+
+ _saveRangeToBookmark ( range ) {
+ let [startNode, endNode] = createBookmarkNodes(this),
+ temp;
+
+ insertNodeInRange( range, startNode );
+ range.collapse( false );
+ insertNodeInRange( range, endNode );
+
+ // In a collapsed range, the start is sometimes inserted after the end!
+ if ( startNode.compareDocumentPosition( endNode ) &
+ DOCUMENT_POSITION_PRECEDING ) {
+ startNode.id = endSelectionId;
+ endNode.id = startSelectionId;
+ temp = startNode;
+ startNode = endNode;
+ endNode = temp;
+ }
+
+ range.setStartAfter( startNode );
+ range.setEndBefore( endNode );
+ }
+
+ _getRangeAndRemoveBookmark ( range ) {
+ let root = this._root,
+ start = root.querySelector( '#' + startSelectionId ),
+ end = root.querySelector( '#' + endSelectionId );
+
+ if ( start && end ) {
+ let startContainer = start.parentNode,
+ endContainer = end.parentNode,
+ startOffset = indexOf( startContainer.childNodes, start ),
+ endOffset = indexOf( endContainer.childNodes, end );
+
+ if ( startContainer === endContainer ) {
+ --endOffset;
+ }
+
+ detach( start );
+ detach( end );
+
+ if ( !range ) {
+ range = doc.createRange();
+ }
+ range.setStart( startContainer, startOffset );
+ range.setEnd( endContainer, endOffset );
+
+ // Merge any text nodes we split
+ mergeInlines( startContainer, range );
+ if ( startContainer !== endContainer ) {
+ mergeInlines( endContainer, range );
+ }
+
+ // If we didn't split a text node, we should move into any adjacent
+ // text node to current selection point
+ if ( range.collapsed ) {
+ startContainer = range.startContainer;
+ if ( startContainer.nodeType === TEXT_NODE ) {
+ endContainer = startContainer.childNodes[ range.startOffset ];
+ if ( !endContainer || endContainer.nodeType !== TEXT_NODE ) {
+ endContainer =
+ startContainer.childNodes[ range.startOffset - 1 ];
+ }
+ if ( endContainer && endContainer.nodeType === TEXT_NODE ) {
+ range.setStart( endContainer, 0 );
+ range.collapse( true );
+ }
+ }
+ }
+ }
+ return range || null;
+ }
+
+ // --- Undo ---
+
+ _docWasChanged () {
+ nodeCategoryCache = new WeakMap();
+ if ( this._ignoreAllChanges ) {
+ return;
+ }
+
+ if ( this._ignoreChange ) {
+ this._ignoreChange = false;
+ return;
+ }
+ if ( this._isInUndoState ) {
+ this._isInUndoState = false;
+ this.fireEvent( 'undoStateChange', {
+ canUndo: true,
+ canRedo: false
+ });
+ }
+ this.fireEvent( 'input' );
+ }
+
+ // Leaves bookmark
+ _recordUndoState ( range, replace ) {
+ // Don't record if we're already in an undo state
+ if ( !this._isInUndoState|| replace ) {
+ // Advance pointer to new position
+ let undoIndex = this._undoIndex;
+ let undoStack = this._undoStack;
+ let undoConfig = this._config.undo;
+ let undoThreshold = undoConfig.documentSizeThreshold;
+ let undoLimit = undoConfig.undoLimit;
+ let html;
+
+ if ( !replace ) {
+ ++undoIndex;
+ }
+
+ // Truncate stack if longer (i.e. if has been previously undone)
+ if ( undoIndex < this._undoStackLength ) {
+ undoStack.length = this._undoStackLength = undoIndex;
+ }
+
+ // Get data
+ if ( range ) {
+ this._saveRangeToBookmark( range );
+ }
+ html = this._getHTML();
+
+ // If this document is above the configured size threshold,
+ // limit the number of saved undo states.
+ // Threshold is in bytes, JS uses 2 bytes per character
+ if ( undoThreshold > -1 && html.length * 2 > undoThreshold ) {
+ if ( undoLimit > -1 && undoIndex > undoLimit ) {
+ undoStack.splice( 0, undoIndex - undoLimit );
+ undoIndex = undoLimit;
+ this._undoStackLength = undoLimit;
+ }
+ }
+
+ // Save data
+ undoStack[ undoIndex ] = html;
+ this._undoIndex = undoIndex;
+ ++this._undoStackLength;
+ this._isInUndoState = true;
+ }
+ }
+
+ saveUndoState ( range ) {
+ if ( range === undefined ) {
+ range = this.getSelection();
+ }
+ this._recordUndoState( range, this._isInUndoState );
+ this._getRangeAndRemoveBookmark( range );
+
+ return this;
+ }
+
+ undo () {
+ // Sanity check: must not be at beginning of the history stack
+ if ( this._undoIndex !== 0 || !this._isInUndoState ) {
+ // Make sure any changes since last checkpoint are saved.
+ this._recordUndoState( this.getSelection(), false );
+
+ --this._undoIndex;
+ this._setHTML( this._undoStack[ this._undoIndex ] );
+ let range = this._getRangeAndRemoveBookmark();
+ if ( range ) {
+ this.setSelection( range );
+ }
+ this._isInUndoState = true;
+ this.fireEvent( 'undoStateChange', {
+ canUndo: this._undoIndex !== 0,
+ canRedo: true
+ });
+ this.fireEvent( 'input' );
+ }
+ return this;
+ }
+
+ redo () {
+ // Sanity check: must not be at end of stack and must be in an undo
+ // state.
+ let undoIndex = this._undoIndex,
+ undoStackLength = this._undoStackLength;
+ if ( undoIndex + 1 < undoStackLength && this._isInUndoState ) {
+ ++this._undoIndex;
+ this._setHTML( this._undoStack[ this._undoIndex ] );
+ let range = this._getRangeAndRemoveBookmark();
+ if ( range ) {
+ this.setSelection( range );
+ }
+ this.fireEvent( 'undoStateChange', {
+ canUndo: true,
+ canRedo: undoIndex + 2 < undoStackLength
+ });
+ this.fireEvent( 'input' );
+ }
+ return this;
+ }
+
+ // --- Inline formatting ---
+
+ // Looks for matching tag and attributes, so won't work
+ // if instead of etc.
+ hasFormat ( tag, attributes, range ) {
+ // 1. Normalise the arguments and get selection
+ tag = tag.toUpperCase();
+ if ( !attributes ) { attributes = {}; }
+ if ( !range && !( range = this.getSelection() ) ) {
return false;
}
- seenNode = true;
+
+ // Sanitize range to prevent weird IE artifacts
+ if ( !range.collapsed &&
+ range.startContainer.nodeType === TEXT_NODE &&
+ range.startOffset === range.startContainer.length &&
+ range.startContainer.nextSibling ) {
+ range.setStartBefore( range.startContainer.nextSibling );
+ }
+ if ( !range.collapsed &&
+ range.endContainer.nodeType === TEXT_NODE &&
+ range.endOffset === 0 &&
+ range.endContainer.previousSibling ) {
+ range.setEndAfter( range.endContainer.previousSibling );
+ }
+
+ // If the common ancestor is inside the tag we require, we definitely
+ // have the format.
+ let root = this._root;
+ let common = range.commonAncestorContainer;
+ let walker, node;
+ if ( getNearest( common, root, tag, attributes ) ) {
+ return true;
+ }
+
+ // If common ancestor is a text node and doesn't have the format, we
+ // definitely don't have it.
+ if ( common.nodeType === TEXT_NODE ) {
+ return false;
+ }
+
+ // Otherwise, check each text node at least partially contained within
+ // the selection and make sure all of them have the format we want.
+ walker = createTreeWalker( common, SHOW_TEXT, node => isNodeContainedInRange( range, node ) );
+
+ let seenNode = false;
+ while ( node = walker.nextNode() ) {
+ if ( !getNearest( node, root, tag, attributes ) ) {
+ return false;
+ }
+ seenNode = true;
+ }
+
+ return seenNode;
}
- return seenNode;
-};
+ // Extracts the font-family and font-size (if any) of the element
+ // holding the cursor. If there's a selection, returns an empty object.
+ getFontInfo ( range ) {
+ let fontInfo = {
+ color: undefined,
+ backgroundColor: undefined,
+ family: undefined,
+ size: undefined
+ };
+ let seenAttributes = 0;
+ let element, style, attr;
-// Extracts the font-family and font-size (if any) of the element
-// holding the cursor. If there's a selection, returns an empty object.
-proto.getFontInfo = function ( range ) {
- let fontInfo = {
- color: undefined,
- backgroundColor: undefined,
- family: undefined,
- size: undefined
- };
- let seenAttributes = 0;
- let element, style, attr;
+ if ( !range && !( range = this.getSelection() ) ) {
+ return fontInfo;
+ }
- if ( !range && !( range = this.getSelection() ) ) {
+ element = range.commonAncestorContainer;
+ if ( range.collapsed || element.nodeType === TEXT_NODE ) {
+ if ( element.nodeType === TEXT_NODE ) {
+ element = element.parentNode;
+ }
+ while ( seenAttributes < 4 && element ) {
+ if ( style = element.style ) {
+ if ( !fontInfo.color && ( attr = style.color ) ) {
+ fontInfo.color = attr;
+ ++seenAttributes;
+ }
+ if ( !fontInfo.backgroundColor &&
+ ( attr = style.backgroundColor ) ) {
+ fontInfo.backgroundColor = attr;
+ ++seenAttributes;
+ }
+ if ( !fontInfo.family && ( attr = style.fontFamily ) ) {
+ fontInfo.family = attr;
+ ++seenAttributes;
+ }
+ if ( !fontInfo.size && ( attr = style.fontSize ) ) {
+ fontInfo.size = attr;
+ ++seenAttributes;
+ }
+ }
+ element = element.parentNode;
+ }
+ }
return fontInfo;
}
- element = range.commonAncestorContainer;
- if ( range.collapsed || element.nodeType === TEXT_NODE ) {
- if ( element.nodeType === TEXT_NODE ) {
- element = element.parentNode;
- }
- while ( seenAttributes < 4 && element ) {
- if ( style = element.style ) {
- if ( !fontInfo.color && ( attr = style.color ) ) {
- fontInfo.color = attr;
- ++seenAttributes;
- }
- if ( !fontInfo.backgroundColor &&
- ( attr = style.backgroundColor ) ) {
- fontInfo.backgroundColor = attr;
- ++seenAttributes;
- }
- if ( !fontInfo.family && ( attr = style.fontFamily ) ) {
- fontInfo.family = attr;
- ++seenAttributes;
- }
- if ( !fontInfo.size && ( attr = style.fontSize ) ) {
- fontInfo.size = attr;
- ++seenAttributes;
- }
+ _addFormat ( tag, attributes, range ) {
+ // If the range is collapsed we simply insert the node by wrapping
+ // it round the range and focus it.
+ let root = this._root;
+ let el, walker, startContainer, endContainer, startOffset, endOffset,
+ node, needsFormat, block;
+
+ if ( range.collapsed ) {
+ el = fixCursor( createElement( tag, attributes ), root );
+ insertNodeInRange( range, el );
+ range.setStart( el.firstChild, el.firstChild.length );
+ range.collapse( true );
+
+ // Clean up any previous formats that may have been set on this block
+ // that are unused.
+ block = el;
+ while ( isInline( block ) ) {
+ block = block.parentNode;
}
- element = element.parentNode;
+ removeZWS( block, el );
}
- }
- return fontInfo;
-};
+ // Otherwise we find all the textnodes in the range (splitting
+ // partially selected nodes) and if they're not already formatted
+ // correctly we wrap them in the appropriate tag.
+ else {
+ // Create an iterator to walk over all the text nodes under this
+ // ancestor which are in the range and not already formatted
+ // correctly.
+ //
+ // In Blink/WebKit, empty blocks may have no text nodes, just a
. + // Therefore we wrap this in the tag as well, as this will then cause it + // to apply when the user types something in the block, which is + // presumably what was intended. + // + // IMG tags are included because we may want to create a link around + // them, and adding other styles is harmless. + walker = createTreeWalker( + range.commonAncestorContainer, + SHOW_TEXT|SHOW_ELEMENT, + node => ( node.nodeType === TEXT_NODE || + node.nodeName === 'BR' || + node.nodeName === 'IMG' + ) && isNodeContainedInRange( range, node ) + ); -proto._addFormat = function ( tag, attributes, range ) { - // If the range is collapsed we simply insert the node by wrapping - // it round the range and focus it. - let root = this._root; - let el, walker, startContainer, endContainer, startOffset, endOffset, - node, needsFormat, block; + // Start at the beginning node of the range and iterate through + // all the nodes in the range that need formatting. + startContainer = range.startContainer; + startOffset = range.startOffset; + endContainer = range.endContainer; + endOffset = range.endOffset; - if ( range.collapsed ) { - el = fixCursor( createElement( tag, attributes ), root ); - insertNodeInRange( range, el ); - range.setStart( el.firstChild, el.firstChild.length ); - range.collapse( true ); + // Make sure we start with a valid node. + walker.currentNode = startContainer; + if ( filterAccept != walker.filter.acceptNode( startContainer ) ) { + startContainer = walker.nextNode(); + startOffset = 0; + } - // Clean up any previous formats that may have been set on this block - // that are unused. - block = el; - while ( isInline( block ) ) { - block = block.parentNode; - } - removeZWS( block, el ); - } - // Otherwise we find all the textnodes in the range (splitting - // partially selected nodes) and if they're not already formatted - // correctly we wrap them in the appropriate tag. - else { - // Create an iterator to walk over all the text nodes under this - // ancestor which are in the range and not already formatted - // correctly. - // - // In Blink/WebKit, empty blocks may have no text nodes, just a
. - // Therefore we wrap this in the tag as well, as this will then cause it - // to apply when the user types something in the block, which is - // presumably what was intended. - // - // IMG tags are included because we may want to create a link around - // them, and adding other styles is harmless. - walker = createTreeWalker( - range.commonAncestorContainer, - SHOW_TEXT|SHOW_ELEMENT, - node => ( node.nodeType === TEXT_NODE || - node.nodeName === 'BR' || - node.nodeName === 'IMG' - ) && isNodeContainedInRange( range, node ) - ); + // If there are no interesting nodes in the selection, abort + if ( !startContainer ) { + return range; + } - // Start at the beginning node of the range and iterate through - // all the nodes in the range that need formatting. - startContainer = range.startContainer; - startOffset = range.startOffset; - endContainer = range.endContainer; - endOffset = range.endOffset; - - // Make sure we start with a valid node. - walker.currentNode = startContainer; - if ( filterAccept != walker.filter.acceptNode( startContainer ) ) { - startContainer = walker.nextNode(); - startOffset = 0; - } - - // If there are no interesting nodes in the selection, abort - if ( !startContainer ) { - return range; - } - - do { - node = walker.currentNode; - needsFormat = !getNearest( node, root, tag, attributes ); - if ( needsFormat ) { - //
can never be a container node, so must have a text node - // if node == (end|start)Container - if ( node === endContainer && node.length > endOffset ) { - node.splitText( endOffset ); - } - if ( node === startContainer && startOffset ) { - node = node.splitText( startOffset ); - if ( endContainer === startContainer ) { - endContainer = node; - endOffset -= startOffset; + do { + node = walker.currentNode; + needsFormat = !getNearest( node, root, tag, attributes ); + if ( needsFormat ) { + //
can never be a container node, so must have a text node + // if node == (end|start)Container + if ( node === endContainer && node.length > endOffset ) { + node.splitText( endOffset ); } - startContainer = node; - startOffset = 0; + if ( node === startContainer && startOffset ) { + node = node.splitText( startOffset ); + if ( endContainer === startContainer ) { + endContainer = node; + endOffset -= startOffset; + } + startContainer = node; + startOffset = 0; + } + el = createElement( tag, attributes ); + node.replaceWith( el ); + el.append( node ); } - el = createElement( tag, attributes ); - node.replaceWith( el ); - el.append( node ); - } - } while ( walker.nextNode() ); + } while ( walker.nextNode() ); - // If we don't finish inside a text node, offset may have changed. - if ( endContainer.nodeType !== TEXT_NODE ) { - if ( node.nodeType === TEXT_NODE ) { - endContainer = node; - endOffset = node.length; - } else { - // If
, we must have just wrapped it, so it must have only - // one child - endContainer = node.parentNode; - endOffset = 1; + // If we don't finish inside a text node, offset may have changed. + if ( endContainer.nodeType !== TEXT_NODE ) { + if ( node.nodeType === TEXT_NODE ) { + endContainer = node; + endOffset = node.length; + } else { + // If
, we must have just wrapped it, so it must have only + // one child + endContainer = node.parentNode; + endOffset = 1; + } } + + // Now set the selection to as it was before + range = createRange( + startContainer, startOffset, endContainer, endOffset ); + } + return range; + } + + _removeFormat ( tag, attributes, range, partial ) { + // Add bookmark + this._saveRangeToBookmark( range ); + + // We need a node in the selection to break the surrounding + // formatted text. + let fixer; + if ( range.collapsed ) { + fixer = this._addZWS(); + insertNodeInRange( range, fixer ); } - // Now set the selection to as it was before - range = this.createRange( - startContainer, startOffset, endContainer, endOffset ); + // Find block-level ancestor of selection + let root = range.commonAncestorContainer; + while ( isInline( root ) ) { + root = root.parentNode; + } + + // Find text nodes inside formatTags that are not in selection and + // add an extra tag with the same formatting. + let startContainer = range.startContainer, + startOffset = range.startOffset, + endContainer = range.endContainer, + endOffset = range.endOffset, + toWrap = [], + examineNode = ( node, exemplar ) => { + // If the node is completely contained by the range then + // we're going to remove all formatting so ignore it. + if ( isNodeContainedInRange( range, node, false ) ) { + return; + } + + let isText = ( node.nodeType === TEXT_NODE ), + child, next; + + // If not at least partially contained, wrap entire contents + // in a clone of the tag we're removing and we're done. + if ( !isNodeContainedInRange( range, node ) ) { + // Ignore bookmarks and empty text nodes + if ( node.nodeName !== 'INPUT' && + ( !isText || node.data ) ) { + toWrap.push([ exemplar, node ]); + } + return; + } + + // Split any partially selected text nodes. + if ( isText ) { + if ( node === endContainer && endOffset !== node.length ) { + toWrap.push([ exemplar, node.splitText( endOffset ) ]); + } + if ( node === startContainer && startOffset ) { + node.splitText( startOffset ); + toWrap.push([ exemplar, node ]); + } + } + // If not a text node, recurse onto all children. + // Beware, the tree may be rewritten with each call + // to examineNode, hence find the next sibling first. + else { + for ( child = node.firstChild; child; child = next ) { + next = child.nextSibling; + examineNode( child, exemplar ); + } + } + }, + formatTags = Array.prototype.filter.call( + root.getElementsByTagName( tag ), + el => isNodeContainedInRange( range, el ) && hasTagAttributes( el, tag, attributes ) + ); + + if ( !partial ) { + formatTags.forEach( node => examineNode( node, node ) ); + } + + // Now wrap unselected nodes in the tag + toWrap.forEach( item => { + // [ exemplar, node ] tuple + let el = item[0].cloneNode( false ), + node = item[1]; + node.replaceWith( el ); + el.append( node ); + }); + // and remove old formatting tags. + formatTags.forEach( el => el.replaceWith( empty( el ) ) ); + + // Merge adjacent inlines: + this._getRangeAndRemoveBookmark( range ); + if ( fixer ) { + range.collapse( false ); + } + mergeInlines( root, range ); + + return range; } - return range; -}; -proto._removeFormat = function ( tag, attributes, range, partial ) { - // Add bookmark - this._saveRangeToBookmark( range ); - - // We need a node in the selection to break the surrounding - // formatted text. - let fixer; - if ( range.collapsed ) { - if ( isWebKit ) { - fixer = doc.createTextNode( ZWS ); - this._didAddZWS(); + toggleTag ( name, remove ) { + let range = this.getSelection(); + if ( this.hasFormat( name, null, range ) ) { + this.changeFormat ( null, { tag: name }, range ); } else { - fixer = doc.createTextNode( '' ); + this.changeFormat ( { tag: name }, remove ? { tag: remove } : null, range ); } - insertNodeInRange( range, fixer ); } - // Find block-level ancestor of selection - let root = range.commonAncestorContainer; - while ( isInline( root ) ) { - root = root.parentNode; - } - - // Find text nodes inside formatTags that are not in selection and - // add an extra tag with the same formatting. - let startContainer = range.startContainer, - startOffset = range.startOffset, - endContainer = range.endContainer, - endOffset = range.endOffset, - toWrap = [], - examineNode = ( node, exemplar ) => { - // If the node is completely contained by the range then - // we're going to remove all formatting so ignore it. - if ( isNodeContainedInRange( range, node, false ) ) { - return; - } - - let isText = ( node.nodeType === TEXT_NODE ), - child, next; - - // If not at least partially contained, wrap entire contents - // in a clone of the tag we're removing and we're done. - if ( !isNodeContainedInRange( range, node ) ) { - // Ignore bookmarks and empty text nodes - if ( node.nodeName !== 'INPUT' && - ( !isText || node.data ) ) { - toWrap.push([ exemplar, node ]); - } - return; - } - - // Split any partially selected text nodes. - if ( isText ) { - if ( node === endContainer && endOffset !== node.length ) { - toWrap.push([ exemplar, node.splitText( endOffset ) ]); - } - if ( node === startContainer && startOffset ) { - node.splitText( startOffset ); - toWrap.push([ exemplar, node ]); - } - } - // If not a text node, recurse onto all children. - // Beware, the tree may be rewritten with each call - // to examineNode, hence find the next sibling first. - else { - for ( child = node.firstChild; child; child = next ) { - next = child.nextSibling; - examineNode( child, exemplar ); - } - } - }, - formatTags = Array.prototype.filter.call( - root.getElementsByTagName( tag ), - el => isNodeContainedInRange( range, el ) && hasTagAttributes( el, tag, attributes ) - ); - - if ( !partial ) { - formatTags.forEach( node => examineNode( node, node ) ); - } - - // Now wrap unselected nodes in the tag - toWrap.forEach( item => { - // [ exemplar, node ] tuple - let el = item[0].cloneNode( false ), - node = item[1]; - node.replaceWith( el ); - el.append( node ); - }); - // and remove old formatting tags. - formatTags.forEach( el => el.replaceWith( empty( el ) ) ); - - // Merge adjacent inlines: - this._getRangeAndRemoveBookmark( range ); - if ( fixer ) { - range.collapse( false ); - } - mergeInlines( root, range ); - - return range; -}; - -proto.changeFormat = function ( add, remove, range, partial ) { - // Normalise the arguments and get selection - if ( !range && !( range = this.getSelection() ) ) { - return this; - } - - // Save undo checkpoint - this.saveUndoState( range ); - - if ( remove ) { - range = this._removeFormat( remove.tag.toUpperCase(), - remove.attributes || {}, range, partial ); - } - if ( add ) { - range = this._addFormat( add.tag.toUpperCase(), - add.attributes || {}, range ); - } - - this.setSelection( range ); - this._updatePath( range, true ); - - return this; -}; - -// --- Block formatting --- - -let tagAfterSplit = { - DT: 'DD', - DD: 'DT', - LI: 'LI', - PRE: 'PRE' -}; - -let splitBlock = ( self, block, node, offset ) => { - let splitTag = tagAfterSplit[ block.nodeName ], - splitProperties = null, - nodeAfterSplit = split( node, offset, block.parentNode, self._root ), - config = self._config; - - if ( !splitTag ) { - splitTag = config.blockTag; - splitProperties = config.blockAttributes; - } - - // Make sure the new node is the correct type. - if ( !hasTagAttributes( nodeAfterSplit, splitTag, splitProperties ) ) { - block = createElement( splitTag, splitProperties ); - if ( nodeAfterSplit.dir ) { - block.dir = nodeAfterSplit.dir; + changeFormat ( add, remove, range, partial ) { + // Normalise the arguments and get selection + if ( !range && !( range = this.getSelection() ) ) { + return this; } - nodeAfterSplit.replaceWith( block ); - block.append( empty( nodeAfterSplit ) ); - nodeAfterSplit = block; - } - return nodeAfterSplit; -}; -proto.forEachBlock = function ( fn, mutates, range ) { - if ( !range && !( range = this.getSelection() ) ) { - return this; - } - - // Save undo checkpoint - if ( mutates ) { + // Save undo checkpoint this.saveUndoState( range ); + + if ( remove ) { + range = this._removeFormat( remove.tag.toUpperCase(), + remove.attributes || {}, range, partial ); + } + + if ( add ) { + range = this._addFormat( add.tag.toUpperCase(), + add.attributes || {}, range ); + } + + this.setSelection( range ); + this._updatePath( range, true ); + + return this; } - let root = this._root; - let start = getStartBlockOfRange( range, root ); - let end = getEndBlockOfRange( range, root ); - if ( start && end ) { - do { - if ( fn( start ) || start === end ) { break; } - } while ( start = getNextBlock( start, root ) ); - } + // --- Block formatting --- + + forEachBlock ( fn, range ) { + if ( !range && !( range = this.getSelection() ) ) { + return this; + } + + // Save undo checkpoint + this.saveUndoState( range ); + + let root = this._root; + let start = getStartBlockOfRange( range, root ); + let end = getEndBlockOfRange( range, root ); + if ( start && end ) { + do { + if ( fn( start ) || start === end ) { break; } + } while ( start = getNextBlock( start, root ) ); + } - if ( mutates ) { this.setSelection( range ); // Path may have changed this._updatePath( range, true ); - } - return this; -}; -proto.modifyBlocks = function ( modify, range ) { - if ( !range && !( range = this.getSelection() ) ) { return this; } - // 1. Save undo checkpoint and bookmark selection - this._recordUndoState( range, this._isInUndoState ); - - let root = this._root; - let frag; - - // 2. Expand range to block boundaries - expandRangeToBlockBoundaries( range, root ); - - // 3. Remove range. - moveRangeBoundariesUpTree( range, root, root, root ); - frag = extractContentsOfRange( range, root, root ); - - // 4. Modify tree of fragment and reinsert. - insertNodeInRange( range, modify.call( this, frag ) ); - - // 5. Merge containers at edges - if ( range.endOffset < range.endContainer.childNodes.length ) { - mergeContainers( range.endContainer.childNodes[ range.endOffset ], root ); - } - mergeContainers( range.startContainer.childNodes[ range.startOffset ], root ); - - // 6. Restore selection - this._getRangeAndRemoveBookmark( range ); - this.setSelection( range ); - this._updatePath( range, true ); - - return this; -}; - -let increaseBlockQuoteLevel = function ( frag ) { - return createElement( 'BLOCKQUOTE', - this._config.tagAttributes.blockquote, [ - frag - ]); -}; - -let decreaseBlockQuoteLevel = frag => { - var blockquotes = frag.querySelectorAll( 'blockquote' ); - Array.prototype.filter.call( blockquotes, el => - !getClosest( el.parentNode, frag, 'BLOCKQUOTE' ) - ).forEach( el => el.replaceWith( empty( el ) ) ); - return frag; -}; - -let makeList = ( self, frag, type ) => { - let walker = getBlockWalker( frag, self._root ), - node, tag, prev, newLi, - tagAttributes = self._config.tagAttributes, - listAttrs = tagAttributes[ type.toLowerCase() ], - listItemAttrs = tagAttributes.li; - - while ( node = walker.nextNode() ) { - if ( node.parentNode.nodeName === 'LI' ) { - node = node.parentNode; - walker.currentNode = node.lastChild; - } - if ( node.nodeName !== 'LI' ) { - newLi = createElement( 'LI', listItemAttrs ); - if ( node.dir ) { - newLi.dir = node.dir; - } - - // Have we replaced the previous block with a new
-// elements at the end of each block will then have them added back in a later -// fixCursor method call. -let cleanupBRs = ( node, root, keepForBlankLine ) => { - let brs = node.querySelectorAll( 'BR' ); - let brBreaksLine = []; - let l = brs.length; - let i, br, parent; - - // Must calculate whether the
breaks a line first, because if we - // have two
s next to each other, after the first one is converted - // to a block split, the second will be at the end of a block and - // therefore seem to not be a line break. But in its original context it - // was, so we should also convert it to a block split. - for ( i = 0; i < l; ++i ) { - brBreaksLine[i] = isLineBreak( brs[i], keepForBlankLine ); - } - while ( l-- ) { - br = brs[l]; - // Cleanup may have removed it - parent = br.parentNode; - if ( !parent ) { continue; } - // If it doesn't break a line, just remove it; it's not doing - // anything useful. We'll add it back later if required by the - // browser. If it breaks a line, wrap the content in div tags - // and replace the brs. - if ( !brBreaksLine[l] ) { - detach( br ); - } else if ( !isInline( parent ) ) { - fixContainer( parent, root ); - } - } -}; - -// The (non-standard but supported enough) innerText property is based on the -// render tree in Firefox and possibly other browsers, so we must insert the -// DOM node into the document to ensure the text part is correct. -let setClipboardData = - ( event, contents, root, willCutCopy, toPlainText, plainTextOnly ) => { - let clipboardData = event.clipboardData; - let body = doc.body; - let node = createElement( 'div' ); - let html, text; - - node.append( contents ); - - html = node.innerHTML; - if ( willCutCopy ) { - html = willCutCopy( html ); - } - - if ( toPlainText ) { - text = toPlainText( html ); - } else { - // Firefox will add an extra new line for BRs at the end of block when - // calculating innerText, even though they don't actually affect - // display, so we need to remove them first. - cleanupBRs( node, root, true ); - node.setAttribute( 'style', - 'position:fixed;overflow:hidden;bottom:100%;right:100%;' ); - body.append( node ); - text = node.innerText || node.textContent; - text = text.replace( NBSP, ' ' ); // Replace nbsp with regular space - node.remove( ); - } - // Firefox (and others?) returns unix line endings (\n) even on Windows. - // If on Windows, normalise to \r\n, since Notepad and some other crappy - // apps do not understand just \n. - if ( isWin ) { - text = text.replace( /\r?\n/g, '\r\n' ); - } - - if ( !plainTextOnly && text !== html ) { - clipboardData.setData( 'text/html', html ); - } - clipboardData.setData( 'text/plain', text ); - event.preventDefault(); -}; - -let onCut = function ( event ) { - let range = this.getSelection(); - let root = this._root; - let self = this; - let startBlock, endBlock, copyRoot, contents, parent, newContents; - - // Nothing to do - if ( range.collapsed ) { - event.preventDefault(); - return; - } - - // Save undo checkpoint - this.saveUndoState( range ); - - // Edge only seems to support setting plain text as of 2016-03-11. - if ( !isEdge && event.clipboardData ) { - // Clipboard content should include all parents within block, or all - // parents up to root if selection across blocks - startBlock = getStartBlockOfRange( range, root ); - endBlock = getEndBlockOfRange( range, root ); - copyRoot = ( ( startBlock === endBlock ) && startBlock ) || root; - // Extract the contents - contents = deleteContentsOfRange( range, root ); - // Add any other parents not in extracted content, up to copy root - parent = range.commonAncestorContainer; - if ( parent.nodeType === TEXT_NODE ) { - parent = parent.parentNode; - } - while ( parent && parent !== copyRoot ) { - newContents = parent.cloneNode( false ); - newContents.append( contents ); - contents = newContents; - parent = parent.parentNode; - } - // Set clipboard data - setClipboardData( - event, contents, root, this._config.willCutCopy, null, false ); - } else { - setTimeout( () => { - try { - // If all content removed, ensure div at start of root. - self._ensureBottomLine(); - } catch ( error ) { - self.didError( error ); - } - }, 0 ); - } - - this.setSelection( range ); -}; - -let onCopy = function ( event ) { - // Edge only seems to support setting plain text as of 2016-03-11. - if ( !isEdge && event.clipboardData ) { - let range = this.getSelection(), root = this._root, - // Clipboard content should include all parents within block, or all - // parents up to root if selection across blocks - startBlock = getStartBlockOfRange( range, root ), - endBlock = getEndBlockOfRange( range, root ), - copyRoot = ( ( startBlock === endBlock ) && startBlock ) || root, - contents, parent, newContents; - // Clone range to mutate, then move up as high as possible without - // passing the copy root node. - range = range.cloneRange(); - moveRangeBoundariesDownTree( range ); - moveRangeBoundariesUpTree( range, copyRoot, copyRoot, root ); - // Extract the contents - contents = range.cloneContents(); - // Add any other parents not in extracted content, up to copy root - parent = range.commonAncestorContainer; - if ( parent.nodeType === TEXT_NODE ) { - parent = parent.parentNode; - } - while ( parent && parent !== copyRoot ) { - newContents = parent.cloneNode( false ); - newContents.append( contents ); - contents = newContents; - parent = parent.parentNode; - } - // Set clipboard data - setClipboardData( event, contents, root, this._config.willCutCopy, null, false ); - } -}; - -// Need to monitor for shift key like this, as event.shiftKey is not available -// in paste event. -function monitorShiftKey ( event ) { - this.isShiftDown = event.shiftKey; -} - -let onPaste = function ( event ) { - let clipboardData = event.clipboardData; - let items = clipboardData && clipboardData.items; - let choosePlain = this.isShiftDown; - let fireDrop = false; - let hasRTF = false; - let hasImage = false; - let plainItem = null; - let htmlItem = null; - let self = this; - let l, item, type, types, data; - - // Current HTML5 Clipboard interface - // --------------------------------- - // https://html.spec.whatwg.org/multipage/interaction.html - if ( items ) { - l = items.length; - while ( l-- ) { - item = items[l]; - type = item.type; - if ( type === 'text/html' ) { - htmlItem = item; - // iOS copy URL gives you type text/uri-list which is just a list - // of 1 or more URLs separated by new lines. Can just treat as - // plain text. - } else if ( type === 'text/plain' || type === 'text/uri-list' ) { - plainItem = item; - } else if ( type === 'text/rtf' ) { - hasRTF = true; - } else if ( /^image\/.*/.test( type ) ) { - hasImage = true; - } - } - - // Treat image paste as a drop of an image file. When you copy - // an image in Chrome/Firefox (at least), it copies the image data - // but also an HTML version (referencing the original URL of the image) - // and a plain text version. - // - // However, when you copy in Excel, you get html, rtf, text, image; - // in this instance you want the html version! So let's try using - // the presence of text/rtf as an indicator to choose the html version - // over the image. - if ( hasImage && !( hasRTF && htmlItem ) ) { - event.preventDefault(); - this.fireEvent( 'dragover', { - dataTransfer: clipboardData, - /*jshint loopfunc: true */ - preventDefault: () => fireDrop = true - /*jshint loopfunc: false */ - }); - if ( fireDrop ) { - this.fireEvent( 'drop', { - dataTransfer: clipboardData - }); - } - return; - } - - // Edge only provides access to plain text as of 2016-03-11 and gives no - // indication there should be an HTML part. However, it does support - // access to image data, so we check for that first. Otherwise though, - // fall through to fallback clipboard handling methods - if ( !isEdge ) { - event.preventDefault(); - if ( htmlItem && ( !choosePlain || !plainItem ) ) { - htmlItem.getAsString( html => self.insertHTML( html, true ) ); - } else if ( plainItem ) { - plainItem.getAsString( text => self.insertPlainText( text, true ) ); - } - return; - } - } - - // Safari (and indeed many other OS X apps) copies stuff as text/rtf - // rather than text/html; even from a webpage in Safari. The only way - // to get an HTML version is to fallback to letting the browser insert - // the content. Same for getting image data. *Sigh*. - types = clipboardData && clipboardData.types; - if ( !isEdge && types && ( - indexOf( types, 'text/html' ) > -1 || ( - !isGecko && - indexOf( types, 'text/plain' ) > -1 && - indexOf( types, 'text/rtf' ) < 0 ) - )) { - event.preventDefault(); - // Abiword on Linux copies a plain text and html version, but the HTML - // version is the empty string! So always try to get HTML, but if none, - // insert plain text instead. On iOS, Facebook (and possibly other - // apps?) copy links as type text/uri-list, but also insert a **blank** - // text/plain item onto the clipboard. Why? Who knows. - if ( !choosePlain && ( data = clipboardData.getData( 'text/html' ) ) ) { - this.insertHTML( data, true ); - } else if ( - ( data = clipboardData.getData( 'text/plain' ) ) || - ( data = clipboardData.getData( 'text/uri-list' ) ) ) { - this.insertPlainText( data, true ); - } - return; - } -}; - -// On Windows you can drag an drop text. We can't handle this ourselves, because -// as far as I can see, there's no way to get the drop insertion point. So just -// save an undo state and hope for the best. -let onDrop = function ( event ) { - let types = event.dataTransfer.types; - let l = types.length; - let hasPlain = false; - let hasHTML = false; - while ( l-- ) { - switch ( types[l] ) { - case 'text/plain': - hasPlain = true; - break; - case 'text/html': - hasHTML = true; - break; - default: - return; - } - } - if ( hasHTML || hasPlain ) { - this.saveUndoState(); - } -}; - -function mergeObjects ( base, extras, mayOverride ) { - let prop, value; - if ( !base ) { - base = {}; - } - if ( extras ) { - for ( prop in extras ) { - if ( mayOverride || !( prop in base ) ) { - value = extras[ prop ]; - base[ prop ] = ( value && value.constructor === Object ) ? - mergeObjects( base[ prop ], value, mayOverride ) : - value; - } - } - } - return base; -} - -function Squire ( root, config ) { - this._root = root; - - this._events = {}; - - this._isFocused = false; - this._lastRange = null; - - this._hasZWS = false; - - this._lastAnchorNode = null; - this._lastFocusNode = null; - this._path = ''; - - let _willUpdatePath; - const selectionchange = () => { - if (root.contains(doc.activeElement)) { - if ( this._isFocused && !_willUpdatePath ) { - _willUpdatePath = setTimeout( () => { - _willUpdatePath = 0; - this._updatePath( this.getSelection() ); - }, 0 ); - } - } else { - this.removeEventListener('selectionchange', selectionchange); - } - }; - this.addEventListener('selectstart', () => this.addEventListener('selectionchange', selectionchange)); - - this._undoIndex = -1; - this._undoStack = []; - this._undoStackLength = 0; - this._isInUndoState = false; - this._ignoreChange = false; - this._ignoreAllChanges = false; - - this._mutation = new MutationObserver( ()=>this._docWasChanged() ); - this._mutation.observe( root, { - childList: true, - attributes: true, - characterData: true, - subtree: true - }); - - // On blur, restore focus except if the user taps or clicks to focus a - // specific point. Can't actually use click event because focus happens - // before click, so use mousedown/touchstart - this._restoreSelection = false; - // https://caniuse.com/mdn-api_document_pointerup_event - this.addEventListener( 'blur', () => this._restoreSelection = true ) - .addEventListener( 'pointerdown mousedown touchstart', () => this._restoreSelection = false ) - .addEventListener( 'focus', () => this._restoreSelection && this.setSelection( this._lastRange ) ) - .addEventListener( 'cut', onCut ) - .addEventListener( 'copy', onCopy ) - .addEventListener( 'keydown keyup', monitorShiftKey ) - .addEventListener( 'paste', onPaste ) - .addEventListener( 'drop', onDrop ) - .addEventListener( 'keydown', onKey ) - .addEventListener( 'pointerup keyup mouseup touchend', ()=>this.getSelection() ); - - // Add key handlers - this._keyHandlers = Object.create( keyHandlers ); - - // Override default properties - this.setConfig( config ); - - root.setAttribute( 'contenteditable', 'true' ); - // Grammarly breaks the editor, *sigh* - root.setAttribute( 'data-gramm', 'false' ); - - // Remove Firefox's built-in controls - try { - doc.execCommand( 'enableObjectResizing', false, 'false' ); - doc.execCommand( 'enableInlineTableEditing', false, 'false' ); - } catch ( error ) {} - - root.__squire__ = this; - - // Need to register instance before calling setHTML, so that the fixCursor - // function can lookup any default block tag options set. - this.setHTML( '' ); -} - -let proto = Squire.prototype; - -let sanitizeToDOMFragment = ( html ) => { - let frag = html ? win.DOMPurify.sanitize( html, { - ALLOW_UNKNOWN_PROTOCOLS: true, - WHOLE_DOCUMENT: false, - RETURN_DOM: true, - RETURN_DOM_FRAGMENT: true - }) : null; - return frag ? doc.importNode( frag, true ) : doc.createDocumentFragment(); -}; - -proto.setConfig = function ( config ) { - config = mergeObjects({ - blockTag: 'DIV', - blockAttributes: null, - tagAttributes: { - blockquote: null, - ul: null, - ol: null, - li: null, - a: null - }, - classNames: { - colour: 'colour', - fontFamily: 'font', - fontSize: 'size', - highlight: 'highlight' - }, - leafNodeNames: leafNodeNames, - undo: { - documentSizeThreshold: -1, // -1 means no threshold - undoLimit: -1 // -1 means no limit - }, - isInsertedHTMLSanitized: true, - isSetHTMLSanitized: true, - sanitizeToDOMFragment: win.DOMPurify && win.DOMPurify.isSupported ? sanitizeToDOMFragment : null, - willCutCopy: null, - addLinks: true - }, config, true ); - - // Users may specify block tag in lower case - config.blockTag = config.blockTag.toUpperCase(); - - this._config = config; - - return this; -}; - -proto.createDefaultBlock = function ( children ) { - let config = this._config; - return fixCursor( - createElement( config.blockTag, config.blockAttributes, children ), - this._root - ); -}; - -proto.didError = error => console.error( error ); - -proto.getRoot = function () { - return this._root; -}; - -proto.modifyDocument = function ( modificationCallback ) { - let mutation = this._mutation; - if ( mutation ) { - if ( mutation.takeRecords().length ) { - this._docWasChanged(); - } - mutation.disconnect(); - } - - this._ignoreAllChanges = true; - modificationCallback(); - this._ignoreAllChanges = false; - - if ( mutation ) { - mutation.observe( this._root, { + this._mutation = new MutationObserver( ()=>this._docWasChanged() ); + this._mutation.observe( root, { childList: true, attributes: true, characterData: true, subtree: true }); - this._ignoreChange = false; + + // On blur, restore focus except if the user taps or clicks to focus a + // specific point. Can't actually use click event because focus happens + // before click, so use mousedown/touchstart + this._restoreSelection = false; + // https://caniuse.com/mdn-api_document_pointerup_event + this.addEventListener( 'blur', () => this._restoreSelection = true ) + .addEventListener( 'pointerdown mousedown touchstart', () => this._restoreSelection = false ) + .addEventListener( 'focus', () => this._restoreSelection && this.setSelection( this._lastRange ) ) + .addEventListener( 'cut', onCut ) + .addEventListener( 'copy', onCopy ) + .addEventListener( 'keydown keyup', monitorShiftKey ) + .addEventListener( 'paste', onPaste ) + .addEventListener( 'drop', onDrop ) + .addEventListener( 'keydown', onKey ) + .addEventListener( 'pointerup keyup mouseup touchend', ()=>this.getSelection() ); + + // Add key handlers + this._keyHandlers = Object.create( keyHandlers ); + + // Override default properties + this.setConfig( config ); + + root.setAttribute( 'contenteditable', 'true' ); + // Grammarly breaks the editor, *sigh* + root.setAttribute( 'data-gramm', 'false' ); + + // Remove Firefox's built-in controls + try { + doc.execCommand( 'enableObjectResizing', false, 'false' ); + doc.execCommand( 'enableInlineTableEditing', false, 'false' ); + } catch ( error ) {} + + root.__squire__ = this; + + // Need to register instance before calling setHTML, so that the fixCursor + // function can lookup any default block tag options set. + this.setHTML( '' ); } -}; -// --- Events --- + setConfig ( config ) { + config = mergeObjects({ + blockTag: 'DIV', + undo: { + documentSizeThreshold: -1, // -1 means no threshold + undoLimit: -1 // -1 means no limit + }, + sanitizeToDOMFragment: null, + addLinks: true + }, config, true ); -// Subscribing to these events won't automatically add a listener to the -// document node, since these events are fired in a custom manner by the -// editor code. -let customEvents = { - pathChange: 1, select: 1, input: 1, undoStateChange: 1 -}; + // Users may specify block tag in lower case + config.blockTag = config.blockTag.toUpperCase(); -proto.fireEvent = function ( type, event ) { - let handlers = this._events[ type ]; - let isFocused, l, obj; - // UI code, especially modal views, may be monitoring for focus events and - // immediately removing focus. In certain conditions, this can cause the - // focus event to fire after the blur event, which can cause an infinite - // loop. So we detect whether we're actually focused/blurred before firing. - if ( /^(?:focus|blur)/.test( type ) ) { - isFocused = this._root === doc.activeElement; - if ( type === 'focus' ) { - if ( !isFocused || this._isFocused ) { - return this; + this._config = config; + + return this; + } + + createDefaultBlock ( children ) { + let config = this._config; + return fixCursor( + createElement( config.blockTag, null, children ), + this._root + ); + } + + getRoot () { + return this._root; + } + + modifyDocument ( modificationCallback ) { + let mutation = this._mutation; + if ( mutation ) { + if ( mutation.takeRecords().length ) { + this._docWasChanged(); } - this._isFocused = true; - } else { - if ( isFocused || !this._isFocused ) { - return this; - } - this._isFocused = false; + mutation.disconnect(); } - } - if ( handlers ) { - if ( !event ) { - event = {}; - } - if ( event.type !== type ) { - event.type = type; - } - // Clone handlers array, so any handlers added/removed do not affect it. - handlers = handlers.slice(); - l = handlers.length; - while ( l-- ) { - obj = handlers[l]; - try { - if ( obj.handleEvent ) { - obj.handleEvent( event ); - } else { - obj.call( this, event ); - } - } catch ( error ) { - error.details = 'Squire: fireEvent error. Event type: ' + type; - this.didError( error ); - } - } - } - return this; -}; -proto.destroy = function () { - let events = this._events; - let type; + this._ignoreAllChanges = true; + modificationCallback(); + this._ignoreAllChanges = false; - for ( type in events ) { - this.removeEventListener( type ); - } - if ( this._mutation ) { - this._mutation.disconnect(); - } - delete this._root.__squire__; - - // Destroy undo stack - this._undoIndex = -1; - this._undoStack = []; - this._undoStackLength = 0; -}; - -proto.handleEvent = function ( event ) { - this.fireEvent( event.type, event ); -}; - -proto.addEventListener = function ( type, fn ) { - type.split(/\s+/).forEach(type=>{ - let handlers = this._events[ type ], - target = this._root; - if ( !fn ) { - this.didError({ - name: 'Squire: addEventListener with null or undefined fn', - message: 'Event type: ' + type + if ( mutation ) { + mutation.observe( this._root, { + childList: true, + attributes: true, + characterData: true, + subtree: true }); - return this; + this._ignoreChange = false; } - if ( !handlers ) { - handlers = this._events[ type ] = []; - if ( !customEvents[ type ] ) { - if ( type === 'selectionchange' ) { - target = doc; + } + + // --- Events --- + + fireEvent ( type, event ) { + let handlers = this._events[ type ]; + let isFocused, l, obj; + // UI code, especially modal views, may be monitoring for focus events and + // immediately removing focus. In certain conditions, this can cause the + // focus event to fire after the blur event, which can cause an infinite + // loop. So we detect whether we're actually focused/blurred before firing. + if ( /^(?:focus|blur)/.test( type ) ) { + isFocused = this._root === doc.activeElement; + if ( type === 'focus' ) { + if ( !isFocused || this._isFocused ) { + return this; } - target.addEventListener( type, this, {capture:true,passive:'touchstart'===type} ); + this._isFocused = true; + } else { + if ( isFocused || !this._isFocused ) { + return this; + } + this._isFocused = false; } } - handlers.push( fn ); - }); - return this; -}; - -proto.removeEventListener = function ( type, fn ) { - let handlers = this._events[ type ]; - let target = this._root; - let l; - if ( handlers ) { - if ( fn ) { + if ( handlers ) { + if ( !event ) { + event = {}; + } + if ( event.type !== type ) { + event.type = type; + } + // Clone handlers array, so any handlers added/removed do not affect it. + handlers = handlers.slice(); l = handlers.length; while ( l-- ) { - if ( handlers[l] === fn ) { - handlers.splice( l, 1 ); + obj = handlers[l]; + try { + if ( obj.handleEvent ) { + obj.handleEvent( event ); + } else { + obj.call( this, event ); + } + } catch ( error ) { + error.details = 'Squire: fireEvent error. Event type: ' + type; + didError( error ); } } - } else { - handlers.length = 0; } - if ( !handlers.length ) { - delete this._events[ type ]; - if ( !customEvents[ type ] ) { - if ( type === 'selectionchange' ) { - target = doc; + return this; + } + + destroy () { + let events = this._events; + let type; + + for ( type in events ) { + this.removeEventListener( type ); + } + if ( this._mutation ) { + this._mutation.disconnect(); + } + delete this._root.__squire__; + + // Destroy undo stack + this._undoIndex = -1; + this._undoStack = []; + this._undoStackLength = 0; + } + + handleEvent ( event ) { + this.fireEvent( event.type, event ); + } + + addEventListener ( type, fn ) { + type.split(/\s+/).forEach(type=>{ + let handlers = this._events[ type ], + target = this._root; + if ( !fn ) { + didError({ + name: 'Squire: addEventListener with null or undefined fn', + message: 'Event type: ' + type + }); + return this; + } + if ( !handlers ) { + handlers = this._events[ type ] = []; + if ( !customEvents[ type ] ) { + if ( type === 'selectionchange' ) { + target = doc; + } + target.addEventListener( type, this, {capture:true,passive:'touchstart'===type} ); } - target.removeEventListener( type, this, true ); } - } - } - return this; -}; - -// --- Selection and Path --- - -proto.createRange = ( range, startOffset, endContainer, endOffset ) => { - if ( range instanceof win.Range ) { - return range.cloneRange(); - } - let domRange = doc.createRange(); - domRange.setStart( range, startOffset ); - if ( endContainer ) { - domRange.setEnd( endContainer, endOffset ); - } else { - domRange.setEnd( range, startOffset ); - } - return domRange; -}; - -proto.getCursorPosition = function ( range ) { - if ( ( !range && !( range = this.getSelection() ) ) || - !range.getBoundingClientRect ) { - return null; - } - // Get the bounding rect - let rect = range.getBoundingClientRect(); - let node, parent; - if ( rect && !rect.top ) { - this._ignoreChange = true; - node = createElement( 'SPAN' ); - node.textContent = ZWS; - insertNodeInRange( range, node ); - rect = node.getBoundingClientRect(); - parent = node.parentNode; - node.remove( ); - mergeInlines( parent, range ); - } - return rect; -}; - -proto.setSelection = function ( range ) { - if ( range ) { - this._lastRange = range; - // If we're setting selection, that automatically, and synchronously, // triggers a focus event. So just store the selection and mark it as - // needing restore on focus. - if ( !this._isFocused ) { - this._restoreSelection = true; - } else { - // iOS bug: if you don't focus the iframe before setting the - // selection, you can end up in a state where you type but the input - // doesn't get directed into the contenteditable area but is instead - // lost in a black hole. Very strange. - if ( isIOS ) { - win.focus(); - } - let sel = win.getSelection(); - if ( sel && sel.setBaseAndExtent ) { - sel.setBaseAndExtent( - range.startContainer, - range.startOffset, - range.endContainer, - range.endOffset, - ); - } else if ( sel ) { - // This is just for IE11 - sel.removeAllRanges(); - sel.addRange( range ); - } - } - } - return this; -}; - -proto.getSelection = function () { - let sel = win.getSelection(); - let root = this._root; - let range, startContainer, endContainer, node; - // If not focused, always rely on cached range; another function may - // have set it but the DOM is not modified until focus again - if ( this._isFocused && sel && sel.rangeCount ) { - range = sel.getRangeAt( 0 ).cloneRange(); - startContainer = range.startContainer; - endContainer = range.endContainer; - // FF can return the range as being inside an
. + // Therefore we wrap this in the tag as well, as this will then cause it + // to apply when the user types something in the block, which is + // presumably what was intended. + // + // IMG tags are included because we may want to create a link around + // them, and adding other styles is harmless. + walker = createTreeWalker( + range.commonAncestorContainer, + SHOW_TEXT|SHOW_ELEMENT, + node => ( node.nodeType === TEXT_NODE || + node.nodeName === 'BR' || + node.nodeName === 'IMG' + ) && isNodeContainedInRange( range, node ) + ); -proto._addFormat = function ( tag, attributes, range ) { - // If the range is collapsed we simply insert the node by wrapping - // it round the range and focus it. - let root = this._root; - let el, walker, startContainer, endContainer, startOffset, endOffset, - node, needsFormat, block; + // Start at the beginning node of the range and iterate through + // all the nodes in the range that need formatting. + startContainer = range.startContainer; + startOffset = range.startOffset; + endContainer = range.endContainer; + endOffset = range.endOffset; - if ( range.collapsed ) { - el = fixCursor( createElement( tag, attributes ), root ); - insertNodeInRange( range, el ); - range.setStart( el.firstChild, el.firstChild.length ); - range.collapse( true ); + // Make sure we start with a valid node. + walker.currentNode = startContainer; + if ( filterAccept != walker.filter.acceptNode( startContainer ) ) { + startContainer = walker.nextNode(); + startOffset = 0; + } - // Clean up any previous formats that may have been set on this block - // that are unused. - block = el; - while ( isInline( block ) ) { - block = block.parentNode; - } - removeZWS( block, el ); - } - // Otherwise we find all the textnodes in the range (splitting - // partially selected nodes) and if they're not already formatted - // correctly we wrap them in the appropriate tag. - else { - // Create an iterator to walk over all the text nodes under this - // ancestor which are in the range and not already formatted - // correctly. - // - // In Blink/WebKit, empty blocks may have no text nodes, just a
. - // Therefore we wrap this in the tag as well, as this will then cause it - // to apply when the user types something in the block, which is - // presumably what was intended. - // - // IMG tags are included because we may want to create a link around - // them, and adding other styles is harmless. - walker = createTreeWalker( - range.commonAncestorContainer, - SHOW_TEXT|SHOW_ELEMENT, - node => ( node.nodeType === TEXT_NODE || - node.nodeName === 'BR' || - node.nodeName === 'IMG' - ) && isNodeContainedInRange( range, node ) - ); + // If there are no interesting nodes in the selection, abort + if ( !startContainer ) { + return range; + } - // Start at the beginning node of the range and iterate through - // all the nodes in the range that need formatting. - startContainer = range.startContainer; - startOffset = range.startOffset; - endContainer = range.endContainer; - endOffset = range.endOffset; - - // Make sure we start with a valid node. - walker.currentNode = startContainer; - if ( filterAccept != walker.filter.acceptNode( startContainer ) ) { - startContainer = walker.nextNode(); - startOffset = 0; - } - - // If there are no interesting nodes in the selection, abort - if ( !startContainer ) { - return range; - } - - do { - node = walker.currentNode; - needsFormat = !getNearest( node, root, tag, attributes ); - if ( needsFormat ) { - //
can never be a container node, so must have a text node - // if node == (end|start)Container - if ( node === endContainer && node.length > endOffset ) { - node.splitText( endOffset ); - } - if ( node === startContainer && startOffset ) { - node = node.splitText( startOffset ); - if ( endContainer === startContainer ) { - endContainer = node; - endOffset -= startOffset; + do { + node = walker.currentNode; + needsFormat = !getNearest( node, root, tag, attributes ); + if ( needsFormat ) { + //
can never be a container node, so must have a text node + // if node == (end|start)Container + if ( node === endContainer && node.length > endOffset ) { + node.splitText( endOffset ); } - startContainer = node; - startOffset = 0; + if ( node === startContainer && startOffset ) { + node = node.splitText( startOffset ); + if ( endContainer === startContainer ) { + endContainer = node; + endOffset -= startOffset; + } + startContainer = node; + startOffset = 0; + } + el = createElement( tag, attributes ); + node.replaceWith( el ); + el.append( node ); } - el = createElement( tag, attributes ); - node.replaceWith( el ); - el.append( node ); - } - } while ( walker.nextNode() ); + } while ( walker.nextNode() ); - // If we don't finish inside a text node, offset may have changed. - if ( endContainer.nodeType !== TEXT_NODE ) { - if ( node.nodeType === TEXT_NODE ) { - endContainer = node; - endOffset = node.length; - } else { - // If
, we must have just wrapped it, so it must have only - // one child - endContainer = node.parentNode; - endOffset = 1; + // If we don't finish inside a text node, offset may have changed. + if ( endContainer.nodeType !== TEXT_NODE ) { + if ( node.nodeType === TEXT_NODE ) { + endContainer = node; + endOffset = node.length; + } else { + // If
, we must have just wrapped it, so it must have only + // one child + endContainer = node.parentNode; + endOffset = 1; + } } + + // Now set the selection to as it was before + range = createRange( + startContainer, startOffset, endContainer, endOffset ); + } + return range; + } + + _removeFormat ( tag, attributes, range, partial ) { + // Add bookmark + this._saveRangeToBookmark( range ); + + // We need a node in the selection to break the surrounding + // formatted text. + let fixer; + if ( range.collapsed ) { + fixer = this._addZWS(); + insertNodeInRange( range, fixer ); } - // Now set the selection to as it was before - range = this.createRange( - startContainer, startOffset, endContainer, endOffset ); + // Find block-level ancestor of selection + let root = range.commonAncestorContainer; + while ( isInline( root ) ) { + root = root.parentNode; + } + + // Find text nodes inside formatTags that are not in selection and + // add an extra tag with the same formatting. + let startContainer = range.startContainer, + startOffset = range.startOffset, + endContainer = range.endContainer, + endOffset = range.endOffset, + toWrap = [], + examineNode = ( node, exemplar ) => { + // If the node is completely contained by the range then + // we're going to remove all formatting so ignore it. + if ( isNodeContainedInRange( range, node, false ) ) { + return; + } + + let isText = ( node.nodeType === TEXT_NODE ), + child, next; + + // If not at least partially contained, wrap entire contents + // in a clone of the tag we're removing and we're done. + if ( !isNodeContainedInRange( range, node ) ) { + // Ignore bookmarks and empty text nodes + if ( node.nodeName !== 'INPUT' && + ( !isText || node.data ) ) { + toWrap.push([ exemplar, node ]); + } + return; + } + + // Split any partially selected text nodes. + if ( isText ) { + if ( node === endContainer && endOffset !== node.length ) { + toWrap.push([ exemplar, node.splitText( endOffset ) ]); + } + if ( node === startContainer && startOffset ) { + node.splitText( startOffset ); + toWrap.push([ exemplar, node ]); + } + } + // If not a text node, recurse onto all children. + // Beware, the tree may be rewritten with each call + // to examineNode, hence find the next sibling first. + else { + for ( child = node.firstChild; child; child = next ) { + next = child.nextSibling; + examineNode( child, exemplar ); + } + } + }, + formatTags = Array.prototype.filter.call( + root.getElementsByTagName( tag ), + el => isNodeContainedInRange( range, el ) && hasTagAttributes( el, tag, attributes ) + ); + + if ( !partial ) { + formatTags.forEach( node => examineNode( node, node ) ); + } + + // Now wrap unselected nodes in the tag + toWrap.forEach( item => { + // [ exemplar, node ] tuple + let el = item[0].cloneNode( false ), + node = item[1]; + node.replaceWith( el ); + el.append( node ); + }); + // and remove old formatting tags. + formatTags.forEach( el => el.replaceWith( empty( el ) ) ); + + // Merge adjacent inlines: + this._getRangeAndRemoveBookmark( range ); + if ( fixer ) { + range.collapse( false ); + } + mergeInlines( root, range ); + + return range; } - return range; -}; -proto._removeFormat = function ( tag, attributes, range, partial ) { - // Add bookmark - this._saveRangeToBookmark( range ); - - // We need a node in the selection to break the surrounding - // formatted text. - let fixer; - if ( range.collapsed ) { - if ( isWebKit ) { - fixer = doc.createTextNode( ZWS ); - this._didAddZWS(); + toggleTag ( name, remove ) { + let range = this.getSelection(); + if ( this.hasFormat( name, null, range ) ) { + this.changeFormat ( null, { tag: name }, range ); } else { - fixer = doc.createTextNode( '' ); + this.changeFormat ( { tag: name }, remove ? { tag: remove } : null, range ); } - insertNodeInRange( range, fixer ); } - // Find block-level ancestor of selection - let root = range.commonAncestorContainer; - while ( isInline( root ) ) { - root = root.parentNode; - } - - // Find text nodes inside formatTags that are not in selection and - // add an extra tag with the same formatting. - let startContainer = range.startContainer, - startOffset = range.startOffset, - endContainer = range.endContainer, - endOffset = range.endOffset, - toWrap = [], - examineNode = ( node, exemplar ) => { - // If the node is completely contained by the range then - // we're going to remove all formatting so ignore it. - if ( isNodeContainedInRange( range, node, false ) ) { - return; - } - - let isText = ( node.nodeType === TEXT_NODE ), - child, next; - - // If not at least partially contained, wrap entire contents - // in a clone of the tag we're removing and we're done. - if ( !isNodeContainedInRange( range, node ) ) { - // Ignore bookmarks and empty text nodes - if ( node.nodeName !== 'INPUT' && - ( !isText || node.data ) ) { - toWrap.push([ exemplar, node ]); - } - return; - } - - // Split any partially selected text nodes. - if ( isText ) { - if ( node === endContainer && endOffset !== node.length ) { - toWrap.push([ exemplar, node.splitText( endOffset ) ]); - } - if ( node === startContainer && startOffset ) { - node.splitText( startOffset ); - toWrap.push([ exemplar, node ]); - } - } - // If not a text node, recurse onto all children. - // Beware, the tree may be rewritten with each call - // to examineNode, hence find the next sibling first. - else { - for ( child = node.firstChild; child; child = next ) { - next = child.nextSibling; - examineNode( child, exemplar ); - } - } - }, - formatTags = Array.prototype.filter.call( - root.getElementsByTagName( tag ), - el => isNodeContainedInRange( range, el ) && hasTagAttributes( el, tag, attributes ) - ); - - if ( !partial ) { - formatTags.forEach( node => examineNode( node, node ) ); - } - - // Now wrap unselected nodes in the tag - toWrap.forEach( item => { - // [ exemplar, node ] tuple - let el = item[0].cloneNode( false ), - node = item[1]; - node.replaceWith( el ); - el.append( node ); - }); - // and remove old formatting tags. - formatTags.forEach( el => el.replaceWith( empty( el ) ) ); - - // Merge adjacent inlines: - this._getRangeAndRemoveBookmark( range ); - if ( fixer ) { - range.collapse( false ); - } - mergeInlines( root, range ); - - return range; -}; - -proto.changeFormat = function ( add, remove, range, partial ) { - // Normalise the arguments and get selection - if ( !range && !( range = this.getSelection() ) ) { - return this; - } - - // Save undo checkpoint - this.saveUndoState( range ); - - if ( remove ) { - range = this._removeFormat( remove.tag.toUpperCase(), - remove.attributes || {}, range, partial ); - } - if ( add ) { - range = this._addFormat( add.tag.toUpperCase(), - add.attributes || {}, range ); - } - - this.setSelection( range ); - this._updatePath( range, true ); - - return this; -}; - -// --- Block formatting --- - -let tagAfterSplit = { - DT: 'DD', - DD: 'DT', - LI: 'LI', - PRE: 'PRE' -}; - -let splitBlock = ( self, block, node, offset ) => { - let splitTag = tagAfterSplit[ block.nodeName ], - splitProperties = null, - nodeAfterSplit = split( node, offset, block.parentNode, self._root ), - config = self._config; - - if ( !splitTag ) { - splitTag = config.blockTag; - splitProperties = config.blockAttributes; - } - - // Make sure the new node is the correct type. - if ( !hasTagAttributes( nodeAfterSplit, splitTag, splitProperties ) ) { - block = createElement( splitTag, splitProperties ); - if ( nodeAfterSplit.dir ) { - block.dir = nodeAfterSplit.dir; + changeFormat ( add, remove, range, partial ) { + // Normalise the arguments and get selection + if ( !range && !( range = this.getSelection() ) ) { + return this; } - nodeAfterSplit.replaceWith( block ); - block.append( empty( nodeAfterSplit ) ); - nodeAfterSplit = block; - } - return nodeAfterSplit; -}; -proto.forEachBlock = function ( fn, mutates, range ) { - if ( !range && !( range = this.getSelection() ) ) { - return this; - } - - // Save undo checkpoint - if ( mutates ) { + // Save undo checkpoint this.saveUndoState( range ); + + if ( remove ) { + range = this._removeFormat( remove.tag.toUpperCase(), + remove.attributes || {}, range, partial ); + } + + if ( add ) { + range = this._addFormat( add.tag.toUpperCase(), + add.attributes || {}, range ); + } + + this.setSelection( range ); + this._updatePath( range, true ); + + return this; } - let root = this._root; - let start = getStartBlockOfRange( range, root ); - let end = getEndBlockOfRange( range, root ); - if ( start && end ) { - do { - if ( fn( start ) || start === end ) { break; } - } while ( start = getNextBlock( start, root ) ); - } + // --- Block formatting --- + + forEachBlock ( fn, range ) { + if ( !range && !( range = this.getSelection() ) ) { + return this; + } + + // Save undo checkpoint + this.saveUndoState( range ); + + let root = this._root; + let start = getStartBlockOfRange( range, root ); + let end = getEndBlockOfRange( range, root ); + if ( start && end ) { + do { + if ( fn( start ) || start === end ) { break; } + } while ( start = getNextBlock( start, root ) ); + } - if ( mutates ) { this.setSelection( range ); // Path may have changed this._updatePath( range, true ); - } - return this; -}; -proto.modifyBlocks = function ( modify, range ) { - if ( !range && !( range = this.getSelection() ) ) { return this; } - // 1. Save undo checkpoint and bookmark selection - this._recordUndoState( range, this._isInUndoState ); - - let root = this._root; - let frag; - - // 2. Expand range to block boundaries - expandRangeToBlockBoundaries( range, root ); - - // 3. Remove range. - moveRangeBoundariesUpTree( range, root, root, root ); - frag = extractContentsOfRange( range, root, root ); - - // 4. Modify tree of fragment and reinsert. - insertNodeInRange( range, modify.call( this, frag ) ); - - // 5. Merge containers at edges - if ( range.endOffset < range.endContainer.childNodes.length ) { - mergeContainers( range.endContainer.childNodes[ range.endOffset ], root ); - } - mergeContainers( range.startContainer.childNodes[ range.startOffset ], root ); - - // 6. Restore selection - this._getRangeAndRemoveBookmark( range ); - this.setSelection( range ); - this._updatePath( range, true ); - - return this; -}; - -let increaseBlockQuoteLevel = function ( frag ) { - return createElement( 'BLOCKQUOTE', - this._config.tagAttributes.blockquote, [ - frag - ]); -}; - -let decreaseBlockQuoteLevel = frag => { - var blockquotes = frag.querySelectorAll( 'blockquote' ); - Array.prototype.filter.call( blockquotes, el => - !getClosest( el.parentNode, frag, 'BLOCKQUOTE' ) - ).forEach( el => el.replaceWith( empty( el ) ) ); - return frag; -}; - -let makeList = ( self, frag, type ) => { - let walker = getBlockWalker( frag, self._root ), - node, tag, prev, newLi, - tagAttributes = self._config.tagAttributes, - listAttrs = tagAttributes[ type.toLowerCase() ], - listItemAttrs = tagAttributes.li; - - while ( node = walker.nextNode() ) { - if ( node.parentNode.nodeName === 'LI' ) { - node = node.parentNode; - walker.currentNode = node.lastChild; - } - if ( node.nodeName !== 'LI' ) { - newLi = createElement( 'LI', listItemAttrs ); - if ( node.dir ) { - newLi.dir = node.dir; - } - - // Have we replaced the previous block with a new
- /
- ?
- if ( ( prev = node.previousSibling ) && prev.nodeName === type ) {
- prev.append( newLi );
- detach( node );
- }
- // Otherwise, replace this block with the
- /
-
- else {
- node.replaceWith(
- createElement( type, listAttrs, [
- newLi
- ])
- );
- }
- newLi.append( empty( node ) );
- walker.currentNode = newLi;
- } else {
- node = node.parentNode;
- tag = node.nodeName;
- if ( tag !== type && ( /^[OU]L$/.test( tag ) ) ) {
- node.replaceWith(
- createElement( type, listAttrs, [ empty( node ) ] )
- );
- }
- }
- }
-};
-
-let makeUnorderedList = function ( frag ) {
- makeList( this, frag, 'UL' );
- return frag;
-};
-
-let makeOrderedList = function ( frag ) {
- makeList( this, frag, 'OL' );
- return frag;
-};
-
-let removeList = function ( frag ) {
- let lists = frag.querySelectorAll( 'UL, OL' ),
- items = frag.querySelectorAll( 'LI' ),
- root = this._root,
- i, l, list, listFrag, item;
- for ( i = 0, l = lists.length; i < l; ++i ) {
- list = lists[i];
- listFrag = empty( list );
- fixContainer( listFrag, root );
- list.replaceWith( listFrag );
- }
-
- for ( i = 0, l = items.length; i < l; ++i ) {
- item = items[i];
- if ( isBlock( item ) ) {
- item.replaceWith(
- this.createDefaultBlock([ empty( item ) ])
- );
- } else {
- fixContainer( item, root );
- item.replaceWith( empty( item ) );
- }
- }
- return frag;
-};
-
-let getListSelection = ( range, root ) => {
- // Get start+end li in single common ancestor
- let list = range.commonAncestorContainer;
- let startLi = range.startContainer;
- let endLi = range.endContainer;
- while ( list && list !== root && !/^[OU]L$/.test( list.nodeName ) ) {
- list = list.parentNode;
- }
- if ( !list || list === root ) {
- return null;
- }
- if ( startLi === list ) {
- startLi = startLi.childNodes[ range.startOffset ];
- }
- if ( endLi === list ) {
- endLi = endLi.childNodes[ range.endOffset ];
- }
- while ( startLi && startLi.parentNode !== list ) {
- startLi = startLi.parentNode;
- }
- while ( endLi && endLi.parentNode !== list ) {
- endLi = endLi.parentNode;
- }
- return [ list, startLi, endLi ];
-};
-
-proto.increaseListLevel = function ( range ) {
- if ( !range && !( range = this.getSelection() ) ) {
- return this.focus();
- }
-
- let root = this._root;
- let listSelection = getListSelection( range, root );
- if ( !listSelection ) {
- return this.focus();
- }
-
- let list = listSelection[0];
- let startLi = listSelection[1];
- let endLi = listSelection[2];
- if ( !startLi || startLi === list.firstChild ) {
- return this.focus();
- }
-
- // Save undo checkpoint and bookmark selection
- this._recordUndoState( range, this._isInUndoState );
-
- // Increase list depth
- let type = list.nodeName;
- let newParent = startLi.previousSibling;
- let listAttrs, next;
- if ( newParent.nodeName !== type ) {
- listAttrs = this._config.tagAttributes[ type.toLowerCase() ];
- newParent = createElement( type, listAttrs );
- startLi.before( newParent );
- }
- do {
- next = startLi === endLi ? null : startLi.nextSibling;
- newParent.append( startLi );
- } while ( ( startLi = next ) );
- next = newParent.nextSibling;
- if ( next ) {
- mergeContainers( next, root );
- }
-
- // Restore selection
- this._getRangeAndRemoveBookmark( range );
- this.setSelection( range );
- this._updatePath( range, true );
-
- return this.focus();
-};
-
-proto.decreaseListLevel = function ( range ) {
- if ( !range && !( range = this.getSelection() ) ) {
- return this.focus();
- }
-
- let root = this._root;
- let listSelection = getListSelection( range, root );
- if ( !listSelection ) {
- return this.focus();
- }
-
- let list = listSelection[0];
- let startLi = listSelection[1];
- let endLi = listSelection[2];
- let newParent, next, insertBefore, makeNotList;
- if ( !startLi ) {
- startLi = list.firstChild;
- }
- if ( !endLi ) {
- endLi = list.lastChild;
- }
-
- // Save undo checkpoint and bookmark selection
- this._recordUndoState( range, this._isInUndoState );
-
- if ( startLi ) {
- // Find the new parent list node
- newParent = list.parentNode;
-
- // Split list if necesary
- insertBefore = !endLi.nextSibling ?
- list.nextSibling :
- split( list, endLi.nextSibling, newParent, root );
-
- if ( newParent !== root && newParent.nodeName === 'LI' ) {
- newParent = newParent.parentNode;
- while ( insertBefore ) {
- next = insertBefore.nextSibling;
- endLi.append( insertBefore );
- insertBefore = next;
- }
- insertBefore = list.parentNode.nextSibling;
+ modifyBlocks ( modify, range ) {
+ if ( !range && !( range = this.getSelection() ) ) {
+ return this;
}
- makeNotList = !/^[OU]L$/.test( newParent.nodeName );
+ // 1. Save undo checkpoint and bookmark selection
+ this._recordUndoState( range, this._isInUndoState );
+
+ let root = this._root;
+ let frag;
+
+ // 2. Expand range to block boundaries
+ expandRangeToBlockBoundaries( range, root );
+
+ // 3. Remove range.
+ moveRangeBoundariesUpTree( range, root, root, root );
+ frag = extractContentsOfRange( range, root, root );
+
+ // 4. Modify tree of fragment and reinsert.
+ insertNodeInRange( range, modify.call( this, frag ) );
+
+ // 5. Merge containers at edges
+ if ( range.endOffset < range.endContainer.childNodes.length ) {
+ mergeContainers( range.endContainer.childNodes[ range.endOffset ], root );
+ }
+ mergeContainers( range.startContainer.childNodes[ range.startOffset ], root );
+
+ // 6. Restore selection
+ this._getRangeAndRemoveBookmark( range );
+ this.setSelection( range );
+ this._updatePath( range, true );
+
+ return this;
+ }
+
+ increaseListLevel ( range ) {
+ if ( !range && !( range = this.getSelection() ) ) {
+ return this.focus();
+ }
+
+ let root = this._root;
+ let listSelection = getListSelection( range, root );
+ if ( !listSelection ) {
+ return this.focus();
+ }
+
+ let list = listSelection[0];
+ let startLi = listSelection[1];
+ let endLi = listSelection[2];
+ if ( !startLi || startLi === list.firstChild ) {
+ return this.focus();
+ }
+
+ // Save undo checkpoint and bookmark selection
+ this._recordUndoState( range, this._isInUndoState );
+
+ // Increase list depth
+ let type = list.nodeName;
+ let newParent = startLi.previousSibling;
+ let next;
+ if ( newParent.nodeName !== type ) {
+ newParent = createElement( type );
+ startLi.before( newParent );
+ }
do {
next = startLi === endLi ? null : startLi.nextSibling;
- startLi.remove( );
- if ( makeNotList && startLi.nodeName === 'LI' ) {
- startLi = this.createDefaultBlock([ empty( startLi ) ]);
- }
- newParent.insertBefore( startLi, insertBefore );
- } while (( startLi = next ));
- }
+ newParent.append( startLi );
+ } while ( ( startLi = next ) );
+ next = newParent.nextSibling;
+ if ( next ) {
+ mergeContainers( next, root );
+ }
- if ( !list.firstChild ) {
- detach( list );
- }
-
- if ( insertBefore ) {
- mergeContainers( insertBefore, root );
- }
-
- // Restore selection
- this._getRangeAndRemoveBookmark( range );
- this.setSelection( range );
- this._updatePath( range, true );
-
- return this.focus();
-};
-
-proto._ensureBottomLine = function () {
- let root = this._root;
- let last = root.lastElementChild;
- if ( !last ||
- last.nodeName !== this._config.blockTag || !isBlock( last ) ) {
- root.append( this.createDefaultBlock() );
- }
-};
-
-// --- Keyboard interaction ---
-
-proto.setKeyHandler = function ( key, fn ) {
- this._keyHandlers[ key ] = fn;
- return this;
-};
-
-// --- Get/Set data ---
-
-proto._getHTML = function () {
- return this._root.innerHTML;
-};
-
-proto._setHTML = function ( html ) {
- let root = this._root;
- let node = root;
- node.innerHTML = html;
- do {
- fixCursor( node, root );
- } while ( node = getNextBlock( node, root ) );
- this._ignoreChange = true;
-};
-
-proto.getHTML = function ( withBookMark ) {
- let html, range;
- if ( withBookMark && ( range = this.getSelection() ) ) {
- this._saveRangeToBookmark( range );
- }
- html = this._getHTML().replace( /\u200B/g, '' );
- if ( range ) {
+ // Restore selection
this._getRangeAndRemoveBookmark( range );
- }
- return html;
-};
+ this.setSelection( range );
+ this._updatePath( range, true );
-proto.setHTML = function ( html ) {
- let config = this._config;
- let sanitizeToDOMFragment = config.isSetHTMLSanitized ?
- config.sanitizeToDOMFragment : null;
- let root = this._root;
- let div, frag, child;
-
- // Parse HTML into DOM tree
- if ( typeof sanitizeToDOMFragment === 'function' ) {
- frag = sanitizeToDOMFragment( html, false, this );
- } else {
- div = createElement( 'DIV' );
- div.innerHTML = html;
- frag = doc.createDocumentFragment();
- frag.append( empty( div ) );
+ return this.focus();
}
- cleanTree( frag, config );
- cleanupBRs( frag, root, false );
+ decreaseListLevel ( range ) {
+ if ( !range && !( range = this.getSelection() ) ) {
+ return this.focus();
+ }
- fixContainer( frag, root );
-
- // Fix cursor
- let node, walker = getBlockWalker( frag, root );
- while ( (node = walker.nextNode()) && node !== root ) {
- fixCursor( node, root );
- }
-
- // Don't fire an input event
- this._ignoreChange = true;
-
- // Remove existing root children
- while ( child = root.lastChild ) {
- child.remove( );
- }
-
- // And insert new content
- root.append( frag );
- fixCursor( root, root );
-
- // Reset the undo stack
- this._undoIndex = -1;
- this._undoStack.length = 0;
- this._undoStackLength = 0;
- this._isInUndoState = false;
-
- // Record undo state
- let range = this._getRangeAndRemoveBookmark() ||
- this.createRange( root.firstChild, 0 );
- this.saveUndoState( range );
- // IE will also set focus when selecting text so don't use
- // setSelection. Instead, just store it in lastSelection, so if
- // anything calls getSelection before first focus, we have a range
- // to return.
- this._lastRange = range;
- this._restoreSelection = true;
- this._updatePath( range, true );
-
- return this;
-};
-
-proto.insertElement = function ( el, range ) {
- if ( !range ) {
- range = this.getSelection();
- }
- range.collapse( true );
- if ( isInline( el ) ) {
- insertNodeInRange( range, el );
- range.setStartAfter( el );
- } else {
- // Get containing block node.
let root = this._root;
- let splitNode = getStartBlockOfRange( range, root ) || root;
- let parent, nodeAfterSplit;
- // While at end of container node, move up DOM tree.
- while ( splitNode !== root && !splitNode.nextSibling ) {
- splitNode = splitNode.parentNode;
+ let listSelection = getListSelection( range, root );
+ if ( !listSelection ) {
+ return this.focus();
}
- // If in the middle of a container node, split up to root.
- if ( splitNode !== root ) {
- parent = splitNode.parentNode;
- nodeAfterSplit = split( parent, splitNode.nextSibling, root, root );
+
+ let list = listSelection[0];
+ let startLi = listSelection[1];
+ let endLi = listSelection[2];
+ let newParent, next, insertBefore, makeNotList;
+ if ( !startLi ) {
+ startLi = list.firstChild;
}
- if ( nodeAfterSplit ) {
- nodeAfterSplit.before( el );
- } else {
- root.append( el );
- // Insert blank line below block.
- nodeAfterSplit = this.createDefaultBlock();
- root.append( nodeAfterSplit );
+ if ( !endLi ) {
+ endLi = list.lastChild;
}
- range.setStart( nodeAfterSplit, 0 );
- range.setEnd( nodeAfterSplit, 0 );
- moveRangeBoundariesDownTree( range );
- }
- this.focus();
- this.setSelection( range );
- this._updatePath( range );
- return this;
-};
+ // Save undo checkpoint and bookmark selection
+ this._recordUndoState( range, this._isInUndoState );
-proto.insertImage = function ( src, attributes ) {
- let img = createElement( 'IMG', mergeObjects({
- src: src
- }, attributes, true ));
- this.insertElement( img );
- return img;
-};
+ if ( startLi ) {
+ // Find the new parent list node
+ newParent = list.parentNode;
-proto.linkRegExp = /\b(?:((?:(?:ht|f)tps?:\/\/|www\d{0,3}[.]|[a-z0-9][a-z0-9.-]*[.][a-z]{2,}\/)(?:[^\s()<>]+|\([^\s()<>]+\))+(?:[^\s?&`!()[\]{};:'".,<>«»“”‘’]|\([^\s()<>]+\)))|([\w\-.%+]+@(?:[\w-]+\.)+[a-z]{2,}\b(?:[?][^&?\s]+=[^\s?&`!()[\]{};:'".,<>«»“”‘’]+(?:&[^&?\s]+=[^\s?&`!()[\]{};:'".,<>«»“”‘’]+)*)?))/i;
+ // Split list if necesary
+ insertBefore = !endLi.nextSibling ?
+ list.nextSibling :
+ split( list, endLi.nextSibling, newParent, root );
-let addLinks = ( frag, root, self ) => {
- let walker = createTreeWalker( frag, SHOW_TEXT, node => !getClosest( node, root, 'A' ) );
- let linkRegExp = self.linkRegExp;
- let defaultAttributes = self._config.tagAttributes.a;
- let node, data, parent, match, index, endIndex, child;
- if ( !linkRegExp ) {
- return;
- }
- while (( node = walker.nextNode() )) {
- data = node.data;
- parent = node.parentNode;
- while (( match = linkRegExp.exec( data ) )) {
- index = match.index;
- endIndex = index + match[0].length;
- if ( index ) {
- child = doc.createTextNode( data.slice( 0, index ) );
- parent.insertBefore( child, node );
+ if ( newParent !== root && newParent.nodeName === 'LI' ) {
+ newParent = newParent.parentNode;
+ while ( insertBefore ) {
+ next = insertBefore.nextSibling;
+ endLi.append( insertBefore );
+ insertBefore = next;
+ }
+ insertBefore = list.parentNode.nextSibling;
}
- child = createElement( 'A', mergeObjects({
- href: match[1] ?
- /^(?:ht|f)tps?:/i.test( match[1] ) ?
- match[1] :
- 'http://' + match[1] :
- 'mailto:' + match[0]
- }, defaultAttributes, false ));
- child.textContent = data.slice( index, endIndex );
- parent.insertBefore( child, node );
- node.data = data = data.slice( endIndex );
+
+ makeNotList = !/^[OU]L$/.test( newParent.nodeName );
+ do {
+ next = startLi === endLi ? null : startLi.nextSibling;
+ startLi.remove( );
+ if ( makeNotList && startLi.nodeName === 'LI' ) {
+ startLi = this.createDefaultBlock([ empty( startLi ) ]);
+ }
+ newParent.insertBefore( startLi, insertBefore );
+ } while (( startLi = next ));
+ }
+
+ if ( !list.firstChild ) {
+ detach( list );
+ }
+
+ if ( insertBefore ) {
+ mergeContainers( insertBefore, root );
+ }
+
+ // Restore selection
+ this._getRangeAndRemoveBookmark( range );
+ this.setSelection( range );
+ this._updatePath( range, true );
+
+ return this.focus();
+ }
+
+ _ensureBottomLine () {
+ let root = this._root;
+ let last = root.lastElementChild;
+ if ( !last ||
+ last.nodeName !== this._config.blockTag || !isBlock( last ) ) {
+ root.append( this.createDefaultBlock() );
}
}
-};
-// Insert HTML at the cursor location. If the selection is not collapsed
-// insertTreeFragmentIntoRange will delete the selection so that it is replaced
-// by the html being inserted.
-proto.insertHTML = function ( html, isPaste ) {
- let config = this._config;
- let sanitizeToDOMFragment = config.isInsertedHTMLSanitized ?
- config.sanitizeToDOMFragment : null;
- let range = this.getSelection();
- let startFragmentIndex, endFragmentIndex;
- let div, frag, root, node, event;
+ // --- Keyboard interaction ---
- // Edge doesn't just copy the fragment, but includes the surrounding guff
- // including the full of the page. Need to strip this out. If
- // available use DOMPurify to parse and sanitise.
- if ( typeof sanitizeToDOMFragment === 'function' ) {
- frag = sanitizeToDOMFragment( html, isPaste, this );
- } else {
+ setKeyHandler ( key, fn ) {
+ this._keyHandlers[ key ] = fn;
+ return this;
+ }
+
+ // --- Get/Set data ---
+
+ _getHTML () {
+ return this._root.innerHTML;
+ }
+
+ _setHTML ( html ) {
+ let root = this._root;
+ let node = root;
+ node.innerHTML = html;
+ do {
+ fixCursor( node, root );
+ } while ( node = getNextBlock( node, root ) );
+ this._ignoreChange = true;
+ }
+
+ getHTML ( withBookMark ) {
+ let html, range;
+ if ( withBookMark && ( range = this.getSelection() ) ) {
+ this._saveRangeToBookmark( range );
+ }
+ html = this._getHTML().replace( /\u200B/g, '' );
+ if ( range ) {
+ this._getRangeAndRemoveBookmark( range );
+ }
+ return html;
+ }
+
+ setHTML ( html ) {
+ let config = this._config;
+ let sanitizeToDOMFragment = config.sanitizeToDOMFragment;
+ let root = this._root;
+ let div, frag, child;
+
+ // Parse HTML into DOM tree
+ if ( typeof sanitizeToDOMFragment === 'function' ) {
+ frag = sanitizeToDOMFragment( html, false, this );
+ } else {
+ div = createElement( 'DIV' );
+ div.innerHTML = html;
+ frag = doc.createDocumentFragment();
+ frag.append( empty( div ) );
+ }
+
+ cleanTree( frag, config );
+ cleanupBRs( frag, root, false );
+
+ fixContainer( frag, root );
+
+ // Fix cursor
+ let node, walker = getBlockWalker( frag, root );
+ while ( (node = walker.nextNode()) && node !== root ) {
+ fixCursor( node, root );
+ }
+
+ // Don't fire an input event
+ this._ignoreChange = true;
+
+ // Remove existing root children
+ while ( child = root.lastChild ) {
+ child.remove( );
+ }
+
+ // And insert new content
+ root.append( frag );
+ fixCursor( root, root );
+
+ // Reset the undo stack
+ this._undoIndex = -1;
+ this._undoStack.length = 0;
+ this._undoStackLength = 0;
+ this._isInUndoState = false;
+
+ // Record undo state
+ let range = this._getRangeAndRemoveBookmark() ||
+ createRange( root.firstChild, 0 );
+ this.saveUndoState( range );
+ // IE will also set focus when selecting text so don't use
+ // setSelection. Instead, just store it in lastSelection, so if
+ // anything calls getSelection before first focus, we have a range
+ // to return.
+ this._lastRange = range;
+ this._restoreSelection = true;
+ this._updatePath( range, true );
+
+ return this;
+ }
+
+ insertElement ( el, range ) {
+ if ( !range ) {
+ range = this.getSelection();
+ }
+ range.collapse( true );
+ if ( isInline( el ) ) {
+ insertNodeInRange( range, el );
+ range.setStartAfter( el );
+ } else {
+ // Get containing block node.
+ let root = this._root;
+ let splitNode = getStartBlockOfRange( range, root ) || root;
+ let parent, nodeAfterSplit;
+ // While at end of container node, move up DOM tree.
+ while ( splitNode !== root && !splitNode.nextSibling ) {
+ splitNode = splitNode.parentNode;
+ }
+ // If in the middle of a container node, split up to root.
+ if ( splitNode !== root ) {
+ parent = splitNode.parentNode;
+ nodeAfterSplit = split( parent, splitNode.nextSibling, root, root );
+ }
+ if ( nodeAfterSplit ) {
+ nodeAfterSplit.before( el );
+ } else {
+ root.append( el );
+ // Insert blank line below block.
+ nodeAfterSplit = this.createDefaultBlock();
+ root.append( nodeAfterSplit );
+ }
+ range.setStart( nodeAfterSplit, 0 );
+ range.setEnd( nodeAfterSplit, 0 );
+ moveRangeBoundariesDownTree( range );
+ }
+ this.focus();
+ this.setSelection( range );
+ this._updatePath( range );
+
+ return this;
+ }
+
+ insertImage ( src, attributes ) {
+ let img = createElement( 'IMG', mergeObjects({
+ src: src
+ }, attributes, true ));
+ this.insertElement( img );
+ return img;
+ }
+
+ // Insert HTML at the cursor location. If the selection is not collapsed
+ // insertTreeFragmentIntoRange will delete the selection so that it is replaced
+ // by the html being inserted.
+ insertHTML ( html, isPaste ) {
+ let config = this._config;
+ let sanitizeToDOMFragment = config.sanitizeToDOMFragment;
+ let range = this.getSelection();
+ let startFragmentIndex, endFragmentIndex;
+ let div, frag, root, node, event;
+
+ // Edge doesn't just copy the fragment, but includes the surrounding guff
+ // including the full of the page. Need to strip this out.
if ( isPaste ) {
startFragmentIndex = html.indexOf( '' );
endFragmentIndex = html.lastIndexOf( '' );
@@ -3949,517 +3830,501 @@ proto.insertHTML = function ( html, isPaste ) {
html = html.slice( startFragmentIndex + 20, endFragmentIndex );
}
}
- // Wrap with