Merge pull request #14712 from overleaf/mj-table-adjustbox

[visual] Disable caption dropdown when tabular is wrapped in command

GitOrigin-RevId: 08131d27e8bb4cb99eee3060435084f671bc3dd6

services/web/frontend/js/features/source-editor/components/table-generator/contexts/table-context.tsx

@@ -29,6 +29,7 @@ const TableContext = createContext<
       tableEnvironment?: TableEnvironmentData
       rows: number
       columns: number
+      directTableChild?: boolean
     }
   | undefined
 >(undefined)
@@ -38,7 +39,15 @@ export const TableProvider: FC<{
   tableNode: SyntaxNode | null
   tabularNode: SyntaxNode
   view: EditorView
-}> = ({ tableData, children, tableNode, tabularNode, view }) => {
+  directTableChild?: boolean
+}> = ({
+  tableData,
+  children,
+  tableNode,
+  tabularNode,
+  view,
+  directTableChild,
+}) => {
   try {
     const positions: Positions = {
       cells: tableData.cellPositions,
@@ -59,6 +68,7 @@ export const TableProvider: FC<{
           tableEnvironment,
           rows: tableData.table.rows.length,
           columns: tableData.table.columns.length,
+          directTableChild,
         }}
       >
         {children}

services/web/frontend/js/features/source-editor/components/table-generator/tabular.tsx

@@ -227,7 +227,8 @@ export const Tabular: FC<{
   view: EditorView
   tableNode: SyntaxNode | null
   parsedTableData: ParsedTableData
-}> = ({ tabularNode, view, tableNode, parsedTableData }) => {
+  directTableChild?: boolean
+}> = ({ tabularNode, view, tableNode, parsedTableData, directTableChild }) => {
   return (
     <ErrorBoundary
       fallbackRender={() => (
@@ -241,6 +242,7 @@ export const Tabular: FC<{
               tabularNode={tabularNode}
               tableData={parsedTableData}
               tableNode={tableNode}
+              directTableChild={directTableChild}
               view={view}
             >
               <SelectionContextProvider>

services/web/frontend/js/features/source-editor/components/table-generator/toolbar/toolbar-dropdown.tsx

@@ -81,10 +81,17 @@ export const ToolbarDropdown: FC<{
     </Overlay>
   )
 
-  if (!tooltip) {
+  if (tooltip || (disabled && disabledTooltip)) {
     return (
       <>
-        {button}
+        <Tooltip
+          hidden={open}
+          id={id}
+          description={disabled && disabledTooltip ? disabledTooltip : tooltip}
+          overlayProps={{ placement: 'bottom' }}
+        >
+          {button}
+        </Tooltip>
         {overlay}
       </>
     )
@@ -92,14 +99,7 @@ export const ToolbarDropdown: FC<{
 
   return (
     <>
-      <Tooltip
-        hidden={open}
-        id={id}
-        description={disabled && disabledTooltip ? disabledTooltip : tooltip}
-        overlayProps={{ placement: 'bottom' }}
-      >
-        {button}
-      </Tooltip>
+      {button}
       {overlay}
     </>
   )

services/web/frontend/js/features/source-editor/components/table-generator/toolbar/toolbar.tsx

@@ -26,8 +26,14 @@ import { useTranslation } from 'react-i18next'
 export const Toolbar = memo(function Toolbar() {
   const { selection, setSelection } = useSelectionContext()
   const view = useCodeMirrorViewContext()
-  const { positions, rowSeparators, cellSeparators, tableEnvironment, table } =
-    useTableContext()
+  const {
+    positions,
+    rowSeparators,
+    cellSeparators,
+    tableEnvironment,
+    table,
+    directTableChild,
+  } = useTableContext()
   const { showHelp } = useTabularContext()
   const { t } = useTranslation()
 
@@ -64,7 +70,10 @@ export const Toolbar = memo(function Toolbar() {
         <ToolbarDropdown
           id="table-generator-caption-dropdown"
           label={captionLabel}
-          disabled={!tableEnvironment}
+          disabled={!tableEnvironment || !directTableChild}
+          disabledTooltip={t(
+            'to_insert_or_move_a_caption_make_sure_tabular_is_directly_within_table'
+          )}
         >
           <ToolbarDropdownItem
             id="table-generator-caption-none"

services/web/frontend/js/features/source-editor/extensions/visual/atomic-decorations.ts

@@ -45,6 +45,7 @@ import { EnvironmentLineWidget } from './visual-widgets/environment-line'
 import {
   ListEnvironmentName,
   ancestorOfNodeWithType,
+  isDirectChildOfEnvironment,
 } from '../../utils/tree-operations/ancestors'
 import { InlineGraphicsWidget } from './visual-widgets/inline-graphics'
 import getMeta from '../../../../utils/meta'
@@ -320,17 +321,23 @@ export const atomicDecorations = (options: Options) => {
             nodeRef.type.is('TabularEnvironment')
           ) {
             if (shouldDecorate(state, nodeRef)) {
+              const tabularNode = nodeRef.node
               const tableNode = ancestorOfNodeWithType(
-                nodeRef.node,
+                tabularNode,
                 'TableEnvironment'
               )
+              const directChild = isDirectChildOfEnvironment(
+                tabularNode.parent,
+                tableNode
+              )
               const tabularWidget = new TabularWidget(
-                nodeRef.node,
+                tabularNode,
                 state.doc.sliceString(
-                  (tableNode ?? nodeRef).from,
-                  (tableNode ?? nodeRef).to
+                  (tableNode ?? tabularNode).from,
+                  (tableNode ?? tabularNode).to
                 ),
                 tableNode,
+                directChild,
                 state
               )
 

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/tabular.tsx

@@ -16,6 +16,7 @@ export class TabularWidget extends WidgetType {
     private tabularNode: SyntaxNode,
     private content: string,
     private tableNode: SyntaxNode | null,
+    private isDirectChildOfTableEnvironment: boolean,
     state: EditorState
   ) {
     super()
@@ -64,6 +65,7 @@ export class TabularWidget extends WidgetType {
           tabularNode={this.tabularNode}
           parsedTableData={this.parseResult}
           tableNode={this.tableNode}
+          directTableChild={this.isDirectChildOfTableEnvironment}
         />,
         this.element
       )
@@ -91,6 +93,7 @@ export class TabularWidget extends WidgetType {
         tabularNode={this.tabularNode}
         parsedTableData={this.parseResult}
         tableNode={this.tableNode}
+        directTableChild={this.isDirectChildOfTableEnvironment}
       />,
       this.element
     )

services/web/frontend/js/features/source-editor/utils/tree-operations/ancestors.ts

@@ -278,3 +278,11 @@ export const minimumListDepthForSelection = (state: EditorState) => {
   }
   return Math.min(...depths)
 }
+
+export const isDirectChildOfEnvironment = (
+  child?: SyntaxNode | null,
+  ancestor?: SyntaxNode | null
+) => {
+  const possiblyAncestor = child?.parent?.parent?.parent // Text → Content → Environment
+  return ancestor === possiblyAncestor
+}