@tiptap-extend/columns NPM

@tiptap-extend/columns

This is a fork and update of https://github.com/topo-io/tiptap-extensions/tree/main/demos/column-extension

Usage

import { Node, Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import { ColumnsExtension } from '@tiptap-extend/columns';

new Editor({
  element: document.querySelector('.element'),
  extensions: [
    StarterKit,

    // don't forget to add styles to see the columns
    ColumnsExtension,
  ],
  content: '<p>Hello World!</p>',
});

Sample styling

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

.ProseMirror .column {
  overflow: hidden;
  padding: 8px;
  margin: -8px;
}

.ProseMirror-focused .column {
  border: 1px gray dashed;
  border-radius: 8px;
}