ueberdosis / tiptap

The headless rich text editor framework for web artisans.
https://tiptap.dev
MIT License
26.56k stars 2.23k forks source link

[Bug]: `editor.can().insertTable()` should not always be true #5362

Open Ragnar-Oock opened 1 month ago

Ragnar-Oock commented 1 month ago

Affected Packages

@tiptap/extension-table, @tiptap/extension-table-cell, @tiptap/extension-table-header, @tiptap/extension-table-row

Version(s)

2.5.3

Bug Description

Running editor.can().insertTable() always results in a true return. This is the case even when the position of the selection only allows paragraph+ for example (see snippet below).

import { TableCell } from '@tiptap/extension-table-cell';
import { VueNodeViewRenderer } from '@tiptap/vue-2';
import TableCellNodeView from './table-cell.node-view.vue';

export const TableCellVue = TableCell
  .extend({
    content: 'paragraph+',
    addNodeView() {
      return VueNodeViewRenderer(TableCellNodeView);
    },
});

this makes it impossible to disable the table creation UI depending on the editor state like we can with other extensions.

Browser Used

Firefox

Code Example URL

https://codesandbox.io/p/sandbox/falling-surf-wltf4d?file=%2Fsrc%2Fcomponents%2FEditor.vue&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clypxyh1b00072a6as8r53fpe%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clypxyh1b00032a6a9u7ddp9v%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clypxyh1b00042a6a3qug1cgl%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clypxyh1b00062a6aqc71dr73%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clypxyh1b00032a6a9u7ddp9v%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clypxyh1b00022a6absq3gd4j%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Fcomponents%252FEditor.vue%2522%257D%255D%252C%2522id%2522%253A%2522clypxyh1b00032a6a9u7ddp9v%2522%252C%2522activeTabId%2522%253A%2522clypxyh1b00022a6absq3gd4j%2522%257D%252C%2522clypxyh1b00062a6aqc71dr73%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clypxyh1b00052a6avnqvvd7v%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clypxyh1b00062a6aqc71dr73%2522%252C%2522activeTabId%2522%253A%2522clypxyh1b00052a6avnqvvd7v%2522%257D%252C%2522clypxyh1b00042a6a3qug1cgl%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clypxyh1b00042a6a3qug1cgl%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Expected Behavior

When the selection is inside a Node with a content that doesn't allow for tables (for example paragraph+) then the insertTable command should not add a table there and invoking editor.can().insertTable() should return false.

Additional Context (Optional)

No response

Dependency Updates

Ragnar-Oock commented 1 month ago

I suspect the issue comes from the return true in insertTable (https://github.com/ueberdosis/tiptap/blob/46079c28a69acac3f70b811c7e3ff49ddd40e645/packages/extension-table/src/table.ts#L312) but I have no idea what to change it to to make it work like other commands

I suspect that other commands of this extension have the same issue I haven't tried them all yet. Thought I have confirmed that .can().splitCell() and .can().mergeCells() do work as expected.