Package Exports

@tiptap-extend/columns
@tiptap-extend/columns/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@tiptap-extend/columns) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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;
}

Development

This library was generated with Nx.

Building

Run nx build columns to build the library.

Running unit tests

Run nx test columns to execute the unit tests via Jest.