Fix emoji flags in q-chat

core/font/material-icons.css

@@ -101,3 +101,10 @@
   local('PaytoneOne'),
   url(PaytoneOne.ttf) format('truetype');
 }
+
+@font-face {
+    font-family: 'Twemoji Country Flags';
+    src: url('TwemojiCountryFlags.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+}

plugins/plugins/core/components/ChatEmojiFlags.js

@@ -0,0 +1,20 @@
+import { supportsEmojiFlags } from './ChatTestEmojiFlags'
+
+export function supportCountryFlagEmojis(fontName = "Twemoji Country Flags", fontUrl = "/font/TwemojiCountryFlags.woff2") {
+	if (typeof window !== "undefined" && supportsEmojiFlags("😊") && !supportsEmojiFlags("🇨🇭")) {
+		const style = document.createElement("style")
+
+		style.textContent = `@font-face {
+			font-family: "${fontName}";
+			unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
+			src: url('${fontUrl}') format('woff2');
+			font-display: swap;
+		}`
+
+		document.head.appendChild(style)
+
+		return true
+	}
+
+	return false
+}

plugins/plugins/core/components/ChatTestEmojiFlags.js

@@ -0,0 +1,32 @@
+const FONT_FAMILY = '"Twemoji Mozilla","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji","EmojiOne Color","Android Emoji",sans-serif'
+
+function makeCtx() {
+	const canvas = document.createElement("canvas")
+	canvas.width = canvas.height = 1
+
+	const ctx = canvas.getContext("2d", { willReadFrequently: true })
+
+	ctx.textBaseline = "top"
+	ctx.font = `100px ${FONT_FAMILY}`
+	ctx.scale(0.01, 0.01)
+
+	return ctx
+}
+
+function getColor(ctx, text, color) {
+	ctx.clearRect(0, 0, 100, 100)
+	ctx.fillStyle = color
+	ctx.fillText(text, 0, 0)
+
+	const bytes = ctx.getImageData(0, 0, 1, 1).data
+
+	return bytes.join(",")
+}
+
+export function supportsEmojiFlags(text) {
+	const ctx = makeCtx()
+	const white = getColor(ctx, text, "#fff")
+	const black = getColor(ctx, text, "#000")
+
+	return black === white && !black.startsWith("0,0,0,")
+}

plugins/plugins/core/q-chat/index.html

@@ -41,7 +41,7 @@
         html,
         body {
             margin: 0;
-            font-family: "Roboto", sans-serif;
+            font-family: "Twemoji Country Flags", "Roboto", sans-serif;
             background: var(--plugback);
             overflow: hidden;
         }

plugins/plugins/core/q-chat/q-chat.src.js

@@ -3,6 +3,7 @@ import { render } from 'lit/html.js'
 import { Epml } from '../../../epml'
 import { passiveSupport } from 'passive-events-support/src/utils'
 import { Editor, Extension } from '@tiptap/core'
+import { supportCountryFlagEmojis } from '../components/ChatEmojiFlags'
 import { qchatStyles } from '../components/plugins-css'
 import isElectron from 'is-electron'
 import WebWorker from 'web-worker:./computePowWorker'
@@ -24,7 +25,6 @@ import '@material/mwc-icon'
 import '@material/mwc-snackbar'
 import '@polymer/paper-spinner/paper-spinner-lite.js'
 import '@vaadin/grid'
-import '@vaadin/scroller'
 import '@vaadin/tooltip'
 
 // Multi language support
@@ -36,6 +36,7 @@ registerTranslateConfig({
 const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
 
 passiveSupport({ events: ['touchstart'] })
+supportCountryFlagEmojis()
 
 class Chat extends LitElement {
 	static get properties() {
@@ -150,14 +151,9 @@ class Chat extends LitElement {
 							</div>
 						</div>
 					</div>
-					<vaadin-scroller
-						scroll-direction="vertical"
-						style="border-bottom: 1px solid var(--lumo-contrast-20pct); padding: var(--lumo-space-s);"
-					>
-						<ul class="list">
+					<ul>
 						${this.isEmptyArray(this.chatHeads) ? this.renderLoadingText() : this.renderChatHead(this.chatHeads)}
 					</ul>
-					</vaadin-scroller>
 				</div>
 				<div class="chat">
 					<div id="newMessageBar" class="new-message-bar hide-new-message-bar clearfix" @click=${() => this.scrollToBottom()}>