diff --git a/plugins/compact-composer/css/composer.css b/plugins/compact-composer/css/composer.css index 3b7cb6f55..143a3e1cf 100644 --- a/plugins/compact-composer/css/composer.css +++ b/plugins/compact-composer/css/composer.css @@ -39,6 +39,7 @@ .squire-toolbar-svg-icon { display: block; + fill: var(--dialog-clr, #333); } .squire2-mode-wysiwyg .squire-plain, diff --git a/plugins/compact-composer/index.php b/plugins/compact-composer/index.php index b165bddaf..c04a4e732 100644 --- a/plugins/compact-composer/index.php +++ b/plugins/compact-composer/index.php @@ -6,7 +6,7 @@ class CompactComposerPlugin extends \RainLoop\Plugins\AbstractPlugin NAME = 'Compact Composer', AUTHOR = 'Sergey Mosin', URL = 'https://github.com/the-djmaze/snappymail/pull/1466', - VERSION = '1.0.0', + VERSION = '1.0.1', RELEASE = '2024-02-23', REQUIRED = '2.34.0', LICENSE = 'AGPL v3', @@ -14,7 +14,7 @@ class CompactComposerPlugin extends \RainLoop\Plugins\AbstractPlugin public function Init(): void { - $this->addTemplate('templates/PopupsCompose.html'); + $this->addTemplate('templates/PopupsCompactCompose.html'); $this->addCss('css/composer.css'); $this->addJs('js/squire-raw.js'); $this->addJs('js/parsel.js'); diff --git a/plugins/compact-composer/js/CompactComposer.js b/plugins/compact-composer/js/CompactComposer.js index 503d00c9e..92451a9bf 100644 --- a/plugins/compact-composer/js/CompactComposer.js +++ b/plugins/compact-composer/js/CompactComposer.js @@ -1,16 +1,47 @@ /* eslint max-len: 0 */ (win => { - addEventListener('rl-view-model.create', e => { - if (e.detail.viewModelTemplateID === 'PopupsCompose') { - // 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; - } + const rl = win.rl; + + if (!rl) { + return; + } + + rl.registerWYSIWYG('CompactComposer', (owner, container, onReady) => { + const editor = new CompactComposer(container); + onReady(editor); }); const doc = win.document; - const rl = win.rl; + + // If a user (or admin) selected the CompactComposer we need to + // replace PopupsCompose template with PopupsCompactCompose template. + // -- + // This might break some plugins if they query/change PopupsCompose template + // before this code is called. They should instead listen for + // 'rl-view-model.create' to work properly. + if (rl.settings.get('editorWysiwyg') === 'CompactComposer') { + const compactTemplate = doc.getElementById('PopupsCompactCompose'); + if (!compactTemplate) { + console.error('CompactComposer: PopupsCompactCompose template not found'); + return; + } + const originalTemplate = doc.getElementById('PopupsCompose'); + if (originalTemplate) { + originalTemplate.id = 'PopupsCompose_replaced'; + } else { + console.warn('CompactComposer: PopupsCompose template not found'); + } + compactTemplate.id = 'PopupsCompose'; + + addEventListener('rl-view-model.create', e => { + if (e.detail.viewModelTemplateID === 'PopupsCompose') { + // 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; + } + }); + } const removeElements = 'HEAD,LINK,META,NOSCRIPT,SCRIPT,TEMPLATE,TITLE', @@ -114,9 +145,6 @@ this.container = container; - toolbar.className = 'squire-toolbar btn-toolbar'; - const actions = this.#makeActions(squire, toolbar); - plain.className = 'squire-plain'; wysiwyg.className = 'squire-wysiwyg'; wysiwyg.dir = 'auto'; @@ -126,6 +154,9 @@ this.wysiwyg = wysiwyg; this.toolbar = toolbar; + toolbar.className = 'squire-toolbar btn-toolbar'; + const actions = this.#makeActions(squire, toolbar); + this.squire.addEventListener('willPaste', pasteSanitizer); this.squire.addEventListener('pasteImage', (e) => { pasteImageHandler(e, squire); @@ -663,13 +694,13 @@ return indicators; case 'menu': case 'menu_more': - const menuWrap = document.createElement('div'); + const menuWrap = createElement('div'); menuWrap.className = 'btn-group dropdown squire-toolbar-menu-wrap'; menuWrap.title = item.label; if (!item.showInPlainMode) { menuWrap.className += ' squire-html-mode-item'; } - const menuBtn = document.createElement('a'); + const menuBtn = createElement('button'); menuBtn.className = 'btn dropdown-toggle'; if (item.icon !== '') { menuBtn.innerHTML = item.icon; @@ -680,7 +711,7 @@ } menuWrap.appendChild(menuBtn); - const menu = document.createElement('ul'); + const menu = createElement('ul'); menu.className = 'dropdown-menu squire-toolbar-menu'; if (item.rightEdge) { menu.className += ' right-edge'; @@ -956,12 +987,4 @@ } } } - - if (rl) { - rl.registerWYSIWYG('CompactComposer', (owner, container, onReady) => { - const editor = new CompactComposer(container); - onReady(editor); - }); - } - })(window); diff --git a/plugins/compact-composer/templates/PopupsCompose.html b/plugins/compact-composer/templates/PopupsCompactCompose.html similarity index 77% rename from plugins/compact-composer/templates/PopupsCompose.html rename to plugins/compact-composer/templates/PopupsCompactCompose.html index ad22c4006..7c05c875f 100644 --- a/plugins/compact-composer/templates/PopupsCompose.html +++ b/plugins/compact-composer/templates/PopupsCompactCompose.html @@ -145,10 +145,10 @@
- +
@@ -167,41 +167,6 @@
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -