import { escapeHtml, markupToHtml, parseMarkup, stripMarkup } from '@datamoc/mw_games/two-d/ui';
const spans = parseMarkup("Hail, <b>$name</b>! <span color='#c0ffee'>Four</span> coins<br/>And an<img>gold.png</img>", {
variables: { name: 'Kalenz' },
});
console.log(spans[1]); // { text: 'Kalenz', bold: true, italic: false }
console.log(spans[2]); // { text: 'Four', bold: false, italic: false, color: '#c0ffee' }
console.log(spans[3].text); // '\nAnd an'
console.log(spans[4].image); // 'gold.png'
console.log(stripMarkup('<b>Bold</b> and <i>italic</i>')); // 'Bold and italic'
console.log(markupToHtml(spans)); // escaped text with <b>/<i> around the emphasis
Reads
sourceas inline markup and returns one span per styled run.Known tags are
<b>,<i>,<span color='…' size='…'>,<br/>(or<br>, which becomes a newline in the text) and<img>path</img>(or<img src='path'/>). Nesting works the way it reads: a<b>inside an<i>is both, and a closing tag restores exactly the style it opened over.<,>,&,"and'are the escapes for the characters that would otherwise be syntax.Two rules are deliberate, because content written by hand meets both. An unknown or malformed tag -
<blink>, a</b>that closes nothing, an<img>with no</img>- is kept literally in the text rather than dropped or guessed at, so the worst case is text that reads oddly instead of text that lost a piece. And a$namethat nothing supplies is kept literally too, for the same reason.