Fix serge-community#458: make emojis work as placeables.

benjamimo1 · May 14, 2020 · 2cdf8ae · 2cdf8ae
1 parent dbb5f5a
commit 2cdf8ae
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 15 deletions.
diff --git a/pootle/static/js/editor/utils/highlight.js b/pootle/static/js/editor/utils/highlight.js
@@ -85,3 +85,29 @@ export function highlightSymbols(text, className = '') {
 
   return text.replace(RE_BASE_REVERSE, replace);
 }
+
+// eslint-disable-next-line max-len
+// U+1F680 to U+1F6FF
+const emojiRegex =
+  '(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|[\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|[\ud83c[\ude32-\ude3a]|[\ud83c[\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])';
+
+export function highlightEmojis(textInput) {
+  let stringOuput = '';
+
+  if (textInput.match(emojiRegex)) {
+    const listOfTokens = textInput.split(/([\uD800-\uDBFF][\uDC00-\uDFFF])/);
+    const openTag = '<span class="highlight-html js-editor-copytext">';
+    const closeTag = '</span>';
+
+    for (let i = 0; i < listOfTokens.length; i++) {
+      if (listOfTokens[i].match(emojiRegex)) {
+        stringOuput += openTag + listOfTokens[i] + closeTag;
+      } else {
+        stringOuput += listOfTokens[i];
+      }
+    }
+  } else {
+    stringOuput = textInput;
+  }
+  return stringOuput;
+}
diff --git a/pootle/static/js/editor/utils/index.js b/pootle/static/js/editor/utils/index.js
@@ -13,6 +13,7 @@ export {
   highlightHtml,
   highlightSymbols,
   nl2br,
+  highlightEmojis,
 } from './highlight';
 export { normalizeCode } from './language';
 export { escapeUnsafeRegexSymbols, makeRegexForMultipleWords } from './search';

diff --git a/pootle/static/js/utils.js b/pootle/static/js/utils.js
@@ -17,6 +17,7 @@ import {
   highlightHtml,
   highlightSymbols,
   nl2br,
+  highlightEmojis,
 } from './editor/utils';
 import { raw2sym } from './editor/utils/font';
 
@@ -115,25 +116,27 @@ export function highlightRO(text) {
 
 export function highlightRW(text, className = '') {
   return highlightSymbols(
-    nl2br(
-      highlightPunctuation(
-        highlightEscapes(
-          highlightHtml(
-            raw2sym(
-              // FIXME: CRLF => LF replacement happens here because highlighting
-              // currently happens via many DOM sources, and this ensures the less
-              // error-prone behavior. This won't be needed when the entire editor
-              // is managed as a component.
-              text.replace(/\r\n/g, '\n')
+    highlightEmojis(
+      nl2br(
+        highlightPunctuation(
+          highlightEscapes(
+            highlightHtml(
+              raw2sym(
+                // FIXME: CRLF => LF replacement happens here because highlighting
+                // currently happens via many DOM sources, and this ensures the less
+                // error-prone behavior. This won't be needed when the entire editor
+                // is managed as a component.
+                text.replace(/\r\n/g, '\n')
+              ),
+              className
             ),
             className
           ),
           className
-        ),
-        className
-      )
-    ),
-    className
+        )
+      ),
+      className
+    )
   );
 }