voidlabs / mosaico

Mosaico - Responsive Email Template Editor
https://mosaico.io
GNU General Public License v3.0
1.71k stars 503 forks source link

Outlook alternative outputs wrong tag #576

Closed DevepNoName closed 4 years ago

DevepNoName commented 4 years ago

thanks for this great library.

I have this html code:

out1

this is a button with text inside that i can edit (@textBtn01), and because compability with outlook i have this "v:roundrect ..." code, that should contain the same text (@textBtn01)

out

i tried with style="-ko-bind-text: @textBtn01" and is the same / using also a span tag instead of center, its the same.

(sory the images but was illegible because the comments.. here is the html: mso_out.txt

thanks

DevepNoName commented 4 years ago

i know isnt the solution, but for now:

in the viewmodel.js ->viewModel.exportHTML = function() just added the: content = content.replace(/<\/cc><!-- cc:ac:center -->/g, '</center>'); related with #170

bago commented 4 years ago

I'm not able to reproduce your issue.

I see you have 2 style declaration in <center and this is no good, try fixing it.

Then data-ko-link has to be used for code where an empty "urlBtn01" variable would result in the <v:roundrect tag to be removed. I guess this would make the code invalid, so let me know what happens if you do:

<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://www.link.com/" 
    target="_blank" style="-ko-attr-href: @urlBtn01" fillcolor="#ffffff">

instead of

<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" data-ko-link="urlBtn01" href="https://www.link.com/" 
    target="_blank" style="" fillcolor="#ffffff">

While I tried to reproduce your issue I found a bug in the conditional code management. Try replacing this like of code ( https://github.com/voidlabs/mosaico/blob/master/src/js/viewmodel.js#L349 ) from .replace(/><\/cc><!-- cc:sc -->/g, '/>') // restore selfclosing tags to .replace(/><!-- cc:sc -->/g, '/>') // restore selfclosing tags

If you could provide a full html template and steps to reproduce your issue I'm sure I could identify the bug.

bago commented 4 years ago

I think I've identified the issue. The "conditional comments" hacks replace any tag with a sequences of comments (that's to make sure to be able to rebuild the correct html while we know the browser will break it) but this create an issue if you have editable contents (e.g: the -ko-bind-html) as that directive will find the comment inserted before the closing tag as part of its editable content. When you change that content it will drop the comment and break the conditional comment restoration code.

I think we don't really need both a comment before the closing tag and a comment after the closing tag. We use comments just because we know sometimes the closing tag is removed from the browser but we can try to deal with it using only the comment after the tag.