diff --git a/gray-theme/unauthenticated/css/iframe.css b/gray-theme/unauthenticated/css/iframe.css deleted file mode 100644 index bef603359..000000000 --- a/gray-theme/unauthenticated/css/iframe.css +++ /dev/null @@ -1,13 +0,0 @@ -body:not([style]) { - font: 14px/1.231 arial, helvetica, clean, sans-serif; -} - -p:not([style]) { - margin: 0; -} - -blockquote:not([style]) { - margin: 0px 0px 0px 0.8ex; - border-left: 1px solid #ccc; - padding-left: 1ex; -} \ No newline at end of file diff --git a/html-editor-lib.pl b/html-editor-lib.pl index 83e3960e6..08ca01d59 100644 --- a/html-editor-lib.pl +++ b/html-editor-lib.pl @@ -16,7 +16,6 @@ $html_editor_load_scripts .= < - EOF return $html_editor_load_scripts; @@ -253,6 +252,15 @@ my $target_attr = $target_text->{'attr'} || 'name'; my $target_type = $target_text->{'type'} || '='; my $target_name = $target_text->{'name'}; +# HTML editor toolbar mode +my $iframe_styles_mode = + $opts->{'type'} =~ /(^advanced|expert$)/ ? 'advanced' : + $opts->{'type'} eq 'basic' ? 'basic' : 'simple'; +my $iframe_styles = + "e_escape( + &read_file_contents("$root_directory/unauthenticated/css/_iframe/$iframe_styles_mode.min.css"), '"'); +$iframe_styles =~ s/\n/ /g; + my $html_editor_init_script = < @@ -260,7 +268,8 @@ my $html_editor_init_script = const targ = document.querySelector('[$target_attr$target_type"$target_name"]'), qs = Quill.import('attributors/style/size'), qf = Quill.import('attributors/style/font'), - isMac = navigator.userAgent.toLowerCase().includes('mac'); + isMac = navigator.userAgent.toLowerCase().includes('mac'), + iframe_styles = "$iframe_styles"; qs.whitelist = ["0.75em", "1.15em", "1.3em"]; Quill.register(qs, true); @@ -304,24 +313,7 @@ my $html_editor_init_script = }); editor.on('text-change', function() { // This should most probably go to onSubmit event - const cloneId = '${target_name}clonedHTMLEditor', - clonedHTMLEditor = document.createElement('div'); - clonedHTMLEditor.id = cloneId; - clonedHTMLEditor.innerHTML = editor.root.innerHTML; - document.body.appendChild(clonedHTMLEditor); - computedStyleToInlineStyle(clonedHTMLEditor, { - recursive: true, - properties: [ - 'color', 'background-color', 'position', 'box-sizing', 'width', 'height', - 'margin', 'padding', 'border', 'font-size', 'font-family', 'line-height', - 'text-align', 'content', 'text-decoration', 'overflow', - 'list-style-type', 'counter-reset', 'counter-increment', 'ratio', - 'opacity', 'cursor', 'left', 'top', 'right', 'bottom', 'vertical-align', - 'direction', 'white-space', 'border-radius' - ] - }); - targ.value = clonedHTMLEditor.innerHTML + "
"; - clonedHTMLEditor.remove(); + targ.value = editor.root.innerHTML + "
"; sessionStorage.setItem('$module_name/quill=last-message', editor.root.innerHTML); let extraValue = String(), sync = JSON.parse('@{[&convert_to_json($opts->{'textarea'}->{'sync'}->{'data'})]}'), @@ -352,6 +344,13 @@ my $html_editor_init_script = targ.value = targ.value + extraValue; } } + // Inject our styles (unless already injected) to be sent alongside + // with the message. These styles later can be optionally turned in + // inline styling to satisfy GMail strict rules about HTML emails + if (!targ.value.match(/data-iframe-mode=(.*?)$iframe_styles_mode(.*?)/)) { + targ.value = targ.value + + ''; + } }); // Prevent loosing focus for toolbar selects (color picker, font select and etc) diff --git a/mailboxes/folders-lib.pl b/mailboxes/folders-lib.pl index c06d437e7..33ae04a90 100755 --- a/mailboxes/folders-lib.pl +++ b/mailboxes/folders-lib.pl @@ -2852,7 +2852,6 @@ my ($body) = @_; my $iframe_styles = < html, body { overflow-y: hidden; } - @{[&read_file_contents("$root_directory/$current_theme/unauthenticated/css/iframe.css")]} EOF # Add inner styles to the email body @@ -2955,7 +2954,6 @@ return $quote if (!$quote); my $iframe_styles = < html, body { overflow-y: hidden; } - @{[&read_file_contents("$root_directory/$current_theme/unauthenticated/css/iframe.css")]} EOF # Add inner styles to the email body diff --git a/unauthenticated/css/_iframe/advanced.min.css b/unauthenticated/css/_iframe/advanced.min.css new file mode 100644 index 000000000..313f7b821 --- /dev/null +++ b/unauthenticated/css/_iframe/advanced.min.css @@ -0,0 +1,2 @@ +.ql-align-left{text-align:left}.ql-align-center{text-align:center}.ql-align-right{text-align:right}blockquote,h1,h2,h3,h4,h5,h6,ol,p,pre,ul{margin:0;padding:0;counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}ol,ul{padding-left:1.5em}ol>li,ul>li{list-style-type:none}ul>li::before{content:'\2022'}ul[data-checked=false],ul[data-checked=true]{pointer-events:none}ul[data-checked=false]>li *,ul[data-checked=true]>li *{pointer-events:all}ul[data-checked=false]>li::before,ul[data-checked=true]>li::before{color:#777;cursor:pointer;pointer-events:all}ul[data-checked=true]>li::before{content:'\2611'}ul[data-checked=false]>li::before{content:'\2610'}li::before{display:inline-block;white-space:nowrap;width:1.2em}li:not(.ql-direction-rtl)::before{margin-left:-1.5em;margin-right:.3em;text-align:right}li.ql-direction-rtl::before{margin-left:.3em;margin-right:-1.5em}ol li:not(.ql-direction-rtl),ul li:not(.ql-direction-rtl){padding-left:1.5em}ol li.ql-direction-rtl,ul li.ql-direction-rtl{padding-right:1.5em}ol li{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-0}ol li:before{content:counter(list-0,decimal) '. '}ol li.ql-indent-1{counter-increment:list-1;counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}ol li.ql-indent-1:before{content:counter(list-1,lower-alpha) '. '}ol li.ql-indent-2{counter-increment:list-2;counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}ol li.ql-indent-2:before{content:counter(list-2,lower-roman) '. '}ol li.ql-indent-3{counter-increment:list-3;counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}ol li.ql-indent-3:before{content:counter(list-3,decimal) '. '}ol li.ql-indent-4{counter-increment:list-4;counter-reset:list-5 list-6 list-7 list-8 list-9}ol li.ql-indent-4:before{content:counter(list-4,lower-alpha) '. '}ol li.ql-indent-5{counter-increment:list-5;counter-reset:list-6 list-7 list-8 list-9}ol li.ql-indent-5:before{content:counter(list-5,lower-roman) '. '}ol li.ql-indent-6{counter-increment:list-6;counter-reset:list-7 list-8 list-9}ol li.ql-indent-6:before{content:counter(list-6,decimal) '. '}ol li.ql-indent-7{counter-increment:list-7;counter-reset:list-8 list-9}ol li.ql-indent-7:before{content:counter(list-7,lower-alpha) '. '}ol li.ql-indent-8{counter-increment:list-8;counter-reset:list-9}ol li.ql-indent-8:before{content:counter(list-8,lower-roman) '. '}ol li.ql-indent-9{counter-increment:list-9}ol li.ql-indent-9:before{content:counter(list-9,decimal) '. '}.ql-indent-1:not(.ql-direction-rtl){padding-left:3em}li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-indent-2:not(.ql-direction-rtl){padding-left:6em}li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-indent-3:not(.ql-direction-rtl){padding-left:9em}li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-indent-4:not(.ql-direction-rtl){padding-left:12em}li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-indent-5:not(.ql-direction-rtl){padding-left:15em}li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-indent-6:not(.ql-direction-rtl){padding-left:18em}li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-indent-7:not(.ql-direction-rtl){padding-left:21em}li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-indent-8:not(.ql-direction-rtl){padding-left:24em}li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-indent-9:not(.ql-direction-rtl){padding-left:27em}li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}blockquote{border-left:1px solid #ccc} +pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#333;background:#fff}.hljs ::selection,.hljs::selection{background-color:#c8c8fa;color:#333}.hljs-comment{color:#969896}.hljs-tag{color:#e8e8e8}.hljs-operator,.hljs-punctuation,.hljs-subst{color:#333}.hljs-operator{opacity:.7}.hljs-bullet,.hljs-deletion,.hljs-name,.hljs-selector-tag,.hljs-template-variable,.hljs-variable{color:#ed6a43}.hljs-attr,.hljs-link,.hljs-literal,.hljs-number,.hljs-symbol,.hljs-variable.constant_{color:#0086b3}.hljs-class .hljs-title,.hljs-title,.hljs-title.class_{color:#795da3}.hljs-strong{font-weight:700;color:#795da3}.hljs-addition,.hljs-built_in,.hljs-code,.hljs-doctag,.hljs-keyword.hljs-atrule,.hljs-quote,.hljs-regexp,.hljs-string,.hljs-title.class_.inherited__{color:#183691}.hljs-attribute,.hljs-function .hljs-title,.hljs-section,.hljs-title.function_,.ruby .hljs-property{color:#795da3}.diff .hljs-meta,.hljs-keyword,.hljs-template-tag,.hljs-type{color:#a71d5d}.hljs-emphasis{color:#a71d5d;font-style:italic}.hljs-meta,.hljs-meta .hljs-keyword,.hljs-meta .hljs-string{color:#333}.hljs-meta .hljs-keyword,.hljs-meta-keyword{font-weight:700} diff --git a/unauthenticated/css/_iframe/basic.min.css b/unauthenticated/css/_iframe/basic.min.css new file mode 100644 index 000000000..aafae2d67 --- /dev/null +++ b/unauthenticated/css/_iframe/basic.min.css @@ -0,0 +1 @@ +blockquote{margin:0 0 0 .8ex;border-left:1px solid #ccc;padding-left:1ex} diff --git a/unauthenticated/css/_iframe/simple.min.css b/unauthenticated/css/_iframe/simple.min.css new file mode 100644 index 000000000..6b4ee3840 --- /dev/null +++ b/unauthenticated/css/_iframe/simple.min.css @@ -0,0 +1 @@ +.ql-align-left{text-align:left}.ql-align-center{text-align:center}.ql-align-right{text-align:right}blockquote{margin:0 0 0 .8ex;border-left:1px solid #ccc;padding-left:1ex} diff --git a/unauthenticated/js/computed-style-to-inline-style.min.js b/unauthenticated/js/computed-style-to-inline-style.min.js deleted file mode 100644 index 61088f52d..000000000 --- a/unauthenticated/js/computed-style-to-inline-style.min.js +++ /dev/null @@ -1,6 +0,0 @@ -/*! - computed-style-to-inline-style v3.0.0 (https://github.com/lukehorvat/computed-style-to-inline-style) - Copyright (c) 2016 Luke Horvat - Licensed under MIT (https://github.com/lukehorvat/computed-style-to-inline-style/blob/master/LICENSE) - */ -!function(e,t){if("function"==typeof define&&define.amd)define(["module"],t);else if("undefined"!=typeof exports)t(module);else{var o={exports:{}};t(o),e.computedStyleToInlineStyle=o.exports}}(this,(function(e){var t=Array.prototype.forEach;e.exports=function e(o){var r,i,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!o)throw new Error("No element specified.");n.recursive&&(i=o.children,t).call(i,(function(t){e(t,n)}));var l=getComputedStyle(o);(r=n.properties||l,t).call(r,(function(e){o.style[e]=l.getPropertyValue(e),o.removeAttribute("class"),o.removeAttribute("id")}))}})); \ No newline at end of file