fix(nc-gui): long text modal size and event propogation issue

8 months ago · 36f12acb99
3 changed files with 60 additions and 32 deletions
--- a/packages/nc-gui/components/cell/RichText.vue
+++ b/packages/nc-gui/components/cell/RichText.vue
@ -172,7 +172,7 @@ watch(editorDom, () => {
    }"
    tabindex="0"
  >
-    <div v-if="props.showMenu" class="absolute top-0 right-0.5 xs:hidden">
+    <div v-if="props.showMenu && !props.readonly" class="absolute top-0 right-0.5 xs:hidden">
      <CellRichTextSelectedBubbleMenu v-if="editor" :editor="editor" embed-mode />
    </div>
    <CellRichTextSelectedBubbleMenuPopup v-if="editor" :editor="editor" />
@ -205,6 +205,7 @@ watch(editorDom, () => {
 .nc-rich-text-embed {
  .ProseMirror {
    @apply !border-transparent max-h-full;
+    min-height: 8rem;
  }
 }

@ -213,14 +214,14 @@ watch(editorDom, () => {
  .ProseMirror {
    @apply !p-2;

-    max-height: calc(min(60vh, 100rem));
-    min-height: 8rem;
+    max-height: min(794px, calc(100vh - 170px));
+    min-height: 215px;
  }
 }

 .nc-textarea-rich-editor {
  .ProseMirror {
-    @apply flex-grow pt-1 border-1 border-gray-200 rounded-lg pr-1 mr-2 h-[215px];
+    @apply flex-grow pt-1 border-1 border-gray-200 rounded-lg pr-1 mr-2;
    resize: vertical;
    > * {
      @apply ml-1;
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@ -86,7 +86,7 @@ onClickOutside(inputWrapperRef, (e) => {
 })

 const onTextClick = () => {
-  if (!props.virtual || readOnly?.value) return
+  if (!props.virtual) return

  isVisible.value = true
  editEnabled.value = true
@ -104,7 +104,6 @@ const isRichMode = computed(() => {
 })

 const onExpand = () => {
-  if (readOnly?.value) return
  isVisible.value = true
 }

@ -112,7 +111,6 @@ const onMouseMove = (e: MouseEvent) => {
  if (!isDragging.value) return

  e.stopPropagation()
-
  position.value = {
    top: e.clientY - 30,
    left: e.clientX - 120,
@ -151,6 +149,8 @@ watch(
 )

 const dragStart = () => {
+  if (isEditColumn.value) return
+
  document.addEventListener('mousemove', onMouseMove)
  document.addEventListener('mouseup', onMouseUp)

@ -162,6 +162,27 @@ watch(editEnabled, () => {
    isVisible.value = true
  }
 })
+
+const stopPropagation = (event: MouseEvent) => {
+  event.stopPropagation()
+}
+
+watch(inputWrapperRef, () => {
+  if (!isEditColumn.value) return
+
+  // stop event propogation in edit column
+  const modal = document.querySelector('.nc-long-text-expanded-modal') as HTMLElement
+
+  if (isVisible.value && modal?.parentElement) {
+    modal.parentElement.addEventListener('click', stopPropagation)
+    modal.parentElement.addEventListener('mousedown', stopPropagation)
+    modal.parentElement.addEventListener('mouseup', stopPropagation)
+  } else if (modal?.parentElement) {
+    modal.parentElement.removeEventListener('click', stopPropagation)
+    modal.parentElement.removeEventListener('mousedown', stopPropagation)
+    modal.parentElement.removeEventListener('mouseup', stopPropagation)
+  }
+})
 </script>

 <template>
@ -231,7 +252,7 @@ watch(editEnabled, () => {
      <span v-else>{{ vModel }}</span>

      <NcTooltip
-        v-if="!readOnly && !isVisible"
+        v-if="!isVisible"
        placement="bottom"
        class="!absolute right-0 hidden nc-text-area-expand-btn group-hover:block"
        :class="isExpandedFormOpen || isForm || isRichMode ? 'top-1' : 'bottom-1'"
@ -243,25 +264,30 @@ watch(editEnabled, () => {
      </NcTooltip>
    </div>
    <a-modal
-      v-if="isVisible"
      v-model:visible="isVisible"
      :closable="false"
      :footer="null"
-      wrap-class-name="nc-long-text-expanded-modal !z-1051"
+      wrap-class-name="nc-long-text-expanded-modal !z-1151"
+      :mask="true"
+      :mask-closable="false"
+      :mask-style="{ zIndex: 1051 }"
+      :z-index="1052"
+      :destroy-on-close="true"
    >
      <div
        v-if="isVisible"
        ref="inputWrapperRef"
-        class="flex flex-col min-h-70 max-h-[864px] py-3 expanded-cell-input relative"
+        class="flex flex-col py-3 w-full expanded-cell-input relative"
        :class="{
          'cursor-move': isDragging,
        }"
      >
        <div
          v-if="column"
-          class="flex flex-row gap-x-1 items-center font-medium pl-3 pb-2.5 border-b-1 border-gray-100 cursor-move"
+          class="flex flex-row gap-x-1 items-center font-medium pl-3 pb-2.5 border-b-1 border-gray-100"
          :class="{
            'select-none': isDragging,
+            'cursor-move': !isEditColumn,
          }"
          @mousedown="dragStart"
        >
@ -276,7 +302,7 @@ watch(editEnabled, () => {
          <a-textarea
            ref="inputRef"
            v-model:value="vModel"
-            class="nc-text-area-expanded p-1 !pt-1 !pr-3 !text-black !cursor-text h-[215px] !min-h-[215px] !rounded-lg focus:border-brand-500"
+            class="nc-text-area-expanded !py-1 !px-3 !text-black !cursor-text !min-h-[210px] !rounded-lg focus:border-brand-500"
            :placeholder="$t('activity.enterText')"
            :style="{ resize: 'vertical' }"
            :disabled="readOnly"
@ -285,7 +311,7 @@ watch(editEnabled, () => {
          />
        </div>

-        <LazyCellRichText v-else-if="isVisible" v-model:value="vModel" show-menu full-mode :read-only="readOnly" />
+        <LazyCellRichText v-else-if="isVisible" v-model:value="vModel" show-menu full-mode :readonly="readOnly" />
      </div>
    </a-modal>
  </div>
@ -296,12 +322,11 @@ textarea:focus {
  box-shadow: none;
 }
 .nc-text-area-expanded {
-  max-height: min(794px, 90vh);
+  max-height: min(794px, calc(100vh - 170px));
  scrollbar-width: thin !important;
-}
-.expanded-cell-input {
-  min-width: min(800px, 90vw);
-  max-width: min(1280px, 90vw);
+  &::-webkit-scrollbar-thumb {
+    @apply rounded-lg;
+  }
 }
 </style>

@ -313,18 +338,18 @@ textarea:focus {

 .nc-long-text-expanded-modal {
  .ant-modal {
-    width: 100% !important;
-    height: 100%;
-    top: 0;
-  }
-  .ant-modal-content {
-    position: absolute;
-    width: fit-content;
-    @apply !p-0;
-    left: 50%;
-    top: 50%;
-    /* Use 'transform' to center the div correctly */
-    transform: translate(-50%, -50%);
+    @apply !w-full h-full !top-0;
+
+    .ant-modal-content {
+      @apply absolute w-full min-h-70 !p-0 left-[50%] top-[50%];
+
+      /* Use 'transform' to center the div correctly */
+      transform: translate(-50%, -50%);
+
+      min-width: min(800px, calc(100vw - 100px));
+      max-width: min(1280px, calc(100vw - 100px));
+      max-height: min(864px, calc(100vh - 100px));
+    }
  }
 }
 </style>
--- a/packages/nc-gui/components/smartsheet/column/RichLongTextDefaultValue.vue
+++ b/packages/nc-gui/components/smartsheet/column/RichLongTextDefaultValue.vue
@ -18,7 +18,9 @@ const cdfValue = computed({
  <div>
    <div class="!my-3 text-xs">{{ $t('placeholder.defaultValue') }}</div>
    <div class="flex flex-row gap-2">
-      <div class="border-1 relative pt-11 flex items-center w-full px-0 border-gray-300 rounded-md max-h-70 pb-1">
+      <div
+        class="border-1 relative pt-11 flex items-center w-full px-0 border-gray-300 rounded-md max-h-70 pb-1 focus-within:border-brand-500"
+      >
        <LazyCellRichText v-model:value="cdfValue" class="border-t-1 border-gray-100 !max-h-80 !min-h-30" show-menu />
      </div>
    </div>