11'use client'
22
3- import type {
4- HTMLTableElementWithWithTableSelectionState ,
5- TableRowNode ,
6- TableSelection ,
7- } from '@lexical/table'
3+ import type { TableObserver , TableRowNode , TableSelection } from '@lexical/table'
84import type { ElementNode } from 'lexical'
95import type { JSX } from 'react'
106
@@ -24,10 +20,12 @@ import {
2420 $isTableRowNode ,
2521 $isTableSelection ,
2622 $unmergeCell ,
23+ getTableElement ,
2724 getTableObserverFromTableElement ,
2825 TableCellHeaderStates ,
2926 TableCellNode ,
3027} from '@lexical/table'
28+ import { mergeRegister } from '@lexical/utils'
3129import { useScrollInfo } from '@payloadcms/ui'
3230import {
3331 $createParagraphNode ,
@@ -37,15 +35,18 @@ import {
3735 $isParagraphNode ,
3836 $isRangeSelection ,
3937 $isTextNode ,
38+ COMMAND_PRIORITY_CRITICAL ,
39+ getDOMSelection ,
40+ SELECTION_CHANGE_COMMAND ,
4041} from 'lexical'
4142import * as React from 'react'
4243import { useCallback , useEffect , useRef , useState } from 'react'
4344import { createPortal } from 'react-dom'
4445
4546import type { PluginComponentWithAnchor } from '../../../../typesClient.js'
4647
47- import { MeatballsIcon } from '../../../../../lexical/ui/icons/Meatballs/index.js'
4848import './index.scss'
49+ import { MeatballsIcon } from '../../../../../lexical/ui/icons/Meatballs/index.js'
4950
5051function computeSelectionCount ( selection : TableSelection ) : {
5152 columns : number
@@ -201,17 +202,15 @@ function TableActionMenu({
201202 editor . update ( ( ) => {
202203 if ( tableCellNode . isAttached ( ) ) {
203204 const tableNode = $getTableNodeFromLexicalNodeOrThrow ( tableCellNode )
204- const tableElement = editor . getElementByKey (
205- tableNode . getKey ( ) ,
206- ) as HTMLTableElementWithWithTableSelectionState
205+ const tableElement = getTableElement ( tableNode , editor . getElementByKey ( tableNode . getKey ( ) ) )
207206
208- if ( ! tableElement ) {
207+ if ( tableElement === null ) {
209208 throw new Error ( 'Expected to find tableElement in DOM' )
210209 }
211210
212211 const tableObserver = getTableObserverFromTableElement ( tableElement )
213212 if ( tableObserver !== null ) {
214- tableObserver . clearHighlight ( )
213+ tableObserver . $ clearHighlight( )
215214 }
216215
217216 tableNode . markDirty ( )
@@ -409,7 +408,7 @@ function TableActionMenu({
409408 onClick = { ( ) => mergeTableCellsAtSelection ( ) }
410409 type = "button"
411410 >
412- Merge cells
411+ < span className = "text" > Merge cells</ span >
413412 </ button >
414413 )
415414 } else if ( canUnmergeCell ) {
@@ -420,7 +419,7 @@ function TableActionMenu({
420419 onClick = { ( ) => unmergeTableCellsAtSelection ( ) }
421420 type = "button"
422421 >
423- Unmerge cells
422+ < span className = "text" > Unmerge cells</ span >
424423 </ button >
425424 )
426425 }
@@ -555,24 +554,32 @@ function TableCellActionMenuContainer({
555554} ) : JSX . Element {
556555 const [ editor ] = useLexicalComposerContext ( )
557556
558- const menuButtonRef = useRef ( null )
559- const menuRootRef = useRef ( null )
557+ const menuButtonRef = useRef < HTMLDivElement | null > ( null )
558+ const menuRootRef = useRef < HTMLButtonElement | null > ( null )
560559 const [ isMenuOpen , setIsMenuOpen ] = useState ( false )
561560
562561 const [ tableCellNode , setTableMenuCellNode ] = useState < null | TableCellNode > ( null )
563562
564563 const $moveMenu = useCallback ( ( ) => {
565564 const menu = menuButtonRef . current
566565 const selection = $getSelection ( )
567- const nativeSelection = window . getSelection ( )
566+ const nativeSelection = getDOMSelection ( editor . _window )
568567 const activeElement = document . activeElement
568+ function disable ( ) {
569+ if ( menu ) {
570+ menu . classList . remove ( 'table-cell-action-button-container--active' )
571+ menu . classList . add ( 'table-cell-action-button-container--inactive' )
572+ }
573+ setTableMenuCellNode ( null )
574+ }
569575
570576 if ( selection == null || menu == null ) {
571- setTableMenuCellNode ( null )
572- return
577+ return disable ( )
573578 }
574579
575580 const rootElement = editor . getRootElement ( )
581+ let tableObserver : null | TableObserver = null
582+ let tableCellParentNodeDOM : HTMLElement | null = null
576583
577584 if (
578585 $isRangeSelection ( selection ) &&
@@ -585,53 +592,85 @@ function TableCellActionMenuContainer({
585592 )
586593
587594 if ( tableCellNodeFromSelection == null ) {
588- setTableMenuCellNode ( null )
589- return
595+ return disable ( )
590596 }
591597
592- const tableCellParentNodeDOM = editor . getElementByKey ( tableCellNodeFromSelection . getKey ( ) )
598+ tableCellParentNodeDOM = editor . getElementByKey ( tableCellNodeFromSelection . getKey ( ) )
593599
594- if ( tableCellParentNodeDOM == null ) {
595- setTableMenuCellNode ( null )
596- return
600+ if ( tableCellParentNodeDOM == null || ! tableCellNodeFromSelection . isAttached ( ) ) {
601+ return disable ( )
597602 }
598603
599- setTableMenuCellNode ( tableCellNodeFromSelection )
600- } else if ( ! activeElement ) {
601- setTableMenuCellNode ( null )
602- }
603- } , [ editor ] )
604-
605- useEffect ( ( ) => {
606- return editor . registerUpdateListener ( ( ) => {
607- editor . getEditorState ( ) . read ( ( ) => {
608- $moveMenu ( )
609- } )
610- } )
611- } )
604+ const tableNode = $getTableNodeFromLexicalNodeOrThrow ( tableCellNodeFromSelection )
605+ const tableElement = getTableElement ( tableNode , editor . getElementByKey ( tableNode . getKey ( ) ) )
612606
613- useEffect ( ( ) => {
614- const menuButtonDOM = menuButtonRef . current as HTMLButtonElement | null
607+ if ( tableElement === null ) {
608+ throw new Error ( 'TableActionMenu: Expected to find tableElement in DOM' )
609+ }
615610
616- if ( menuButtonDOM != null && tableCellNode != null ) {
617- const tableCellNodeDOM = editor . getElementByKey ( tableCellNode . getKey ( ) )
611+ tableObserver = getTableObserverFromTableElement ( tableElement )
612+ setTableMenuCellNode ( tableCellNodeFromSelection )
613+ } else if ( $isTableSelection ( selection ) ) {
614+ const anchorNode = $getTableCellNodeFromLexicalNode ( selection . anchor . getNode ( ) )
615+ if ( ! $isTableCellNode ( anchorNode ) ) {
616+ throw new Error ( 'TableSelection anchorNode must be a TableCellNode' )
617+ }
618+ const tableNode = $getTableNodeFromLexicalNodeOrThrow ( anchorNode )
619+ const tableElement = getTableElement ( tableNode , editor . getElementByKey ( tableNode . getKey ( ) ) )
618620
619- if ( tableCellNodeDOM != null ) {
620- const tableCellRect = tableCellNodeDOM . getBoundingClientRect ( )
621- const menuRect = menuButtonDOM . getBoundingClientRect ( )
622- const anchorRect = anchorElem . getBoundingClientRect ( )
621+ if ( tableElement === null ) {
622+ throw new Error ( 'TableActionMenu: Expected to find tableElement in DOM' )
623+ }
623624
624- const top = tableCellRect . top - anchorRect . top + 4
625- const left = tableCellRect . right - menuRect . width - 10 - anchorRect . left
625+ tableObserver = getTableObserverFromTableElement ( tableElement )
626+ tableCellParentNodeDOM = editor . getElementByKey ( anchorNode . getKey ( ) )
627+ } else if ( ! activeElement ) {
628+ return disable ( )
629+ }
630+ if ( tableObserver === null || tableCellParentNodeDOM === null ) {
631+ return disable ( )
632+ }
633+ const enabled = ! tableObserver || ! tableObserver . isSelecting
634+ menu . classList . toggle ( 'table-cell-action-button-container--active' , enabled )
635+ menu . classList . toggle ( 'table-cell-action-button-container--inactive' , ! enabled )
636+ if ( enabled ) {
637+ const tableCellRect = tableCellParentNodeDOM . getBoundingClientRect ( )
638+ const anchorRect = anchorElem . getBoundingClientRect ( )
639+ const top = tableCellRect . top - anchorRect . top
640+ const left = tableCellRect . right - anchorRect . left
641+ menu . style . transform = `translate(${ left } ${ top }
642+ }
643+ } , [ editor , anchorElem ] )
626644
627- menuButtonDOM . style . opacity = '1'
628- menuButtonDOM . style . transform = `translate(${ left } ${ top }
629- } else {
630- menuButtonDOM . style . opacity = '0'
631- menuButtonDOM . style . transform = 'translate(-10000px, -10000px)'
645+ useEffect ( ( ) => {
646+ // We call the $moveMenu callback every time the selection changes,
647+ // once up front, and once after each mouseUp
648+ let timeoutId : ReturnType < typeof setTimeout > | undefined = undefined
649+ const callback = ( ) => {
650+ timeoutId = undefined
651+ editor . getEditorState ( ) . read ( $moveMenu )
652+ }
653+ const delayedCallback = ( ) => {
654+ if ( timeoutId === undefined ) {
655+ timeoutId = setTimeout ( callback , 0 )
632656 }
657+ return false
633658 }
634- } , [ menuButtonRef , tableCellNode , editor , anchorElem ] )
659+ return mergeRegister (
660+ editor . registerUpdateListener ( delayedCallback ) ,
661+ editor . registerCommand ( SELECTION_CHANGE_COMMAND , delayedCallback , COMMAND_PRIORITY_CRITICAL ) ,
662+ editor . registerRootListener ( ( rootElement , prevRootElement ) => {
663+ if ( prevRootElement ) {
664+ prevRootElement . removeEventListener ( 'mouseup' , delayedCallback )
665+ }
666+ if ( rootElement ) {
667+ rootElement . addEventListener ( 'mouseup' , delayedCallback )
668+ delayedCallback ( )
669+ }
670+ } ) ,
671+ ( ) => clearTimeout ( timeoutId ) ,
672+ )
673+ } )
635674
636675 const prevTableCellDOM = useRef ( tableCellNode )
637676
0 commit comments