Tiptap Simple + Tables + Controlled

Tiptap Simple Editor extended with table support and controlled component pattern

🎯 What is this?

This package extends the official Tiptap Simple Editor template with:

• 📊 Table Support - Insert and edit tables
• 🎮 Controlled Mode - Full React state control
• 🔧 Table Toolbar - Dedicated UI for table operations

Built on top of Tiptap Simple Editor.

🚀 Installation

Build the package

npm install @dooherceg/tiptap-controlled-editor-with-table

📖 Usage

import { SimpleEditor } from "tiptap-simple-tables";

function App() {
  const [content, setContent] = useState("");

  return <SimpleEditor content={content} onContentChange={setContent} />;
}

✨ What's Added?

Compared to the original Tiptap Simple Editor:

Table Support

• Insert tables via toolbar button
• Resize columns
• Add/delete rows and columns
• Table cell selection

Controlled Component

• content prop for external state
• onContentChange callback
• Proper sync without infinite loops

🙏 Credits

Based on the Tiptap Simple Editor template by the Tiptap team.

📄 License

MIT (same as Tiptap)

Note: This is an unofficial extension. For official Tiptap templates and extensions, visit tiptap.dev