fix: disable lists in table cells (#910)

* fix: disable lists in table cells

* lint fixes

Author: goodforenergy

src/plugins/core/index.ts

@@ -744,6 +744,33 @@ export const nestedEditorChildren$ = Cell<React.ComponentType[]>([])
  */
 export const addNestedEditorChild$ = Appender(nestedEditorChildren$)
 
+/**
+ * React Components registered to be rendered inside table cell editors. Use this instead of {@link addNestedEditorChild$} for components that should only appear in table cells.
+ * Plugins that should not be active in table cells (e.g. lists) should not register here.
+ * @group Core
+ */
+export const tableCellEditorChildren$ = Cell<React.ComponentType[]>([])
+
+/**
+ * Lets you add React components as children of table cell editors.
+ * @group Core
+ */
+export const addTableCellEditorChild$ = Appender(tableCellEditorChildren$)
+
+/**
+ * Whether the currently active editor is inside a table cell.
+ * @group Core
+ */
+export const editorInTable$ = Cell<boolean>(false, (r) => {
+  r.link(
+    r.pipe(
+      activeEditor$,
+      map((editor) => ['td', 'th'].includes(editor?.getRootElement()?.parentNode?.nodeName.toLowerCase() ?? ''))
+    ),
+    editorInTable$
+  )
+})
+
 /** @internal */
 export const historyState$ = Cell(createEmptyHistoryState())
 

src/plugins/link/index.tsx

@@ -6,7 +6,15 @@ import { LinkPlugin as LexicalLinkPlugin } from '@lexical/react/LexicalLinkPlugi
 import { LexicalAutoLinkPlugin } from './AutoLinkPlugin'
 import { Cell } from '@mdxeditor/gurx'
 import { realmPlugin } from '../../RealmWithPlugins'
-import { addImportVisitor$, addLexicalNode$, addExportVisitor$, addComposerChild$, addActivePlugin$, addNestedEditorChild$ } from '../core'
+import {
+  addImportVisitor$,
+  addLexicalNode$,
+  addExportVisitor$,
+  addComposerChild$,
+  addActivePlugin$,
+  addNestedEditorChild$,
+  addTableCellEditorChild$
+} from '../core'
 
 /**
  * Holds whether the auto-linking of URLs and email addresses is disabled.
@@ -46,6 +54,7 @@ export const linkPlugin = realmPlugin<{
       [addExportVisitor$]: LexicalLinkVisitor,
       [disableAutoLink$]: disableAutoLink,
       [addNestedEditorChild$]: EditorChild,
+      [addTableCellEditorChild$]: EditorChild,
       [addComposerChild$]: EditorChild
     })
   }

src/plugins/lists/index.ts

@@ -110,6 +110,7 @@ export const listsPlugin = realmPlugin({
       [addToMarkdownExtension$]: gfmTaskListItemToMarkdown(),
       [addComposerChild$]: [TabIndentationPlugin, ListPlugin, CheckListPlugin],
       [addNestedEditorChild$]: [TabIndentationPlugin, ListPlugin, CheckListPlugin]
+      // Note: intentionally not registered to addTableCellEditorChild$ — lists are not supported in table cells
     })
   }
 })

src/plugins/markdown-shortcut/index.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import {
   BOLD_ITALIC_STAR,
   BOLD_ITALIC_UNDERSCORE,
@@ -19,10 +20,9 @@ import {
 import { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin'
 import { $createHeadingNode, $isHeadingNode, HeadingNode, HeadingTagType } from '@lexical/rich-text'
 import { ElementNode, LexicalNode } from 'lexical'
-import React from 'react'
 import { realmPlugin } from '../../RealmWithPlugins'
 import { $createCodeBlockNode, CodeBlockNode } from '../codeblock/CodeBlockNode'
-import { activePlugins$, addComposerChild$, addNestedEditorChild$ } from '../core'
+import { activePlugins$, addComposerChild$, addNestedEditorChild$, addTableCellEditorChild$ } from '../core'
 import { HEADING_LEVEL, allowedHeadingLevels$ } from '../headings'
 import { $createHorizontalRuleNode, $isHorizontalRuleNode, HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode'
 
@@ -35,9 +35,11 @@ export const markdownShortcutPlugin = realmPlugin({
     const pluginIds = realm.getValue(activePlugins$)
     const allowedHeadingLevels: readonly HEADING_LEVEL[] = pluginIds.includes('headings') ? realm.getValue(allowedHeadingLevels$) : []
     const transformers = pickTransformersForActivePlugins(pluginIds, allowedHeadingLevels)
+    const tableCellTransformers = transformers.filter((t) => !LIST_TRANSFORMERS.has(t))
     realm.pubIn({
       [addComposerChild$]: () => <MarkdownShortcutPlugin transformers={transformers} />,
-      [addNestedEditorChild$]: () => <MarkdownShortcutPlugin transformers={transformers} />
+      [addNestedEditorChild$]: () => <MarkdownShortcutPlugin transformers={transformers} />,
+      [addTableCellEditorChild$]: () => <MarkdownShortcutPlugin transformers={tableCellTransformers} />
     })
   }
 })
@@ -72,6 +74,8 @@ const THEMATIC_BREAK: ElementTransformer = {
   type: 'element'
 }
 
+const LIST_TRANSFORMERS: ReadonlySet<Transformer> = new Set([ORDERED_LIST, UNORDERED_LIST, CHECK_LIST])
+
 function pickTransformersForActivePlugins(pluginIds: string[], allowedHeadingLevels: readonly HEADING_LEVEL[]) {
   const transformers: Transformer[] = [
     BOLD_ITALIC_STAR,

src/plugins/table/TableEditor.tsx

@@ -41,7 +41,7 @@ import {
   importVisitors$,
   jsxComponentDescriptors$,
   jsxIsAvailable$,
-  nestedEditorChildren$,
+  tableCellEditorChildren$,
   readOnly$,
   rootEditor$,
   useTranslation,
@@ -346,7 +346,7 @@ const CellEditor: React.FC<CellProps> = ({ focus, setActiveCell, parentEditor, l
     codeBlockEditorDescriptors,
     jsxIsAvailable,
     rootEditor,
-    nestedEditorChildren
+    tableCellEditorChildren
   ] = useCellValues(
     importVisitors$,
     exportVisitors$,
@@ -356,7 +356,7 @@ const CellEditor: React.FC<CellProps> = ({ focus, setActiveCell, parentEditor, l
     codeBlockEditorDescriptors$,
     jsxIsAvailable$,
     rootEditor$,
-    nestedEditorChildren$
+    tableCellEditorChildren$
   )
 
   const [editor] = React.useState(() => {
@@ -471,7 +471,7 @@ const CellEditor: React.FC<CellProps> = ({ focus, setActiveCell, parentEditor, l
     <LexicalNestedComposer initialEditor={editor}>
       <RichTextPlugin contentEditable={<ContentEditable />} placeholder={<div></div>} ErrorBoundary={LexicalErrorBoundary} />
 
-      {nestedEditorChildren.map((Child, index) => (
+      {tableCellEditorChildren.map((Child, index) => (
         <Child key={index} />
       ))}
       <HistoryPlugin />

src/plugins/toolbar/components/InsertTable.tsx

@@ -1,18 +1,8 @@
 import { ButtonWithTooltip } from '.././primitives/toolbar'
 import React from 'react'
 import { insertTable$ } from '../../table'
-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$
-  )
-})
+import { useCellValue, usePublisher } from '@mdxeditor/gurx'
+import { editorInTable$, iconComponentFor$, useTranslation } from '../../core'
 
 /**
  * A toolbar button that allows the user to insert a table.
@@ -25,7 +15,7 @@ export const InsertTable: React.FC = () => {
   const t = useTranslation()
 
   // Do not allow inserting a table inside a table cell, markdown does not support it
-  const isDisabled = useCellValue(disableInsertTableButton$)
+  const isDisabled = useCellValue(editorInTable$)
 
   return (
     <ButtonWithTooltip

src/plugins/toolbar/components/ListsToggle.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { applyListType$, currentListType$ } from '../../lists'
 import { SingleChoiceToggleGroup } from '.././primitives/toolbar'
 import { useCellValues, usePublisher } from '@mdxeditor/gurx'
-import { iconComponentFor$, useTranslation } from '../../core'
+import { editorInTable$, iconComponentFor$, useTranslation } from '../../core'
 
 const ICON_NAME_MAP = {
   bullet: 'format_list_bulleted',
@@ -18,7 +18,7 @@ const ICON_NAME_MAP = {
  * @param options - The list types that the user can toggle between. Defaults to `['bullet', 'number', 'check']`.
  */
 export const ListsToggle: React.FC<{ options?: ('bullet' | 'number' | 'check')[] }> = ({ options = ['bullet', 'number', 'check'] }) => {
-  const [currentListType, iconComponentFor] = useCellValues(currentListType$, iconComponentFor$)
+  const [currentListType, iconComponentFor, inTable] = useCellValues(currentListType$, iconComponentFor$, editorInTable$)
   const applyListType = usePublisher(applyListType$)
   const t = useTranslation()
 
@@ -34,5 +34,5 @@ export const ListsToggle: React.FC<{ options?: ('bullet' | 'number' | 'check')[]
     contents: iconComponentFor(ICON_NAME_MAP[type])
   }))
 
-  return <SingleChoiceToggleGroup value={currentListType || ''} items={items} onChange={applyListType} />
+  return <SingleChoiceToggleGroup value={currentListType || ''} items={items} onChange={applyListType} disabled={inTable} />
 }

src/plugins/toolbar/primitives/toolbar.tsx

@@ -142,7 +142,8 @@ export const SingleChoiceToggleGroup = <T extends string>({
   onChange,
   className,
   ggClassName,
-  items
+  items,
+  disabled
 }: {
   items: {
     title: string
@@ -153,6 +154,7 @@ export const SingleChoiceToggleGroup = <T extends string>({
   value: T | ''
   ggClassName?: string
   className?: string
+  disabled?: boolean
 }) => {
   const t = useTranslation()
 
@@ -164,6 +166,7 @@ export const SingleChoiceToggleGroup = <T extends string>({
         className={classNames(styles.toolbarToggleSingleGroup, className)}
         onValueChange={onChange}
         value={value || ''}
+        disabled={disabled}
         onFocus={(e) => {
           e.preventDefault()
         }}