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

Escaping HTML characters in fastboot #67

Open
knownasilya opened this issue Nov 11, 2019 · 5 comments
Open

Escaping HTML characters in fastboot #67

knownasilya opened this issue Nov 11, 2019 · 5 comments

Comments

@knownasilya
Copy link

In the browser I'd do something like:

export default function htmlDecode(input) {
  let doc = new DOMParser().parseFromString(input, 'text/html');
  return doc.documentElement.textContent;
}

and escape the opengraph text, but the DOMParser is not available in fastboot, what to do?

@rwjblue
Copy link
Member

rwjblue commented Nov 11, 2019

I'm not really sure what you are asking, can you explain? What HTML characters need escaping?

@knownasilya
Copy link
Author

knownasilya commented Nov 11, 2019

Things like apostrophes (&#8217) or quotes (&#8220 and &#8221), etc.

@rwjblue
Copy link
Member

rwjblue commented Nov 11, 2019

Can you give more info, possibly a demo repo or something? I'm really struggling to understand why this is an issue in your scenario...

@knownasilya
Copy link
Author

knownasilya commented Nov 11, 2019

Basically we are pulling in content from Wordpress via graphql and dynamically set opengraph data.

Something like this:

 afterModel(result) {
    this.set('headData.ogDescription', result.post.excerpt);
    this.set(
      'headData.ogImage',
      result.post.featuredImage && result.post.featuredImage.sourceUrl
        ? result.post.featuredImage.sourceUrl
        : null
    );
    this.set('headData.ogType', 'article');
  }

Where result.post.excerpt and others have these characters escaped and when using in Twitter you see things like &#8217

@knownasilya
Copy link
Author

knownasilya commented Nov 11, 2019

Looks like something along the lines of

import { htmlSafe } from '@ember/template';

export function decodeHtmlEntities(encodedString) {
  let isFastBoot = typeof FastBoot !== 'undefined';
  if (isFastBoot) {
    return htmlSafe(
      FastBoot.require('html-entities').AllHtmlEntities.decode(encodedString)
    );
  }
  let doc = new DOMParser().parseFromString(encodedString, 'text/html');
  return htmlSafe(doc.documentElement.textContent);
}

export default helper(([encodedString]) => decodeHtmlEntities(encodedString));

and

"fastbootDependencies": [
    "html-entities"
]

in package.json along with the regular dependency and used as helper or function. Seems like this could be provided via fastboot service with an async import when used or something.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants