diff --git a/plugins/compact-composer/css/composer.css b/plugins/compact-composer/css/composer.css index 8e0bfff15..c2afc31c6 100644 --- a/plugins/compact-composer/css/composer.css +++ b/plugins/compact-composer/css/composer.css @@ -1,3 +1,8 @@ +/* Prevent collapse of empty elements so that the caret can be placed in there */ +.CompactComposer *:empty::before { + content: "\200B"; +} + .CompactComposer .squire-toolbar { padding-top: 4px; padding-bottom: 0; diff --git a/plugins/compact-composer/js/CompactComposer.js b/plugins/compact-composer/js/CompactComposer.js index 5baea90a3..01d020bb3 100644 --- a/plugins/compact-composer/js/CompactComposer.js +++ b/plugins/compact-composer/js/CompactComposer.js @@ -46,10 +46,6 @@ }); const - removeElements = 'HEAD,LINK,META,NOSCRIPT,SCRIPT,TEMPLATE,TITLE', - allowedElements = 'A,B,BLOCKQUOTE,BR,DIV,EM,FONT,H1,H2,H3,H4,H5,H6,HR,I,IMG,LI,OL,P,SPAN,STRONG,TABLE,TD,TH,TR,U,UL', - allowedAttributes = 'abbr,align,background,bgcolor,border,cellpadding,cellspacing,class,color,colspan,dir,face,frame,height,href,hspace,id,lang,rowspan,rules,scope,size,src,style,target,type,usemap,valign,vspace,width'.split(','), - // TODO: labels translations i18n = (str, def) => rl.i18n(str) || def, @@ -105,21 +101,7 @@ }, pasteSanitizer = (event) => { - const frag = event.detail.fragment; - frag.querySelectorAll('a:empty,span:empty').forEach(el => el.remove()); - frag.querySelectorAll(removeElements).forEach(el => el.remove()); - frag.querySelectorAll('*').forEach(el => { - if (!el.matches(allowedElements)) { - el.replaceWith(getFragmentOfChildren(el)); - } else if (el.hasAttributes()) { - [...el.attributes].forEach(attr => { - let name = attr.name.toLowerCase(); - if (!allowedAttributes.includes(name)) { - el.removeAttribute(name); - } - }); - } - }); + return rl.Utils.cleanHtml(event.detail.html).html; }, pasteImageHandler = (e, squire) => { @@ -327,7 +309,8 @@ clr.style.left = (input.offsetLeft + input.parentNode.offsetLeft) + 'px'; clr.style.width = input.offsetWidth + 'px'; - clr.value = ''; + // firefox does not call "onchange" for #000 if we use clr.value='' + clr.value = '#00ff0c'; clr.onchange = () => { switch (name) { case 'color':