skills.rest
Esposter
EsposterOFFICIAL
Explore all skills by this author →
GitHub

tiptap

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

23|3|Updated Jun 28, 2022
Search Tags:#vue#extension#tiptap#prosemirror#suggestion#plugin-key#vue-renderer
One-click install
npx skills add https://github.com/Esposter/Esposter --skill tiptap-esposter
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tiptap
Source: https://github.com/Esposter/Esposter/tree/main/.agents/skills/tiptap
Command: npx skills add https://github.com/Esposter/Esposter --skill tiptap-esposter

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide defines consistent conventions for Tiptap/ProseMirror extension development, ensuring reliable plugins, unique keys, and proper VueRenderer behavior.

Core Features & Use Cases

  • Establishes a unique PluginKey per extension to avoid conflicts in ProseMirror state.
  • Documents standard patterns for suggestion extensions (emoji, mention, slash command) and how to structure composables, configs, and components.
  • Describes VueRenderer v-show usage to guarantee popup positioning and visibility in all render cycles.
  • Provides guidance on using SuggestionTrigger enum to avoid hardcoded literals and ensure consistency across features.

Quick Start

Configure or implement a Tiptap extension following the conventions described to ensure plugin key uniqueness and correct VueRenderer usage.

Frequently Asked Questions about tiptap

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

FAQPage Schema
How do I prevent Tiptap plugin-key conflicts in ProseMirror extensions?▼

To prevent Tiptap plugin-key conflicts, establish a unique PluginKey definition for each extension. This ensures reliable plugin behavior and avoids state collisions when multiple extensions interact within the same ProseMirror editor instance.

Why does my Tiptap VueRenderer popup lose positioning and visibility during render cycles?▼

Tiptap VueRenderer popups lose positioning due to DOM mounting issues. Using v-show instead of conditional rendering guarantees popup visibility and maintains correct positioning across all render cycles, ensuring reliable editor popup behavior.

What is the best way to structure Tiptap suggestion extensions for slash commands and mentions?▼

The best way to structure Tiptap suggestion extensions is to standardize composables, configs, and components. Using a centralized SuggestionTrigger enum avoids hardcoded literals and ensures consistency across slash command and mention features.

Can I use standard Vue composables to manage Tiptap editor suggestion lists?▼

Yes, you can use Vue composables to manage Tiptap editor suggestion lists. Standardizing composable patterns for suggestion triggers ensures proper config handling and reliable component rendering across emoji, mention, and slash command extensions.

When do I need to define a unique PluginKey for a custom ProseMirror extension?▼

You need to define a unique PluginKey whenever creating or updating Tiptap extensions. This prevents ProseMirror state conflicts across multiple plugins, ensuring reliable editor behavior and maintaining isolated plugin state for custom features.

Related Skills

Explore More Software Engineering Skills→
jezwebjezweb
961

tiptap

Set up a Tiptap rich text editor in Next.js with image uploads.

Community
Intermediate
hyva-themeshyva-themes
78

hyva-cms-custom-field

Register custom field types and modal handlers for Hyvä CMS Liveview Editor.

Official
Advanced
hasnaxyzhasnaxyz

vue

Render Vue 3 interfaces from JSON specifications with registry-based components.

Official
Advanced
albanistalbanist
4

umbraco-tiptap-toolbar-extension

Implement custom Tiptap toolbar extensions for the Umbraco rich text editor.

Community
Intermediate