ask-reason-editor

Configures and embeds the react-reason-editor Tiptap and Plate document editor in host applications.

74|11|Updated Jul 4, 2024
One-click install
npx skills add https://github.com/OpenSourceAGI/qwksearch-research-agent --skill ask-reason-editor-opensourceagi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ask-reason-editor
Source: https://github.com/OpenSourceAGI/qwksearch-research-agent/tree/main/skills/ask-reason-editor
Command: npx skills add https://github.com/OpenSourceAGI/qwksearch-research-agent --skill ask-reason-editor-opensourceagi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Integrating the react-reason-editor package is error-prone: it ships two editor engines (Plate by default, Tiptap for unported features), 59 extensions with per-extension subpath exports, a required sidebar injection, and a schema that is fixed at mount. This Skill guides you through picking the right entry point, configuring extensions, and avoiding the common pitfalls. ## Core Features & Use Cases - Entry point selection: Choose between ReasonDocs (full document app), editor-kit (host-owned lifecycle), NovelEditor/RichTextProvider, or single-extension subpath imports. - Extension and configuration management: Add extensions via the plugin registry, rebuild the schema with rebuildKey, manage EditorConfig persisted in localStorage, and switch KaTeX/Mermaid between CDN and bundled loading. - Troubleshooting and collaboration: Diagnose unstyled editors, SSR hydration errors, and engine mismatches, and wire Yjs/Hocuspocus collaborative editing. - Use Case: You are embedding the editor in a VS Code custom editor and your new extension appears to do nothing — the Skill explains that the schema is fixed at mount and you must pass a new rebuildKey. ## Quick Start Ask how to embed react-reason-editor in your host app with a custom extension set and toolbar.

Frequently Asked Questions about ask-reason-editor

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

FAQPage Schema
How do I embed react-reason-editor in my own React app?▼

Import NovelEditor, buildExtensions, and createDefaultConfig from react-reason-editor/editor-kit, plus the style.css stylesheet. Pass the built extension array to NovelEditor and render the EditorSurface from its render prop exactly once.

How do I add a custom extension to react-reason-editor?▼

Create a folder under src/extensions following an existing extension, register it in the plugin registry so it gets a config entry and Settings toggle, and add a subpath export in package.json if it should be importable standalone.

What is the difference between the Plate and Tiptap engines in ReasonDocs?▼

The editorEngine prop defaults to 'plate', while 'tiptap' selects the older stack that still carries features not yet ported, such as inline comments. Check which engine a surface mounts before assuming an extension applies to it.

Why does my extension change have no effect in the Tiptap editor?▼

The editor schema is fixed at mount, so changing the extensions array alone does nothing. Pass a new rebuildKey, such as a signature of the config, whenever extensions change to force a remount.

Does react-reason-editor work offline or in air-gapped environments?▼

Yes, set externalLibsMode to 'bundled' in EditorConfig so KaTeX and Mermaid load from the package's own dependencies instead of a CDN. Draw.io remains a remote embed regardless of this setting.

Why does the editor render without any styles?▼

The package does not inject its stylesheet automatically. You must explicitly import react-reason-editor/style.css in your host application for the editor to render styled.