From 5c3c6cdbcce2622ff6dfeb3ea1a732890779e41b Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Sat, 9 Nov 2024 09:53:35 +0000
Subject: [PATCH] fix: pr review changes

---
 packages/nc-gui/components/cell/RichText.vue  | 22 +++++++++++++------
 packages/nc-gui/components/cell/TextArea.vue  | 22 ++++++++++++-------
 .../smartsheet/expanded-form/index.vue        |  4 ++--
 .../helpers/tiptapExtensions/mention/index.ts |  5 ++++-
 4 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/packages/nc-gui/components/cell/RichText.vue b/packages/nc-gui/components/cell/RichText.vue
index 62a9fcac98..2c1f7d449b 100644
--- a/packages/nc-gui/components/cell/RichText.vue
+++ b/packages/nc-gui/components/cell/RichText.vue
@@ -134,12 +134,20 @@ if (appInfo.value.ee) {
 
       const colorStyles = bUser?.id === user.value?.id ? '' : 'bg-[#D4F7E0] text-[#17803D]'
 
-      return `<span data-type="mention" data-id='{
-    "id": "${bUser?.id}",
-    "email": "${bUser?.email}",
-    "name": "${bUser?.display_name ?? ''}",
-    "isSameUser": "${bUser?.id === user.value?.id}"
-}' class="${colorStyles} mention font-semibold  m-0.5 rounded-md px-1">@${processedContent}</span>`
+      const span = document.createElement('span')
+      span.setAttribute('data-type', 'mention')
+      span.setAttribute(
+        'data-id',
+        JSON.stringify({
+          id: bUser?.id,
+          email: bUser?.email,
+          name: bUser?.display_name ?? '',
+          isSameUser: bUser?.id === user.value?.id,
+        }),
+      )
+      span.setAttribute('class', `${colorStyles} mention font-semibold  m-0.5 rounded-md px-1`)
+      span.textContent = `@${processedContent}`
+      return span.outerHTML
     }
 
     return text.replace(regex, replacement)
@@ -160,7 +168,7 @@ if (appInfo.value.ee) {
           name: user.display_name,
           email: user.email,
         }))
-        .filter((user) => user.label.toLowerCase() === content.toLowerCase())[0]
+        .find((user) => user.label.toLowerCase() === content.toLowerCase()) as any
 
       return `@(${user.id}|${user.email}|${user.display_name ?? ''})`
     },
diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index 0a3d8d64f3..2f8f8d1b8b 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@@ -225,16 +225,22 @@ watch([widthTextArea, heightTextArea], () => {
 })
 
 const updateSize = () => {
-  const size = localStorage.getItem(STORAGE_KEY)
-  let elem = document.querySelector('.nc-text-area-expanded') as HTMLElement
+  try {
+    const size = localStorage.getItem(STORAGE_KEY)
+    let elem = document.querySelector('.nc-text-area-expanded') as HTMLElement
 
-  if (isRichMode.value) {
-    elem = document.querySelector('.nc-long-text-expanded-modal .nc-textarea-rich-editor .tiptap') as HTMLElement
-  }
+    if (isRichMode.value) {
+      elem = document.querySelector('.nc-long-text-expanded-modal .nc-textarea-rich-editor .tiptap') as HTMLElement
+    }
 
-  if (size && elem) {
-    elem.style.width = `${JSON.parse(size).width}px`
-    elem.style.height = `${JSON.parse(size).height}px`
+    const parsedJSON = JSON.parse(size)
+
+    if (parsedJSON && elem) {
+      elem.style.width = `${parsedJSON.width}px`
+      elem.style.height = `${parsedJSON.height}px`
+    }
+  } catch (e) {
+    console.error(e)
   }
 }
 
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index f01efbeb49..2e2cbc5f27 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -576,7 +576,7 @@ watch([expandedFormScrollWrapper, isLoading], () => {
           })
           mentionedCell.value = columnId as string
           scrollToColumn(columnId as string)
-          onClickOutside(document.querySelector(`.${mentionedCell.value}`)! as HTMLDivElement, () => {
+          onClickOutside(document.querySelector(`[col-id="${columnId}"]`)! as HTMLDivElement, () => {
             mentionedCell.value = null
           })
         } else {
@@ -813,7 +813,7 @@ export default {
               v-for="(col, i) of fields"
               v-show="!isVirtualCol(col) || !isNew || isLinksOrLTAR(col)"
               :key="col.title"
-              :class="`nc-expand-col-${col.title} ${col.id}`"
+              :class="`nc-expand-col-${col.title}`"
               :col-id="col.id"
               :data-testid="`nc-expand-col-${col.title}`"
               class="nc-expanded-form-row w-full"
diff --git a/packages/nc-gui/helpers/tiptapExtensions/mention/index.ts b/packages/nc-gui/helpers/tiptapExtensions/mention/index.ts
index 24a2df7c60..a49ef3095a 100644
--- a/packages/nc-gui/helpers/tiptapExtensions/mention/index.ts
+++ b/packages/nc-gui/helpers/tiptapExtensions/mention/index.ts
@@ -7,7 +7,10 @@ export const Mention = TipTapMention.Mention.extend({
 
     const innerText = attributes.name && attributes.name.length > 0 ? attributes.name : attributes.email
 
-    const styles = attributes.isSameUser === 'true' ? 'bg-[#D4F7E0] text-[#17803D]' : 'bg-brand-50 text-brand-500'
+    const styles =
+      attributes.isSameUser === true || attributes.isSameUser === 'true'
+        ? 'bg-[#D4F7E0] text-[#17803D]'
+        : 'bg-brand-50 text-brand-500'
 
     return [
       'span',