HTML editor adds white-space which alters original HTML (semantically&visually)

Hi Josh.

I have been looking at the CodeMagic files, specifically beautify-html.js. It handles the tag parsing and indentation formatting logic.

I uncommented an else block in the original code of that file which actually keeps inline tags on the same line. I think it was commented out to make the code indent more like standard programming source, but the programmer may have overlooked how white-space is interpreted by browsers for inline tags.

beautify-html.js: lines 219-223: Uncomment the following:

/*else if (tag_check === 'a') { // do not reformat the <a> links
        var comment = this.get_unformatted('</a>', tag_complete); //...delegate to get_unformatted function
        content.push(comment);
        this.tag_type = 'SINGLE';
      }*/

Uncommenting the above will keep the a-tag on one line. The same code can be duplicated for all inline tags (e.g. em, strong, i, sup, sub, …), which is what I am doing for now.

I will implement a fix so that any tag which is in an “inline” array, will remain on one line. Then anyone can add or remove elements from the array as required (e.g. as HTML specifications change).

The next issue, once the above fix is implemented, is when a character is adjacent to an inline tag (pre or proceeding it). The parsing logic immediately puts it on a new line and a browser will render the newline as white-space.
Example:

<p>This plug-in is <em>super</em>-<strong>helpful<strong>!</p>

will show as

<p>
     This plug-in is
     <em>super</em>
     -
     <strong>helpful<strong>
     !
</p>

which outputs as: This plug-in is super – helpful !

I am about 75% through wrapping my mind around the tag parsing logic and intend to submit a fix by the end of the week which addresses the above issues. It’s starting to become a major drawback as our site grows to manually correct spacing in the visual editor after editing in the CodeMagic HTML editor.

Again, just for my own sanity, how have others been dealing with the introduction of white-space when using the CodeMagic HTML editor?

Peace

Hi Josh,

Thanks for bringing me in the loop. I never tested my changes against the latest version of CodeMagic of GitHub, only against the versino that was bundled with the UTMCE plugin I was running at the time. It’s possible the logic between the wrap-text feature (which I did not have) is colliding in some way.

I browsed the thread you referenced. Last comment from Marventus has my attention: “We have determined there is an issue with the CodeMagic addon and the cursor position when the “Wrap Text” option is enabled (checked). We will definitely try to find a solution for this, but in the meantime, unchecking that option should get you going nicely.”

I think wrap-text option was added by Yonus about 6 months ago (i.e. I didn’t implement it). I also recall submitting bug issue related to it not working. That said:
– the version I developed on was the older version of CodeMagic without that option in place
– did not touch any TinyMCE UI logic (only edited single .js file which addressed parsing logic)
– only developed and tested on FireFox

It’s a crunch week at moment, but early next week.
– I’ll try and replicate what everyone is experiencing
– test my changes on Chrome/Safari. Working on Mac and IE not easy option at moment.

Haven’t experienced any issues with UTMCE v4.0.8 on WP 3.3.1 or v4.5 on WP 3.5 – but again on FireFox only.

Peace