fix: disable insert table when in table

Fixes #686

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<boolean>(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 (
     <ButtonWithTooltip
       title={t('toolbar.table', 'Insert Table')}
       onClick={() => {
         insertTable({ rows: 3, columns: 3 })
       }}
+      {...(isDisabled ? { 'aria-disabled': true, 'data-disabled': true, disabled: true } : {})}
     >
       {iconComponentFor('table')}
     </ButtonWithTooltip>