prosemirror-columns

This is a ProseMirror plugin that allows you to create multiple columns in the editor. It also supports resizing columns and add/remove single column. The implementation is largely inpired from prosemirror-tables. Thanks to Marijn Haverbeke and all the contributors for their amazing work!

Prosemirror example

👉 To show demo from demo/demo.ts, run:

npm install
npm run dev

Tiptap example

🎉 This prosemirror plugin for tiptap usage is sponsored by docmost. Check the link to get Enterprise-ready Wiki for Modern Teams.

npm install tiptap-extension-multi-column

👉 See the following example for tiptap usage:

<template>
    <editor-content :editor="editor" />
</template>

<script setup>
import { useEditor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
import { ColumnsExtension } from 'tiptap-extension-multi-column'
import 'tiptap-extension-multi-column/style/column.css'

const editor = useEditor({
    content: `
    <div class="prosemirror-column-container">
      <div class="prosemirror-column" style="width:200px">
        <p>This is column 1</p>
      </div>
      <div class="prosemirror-column" style="width:200px">
        <p>This is column 2</p>
      </div>
    </div>
  `,
    extensions: [ColumnsExtension, StarterKit],
})
</script>

demo

https://github.com/user-attachments/assets/5518fb4f-a547-4570-82ac-9f9f93fad35a