U4-8543 - Rich Text Editors are intermittently inserting empty p tags when there is a macro inserted

Created by Nick 31 May 2016, 15:59:39 Updated by steinar mar 23 Feb 2018, 13:15:56

Tags: PR

Relates to: U4-5334

Rich Text Editors are intermittently inserting empty p tags when there is a macro inserted

What did you do?

  • In a RTE press enter a few times to create new lines
  • In the RTE enter some text
  • Add a few more lines in the RTE by pressing enter
  • Insert a macro into the RTE
  • Save and publish the page

What did you expect to happen? Saves the text in the correct places

What actually happened? The RTE insert atleast three extra in empty p tags

 

2 Attachments

Comments

Jeremy Pyne 01 Jun 2016, 17:23:15

Still having issues with erroneous <p>&nbsp;</p> tags added in my RTE's on the latest version.


Jeremy Pyne 01 Jun 2016, 19:25:18

Specifically this seams to be happening when switching in and out of raw html mode using codeMirror when a macro is selected. The system injects a <span class="CmCaReT"> </span> witch is removed after leaving the source editor but when a macro is selected the tag is inserted before the macro and automatically wrapped in a <p> tag. This additional <p> doesn't seam to be getting cleared.


Jeremy Pyne 01 Jun 2016, 21:25:05

Ok, I have posted a fix for this issue. As far as I can tell all cases causing the extra P's have been fixed. https://github.com/umbraco/Umbraco-CMS/pull/1299

As a workaround until then you should be able to go into the source, delete the extra P's, then make sure to click into a text area and not a macro/div before submitting the source code changes.


Marcin Zajkowski 02 Jun 2016, 02:09:14

@Jeremy.Pyne it was also discussed / fixed and rolled back here: http://issues.umbraco.org/issue/U4-5334. Feel free to check and eventually move this forward. What your change did? Is it still possible to put empty tags on demand?


Jeremy Pyne 02 Jun 2016, 03:32:27

It is possible that the fixes I did are overlapping the other but I don't see any code changes there to compare, just some config changes that introduced new issues.

In short the changes I made do three things: *Hide the cursor flag when switching out of HTML mode in some cases there it would not be hidden and mess up the display, but not the actual data. *Add a special rules to detect when the cursor is in an empty paragraph and remove it when going into HTML mode. This would happen due to tinyMce adding a <p> around the cursor when it's not in a element/node or in a <div> node. *Added an extra condition to always reset the cursor position when it is inside of a Macro Container when switching to HTML mode. This would cause the system to try and insert a cursor marker inside the macro code witch would be invalid and be bumped up to a sibling and then wrapped in a <p>. Instead the cursor is cleared and the cursor defaults to the beginning of the line of macro code.

There shouldn't be any issues with the changes conflicting with anything other fixes.


Jeremy Pyne 02 Jun 2016, 03:38:27

As the merge doesn't seam to what to show the changes here is a diff:

@@ -138,7 +138,8 @@
 	head.appendChild(div);
 	
 	// Set CodeMirror cursor to same position as cursor was in TinyMCE:
-	var html = editor.getContent({source_view: true});
+	var html = editor.getContent({ source_view: true });
+	html = html.replace(/(<p>\s*)<span\s+class="CmCaReT"([^>]*)>([^<]*)<\/span>(\s*<\/p>\n)/gm, String.fromCharCode(chr));
 	html = html.replace(/<span\s+class="CmCaReT"([^>]*)>([^<]*)<\/span>/gm, String.fromCharCode(chr));
 	editor.dom.remove(editor.dom.select('.CmCaReT'));
 	html = html.replace(/(<div class=".*?umb-macro-holder.*?mceNonEditable.*?"><!-- <\?UMBRACO_MACRO macroAlias="(.*?)".*?\/> --> *<ins>)[\s\S]*?(<\/ins> *<\/div>)/ig, "$1Macro alias: <strong>$2</strong>$3");
@@ -206,15 +207,15 @@
 
 	var pos = codemirror.getCursor(),
 		curLineHTML = doc.getLine(pos.line);
-
-	if (findDepth(curLineHTML, cc) !== 0) {
+	
+	if (findDepth(curLineHTML, cc) !== 0 || curLineHTML.indexOf("UMBRACO_MACRO")) {
 		// Cursor is inside a <tag>, don't set cursor:
 		curLineHTML = curLineHTML.replace(cc, '');
 		doc.getLineHandle(pos.line).text = curLineHTML;
 	}
 
 	// Submit HTML to TinyMCE:
-	editor.setContent(codemirror.getValue().replace(cc, '<span class="CmCaReT">&nbsp;</span>'));
+	editor.setContent(codemirror.getValue().replace(cc, '<span class="CmCaReT" style="display:none">&#0;</span>'));
 	editor.isNotDirty = !isDirty;
 	if (isDirty) {
 		editor.nodeChanged();


Sebastiaan Janssen 21 Jun 2016, 08:12:01

Sorry, but these fixes have some "interesting" side effects when there's already an empty

block before or after a macro, for example after saving it with a

before and after the macro they were there 3 times and there's a red dot in one of the paragraphs which I assume is the &#0;.


Sebastiaan Janssen 21 Jun 2016, 08:12:35

See screenshot.


Michael Falk 06 Dec 2016, 10:52:48

Hi @sebastiaan Are there any news on this issue?


Santhoshkumar N 26 Dec 2017, 18:43:26

@sebastiaan Any update on the issue? I see the same problem in 7.5.14


Chriztian Steinmeier 22 Feb 2018, 21:40:57

Just chiming in to record that v7.8.1 (which upgraded TinyMCE if I'm correct?) still/also has this problem.


steinar mar 23 Feb 2018, 13:15:56

Also Chiming in that this affects v7.8.1, every save/publish action with a macro adds an extra unwanted


Priority: Normal

Type: Bug

State: Open

Assignee:

Difficulty: Normal

Category:

Backwards Compatible: True

Fix Submitted: Pull request

Affected versions: 7.4.3, 7.5.6, 7.5.14, 7.8.1

Due in version:

Sprint:

Story Points:

Cycle: