UBERF-6068 Show collaborators in collaborative editors (#5335)

Signed-off-by: Alexander Onnikov <Alexander.Onnikov@xored.com>

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

@@ -13,17 +13,26 @@
 // limitations under the License.
 -->
 <script lang="ts">
+  import contact from '@hcengineering/contact'
   import { Doc } from '@hcengineering/core'
-
+  import { getResource } from '@hcengineering/platform'
   import { KeyedAttribute } from '@hcengineering/presentation'
   import { CollaborativeAttributeSectionBox } from '@hcengineering/text-editor'
+  import { AnySvelteComponent } from '@hcengineering/ui'
+  import { getCollaborationUser } from '../utils'
 
   export let object: Doc
   export let key: KeyedAttribute
+
+  const user = getCollaborationUser()
+  let userComponent: AnySvelteComponent | undefined
+  void getResource(contact.component.CollaborationUserAvatar).then((component) => {
+    userComponent = component
+  })
 </script>
 
 {#key object._id}
   {#key key.key}
-    <CollaborativeAttributeSectionBox {object} {key} label={key.attr.label} />
+    <CollaborativeAttributeSectionBox {object} {key} {user} {userComponent} label={key.attr.label} />
   {/key}
 {/key}

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

@@ -13,15 +13,24 @@
 // limitations under the License.
 -->
 <script lang="ts">
+  import contact from '@hcengineering/contact'
   import { Doc } from '@hcengineering/core'
-
+  import { getResource } from '@hcengineering/platform'
   import { KeyedAttribute } from '@hcengineering/presentation'
   import { CollaborativeAttributeSectionBox } from '@hcengineering/text-editor'
+  import { AnySvelteComponent } from '@hcengineering/ui'
+  import { getCollaborationUser } from '../utils'
 
   export let object: Doc
   export let key: KeyedAttribute
+
+  const user = getCollaborationUser()
+  let userComponent: AnySvelteComponent | undefined
+  void getResource(contact.component.CollaborationUserAvatar).then((component) => {
+    userComponent = component
+  })
 </script>
 
 {#key object._id}
-  <CollaborativeAttributeSectionBox {object} {key} label={key.attr.label} />
+  <CollaborativeAttributeSectionBox {object} {key} {user} {userComponent} label={key.attr.label} />
 {/key}

plugins/view-resources/src/utils.ts

@@ -1,6 +1,6 @@
 //
 // Copyright © 2020, 2021 Anticrm Platform Contributors.
-// Copyright © 2021 Hardcore Engineering Inc.
+// Copyright © 2021, 2024 Hardcore Engineering Inc.
 //
 // Licensed under the Eclipse Public License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License. You may
@@ -65,8 +65,10 @@ import {
   isAdminUser,
   createQuery
 } from '@hcengineering/presentation'
+import { type CollaborationUser } from '@hcengineering/text-editor'
 import {
   ErrorPresenter,
+  getColorNumberByText,
   getCurrentResolvedLocation,
   getPanelURI,
   getPlatformColorForText,
@@ -1402,3 +1404,15 @@ permissionsQuery.query(core.class.Space, {}, (res) => {
     whitelist: whitelistedSpaces
   })
 })
+
+export function getCollaborationUser (): CollaborationUser {
+  const me = getCurrentAccount() as PersonAccount
+  const color = getColorNumberByText(me.email)
+
+  return {
+    id: me._id,
+    name: me.email,
+    email: me.email,
+    color
+  }
+}