• Resolved mgongee

    (@mgongee)


    I’m using Highlight.js in Prismatic v2.4. When I insert some XML/HTML code using the “Add Highlight.js” button, it inserts only the texts inside tags ( the tags themselves are removed).

    How to replicate:
    insert a code snippet using the “Add Highlight.js” button. Paste the following snippet in the box:

    <dependencies>
       <dependency>
          <groupId>com.baeldung</groupId>
          <artifactId>optional-project</artifactId>
          <version>1.0</version>
          <optional>true</optional>
       </dependency>
    </dependencies>

    When the code block is inserted into the page, it strips the tags, and appears as in the screenshot:
    http://staging11.baeldung.com/Screenshot%20from%202020-07-24%2017-50-03.png

    I’ve tried various options for “Content code escape” setting, with no difference. XML/HTML code can be inserted only if it is already escaped ( “<” and “>” replaced by & lt; and & gt; )

    The suggested fix is to edit “prismatic/js/buttons-highlight.js” file on line 101:

    instead of

    ed.insertContent('<pre><code class="language-'+ code.language +'">'+ code.snippet + '</code></pre>');

    use

    ed.insertContent('<pre><code class="language-'+ code.language +'">'+ tinymce.DOM.encode(code.snippet) + '</code></pre>');

    • This topic was modified 4 years, 6 months ago by mgongee.
Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author Jeff Starr

    (@specialk)

    Thanks for this, @mgongee. Will get it fixed up in the next plugin version.

    Thread Starter mgongee

    (@mgongee)

    Update:

    I’ve tested this issue in WP 5.2.2 with default theme and no plugins, and HTML was escaped and displayed properly. But in WP 5.4.2 (with default theme and no plugins) HTML is not escaped.

    Plugin Author Jeff Starr

    (@specialk)

    Thanks for the update.

    Plugin Author Jeff Starr

    (@specialk)

    Hey @mgongee, I tried replicating this issue but could not repeat your results. I am running latest WordPress, tried adding your code snippet via the Prismatic/Highlight.js block. I recorded the test here (zipped MP4 video):

    https://perishablepress.com/share/prismatic-code-escaping.zip

    You can see that I paste the code, save changes, refresh the page, and view the post on the front-end. Thru all of that the code is escaped properly. This is using the setting “Code Escaping” set to “Frontend & Admin Area”.

    So there must be something else conflicting, or maybe I am missing something. Please let me know if I can provide any further infos. Thank you.

    Thread Starter mgongee

    (@mgongee)

    Hi, I want to clarify that we are using post editor in classic mode (via “Classic editor” plugin) on WP 5.4.2

    Here are screenshots of the edit process:

    http://staging11.baeldung.com/Selection_037.png
    http://staging11.baeldung.com/Selection_038.png
    http://staging11.baeldung.com/Selection_039.png

    Plugin Author Jeff Starr

    (@specialk)

    Thanks for the feedback, @mgongee. Will take another look at this for the next update. Much appreciated.

    Hey Jeff,
    Just wanted to see if happen to have had a chance to look into this weird issue with the tags?

    Thanks,
    Eugen.

    Plugin Author Jeff Starr

    (@specialk)

    No, I’ve completed plugin updates for WP 5.5. Next updates are due in December, or whenever WP 5.6 rolls out. Thanks for your patience.

    Plugin Author Jeff Starr

    (@specialk)

    Just to follow up. This issue is resolved in the next version of the plugin. Should be released later today or tomorrow. Thanks again for your help, @mgongee.

    Thread Starter mgongee

    (@mgongee)

    Hi Jeff,

    we tested new plugin version (2.6) and the issue is still there. How to reproduce it:

    0. Select “Highlight.js” as the library to use
    1. Create a new post with Gutenberg Editor on WordPress 5.5
    2. Insert new Prismatic block into it
    3. Put the following code into Prismatic block:

    <dependencies>
    <dependency>
    <groupId>com.baeldung</groupId>
    <artifactId>optional-project</artifactId>
    <version>1.0</version>
    <optional>true</optional>
    </dependency>
    </dependencies>

    4. Publish the post and check the result on front end. XML tags would be stripped.

    Screenshots: https://imgur.com/a/jpe1AFS

    I’ve checked and there is corresponding line in the “buttons-highlight.js” ( #105 ):

    ed.insertContent(‘

    <code class="language-'+ code.language +'">'+ code.snippet + '

    ‘);

    we solved this issue on our site by replacing this line with fixed version:

    ed.insertContent(‘

    <code class="language-'+ code.language +'">'+ tinymce.DOM.encode(code.snippet) + '

    ‘);

    • This reply was modified 4 years ago by mgongee.
    • This reply was modified 4 years ago by mgongee.
    Plugin Author Jeff Starr

    (@specialk)

    Yeah this was done last update for the prism button. Will add to the highlight button as well. Thank you for the feedback, @mgongee.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘HTML tags are stripped out instead of being escaped’ is closed to new replies.