fix: Fix table picker overlay

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

src/components/editor-page/editor-pane/tool-bar/table-picker/table-picker-button.tsx

@@ -15,6 +15,7 @@ import type { OverlayInjectedProps } from 'react-bootstrap/Overlay'
 import { replaceSelection } from '../formatters/replace-selection'
 import { useChangeEditorContentCallback } from '../../../change-content-context/use-change-editor-content-callback'
 import { createMarkdownTable } from './create-markdown-table'
+import './table-picker.module.scss'
 
 enum PickerMode {
   INVISIBLE,
@@ -58,11 +59,10 @@ export const TablePickerButton: React.FC = () => {
   }, [])
 
   const createPopoverElement = useCallback<(props: OverlayInjectedProps) => React.ReactElement>(
-    ({ ref, ...popoverProps }) => (
+    (popoverProps) => (
       <TableSizePickerPopover
         onTableSizeSelected={onSizeSelect}
         onShowCustomSizeModal={onShowModal}
-        onRefUpdate={ref}
         {...popoverProps}
       />
     ),
@@ -84,7 +84,9 @@ export const TablePickerButton: React.FC = () => {
         target={button.current}
         onHide={onOverlayHide}
         show={pickerMode === PickerMode.GRID}
-        placement={'bottom'}
+        placement={'auto'}
+        flip={true}
+        offset={[0, 0]}
         rootClose={pickerMode === PickerMode.GRID}>
         {createPopoverElement}
       </Overlay>

src/components/editor-page/editor-pane/tool-bar/table-picker/table-picker.module.scss

@@ -4,19 +4,14 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-
-.table-picker-container {
-  z-index: 1111;
-
-  .table-cell {
-    margin: 1px;
-    border-radius: 2px;
-  }
-
-  .table-container {
-    display: grid;
-    grid-template-columns: repeat(10, 15px [col-start]);
-    grid-template-rows: repeat(8, 15px [row-start]);
-  }
+.table-cell {
+  margin: 1px;
+  border-radius: 2px;
+  border: solid 1px var(--bs-dark);
 }
 
+.table-container {
+  display: grid;
+  grid-template-columns: repeat(10, 15px [col-start]);
+  grid-template-rows: repeat(8, 15px [row-start]);
+}

src/components/editor-page/editor-pane/tool-bar/table-picker/table-size-picker-popover.tsx

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import React, { useCallback, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import { createNumberRangeArray } from '../../../../common/number-range/number-range'
 import { Button, Popover } from 'react-bootstrap'
 import { TableSizeText } from './table-size-text'
@@ -12,13 +12,11 @@ import { Trans, useTranslation } from 'react-i18next'
 import { cypressAttribute, cypressId } from '../../../../../utils/cypress-attribute'
 import { ForkAwesomeIcon } from '../../../../common/fork-awesome/fork-awesome-icon'
 import type { PopoverProps } from 'react-bootstrap/Popover'
-import { useOnRefChange } from '../../../../markdown-renderer/hooks/use-on-ref-change'
 import styles from './table-picker.module.scss'
 
-export interface TableSizePickerPopoverProps extends Omit<PopoverProps, 'id'> {
+export interface TableSizePickerPopoverProps extends PopoverProps {
   onShowCustomSizeModal: () => void
   onTableSizeSelected: (rows: number, cols: number) => void
-  onRefUpdate: (newRef: HTMLDivElement | null) => void
 }
 
 export interface TableSize {
@@ -34,72 +32,63 @@ export interface TableSize {
  * @param onRefUpdate The callback, that will be called if ref was updated.
  * @param props Additional props given directly to the modal
  */
-export const TableSizePickerPopover: React.FC<TableSizePickerPopoverProps> = ({
-  onShowCustomSizeModal,
-  onTableSizeSelected,
-  onRefUpdate,
-  ...props
-}) => {
-  const { t } = useTranslation()
-  const [tableSize, setTableSize] = useState<TableSize>()
+export const TableSizePickerPopover = React.forwardRef<HTMLDivElement, TableSizePickerPopoverProps>(
+  ({ onShowCustomSizeModal, onTableSizeSelected, ...props }, ref) => {
+    const { t } = useTranslation()
+    const [tableSize, setTableSize] = useState<TableSize>()
 
-  const onSizeHover = useCallback(
-    (selectedRows: number, selectedCols: number) => () => {
-      setTableSize({
-        rows: selectedRows,
-        columns: selectedCols
-      })
-    },
-    []
-  )
-
-  const tableContainer = useMemo(
-    () =>
-      createNumberRangeArray(8).map((row: number) =>
-        createNumberRangeArray(10).map((col: number) => {
-          const selected = tableSize && row < tableSize.rows && col < tableSize.columns
-          return (
-            <div
-              key={`${row}_${col}`}
-              className={`${styles['table-cell']} ${selected ? 'bg-primary border-primary' : ''}`}
-              {...cypressAttribute('selected', selected ? 'true' : 'false')}
-              {...cypressAttribute('col', `${col + 1}`)}
-              {...cypressAttribute('row', `${row + 1}`)}
-              onMouseEnter={onSizeHover(row + 1, col + 1)}
-              title={t('editor.editorToolbar.table.titleWithSize', { cols: col + 1, rows: row + 1 })}
-              onClick={() => onTableSizeSelected(row + 1, col + 1)}
-            />
-          )
+    const onSizeHover = useCallback(
+      (selectedRows: number, selectedCols: number) => () => {
+        setTableSize({
+          rows: selectedRows,
+          columns: selectedCols
         })
-      ),
-    [onTableSizeSelected, onSizeHover, t, tableSize]
-  )
+      },
+      []
+    )
 
-  const popoverRef = useRef<HTMLDivElement | null>(null)
-  useOnRefChange(popoverRef, (newRef) => onRefUpdate(newRef))
+    const tableContainer = useMemo(
+      () =>
+        createNumberRangeArray(8).map((row: number) =>
+          createNumberRangeArray(10).map((col: number) => {
+            const selected = tableSize && row < tableSize.rows && col < tableSize.columns
+            return (
+              <div
+                key={`${row}_${col}`}
+                className={`${styles['table-cell']} ${selected ? 'bg-primary border-primary' : ''}`}
+                {...cypressAttribute('selected', selected ? 'true' : 'false')}
+                {...cypressAttribute('col', `${col + 1}`)}
+                {...cypressAttribute('row', `${row + 1}`)}
+                onMouseEnter={onSizeHover(row + 1, col + 1)}
+                title={t('editor.editorToolbar.table.titleWithSize', { cols: col + 1, rows: row + 1 })}
+                onClick={() => onTableSizeSelected(row + 1, col + 1)}
+              />
+            )
+          })
+        ),
+      [onTableSizeSelected, onSizeHover, t, tableSize]
+    )
 
-  return (
-    <Popover
-      {...props}
-      ref={popoverRef}
-      id={'table-picker'}
-      {...cypressId('table-size-picker-popover')}
-      className={`${styles['table-picker-container']} bg-light`}>
-      <Popover.Header>
-        <TableSizeText tableSize={tableSize} />
-      </Popover.Header>
-      <Popover.Body>
-        <div className={styles['table-container']} role='grid'>
-          {tableContainer}
-        </div>
-        <div className='d-flex justify-content-center mt-2'>
-          <Button {...cypressId('show-custom-table-modal')} className={'text-center'} onClick={onShowCustomSizeModal}>
-            <ForkAwesomeIcon icon='table' />
-            &nbsp;
-            <Trans i18nKey={'editor.editorToolbar.table.customSize'} />
-          </Button>
-        </div>
-      </Popover.Body>
-    </Popover>
-  )
-}
+    return (
+      <Popover ref={ref} {...cypressId('table-size-picker-popover')} className={`bg-light`} {...props}>
+        <Popover.Header>
+          <TableSizeText tableSize={tableSize} />
+        </Popover.Header>
+        <Popover.Body>
+          <div className={styles['table-container']} role='grid'>
+            {tableContainer}
+          </div>
+          <div className='d-flex justify-content-center mt-2'>
+            <Button {...cypressId('show-custom-table-modal')} className={'text-center'} onClick={onShowCustomSizeModal}>
+              <ForkAwesomeIcon icon='table' />
+              &nbsp;
+              <Trans i18nKey={'editor.editorToolbar.table.customSize'} />
+            </Button>
+          </div>
+        </Popover.Body>
+      </Popover>
+    )
+  }
+)
+
+TableSizePickerPopover.displayName = 'TableSizePickerPopover'