init

frontend/src/utils/emoji.ts

@@ -0,0 +1,27 @@
+export type SkinTone = 1 | 2 | 3 | 4 | 5
+
+const SKIN_TONE_BASE = 0x1f3fb
+const SKIN_TONE_MIN = 0x1f3fb
+const SKIN_TONE_MAX = 0x1f3ff
+const VARIATION_SELECTOR_16 = 0xfe0f
+
+/**
+ * Applies a Mattermost-style skin tone to an RGI emoji sequence.
+ *
+ * The tone is inserted after the first emoji code point and before an
+ * optional presentation selector, which also works for ZWJ sequences such
+ * as woman technologist.
+ */
+export function applySkinTone(sequence: string, tone: SkinTone | null): string {
+  if (tone === null) return sequence
+
+  const codePoints = Array.from(sequence)
+    .map((character) => character.codePointAt(0)!)
+    .filter((codePoint) => codePoint < SKIN_TONE_MIN || codePoint > SKIN_TONE_MAX)
+
+  const modifier = SKIN_TONE_BASE + tone - 1
+  const insertionIndex = codePoints[1] === VARIATION_SELECTOR_16 ? 1 : codePoints.length > 0 ? 1 : 0
+  codePoints.splice(insertionIndex, 0, modifier)
+
+  return String.fromCodePoint(...codePoints)
+}