HTML Named character references

[allan-farrell]

I need to output ✉ in a template, which is an envelope character. See:

https://www.toptal.com/designers/htmlarrows/symbols/envelope/

Just using "✉" in a template doesn't work since that gets escaped.

Love this new gem! Thanks for all the hard work.

Allan

[joeldrapper]

Hey, thanks for the kind words and for reporting this issue. I think Phlex should allow emoji in text but I’m not entirely sure why it’s being escaped. While I look into this, you should be able to use raw "✉️" to get unblocked.

Only use raw with a safe string literal, don’t pass any user-generated content into it.

[joeldrapper]

Hey @allan-farrell, I can't seem to reproduce the issue you mentioned.

This is the test I’m using:

with "text" do
  with "emoji" do
    component do
      def template
        text "✉️"
      end
    end

    it "doesn't break the emoji" do
      expect(output).to be == "✉️"
    end
  end
end

Is it possible you need to add a charset meta tag to the head of your HTML document?

meta charset: "utf-8"

[allan-farrell]

My code is:

a("✉", href: "mailto:#{record.applicant.email}")

which produces:

<a href="mailto:[email protected]">&#9993;</a>

when rendered. I tried using raw as you suggested but it does not produce the desired result. The charset for the document is set correctly to utf-8.

Perhaps I'm doing something wrong here - just learning as I go!

[joeldrapper]

That’s really strange. This is what happens for me:

special-characters.mp4

What’s the encoding of your Ruby file? Is your text editor producing a UTF-8 encoded Ruby file? You can check with file -b my_file.rb on macOS. Not sure how to do that on Windows.

[allan-farrell]

This produces the output that I'm seeking:

a( ActionController::Base.helpers.sanitize("✉"), href: "mailto:#{record.applicant.email}" )

Though after looking at your video I see that I can achieve something similar by inserting an emoji character directly into my component source code.

Thanks for your help!

[joeldrapper]

No problem!