[Bug]: Resizable Columns in Table Not Working

[kmarchandfindest]

Affected Packages

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

Version(s)

2.9.1

Bug Description

I am currently utilizing the editor equipped with the Table extension. The table and its commands are functioning properly, except for the resizable columns feature in the Table.configure. I have attempted various methods and custom implementations to enable column resizing, but none have yielded the desired results. The columns maintain a fixed size, preventing users from adjusting them by dragging the column borders. Additionally, I do not observe the resize cursor or handle when hovering over the columns.

Browser Used

Chrome

Code Example URL

https://tiptap.dev/docs/editor/extensions/nodes/table

Expected Behavior

Like the TipTap docs.

Additional Context (Optional)

My setup:

export const TiptapExtensionsKit = [
  StarterKit.configure({
    heading: {
      levels: [1, 2, 3],
    },
    horizontalRule: false,
    codeBlock: false,
    strike: false,
    code: false,
  }),
  Placeholder.configure({
    placeholder: "Type / to browse options",
  }),
  Highlight,
  Subscript,
  Superscript,
  Image,
  Table.configure({
    resizable: true,
    lastColumnResizable: false,
  }),
  TableRow,
  TableHeader,
  TableCell,
];

export const Editor: FC<IEditorProps> = ({
  onContentChangeAsync,
}: IEditorProps) => {
  const { editor, isEditOn } = useContext(EditorContext);
  const editorContainerRef = useRef<HTMLDivElement>(null);

  const onTransactionHandlerAsync = useCallback(
    async ({
      editor: updatedEditor,
      transaction,
    }: {
      editor: TiptapEditor;
      transaction: Transaction;
    }) => {
      if (transaction.steps.length > 0) {
        await onContentChangeAsync(JSON.stringify(updatedEditor.getJSON()));
      }
    },
    [onContentChangeAsync]
  );

  const debouncedOnTransactionHandlerAsync = useMemo(
    () =>
      debounce(onTransactionHandlerAsync, GeneralConstants.DEFAULT_MS_DELAY),
    [onTransactionHandlerAsync]
  );

  useEffect(() => {
    if (!editor) return;

    editor.on("transaction", debouncedOnTransactionHandlerAsync);

    return () => {
      editor.off("transaction", debouncedOnTransactionHandlerAsync);
    };
  }, [editor, debouncedOnTransactionHandlerAsync]);

  if (!editor) return null;

  return (
    <div ref={editorContainerRef} style={{ position: "relative" }}>
      <EditorLeftFloatingMenu editor={editor} isEditOn={isEditOn} />
      <EditorContent editor={editor} />
      {editorContainerRef.current && (
        <EditorFloatingLinkMenu
          editor={editor}
          appendTo={editorContainerRef.current}
        />
      )}
      {editorContainerRef.current && (
        <EditorFloatingTableMenu
          editor={editor}
          appendTo={editorContainerRef.current}
        />
      )}
      <EditorFloatingSelectMenu />
    </div>
  );
};

  const editor = useEditor({
    extensions: ExtensionsKit,
    content: "",
    autofocus: true,
    injectCSS: false,
    editable: isEditOn,
  });

// Extensions
import { TiptapExtensionsKit } from "./TiptapExtensionsKit";
import { CustomExtensionsKit } from "./CustomExtensionsKit";

export const ExtensionsKit = [...TiptapExtensionsKit, ...CustomExtensionsKit];

.ProseMirror {
    &.resize-cursor {
        cursor: ew-resize;
        cursor: col-resize;
      }

    .column-resize-handle {
        background-color: red;
        bottom: -2px;
        pointer-events: none;
        position: absolute;
        right: -2px;
        top: 0;
        width: 4px;
    }
}

Image of my editor with a table and HTML element (my cursor is hover the column) :

Dependency Updates

• [X] Yes, I've updated all my dependencies.

[noy4]

It seems you need to init editor with editable: true to use columnResizing

https://github.com/ueberdosis/tiptap/blob/84ebd511d29db566e66e8f9b617179cf19ed2531/packages/extension-table/src/table.ts#L425-L443

workaround: init editor with editable: true (or not pass editable option), and editor.setEditable(false) later

[kmarchandfindest]

Indeed it works. Thanks for the help.