diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue index c73ae53dc8..0340e82a9f 100644 --- a/packages/nc-gui/components/cell/TextArea.vue +++ b/packages/nc-gui/components/cell/TextArea.vue @@ -61,6 +61,8 @@ const isAiEdited = useVModel(props, 'isAiEdited', emits) const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))! +const textAreaRef = ref() + const position = ref< | { top: number @@ -351,8 +353,6 @@ watch( }, ) -const textAreaRef = ref() - watch(textAreaRef, (el) => { if (el && !isExpandedFormOpen.value && !isEditColumn.value && !isForm.value) { el.focus() diff --git a/packages/nc-gui/components/smartsheet/grid/canvas/cells/AILongText.ts b/packages/nc-gui/components/smartsheet/grid/canvas/cells/AILongText.ts index 07a3aa391c..f096dc193e 100644 --- a/packages/nc-gui/components/smartsheet/grid/canvas/cells/AILongText.ts +++ b/packages/nc-gui/components/smartsheet/grid/canvas/cells/AILongText.ts @@ -81,6 +81,8 @@ const renderAIButton = ( const startX = x + (width - dims.buttonWidth) / 2 const startY = y + 4 + disabled = disabled || isLoading + const isHovered = !disabled && mousePosition && @@ -133,7 +135,7 @@ const renderAIButton = ( export const AILongTextCellRenderer: CellRenderer = { render: (ctx: CanvasRenderingContext2D, props) => { - const { value, x, y, width, height, spriteLoader, disabled, padding, mousePosition } = props + const { value, x, y, width, height, spriteLoader, disabled, padding, mousePosition, actionManager, pk, column } = props const isHovered = isBoxHovered({ x, y, width, height }, mousePosition) @@ -144,6 +146,10 @@ export const AILongTextCellRenderer: CellRenderer = { const btnWidth = width - horizontalPadding * 2 + const isLoading = actionManager.isLoading(pk, column.id!) + + const startTime = actionManager.getLoadingStartTime(pk, column.id!) + const { buttonBounds } = renderAIButton(ctx, { x: x + (width - btnWidth) / 2, y, @@ -151,6 +157,8 @@ export const AILongTextCellRenderer: CellRenderer = { disabled: buttonDisabled, mousePosition, spriteLoader, + isLoading, + loadingStartTime: startTime, }) return { @@ -212,7 +220,7 @@ export const AILongTextCellRenderer: CellRenderer = { } }, async handleClick({ mousePosition, column, row, value, pk, actionManager, getCellPosition, makeCellEditable }) { - if (!row || !column?.id || !mousePosition || column?.disabled?.isInvalid) return + if (!row || !column?.id || !mousePosition || column?.isInvalidColumn?.isInvalid) return false const { x, y, width } = getCellPosition(column, row.rowMeta.rowIndex!) diff --git a/packages/nc-gui/components/smartsheet/grid/canvas/cells/LongText.ts b/packages/nc-gui/components/smartsheet/grid/canvas/cells/LongText.ts index 8e86bf975e..e793009e87 100644 --- a/packages/nc-gui/components/smartsheet/grid/canvas/cells/LongText.ts +++ b/packages/nc-gui/components/smartsheet/grid/canvas/cells/LongText.ts @@ -1,5 +1,5 @@ import { isAIPromptCol } from 'nocodb-sdk' -import { renderMultiLineText, renderTagLabel } from '../utils/canvas' +import { isBoxHovered, renderIconButton, renderMultiLineText, renderTagLabel } from '../utils/canvas' import { AILongTextCellRenderer } from './AILongText' export const LongTextCellRenderer: CellRenderer = { @@ -9,10 +9,12 @@ export const LongTextCellRenderer: CellRenderer = { return } - const { value, x, y, width, height, pv, padding, textColor = '#4a5268' } = props + const { value, x, y, width, height, pv, padding, textColor = '#4a5268', mousePosition, spriteLoader } = props const text = value?.toString() ?? '' + const isHovered = isBoxHovered({ x, y, width, height }, mousePosition) + if (!text) { return { x, @@ -33,6 +35,23 @@ export const LongTextCellRenderer: CellRenderer = { height, }) + if (isHovered) { + renderIconButton(ctx, { + buttonX: x + width - 28, + buttonY: y + 7, + buttonSize: 18, + borderRadius: 3, + iconData: { + size: 13, + xOffset: (18 - 13) / 2, + yOffset: (18 - 13) / 2, + }, + mousePosition, + spriteLoader, + icon: 'maximize', + }) + } + return { x: xOffset, y: yOffset, @@ -40,12 +59,28 @@ export const LongTextCellRenderer: CellRenderer = { } }, handleClick: async (props) => { - if (isAIPromptCol(props.column?.columnObj)) { - return AILongTextCellRenderer.handleClick?.(props) + const { column, getCellPosition, row, mousePosition, makeCellEditable } = props + if (isAIPromptCol(column?.columnObj)) { + return AILongTextCellRenderer.handleClick!(props) } else { + const { x, y, width } = getCellPosition(column, row.rowMeta.rowIndex!) + + if (isBoxHovered({ x: x + width - 28, y: y + 7, width: 18, height: 18 }, mousePosition)) { + makeCellEditable(row.rowMeta.rowIndex!, column) + return true + } return false } }, + async handleKeyDown(ctx) { + const { e, row, column, makeCellEditable } = ctx + if (/^[a-zA-Z0-9]$/.test(e.key)) { + makeCellEditable(row.rowMeta!.rowIndex!, column) + return true + } + + return false + }, handleHover: async (props) => { if (isAIPromptCol(props.column?.columnObj)) { return AILongTextCellRenderer.handleHover?.(props) diff --git a/packages/nc-gui/components/smartsheet/grid/canvas/cells/index.ts b/packages/nc-gui/components/smartsheet/grid/canvas/cells/index.ts index 6eddb43fa0..fa0f9abea9 100644 --- a/packages/nc-gui/components/smartsheet/grid/canvas/cells/index.ts +++ b/packages/nc-gui/components/smartsheet/grid/canvas/cells/index.ts @@ -1,4 +1,4 @@ -import { type TableType, UITypes, type ViewType } from 'nocodb-sdk' +import { type TableType, UITypes, type ViewType, isAIPromptCol } from 'nocodb-sdk' import { renderSingleLineText, renderSpinner } from '../utils/canvas' import type { ActionManager } from '../loaders/ActionManager' import { EmailCellRenderer } from './Email' @@ -121,7 +121,7 @@ export function useGridCellHandler(params: { }: Omit, ) => { const cellType = cellTypesRegistry.get(column.uidt) - if (actionManager?.isLoading(pk, column.id) && column.uidt !== UITypes.Button) { + if (actionManager?.isLoading(pk, column.id) && !isAIPromptCol(column) && !isButton(column)) { const loadingStartTime = actionManager?.getLoadingStartTime(pk, column.id) if (loadingStartTime) { renderSpinner(ctx, x + width / 2, y + 8, 16, '#3366FF', loadingStartTime, 1.5) diff --git a/packages/nc-gui/components/smartsheet/grid/canvas/index.vue b/packages/nc-gui/components/smartsheet/grid/canvas/index.vue index d6a3eadce3..0b2f84f7b6 100644 --- a/packages/nc-gui/components/smartsheet/grid/canvas/index.vue +++ b/packages/nc-gui/components/smartsheet/grid/canvas/index.vue @@ -1094,6 +1094,16 @@ onBeforeUnmount(() => { .nc-canvas-table-editable-cell-wrapper { @apply absolute bg-white border-2 !rounded border-[#3366ff] !text-small !leading-[18px]; + :deep(.nc-cell-longtext) { + .nc-readonly-rich-text-wrapper { + @apply !pl-2 pt-0.5; + } + + .nc-text-area-expand-btn { + @apply !pr-1 !pt-1; + } + } + .nc-cell, .nc-virtual-cell { @apply !text-small !leading-[18px];