topo-io / tiptap-extensions

Column extension for tiptap v2

Extensions for Tiptap

Column extension

Features

The extension introduce 2 new commands:

• setColumns(n) to add n new columns on an existing node
• unsetColumns() to remove columns

Here is a quick preview of the features: Column extension for Tiptap - Watch Video

You can try it here: https://codesandbox.io/p/github/GoCapsule/tiptap-extensions/main

Install

Install the package

npm install @gocapsule/column-extension

Add the extension to your editor

import { Node, Editor } from "@tiptap/core";
import StarterKit from '@tiptap/starter-kit';
import { ColumnExtension } from "@gocapsule/column-extension";
// don't forget to add style to see the columns
import "@gocapsule/column-extension/src/index.css";

new Editor({
  element: document.querySelector('.element'),
  extensions: [
    // override Document to allow columns
    StarterKit.configure({ document: false }),
    ColumnExtension,
  ],
  content: '<p>Hello World!</p>',
});

You then need this following stylesheet @gocapsule/column-extension/src/index.css OR add the CSS of the next section.

Customization

You can customize the style of the columns with css.

The DOM created by the extension looks like this:

The CSS is this one:

.ProseMirror .column-block {
  width: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 24px;
  padding: 8px 0;
}

.ProseMirror .column {
  overflow: auto;
  border: 1px gray dashed;
  border-radius: 8px;
  padding: 8px;
  margin: -8px;
}

Contributing

You can start an example of the editor and the extension(s) with the command:

yarn start

Don't hesitate to open a pull request if you want new features.