fix: pr review changes

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='{
+      const span = document.createElement('span')
-    "id": "${bUser?.id}",
+      span.setAttribute('data-type', 'mention')
-    "email": "${bUser?.email}",
+      span.setAttribute(
-    "name": "${bUser?.display_name ?? ''}",
+        'data-id',
-    "isSameUser": "${bUser?.id === user.value?.id}"
+        JSON.stringify({
-}' class="${colorStyles} mention font-semibold  m-0.5 rounded-md px-1">@${processedContent}</span>`
+          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 ?? ''})`
     },

packages/nc-gui/components/cell/TextArea.vue

@@ -225,16 +225,22 @@ watch([widthTextArea, heightTextArea], () => {
 })
 
 const updateSize = () => {
-  const size = localStorage.getItem(STORAGE_KEY)
+  try {
-  let elem = document.querySelector('.nc-text-area-expanded') as HTMLElement
+    const size = localStorage.getItem(STORAGE_KEY)
+    let elem = document.querySelector('.nc-text-area-expanded') as HTMLElement
 
-  if (isRichMode.value) {
+    if (isRichMode.value) {
-    elem = document.querySelector('.nc-long-text-expanded-modal .nc-textarea-rich-editor .tiptap') as HTMLElement
+      elem = document.querySelector('.nc-long-text-expanded-modal .nc-textarea-rich-editor .tiptap') as HTMLElement
-  }
+    }
 
-  if (size && elem) {
+    const parsedJSON = JSON.parse(size)
-    elem.style.width = `${JSON.parse(size).width}px`
+
-    elem.style.height = `${JSON.parse(size).height}px`
+    if (parsedJSON && elem) {
+      elem.style.width = `${parsedJSON.width}px`
+      elem.style.height = `${parsedJSON.height}px`
+    }
+  } catch (e) {
+    console.error(e)
   }
 }
 

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"

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',