Overview

The Effect Markup Converter component transforms raw effect markup into sanitized HTML by replacing custom tokens {text;type;value} with styled elements. Each token type maps to a specific visual component - links, badges, or icons. All non-token text can be either regular HTML and CSS or plain text.

Text-Level Semantic HTML Elements

To style the markup beyond plain text, we recommend using text-level semantic HTML elements.

Usage Example

Below is an example of the Effect Markup Converter component in action

Effect Markup (What the editor enters into the Effect field)
When this Pokémon has <span style="font-size: 1.3rem">⅓</span> or less of its {HP;STAT;HP} remaining, its {GRASS;TYPE;Grass}-type moves inflict 1.5x as much regular damage.
Converted HTML (What is generated by the Effect Markup Converter component)
When this Pokémon has <span style="font-size: 1.3rem">⅓</span> or less of its <span style="display: inline-flex; gap: 0.25rem"> <span style="text-transform: uppercase; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;">HP</span> <img src="https://cdn.pokedb.org/pokemon_assets/stats/stat_hp.webp" style="width: 24px; height: 24px" width="24" height="24" alt="stat img"/> </span> remaining, its <span style="background-color: #5D9D3C; font-weight: 700; margin: 0.125rem; padding: 0.25rem; line-height: 2rem; border-radius: 0.5rem"> <a href="/types/Grass" style="display: inline-flex; gap: 0.25rem; justify-content: center; align-items: center; color: rgb(255 255 255);"> <img src="https://dewz2z6mg3r36.cloudfront.net/da21721e57797069f9095c56b3858988f11d3a0924feec657a9ff11da89fc354" width="13px" height="13px" style="width: 13px; height: 13px" alt="type icon"/> <span style="color: rgb(255 255 255);">Grass</span> </a> </span>-type moves inflict 1.5x as much regular damage.
Evaluated Output (What is displayed to the user when the effect is rendered)
When this Pokémon has ⅓ or less of its HP stat img remaining, its type icon Grass -type moves inflict 1.5x as much regular damage.

Token Syntax

In general, tokens follow the pattern:
{text;type;value}

  • text: The user-facing label.
  • type: One of the supported categories determining the replacement style.
  • value: A key or identifier used to fetch the associated asset or record.

For a detailed list of all supported token types and what they map to, see Token Types

Security & Sanitization

After tokens are replaced, the raw HTML may include untrusted content. To prevent cross-site scripting (XSS) and other injection attacks, we use JSDOM to create a virtual DOM context and DOMPurify to sanitize the generated markup. This removes any scripts, event handlers, or unsafe attributes that could execute malicious code when rendered in the browser.

Practices we use to ensure security:
  • Always validate token format before rendering to avoid malformed input.
  • Limit effect markup length.
  • Sanitize all user-provided or dynamic content to remove hidden threats.
  • Review and update DOMPurify regularly to benefit from security patches.
  • Always re-sanitize submitted markup before inserting it into the database.

Limitations

The following characters are used to differentiate tokens from other HTML and plain text and may not be used as literal characters

  • {
  • ;
  • }

Try it Out!

You can try out the Effect Markup Converter here!

empty