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

https://github.com/tinymce-plugins/codemagic/issues/6

Hello bsy-web. Yes, we were aware of the issue. However, as you well pointed out, codemagic is still actively maintained, so until they don’t come up with a solution, there’s nothing we can do on our end.
Between you and me, I don’t really understand their reply to you, and I find it odd they would even point in our direction when this is clearly a bug on their end.
So, bottom-line, if they fix it on their end we will be happy to do so in ours.
Thank you for letting us know anyway and don’t hesitate to stop by again and remind us if an update is released.

Hello bys-web.

Thanks for doing some pretty detailed research there!! I really appreciate that!

To be honest, I haven’t looked inside the CodeMagic code to see exactly what he is doing in there… but I’m certainly open to the possibility of trying to find this “bug” and working around it.

I do remember a few other Ultimate Tinymce users reporting this behavior.. but I wasn’t able to take the time to isolate the cause. AND, since it resides in an addon I didn’t code myself… it might be a little tedious.

However, after reading your comment… it does make me want to get in there and see if we can find a solution to this.

Have you looked at any of the CodeMagic files individually?

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 Marventus.

I interpreted their reply as acknowledging the issue is on there end.

I think they were clarifying for me that updating CodeMagic does not necessarily mean Ultimate TinyMCE will integrate those changes (the latest version, for example, (supposedly [I have not gotten it to wokr for me]) includes text wrapping as a new option but the current version included in UTMCE does not include it.

If y’all can come up with some more test cases, to ensure nothing has regressed, that would be awesome. Valid HTML, invalid HTML, nested cases, unclosed or unopened tag-pairs, etc. will help identify any other issues.

Thanks.

You Sir… are a Saint!!

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

Honestly.. I think the exact same way you were. They would edit in the CodeMagic.. and then manually remove the added whitespace after updating the editor.

Please feel free to use my personal contact form:
https://joshlobe.com/contact-me/

And we can continue this via email, if you prefer.

I’ll comment out the same area you suggested above.. and run it through a few tests of my own.

Again… Thank you very much for your time with this!! I know quite a few people will be grateful if that “bug” gets squashed!

Hey… I’m ready to implement this… crashed my computer… and lost all my emails.

So, I would love to connect with you again. If you happen to get this message, will you please contact me again via the contact link above.

Thanks mate!!

@bsy-web,

Thank you VERY much for your involvement with this and with the git. I have tested your changes.. and it appears to be working much better with WP. I have not noticed any ‘regression’… so I think we are good.

I have implemented your most recent changes to git. I don’t think the author has included these in the source yet… but I did implement your changes in “our” source.

So, once again… thank you!!

I am marking this thread as resolved… please feel free to change if you feel differently.

The updated code will be available in version 4.6.

@josh,

I’m glad it’s working for you. I haven’t seen the pull request merged either.

I only tested the code with UTMCE v4.0.8 as I’m dependent on WP 3.3.1 at moment, but am glad it is working in the latest version of your plug-in.

There are some other CodeMagic enhancements in the pipeline contributed by others which I may try and merge in the next few months (local storage of settings, returning to same line after reformatting, line wrap, etc.)

I’ll keep you posted if there is forward movement.

Peace

Yes, please do. And thank you again! Yes, it’s working in the latest version of my plugin (4.5) as well as the latest version of WP (3.5.1).

Again… many many thanks!!

Hey, my friend.

We apparently have another issue with the CodeMagic button.. and I’m wondering if it might be related to the super awesome changes you submitted to GitHub.

Take a look at this thread here:
https://www.forum.joshlobe.com/showthread.php?tid=1646

Your thoughts on the issue would be greatly appreciated.

Thanks!

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

Josh,

Did you check out the latest version of CodeMajic for inclusion in current version of UTMCE or just add the updated beautify-html.js file to version of CodeMagic you have been using so far?

Thanks

Gosh, I really appreciate your responsiveness. No worries at all… I know it gets busy. Just knowing you know is good with me ??

Ummm… If I recall correctly.. I think I implemented the whole codemagic again. But, I’ll take a double-look and verify. It’s late here, so it’ll be first thing in the morning when I check.

Again.. Thank you. I’ll post back here with my results.

You rock!!!

Updated git-hub issue related to “Wrap Text” not functioning as expected: https://github.com/tinymce-plugins/codemagic/issues/7

Simple work-around for having option as unchecked for default. Considering others have experienced it not working as well, makes sense to have it unchecked by default.

To have the CM editor open with option unchecked by default, chance following line/code:
/codemagic/js/codemajic.js, line 6: wraptext_active: true to wraptext_active: false

I did a quick look to see if whole UI element could be greyed out, but it was not obvious to me.