Possible Bug in editor and PDF

[shalmaxb]

From version 7.2 I have the following issue:

I want to print an article from Knowledge Base to PDF. I created a template with the {{{body}}} tag.

When I open the article to edit and save it again, there is added code into the first paragraph, right after the opening <p>, that I do not want:

<p><span style="background-color: var(--input-bg); color: var(--input-color);"> texttexttext </span></p>

When printing to PDF, this is the result:

[yuri]

Can somebody help with fixing?

And with reproducing.

[victor]

Hi shalmaxb yuri ,

Current version: 7.2.3

After the paragraph was made, one of the colors was randomly selected as shown in screenshot 1.
After that, the Template was saved and received in the finished PDF file the same as shalmaxb.

If we manage to click "Reset to default" before saving the Template, then we will not get any extra code. If we save the changes and go to our Template again to click "Reset to default", then the extra code does not disappear and remains until we manually remove it from the </> mode as shown in screenshot 2.

The human factor

[espcrm]

I wonder if you guy can just create a formula to remove it as a workaround temporary solution. But you probably want to only to remove the very first code section and doesn't affect the {{{body}}}

[victor]

A little off topic...
Personally, when working with Templates, I copy various elements (placeholders, text, etc.) immediately into </> mode. Only then do I insert the necessary paragraphs, choose font sizes, their color, etc. in client mode. This method allows you to protect yourself from unnecessary code after saving the Template. Another little life hack of mine when working with complicated templates: periodically make a copy of the template, from which you can always copy the correct code in </> mode.

[shalmaxb]

@victor
I do similar as you commented. I have always a copy of the code in a code editor, correctly formatted (as the non-formatted code is a real pain to edit).
Sometimes I even produce the whole code from scratch in the editor first and in the end copy it to the espoCRM editor.
Especially with the PDF engine many things go wrong, even if the code is clean and correct HTML. Sometimes a mere space or linebreak in the code is too much for the PDF engine and it starts to mess up, inserts randomly code snippets, that you don`t want, and so on.
To produce a nice looking layout takes hours sometimes (and lot of frustration).

[yuri]

When reporting a bug, please include steps to reproduce, and be more explicit.

[shalmaxb]

Did I miss anything?

1. I want to create a PDF from Knowledgebase, the respective article is ready and formatted.
2. I create a PDF Template with some margin, font etc. and only a {{{body}}} tag, no extra formatting.
3. The result is not as desired (small errors, wrong text size etc.
4. I go back into the article and open the editor.
5. Already in this stage the mentioned code is randomly inserted. Even I only opened the code view of the editor without touching.
6. I delete the code manually and save. That works to get rid of it.
7. When I try to correct formatting errors in WYSIWYG, randomly the code is messed up. Because of that I do my formatting now in an external editor and copy that back to the espoCRM editor.

I hope that helps to reproduce.

[shalmaxb]

Meanwhile I am trying to narrow it down.

The inserting of the mentioned code only happens, if I change anything in the WYSIWYG mode before going to the code editor.

Example: In WYSIWYG I mark a h4 and delete it. When I go then to the code view, the mentioned code is added.
I can delete this code and it will be ok in the editor.

Besides the non-wanted code also the h-Tags are different than before, see screenshots.


h4 before error


h4 after error

Here the message in the Browser console on saving:

[Violation] Avoid using document.write(). https://developers.google.com/web/updates/2016/08/removing-document-write
renderDetail @ wysiwyg.js?r=1664812502:334
afterRender @ wysiwyg.js?r=1664812502:278
_afterRender @ bullbone.js:970
(anonymous) @ bullbone.js:913
(anonymous) @ bullbone.js:1293
getTemplate @ bullbone.js:1948
_getTemplate @ bullbone.js:1377
(anonymous) @ bullbone.js:1290
r @ bullbone.js:1233
_getNestedViewsHtmlList @ bullbone.js:1239
_getHtml @ bullbone.js:1275
(anonymous) @ bullbone.js:894
render @ bullbone.js:893
eval @ detail.js?r=1664812502:1491

[shalmaxb]

found another issue in formatting. I use blockquote from WYSIWYG, which does not display correctly anymore. In edit mode (WYSIWYG) it works like before, but after save in view mode (WYSIWYG) the blockquote bar (border-left) on the left side is missing, the indent is kept.

Screenshots