-
Notifications
You must be signed in to change notification settings - Fork 18
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #18 from synacor/markup-text
Add <MarkupText /> component
- Loading branch information
Showing
9 changed files
with
319 additions
and
49 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import { h } from 'preact'; | ||
| import delve from 'dlv'; | ||
|
|
||
|
|
||
| /** Highlight/colorize the i18n'd node if `mark` is set on `intl` in context. If not, just returns `value` | ||
| * | ||
| * @private | ||
| * @param {String|VNode} value The l10n'd text/vnode to highlight or pass through | ||
| * @param {string} id The key used to lookup the value in the intl dictionary | ||
| */ | ||
| export function HighlightI18N({ value, id }, { intl }) { | ||
|
|
||
| if (intl && intl.mark) { | ||
| const dictionaryKey = `dictionary${intl && intl.scope ? `.${intl.scope}` : ''}.${id}`; | ||
| return h('mark', { | ||
| style: 'background: ' + ( | ||
| value | ||
| ? delve(intl, dictionaryKey) | ||
| ? 'rgba(119,231,117,.5)' // Green = this string is fully internationalized | ||
| : 'rgba(229,226,41,.5)' // Yellow = this string does not have a value in the dictionary, but it has a fallback value | ||
| : 'rgba(228,147,51,.5)' // Red = this string has no value and no fallback | ||
| ), | ||
| title: id | ||
| }, value); | ||
| } | ||
|
|
||
| return value ; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import { h } from 'preact'; | ||
| import { Text } from './text'; | ||
| import { Localizer } from './localizer'; | ||
| import { HighlightI18N } from './highlight-i18n'; | ||
|
|
||
| /* eslint-disable react/no-danger */ | ||
|
|
||
| /** `<MarkupText>` is just like {@link Text} but it can also contain html markup in rendered strings. It wraps its contents in a `<span>` tag. | ||
| * | ||
| * @param {Object} props props | ||
| * @param {String} props.id Key to look up in intl dictionary, within any parent scopes (`$scope1.$scope2.$id`) | ||
| * @param {Object} [props.fields={}] Values to inject into template `{{fields}}` | ||
| * @param {Number} [props.plural] Integer "count", used to select plural forms | ||
| * @param {Object} context | ||
| * @param {Object} context.intl [internal] dictionary and scope info | ||
| * | ||
| * @example | ||
| * // If there is no dictionary in context.. | ||
| * <MarkupText id="foo"><b>The Foo</b></MarkupText> | ||
| * // ..produces the vnode: | ||
| * <span><b>The Foo</b></span> | ||
| * | ||
| * @example | ||
| * // Given a dictionary and some fields.. | ||
| * <IntlProvider definition={{ foo:'Le Feux <b>{{bar}}</b>' }}> | ||
| * <MarkupText id="foo" fields={{ bar: 'BEAR' }}>The Foo</MarkupText> | ||
| * </IntlProvider> | ||
| * // ..produces the vnode: | ||
| * <span>Le Feux <b>BEAR</b></span> | ||
| * | ||
| * @example | ||
| * // Within a scope, both `id` and the definition are namespaced.. | ||
| * <IntlProvider scope="weather" definition={{ foo:'Le <a href="http://foo.com">Feux</a>' }}> | ||
| * <MarkupText id="foo">The Foo</MarkupText> | ||
| * </IntlProvider> | ||
| * // ..produces the vnode: | ||
| * <span>Le <a href="http://foo.com">Feux</a></span> | ||
| * | ||
| * @example | ||
| * // renders nothing if there is no key match and no fallback | ||
| * <div><MarkupText /></div> | ||
| * // ..produces the vnode: | ||
| * <div/> | ||
| */ | ||
| export function MarkupText(props) { | ||
| return ( | ||
| <Localizer> | ||
| <Html html={<Text {...props} />} id={props.id} /> | ||
| </Localizer> | ||
| ); | ||
| } | ||
|
|
||
| function Html({ html, id }) { | ||
| let value = !html ? html : typeof html === 'string' ? <span dangerouslySetInnerHTML={{ __html: html }} /> : <span>{html}</span> ; | ||
| return <HighlightI18N id={id} value={value} />; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,16 @@ | ||
| import { intl } from './intl'; | ||
| import { IntlProvider } from './components/intl-provider'; | ||
| import { Text } from './components/text'; | ||
| import { MarkupText } from './components/markup-text'; | ||
| import { Localizer } from './components/localizer'; | ||
| import { withText } from './components/with-text'; | ||
|
|
||
| export { intl, IntlProvider, Text, Localizer, withText }; | ||
| export { intl, IntlProvider, Text, MarkupText, Localizer, withText }; | ||
|
|
||
| intl.intl = intl; | ||
| intl.IntlProvider = IntlProvider; | ||
| intl.Text = Text; | ||
| intl.MarkupText = MarkupText; | ||
| intl.Localizer = Localizer; | ||
| intl.withText = withText; | ||
| export default intl; |
Oops, something went wrong.