skills.rest
Ryanzucchi
RyanzucchiCOMMUNITY
Explore all skills by this author →
GitHub

editor-rico-tiptap-extensivel

Configures a Tiptap/ProseMirror rich text editor with literary extensions for creative writing.

Updated Jul 19, 2026
Search Tags:#rich text editor#tiptap#inline comments#yjs#footnotes#prosemirror#focus mode
One-click install
npx skills add https://github.com/Ryanzucchi/Eldritch_Lich --skill editor-rico-tiptap-extensivel-ryanzucchi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: editor-rico-tiptap-extensivel
Source: https://github.com/Ryanzucchi/Eldritch_Lich/tree/main/.agents/skills/editor-rico-tiptap-extensivel
Command: npx skills add https://github.com/Ryanzucchi/Eldritch_Lich --skill editor-rico-tiptap-extensivel-ryanzucchi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tiptap/core, @tiptap/starter-kit, @tiptap/extension-collaboration, yjs.

What problem does it solve? Setting up a rich text editor for literary writing requires custom extensions for footnotes, inline comments, focus mode, and chapter numbering, plus correct serialization choices to avoid fragile HTML storage. This Skill provides the complete Tiptap/ProseMirror configuration for the core_editor module of a creative writing platform. ## Core Features & Use Cases - Literary Extension Set: Configures StarterKit plus custom Footnote, InlineComment, FocusMode, and ChapterNumber extensions with automatic footnote renumbering. - Collaboration-Ready Editing: Integrates @tiptap/extension-collaboration with Yjs, disabling native history so CRDT manages document state. - Safe Persistence: Enforces ProseMirror JSON storage via editor.getJSON() and generates HTML only on demand for exports and previews. - Use Case: When implementing the core_editor module (UC-175 rich formats, UC-177 footnotes, UC-141 focus mode), apply this Skill to wire up the editor with Ctrl+Shift+F focus mode, comment threads with resolved states, and auto-numbered footnotes. ## Quick Start Configure the Tiptap editor for the core_editor module with footnotes, inline comments, and focus mode following this Skill.

Frequently Asked Questions about editor-rico-tiptap-extensivel

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add footnotes to a Tiptap editor?▼

Create a custom Footnote mark that inserts a numbered superscript inline and appends the note text to a FootnoteList node at the document end. Renumber notes automatically by order of appearance and reindex when a note is deleted.

How to implement inline comments in Tiptap with ProseMirror?▼

Create a comment mark with attributes commentId, authorId, and resolvedAt. Highlight commented ranges in yellow, open a sidebar thread on click, and switch the highlight to gray when resolved without removing the mark from the document.

Should I store Tiptap editor content as HTML or JSON?▼

Store documents as ProseMirror JSON using editor.getJSON(), never as HTML. HTML is fragile across editor versions, prone to serialization inconsistencies, and vulnerable to XSS; generate HTML on demand only for exports and previews.

How do I build a distraction-free focus mode in Tiptap?▼

Build a FocusMode extension that toggles a focus-mode CSS class on the editor container via Ctrl+Shift+F. The CSS sets opacity 0.15 on all paragraphs except the active one, which stays at full opacity to highlight the text being edited.

Does Tiptap collaboration work with Yjs CRDT?▼

Yes, use @tiptap/extension-collaboration with yjs for real-time collaboration. Disable the StarterKit history extension since the CRDT manages document history and convergence instead of the native undo stack.

Related Skills

Explore More Software Engineering Skills→
OpenElementsLabsOpenElementsLabs

web-frontend-builder

Scaffold Next.js frontends with TypeScript, Tailwind CSS, and shadcn/ui.

Official
Advanced
awsaws
476

schema

Persist and discover graph database schemas with IndexedDB caching and Jotai state.

Official
Intermediate
Muath2000Muath2000

realtime-collab-engineer

Design real-time collaboration systems with CRDT, WebSocket, and Yjs.

Community
Advanced
EsposterEsposter
23

tiptap

Enforce unique PluginKey definitions and VueRenderer v-show usage in Tiptap extensions.

Official
Intermediate