diff --git a/src/plugins/toolbar/components/InsertTable.tsx b/src/plugins/toolbar/components/InsertTable.tsx index 324cd475..6adafec8 100644 --- a/src/plugins/toolbar/components/InsertTable.tsx +++ b/src/plugins/toolbar/components/InsertTable.tsx @@ -1,8 +1,18 @@ import { ButtonWithTooltip } from '.././primitives/toolbar' import React from 'react' import { insertTable$ } from '../../table' -import { useCellValue, usePublisher } from '@mdxeditor/gurx' -import { iconComponentFor$, useTranslation } from '../../core' +import { Cell, map, useCellValue, usePublisher } from '@mdxeditor/gurx' +import { activeEditor$, iconComponentFor$, useTranslation } from '../../core' + +const disableInsertTableButton$ = Cell(false, (r) => { + r.link( + r.pipe( + activeEditor$, + map((editor) => ['td', 'th'].includes(editor?.getRootElement()?.parentNode?.nodeName.toLowerCase() ?? '')) + ), + disableInsertTableButton$ + ) +}) /** * A toolbar button that allows the user to insert a table. @@ -14,12 +24,16 @@ export const InsertTable: React.FC = () => { const insertTable = usePublisher(insertTable$) const t = useTranslation() + // Do not allow inserting a table inside a table cell, markdown does not support it + const isDisabled = useCellValue(disableInsertTableButton$) + return ( { insertTable({ rows: 3, columns: 3 }) }} + {...(isDisabled ? { 'aria-disabled': true, 'data-disabled': true, disabled: true } : {})} > {iconComponentFor('table')}