WordPress.org

Ready to get started?Download WordPress

Forums

Ultimate TinyMCE
[resolved] HTML editor adds white-space which alters original HTML (semantically&visually) (19 posts)

  1. bsy-web
    Member
    Posted 1 year ago #

    codemagic/js/beautify-html.js is putting "\n" after html tags which should not be broken up due to HTML white-space behavior.

    HTML Input:

    <p>super-<em>duper</em>-friendly<p>

    HTML Output:

    <p>
                super-
                <em>
                      duper
                </em>
                -friendly
            </p>

    Browser output:
    super- duper -friendly
    *note the spaces before and after "duper"

    This is occurring for all white-space sensitive tags such as:

    <em>
            <strong>
            <sup>
            <a>
            <p>

    -----
    I looked at the beautify.js online demo, HTML Tidy online demo, and FireBug add-on and none of those code formatting split <p> or the other tags listed above (they are all on one line).

    I submitted an issue to the GitHub maintainer for CodeMagic and he acknowledged it as a bug. Are you aware of this issue or is there a work around for it?

    I've searched for a long time, and no one who uses the plugin with this feature is reporting the issue. Great plug-in.

    -----
    A more involved test-case with output from the plug-in's HTML editor (note how carriage returns will always add space when rendered by the browser):

    <p>
        A test of nested paragraph tags...
    </p>
    <p>
        This is the nested content. And nest
        <em>italics<strong>as<em>well</em>
        </strong>
        .
        </em>
    </p>
    <p>
        This is a
        <em>multi</em>
        -format test.
    </p>
    <p>
        This is
        <strong>bold</strong>
        . There should not be a space between the format and the ending punctuation.
    </p>
    <p>
        How about super
        <sup>2</sup>
        ? Were any
        <a href="http://www.google.com">extraneous</a>
        spaces added before and/or after the
        <a href="http://google.com">superscript</a>
        ? Verify that the question marks in this paragraph also have no preceeding spaces.
    </p>
  2. bsy-web
    Member
    Posted 1 year ago #

  3. Marventus
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  4. Josh (WP Edit)
    Volunteer Moderator
    Plugin Author

    Posted 1 year ago #

    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?

  5. bsy-web
    Member
    Posted 1 year ago #

    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

  6. bsy-web
    Member
    Posted 1 year ago #

    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.

  7. Josh (WP Edit)
    Volunteer Moderator
    Plugin Author

    Posted 1 year ago #

    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:
    http://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!

  8. Josh (WP Edit)
    Volunteer Moderator
    Plugin Author

    Posted 1 year ago #

    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!!

  9. Josh (WP Edit)
    Volunteer Moderator
    Plugin Author

    Posted 12 months ago #

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

  10. bsy-web
    Member
    Posted 12 months ago #

    @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

  11. Josh (WP Edit)
    Volunteer Moderator
    Plugin Author

    Posted 12 months ago #

    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!!

  12. Josh (WP Edit)
    Volunteer Moderator
    Plugin Author

    Posted 11 months ago #

    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:
    http://www.forum.joshlobe.com/showthread.php?tid=1646

    Your thoughts on the issue would be greatly appreciated.

    Thanks!

  13. bsy-web
    Member
    Posted 11 months ago #

    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

  14. bsy-web
    Member
    Posted 11 months ago #

    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

  15. Josh (WP Edit)
    Volunteer Moderator
    Plugin Author

    Posted 11 months ago #

    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!!!

  16. bsy-web
    Member
    Posted 10 months ago #

    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.

  17. Josh (WP Edit)
    Volunteer Moderator
    Plugin Author

    Posted 9 months ago #

    My fault, @bsy-web. I totally missed this.

    So was the only edit to source files the change 'true' to 'false'?

  18. bsy-web
    Member
    Posted 9 months ago #

    @josh: Yes, most recent edit to have "Wrap lines" unchecked by default was only to change:
    /codemagic/js/codemajic.js, line 6: wraptext_active: true to wraptext_active: false

    I verified on my local build on Chrome, Opera, Safari and Firefox. All started CodeMagic modal window with wrap line option unchecked, allowing for standard editing.

    If the user checks the option, same problem appears, in which case they just need to uncheck again.

    Please confirm in your local build.

  19. Josh (WP Edit)
    Volunteer Moderator
    Plugin Author

    Posted 9 months ago #

    Perfect, Perfect. Will make the change on my end as well.

    Yes, will definitely check and confirm.

    Thank you very, very much... my friend!!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic