Email composing - where is the code?

[danieldids]

I'm having an issue when users compose new emails.

Whenever an empty line is inserted, espo email composer adds a <br> tag inside a <p> tag, like this:

<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>
<p><br/></p>
<p>Line 5</p>

When viewed on other emails clients (even web mails), this gets too "tall". I'd like to change this behavior but I don't have a clue of how or where to look at first in the code. Any help for that?

[yuri]

The library Summernote used for wysiwyg fields. I believe it's a normal behavior of contenteditable elements (meaning your browser is responsible for this behavior, not our code). Double line-breaks are not supposed to be used in typography I believe. Nor new lines (soft returns), unless it's needed for presenting specific data like a postal address. So when you press the enter it is converted to a paragraph.

[yuri]

You also can use "SHIFT+ENTER" to avoid paragraph being added. Note that it's usually not a good way to compose electronic documents (recommend avoiding soft-returns).

[danieldids]

You also can use "SHIFT+ENTER" to avoid paragraph being added. Note that it's usually not a good way to compose electronic documents (recommend avoiding soft-returns).

Tell all that to the users... :-)

I'm not sure where this behavior is happening, because web mails don't do that. People always double enter when they want to add a space between paragraphs.

Like I just did.

I'll see the Summernot lib and post back any findings I get, thanks for the quick anwser Yuri.

---------------------

EspoCRM rocks btw! I'd like to see some videos about the development process and architecture of your software - for what i've seen of the code, personally I think it is an amazing piece of software regardless of what it does.

[yuri]

I believe it works like MS Word or any other similar text processor.

Thanks for feedback.

[yuri]

This may be helful: https://github.com/summernote/summernote/issues/1776

The options are set here: https://github.com/espocrm/espocrm/b...ysiwyg.js#L418

[esforim]

Shift+Enter work in EspoCRM email too, I use it quite often when I want to write in a "table" like style.

Alternatively you can also use any Description field and it will do that when you press "Enter", then you can copy/paste it and it format will remain.

[danieldids]

What I'm noticing with the embedded editor in Espo is that after each edit (not using the raw code editor), some "garbage" is added to the HTML. For templating (PDF and emails) now I'm using some other HTML editor and pasting the code back.

I'm still trying to learn summerNote. I'll keep writing to this thread if I find anything.

[shalmaxb]

I can confirm, that this is actually, as danieldids experienced. The editors tend to mix in useless stuff. I also use an external editor and paste the code into the code editor. At least, that in most cases works.

[danieldids]

I've created a PDF template and played with it a little bit. My findings are bellow.

First run:



The code for the view above is as follows. I've added line breaks because the original code was in just one line.

The first issue here is the <br> tag added inside empty <p> tags. This should not happen because effectively it's adding two "visual" line breaks.



Now, code of second edit:


Some div tag was added just for styling, even if the line was just copied from the same code.



Final test:


Based on this link yuri sent (https://github.com/espocrm/espocrm/b...ysiwyg.js#L418), I think some regular expression code is adding some unwanted code.

Since I'm not a php developer, I'm kinda a little bit lost to find understand the code as of now.

Edit: I said it's PHP, it's not. It's JS.

[esforim]

Excellent post. But yuri is quite strong debater so sometime I end up agreeing with him. At the end of the day, I hope for future fix of any of these issue... and totally agree the template system kinda suck visually (but at least it working) at the moment but I try my best with the tools available.

[yuri]

> The first issue here is the <br> tag added inside empty <p> tags. This should not happen because effectively it's adding two "visual" line breaks.

I don't agree that this "should not happen". This SHOULD happen. This is a nice trade off for not properly composed document. Documents should have paragraphs, not line breaks. Line breaks should be used for plain documents or for specific cases like postal addresses.

When you press the enter it creates a paragraph, not a new line. If you press the enter two times it creates an empty paragraph.

[danieldids]

I disagree with your disagreement. :-)

Since a <p> already adds space, maybe it should be replaced by a <br>, and not a <p><br/><p> as is happening.

We know how HTML is supposed to be used, but regular users don't. If virtually all email composing tools work the "wrong" way, that's what they expect.

Anyway, I'm complaining mostly because I'm still unable to fix this myself changing the code, but still I think this <p><br/></p> behavior breaks regular users expectations.

[yuri]

Summernote does not have the ability to switch to the mode when enter=new line, double enter=new paragraph. BTW other wysiwyg editors I checked behaves the very same way. I don't know why, maybe it's difficult to make it work the different way.

[danieldids]

Is it possible to run summerNote standalone? So I can try more things?

BTW, for PDF templating in Espo, I'm writing code using CKEditor and pasting it back to Espo, works like a charm.

[esforim]

Thank you. Will be using the online editor.

[danieldids]

Is there any plans to change the editor or change the behavior I'm complaining about? If not, I'll try myself to find a solution.

To be clear, I'm not demanding this change, I just wanna know so I can chose what to do.

[esforim]

Hi daniel, you would probably want to go ahead and try to implement it. Based on reading previous forum post and I think Github issue, there was a few modification made with Summernote to make certain function and feature work.

If the system were to be change to CKEditor then these addition modification need to be look at to. Here is one example (no actual code were reference): https://github.com/espocrm/espocrm/issues/1801

In case you think I'm part of the team, please note I'm just another user like yourself.

[danieldids]

More on the subject.

It seems this summerNote behavior receives a LOT of complaints. Also, a lot of people have suggested some way to fix it.

This one:

$.summernote.dom.emptyPara = "<div><br/></div>";

Kinda works, but not quite. I can test it from the browser console, but it only works when the text area is empty.

Some guy from some random forum says this:

And replace <p> in emptyHTML by <div>

But I'm still trying to find where I can add this parameter/option into summerNote inside EspoCRM. I wouldn't use the <div> tag, but the replacement idea could help me.


But there is more!

if you really want to get it done right, modify summernote.js as follows:

Change
emptyPara: '<p>' + blankHTML + '</p>'
to
emptyPara: '<div>' + blankHTML + '</div>'

summernote.js is minified inside espo. How could I add this configuration?

Finnaly:

There is also emptyPara in [URL="https://github.com/HackerWins/summernote/blob/master/src/js/core/dom.js#L797"]https://github.com/HackerWins/summer...re/dom.js#L797[/URL].
We're using emptyPara and blankHTML for empty paragraph and node in core/dom.js. If we provide custom settings for it, we should (may?) change the way to determine emptiness.

The link is not working but, again, the comments on emptyPara and blankHTML, for me, point to a possible solution.