Installation
First, install the WebEditor package:
npm install @devscribe-team/webeditor
Creating a basic editor
To create a basic editor instance, import the WebEditor component and its styles:
import { WebEditor } from "@devscribe-team/webeditor";
import "@devscribe-team/webeditor/styles";
function App() {
return <WebEditor />;
}
- Markdown and JSX support
- Command menu (/) for adding components
- Marks menu (/) for text formatting
- Automatic theme detection
Controlling editor content
The value prop
The value prop controls the editor’s initial content. It accepts MDX-like strings:
import { WebEditor } from "@devscribe-team/webeditor";
import "@devscribe-team/webeditor/styles";
function App() {
const initialContent = `# Welcome
This is a **rich text** editor with _markdown_ support.`;
return <WebEditor value={initialContent} />;
}
The editor internally converts your markdown/MDX string to ProseMirror’s document format. Changes to the value prop will reinitialize the editor state.
The onChange handler
The onChange prop receives the editor’s content as HTML after each change:
import { useState } from "react";
import { WebEditor } from "@devscribe-team/webeditor";
import "@devscribe-team/webeditor/styles";
function App() {
const [content, setContent] = useState("");
return (
<div>
<WebEditor
value={content}
onChange={(html) => {
setContent(html);
// Save to database, localStorage, etc.
}}
/>
</div>
);
}
The onChange callback is triggered on every transaction, including selection changes. For production use, consider debouncing or throttling save operations.
Making the editor read-only
The editable prop
Set editable={false} to display content in read-only mode:
import { WebEditor } from "@devscribe-team/webeditor";
import "@devscribe-team/webeditor/styles";
function App() {
const content = `# Documentation
This content is read-only.`;
return <WebEditor value={content} editable={false} />;
}
- Users cannot edit text or modify components
- The command hint (“Press ’/’ for commands”) is hidden
- Component edit controls (buttons, modals) are disabled
- All interactive elements become non-interactive
Use read-only mode for displaying documentation, previewing content, or showing saved entries.
Complete example
Here’s a complete example combining all the core props:
import { useState } from "react";
import { WebEditor } from "@devscribe-team/webeditor";
import "@devscribe-team/webeditor/styles";
function DocumentEditor() {
const [content, setContent] = useState(`# My Document
Start writing here...`);
const [isEditing, setIsEditing] = useState(true);
const handleSave = (html: string) => {
setContent(html);
// Save to your backend
console.log("Saved:", html);
};
return (
<div className="container">
<div className="toolbar">
<button onClick={() => setIsEditing(!isEditing)}>
{isEditing ? "Preview" : "Edit"}
</button>
</div>
<WebEditor
value={content}
editable={isEditing}
onChange={handleSave}
/>
</div>
);
}
Next steps
Command menu
Discover all available commands for adding content