fix: wrapEmoji fixes and improvements (#43)

index.js

@@ -1,6 +1,7 @@
 // ts-check
 
-import { html, wrapEmoji } from './src/html.js'
+import { html } from './src/html.js'
 import { strip } from './src/strip.js'
+import { wrapEmoji } from './src/wrapEmoji.js'
 
 export { html, strip, wrapEmoji }

package.json

@@ -19,7 +19,8 @@
   },
   "homepage": "https://github.com/webmuds/colors#readme",
   "dependencies": {
-    "escape-html": "1.0.3"
+    "escape-html": "1.0.3",
+    "emoji-regex": "10.3.0"
   },
   "devDependencies": {
     "@dimensionalpocket/development": "github:dimensionalpocket/development-js#1.3.0"

src/constants.js

@@ -24,14 +24,3 @@ export const COLOR_RX = new RegExp('({((?:' + COLORS + '))}((?:(?!{(' + COLORS +
  * RegExp to strip all color tags.
  */
 export const STRIP_RX = new RegExp('{(?:' + COLORS + '|/)}', 'gim')
-
-/**
- * RegExp to wrap all emoji in <span> tags.
- */
-export const EMOJI_RX = /([\p{Emoji_Presentation}]+)/gu
-
-/**
- * Template to use when replacing emoji.
- * (wmE = WebMUDs Emoji)
- */
-export const EMOJI_REPLACEMENT_TEMPLATE = '<span class="wmE">$1</span>'

src/html.js

@@ -2,7 +2,7 @@
 
 'use strict'
 
-import { COLOR_RX, HTML_REPLACEMENT_TEMPLATE, EMOJI_RX, EMOJI_REPLACEMENT_TEMPLATE } from './constants.js'
+import { COLOR_RX, HTML_REPLACEMENT_TEMPLATE } from './constants.js'
 import escapeHtml from 'escape-html'
 
 /**
@@ -21,13 +21,3 @@ export function html (text, escape = true) {
   }
   return escapedText.replace(COLOR_RX, HTML_REPLACEMENT_TEMPLATE)
 }
-
-/**
- * Wraps all emoji in a custom <span> tag.
- *
- * @param {string} text
- * @return {string}
- */
-export function wrapEmoji (text) {
-  return text.replace(EMOJI_RX, EMOJI_REPLACEMENT_TEMPLATE)
-}

src/wrapEmoji.js

@@ -0,0 +1,39 @@
+// @ts-check
+
+'use strict'
+
+import emojiRegex from 'emoji-regex'
+
+/**
+ * RegExp to wrap all emoji in <span> tags.
+ */
+const EMOJI_RX = emojiRegexPattern()
+
+/**
+ * Template to use when replacing emoji.
+ * (wmE = WebMUDs Emoji)
+ */
+const EMOJI_REPLACEMENT_TEMPLATE = '<span class="wmE">$1</span>'
+
+/**
+ * Wraps all emoji in a custom <span> tag.
+ *
+ * @param {string} text
+ * @return {string}
+ */
+export function wrapEmoji (text) {
+  return text.replace(EMOJI_RX, EMOJI_REPLACEMENT_TEMPLATE)
+}
+
+/**
+ * Helper that extracts the RegExp from emoji-regex
+ * and returns a new RegExp with capture enabled.
+ */
+function emojiRegexPattern () {
+  const patternFromLib = emojiRegex().toString()
+  const lastSlashIndex = patternFromLib.lastIndexOf('/')
+  const pattern = patternFromLib.slice(1, lastSlashIndex)
+  const flags = patternFromLib.slice(lastSlashIndex + 1)
+
+  return new RegExp(`((?:${pattern})+)`, flags)
+}

test/index.js

@@ -4,7 +4,8 @@
 
 import { expect } from '@dimensionalpocket/development'
 import { html, strip, wrapEmoji } from '../index.js'
-import { html as htmlFromSrc, wrapEmoji as wrapEmojiFromSrc } from '../src/html.js'
+import { html as htmlFromSrc } from '../src/html.js'
+import { wrapEmoji as wrapEmojiFromSrc } from '../src/wrapEmoji.js'
 import { strip as stripFromSrc } from '../src/strip.js'
 
 describe('main require', function () {

test/wrapEmoji.js

@@ -3,30 +3,38 @@
 'use strict'
 
 import { expect } from '@dimensionalpocket/development'
-import { wrapEmoji } from '../src/html.js'
+import { wrapEmoji } from '../src/wrapEmoji.js'
 
 describe('#wrapEmoji', function () {
-  it('wraps emojis in <span>', function () {
+  it('wraps unicode emoji', function () {
     expect(wrapEmoji('😅')).to.eq('<span class="wmE">😅</span>')
   })
 
+  it('wraps non-unicode emoji', function () {
+    expect(wrapEmoji('⚔')).to.eq('<span class="wmE">⚔</span>')
+  })
+
+  it('wraps unicode version of non-unicode emoji', function () {
+    expect(wrapEmoji('⚔️')).to.eq('<span class="wmE">⚔️</span>')
+  })
+
   it('does not affect non-emoji', function () {
     expect(wrapEmoji('123abc😅def456#*')).to.eq('123abc<span class="wmE">😅</span>def456#*')
   })
 
-  it('tags all emojis', function () {
+  it('wraps all emoji', function () {
     expect(wrapEmoji('abc😅def😂')).to.eq('abc<span class="wmE">😅</span>def<span class="wmE">😂</span>')
   })
 
-  it('tags all emojis in multiline text', function () {
+  it('wraps all emoji in multiline text', function () {
     expect(wrapEmoji('💯 ab\nc😅def\n 😂')).to.eq('<span class="wmE">💯</span> ab\nc<span class="wmE">😅</span>def\n <span class="wmE">😂</span>')
   })
 
-  it('tags sequential emojis in a single tag', function () {
+  it('wraps sequential emojis in a single tag', function () {
     expect(wrapEmoji('abc 😂💯😅 def')).to.eq('abc <span class="wmE">😂💯😅</span> def')
   })
 
-  it('breaks down sequential emojis split by multiline', function () {
-    expect(wrapEmoji('abc 😂\n💯😅 def')).to.eq('abc <span class="wmE">😂</span>\n<span class="wmE">💯😅</span> def')
+  it('breaks down sequential emoji split by multiline', function () {
+    expect(wrapEmoji('abc 😂\n💯😱 def')).to.eq('abc <span class="wmE">😂</span>\n<span class="wmE">💯😱</span> def')
   })
 })