Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Certain code tag content breaks AMP output #9716

Closed
kevinansfield opened this issue Jul 4, 2018 · 15 comments · Fixed by #10637
Closed

Certain code tag content breaks AMP output #9716

kevinansfield opened this issue Jul 4, 2018 · 15 comments · Fixed by #10637
Labels
bug [triage] something behaving unexpectedly server / core Issues relating to the server or core of Ghost

Comments

@kevinansfield
Copy link
Member

kevinansfield commented Jul 4, 2018

Issue Summary

Adding '$example$' to the markdown truncates the AMP output before the second $ causing broken browser rendering through missing closing tags.

screen shot 2018-07-04 at 13 33 07

To Reproduce

  1. Create a new post and set the content to:
Testing

`'$example$'` asdf

123
  1. Publish the post and open the AMP version on the blog front-end. Note the broken display and missing content after '$example.

The HTML output is clearly malformed. the trailing $' is removed and the rest of the helper output is added to the bottom of the post with the final section duplicated:

screen shot 2018-07-04 at 14 07 19

This results in the browser injecting lots of extra <code></code> tags to try and deal with the malformed HTML.

Removing the SafeString call so that handlebars outputs the raw string appears to show that there's a nested async helper issue:

<div class="kg-card-markdown">
  <p>Testing</p>
  <p>
    <code>'$example__aSyNcId_<_ZziCMbqm__#x27;</code>
    asdf
  </p>
  <p>123</p>
</div>

Narrowing the troublesome content down it appears to be caused by a trailing $ or $' in any element. This can be demonstrated with simply putting $ as the only markdown content in a post.

Technical details:

  • Ghost Version: 1.24.7
  • Node Version: 8.10.0
  • Browser/OS: n/a
  • Database: SQLite
@kevinansfield kevinansfield added bug [triage] something behaving unexpectedly server / core Issues relating to the server or core of Ghost labels Jul 4, 2018
@kirrg001 kirrg001 added the help wanted [triage] Ideal issues for contributors to help with label Jul 10, 2018
@lunaticmonk
Copy link
Contributor

lunaticmonk commented Aug 20, 2018

Seems the problem is at

cleanHTML = sanitizeHtml(ampHTML, {
. ampHTML if logged, prints the code fine to the console. But when we pass it to the sanitizeHtml function, it breaks. Don't know if we missed something in options passed to the sanitizeHtml. Please correct me if I am wrong. Taking a look at this.

@aileen
Copy link
Member

aileen commented Aug 21, 2018

@lunaticmonk I think you're on the right track. That's where I saw this glitch happening too. I couldn't find a solution within the sanitize-html module tho. Would be super nice, if you'd find a solution here 🤗

@jtwebman
Copy link
Contributor

My guess it is a markdown issue as even the non-amp page adds the end code block in the wrong place. I am taking a look at this as well.

@jtwebman
Copy link
Contributor

I was wrong it looks like the mobiledoc issue as this is what gets posted to the server: "mobiledoc": { "version": "0.3.1", "atoms": [], "cards": [ [ "code", { "code": "'$example$' asdfg\n\n123" } ] ], "markups": [], "sections": [ [ 10, 0 ], [ 1, "p", [] ] ] } Notice code seems to be nested. Will keep digging deeper.

@jtwebman
Copy link
Contributor

Ok never mind on all of that was using the wrong editor type. Fixed and now looking at the sanitize html code.

@jtwebman
Copy link
Contributor

jtwebman commented Aug 21, 2018

Ok on the hunt farther down as this might be a handlebars issue as the output from everything in amp_content.js is <p><code>'$example$'</code> asdf</p><p>123</p> which looks correct.

@jtwebman
Copy link
Contributor

Ok this is a bug in express-hbs it uses Javascript string replace which has special string syntax. (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Specifying_a_string_as_a_parameter)
Working on the fix now by moving it to a function replace. This line https://github.com/barc/express-hbs/blob/master/lib/hbs.js#L500 needs to be this res = res.replace(id, function() { return values[id]; });

@jtwebman
Copy link
Contributor

Opened an issue in express-hds to solve this issue: TryGhost/express-hbs#144

@jtwebman
Copy link
Contributor

jtwebman commented Aug 22, 2018

Opened a PR. TryGhost/express-hbs#149

Once it is merged and published in a new version we can open a PR to update the version in this repo.

@m1guelpf
Copy link
Contributor

m1guelpf commented Dec 2, 2018

The PR was merged! 🎉

@jtwebman
Copy link
Contributor

jtwebman commented Dec 3, 2018

Still waiting for the permissions to publish the merge and then we can make sure this fixes this issue by testing out the new version here.

@ErisDS ErisDS removed the help wanted [triage] Ideal issues for contributors to help with label Jan 24, 2019
@ErisDS
Copy link
Member

ErisDS commented Jan 24, 2019

This bug is known and understood, it is expected to be fixed by the update to express-hbs, which has an open PR #10288. Currently waiting on a bug check/fix before merging.

@ErisDS ErisDS added the themes label Jan 24, 2019
allouis added a commit to allouis/Ghost that referenced this issue Mar 25, 2019
closes TryGhost#9716

This was caused by a bug in express-hbs, which has more explanation
here:
TryGhost#9716 (comment)
naz pushed a commit that referenced this issue Mar 26, 2019
closes #9716

This was caused by a bug in express-hbs, which has more explanation
here:
#9716 (comment)
@kevinansfield
Copy link
Member Author

Re-opening because we had to revert the express-hbs bump. See #10643 for further details.

@kevinansfield kevinansfield reopened this Mar 27, 2019
@stale
Copy link

stale bot commented Jun 25, 2019

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@stale stale bot added the stale [triage] Issues that were closed to to lack of traction label Jun 25, 2019
@naz
Copy link
Contributor

naz commented Jun 25, 2019

@allouis as #10750 landed in master this issue can be now closed?

@stale stale bot removed the stale [triage] Issues that were closed to to lack of traction label Jun 25, 2019
@allouis allouis closed this as completed Jun 26, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug [triage] something behaving unexpectedly server / core Issues relating to the server or core of Ghost
Projects
None yet
9 participants