Prosemirror Svelte

Overview:

The Prosemirror Svelte component is designed to provide a wrapper around the Prosemirror editor, with a focus on embracing its core concepts such as EditorState and Transactions. It offers both basic and rich-text editing capabilities, and comes with included helpers to quickly create an editor state. The component is highly customizable, allowing users to implement their own schema or use the provided schema by Prosemirror. It is recommended for users who are starting with Prosemirror and want to see a working implementation.

Features:

• Wrapper around the Prosemirror editor
• Support for basic and rich-text editing
• Customizable schema implementation
• Included helpers for quick editor state creation
• Ability to handle change events and transactions
• Support for focus and blur events
• Customizable debounce interval for change events

Installation:

To install the Prosemirror Svelte component, follow these steps:

1. Add the component to your project’s dependencies:

npm install prosemirror-svelte

2. Import the component where you want to use it:

import Prosemirror from 'prosemirror-svelte';

3. Use the component in your Svelte template, passing the necessary props:

<Prosemirror {editorState} {placeholder} {className} {debounceChangeEventsInterval} 
	on:change={handleChange} on:transaction={handleTransaction} 
	bind:view={editorView} bind:editor={editorInstance} />

4. Implement the necessary event handlers:

function handleChange(event) {
	// handle change event
}

function handleTransaction(event) {
	// handle transaction event
}

Summary:

The Prosemirror Svelte component is a wrapper around the Prosemirror editor, offering both basic and rich-text editing capabilities. It provides a gentle wrapper around Prosemirror’s core concepts, such as EditorState and Transactions. The component is highly customizable, allowing users to implement their own schema or use the provided schema by Prosemirror. It also offers event handling for change events and transactions, with a customizable debounce interval. Overall, it is a useful tool for Svelte developers who need a powerful and customizable text editor component.