rails-tiptap-autosave

Rails Tiptap Autosave

Add rich text editing with automatic background saving to any Rails model using Tiptap, Stimulus, and markdown stored in plain text columns.

When to Use This Skill

Invoke this skill when:

1. Adding rich text editing to Rails models without ActionText
2. Implementing inline autosave for text fields
3. Integrating Tiptap editor with Stimulus controllers
4. Building content editing UIs with formatting toolbars
5. Debugging Tiptap + Turbo cache conflicts

Architecture Overview

Key decision: Markdown in text columns, NOT ActionText.

Why this approach:

• No extra tables or polymorphic attachments
• Content is plain text -- easy to query, diff, and version
• Markdown renders cleanly in non-browser contexts (emails, APIs, CLI)
• Simpler mental model than ActionText's rich text blobs

How it works:

1. Tiptap editor (initialized via Stimulus) converts user input to markdown
2. On every keystroke (debounced 1 second), PATCH to autosave endpoint
3. Controller saves markdown to a text column via update_column
4. Status indicator shows "Saving..." -> "Saved" -> fades

Key Files

File	Purpose
app/javascript/controllers/rich_text_editor_controller.js	Tiptap Stimulus controller
app/views/shared/_rich_text_field.html.erb	Reusable editor partial
app/views/shared/_bubble_menu.html.erb	Formatting toolbar

Core Patterns

1. Installation & Build Pipeline

npm packages, @rails/request.js for CSRF, JS bundler setup (Tiptap does NOT work with importmap), and editor CSS.

See: references/installation.md

2. Stimulus Controller

The full rich_text_editor_controller.js -- handles Tiptap initialization, debounced autosave, BubbleMenu target relocation, Turbo cache cleanup, and bubble menu formatting commands.

See: references/stimulus-controller.md

3. View Partials

Reusable _rich_text_field.html.erb and _bubble_menu.html.erb partials with Stimulus data attributes.

See: references/partials.md