Emoji improvements

packages/presentation/src/components/HTMLViewer.svelte

@@ -15,13 +15,21 @@
 <script lang="ts">
   import { htmlToJSON } from '@hcengineering/text'
   import Node from './markup/Node.svelte'
+  import { loadParseEmojisFunction, ParsedTextWithEmojis } from '@hcengineering/emoji'
+  import { onMount } from 'svelte'
 
   export let value: string
   export let preview = false
 
   $: node = htmlToJSON(value)
+
+  let parseEmojisFunction: ((text: string) => ParsedTextWithEmojis) | undefined = undefined
+
+  onMount(async () => {
+    parseEmojisFunction = await loadParseEmojisFunction()
+  })
 </script>
 
 <div class="text-markup-view">
-  <Node {node} {preview} />
+  <Node {parseEmojisFunction} {node} {preview} />
 </div>

packages/presentation/src/components/LiteMessageViewer.svelte

@@ -16,13 +16,21 @@
   import { MarkupNode, markupToJSON } from '@hcengineering/text'
   import { Markup } from '@hcengineering/core'
   import LiteNode from './markup/lite/LiteNode.svelte'
+  import { loadParseEmojisFunction, ParsedTextWithEmojis } from '@hcengineering/emoji'
+  import { onMount } from 'svelte'
 
   export let message: Markup | MarkupNode
   export let colorInherit: boolean = false
 
   $: node = typeof message === 'string' ? markupToJSON(message) : message
+
+  let parseEmojisFunction: ((text: string) => ParsedTextWithEmojis) | undefined = undefined
+
+  onMount(async () => {
+    parseEmojisFunction = await loadParseEmojisFunction()
+  })
 </script>
 
 <div class="text-markup-view" class:colorInherit>
-  <LiteNode {node} {colorInherit} />
+  <LiteNode {node} {parseEmojisFunction} {colorInherit} />
 </div>

packages/presentation/src/components/MessageViewer.svelte

@@ -16,18 +16,26 @@
 <script lang="ts">
   import { isEmptyMarkup, markupToJSON } from '@hcengineering/text'
   import Node from './markup/Node.svelte'
+  import { loadParseEmojisFunction, ParsedTextWithEmojis } from '@hcengineering/emoji'
+  import { onMount } from 'svelte'
 
   export let message: string
   export let preview = false
 
   $: node = markupToJSON(message)
   $: empty = isEmptyMarkup(message)
 
+  let parseEmojisFunction: ((text: string) => ParsedTextWithEmojis) | undefined = undefined
+
+  onMount(async () => {
+    parseEmojisFunction = await loadParseEmojisFunction()
+  })
+
   export function isEmpty (): boolean {
     return empty
   }
 </script>
 
 <div class="text-markup-view">
-  <Node {node} {preview} />
+  <Node {parseEmojisFunction} {node} {preview} />
 </div>

packages/presentation/src/components/markup/Node.svelte

@@ -17,20 +17,22 @@
 
   import NodeMarks from './NodeMarks.svelte'
   import NodeContent from './NodeContent.svelte'
+  import { ParsedTextWithEmojis } from '@hcengineering/emoji'
 
   export let node: MarkupNode
-  export let single = true
+  export let singleTextNode = false
   export let preview = false
+  export let parseEmojisFunction: ((text: string) => ParsedTextWithEmojis) | undefined = undefined
 </script>
 
 {#if node}
   {@const marks = node.marks ?? []}
 
   {#if marks.length > 0}
     <NodeMarks {marks}>
-      <NodeContent {node} {single} {preview} />
+      <NodeContent {parseEmojisFunction} {node} {preview} />
     </NodeMarks>
   {:else}
-    <NodeContent {node} {single} {preview} />
+    <NodeContent {parseEmojisFunction} {node} {singleTextNode} {preview} />
   {/if}
 {/if}

packages/presentation/src/components/markup/NodeContent.svelte

@@ -21,11 +21,14 @@
   import MarkdownNode from './MarkdownNode.svelte'
   import Node from './Node.svelte'
   import { getBlobRef } from '../../preview'
-  import { emojiRegex } from '@hcengineering/emoji'
+  import { ParsedTextWithEmojis } from '@hcengineering/emoji'
 
   export let node: MarkupNode
-  export let single = true
+  export let singleTextNode = false
   export let preview = false
+  export let parseEmojisFunction: ((text: string) => ParsedTextWithEmojis) | undefined = undefined
+
+  let parsedTextWithEmojis: ParsedTextWithEmojis | undefined = undefined
 
   function toRefBlob (blobId: AttrValue): Ref<Blob> {
     return blobId as Ref<Blob>
@@ -54,11 +57,8 @@
     return value != null ? (typeof value === 'string' ? parseInt(value) : value) : undefined
   }
 
-  const checkEmoji = (nodes: MarkupNode[]): boolean => {
-    if (nodes.length !== 1) return false
-    const match = nodes[0].text?.match(emojiRegex)
-    if (match == null) return false
-    return match[0] === nodes[0].text
+  $: if (node.type === MarkupNodeType.text && parseEmojisFunction) {
+    parsedTextWithEmojis = parseEmojisFunction(node.text ?? '')
   }
 </script>
 
@@ -69,13 +69,37 @@
   {#if node.type === MarkupNodeType.doc}
     {#if nodes.length > 0}
       {#each nodes as node}
-        <Node {node} {preview} />
+        <Node {parseEmojisFunction} {node} {preview} singleTextNode={nodes.length === 1} />
       {/each}
     {/if}
   {:else if node.type === MarkupNodeType.text}
-    {node.text}
+    {#if parsedTextWithEmojis === undefined}
+      {node.text}
+    {:else}
+      {#each parsedTextWithEmojis.nodes as textOrEmoji}
+        {#if typeof textOrEmoji === 'string'}
+          {textOrEmoji}
+        {:else}
+          <span
+            class="emoji"
+            style="display: inline-block"
+            class:emojiOnly={parsedTextWithEmojis.emojisOnly && singleTextNode}
+          >
+            {#if 'image' in textOrEmoji}
+              {@const blob = toRefBlob(textOrEmoji.image)}
+              {@const alt = toString(textOrEmoji.emoji)}
+              {#await getBlobRef(blob) then blobSrc}
+                <img src={blobSrc.src} {alt} />
+              {/await}
+            {:else}
+              {textOrEmoji.emoji}
+            {/if}
+          </span>
+        {/if}
+      {/each}
+    {/if}
   {:else if node.type === MarkupNodeType.emoji}
-    <span class="emoji" class:emojiOnly={single}>
+    <span class="emoji" class:emojiOnly={singleTextNode}>
       {#if node.attrs?.kind === 'image'}
         {@const blob = toRefBlob(attrs.image)}
         {@const alt = toString(attrs.emoji)}
@@ -87,18 +111,18 @@
       {/if}
     </span>
   {:else if node.type === MarkupNodeType.paragraph}
-    <p class="p-inline contrast" class:overflow-label={preview} class:emojiOnly={checkEmoji(nodes)}>
+    <p class="p-inline contrast" class:overflow-label={preview}>
       {#if nodes.length > 0}
         {#each nodes as node}
-          <Node {node} {preview} single={nodes.length === 1} />
+          <Node {parseEmojisFunction} {node} {preview} singleTextNode={singleTextNode && nodes.length === 1} />
         {/each}
       {/if}
     </p>
   {:else if node.type === MarkupNodeType.blockquote}
     <blockquote class="proseBlockQuote" style:margin={preview ? '0' : null}>
       {#if nodes.length > 0}
         {#each nodes as node}
-          <Node {node} {preview} />
+          <Node {parseEmojisFunction} {node} {preview} />
         {/each}
       {/if}
     </blockquote>
@@ -133,7 +157,7 @@
       <ObjectNode _id={toRef(objectId)} _class={toClassRef(objectClass)} title={objectLabel} />
     {:else if nodes.length > 0}
       {#each nodes as node}
-        <Node {node} {preview} />
+        <Node {parseEmojisFunction} {node} {preview} />
       {/each}
     {/if}
   {:else if node.type === MarkupNodeType.hard_break}
@@ -143,23 +167,23 @@
     <ol style:margin={preview ? '0' : null} {start}>
       {#if nodes.length > 0}
         {#each nodes as node}
-          <Node {node} {preview} />
+          <Node {parseEmojisFunction} {node} {preview} />
         {/each}
       {/if}
     </ol>
   {:else if node.type === MarkupNodeType.bullet_list}
     <ul style:margin={preview ? '0' : null}>
       {#if nodes.length > 0}
         {#each nodes as node}
-          <Node {node} {preview} />
+          <Node {parseEmojisFunction} {node} {preview} />
         {/each}
       {/if}
     </ul>
   {:else if node.type === MarkupNodeType.list_item}
     <li>
       {#if nodes.length > 0}
         {#each nodes as node}
-          <Node {node} {preview} />
+          <Node {parseEmojisFunction} {node} {preview} />
         {/each}
       {/if}
     </li>
@@ -171,7 +195,7 @@
     <sub>
       {#if nodes.length > 0}
         {#each nodes as node}
-          <Node {node} {preview} />
+          <Node {parseEmojisFunction} {node} {preview} />
         {/each}
       {/if}
     </sub>
@@ -180,7 +204,7 @@
       <tbody>
         {#if nodes.length > 0}
           {#each nodes as node}
-            <Node {node} {preview} />
+            <Node {parseEmojisFunction} {node} {preview} />
           {/each}
         {/if}
       </tbody>
@@ -189,7 +213,7 @@
     <tr>
       {#if nodes.length > 0}
         {#each nodes as node}
-          <Node {node} {preview} />
+          <Node {parseEmojisFunction} {node} {preview} />
         {/each}
       {/if}
     </tr>
@@ -199,7 +223,7 @@
     <td {colspan} {rowspan}>
       {#if nodes.length > 0}
         {#each nodes as node}
-          <Node {node} {preview} />
+          <Node {parseEmojisFunction} {node} {preview} />
         {/each}
       {/if}
     </td>
@@ -209,7 +233,7 @@
     <th {colspan} {rowspan}>
       {#if nodes.length > 0}
         {#each nodes as node}
-          <Node {node} {preview} />
+          <Node {parseEmojisFunction} {node} {preview} />
         {/each}
       {/if}
     </th>
@@ -223,7 +247,7 @@
     unknown node: "{node.type}"
     {#if nodes.length > 0}
       {#each nodes as node}
-        <Node {node} {preview} />
+        <Node {parseEmojisFunction} {node} {preview} />
       {/each}
     {/if}
   {/if}

packages/presentation/src/components/markup/lite/LiteNode.svelte

@@ -17,15 +17,17 @@
 
   import LiteNodeContent from './LiteNodeContent.svelte'
   import NodeMarks from '../NodeMarks.svelte'
+  import { ParsedTextWithEmojis } from '@hcengineering/emoji'
 
   export let node: MarkupNode
   export let colorInherit: boolean = false
+  export let parseEmojisFunction: ((text: string) => ParsedTextWithEmojis) | undefined = undefined
 </script>
 
 {#if node}
   {@const marks = node.marks ?? []}
 
   <NodeMarks {marks}>
-    <LiteNodeContent {node} {colorInherit} />
+    <LiteNodeContent {node} {parseEmojisFunction} {colorInherit} />
   </NodeMarks>
 {/if}

packages/presentation/src/components/markup/lite/LiteNodeContent.svelte

@@ -20,9 +20,13 @@
   import ObjectNode from '../ObjectNode.svelte'
   import NodeMarks from '../NodeMarks.svelte'
   import { getBlobRef } from '../../../preview'
+  import { ParsedTextWithEmojis } from '@hcengineering/emoji'
 
   export let node: MarkupNode
   export let colorInherit: boolean = false
+  export let parseEmojisFunction: ((text: string) => ParsedTextWithEmojis) | undefined = undefined
+
+  let parsedTextWithEmojis: ParsedTextWithEmojis | undefined = undefined
 
   function toRefBlob (blobId: AttrValue): Ref<Blob> {
     return blobId as Ref<Blob>
@@ -42,22 +46,46 @@
   function toString (value: AttrValue | undefined): string | undefined {
     return value != null ? `${value}` : undefined
   }
+
+  $: if (node.type === MarkupNodeType.text && parseEmojisFunction) {
+    parsedTextWithEmojis = parseEmojisFunction(node.text ?? '')
+  }
 </script>
 
 {#if node}
   {@const attrs = node.attrs ?? {}}
   {@const nodes = node.content ?? []}
 
   {#if node.type === MarkupNodeType.doc}
-    <LiteNodes {nodes} {colorInherit} />
+    <LiteNodes {nodes} {parseEmojisFunction} {colorInherit} />
   {:else if node.type === MarkupNodeType.text}
-    {node.text}
+    {#if parsedTextWithEmojis === undefined}
+      {node.text}
+    {:else}
+      {#each parsedTextWithEmojis.nodes as textOrEmoji}
+        {#if typeof textOrEmoji === 'string'}
+          {textOrEmoji}
+        {:else}
+          <span class="emoji" style="display: inline-block">
+            {#if 'image' in textOrEmoji}
+              {@const blob = toRefBlob(textOrEmoji.image)}
+              {@const alt = toString(textOrEmoji.emoji)}
+              {#await getBlobRef(blob) then blobSrc}
+                <img src={blobSrc.src} {alt} />
+              {/await}
+            {:else}
+              {textOrEmoji.emoji}
+            {/if}
+          </span>
+        {/if}
+      {/each}
+    {/if}
   {:else if node.type === MarkupNodeType.paragraph}
     <p class="p-inline" class:overflow-label={true} style:margin="0" class:contrast={!colorInherit} class:colorInherit>
-      <LiteNodes {nodes} {colorInherit} />
+      <LiteNodes {nodes} {parseEmojisFunction} {colorInherit} />
     </p>
   {:else if node.type === MarkupNodeType.blockquote}
-    <LiteNodes {nodes} {colorInherit} />
+    <LiteNodes {nodes} {parseEmojisFunction} {colorInherit} />
   {:else if node.type === MarkupNodeType.horizontal_rule}
     <!--  nothing-->
   {:else if node.type === MarkupNodeType.code_block}
@@ -70,7 +98,7 @@
           }
         ]}
       >
-        <LiteNodes {nodes} {colorInherit} />
+        <LiteNodes {nodes} {parseEmojisFunction} {colorInherit} />
       </NodeMarks>
     </p>
   {:else if node.type === MarkupNodeType.reference}
@@ -81,7 +109,7 @@
     {#if objectClass !== undefined && objectId !== undefined}
       <ObjectNode _id={toRef(objectId)} _class={toClassRef(objectClass)} title={objectLabel} />
     {:else}
-      <LiteNodes {nodes} {colorInherit} />
+      <LiteNodes {nodes} {parseEmojisFunction} {colorInherit} />
     {/if}
   {:else if node.type === MarkupNodeType.emoji}
     <span class="emoji">
@@ -101,10 +129,10 @@
     <!-- TODO not implemented -->
   {:else if node.type === MarkupNodeType.subLink}
     <sub>
-      <LiteNodes {nodes} {colorInherit} />
+      <LiteNodes {nodes} {parseEmojisFunction} {colorInherit} />
     </sub>
   {:else}
-    <LiteNodes {nodes} {colorInherit} />
+    <LiteNodes {nodes} {parseEmojisFunction} {colorInherit} />
   {/if}
 {/if}