From 3b0b44afb67b75de4891371bcb9c7dc599746f9c Mon Sep 17 00:00:00 2001
From: elvus <lvssgv@gmail.com>
Date: Sat, 10 Sep 2022 13:14:14 -0400
Subject: [PATCH 1/7] feat(nc-gui): implement multi-select rows and copy paste

---
 .../nc-gui/components/smartsheet/Grid.vue     | 107 +++++++++++++++++-
 1 file changed, 103 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index ef6bd814b9..15ff7a68c7 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -62,8 +62,11 @@ const router = useRouter()
 const isView = false
 
 const selected = reactive<{ row: number | null; col: number | null }>({ row: null, col: null })
+const selectedRows = reactive<{ startcol: number | null; endcol: number | null; startrow: number | null; endrow: number | null }>({ startcol: null, endcol: null, startrow: null, endrow: null })
+const rangerows = reactive<{ minrow: number | null; maxrow: number | null; mincol: number | null; maxcol: number | null }>({ mincol: null, maxcol: null, minrow: null, maxrow: null })
 
 let editEnabled = $ref(false)
+let isSelectedBlock = $ref(false)
 
 const { xWhere, isPkAvail, cellRefs, isSqlView } = useSmartsheetStoreOrThrow()
 
@@ -158,10 +161,65 @@ openNewRecordFormHook?.on(async () => {
 })
 
 const selectCell = (row: number, col: number) => {
+  clearRangeRows()
   selected.row = row
   selected.col = col
 }
 
+const selectBlock = (row: number, col: number) => {
+  if (selected.col === null || selected.row === null) {
+    if(isSelectedBlock){
+      selectedRows.endcol = col;
+      selectedRows.endrow = row;
+    }
+  }else if(selected.col !== col || selected.row !== row){
+    if(isSelectedBlock){
+      selected.col = null;
+      selected.row = null;
+      selectedRows.endcol = col;
+      selectedRows.endrow = row;
+    }
+  }
+}
+
+const selectedRange = (row: number, col: number)=>{
+  if(selectedRows.startrow !== null && selectedRows.startcol !== null && selectedRows.endrow !== null && selectedRows.endcol !== null){
+    rangerows.minrow=selectedRows.startrow > selectedRows.endrow ? selectedRows.endrow : selectedRows.startrow,
+    rangerows.maxrow=selectedRows.startrow < selectedRows.endrow ? selectedRows.endrow : selectedRows.startrow,
+    rangerows.mincol=selectedRows.startcol > selectedRows.endcol ? selectedRows.endcol : selectedRows.startcol,
+    rangerows.maxcol=selectedRows.startcol < selectedRows.endcol ? selectedRows.endcol : selectedRows.startcol
+    return (col>=rangerows.mincol && col<=rangerows.maxcol) && (row>=rangerows.minrow && row<=rangerows.maxrow);
+  }else{
+    return false
+  }
+}
+
+const startSelectRange = (event: MouseEvent, row: number, col: number)=>{
+  if(editEnabled && (selected.col !== col || selected.row !== row)){
+    event.preventDefault();
+  }else if(!editEnabled){
+    event.preventDefault();
+  }
+  selectedRows.startcol = null;
+  selectedRows.endcol = null;
+  selectedRows.startrow = null;
+  selectedRows.endrow = null;
+  selectedRows.startcol = col;
+  selectedRows.startrow = row;
+  isSelectedBlock = true
+}
+
+const clearRangeRows = ()=>{
+  rangerows.mincol = null
+  rangerows.maxcol = null
+  rangerows.minrow = null
+  rangerows.maxrow = null
+  selectedRows.startrow = null
+  selectedRows.startcol = null
+  selectedRows.endrow = null
+  selectedRows.endcol = null
+}
+
 watch(
   () => view.value?.id,
   async (next, old) => {
@@ -233,11 +291,20 @@ const onKeyDown = async (e: KeyboardEvent) => {
     disableUrlOverlay.value = true
     return
   }
+
   if (selected.row === null || selected.col === null) return
+
+  if(selectedRows.startrow !== null && selectedRows.startcol !== null && selectedRows.endrow !== null && selectedRows.endcol !== null){
+    selected.row = selectedRows.startrow
+    selected.col = selectedRows.startcol
+  }
+
+
   /** on tab key press navigate through cells */
   switch (e.key) {
     case 'Tab':
       e.preventDefault()
+      clearRangeRows()
       if (e.shiftKey) {
         if (selected.col > 0) {
           selected.col--
@@ -257,42 +324,65 @@ const onKeyDown = async (e: KeyboardEvent) => {
     /** on enter key press make cell editable */
     case 'Enter':
       e.preventDefault()
+      clearRangeRows()
       makeEditable(data.value[selected.row], fields.value[selected.col])
       break
     /** on delete key press clear cell */
     case 'Delete':
       if (!editEnabled) {
         e.preventDefault()
+        clearRangeRows()
         await clearCell(selected as { row: number; col: number })
       }
       break
     /** on arrow key press navigate through cells */
     case 'ArrowRight':
       e.preventDefault()
+      clearRangeRows()
       if (selected.col < visibleColLength - 1) selected.col++
       break
     case 'ArrowLeft':
+      clearRangeRows()
       e.preventDefault()
+      clearRangeRows()
       if (selected.col > 0) selected.col--
       break
     case 'ArrowUp':
+      clearRangeRows()
       e.preventDefault()
+      clearRangeRows()
       if (selected.row > 0) selected.row--
       break
     case 'ArrowDown':
+      clearRangeRows()
       e.preventDefault()
+      clearRangeRows()
       if (selected.row < data.value.length - 1) selected.row++
       break
     default:
       {
         const rowObj = data.value[selected.row]
         const columnObj = fields.value[selected.col]
+        let cptext = "";
+        if(rangerows.minrow !== null && rangerows.maxrow !== null && rangerows.mincol !== null && rangerows.maxcol !== null){
+          const cprows = data.value.slice(rangerows.minrow, rangerows.maxrow+1);
+          const cpcols = fields.value.slice(rangerows.mincol, rangerows.maxcol+1);
+          cprows.forEach((row : any)=>{
+            cpcols.forEach((col : any)=>{
+              cptext = cptext + row.row[col.title]+'\t';
+            })
+            cptext = cptext.trim()+'\n'
+          })
+          cptext.trim()
+        }else{
+          cptext = rowObj.row[columnObj.title] || ''
+        }
 
         if ((!editEnabled && e.metaKey) || e.ctrlKey) {
           switch (e.keyCode) {
             // copy - ctrl/cmd +c
             case 67:
-              await copy(rowObj.row[columnObj.title] || '')
+              await copy(cptext)
               break
           }
         }
@@ -324,16 +414,23 @@ const onKeyUp = async (e: KeyboardEvent) => {
 
 useEventListener(document, 'keydown', onKeyDown)
 useEventListener(document, 'keyup', onKeyUp)
+useEventListener(document, 'mouseup', (e: MouseEvent)=>{
+  if(!editEnabled){
+    e.preventDefault()
+  }
+  isSelectedBlock = false
+})
+
 
 /** On clicking outside of table reset active cell  */
 const smartTable = ref(null)
 onClickOutside(smartTable, () => {
+  clearRangeRows()
   if (selected.col === null) return
 
   const activeCol = fields.value[selected.col]
 
   if (editEnabled && (isVirtualCol(activeCol) || activeCol.uidt === UITypes.JSON)) return
-
   selected.row = null
   selected.col = null
 })
@@ -499,7 +596,7 @@ reloadViewDataHook.trigger()
               </th>
             </tr>
           </thead>
-          <tbody>
+          <tbody v-on:selectstart.prevent>
             <LazySmartsheetRow v-for="(row, rowIndex) of data" ref="rowRefs" :key="rowIndex" :row="row">
               <template #default="{ state }">
                 <tr class="nc-grid-row">
@@ -548,13 +645,15 @@ reloadViewDataHook.trigger()
                     :key="columnObj.id"
                     class="cell relative cursor-pointer nc-grid-cell"
                     :class="{
-                      active: isUIAllowed('xcDatatableEditable') && selected.col === colIndex && selected.row === rowIndex,
+                      active: isUIAllowed('xcDatatableEditable') && selected.col === colIndex && selected.row === rowIndex || isUIAllowed('xcDatatableEditable') && selectedRange(rowIndex, colIndex),
                     }"
                     :data-key="rowIndex + columnObj.id"
                     :data-col="columnObj.id"
                     :data-title="columnObj.title"
                     @click="selectCell(rowIndex, colIndex)"
                     @dblclick="makeEditable(row, columnObj)"
+                    @mousedown="startSelectRange($event, rowIndex, colIndex)"
+                    @mouseover="selectBlock(rowIndex, colIndex)"
                     @contextmenu="showContextMenu($event, { row: rowIndex, col: colIndex })"
                   >
                     <div class="w-full h-full">

From 61c42da3ef0cc769887912b25b49c089dc77eaf0 Mon Sep 17 00:00:00 2001
From: elvus <lvssgv@gmail.com>
Date: Tue, 13 Sep 2022 20:24:30 -0400
Subject: [PATCH 2/7] chore(nc-gui): add comments

---
 .../nc-gui/components/smartsheet/Grid.vue     | 96 +++++++++++--------
 1 file changed, 56 insertions(+), 40 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 15ff7a68c7..482a5efd1b 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -62,11 +62,11 @@ const router = useRouter()
 const isView = false
 
 const selected = reactive<{ row: number | null; col: number | null }>({ row: null, col: null })
-const selectedRows = reactive<{ startcol: number | null; endcol: number | null; startrow: number | null; endrow: number | null }>({ startcol: null, endcol: null, startrow: null, endrow: null })
-const rangerows = reactive<{ minrow: number | null; maxrow: number | null; mincol: number | null; maxcol: number | null }>({ mincol: null, maxcol: null, minrow: null, maxrow: null })
+const selectedRows = reactive({ startCol: NaN, endCol: NaN, startRow: NaN, endRow: NaN }) //save the first and the last column where the mouse is down while the value isSelectedRow is true
+const rangeRows = reactive({ minRow: NaN, maxRow: NaN, minCol: NaN, maxCol: NaN }) // calculate the min and the max column where the mouse is down while the value isSelectedRow is true
 
 let editEnabled = $ref(false)
-let isSelectedBlock = $ref(false)
+let isSelectedBlock = $ref(false) //check if mouse is down or up false=mouseup and true=mousedown
 
 const { xWhere, isPkAvail, cellRefs, isSqlView } = useSmartsheetStoreOrThrow()
 
@@ -167,57 +167,70 @@ const selectCell = (row: number, col: number) => {
 }
 
 const selectBlock = (row: number, col: number) => {
+  // if selected.col and selected.row are null and isSelectedBlock is true thats mean you are select a block
   if (selected.col === null || selected.row === null) {
     if(isSelectedBlock){
-      selectedRows.endcol = col;
-      selectedRows.endrow = row;
+      //save the next value after the selectionStart
+      selectedRows.endCol = col;
+      selectedRows.endRow = row;
     }
   }else if(selected.col !== col || selected.row !== row){
+     // if selected.col and selected.row is not null but the selected col and row is not equal at the row and col where the mouse is clicking
+     //and isSelectedBlock is true thats mean you are select a block
     if(isSelectedBlock){
       selected.col = null;
       selected.row = null;
-      selectedRows.endcol = col;
-      selectedRows.endrow = row;
+      //save the next value after the selectionStart
+      selectedRows.endCol = col;
+      selectedRows.endRow = row;
     }
   }
 }
 
 const selectedRange = (row: number, col: number)=>{
-  if(selectedRows.startrow !== null && selectedRows.startcol !== null && selectedRows.endrow !== null && selectedRows.endcol !== null){
-    rangerows.minrow=selectedRows.startrow > selectedRows.endrow ? selectedRows.endrow : selectedRows.startrow,
-    rangerows.maxrow=selectedRows.startrow < selectedRows.endrow ? selectedRows.endrow : selectedRows.startrow,
-    rangerows.mincol=selectedRows.startcol > selectedRows.endcol ? selectedRows.endcol : selectedRows.startcol,
-    rangerows.maxcol=selectedRows.startcol < selectedRows.endcol ? selectedRows.endcol : selectedRows.startcol
-    return (col>=rangerows.mincol && col<=rangerows.maxcol) && (row>=rangerows.minrow && row<=rangerows.maxrow);
+  if(!isNaN(selectedRows.startRow) && !isNaN(selectedRows.startCol) && !isNaN(selectedRows.endRow) && !isNaN(selectedRows.endCol)){
+    //for know if the selection is up o down
+    rangeRows.minRow=Math.min(selectedRows.startRow, selectedRows.endRow),
+    rangeRows.maxRow=Math.max(selectedRows.startRow, selectedRows.endRow),
+    rangeRows.minCol=Math.min(selectedRows.startCol, selectedRows.endCol),
+    rangeRows.maxCol=Math.max(selectedRows.startCol, selectedRows.endCol)
+    //return if the column is in bettwen the selection
+    return (col>=rangeRows.minCol && col<=rangeRows.maxCol) && (row>=rangeRows.minRow && row<=rangeRows.maxRow);
   }else{
     return false
   }
 }
 
 const startSelectRange = (event: MouseEvent, row: number, col: number)=>{
+  //if editEnabled but the selected col or the selected row is not equal like the actual row or col, enabled selected multiple rows
   if(editEnabled && (selected.col !== col || selected.row !== row)){
     event.preventDefault();
   }else if(!editEnabled){
+    //if editEnabled is not true, enabled selected multiple rows
     event.preventDefault();
   }
-  selectedRows.startcol = null;
-  selectedRows.endcol = null;
-  selectedRows.startrow = null;
-  selectedRows.endrow = null;
-  selectedRows.startcol = col;
-  selectedRows.startrow = row;
+  //clear the selection when the mouse is down
+  selectedRows.startCol = NaN
+  selectedRows.endCol = NaN
+  selectedRows.startRow = NaN
+  selectedRows.endRow = NaN
+  //asing where the selection start
+  selectedRows.startCol = col
+  selectedRows.startRow = row
   isSelectedBlock = true
 }
 
 const clearRangeRows = ()=>{
-  rangerows.mincol = null
-  rangerows.maxcol = null
-  rangerows.minrow = null
-  rangerows.maxrow = null
-  selectedRows.startrow = null
-  selectedRows.startcol = null
-  selectedRows.endrow = null
-  selectedRows.endcol = null
+  //when the selection starts or ends or when enter/arrow/tab is pressed
+  //this clear the previous selection
+  rangeRows.minCol = NaN
+  rangeRows.maxCol = NaN
+  rangeRows.minRow = NaN
+  rangeRows.maxRow = NaN
+  selectedRows.startRow = NaN
+  selectedRows.startCol = NaN
+  selectedRows.endRow = NaN
+  selectedRows.endCol = NaN
 }
 
 watch(
@@ -294,9 +307,10 @@ const onKeyDown = async (e: KeyboardEvent) => {
 
   if (selected.row === null || selected.col === null) return
 
-  if(selectedRows.startrow !== null && selectedRows.startcol !== null && selectedRows.endrow !== null && selectedRows.endcol !== null){
-    selected.row = selectedRows.startrow
-    selected.col = selectedRows.startcol
+  if(!isNaN(selectedRows.startRow) && !isNaN(selectedRows.startCol) && !isNaN(selectedRows.endRow) && !isNaN(selectedRows.endCol)){
+    //In case the user press tabs or arrows keys
+    selected.row = selectedRows.startRow
+    selected.col = selectedRows.startCol
   }
 
 
@@ -363,15 +377,15 @@ const onKeyDown = async (e: KeyboardEvent) => {
       {
         const rowObj = data.value[selected.row]
         const columnObj = fields.value[selected.col]
-        let cptext = "";
-        if(rangerows.minrow !== null && rangerows.maxrow !== null && rangerows.mincol !== null && rangerows.maxcol !== null){
-          const cprows = data.value.slice(rangerows.minrow, rangerows.maxrow+1);
-          const cpcols = fields.value.slice(rangerows.mincol, rangerows.maxcol+1);
-          cprows.forEach((row : any)=>{
-            cpcols.forEach((col : any)=>{
-              cptext = cptext + row.row[col.title]+'\t';
+        let cptext = '' //variable for save the text to be copy
+        if(!isNaN(rangeRows.minRow) && !isNaN(rangeRows.maxRow) && !isNaN(rangeRows.minCol) && !isNaN(rangeRows.maxCol)){
+          const cprows = data.value.slice(rangeRows.minRow, rangeRows.maxRow+1) //slice the the selected rows for copy
+          const cpcols = fields.value.slice(rangeRows.minCol, rangeRows.maxCol+1) //slice the the selected cols for copy
+          cprows.forEach((row)=>{
+            cpcols.forEach((col)=>{
+              cptext = `${cptext} ${row.row[col.title]} \t`
             })
-            cptext = cptext.trim()+'\n'
+            cptext = `${cptext.trim()}\n`
           })
           cptext.trim()
         }else{
@@ -414,7 +428,8 @@ const onKeyUp = async (e: KeyboardEvent) => {
 
 useEventListener(document, 'keydown', onKeyDown)
 useEventListener(document, 'keyup', onKeyUp)
-useEventListener(document, 'mouseup', (e: MouseEvent)=>{
+useEventListener(document, 'mouseup', (e)=>{
+  //if the editEnabled is false prevent the mouseup event for not select text
   if(!editEnabled){
     e.preventDefault()
   }
@@ -596,7 +611,8 @@ reloadViewDataHook.trigger()
               </th>
             </tr>
           </thead>
-          <tbody v-on:selectstart.prevent>
+          <!--this prevent select text from field if not in edit mode-->
+          <tbody @selectstart.prevent>
             <LazySmartsheetRow v-for="(row, rowIndex) of data" ref="rowRefs" :key="rowIndex" :row="row">
               <template #default="{ state }">
                 <tr class="nc-grid-row">

From cde7a5234d994672cf2f560ef9b9c5abade5cf88 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 26 Sep 2022 14:31:52 +0200
Subject: [PATCH 3/7] feat(nc-gui): add `useMultiSelect` composable

---
 .../nc-gui/components/smartsheet/Grid.vue     | 243 ++--------------
 packages/nc-gui/composables/index.ts          |   0
 .../composables/useMultiSelect/index.ts       | 268 ++++++++++++++++++
 3 files changed, 291 insertions(+), 220 deletions(-)
 create mode 100644 packages/nc-gui/composables/index.ts
 create mode 100644 packages/nc-gui/composables/useMultiSelect/index.ts

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 482a5efd1b..5ec5235aeb 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -22,12 +22,11 @@ import {
   onClickOutside,
   onMounted,
   provide,
-  reactive,
   ref,
-  useCopy,
   useEventListener,
   useGridViewColumnWidth,
   useI18n,
+  useMultiSelect,
   useRoute,
   useSmartsheetStoreOrThrow,
   useUIPermission,
@@ -61,15 +60,12 @@ const router = useRouter()
 // todo: get from parent ( inject or use prop )
 const isView = false
 
-const selected = reactive<{ row: number | null; col: number | null }>({ row: null, col: null })
-const selectedRows = reactive({ startCol: NaN, endCol: NaN, startRow: NaN, endRow: NaN }) //save the first and the last column where the mouse is down while the value isSelectedRow is true
-const rangeRows = reactive({ minRow: NaN, maxRow: NaN, minCol: NaN, maxCol: NaN }) // calculate the min and the max column where the mouse is down while the value isSelectedRow is true
-
 let editEnabled = $ref(false)
-let isSelectedBlock = $ref(false) //check if mouse is down or up false=mouseup and true=mousedown
 
 const { xWhere, isPkAvail, cellRefs, isSqlView } = useSmartsheetStoreOrThrow()
 
+const visibleColLength = $computed(() => fields.value?.length)
+
 const addColumnDropdown = ref(false)
 
 const _contextMenu = ref(false)
@@ -87,8 +83,6 @@ const expandedFormDlg = ref(false)
 const expandedFormRow = ref<Row>()
 const expandedFormRowState = ref<Record<string, any>>()
 
-const visibleColLength = $computed(() => fields.value?.length)
-
 const {
   isLoading,
   loadData,
@@ -105,7 +99,14 @@ const {
 
 const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view)
 
-const { copy } = useCopy()
+const { selectCell, selectBlock, selectedRange, clearRangeRows, startSelectRange, selected } = useMultiSelect(
+  fields,
+  data,
+  editEnabled,
+  isPkAvail,
+  clearCell,
+  makeEditable,
+)
 
 onMounted(loadGridViewColumns)
 
@@ -160,79 +161,6 @@ openNewRecordFormHook?.on(async () => {
   expandForm(newRow, undefined, true)
 })
 
-const selectCell = (row: number, col: number) => {
-  clearRangeRows()
-  selected.row = row
-  selected.col = col
-}
-
-const selectBlock = (row: number, col: number) => {
-  // if selected.col and selected.row are null and isSelectedBlock is true thats mean you are select a block
-  if (selected.col === null || selected.row === null) {
-    if(isSelectedBlock){
-      //save the next value after the selectionStart
-      selectedRows.endCol = col;
-      selectedRows.endRow = row;
-    }
-  }else if(selected.col !== col || selected.row !== row){
-     // if selected.col and selected.row is not null but the selected col and row is not equal at the row and col where the mouse is clicking
-     //and isSelectedBlock is true thats mean you are select a block
-    if(isSelectedBlock){
-      selected.col = null;
-      selected.row = null;
-      //save the next value after the selectionStart
-      selectedRows.endCol = col;
-      selectedRows.endRow = row;
-    }
-  }
-}
-
-const selectedRange = (row: number, col: number)=>{
-  if(!isNaN(selectedRows.startRow) && !isNaN(selectedRows.startCol) && !isNaN(selectedRows.endRow) && !isNaN(selectedRows.endCol)){
-    //for know if the selection is up o down
-    rangeRows.minRow=Math.min(selectedRows.startRow, selectedRows.endRow),
-    rangeRows.maxRow=Math.max(selectedRows.startRow, selectedRows.endRow),
-    rangeRows.minCol=Math.min(selectedRows.startCol, selectedRows.endCol),
-    rangeRows.maxCol=Math.max(selectedRows.startCol, selectedRows.endCol)
-    //return if the column is in bettwen the selection
-    return (col>=rangeRows.minCol && col<=rangeRows.maxCol) && (row>=rangeRows.minRow && row<=rangeRows.maxRow);
-  }else{
-    return false
-  }
-}
-
-const startSelectRange = (event: MouseEvent, row: number, col: number)=>{
-  //if editEnabled but the selected col or the selected row is not equal like the actual row or col, enabled selected multiple rows
-  if(editEnabled && (selected.col !== col || selected.row !== row)){
-    event.preventDefault();
-  }else if(!editEnabled){
-    //if editEnabled is not true, enabled selected multiple rows
-    event.preventDefault();
-  }
-  //clear the selection when the mouse is down
-  selectedRows.startCol = NaN
-  selectedRows.endCol = NaN
-  selectedRows.startRow = NaN
-  selectedRows.endRow = NaN
-  //asing where the selection start
-  selectedRows.startCol = col
-  selectedRows.startRow = row
-  isSelectedBlock = true
-}
-
-const clearRangeRows = ()=>{
-  //when the selection starts or ends or when enter/arrow/tab is pressed
-  //this clear the previous selection
-  rangeRows.minCol = NaN
-  rangeRows.maxCol = NaN
-  rangeRows.minRow = NaN
-  rangeRows.maxRow = NaN
-  selectedRows.startRow = NaN
-  selectedRows.startCol = NaN
-  selectedRows.endRow = NaN
-  selectedRows.endCol = NaN
-}
-
 watch(
   () => view.value?.id,
   async (next, old) => {
@@ -263,7 +191,7 @@ watch(contextMenu, () => {
   }
 })
 
-const clearCell = async (ctx: { row: number; col: number }) => {
+async function clearCell(ctx: { row: number; col: number }) {
   const rowObj = data.value[ctx.row]
   const columnObj = fields.value[ctx.col]
 
@@ -276,169 +204,42 @@ const clearCell = async (ctx: { row: number; col: number }) => {
   await updateOrSaveRow(rowObj, columnObj.title)
 }
 
-const makeEditable = (row: Row, col: ColumnType) => {
+function makeEditable(row: Row, col: ColumnType) {
   if (!hasEditPermission || editEnabled || isView) {
     return
   }
+
   if (!isPkAvail.value && !row.rowMeta.new) {
     // Update not allowed for table which doesn't have primary Key
     message.info(t('msg.info.updateNotAllowedWithoutPK'))
     return
   }
+
   if (col.ai) {
     // Auto Increment field is not editable
     message.info(t('msg.info.autoIncFieldNotEditable'))
     return
   }
+
   if (col.pk && !row.rowMeta.new) {
     // Editing primary key not supported
     message.info(t('msg.info.editingPKnotSupported'))
     return
   }
+
   return (editEnabled = true)
 }
 
 /** handle keypress events */
-const onKeyDown = async (e: KeyboardEvent) => {
-  if (e.key === 'Alt') {
-    disableUrlOverlay.value = true
-    return
-  }
-
-  if (selected.row === null || selected.col === null) return
-
-  if(!isNaN(selectedRows.startRow) && !isNaN(selectedRows.startCol) && !isNaN(selectedRows.endRow) && !isNaN(selectedRows.endCol)){
-    //In case the user press tabs or arrows keys
-    selected.row = selectedRows.startRow
-    selected.col = selectedRows.startCol
-  }
-
-
-  /** on tab key press navigate through cells */
-  switch (e.key) {
-    case 'Tab':
-      e.preventDefault()
-      clearRangeRows()
-      if (e.shiftKey) {
-        if (selected.col > 0) {
-          selected.col--
-        } else if (selected.row > 0) {
-          selected.row--
-          selected.col = visibleColLength - 1
-        }
-      } else {
-        if (selected.col < visibleColLength - 1) {
-          selected.col++
-        } else if (selected.row < data.value.length - 1) {
-          selected.row++
-          selected.col = 0
-        }
-      }
-      break
-    /** on enter key press make cell editable */
-    case 'Enter':
-      e.preventDefault()
-      clearRangeRows()
-      makeEditable(data.value[selected.row], fields.value[selected.col])
-      break
-    /** on delete key press clear cell */
-    case 'Delete':
-      if (!editEnabled) {
-        e.preventDefault()
-        clearRangeRows()
-        await clearCell(selected as { row: number; col: number })
-      }
-      break
-    /** on arrow key press navigate through cells */
-    case 'ArrowRight':
-      e.preventDefault()
-      clearRangeRows()
-      if (selected.col < visibleColLength - 1) selected.col++
-      break
-    case 'ArrowLeft':
-      clearRangeRows()
-      e.preventDefault()
-      clearRangeRows()
-      if (selected.col > 0) selected.col--
-      break
-    case 'ArrowUp':
-      clearRangeRows()
-      e.preventDefault()
-      clearRangeRows()
-      if (selected.row > 0) selected.row--
-      break
-    case 'ArrowDown':
-      clearRangeRows()
-      e.preventDefault()
-      clearRangeRows()
-      if (selected.row < data.value.length - 1) selected.row++
-      break
-    default:
-      {
-        const rowObj = data.value[selected.row]
-        const columnObj = fields.value[selected.col]
-        let cptext = '' //variable for save the text to be copy
-        if(!isNaN(rangeRows.minRow) && !isNaN(rangeRows.maxRow) && !isNaN(rangeRows.minCol) && !isNaN(rangeRows.maxCol)){
-          const cprows = data.value.slice(rangeRows.minRow, rangeRows.maxRow+1) //slice the the selected rows for copy
-          const cpcols = fields.value.slice(rangeRows.minCol, rangeRows.maxCol+1) //slice the the selected cols for copy
-          cprows.forEach((row)=>{
-            cpcols.forEach((col)=>{
-              cptext = `${cptext} ${row.row[col.title]} \t`
-            })
-            cptext = `${cptext.trim()}\n`
-          })
-          cptext.trim()
-        }else{
-          cptext = rowObj.row[columnObj.title] || ''
-        }
-
-        if ((!editEnabled && e.metaKey) || e.ctrlKey) {
-          switch (e.keyCode) {
-            // copy - ctrl/cmd +c
-            case 67:
-              await copy(cptext)
-              break
-          }
-        }
-
-        if (editEnabled || e.ctrlKey || e.altKey || e.metaKey) {
-          return
-        }
-
-        /** on letter key press make cell editable and empty */
-        if (e?.key?.length === 1) {
-          if (!isPkAvail && !rowObj.rowMeta.new) {
-            // Update not allowed for table which doesn't have primary Key
-            return message.info(t('msg.info.updateNotAllowedWithoutPK'))
-          }
-          if (makeEditable(rowObj, columnObj)) {
-            rowObj.row[columnObj.title] = ''
-          }
-          // editEnabled = true
-        }
-      }
-      break
-  }
-}
-const onKeyUp = async (e: KeyboardEvent) => {
+useEventListener(document, 'keyup', async (e: KeyboardEvent) => {
   if (e.key === 'Alt') {
     disableUrlOverlay.value = false
   }
-}
-
-useEventListener(document, 'keydown', onKeyDown)
-useEventListener(document, 'keyup', onKeyUp)
-useEventListener(document, 'mouseup', (e)=>{
-  //if the editEnabled is false prevent the mouseup event for not select text
-  if(!editEnabled){
-    e.preventDefault()
-  }
-  isSelectedBlock = false
 })
 
-
 /** On clicking outside of table reset active cell  */
 const smartTable = ref(null)
+
 onClickOutside(smartTable, () => {
   clearRangeRows()
   if (selected.col === null) return
@@ -611,7 +412,7 @@ reloadViewDataHook.trigger()
               </th>
             </tr>
           </thead>
-          <!--this prevent select text from field if not in edit mode-->
+          <!-- this prevent select text from field if not in edit mode -->
           <tbody @selectstart.prevent>
             <LazySmartsheetRow v-for="(row, rowIndex) of data" ref="rowRefs" :key="rowIndex" :row="row">
               <template #default="{ state }">
@@ -661,7 +462,9 @@ reloadViewDataHook.trigger()
                     :key="columnObj.id"
                     class="cell relative cursor-pointer nc-grid-cell"
                     :class="{
-                      active: isUIAllowed('xcDatatableEditable') && selected.col === colIndex && selected.row === rowIndex || isUIAllowed('xcDatatableEditable') && selectedRange(rowIndex, colIndex),
+                      active:
+                        (isUIAllowed('xcDatatableEditable') && selected.col === colIndex && selected.row === rowIndex) ||
+                        (isUIAllowed('xcDatatableEditable') && selectedRange(rowIndex, colIndex)),
                     }"
                     :data-key="rowIndex + columnObj.id"
                     :data-col="columnObj.id"
diff --git a/packages/nc-gui/composables/index.ts b/packages/nc-gui/composables/index.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/nc-gui/composables/useMultiSelect/index.ts b/packages/nc-gui/composables/useMultiSelect/index.ts
new file mode 100644
index 0000000000..a3bfd9a13d
--- /dev/null
+++ b/packages/nc-gui/composables/useMultiSelect/index.ts
@@ -0,0 +1,268 @@
+import type { MaybeRef } from '@vueuse/core'
+import { message } from 'ant-design-vue'
+import { reactive, unref, useCopy, useEventListener, useI18n } from '#imports'
+
+interface SelectedBlock {
+  row: number | null
+  col: number | null
+}
+
+/**
+ * Utility to help with multi-selecting rows/cells in the smartsheet
+ */
+export function useMultiSelect(
+  fields: MaybeRef<any[]>,
+  data: MaybeRef<any[]>,
+  editEnabled: MaybeRef<boolean>,
+  isPkAvail: MaybeRef<boolean>,
+  clearCell: Function,
+  makeEditable: Function,
+) {
+  const { t } = useI18n()
+
+  const { copy } = useCopy()
+
+  const selected = reactive<SelectedBlock>({ row: null, col: null })
+
+  // save the first and the last column where the mouse is down while the value isSelectedRow is true
+  const selectedRows = reactive({ startCol: NaN, endCol: NaN, startRow: NaN, endRow: NaN })
+
+  // calculate the min and the max column where the mouse is down while the value isSelectedRow is true
+  const rangeRows = reactive({ minRow: NaN, maxRow: NaN, minCol: NaN, maxCol: NaN })
+
+  // check if mouse is down or up false=mouseup and true=mousedown
+  let isSelectedBlock = $ref(false)
+
+  const columnLength = $computed(() => unref(fields)?.length)
+
+  function selectCell(row: number, col: number) {
+    clearRangeRows()
+    selected.row = row
+    selected.col = col
+  }
+
+  function selectBlock(row: number, col: number) {
+    // if selected.col and selected.row are null and isSelectedBlock is true that means you are selecting a block
+    if (selected.col === null || selected.row === null) {
+      if (isSelectedBlock) {
+        // save the next value after the selectionStart
+        selectedRows.endCol = col
+        selectedRows.endRow = row
+      }
+    } else if (selected.col !== col || selected.row !== row) {
+      // if selected.col and selected.row is not null but the selected col and row is not equal at the row and col where the mouse is clicking
+      // and isSelectedBlock is true that means you are selecting a block
+      if (isSelectedBlock) {
+        selected.col = null
+        selected.row = null
+        // save the next value after the selectionStart
+        selectedRows.endCol = col
+        selectedRows.endRow = row
+      }
+    }
+  }
+
+  function selectedRange(row: number, col: number) {
+    if (
+      !isNaN(selectedRows.startRow) &&
+      !isNaN(selectedRows.startCol) &&
+      !isNaN(selectedRows.endRow) &&
+      !isNaN(selectedRows.endCol)
+    ) {
+      // check if column selection is up or down
+      rangeRows.minRow = Math.min(selectedRows.startRow, selectedRows.endRow)
+      rangeRows.maxRow = Math.max(selectedRows.startRow, selectedRows.endRow)
+      rangeRows.minCol = Math.min(selectedRows.startCol, selectedRows.endCol)
+      rangeRows.maxCol = Math.max(selectedRows.startCol, selectedRows.endCol)
+
+      // return if the column is in between the selection
+      return col >= rangeRows.minCol && col <= rangeRows.maxCol && row >= rangeRows.minRow && row <= rangeRows.maxRow
+    } else {
+      return false
+    }
+  }
+
+  function startSelectRange(event: MouseEvent, row: number, col: number) {
+    // if editEnabled but the selected col or the selected row is not equal like the actual row or col, enabled selected multiple rows
+    if (unref(editEnabled) && (selected.col !== col || selected.row !== row)) {
+      event.preventDefault()
+    } else if (!unref(editEnabled)) {
+      // if editEnabled is not true, enabled selected multiple rows
+      event.preventDefault()
+    }
+
+    // clear the selection when the mouse is down
+    selectedRows.startCol = NaN
+    selectedRows.endCol = NaN
+    selectedRows.startRow = NaN
+    selectedRows.endRow = NaN
+    // asing where the selection start
+    selectedRows.startCol = col
+    selectedRows.startRow = row
+    isSelectedBlock = true
+  }
+
+  function clearRangeRows() {
+    // when the selection starts or ends or when enter/arrow/tab is pressed
+    // this clear the previous selection
+    rangeRows.minCol = NaN
+    rangeRows.maxCol = NaN
+    rangeRows.minRow = NaN
+    rangeRows.maxRow = NaN
+    selectedRows.startRow = NaN
+    selectedRows.startCol = NaN
+    selectedRows.endRow = NaN
+    selectedRows.endCol = NaN
+  }
+
+  useEventListener(document, 'mouseup', (e) => {
+    // if the editEnabled is false prevent the mouseup event for not select text
+    if (!unref(editEnabled)) {
+      e.preventDefault()
+    }
+
+    isSelectedBlock = false
+  })
+
+  const onKeyDown = async (e: KeyboardEvent) => {
+    if (selected.row === null || selected.col === null) return
+
+    if (
+      !isNaN(selectedRows.startRow) &&
+      !isNaN(selectedRows.startCol) &&
+      !isNaN(selectedRows.endRow) &&
+      !isNaN(selectedRows.endCol)
+    ) {
+      // In case the user press tabs or arrows keys
+      selected.row = selectedRows.startRow
+      selected.col = selectedRows.startCol
+    }
+
+    /** on tab key press navigate through cells */
+    switch (e.key) {
+      case 'Tab':
+        e.preventDefault()
+        clearRangeRows()
+
+        if (e.shiftKey) {
+          if (selected.col > 0) {
+            selected.col--
+          } else if (selected.row > 0) {
+            selected.row--
+            selected.col = unref(columnLength) - 1
+          }
+        } else {
+          if (selected.col < unref(columnLength) - 1) {
+            selected.col++
+          } else if (selected.row < unref(data).length - 1) {
+            selected.row++
+            selected.col = 0
+          }
+        }
+        break
+      /** on enter key press make cell editable */
+      case 'Enter':
+        e.preventDefault()
+        clearRangeRows()
+        makeEditable(unref(data)[selected.row], unref(fields)[selected.col])
+        break
+      /** on delete key press clear cell */
+      case 'Delete':
+        if (!editEnabled) {
+          e.preventDefault()
+          clearRangeRows()
+          await clearCell(selected as { row: number; col: number })
+        }
+        break
+      /** on arrow key press navigate through cells */
+      case 'ArrowRight':
+        e.preventDefault()
+        clearRangeRows()
+        if (selected.col < unref(columnLength) - 1) selected.col++
+        break
+      case 'ArrowLeft':
+        clearRangeRows()
+        e.preventDefault()
+        clearRangeRows()
+        if (selected.col > 0) selected.col--
+        break
+      case 'ArrowUp':
+        clearRangeRows()
+        e.preventDefault()
+        clearRangeRows()
+        if (selected.row > 0) selected.row--
+        break
+      case 'ArrowDown':
+        clearRangeRows()
+        e.preventDefault()
+        clearRangeRows()
+        if (selected.row < unref(data).length - 1) selected.row++
+        break
+      default:
+        {
+          const rowObj = unref(data)[selected.row]
+
+          const columnObj = unref(fields)[selected.col]
+
+          let cptext = '' // variable for save the text to be copy
+
+          if (!isNaN(rangeRows.minRow) && !isNaN(rangeRows.maxRow) && !isNaN(rangeRows.minCol) && !isNaN(rangeRows.maxCol)) {
+            const cprows = unref(data).slice(rangeRows.minRow, rangeRows.maxRow + 1) // slice the selected rows for copy
+
+            const cpcols = unref(fields).slice(rangeRows.minCol, rangeRows.maxCol + 1) // slice the selected cols for copy
+
+            cprows.forEach((row) => {
+              cpcols.forEach((col) => {
+                cptext = `${cptext} ${row.row[col.title]} \t`
+              })
+
+              cptext = `${cptext.trim()}\n`
+            })
+
+            cptext.trim()
+          } else {
+            cptext = rowObj.row[columnObj.title] || ''
+          }
+
+          if ((!editEnabled && e.metaKey) || e.ctrlKey) {
+            switch (e.keyCode) {
+              // copy - ctrl/cmd +c
+              case 67:
+                await copy(cptext)
+                break
+            }
+          }
+
+          if (editEnabled || e.ctrlKey || e.altKey || e.metaKey) {
+            return
+          }
+
+          /** on letter key press make cell editable and empty */
+          if (e.key.length === 1) {
+            if (!unref(isPkAvail) && !rowObj.rowMeta.new) {
+              // Update not allowed for table which doesn't have primary Key
+              return message.info(t('msg.info.updateNotAllowedWithoutPK'))
+            }
+            if (makeEditable(rowObj, columnObj)) {
+              rowObj.row[columnObj.title] = ''
+            }
+            // editEnabled = true
+          }
+        }
+        break
+    }
+  }
+
+  useEventListener(document, 'keydown', onKeyDown)
+
+  return {
+    selectCell,
+    selectBlock,
+    selectedRange,
+    clearRangeRows,
+    startSelectRange,
+    selected,
+    selectedRows,
+    rangeRows,
+  }
+}

From 5ac9f62acbe7a633eea6cc49b0b41ab80b4b1f82 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 26 Sep 2022 14:36:35 +0200
Subject: [PATCH 4/7] chore(nc-gui): lint

---
 .../nc-gui/components/smartsheet/toolbar/SharedViewList.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/SharedViewList.vue b/packages/nc-gui/components/smartsheet/toolbar/SharedViewList.vue
index f39e266a71..37b7146174 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SharedViewList.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SharedViewList.vue
@@ -129,9 +129,9 @@ const deleteLink = async (id: string) => {
         <template #default="{ record }">
           <div class="flex items-center items-center gap-1">
             <template v-if="record.password">
-              <span class="h-min max-w-[250px]">{{
-                record.showPassword ? record.password : Array(record.password.length + 1).join('*')
-              }}</span>
+              <span class="h-min max-w-[250px]">
+                {{ record.showPassword ? record.password : Array(record.password.length + 1).join('*') }}
+              </span>
               <component
                 :is="record.showPassword ? MdiVisibilityOffIcon : MdiVisibilityOnIcon"
                 @click="record.showPassword = !record.showPassword"

From f4132120fb53aadff7d3b3531e096252746cdf5a Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 26 Sep 2022 20:53:07 +0200
Subject: [PATCH 5/7] fix(nc-gui): condition order

---
 packages/nc-gui/composables/useMultiSelect/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/composables/useMultiSelect/index.ts b/packages/nc-gui/composables/useMultiSelect/index.ts
index a3bfd9a13d..6e6db8cbcd 100644
--- a/packages/nc-gui/composables/useMultiSelect/index.ts
+++ b/packages/nc-gui/composables/useMultiSelect/index.ts
@@ -125,8 +125,6 @@ export function useMultiSelect(
   })
 
   const onKeyDown = async (e: KeyboardEvent) => {
-    if (selected.row === null || selected.col === null) return
-
     if (
       !isNaN(selectedRows.startRow) &&
       !isNaN(selectedRows.startCol) &&
@@ -138,6 +136,8 @@ export function useMultiSelect(
       selected.col = selectedRows.startCol
     }
 
+    if (selected.row === null || selected.col === null) return
+
     /** on tab key press navigate through cells */
     switch (e.key) {
       case 'Tab':

From 81fd2771864f19a723c4680b0400b5b8faa848d9 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 26 Sep 2022 21:02:21 +0200
Subject: [PATCH 6/7] fix(nc-gui): pass editEnabled as ref

---
 packages/nc-gui/components/smartsheet/Grid.vue      | 2 +-
 packages/nc-gui/composables/index.ts                | 0
 packages/nc-gui/composables/useMultiSelect/index.ts | 6 +++---
 3 files changed, 4 insertions(+), 4 deletions(-)
 delete mode 100644 packages/nc-gui/composables/index.ts

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 5ec5235aeb..8e86d07c01 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -102,7 +102,7 @@ const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useG
 const { selectCell, selectBlock, selectedRange, clearRangeRows, startSelectRange, selected } = useMultiSelect(
   fields,
   data,
-  editEnabled,
+  $$(editEnabled),
   isPkAvail,
   clearCell,
   makeEditable,
diff --git a/packages/nc-gui/composables/index.ts b/packages/nc-gui/composables/index.ts
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/nc-gui/composables/useMultiSelect/index.ts b/packages/nc-gui/composables/useMultiSelect/index.ts
index 6e6db8cbcd..0315a57a8c 100644
--- a/packages/nc-gui/composables/useMultiSelect/index.ts
+++ b/packages/nc-gui/composables/useMultiSelect/index.ts
@@ -168,7 +168,7 @@ export function useMultiSelect(
         break
       /** on delete key press clear cell */
       case 'Delete':
-        if (!editEnabled) {
+        if (!unref(editEnabled)) {
           e.preventDefault()
           clearRangeRows()
           await clearCell(selected as { row: number; col: number })
@@ -224,7 +224,7 @@ export function useMultiSelect(
             cptext = rowObj.row[columnObj.title] || ''
           }
 
-          if ((!editEnabled && e.metaKey) || e.ctrlKey) {
+          if ((!unref(editEnabled) && e.metaKey) || e.ctrlKey) {
             switch (e.keyCode) {
               // copy - ctrl/cmd +c
               case 67:
@@ -233,7 +233,7 @@ export function useMultiSelect(
             }
           }
 
-          if (editEnabled || e.ctrlKey || e.altKey || e.metaKey) {
+          if (unref(editEnabled) || e.ctrlKey || e.altKey || e.metaKey) {
             return
           }
 

From 1450894266247eb3e25be6137953eb5f1c47b06d Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 28 Sep 2022 17:42:06 +0200
Subject: [PATCH 7/7] refactor(nc-gui): filter attachment and ltar cells from
 copy

---
 packages/nc-gui/composables/useMultiSelect/index.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/composables/useMultiSelect/index.ts b/packages/nc-gui/composables/useMultiSelect/index.ts
index 0315a57a8c..024e984294 100644
--- a/packages/nc-gui/composables/useMultiSelect/index.ts
+++ b/packages/nc-gui/composables/useMultiSelect/index.ts
@@ -1,6 +1,6 @@
 import type { MaybeRef } from '@vueuse/core'
-import { message } from 'ant-design-vue'
-import { reactive, unref, useCopy, useEventListener, useI18n } from '#imports'
+import { UITypes } from 'nocodb-sdk'
+import { message, reactive, unref, useCopy, useEventListener, useI18n } from '#imports'
 
 interface SelectedBlock {
   row: number | null
@@ -213,7 +213,11 @@ export function useMultiSelect(
 
             cprows.forEach((row) => {
               cpcols.forEach((col) => {
-                cptext = `${cptext} ${row.row[col.title]} \t`
+                // todo: JSON stringify the attachment cell and LTAR contents for copy
+                // filter attachment cells and LATR cells from copy
+                if (col.uidt === UITypes.Attachment || col.uidt === UITypes.LinkToAnotherRecord) {
+                  cptext = `${cptext} ${row.row[col.title]} \t`
+                }
               })
 
               cptext = `${cptext.trim()}\n`