From 07636246888373a4e3fd81365cb51e65122aec23 Mon Sep 17 00:00:00 2001
From: Kristina <kristin.fefelova@gmail.com>
Date: Mon, 23 Sep 2024 15:24:25 +0400
Subject: [PATCH 1/2] Add employee action to start conversation (#6687)

Signed-off-by: Kristina Fefelova <kristin.fefelova@gmail.com>
---
 models/chunter/src/actions.ts                 | 13 +++
 models/chunter/src/plugin.ts                  |  3 +-
 packages/ui/src/components/ModernTab.svelte   |  2 +
 plugins/chunter-assets/lang/en.json           |  3 +-
 plugins/chunter-assets/lang/es.json           |  3 +-
 plugins/chunter-assets/lang/fr.json           |  3 +-
 plugins/chunter-assets/lang/pt.json           |  3 +-
 plugins/chunter-assets/lang/ru.json           |  3 +-
 plugins/chunter-assets/lang/zh.json           |  3 +-
 .../chat/create/CreateDirectChat.svelte       | 80 ++--------------
 plugins/chunter-resources/src/index.ts        |  6 +-
 plugins/chunter-resources/src/utils.ts        | 94 ++++++++++++++++++-
 plugins/chunter/src/index.ts                  |  3 +-
 .../src/components/sidebar/SidebarMini.svelte |  2 +-
 .../sidebar/widgets/WidgetsBar.svelte         |  7 +-
 15 files changed, 140 insertions(+), 88 deletions(-)

diff --git a/models/chunter/src/actions.ts b/models/chunter/src/actions.ts
index a7b7ab219f..4b33c7182f 100644
--- a/models/chunter/src/actions.ts
+++ b/models/chunter/src/actions.ts
@@ -19,6 +19,7 @@ import notification, { notificationActionTemplates } from '@hcengineering/model-
 import activity from '@hcengineering/activity'
 import workbench from '@hcengineering/model-workbench'
 import core from '@hcengineering/model-core'
+import contact from '@hcengineering/contact'
 
 import chunter from './plugin'
 
@@ -43,6 +44,18 @@ export function defineActions (builder: Builder): void {
     chunter.category.Chunter
   )
 
+  createAction(builder, {
+    action: chunter.actionImpl.StartConversation,
+    label: chunter.string.StartConversation,
+    icon: chunter.icon.Thread,
+    input: 'focus',
+    category: chunter.category.Chunter,
+    target: contact.mixin.Employee,
+    context: {
+      mode: 'context',
+      group: 'associate'
+    }
+  })
   defineMessageActions(builder)
   defineChannelActions(builder)
 }
diff --git a/models/chunter/src/plugin.ts b/models/chunter/src/plugin.ts
index c0fbc87557..8116ad3290 100644
--- a/models/chunter/src/plugin.ts
+++ b/models/chunter/src/plugin.ts
@@ -53,7 +53,8 @@ export default mergeIds(chunterId, chunter, {
     ReplyToThread: '' as ViewAction,
     OpenInSidebar: '' as ViewAction,
     TranslateMessage: '' as ViewAction,
-    ShowOriginalMessage: '' as ViewAction
+    ShowOriginalMessage: '' as ViewAction,
+    StartConversation: '' as ViewAction
   },
   category: {
     Chunter: '' as Ref<ActionCategory>
diff --git a/packages/ui/src/components/ModernTab.svelte b/packages/ui/src/components/ModernTab.svelte
index 90b552fbf1..c9fb9e2a7f 100644
--- a/packages/ui/src/components/ModernTab.svelte
+++ b/packages/ui/src/components/ModernTab.svelte
@@ -148,6 +148,8 @@
     }
 
     .icon {
+      writing-mode: initial;
+      text-orientation: initial;
       &.vertical {
         transform: rotate(90deg);
         text-orientation: upright;
diff --git a/plugins/chunter-assets/lang/en.json b/plugins/chunter-assets/lang/en.json
index 7d61091832..8412b7ca32 100644
--- a/plugins/chunter-assets/lang/en.json
+++ b/plugins/chunter-assets/lang/en.json
@@ -126,6 +126,7 @@
     "TranslateMessage": "Translate message",
     "Translate": "Translate",
     "ShowOriginal": "Show original",
-    "Translating": "Translating..."
+    "Translating": "Translating...",
+    "StartConversation": "Start conversation"
   }
 }
\ No newline at end of file
diff --git a/plugins/chunter-assets/lang/es.json b/plugins/chunter-assets/lang/es.json
index 1fef286c8a..027a3e2c10 100644
--- a/plugins/chunter-assets/lang/es.json
+++ b/plugins/chunter-assets/lang/es.json
@@ -126,6 +126,7 @@
     "TranslateMessage": "Traducir mensaje",
     "Translate": "Traducir",
     "ShowOriginal": "Mostrar original",
-    "Translating": "Traduciendo..."
+    "Translating": "Traduciendo...",
+    "StartConversation": "Iniciar conversación"
   }
 }
\ No newline at end of file
diff --git a/plugins/chunter-assets/lang/fr.json b/plugins/chunter-assets/lang/fr.json
index e5415a0cd1..f50055ed47 100644
--- a/plugins/chunter-assets/lang/fr.json
+++ b/plugins/chunter-assets/lang/fr.json
@@ -126,6 +126,7 @@
     "TranslateMessage": "Traduire le message",
     "Translate": "Traduire",
     "ShowOriginal": "Afficher l'original",
-    "Translating": "Traduction en cours..."
+    "Translating": "Traduction en cours...",
+    "StartConversation": "Démarrer la conversation"
   }
 }
\ No newline at end of file
diff --git a/plugins/chunter-assets/lang/pt.json b/plugins/chunter-assets/lang/pt.json
index 0b2c5a6425..fbfe71a7f0 100644
--- a/plugins/chunter-assets/lang/pt.json
+++ b/plugins/chunter-assets/lang/pt.json
@@ -126,6 +126,7 @@
     "TranslateMessage": "Traduzir mensagem",
     "Translate": "Traduzir",
     "ShowOriginal": "Mostrar original",
-    "Translating": "A traduzir..."
+    "Translating": "A traduzir...",
+    "StartConversation": "Iniciar conversa"
   }
 }
\ No newline at end of file
diff --git a/plugins/chunter-assets/lang/ru.json b/plugins/chunter-assets/lang/ru.json
index 0d62dcce64..febe44f00e 100644
--- a/plugins/chunter-assets/lang/ru.json
+++ b/plugins/chunter-assets/lang/ru.json
@@ -126,6 +126,7 @@
     "TranslateMessage": "Перевести сообщение",
     "Translate": "Перевести",
     "ShowOriginal": "Показать оригинал",
-    "Translating": "Перевод..."
+    "Translating": "Перевод...",
+    "StartConversation": "Начать диалог"
   }
 }
\ No newline at end of file
diff --git a/plugins/chunter-assets/lang/zh.json b/plugins/chunter-assets/lang/zh.json
index 84b7dbf3f8..80bfc8c339 100644
--- a/plugins/chunter-assets/lang/zh.json
+++ b/plugins/chunter-assets/lang/zh.json
@@ -126,6 +126,7 @@
     "TranslateMessage": "翻译消息",
     "Translate": "翻译",
     "ShowOriginal": "显示原文",
-    "Translating": "翻译中..."
+    "Translating": "翻译中...",
+    "StartConversation": "开始对话"
   }
 }
diff --git a/plugins/chunter-resources/src/components/chat/create/CreateDirectChat.svelte b/plugins/chunter-resources/src/components/chat/create/CreateDirectChat.svelte
index 964c5cc822..0b5eeb277f 100644
--- a/plugins/chunter-resources/src/components/chat/create/CreateDirectChat.svelte
+++ b/plugins/chunter-resources/src/components/chat/create/CreateDirectChat.svelte
@@ -14,24 +14,20 @@
 -->
 <script lang="ts">
   import { createEventDispatcher, onMount } from 'svelte'
-  import { deepEqual } from 'fast-equals'
 
-  import { DirectMessage } from '@hcengineering/chunter'
-  import contact, { Employee, Person, PersonAccount } from '@hcengineering/contact'
-  import core, { getCurrentAccount, Ref } from '@hcengineering/core'
-  import { personIdByAccountId, SelectUsersPopup } from '@hcengineering/contact-resources'
-  import notification from '@hcengineering/notification'
+  import contact, { Employee, PersonAccount } from '@hcengineering/contact'
+  import { Ref } from '@hcengineering/core'
+  import { SelectUsersPopup } from '@hcengineering/contact-resources'
   import presentation, { createQuery, getClient } from '@hcengineering/presentation'
   import { Modal, showPopup } from '@hcengineering/ui'
 
   import chunter from '../../../plugin'
-  import { buildDmName } from '../../../utils'
+  import { buildDmName, createDirect } from '../../../utils'
   import ChannelMembers from '../../ChannelMembers.svelte'
   import { openChannel } from '../../../navigation'
 
   const dispatch = createEventDispatcher()
   const client = getClient()
-  const myAcc = getCurrentAccount() as PersonAccount
   const query = createQuery()
 
   let employeeIds: Ref<Employee>[] = []
@@ -51,74 +47,12 @@
   }
 
   async function createDirectMessage (): Promise<void> {
-    const employeeAccounts = await client.findAll(contact.class.PersonAccount, { person: { $in: employeeIds } })
-    const accIds = [myAcc._id, ...employeeAccounts.filter(({ _id }) => _id !== myAcc._id).map(({ _id }) => _id)].sort()
+    const dmId = await createDirect(employeeIds)
 
-    const existingDms = await client.findAll(chunter.class.DirectMessage, {})
-    const newDirectPersons = Array.from(new Set([...employeeIds, myAcc.person])).sort()
-
-    let direct: DirectMessage | undefined
-
-    for (const dm of existingDms) {
-      const existDirectPersons = Array.from(
-        new Set(dm.members.map((id) => $personIdByAccountId.get(id as Ref<PersonAccount>)))
-      )
-        .filter((person): person is Ref<Person> => person !== undefined)
-        .sort()
-      if (deepEqual(existDirectPersons, newDirectPersons)) {
-        direct = dm
-        break
-      }
-    }
-
-    const existingMembers = direct?.members
-    const missingAccounts = existingMembers !== undefined ? accIds.filter((id) => !existingMembers.includes(id)) : []
-
-    if (direct !== undefined && missingAccounts.length > 0) {
-      await client.updateDoc(chunter.class.DirectMessage, direct.space, direct._id, {
-        $push: { members: { $each: missingAccounts, $position: 0 } }
-      })
-    }
-
-    const dmId =
-      direct?._id ??
-      (await client.createDoc(chunter.class.DirectMessage, core.space.Space, {
-        name: '',
-        description: '',
-        private: true,
-        archived: false,
-        members: accIds
-      }))
-
-    const context = await client.findOne(notification.class.DocNotifyContext, {
-      user: myAcc._id,
-      objectId: dmId,
-      objectClass: chunter.class.DirectMessage
-    })
-
-    if (context !== undefined) {
-      if (context.hidden) {
-        await client.updateDoc(context._class, context.space, context._id, { hidden: false })
-      }
-
-      dispatch('close')
+    if (dmId !== undefined) {
       openChannel(dmId, chunter.class.DirectMessage)
-      return
+      dispatch('close')
     }
-
-    const space = await client.findOne(contact.class.PersonSpace, { person: myAcc.person }, { projection: { _id: 1 } })
-    if (!space) return
-    await client.createDoc(notification.class.DocNotifyContext, space._id, {
-      user: myAcc._id,
-      objectId: dmId,
-      objectClass: chunter.class.DirectMessage,
-      objectSpace: core.space.Space,
-      hidden: false,
-      isPinned: false
-    })
-
-    openChannel(dmId, chunter.class.DirectMessage)
-    dispatch('close')
   }
 
   function handleCancel (): void {
diff --git a/plugins/chunter-resources/src/index.ts b/plugins/chunter-resources/src/index.ts
index cdfe0cd068..64da477902 100644
--- a/plugins/chunter-resources/src/index.ts
+++ b/plugins/chunter-resources/src/index.ts
@@ -78,7 +78,8 @@ import {
   removeChannelAction,
   translateMessage,
   showOriginalMessage,
-  canTranslateMessage
+  canTranslateMessage,
+  startConversationAction
 } from './utils'
 
 export { default as ChatMessageInput } from './components/chat-message/ChatMessageInput.svelte'
@@ -213,6 +214,7 @@ export default async (): Promise<Resources> => ({
     ReplyToThread: replyToThread,
     OpenInSidebar: openChannelInSidebarAction,
     TranslateMessage: translateMessage,
-    ShowOriginalMessage: showOriginalMessage
+    ShowOriginalMessage: showOriginalMessage,
+    StartConversation: startConversationAction
   }
 })
diff --git a/plugins/chunter-resources/src/utils.ts b/plugins/chunter-resources/src/utils.ts
index 950ea5ec1a..3a9ea734c7 100644
--- a/plugins/chunter-resources/src/utils.ts
+++ b/plugins/chunter-resources/src/utils.ts
@@ -22,7 +22,7 @@ import activity, {
 import { isReactionMessage } from '@hcengineering/activity-resources'
 import { type Channel, type ChatMessage, type DirectMessage, type ThreadMessage } from '@hcengineering/chunter'
 import contact, { getName, type Employee, type Person, type PersonAccount } from '@hcengineering/contact'
-import { PersonIcon, employeeByIdStore } from '@hcengineering/contact-resources'
+import { PersonIcon, employeeByIdStore, personIdByAccountId } from '@hcengineering/contact-resources'
 import core, {
   getCurrentAccount,
   type Account,
@@ -35,7 +35,7 @@ import core, {
   type Timestamp,
   type WithLookup
 } from '@hcengineering/core'
-import { type DocNotifyContext, type InboxNotification } from '@hcengineering/notification'
+import notification, { type DocNotifyContext, type InboxNotification } from '@hcengineering/notification'
 import {
   InboxNotificationsClientImpl,
   isActivityNotification,
@@ -48,10 +48,11 @@ import { classIcon, getDocLinkTitle, getDocTitle } from '@hcengineering/view-res
 import { get, writable, type Unsubscriber } from 'svelte/store'
 import aiBot from '@hcengineering/ai-bot'
 import { translate as aiTranslate } from '@hcengineering/ai-bot-resources'
+import { deepEqual } from 'fast-equals'
 
 import ChannelIcon from './components/ChannelIcon.svelte'
 import DirectIcon from './components/DirectIcon.svelte'
-import { resetChunterLocIfEqual } from './navigation'
+import { openChannelInSidebar, resetChunterLocIfEqual } from './navigation'
 import chunter from './plugin'
 import { shownTranslatedMessagesStore, translatedMessagesStore, translatingMessagesStore } from './stores'
 
@@ -560,3 +561,90 @@ export async function canTranslateMessage (): Promise<boolean> {
   const url = getMetadata(aiBot.metadata.EndpointURL) ?? ''
   return url !== ''
 }
+
+export async function startConversationAction (docs?: Employee | Employee[]): Promise<void> {
+  if (docs === undefined) return
+  const employees = Array.isArray(docs) ? docs : [docs]
+  const employeeIds = employees.map(({ _id }) => _id)
+
+  const dm = await createDirect(employeeIds)
+
+  if (dm !== undefined) {
+    await openChannelInSidebar(dm, chunter.class.DirectMessage, undefined, undefined, true)
+  }
+}
+
+export async function createDirect (employeeIds: Array<Ref<Employee>>): Promise<Ref<DirectMessage>> {
+  const client = getClient()
+  const me = getCurrentAccount()
+
+  const employeeAccounts = await client.findAll(contact.class.PersonAccount, { person: { $in: employeeIds } })
+  const accIds = [me._id, ...employeeAccounts.filter(({ _id }) => _id !== me._id).map(({ _id }) => _id)].sort()
+
+  const existingDms = await client.findAll(chunter.class.DirectMessage, {})
+  const newDirectPersons = Array.from(new Set([...employeeIds, me.person] as Array<Ref<Person>>)).sort()
+
+  let direct: DirectMessage | undefined
+
+  for (const dm of existingDms) {
+    const existDirectPersons = Array.from(
+      new Set(dm.members.map((id) => get(personIdByAccountId).get(id as Ref<PersonAccount>)))
+    )
+      .filter((person): person is Ref<Person> => person !== undefined)
+      .sort()
+    if (deepEqual(existDirectPersons, newDirectPersons)) {
+      direct = dm
+      break
+    }
+  }
+
+  const existingMembers = direct?.members
+  const missingAccounts = existingMembers !== undefined ? accIds.filter((id) => !existingMembers.includes(id)) : []
+
+  if (direct !== undefined && missingAccounts.length > 0) {
+    await client.updateDoc(chunter.class.DirectMessage, direct.space, direct._id, {
+      $push: { members: { $each: missingAccounts, $position: 0 } }
+    })
+  }
+
+  const dmId =
+    direct?._id ??
+    (await client.createDoc(chunter.class.DirectMessage, core.space.Space, {
+      name: '',
+      description: '',
+      private: true,
+      archived: false,
+      members: accIds
+    }))
+
+  const context = await client.findOne(notification.class.DocNotifyContext, {
+    user: me._id,
+    objectId: dmId,
+    objectClass: chunter.class.DirectMessage
+  })
+
+  if (context !== undefined) {
+    if (context.hidden) {
+      await client.updateDoc(context._class, context.space, context._id, { hidden: false })
+    }
+
+    return dmId
+  }
+
+  const space = await client.findOne(
+    contact.class.PersonSpace,
+    { person: me.person as Ref<Person> },
+    { projection: { _id: 1 } }
+  )
+  if (space == null) return dmId
+  await client.createDoc(notification.class.DocNotifyContext, space._id, {
+    user: me._id,
+    objectId: dmId,
+    objectClass: chunter.class.DirectMessage,
+    objectSpace: core.space.Space,
+    hidden: false,
+    isPinned: false
+  })
+
+  return dmId
+}
diff --git a/plugins/chunter/src/index.ts b/plugins/chunter/src/index.ts
index 76b6ca9c43..3c814160b9 100644
--- a/plugins/chunter/src/index.ts
+++ b/plugins/chunter/src/index.ts
@@ -208,7 +208,8 @@ export default plugin(chunterId, {
     TranslateMessage: '' as IntlString,
     Translate: '' as IntlString,
     ShowOriginal: '' as IntlString,
-    Translating: '' as IntlString
+    Translating: '' as IntlString,
+    StartConversation: '' as IntlString
   },
   ids: {
     DMNotification: '' as Ref<NotificationType>,
diff --git a/plugins/workbench-resources/src/components/sidebar/SidebarMini.svelte b/plugins/workbench-resources/src/components/sidebar/SidebarMini.svelte
index 24acec8ce5..7b5cf463d9 100644
--- a/plugins/workbench-resources/src/components/sidebar/SidebarMini.svelte
+++ b/plugins/workbench-resources/src/components/sidebar/SidebarMini.svelte
@@ -23,4 +23,4 @@
   export let selected: Ref<Widget> | undefined = undefined
 </script>
 
-<WidgetsBar {widgets} {preferences} {selected} />
+<WidgetsBar {widgets} {preferences} {selected} roundBorder />
diff --git a/plugins/workbench-resources/src/components/sidebar/widgets/WidgetsBar.svelte b/plugins/workbench-resources/src/components/sidebar/widgets/WidgetsBar.svelte
index 5f5717b4db..fbdb5d4b41 100644
--- a/plugins/workbench-resources/src/components/sidebar/widgets/WidgetsBar.svelte
+++ b/plugins/workbench-resources/src/components/sidebar/widgets/WidgetsBar.svelte
@@ -24,6 +24,7 @@
   export let widgets: Widget[] = []
   export let preferences: WidgetPreference[] = []
   export let selected: Ref<Widget> | undefined = undefined
+  export let roundBorder = false
 
   function handleAddWidget (): void {
     showPopup(AddWidgetsPopup, { widgets })
@@ -48,7 +49,7 @@
     .filter((widget): widget is Widget => widget !== undefined && widget.type === WidgetType.Configurable)
 </script>
 
-<div class="root">
+<div class="root" class:roundBorder>
   <div class="block">
     {#each fixedWidgets as widget}
       <WidgetPresenter
@@ -103,6 +104,10 @@
     max-width: 3.5rem;
     border-top: 1px solid var(--theme-divider-color);
     overflow-y: auto;
+
+    &.roundBorder {
+      border-top-left-radius: var(--small-focus-BorderRadius);
+    }
   }
 
   .block {

From 21a5f0787061f7dc3f9c663c071d4b0b4bf31e7f Mon Sep 17 00:00:00 2001
From: Alexander Onnikov <Alexander.Onnikov@xored.com>
Date: Mon, 23 Sep 2024 18:24:40 +0700
Subject: [PATCH 2/2] fix: better handling png image size for scale < 2 (#6688)

Signed-off-by: Alexander Onnikov <Alexander.Onnikov@xored.com>
---
 .../src/components/FilePreview.svelte         |  5 +++--
 packages/presentation/src/image.ts            | 21 +++++++++++--------
 .../components/CollaborativeTextEditor.svelte |  4 ++--
 .../src/components/StyledTextBox.svelte       |  4 ++--
 .../src/components/extension/imageExt.ts      |  3 +++
 .../components/extension/imageUploadExt.ts    |  6 ++++--
 .../src/components/viewer/ImageViewer.svelte  | 19 ++++++++++-------
 7 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/packages/presentation/src/components/FilePreview.svelte b/packages/presentation/src/components/FilePreview.svelte
index 96d3eee38e..5c988b3c99 100644
--- a/packages/presentation/src/components/FilePreview.svelte
+++ b/packages/presentation/src/components/FilePreview.svelte
@@ -27,6 +27,7 @@
 
   import { getFileUrl } from '../file'
   import { getPreviewType, previewTypes } from '../filetypes'
+  import { imageSizeToRatio } from '../image'
   import { BlobMetadata, FilePreviewExtension } from '../types'
 
   export let file: Ref<Blob>
@@ -68,8 +69,8 @@
       return
     }
     const pR: number = mD?.pixelRatio ?? 1
-    const fWidth: number = mD.originalWidth / pR
-    const fHeight: number = mD.originalHeight / pR
+    const fWidth: number = imageSizeToRatio(mD.originalWidth, pR)
+    const fHeight: number = imageSizeToRatio(mD.originalHeight, pR)
     let mHeight: number = 0
     let scale: number = 1
     if (fWidth > pWidth) {
diff --git a/packages/presentation/src/image.ts b/packages/presentation/src/image.ts
index cda525b48e..d5ff35337b 100644
--- a/packages/presentation/src/image.ts
+++ b/packages/presentation/src/image.ts
@@ -15,6 +15,11 @@
 
 import extract from 'png-chunks-extract'
 
+export function imageSizeToRatio (width: number, pixelRatio: number): number {
+  // consider pixel ratio < 2 as non retina and display them in original size
+  return pixelRatio < 2 ? width : Math.round(width / pixelRatio)
+}
+
 export async function getImageSize (file: Blob): Promise<{ width: number, height: number, pixelRatio: number }> {
   const size = isPng(file) ? await getPngImageSize(file) : undefined
 
@@ -65,20 +70,18 @@ async function getPngImageSize (file: Blob): Promise<{ width: number, height: nu
     const idhrData = parseIHDR(new DataView(iHDRChunk.data.buffer))
     const physData = parsePhys(new DataView(pHYsChunk.data.buffer))
 
-    if (physData.unit === 0 && physData.ppux === physData.ppuy) {
-      const pixelRatio = Math.round(physData.ppux / 2834.5)
-      return {
-        width: idhrData.width,
-        height: idhrData.height,
-        pixelRatio
-      }
+    // Assuming pixels are square
+    // http://www.libpng.org/pub/png/spec/1.2/PNG-Decoders.html#D.Pixel-dimensions
+    const pixelRatio = Math.round(physData.ppux * 0.0254) / 72
+    return {
+      width: idhrData.width,
+      height: idhrData.height,
+      pixelRatio
     }
   } catch (err) {
     console.error(err)
     return undefined
   }
-
-  return undefined
 }
 
 // See http://www.libpng.org/pub/png/spec/1.2/PNG-Chunks.html
diff --git a/plugins/text-editor-resources/src/components/CollaborativeTextEditor.svelte b/plugins/text-editor-resources/src/components/CollaborativeTextEditor.svelte
index 90eab040d5..304395eba2 100644
--- a/plugins/text-editor-resources/src/components/CollaborativeTextEditor.svelte
+++ b/plugins/text-editor-resources/src/components/CollaborativeTextEditor.svelte
@@ -17,7 +17,7 @@
 <script lang="ts">
   import { type Space, type Class, type CollaborativeDoc, type Doc, type Ref } from '@hcengineering/core'
   import { IntlString, translate } from '@hcengineering/platform'
-  import { getFileUrl, getImageSize } from '@hcengineering/presentation'
+  import { getFileUrl, getImageSize, imageSizeToRatio } from '@hcengineering/presentation'
   import { markupToJSON } from '@hcengineering/text'
   import {
     AnySvelteComponent,
@@ -297,7 +297,7 @@
         type: 'image',
         attrs: {
           'file-id': attached.file,
-          width: Math.round(size.width / size.pixelRatio)
+          width: imageSizeToRatio(size.width, size.pixelRatio)
         }
       },
       {
diff --git a/plugins/text-editor-resources/src/components/StyledTextBox.svelte b/plugins/text-editor-resources/src/components/StyledTextBox.svelte
index 46885cdd85..fc27ac1e32 100644
--- a/plugins/text-editor-resources/src/components/StyledTextBox.svelte
+++ b/plugins/text-editor-resources/src/components/StyledTextBox.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Markup } from '@hcengineering/core'
   import { IntlString } from '@hcengineering/platform'
-  import presentation, { MessageViewer, getFileUrl, getImageSize } from '@hcengineering/presentation'
+  import presentation, { MessageViewer, getFileUrl, getImageSize, imageSizeToRatio } from '@hcengineering/presentation'
   import { EmptyMarkup } from '@hcengineering/text'
   import textEditor, { RefAction } from '@hcengineering/text-editor'
   import {
@@ -257,7 +257,7 @@
         type: 'image',
         attrs: {
           'file-id': attached.file,
-          width: Math.round(size.width / size.pixelRatio)
+          width: imageSizeToRatio(size.width, size.pixelRatio)
         }
       },
       {
diff --git a/plugins/text-editor-resources/src/components/extension/imageExt.ts b/plugins/text-editor-resources/src/components/extension/imageExt.ts
index 8c8afe7de4..f000915b34 100644
--- a/plugins/text-editor-resources/src/components/extension/imageExt.ts
+++ b/plugins/text-editor-resources/src/components/extension/imageExt.ts
@@ -153,12 +153,15 @@ export const ImageExtension = ImageNode.extend<ImageOptions>({
             const fileName = node.attrs.alt ?? ''
             const fileType = node.attrs['data-file-type'] ?? 'image/*'
 
+            const metadata = node.attrs.width !== undefined ? { originalWidth: node.attrs.width } : {}
+
             showPopup(
               FilePreviewPopup,
               {
                 file: fileId,
                 name: fileName,
                 contentType: fileType,
+                metadata,
                 fullSize: true,
                 showIcon: false
               },
diff --git a/plugins/text-editor-resources/src/components/extension/imageUploadExt.ts b/plugins/text-editor-resources/src/components/extension/imageUploadExt.ts
index d9a1a84be2..b43a6a7ff5 100644
--- a/plugins/text-editor-resources/src/components/extension/imageUploadExt.ts
+++ b/plugins/text-editor-resources/src/components/extension/imageUploadExt.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 //
 import { setPlatformStatus, unknownError } from '@hcengineering/platform'
-import { getImageSize } from '@hcengineering/presentation'
+import { imageSizeToRatio, getImageSize } from '@hcengineering/presentation'
 import { Extension } from '@tiptap/core'
 import { Plugin, PluginKey } from '@tiptap/pm/state'
 import { type EditorView } from '@tiptap/pm/view'
@@ -41,6 +41,8 @@ function getType (type: string): 'image' | 'other' {
  * @public
  */
 export const ImageUploadExtension = Extension.create<ImageUploadOptions>({
+  name: 'image-upload',
+
   addOptions () {
     return {
       getFileUrl: () => ''
@@ -157,7 +159,7 @@ async function handleImageUpload (
       src: url,
       alt: file.name,
       title: file.name,
-      width: Math.round(size.width / size.pixelRatio)
+      width: imageSizeToRatio(size.width, size.pixelRatio)
     })
 
     const transaction = view.state.tr.insert(pos?.pos ?? 0, node)
diff --git a/plugins/view-resources/src/components/viewer/ImageViewer.svelte b/plugins/view-resources/src/components/viewer/ImageViewer.svelte
index 2f55bbdb00..f894012eb6 100644
--- a/plugins/view-resources/src/components/viewer/ImageViewer.svelte
+++ b/plugins/view-resources/src/components/viewer/ImageViewer.svelte
@@ -14,7 +14,7 @@
 -->
 <script lang="ts">
   import { type Blob, type Ref } from '@hcengineering/core'
-  import { getBlobRef, type BlobMetadata } from '@hcengineering/presentation'
+  import { getBlobRef, imageSizeToRatio, type BlobMetadata } from '@hcengineering/presentation'
   import { Loading } from '@hcengineering/ui'
 
   export let value: Ref<Blob>
@@ -22,15 +22,20 @@
   export let metadata: BlobMetadata | undefined
   export let fit: boolean = false
 
-  $: p = getBlobRef(value, name)
-  $: width = metadata?.originalWidth ? `min(${metadata.originalWidth / metadata?.pixelRatio ?? 1}px, 100%)` : '100%'
-  $: height = metadata?.originalHeight
-    ? `min(${metadata.originalHeight / metadata?.pixelRatio ?? 1}px, ${fit ? '100%' : '80vh'})`
-    : '100%'
+  $: originalWidth = metadata?.originalWidth
+  $: originalHeight = metadata?.originalHeight
+  $: pixelRatio = metadata?.pixelRatio ?? 1
+
+  $: imageWidth = originalWidth != null ? imageSizeToRatio(originalWidth, pixelRatio) : undefined
+  $: imageHeight = originalHeight != null ? imageSizeToRatio(originalHeight, pixelRatio) : undefined
+
+  $: width = imageWidth != null ? `min(${imageWidth}px, 100%)` : '100%'
+  $: height = imageHeight != null ? `min(${imageHeight}px, ${fit ? '100%' : '80vh'})` : '100%'
+
   let loading = true
 </script>
 
-{#await p then blobRef}
+{#await getBlobRef(value, name) then blobRef}
   {#if loading}
     <div class="flex-center w-full h-full clear-mins">
       <Loading />