From 0a4cea5e4c97bb5a904ad883c93f59f6413aa9c0 Mon Sep 17 00:00:00 2001 From: Sergey Mosin Date: Tue, 8 Oct 2024 09:47:47 -0400 Subject: [PATCH 1/3] make sure that KO bindings are re-applied --- .../compact-composer/js/CompactComposer.js | 28 +++++++++++++------ 1 file changed, 19 insertions(+), 9 deletions(-) diff --git a/plugins/compact-composer/js/CompactComposer.js b/plugins/compact-composer/js/CompactComposer.js index 288fb497c7..5baea90a30 100644 --- a/plugins/compact-composer/js/CompactComposer.js +++ b/plugins/compact-composer/js/CompactComposer.js @@ -17,18 +17,28 @@ addEventListener('rl-view-model', e => { const vm = e.detail; if ('PopupsCompose' === vm.viewModelTemplateID && rl.settings.get('editorWysiwyg') === 'CompactComposer') { - vm.querySelector('.tabs label[for="tab-body"]').dataset.bind = "visible: canMailvelope"; + // add visible binding to the label + const bodyLabel = vm.querySelector('.tabs label[for="tab-body"]'); + bodyLabel.dataset.bind = 'visible: canMailvelope'; + // re-apply the binding + const labelNext = bodyLabel.nextElementSibling; + ko.removeNode(bodyLabel); + labelNext.parentElement.insertBefore(bodyLabel, labelNext); + ko.applyBindingAccessorsToNode(bodyLabel, null, vm); + // Now move the attachments tab to the bottom of the screen - const - input = vm.querySelector('.tabs input[value="attachments"]'), - label = vm.querySelector('.tabs label[for="tab-attachments"]'), - area = vm.querySelector('.tabs .attachmentAreaParent'); - input.remove(); - label.remove(); - area.remove(); + const area = vm.querySelector('.tabs .attachmentAreaParent'); + vm.querySelector('.tabs input[value="attachments"]').remove(); + vm.querySelector('.tabs label[for="tab-attachments"]').remove(); + area.querySelector('.no-attachments-desc').remove(); area.classList.add('compact'); - area.querySelector('.b-attachment-place').dataset.bind = "visible: addAttachmentEnabled(), css: {dragAndDropOver: dragAndDropVisible}"; vm.viewModelDom.append(area); + // Add and re-apply the bindings for the attachment-place + const place = area.querySelector('.b-attachment-place'); + ko.removeNode(place); + area.insertBefore(place, area.firstElementChild); + place.dataset.bind = 'visible: addAttachmentEnabled(), css: {dragAndDropOver: dragAndDropVisible}'; + ko.applyBindingAccessorsToNode(place, null, vm); // There is a better way to do this probably, // but we need this for drag and drop to work e.detail.attachmentsArea = e.detail.bodyArea; From 48b0519cb490bc72e754a7a92bab666c651d9afb Mon Sep 17 00:00:00 2001 From: Sergey Mosin Date: Tue, 8 Oct 2024 14:58:02 -0400 Subject: [PATCH 2/3] use 'Utils.cleanHtml' as pasteSanitizer + minor tweaks --- plugins/compact-composer/css/composer.css | 5 ++++ .../compact-composer/js/CompactComposer.js | 23 +++---------------- 2 files changed, 8 insertions(+), 20 deletions(-) diff --git a/plugins/compact-composer/css/composer.css b/plugins/compact-composer/css/composer.css index 8e0bfff15e..c2afc31c6c 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 5baea90a30..01d020bb34 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': From e7ecf53b4a3451ce34db2ff60f1bda1fe9149f4d Mon Sep 17 00:00:00 2001 From: Sergey Mosin Date: Tue, 8 Oct 2024 15:01:18 -0400 Subject: [PATCH 3/3] bump version to v1.0.5 --- plugins/compact-composer/index.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/compact-composer/index.php b/plugins/compact-composer/index.php index ae743ca792..d98b5cc955 100644 --- a/plugins/compact-composer/index.php +++ b/plugins/compact-composer/index.php @@ -6,8 +6,8 @@ class CompactComposerPlugin extends \RainLoop\Plugins\AbstractPlugin NAME = 'Compact Composer', AUTHOR = 'Sergey Mosin', URL = 'https://github.com/the-djmaze/snappymail/pull/1466', - VERSION = '1.0.4', - RELEASE = '2024-04-23', + VERSION = '1.0.5', + RELEASE = '2024-08-08', REQUIRED = '2.34.0', LICENSE = 'AGPL v3', DESCRIPTION = 'WYSIWYG editor with a compact toolbar';