Add html generator (#94)

* Add html generator

* use node16 CI

* Update README.md

* Update index.js

* fix test

Author: extremeheat

.github/workflows/ci.yml

@@ -13,7 +13,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [16.x]
 
     steps:
     - uses: actions/checkout@v2

README.md

@@ -28,26 +28,32 @@ console.log(msg.toString()) // Example chat message
 #### chat.toString([lang])
 
 Flattens the message in to plain-text
- * `lang` - (optional) - Set a custom lang (defaults to mcData.language)
+ * `lang` - (optional) - Set a custom lang (defaults to registry.language)
 
 #### chat.toMotd([lang], parent)
 
 Converts to motd format
- * `lang` - (optional) - Set a custom lang (defaults to mcData.language)
+ * `lang` - (optional) - Set a custom lang (defaults to registry.language)
  * `parent` - Set a custom lang (defaults to mcData.language)
 
 #### chat.getText(idx, [lang])
 
 Returns a text part from the message
  * `idx` - Index of the part
- * `lang` - (optional) - Set a custom lang (defaults to mcData.language)
+ * `lang` - (optional) - Set a custom lang (defaults to registry.language)
 
 #### chat.toAnsi([lang], [codes])
 
 Converts to ansi format
- * `lang` - (optional) - Set a custom lang (defaults to mcData.language)
+ * `lang` - (optional) - Set a custom lang (defaults to registry.language)
  * `codes` - (optional) - Specify which ANSI formatting codes should be used for each Minecraft color code
 
+#### chat.toHTML([lang], [codes], [allowedFormats])
+Converts to escaped HTML
+* `lang` - (optional) - Set a custom lang (defaults to registry.language)
+* `codes` - (optional) - Specify which CSS style props should be used for each Minecraft color code
+* `allowedFormats` - The set of allowed formats. Default is ['color', 'bold', 'strikethrough', 'underlined', 'italic']
+
 #### chat.length()
 
 Returns the count of text extras and child ChatMessages

index.d.ts

@@ -48,6 +48,11 @@ declare class ChatMessage {
    */
   toAnsi(language?: Language): string
 
+  /**
+   * Returns a CSS styled and escaped HTML string
+   */
+  toHTML(language?: Language, styles?: Record<Color, string>, allowedFormats?: DefaultFormats): string
+
   /**
    * Returns the count of text extras and child ChatMessages.
    * Does not count recursively in to the children.
@@ -226,3 +231,4 @@ type Color =
   | "underlined"
   | "italic"
   | "reset"
+type DefaultFormats = 'color' | 'bold' | 'strikethrough' | 'underlined' | 'italic'

index.js

@@ -30,6 +30,29 @@ function loader (registryOrVersion) {
     '§k': '\u001b[6m',
     '§r': '\u001b[0m'
   }
+  const cssDefaultStyles = {
+    black: 'color:#000000',
+    dark_blue: 'color:#0000AA',
+    dark_green: 'color:#00AA00',
+    dark_aqua: 'color:#00AAAA',
+    dark_red: 'color:#AA0000',
+    dark_purple: 'color:#AA00AA',
+    gold: 'color:#FFAA00',
+    gray: 'color:#AAAAAA',
+    dark_gray: 'color:#555555',
+    blue: 'color:#5555FF',
+    green: 'color:#55FF55',
+    aqua: 'color:#55FFFF',
+    red: 'color:#FF5555',
+    light_purple: 'color:#FF55FF',
+    yellow: 'color:#FFFF55',
+    white: 'color:#FFFFFF',
+    bold: 'font-weight:900',
+    strikethrough: 'text-decoration:line-through',
+    underlined: 'text-decoration:underline',
+    italic: 'font-style:italic'
+  }
+  const formatMembers = ['color', 'bold', 'strikethrough', 'underlined', 'italic']
   const { MessageBuilder } = require('./MessageBuilder')(registry)
 
   /**
@@ -369,6 +392,39 @@ function loader (registryOrVersion) {
       return codes['§r'] + message + codes['§r']
     }
 
+    // NOTE : Have to be be mindful here as bad HTML gen may lead to arbitrary code execution from server
+    toHTML (lang = registry.language, styles = cssDefaultStyles, allowedFormats = formatMembers) {
+      let str = ''
+      if (allowedFormats.some(member => this[member])) {
+        const cssProps = allowedFormats.reduce((acc, cur) => this[cur]
+          ? acc.push(cur === 'color'
+            ? (this.color.startsWith('#') ? escapeRGB(this.color.slice(1)) : styles[this.color])
+            : styles[cur]) &&
+            acc
+          : acc, [])
+        str += `<span style="${cssProps.join(';')}">`
+      } else {
+        str += '<span>'
+      }
+
+      if (this.text) {
+        str += escapeHtml(this.text)
+      } else if (this.translate) {
+        const params = []
+        for (const param of this.with) {
+          params.push(param.toHTML(lang, styles, allowedFormats))
+        }
+        const format = lang[this.translate] ?? this.translate
+        str += vsprintf(escapeHtml(format), params)
+      }
+
+      if (this.extra) {
+        str += this.extra.map(entry => entry.toHTML(lang, styles, allowedFormats)).join('')
+      }
+      str += '</span>'
+      return str
+    }
+
     static fromNotch (msg) {
       let toRet
       try {
@@ -392,3 +448,6 @@ function loader (registryOrVersion) {
   ChatMessage.MessageBuilder = MessageBuilder
   return ChatMessage
 }
+
+const escapeHtml = (unsafe) => unsafe.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#039;')
+const escapeRGB = (unsafe) => `color:rgb(${unsafe.match(/.{2}/g).map(e => parseInt(e, 16)).join(',')})`

test/basic.test.js

@@ -95,6 +95,12 @@ describe('Parsing chat on 1.16', function () {
     const msg = new ChatMessage({ translate: '%2$s %1$s' })
     expect(msg.toString()).toBe(' ')
   })
+
+  it('can format to HTML', () => {
+    const msg = new ChatMessage({ color: 'blue', translate: 'chat.type.text', with: [{ text: 'IM_U9G', color: 'aqua' }, { text: 'yo sup', color: 'green' }], extra: [{ text: 'test', color: '#ff0000', strikethrough: true }] })
+    assert.strictEqual(msg.toHTML(), '<span style="color:#5555FF">&lt;<span style="color:#55FFFF">IM_U9G</span>&gt; <span style="color:#55FF55">yo sup</span><span style="color:rgb(255,0,0);text-decoration:line-through">test</span></span>')
+    assert.strictEqual(msg.toHTML(undefined, undefined, ['color']), '<span style="color:#5555FF">&lt;<span style="color:#55FFFF">IM_U9G</span>&gt; <span style="color:#55FF55">yo sup</span><span style="color:rgb(255,0,0)">test</span></span>')
+  })
 })
 
 describe('Client-side chat formatting', function () {