Is it possible to display the bubble menu only when the table is dragged (selected)?

[ryuhangyeong]

Description

When the current table has focus. A bubble menu will appear.

Is there a way to make the bubble menu appear only when the table is dragged (selected)?

relationship

#4675

[kart-c]

Sorry, I am little confused😅
Do you want the bubble menu to appear when table has focus? Or when it is being dragged using a drag handle?

Assuming the bubble menu is expected to show up when the table has focus, adding editor.isActive('table') in the shouldShow prop in BubbleMenu should help.

[ryuhangyeong]

Example 1

When text in a table is dragged.

A bubble menu appears where you can edit text size and change color.

Example 2

When table rows and columns are selected

Shows bubble menus related to tables, such as adding and merging tables

Is it possible to differentiate these so that an appropriate bubble menu appears?

[ryuhangyeong]

I've created a new discussion for more detailed explanation.

#5697

[nperez0111]

Please do not make a new discussion you are just spamming

[kart-c]

Oh, so you want to listen to cells being selected? I am not sure if tiptap provides a similar functionality.

I noticed that in this example, tiptap does provide merge cell functionality, where you select two or more cells and click on the merge button.

I saw the merge functionality comes from prosemirror-tables, so this particular function would be a good starting point.

[ryuhangyeong]

Self Answer

<BubbleMenu
  editor={editor}
  tippyOptions={{ placement: "bottom" }}
  shouldShow={({ editor, state }) => {
    const { selection } = state;

    const isText = isTextSelection(selection);

    return !isText && editor?.isActive("table");
  }}
>
  table bubble menu
</BubbleMenu>