fix(nc-gui): readonly tab focus of some fields

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

@@ -100,6 +100,7 @@ watch(
     class="py-1 text-sm underline hover:opacity-75 inline-block"
     :href="`mailto:${vModel}`"
     target="_blank"
+    :tabindex="readOnly ? -1 : 0"
   >
     <LazyCellClampedText :value="vModel" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
   </nuxt-link>

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

@@ -90,6 +90,7 @@ watch(
     :href="`tel:${vModel}`"
     target="_blank"
     rel="noopener noreferrer"
+    :tabindex="readOnly ? -1 : 0"
   >
     <LazyCellClampedText :value="vModel" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
   </a>

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

@@ -76,6 +76,7 @@ watch(rateDomRef, () => {
     v-model:value="vModel"
     :disabled="readOnly"
     :count="ratingMeta.max"
+    :class="readOnly ? 'pointer-events-none' : ''"
     :style="`color: ${ratingMeta.color}; padding: ${isExpandedFormOpen ? '0px 8px' : '0px 5px'};`"
     @keydown="onKeyPress"
   >

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

@@ -8,7 +8,7 @@ import { generateJSON } from '@tiptap/html'
 import Underline from '@tiptap/extension-underline'
 import { TaskItem } from '@/helpers/dbTiptapExtensions/task-item'
 import { Link } from '@/helpers/dbTiptapExtensions/links'
-import { IsExpandedFormOpenInj, RowHeightInj } from '#imports'
+import { IsExpandedFormOpenInj, RowHeightInj, ReadonlyInj } from '#imports'
 
 const props = defineProps<{
   value?: string | null
@@ -24,6 +24,8 @@ const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 
 const rowHeight = inject(RowHeightInj, ref(1 as const))
 
+const readOnlyCell = inject(ReadonlyInj, ref(false))
+
 const turndownService = new TurndownService({})
 
 turndownService.addRule('lineBreak', {
@@ -174,7 +176,7 @@ watch(editorDom, () => {
       'nc-rich-text-embed flex flex-col pl-1 w-full': !fullMode,
       'readonly': readOnly,
     }"
-    tabindex="0"
+    :tabindex="readOnlyCell ? -1 : 0"
   >
     <div
       v-if="showMenu && !readOnly"
@@ -191,6 +193,7 @@ watch(editorDom, () => {
     <CellRichTextLinkOptions v-if="editor" :editor="editor" />
     <EditorContent
       ref="editorDom"
+      :disabled="readOnly"
       :editor="editor"
       class="flex flex-col nc-textarea-rich-editor w-full"
       :class="{

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

@@ -122,6 +122,7 @@ watch(
       class="py-1 z-3 text-sm underline hover:opacity-75"
       :to="url"
       :target="cellUrlOptions?.behavior === 'replace' ? undefined : '_blank'"
+      :tabindex="readOnly ? -1 : 0"
     >
       <LazyCellClampedText :value="value" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
     </nuxt-link>
@@ -133,6 +134,7 @@ watch(
       class="py-1 z-3 w-full h-full text-center !no-underline hover:opacity-75"
       :to="url"
       :target="cellUrlOptions?.behavior === 'replace' ? undefined : '_blank'"
+      :tabindex="readOnly ? -1 : 0"
     >
       <LazyCellClampedText :value="cellUrlOptions.overlay" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
     </nuxt-link>