UBER-1200 (#4700)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>

packages/ui/src/colors.ts

@@ -311,7 +311,8 @@ function hashCode (str: string): number {
  * @public
  */
 export function getColorNumberByText (str: string): number {
-  return hashCode(str)
+  const hash = hashCode(str)
+  return Math.abs(hash) % Math.min(darkPalette.length, whitePalette.length)
 }
 
 /**

packages/ui/src/components/EmojiPopup.svelte

@@ -16,6 +16,7 @@
   import { tooltip } from '../tooltips'
   import { AnySvelteComponent, emojiSP } from '../types'
   import plugin from '../plugin'
+  import { fromCodePoint } from '../utils'
 
   export let embedded = false
   export let selected: string | undefined
@@ -108,7 +109,7 @@
 
   function getEmojis (startCode: number, endCode: number, postfix?: number[]): Array<string | undefined> {
     return [...Array(endCode - startCode + 1).keys()].map((v) => {
-      const str = postfix ? String.fromCodePoint(v + startCode, ...postfix) : String.fromCodePoint(v + startCode)
+      const str = postfix ? fromCodePoint(v + startCode, ...postfix) : fromCodePoint(v + startCode)
       if ([...str.matchAll(regex)].length > 0) return str
       return undefined
     })

packages/ui/src/components/IconWithEmoji.svelte

@@ -14,13 +14,14 @@
 -->
 <script lang="ts">
   import { IconSize } from '../types'
+  import { fromCodePoint } from '../utils'
 
   export let icon: number
   export let size: IconSize
 
   let value: string = ''
   $: try {
-    value = String.fromCodePoint(icon)
+    value = fromCodePoint(icon)
   } catch (err) {}
 </script>
 

packages/ui/src/utils.ts

@@ -245,6 +245,10 @@ export function formatKey (key: string): string[][] {
   return result
 }
 
+export function fromCodePoint (...vals: number[]): string {
+  return String.fromCodePoint(...vals.map((p) => Math.abs(p) % 0x10ffff))
+}
+
 /**
  * @public
  */

plugins/task-resources/src/components/state/CreateStatePopup.svelte

@@ -31,6 +31,7 @@
     ModernEditbox,
     TextArea,
     closePopup,
+    fromCodePoint,
     getPlatformColorDef,
     showPopup,
     themeStore
@@ -421,7 +422,7 @@
         {:else}
           <EmojiPopup
             embedded
-            selected={String.fromCodePoint(color ?? 0)}
+            selected={fromCodePoint(color ?? 0)}
             on:close={(evt) => {
               color = evt.detail.codePointAt(0)
               icon = iconWithEmoji

plugins/view-resources/src/components/IconPicker.svelte

@@ -14,7 +14,15 @@
 -->
 <script lang="ts">
   import { Asset, Metadata } from '@hcengineering/platform'
-  import { Button, EmojiPopup, TabsControl, getPlatformColor, getPlatformColorDef, themeStore } from '@hcengineering/ui'
+  import {
+    Button,
+    EmojiPopup,
+    TabsControl,
+    fromCodePoint,
+    getPlatformColor,
+    getPlatformColorDef,
+    themeStore
+  } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import view from '../plugin'
   import ColorsPopup from './ColorsPopup.svelte'
@@ -75,7 +83,7 @@
         {:else}
           <EmojiPopup
             embedded
-            selected={String.fromCodePoint(color ?? 0)}
+            selected={fromCodePoint(color ?? 0)}
             on:close={(evt) => {
               dispatch('close', { icon: iconWithEmoji, color: evt.detail.codePointAt(0) })
             }}