Emoji

client/src/constant.ts

@@ -0,0 +1,2 @@
+// https://github.com/twitter/twemoji/issues/580
+export const EMOJI_URL_BASE = 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/';

client/src/omote/layers/Index.ts

@@ -6,6 +6,7 @@ import { mat4 } from 'gl-matrix';
 import Page from './Page';
 import twemoji from 'twemoji';
 import * as protocol from '../../protocol';
+import { EMOJI_URL_BASE } from '../../constant';
 
 export default class Index extends Layer {
   private readonly wheelEventListener_: (ev: WheelEvent) => void;
@@ -69,8 +70,7 @@ export default class Index extends Layer {
       tooltip.classList.remove('hidden');
 
       // title
-      this.tooltipTitle_.textContent = m.title;
-      twemoji.parse(this.tooltipTitle_);
+      this.tooltipTitle_.innerHTML = twemoji.parse(m.title, { base: EMOJI_URL_BASE });
       this.tooltipDate_.innerHTML = m.date;
       this.fixTooltipPosition_();
     }

client/src/omote/layers/Page.ts

@@ -2,6 +2,7 @@ import World from '../World'
 import Layer from '../Layer';
 import { mat4 } from 'gl-matrix';
 import twemoji from 'twemoji';
+import { EMOJI_URL_BASE } from '../../constant';
 
 export default class Page extends Layer {
 
@@ -40,8 +41,7 @@ export default class Page extends Layer {
   }
 
   onLoad_(body: string) {
-    this.content_.innerHTML = body;
-    twemoji.parse(this.content_);
+    this.content_.innerHTML = twemoji.parse(body, { base: EMOJI_URL_BASE });
 
     const contents = this.content_.getElementsByTagName('script');
     for(let i = 0; i < contents.length; ++i) {
@@ -108,4 +108,4 @@ const backButtonSrc = `
           x1="1em" y1="4em" x2="4em" y2="1em"
           stroke="rgba(0, 0, 0, 0.5)" stroke-width="1em"/>
 </svg>
-`;
+`;

client/src/ura/editor/Preview.ts

@@ -1,4 +1,6 @@
+import twemoji from 'twemoji';
 import Editor from './Editor';
+import { EMOJI_URL_BASE } from '../../constant';
 
 export default class Preview {
   private readonly container_: HTMLDivElement;
@@ -12,6 +14,8 @@ export default class Preview {
     this.editor_ = editor;
   }
   onChange(body: string) {
-    this.container_.innerHTML = body;
+    this.container_.innerHTML = twemoji.parse(body, {
+      base: EMOJI_URL_BASE,
+    });
   }
-}
+}