From b340232e76aca30090f983c137cde74075f6657c Mon Sep 17 00:00:00 2001 From: "M. Palanikannan" <73993394+Palanikannan1437@users.noreply.github.com> Date: Thu, 4 Jan 2024 16:30:10 +0530 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20chore:=20Updated=20TableView=20comp?= =?UTF-8?q?onent=20in=20table=20extension=20to=20solve=20sentry=20(#3309)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit error of table not being defined while getting getBoundingClientRect() and solve other TS issues - Added ResolvedPos import from @tiptap/pm/model - Updated setCellsBackgroundColor function parameter type to string - Declared ToolboxItem type for toolbox items - Modified columnsToolboxItems and rowsToolboxItems to use the ToolboxItem type - Updated createToolbox function parameters to specify Element or null for triggerButton and ToolboxItem[] for items - Added ts-expect-error comment above the toolbox variable declaration - Updated update method parameter type to readonly Decoration[] - Changed destructuring assignment of hoveredTable and hoveredCell in updateControls method to use Object.values and reduce method - Added null check for this.table in updateControls method - Wrapped the code that updates columnsControl and rowsControl with null checks for each control - Replaced ts-ignore comments with proper dispatch calls in selectColumn and selectRow methods Co-authored-by: sriram veeraghanta --- .../ui/extensions/table/table/table-view.tsx | 85 ++++++++++--------- 1 file changed, 45 insertions(+), 40 deletions(-) diff --git a/packages/editor/core/src/ui/extensions/table/table/table-view.tsx b/packages/editor/core/src/ui/extensions/table/table/table-view.tsx index bc42b49ff..bd96ff1b1 100644 --- a/packages/editor/core/src/ui/extensions/table/table/table-view.tsx +++ b/packages/editor/core/src/ui/extensions/table/table/table-view.tsx @@ -1,5 +1,5 @@ import { h } from "jsx-dom-cjs"; -import { Node as ProseMirrorNode } from "@tiptap/pm/model"; +import { Node as ProseMirrorNode, ResolvedPos } from "@tiptap/pm/model"; import { Decoration, NodeView } from "@tiptap/pm/view"; import tippy, { Instance, Props } from "tippy.js"; @@ -8,6 +8,12 @@ import { CellSelection, TableMap, updateColumnsOnResize } from "@tiptap/pm/table import { icons } from "src/ui/extensions/table/table/icons"; +type ToolboxItem = { + label: string; + icon: string; + action: (args: any) => void; +}; + export function updateColumns( node: ProseMirrorNode, colgroup: HTMLElement, @@ -75,7 +81,7 @@ const defaultTippyOptions: Partial = { placement: "right", }; -function setCellsBackgroundColor(editor: Editor, backgroundColor) { +function setCellsBackgroundColor(editor: Editor, backgroundColor: string) { return editor .chain() .focus() @@ -88,7 +94,7 @@ function setCellsBackgroundColor(editor: Editor, backgroundColor) { .run(); } -const columnsToolboxItems = [ +const columnsToolboxItems: ToolboxItem[] = [ { label: "Add Column Before", icon: icons.insertLeftTableIcon, @@ -109,7 +115,7 @@ const columnsToolboxItems = [ }: { editor: Editor; triggerButton: HTMLElement; - controlsContainer; + controlsContainer: Element; }) => { createColorPickerToolbox({ triggerButton, @@ -127,7 +133,7 @@ const columnsToolboxItems = [ }, ]; -const rowsToolboxItems = [ +const rowsToolboxItems: ToolboxItem[] = [ { label: "Add Row Above", icon: icons.insertTopTableIcon, @@ -172,11 +178,12 @@ function createToolbox({ tippyOptions, onClickItem, }: { - triggerButton: HTMLElement; - items: { icon: string; label: string }[]; + triggerButton: Element | null; + items: ToolboxItem[]; tippyOptions: any; - onClickItem: any; + onClickItem: (item: ToolboxItem) => void; }): Instance { + // @ts-expect-error const toolbox = tippy(triggerButton, { content: h( "div", @@ -278,14 +285,14 @@ export class TableView implements NodeView { decorations: Decoration[]; editor: Editor; getPos: () => number; - hoveredCell; + hoveredCell: ResolvedPos | null = null; map: TableMap; root: HTMLElement; - table: HTMLElement; - colgroup: HTMLElement; + table: HTMLTableElement; + colgroup: HTMLTableColElement; tbody: HTMLElement; - rowsControl?: HTMLElement; - columnsControl?: HTMLElement; + rowsControl?: HTMLElement | null; + columnsControl?: HTMLElement | null; columnsToolbox?: Instance; rowsToolbox?: Instance; controls?: HTMLElement; @@ -398,13 +405,13 @@ export class TableView implements NodeView { this.render(); } - update(node: ProseMirrorNode, decorations) { + update(node: ProseMirrorNode, decorations: readonly Decoration[]) { if (node.type !== this.node.type) { return false; } this.node = node; - this.decorations = decorations; + this.decorations = [...decorations]; this.map = TableMap.get(this.node); if (this.editor.isEditable) { @@ -430,19 +437,16 @@ export class TableView implements NodeView { } updateControls() { - const { hoveredTable: table, hoveredCell: cell } = Object.values(this.decorations).reduce( - (acc, curr) => { - if (curr.spec.hoveredCell !== undefined) { - acc["hoveredCell"] = curr.spec.hoveredCell; - } + const { hoveredTable: table, hoveredCell: cell } = Object.values(this.decorations).reduce((acc, curr) => { + if (curr.spec.hoveredCell !== undefined) { + acc["hoveredCell"] = curr.spec.hoveredCell; + } - if (curr.spec.hoveredTable !== undefined) { - acc["hoveredTable"] = curr.spec.hoveredTable; - } - return acc; - }, - {} as Record - ) as any; + if (curr.spec.hoveredTable !== undefined) { + acc["hoveredTable"] = curr.spec.hoveredTable; + } + return acc; + }, {} as Record) as any; if (table === undefined || cell === undefined) { return this.root.classList.add("controls--disabled"); @@ -453,14 +457,21 @@ export class TableView implements NodeView { const cellDom = this.editor.view.nodeDOM(cell.pos) as HTMLElement; + if (!this.table) { + return; + } + const tableRect = this.table.getBoundingClientRect(); const cellRect = cellDom.getBoundingClientRect(); - this.columnsControl.style.left = `${cellRect.left - tableRect.left - this.table.parentElement!.scrollLeft}px`; - this.columnsControl.style.width = `${cellRect.width}px`; - - this.rowsControl.style.top = `${cellRect.top - tableRect.top}px`; - this.rowsControl.style.height = `${cellRect.height}px`; + if (this.columnsControl) { + this.columnsControl.style.left = `${cellRect.left - tableRect.left - this.table.parentElement!.scrollLeft}px`; + this.columnsControl.style.width = `${cellRect.width}px`; + } + if (this.rowsControl) { + this.rowsControl.style.top = `${cellRect.top - tableRect.top}px`; + this.rowsControl.style.height = `${cellRect.height}px`; + } } selectColumn() { @@ -471,10 +482,7 @@ export class TableView implements NodeView { const headCellPos = this.map.map[colIndex + this.map.width * (this.map.height - 1)] + (this.getPos() + 1); const cellSelection = CellSelection.create(this.editor.view.state.doc, anchorCellPos, headCellPos); - this.editor.view.dispatch( - // @ts-ignore - this.editor.state.tr.setSelection(cellSelection) - ); + this.editor.view.dispatch(this.editor.state.tr.setSelection(cellSelection)); } selectRow() { @@ -485,9 +493,6 @@ export class TableView implements NodeView { const headCellPos = this.map.map[anchorCellIndex + (this.map.width - 1)] + (this.getPos() + 1); const cellSelection = CellSelection.create(this.editor.state.doc, anchorCellPos, headCellPos); - this.editor.view.dispatch( - // @ts-ignore - this.editor.view.state.tr.setSelection(cellSelection) - ); + this.editor.view.dispatch(this.editor.view.state.tr.setSelection(cellSelection)); } }