adding table extension

[kamil-malinski]

Hi!

Thank you for this nice project.

I'm trying to add the table extension to the editor and I'm having a hard time to get it done.

In /interface/tools/index.ts I just tried to import Table, TableRow, TableCell and TableHeader:

import { Table } from "@tiptap/extension-table";
import { TableRow } from "@tiptap/extension-table-row";
import { TableCell } from "@tiptap/extension-table-cell";
import { TableHeader } from "@tiptap/extension-table-header";

after I tried to add the objects to the tools:

const tools: Tool[] = [
  ...
  Table,
  TableRow,
  TableCell,
  TableHeader,
  ...
];

but I end up with:

TypeError: extension is undefined
    toolsExtensions http://localhost:8055/extensions/sources/index.js:46286
    toolsExtensions http://localhost:8055/extensions/sources/index.js:46284
    setup http://localhost:8055/extensions/sources/index.js:48954
    $e http://localhost:8055/admin/assets/runtime-core.esm-bundler-474556af.js:1
    uo http://localhost:8055/admin/assets/runtime-core.esm-bundler-474556af.js:1
    nl http://localhost:8055/admin/assets/runtime-core.esm-bundler-474556af.js:1
    L http://localhost:8055/admin/assets/runtime-core.esm-bundler-474556af.js:1
    J http://localhost:8055/admin/assets/runtime-core.esm-bundler-474556af.js:1
    P http://localhost:8055/admin/assets/runtime-core.esm-bundler-474556af.js:1
    C http://localhost:8055/admin/assets/runtime-core.esm-bundler-474556af.js:1
    se http://localhost:8055/admin/assets/runtime-core.esm-bundler-474556af.js:1
    P http://localhost:8055/admin/assets/runtime-core.esm-bundler-474556af.js:1
[index.c20b31fa.entry.js:4664:51076](http://localhost:8055/admin/assets/index.c20b31fa.entry.js)

What am I doing wrong?

Kamil

[formfcw]

Thank you for your interest!

Tiptap extensions can’t be added directly to the tools array. You will need to create a new file like table.ts inside the /src/interface/tools/ directory. Have a look at the blockquote tool for example. The type Tool describes a wrapper for Tiptap extensions.

An example for table extensions could be:

// https://tiptap.dev/api/nodes/table

import { Table } from "@tiptap/extension-table";
import { TableRow } from "@tiptap/extension-table-row";
import { TableCell } from "@tiptap/extension-table-cell";
import { TableHeader } from "@tiptap/extension-table-header";
import customMessages from "../i18n/custom-messages";
import type { Editor } from "@tiptap/core";
import type { Tool } from "../types";

export default {
    key: "table",
    name: customMessages.tools.table,
    icon: "format_table",
    extension: [Table, TableRow, TableCell, TableHeader],
    // shortcut: ["meta", "shift", ".....choose wisely...."],
    action: (editor: Editor) => editor.chain().focus().toggleTable().run(),
    disabled: (editor: Editor) =>
        !editor.can().chain().focus().toggleTable().run(),
    active: (editor: Editor) => editor.isActive("table"),
} as Tool;

NOTE that this is just an example and probably won’t work since I haven’t tested it! This is just to demonstrate how the overall process is!

Then import this file into /src/interface/tools/index.ts file.

NOTE that in the very specific use case of a table you should export multiple tools (= toolbar buttons) like it is done in the link tool! If you have a look at the usage of the table extension on the tiptap site there are a lot of buttons to integrate – a dropdown menu would make sense here!

I’d be happy to see a PR for this!

[kamil-malinski]

Thank you for the detailed reply!

I'll try it out and create a pull request if I succeed.