Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Ability to have markup in strings

See original GitHub issue

We have use cases where we would like to insert markup inside of a phrase that should be translated as a whole unit, e.g. <a href="http://example.com>Please click here</a> to open the page

As the system currently works, we would need to construct it as, <Text id='link.pre'/><a href="http://example.com><Text id='link.text'/></a><Text id='link.post'/> because different languages might translate this sentence akin to Please, to open the page <a href="http://example.com>click here</a> or other variations of ordering, which forces a before, during, and after markup set of text. This gets out of control if you have more than one piece of markup in your text. It also means that a translation service has to try to translate this set of strings:

link.pre=''
link.text='Please click here'
link.post='to open the page'

I image that is difficult for a translation service.

I wonder if this could be solved by simply allowing for markup in the string, and having a boolean flag for something like <Text id="openPage" dangerouslySetInnerHTML />

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
developitcommented, Oct 2, 2017

Can simplify via Localizer:

const MarkupText = ({ id, children, ...props }) => (
  <Localizer>
    <Markup
      {...props}
      markup={<Text id={id}>{children}</Text>}
      type="html"
    />
  </Localizer>
);

… or without preact-markup at all:

const MarkupText = ({ id, children, ...props }) => (
  <Localizer>
    <Html {...props} html={<Text id={id}>{children}</Text>} />
  </Localizer>
);
const Html = ({ html, ...props }) => (
  <span dangerouslySetInnerHTML={{ __html: html }} {...props} />
);
0reactions
jhoffmcdcommented, Feb 7, 2018

I was messing around with this, and I had a more complex use case I thought I would share.

Say I take this one step further, and I need to do template replacement into a string that required both markup and a component, in this case <Icon />

You can extend @developit <MarkupText /> component to include a fields argument like this:

const MarkupText = ({ id, fields, children, ...props }) => (
  <Localizer>
    <Html {...props} html={<Text id={id} fields={fields}>{children}</Text>} />
  </Localizer>
)

Then use preact-render-to-string to pre-render that component when passing it to <MarkupText />:

<MarkupText id='nav.text' fields={
  { navArrowLeft: `<span class='nav__icons'>${render(<Icon name='prev' />)}</span>` }
} />

Assuming that your translation string contains {{navArrowLeft}}.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Replace html markup in strings [duplicate] - Stack Overflow
How can I replace html elements in strings which have mixed content such as: $str = "Find the   element in this string";....
Read more >
Console Markup — Rich 13.0.0 documentation
Rich supports a simple markup which you can use to insert color and styles virtually everywhere Rich would accept a string (e.g. print()...
Read more >
Strings on the Web: Language and Direction Metadata - W3C
If the string's base direction is opposite that into which it is being inserted, the markup or control codes need to tightly wrap...
Read more >
Allow #markup to be an array of strings and join them safely
Support arrays of strings in #markup and filter or escape according to using #safe_strategy and #allowed_tags.
Read more >
Listings: Format part of a string differently (markup language ...
When I have normal C# code with template code inside (not inside a string) it works fine, but in the example above the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

MarkupText only renders first child when using fallback

Next page

Server sync error: Unsupported Media Type