diff --git a/surfsense_web/components/editor/plugins/basic-blocks-base-kit.tsx b/surfsense_web/components/editor/plugins/basic-blocks-base-kit.tsx deleted file mode 100644 index ce533e8d5..000000000 --- a/surfsense_web/components/editor/plugins/basic-blocks-base-kit.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { - BaseBlockquotePlugin, - BaseH1Plugin, - BaseH2Plugin, - BaseH3Plugin, - BaseH4Plugin, - BaseH5Plugin, - BaseH6Plugin, - BaseHorizontalRulePlugin, -} from '@platejs/basic-nodes'; -import { BaseParagraphPlugin } from 'platejs'; - -import { BlockquoteElementStatic } from '@/components/ui/blockquote-node-static'; -import { - H1ElementStatic, - H2ElementStatic, - H3ElementStatic, - H4ElementStatic, - H5ElementStatic, - H6ElementStatic, -} from '@/components/ui/heading-node-static'; -import { HrElementStatic } from '@/components/ui/hr-node-static'; -import { ParagraphElementStatic } from '@/components/ui/paragraph-node-static'; - -export const BaseBasicBlocksKit = [ - BaseParagraphPlugin.withComponent(ParagraphElementStatic), - BaseH1Plugin.withComponent(H1ElementStatic), - BaseH2Plugin.withComponent(H2ElementStatic), - BaseH3Plugin.withComponent(H3ElementStatic), - BaseH4Plugin.withComponent(H4ElementStatic), - BaseH5Plugin.withComponent(H5ElementStatic), - BaseH6Plugin.withComponent(H6ElementStatic), - BaseBlockquotePlugin.withComponent(BlockquoteElementStatic), - BaseHorizontalRulePlugin.withComponent(HrElementStatic), -]; diff --git a/surfsense_web/components/editor/plugins/basic-marks-base-kit.tsx b/surfsense_web/components/editor/plugins/basic-marks-base-kit.tsx deleted file mode 100644 index 7463d1ee0..000000000 --- a/surfsense_web/components/editor/plugins/basic-marks-base-kit.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { - BaseBoldPlugin, - BaseCodePlugin, - BaseHighlightPlugin, - BaseItalicPlugin, - BaseKbdPlugin, - BaseStrikethroughPlugin, - BaseSubscriptPlugin, - BaseSuperscriptPlugin, - BaseUnderlinePlugin, -} from '@platejs/basic-nodes'; - -import { CodeLeafStatic } from '@/components/ui/code-node-static'; -import { HighlightLeafStatic } from '@/components/ui/highlight-node-static'; -import { KbdLeafStatic } from '@/components/ui/kbd-node-static'; - -export const BaseBasicMarksKit = [ - BaseBoldPlugin, - BaseItalicPlugin, - BaseUnderlinePlugin, - BaseCodePlugin.withComponent(CodeLeafStatic), - BaseStrikethroughPlugin, - BaseSubscriptPlugin, - BaseSuperscriptPlugin, - BaseHighlightPlugin.withComponent(HighlightLeafStatic), - BaseKbdPlugin.withComponent(KbdLeafStatic), -]; diff --git a/surfsense_web/components/editor/plugins/code-block-base-kit.tsx b/surfsense_web/components/editor/plugins/code-block-base-kit.tsx deleted file mode 100644 index 9a5a69de6..000000000 --- a/surfsense_web/components/editor/plugins/code-block-base-kit.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { - BaseCodeBlockPlugin, - BaseCodeLinePlugin, - BaseCodeSyntaxPlugin, -} from '@platejs/code-block'; -import { all, createLowlight } from 'lowlight'; - -import { - CodeBlockElementStatic, - CodeLineElementStatic, - CodeSyntaxLeafStatic, -} from '@/components/ui/code-block-node-static'; - -const lowlight = createLowlight(all); - -export const BaseCodeBlockKit = [ - BaseCodeBlockPlugin.configure({ - node: { component: CodeBlockElementStatic }, - options: { lowlight }, - }), - BaseCodeLinePlugin.withComponent(CodeLineElementStatic), - BaseCodeSyntaxPlugin.withComponent(CodeSyntaxLeafStatic), -]; diff --git a/surfsense_web/components/editor/plugins/link-base-kit.tsx b/surfsense_web/components/editor/plugins/link-base-kit.tsx deleted file mode 100644 index 5f22809ee..000000000 --- a/surfsense_web/components/editor/plugins/link-base-kit.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { BaseLinkPlugin } from '@platejs/link'; - -import { LinkElementStatic } from '@/components/ui/link-node-static'; - -export const BaseLinkKit = [BaseLinkPlugin.withComponent(LinkElementStatic)]; diff --git a/surfsense_web/components/editor/plugins/table-base-kit.tsx b/surfsense_web/components/editor/plugins/table-base-kit.tsx deleted file mode 100644 index c7aed2984..000000000 --- a/surfsense_web/components/editor/plugins/table-base-kit.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { - BaseTableCellHeaderPlugin, - BaseTableCellPlugin, - BaseTablePlugin, - BaseTableRowPlugin, -} from '@platejs/table'; - -import { - TableCellElementStatic, - TableCellHeaderElementStatic, - TableElementStatic, - TableRowElementStatic, -} from '@/components/ui/table-node-static'; - -export const BaseTableKit = [ - BaseTablePlugin.withComponent(TableElementStatic), - BaseTableRowPlugin.withComponent(TableRowElementStatic), - BaseTableCellPlugin.withComponent(TableCellElementStatic), - BaseTableCellHeaderPlugin.withComponent(TableCellHeaderElementStatic), -]; diff --git a/surfsense_web/components/ui/blockquote-node-static.tsx b/surfsense_web/components/ui/blockquote-node-static.tsx deleted file mode 100644 index 5d471f805..000000000 --- a/surfsense_web/components/ui/blockquote-node-static.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import * as React from 'react'; - -import { type SlateElementProps, SlateElement } from 'platejs/static'; - -export function BlockquoteElementStatic(props: SlateElementProps) { - return ( - - ); -} diff --git a/surfsense_web/components/ui/code-block-node-static.tsx b/surfsense_web/components/ui/code-block-node-static.tsx deleted file mode 100644 index 8e52618e6..000000000 --- a/surfsense_web/components/ui/code-block-node-static.tsx +++ /dev/null @@ -1,161 +0,0 @@ -import * as React from 'react'; - -import type { TCodeBlockElement } from 'platejs'; - -import { - type SlateElementProps, - type SlateLeafProps, - SlateElement, - SlateLeaf, -} from 'platejs/static'; - -export function CodeBlockElementStatic( - props: SlateElementProps -) { - return ( - -
- 
-          {props.children}
-
-
- - ); -} - -export function CodeLineElementStatic(props: SlateElementProps) { - return ; -} - -export function CodeSyntaxLeafStatic(props: SlateLeafProps) { - const tokenClassName = props.leaf.className as string; - - return ; -} - -/** - * DOCX-compatible code block components. - * Uses inline styles for proper rendering in Word documents. - */ - -export function CodeBlockElementDocx( - props: SlateElementProps -) { - return ( - -
- {props.children} -
- - ); -} - -export function CodeLineElementDocx(props: SlateElementProps) { - return ( - - ); -} - -// Syntax highlighting color map for common token types -const syntaxColors: Record = { - 'hljs-addition': '#22863a', - 'hljs-attr': '#005cc5', - 'hljs-attribute': '#005cc5', - 'hljs-built_in': '#e36209', - 'hljs-bullet': '#735c0f', - 'hljs-comment': '#6a737d', - 'hljs-deletion': '#b31d28', - 'hljs-doctag': '#d73a49', - 'hljs-emphasis': '#24292e', - 'hljs-formula': '#6a737d', - 'hljs-keyword': '#d73a49', - 'hljs-literal': '#005cc5', - 'hljs-meta': '#005cc5', - 'hljs-name': '#22863a', - 'hljs-number': '#005cc5', - 'hljs-operator': '#005cc5', - 'hljs-quote': '#22863a', - 'hljs-regexp': '#032f62', - 'hljs-section': '#005cc5', - 'hljs-selector-attr': '#005cc5', - 'hljs-selector-class': '#005cc5', - 'hljs-selector-id': '#005cc5', - 'hljs-selector-pseudo': '#22863a', - 'hljs-selector-tag': '#22863a', - 'hljs-string': '#032f62', - 'hljs-strong': '#24292e', - 'hljs-symbol': '#e36209', - 'hljs-template-tag': '#d73a49', - 'hljs-template-variable': '#d73a49', - 'hljs-title': '#6f42c1', - 'hljs-type': '#d73a49', - 'hljs-variable': '#005cc5', -}; - -// Convert regular spaces to non-breaking spaces to preserve indentation in Word -const preserveSpaces = (text: string): string => { - // Replace regular spaces with non-breaking spaces - return text.replace(/ /g, '\u00A0'); -}; - -export function CodeSyntaxLeafDocx(props: SlateLeafProps) { - const tokenClassName = props.leaf.className as string; - - // Extract color from className - let color: string | undefined; - let fontWeight: string | undefined; - let fontStyle: string | undefined; - - if (tokenClassName) { - const classes = tokenClassName.split(' '); - for (const cls of classes) { - if (syntaxColors[cls]) { - color = syntaxColors[cls]; - } - if (cls === 'hljs-strong' || cls === 'hljs-section') { - fontWeight = 'bold'; - } - if (cls === 'hljs-emphasis') { - fontStyle = 'italic'; - } - } - } - - // Get the text content and preserve spaces - const text = props.leaf.text as string; - const preservedText = preserveSpaces(text); - - return ( - - {preservedText} - - ); -} diff --git a/surfsense_web/components/ui/code-node-static.tsx b/surfsense_web/components/ui/code-node-static.tsx deleted file mode 100644 index 9b056659a..000000000 --- a/surfsense_web/components/ui/code-node-static.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import * as React from 'react'; - -import type { SlateLeafProps } from 'platejs/static'; - -import { SlateLeaf } from 'platejs/static'; - -export function CodeLeafStatic(props: SlateLeafProps) { - return ( - - {props.children} - - ); -} diff --git a/surfsense_web/components/ui/editor-static.tsx b/surfsense_web/components/ui/editor-static.tsx deleted file mode 100644 index b9592bf35..000000000 --- a/surfsense_web/components/ui/editor-static.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import * as React from 'react'; - -import type { VariantProps } from 'class-variance-authority'; - -import { cva } from 'class-variance-authority'; -import { type PlateStaticProps, PlateStatic } from 'platejs/static'; - -import { cn } from '@/lib/utils'; - -export const editorVariants = cva( - cn( - 'group/editor', - 'relative w-full cursor-text select-text overflow-x-hidden whitespace-pre-wrap break-words', - 'rounded-md ring-offset-background focus-visible:outline-none', - 'placeholder:text-muted-foreground/80 **:data-slate-placeholder:top-[auto_!important] **:data-slate-placeholder:text-muted-foreground/80 **:data-slate-placeholder:opacity-100!', - '[&_strong]:font-bold' - ), - { - defaultVariants: { - variant: 'none', - }, - variants: { - disabled: { - true: 'cursor-not-allowed opacity-50', - }, - focused: { - true: 'ring-2 ring-ring ring-offset-2', - }, - variant: { - ai: 'w-full px-0 text-base md:text-sm', - aiChat: - 'max-h-[min(70vh,320px)] w-full overflow-y-auto px-5 py-3 text-base md:text-sm', - default: - 'size-full px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]', - demo: 'size-full px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]', - fullWidth: 'size-full px-16 pt-4 pb-72 text-base sm:px-24', - none: '', - select: 'px-3 py-2 text-base data-readonly:w-fit', - }, - }, - } -); - -export function EditorStatic({ - className, - variant, - ...props -}: PlateStaticProps & VariantProps) { - return ( - - ); -} diff --git a/surfsense_web/components/ui/equation-toolbar-button.tsx b/surfsense_web/components/ui/equation-toolbar-button.tsx deleted file mode 100644 index 66862ea69..000000000 --- a/surfsense_web/components/ui/equation-toolbar-button.tsx +++ /dev/null @@ -1,27 +0,0 @@ -'use client'; - -import * as React from 'react'; - -import { insertInlineEquation } from '@platejs/math'; -import { RadicalIcon } from 'lucide-react'; -import { useEditorRef } from 'platejs/react'; - -import { ToolbarButton } from './toolbar'; - -export function InlineEquationToolbarButton( - props: React.ComponentProps -) { - const editor = useEditorRef(); - - return ( - { - insertInlineEquation(editor); - }} - tooltip="Mark as equation" - > - - - ); -} diff --git a/surfsense_web/components/ui/heading-node-static.tsx b/surfsense_web/components/ui/heading-node-static.tsx deleted file mode 100644 index 48db8596d..000000000 --- a/surfsense_web/components/ui/heading-node-static.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import * as React from 'react'; - -import type { SlateElementProps } from 'platejs/static'; - -import { type VariantProps, cva } from 'class-variance-authority'; -import { SlateElement } from 'platejs/static'; - -const headingVariants = cva('relative mb-1', { - variants: { - variant: { - h1: 'mt-[1.6em] pb-1 font-bold font-heading text-4xl', - h2: 'mt-[1.4em] pb-px font-heading font-semibold text-2xl tracking-tight', - h3: 'mt-[1em] pb-px font-heading font-semibold text-xl tracking-tight', - h4: 'mt-[0.75em] font-heading font-semibold text-lg tracking-tight', - h5: 'mt-[0.75em] font-semibold text-lg tracking-tight', - h6: 'mt-[0.75em] font-semibold text-base tracking-tight', - }, - }, -}); - -export function HeadingElementStatic({ - variant = 'h1', - ...props -}: SlateElementProps & VariantProps) { - const id = props.element.id as string | undefined; - - return ( - - {/* Bookmark anchor for DOCX TOC internal links */} - {id && } - {props.children} - - ); -} - -export function H1ElementStatic(props: SlateElementProps) { - return ; -} - -export function H2ElementStatic( - props: React.ComponentProps -) { - return ; -} - -export function H3ElementStatic( - props: React.ComponentProps -) { - return ; -} - -export function H4ElementStatic( - props: React.ComponentProps -) { - return ; -} - -export function H5ElementStatic( - props: React.ComponentProps -) { - return ; -} - -export function H6ElementStatic( - props: React.ComponentProps -) { - return ; -} diff --git a/surfsense_web/components/ui/highlight-node-static.tsx b/surfsense_web/components/ui/highlight-node-static.tsx deleted file mode 100644 index 32b67be17..000000000 --- a/surfsense_web/components/ui/highlight-node-static.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import * as React from 'react'; - -import type { SlateLeafProps } from 'platejs/static'; - -import { SlateLeaf } from 'platejs/static'; - -export function HighlightLeafStatic(props: SlateLeafProps) { - return ( - - {props.children} - - ); -} diff --git a/surfsense_web/components/ui/hr-node-static.tsx b/surfsense_web/components/ui/hr-node-static.tsx deleted file mode 100644 index c449fbfb6..000000000 --- a/surfsense_web/components/ui/hr-node-static.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import * as React from 'react'; - -import type { SlateElementProps } from 'platejs/static'; - -import { SlateElement } from 'platejs/static'; - -import { cn } from '@/lib/utils'; - -export function HrElementStatic(props: SlateElementProps) { - return ( - -
-
-
- {props.children} - - ); -} diff --git a/surfsense_web/components/ui/kbd-node-static.tsx b/surfsense_web/components/ui/kbd-node-static.tsx deleted file mode 100644 index 5dd19ccbf..000000000 --- a/surfsense_web/components/ui/kbd-node-static.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import * as React from 'react'; - -import type { SlateLeafProps } from 'platejs/static'; - -import { SlateLeaf } from 'platejs/static'; - -export function KbdLeafStatic(props: SlateLeafProps) { - return ( - - {props.children} - - ); -} diff --git a/surfsense_web/components/ui/link-node-static.tsx b/surfsense_web/components/ui/link-node-static.tsx deleted file mode 100644 index 1c2f32d19..000000000 --- a/surfsense_web/components/ui/link-node-static.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from 'react'; - -import type { TLinkElement } from 'platejs'; -import type { SlateElementProps } from 'platejs/static'; - -import { getLinkAttributes } from '@platejs/link'; -import { SlateElement } from 'platejs/static'; - -export function LinkElementStatic(props: SlateElementProps) { - return ( - - {props.children} - - ); -} diff --git a/surfsense_web/components/ui/list-classic-toolbar-button.tsx b/surfsense_web/components/ui/list-classic-toolbar-button.tsx deleted file mode 100644 index 780047c7b..000000000 --- a/surfsense_web/components/ui/list-classic-toolbar-button.tsx +++ /dev/null @@ -1,69 +0,0 @@ -'use client'; - -import * as React from 'react'; - -import { indentListItems, unindentListItems } from '@platejs/list-classic'; -import { - useListToolbarButton, - useListToolbarButtonState, -} from '@platejs/list-classic/react'; -import { - IndentIcon, - List, - ListOrdered, - ListTodo, - OutdentIcon, -} from 'lucide-react'; -import { KEYS } from 'platejs'; -import { useEditorRef } from 'platejs/react'; - -import { ToolbarButton } from './toolbar'; - -const nodeTypeMap: Record = - { - [KEYS.olClassic]: { icon: , label: 'Numbered List' }, - [KEYS.taskList]: { icon: , label: 'Task List' }, - [KEYS.ulClassic]: { icon: , label: 'Bulleted List' }, - }; - -export function ListToolbarButton({ - nodeType = KEYS.ulClassic, - ...props -}: React.ComponentProps & { - nodeType?: string; -}) { - const state = useListToolbarButtonState({ nodeType }); - const { props: buttonProps } = useListToolbarButton(state); - const { icon, label } = nodeTypeMap[nodeType] ?? nodeTypeMap[KEYS.ulClassic]; - - return ( - - {icon} - - ); -} - -export function IndentToolbarButton({ - reverse = false, - ...props -}: React.ComponentProps & { - reverse?: boolean; -}) { - const editor = useEditorRef(); - - return ( - { - if (reverse) { - unindentListItems(editor); - } else { - indentListItems(editor); - } - }} - tooltip={reverse ? 'Outdent' : 'Indent'} - > - {reverse ? : } - - ); -} diff --git a/surfsense_web/components/ui/paragraph-node-static.tsx b/surfsense_web/components/ui/paragraph-node-static.tsx deleted file mode 100644 index c5a6cf85c..000000000 --- a/surfsense_web/components/ui/paragraph-node-static.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import * as React from 'react'; - -import type { SlateElementProps } from 'platejs/static'; - -import { SlateElement } from 'platejs/static'; - -import { cn } from '@/lib/utils'; - -export function ParagraphElementStatic(props: SlateElementProps) { - return ( - - {props.children} - - ); -} diff --git a/surfsense_web/components/ui/table-node-static.tsx b/surfsense_web/components/ui/table-node-static.tsx deleted file mode 100644 index c794b07b2..000000000 --- a/surfsense_web/components/ui/table-node-static.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import * as React from 'react'; - -import type { TTableCellElement, TTableElement } from 'platejs'; -import type { SlateElementProps } from 'platejs/static'; - -import { BaseTablePlugin } from '@platejs/table'; -import { SlateElement } from 'platejs/static'; - -import { cn } from '@/lib/utils'; - -export function TableElementStatic({ - children, - ...props -}: SlateElementProps) { - const { disableMarginLeft } = props.editor.getOptions(BaseTablePlugin); - const marginLeft = disableMarginLeft ? 0 : props.element.marginLeft; - - return ( - -
- - {children} -
-
- - ); -} - -export function TableRowElementStatic(props: SlateElementProps) { - return ( - - {props.children} - - ); -} - -export function TableCellElementStatic({ - isHeader, - ...props -}: SlateElementProps & { - isHeader?: boolean; -}) { - const { editor, element } = props; - const { api } = editor.getPlugin(BaseTablePlugin); - - const { minHeight, width } = api.table.getCellSize({ element }); - const borders = api.table.getCellBorders({ element }); - - return ( - -
- {props.children} -
- - ); -} - -export function TableCellHeaderElementStatic( - props: SlateElementProps -) { - return ; -} diff --git a/surfsense_web/components/ui/table-toolbar-button.tsx b/surfsense_web/components/ui/table-toolbar-button.tsx deleted file mode 100644 index 37794f1f6..000000000 --- a/surfsense_web/components/ui/table-toolbar-button.tsx +++ /dev/null @@ -1,266 +0,0 @@ -'use client'; - -import * as React from 'react'; - -import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu'; - -import { TablePlugin, useTableMergeState } from '@platejs/table/react'; -import { - ArrowDown, - ArrowLeft, - ArrowRight, - ArrowUp, - Combine, - Grid3x3Icon, - Table, - Trash2Icon, - Ungroup, - XIcon, -} from 'lucide-react'; -import { KEYS } from 'platejs'; -import { useEditorPlugin, useEditorSelector } from 'platejs/react'; - -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuGroup, - DropdownMenuItem, - DropdownMenuSub, - DropdownMenuSubContent, - DropdownMenuSubTrigger, - DropdownMenuTrigger, -} from '@/components/ui/dropdown-menu'; -import { cn } from '@/lib/utils'; - -import { ToolbarButton } from './toolbar'; - -export function TableToolbarButton(props: DropdownMenuProps) { - const tableSelected = useEditorSelector( - (editor) => editor.api.some({ match: { type: KEYS.table } }), - [] - ); - - const { editor, tf } = useEditorPlugin(TablePlugin); - const [open, setOpen] = React.useState(false); - const mergeState = useTableMergeState(); - - return ( - - - - - - - - - - - - - Table - - - - - - - - -
- Cell - - - { - tf.table.merge(); - editor.tf.focus(); - }} - > - - Merge cells - - { - tf.table.split(); - editor.tf.focus(); - }} - > - - Split cell - - - - - - -
- Row - - - { - tf.insert.tableRow({ before: true }); - editor.tf.focus(); - }} - > - - Insert row before - - { - tf.insert.tableRow(); - editor.tf.focus(); - }} - > - - Insert row after - - { - tf.remove.tableRow(); - editor.tf.focus(); - }} - > - - Delete row - - - - - - -
- Column - - - { - tf.insert.tableColumn({ before: true }); - editor.tf.focus(); - }} - > - - Insert column before - - { - tf.insert.tableColumn(); - editor.tf.focus(); - }} - > - - Insert column after - - { - tf.remove.tableColumn(); - editor.tf.focus(); - }} - > - - Delete column - - - - - { - tf.remove.table(); - editor.tf.focus(); - }} - > - - Delete table - - - - - ); -} - -function TablePicker() { - const { editor, tf } = useEditorPlugin(TablePlugin); - - const [tablePicker, setTablePicker] = React.useState({ - grid: Array.from({ length: 8 }, () => Array.from({ length: 8 }).fill(0)), - size: { colCount: 0, rowCount: 0 }, - }); - - const onCellMove = (rowIndex: number, colIndex: number) => { - const newGrid = [...tablePicker.grid]; - - for (let i = 0; i < newGrid.length; i++) { - for (let j = 0; j < newGrid[i].length; j++) { - newGrid[i][j] = - i >= 0 && i <= rowIndex && j >= 0 && j <= colIndex ? 1 : 0; - } - } - - setTablePicker({ - grid: newGrid, - size: { colCount: colIndex + 1, rowCount: rowIndex + 1 }, - }); - }; - - return ( -
{ - tf.insert.table(tablePicker.size, { select: true }); - editor.tf.focus(); - }} - role="button" - > -
- {tablePicker.grid.map((rows, rowIndex) => - rows.map((value, columIndex) => ( -
{ - onCellMove(rowIndex, columIndex); - }} - /> - )) - )} -
- -
- {tablePicker.size.rowCount} x {tablePicker.size.colCount} -
-
- ); -}