Nc fix/comments UI (#8711)

* fix: minor fixes

* fix: minor fixes

* fix: minor fixes

* fix: hover on comment

---------

Co-authored-by: DarkPhoenix2704 <anbarasun123@gmail.com>

packages/nc-gui/components/cell/RichText/LinkOptions.vue

@@ -11,6 +11,7 @@ const emits = defineEmits(['blur'])
 interface Props {
   editor: Editor
   isFormField?: boolean
+  isComment?: boolean
 }
 
 const { editor, isFormField } = toRefs(props)
@@ -164,6 +165,9 @@ const openLink = () => {
 
 const onMountLinkOptions = (e) => {
   if (e?.popper?.style) {
+    if (props.isComment) {
+      e.popper.style.left = '-10%'
+    }
     e.popper.style.width = '95%'
   }
 }
@@ -233,14 +237,6 @@ const tabIndex = computed(() => {
             <MdiDeleteOutline />
           </NcButton>
         </NcTooltip>
-        <div class="absolute -bottom-1.5 left-0 right-0 w-full flex flex-row justify-center">
-          <div
-            class="flex h-2.5 w-2.5 bg-white border-gray-200 border-r-1 border-b-1 transform rotate-45"
-            :style="{
-              boxShadow: '1px 1px 3px rgba(231, 231, 233, 1)',
-            }"
-          ></div>
-        </div>
       </div>
     </div>
   </BubbleMenu>

packages/nc-gui/components/smartsheet/expanded-form/Comments.vue

@@ -13,7 +13,6 @@ const {
   audits,
   isAuditLoading,
   saveComment: _saveComment,
-  comment: newComment,
   updateComment,
 } = useExpandedFormStoreOrThrow()
 
@@ -23,6 +22,14 @@ const commentsWrapperEl = ref<HTMLDivElement>()
 
 const commentInputRef = ref<any>()
 
+const comment = ref('')
+
+const { copy } = useClipboard()
+
+const route = useRoute()
+
+const { dashboardUrl } = useDashboard()
+
 const editRef = ref<any>()
 
 const { user, appInfo } = useGlobal()
@@ -68,10 +75,16 @@ async function onEditComment() {
 
   isCommentMode.value = true
 
-  await updateComment(editComment.value.id!, {
-    comment: editComment.value?.comment,
+  const tempCom = {
+    ...editCommentValue.value,
+  }
+
+  isEditing.value = false
+  editCommentValue.value = undefined
+  await updateComment(tempCom.id!, {
+    comment: tempCom.comment,
   })
-  onStopEdit()
+  loadComments()
 }
 
 function onCancel() {
@@ -116,10 +129,16 @@ function scrollComments() {
   }
 }
 
-const isSaving = ref(false)
-
 const saveComment = async () => {
-  if (isSaving.value) return
+  if (!comment.value.trim()) return
+
+  while (comment.value.endsWith('<br />') || comment.value.endsWith('\n')) {
+    if (comment.value.endsWith('<br />')) {
+      comment.value = comment.value.slice(0, -6)
+    } else {
+      comment.value = comment.value.slice(0, -2)
+    }
+  }
 
   isCommentMode.value = true
   isSaving.value = true
@@ -129,7 +148,7 @@ const saveComment = async () => {
     ...comments.value,
     {
       id: `temp-${new Date().getTime()}`,
-      comment: newComment.value,
+      comment: comment.value,
       created_at: new Date().toISOString(),
       created_by: user.value?.id,
       created_by_email: user.value?.email,
@@ -137,13 +156,16 @@ const saveComment = async () => {
     },
   ]
 
+  const tempCom = comment.value
+  comment.value = ''
+
   commentInputRef?.value?.setEditorContent('', true)
   await nextTick(() => {
     scrollComments()
   })
 
   try {
-    await _saveComment()
+    await _saveComment(tempCom)
     await nextTick(() => {
       isExpandedFormCommentMode.value = true
     })
@@ -235,9 +257,7 @@ const createdBy = (
               <div v-for="comment of comments" :key="comment.id" :class="`${comment.id}`" class="nc-comment-item">
                 <div
                   :class="{
-                    'hover:bg-gray-200 bg-[#F9F9FA]': comment.id !== editComment?.id,
-                    'bg-gray-200': comment.id === editComment?.id,
-                    '!bg-[#E7E7E9]': comment.resolved_by,
+                  'hover:bg-gray-100': editCommentValue?.id !== comment!.id
                 }"
                   class="group gap-3 overflow-hidden px-3 py-2"
                 >
@@ -337,7 +357,7 @@ const createdBy = (
                       v-model:value="value"
                       autofocus
                       :hide-options="false"
-                      class="expanded-form-comment-edit-input expanded-form-comment-input !pt-2 !pb-0.5 !pl-2 !m-0 w-full !border-1 !border-gray-200 !rounded-lg !bg-white !text-gray-800 !text-small !leading-18px !max-h-[694px]"
+                      class="expanded-form-comment-edit-input cursor-text expanded-form-comment-input !py-2 !px-2 !m-0 w-full !border-1 !border-gray-200 !rounded-lg !bg-white !text-gray-800 !text-small !leading-18px !max-h-[240px]"
                       data-testid="expanded-form-comment-input"
                       sync-value-change
                       @save="onEditComment"
@@ -366,10 +386,10 @@ const createdBy = (
             <div v-if="hasEditPermission" class="bg-gray-50 nc-comment-input !rounded-br-2xl gap-2 flex">
               <SmartsheetExpandedFormRichComment
                 ref="commentInputRef"
-                v-model:value="newComment"
+                v-model:value="comment"
                 :hide-options="false"
                 placeholder="Comment..."
-                class="expanded-form-comment-input !m-0 pt-2 w-full !border-t-1 !border-gray-200 !bg-transparent !text-gray-800 !text-small !leading-18px !max-h-[566px]"
+                class="expanded-form-comment-input !py-2 !px-2 cursor-text border-1 rounded-lg w-full bg-transparent !text-gray-800 !text-small !leading-18px !max-h-[240px]"
                 :autofocus="isExpandedFormCommentMode"
                 data-testid="expanded-form-comment-input"
                 @focus="isExpandedFormCommentMode = false"
@@ -512,7 +532,8 @@ const createdBy = (
   box-shadow: none;
   &:focus,
   &:focus-within {
-    @apply min-h-16;
+    @apply min-h-16 !bg-white border-brand-500;
+    box-shadow: 0px 0px 0px 2px rgba(51, 102, 255, 0.24);
   }
   &::placeholder {
     @apply !text-gray-400;

packages/nc-gui/components/smartsheet/expanded-form/RichComment.vue

@@ -60,6 +60,8 @@ const vModel = useVModel(props, 'value', emits, { defaultValue: '' })
 const tiptapExtensions = [
   StarterKit.configure({
     heading: false,
+    codeBlock: false,
+    code: false,
   }),
   Underline,
   Link,
@@ -82,6 +84,7 @@ const editor = useEditor({
   onFocus: () => {
     isFocused.value = true
     emits('focus')
+    onFocusWrapper()
   },
   onBlur: (e) => {
     if (
@@ -122,6 +125,7 @@ const setEditorContent = (contentMd: any, focusEndOfDoc?: boolean) => {
 const onFocusWrapper = () => {
   if (!props.readOnly && !keys.shift.value) {
     editor.value?.chain().focus().run()
+    setEditorContent(vModel.value, true)
   }
 }
 
@@ -236,6 +240,7 @@ defineExpose({
         v-if="editor"
         ref="richTextLinkOptionRef"
         :editor="editor"
+        :is-comment="true"
         :is-form-field="true"
         @blur="isFocused = false"
       />

packages/nc-gui/components/smartsheet/expanded-form/RichTextOptions.vue

@@ -67,8 +67,25 @@ const onToggleLink = () => {
 }
 
 const newMentionNode = () => {
+  if (!editor.value) return
+
+  const lastCharacter = editor.value.state.doc.textBetween(
+    editor.value.state.selection.$from.pos - 1,
+    editor.value.state.selection.$from.pos,
+  )
+
+  if (lastCharacter === '@') {
+    editor.value
+      .chain()
+      .deleteRange({ from: editor.value.state.selection.$from.pos - 1, to: editor.value.state.selection.$from.pos })
+      .run()
+  } else if (lastCharacter !== ' ') {
+    editor.value?.commands.insertContent(' @')
+    editor.value?.chain().focus().run()
+  } else {
     editor.value?.commands.insertContent('@')
     editor.value?.chain().focus().run()
+  }
 }
 </script>
 

packages/nc-gui/composables/useExpandedFormStore.ts

@@ -25,8 +25,6 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
 
   const isAuditLoading = ref(false)
 
-  const comment = ref('')
-
   const commentsDrawer = ref(true)
 
   const saveRowAndStay = ref(0)
@@ -250,9 +248,12 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
     }
   }
 
-  const saveComment = async () => {
+  const saveComment = async (comment: string) => {
     try {
-      if (!row.value || !comment.value) return
+      if (!row.value || !comment) {
+        comments.value = comments.value.filter((c) => !c.id?.startsWith('temp-'))
+        return
+      }
 
       const rowId = extractPkFromRow(row.value.row, meta.value.columns as ColumnType[])
 
@@ -261,7 +262,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
       await $api.utils.commentRow({
         fk_model_id: meta.value?.id as string,
         row_id: rowId,
-        comment: `${comment.value}`.replace(/(<br \/>)+$/g, ''),
+        comment: `${comment}`.replace(/(<br \/>)+$/g, ''),
       })
 
       // Increase Comment Count in rowMeta
@@ -275,8 +276,6 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
       // reloadTrigger?.trigger()
 
       await Promise.all([loadComments(), loadAudits()])
-
-      comment.value = ''
     } catch (e: any) {
       comments.value = comments.value.filter((c) => !(c.id ?? '').startsWith('temp-'))
       message.error(
@@ -526,7 +525,34 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
   }
 
   const updateComment = async (commentId: string, comment: Partial<CommentType>) => {
-    return await $api.utils.commentUpdate(commentId, comment)
+    const tempEdit = comments.value.find((c) => c.id === commentId)
+    try {
+      comments.value = comments.value.map((c) => {
+        if (c.id === commentId) {
+          return {
+            ...c,
+            ...comment,
+            updated_at: new Date().toISOString(),
+          }
+        }
+        return c
+      })
+      await $api.utils.commentUpdate(commentId, comment)
+    } catch (e: any) {
+      comments.value = comments.value.map((c) => {
+        if (c.id === commentId) {
+          return tempEdit
+        }
+        return c
+      })
+      message.error(
+        await extractSdkResponseErrorMsg(
+          e as Error & {
+            response: any
+          },
+        ),
+      )
+    }
   }
 
   return {
@@ -540,7 +566,6 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
     resolveComment,
     isCommentsLoading,
     saveComment,
-    comment,
     isYou,
     commentsDrawer,
     row,