@skeldjs/text

This package contains a text building API for the Rich Text formatter used in Among Us, and while you can install it on its own with npm install --save @skeldjs/text or yarn add @skeldjs/text, it is one package of a bigger project, skeldjs.

Usage no npm install needed!

<script type="module">
  import skeldjsText from 'https://cdn.skypack.dev/@skeldjs/text';
</script>

README

@skeldjs/text

This package contains a text building API for the Rich Text formatter used in Among Us, and while you can install it on its own with npm install --save @skeldjs/text or yarn add @skeldjs/text, it is one package of a bigger project, skeldjs.

You can view auto-updating documentation for this package hosted at github pages at https://skeldjs.github.io/SkeldJS/modules/text.html

Basic Usage

Creating a basic document

const formatted = tb()
    .bold(
        color("red", "Hello")
    );

console.log(formatted.toString()); // <b><color="red">Hello</color></b>

or you can define a boilerplate for the document, where the children of the elements in the tb function are not considered.

const formatted = tb(bold(), color("red"))
    .text("Hello");

console.log(formatted.toString()); // <b><color="red">Hello</color></b>

You can also create elements standalone.

const formatted = bold("Hello");

console.log(formatted.toString()); // <b>Hello</b>

Parse RichText

The package also provides a way to parse the Rich Text format.

const parsed = parseTMP("<b><color=red>Hello</color></b>");

console.log(parsed);
/*
TMPElement {
  tagName: 'doc',
  attributes: {},
  children: [
    TMPElement {
      tagName: 'b',
      attributes: {},
      children: [
        TMPElement {
          tagName: 'color',
          attributes: { color: 'red' },
          children: [ 'Hello' ]
        }
      ]
    }
  ]
}
*/

Generate HTML

It also provides a way to convert roughly to HTML where possible.

const parsed = parseTMP("<b><color=red>Hello</color></b>");

console.log(toHTML(parsed));
/*
<div style="width:100%;height:100%;">
    <b>
        <div style="display:inline-block;color:red">
            <span>Hello</span>
        </div>
    </b>
</div>
*/