The high-performance, modular engine for the Arkpad rich text editor. Built on ProseMirror, designed for developers who need absolute control.
npm install @arkpad/coreimport { ArkpadEditor, Essentials } from "@arkpad/core";
const element = document.querySelector("#editor");
if (element) {
const editor = new ArkpadEditor({
element,
extensions: [Essentials],
content: "<p>Hello World</p>",
onUpdate: ({ editor }) => {
console.log(editor.getHTML());
},
});
}| Option | Type | Description |
|---|---|---|
element |
HTMLElement |
The DOM element to attach the editor to. |
extensions |
Extension[] |
Array of Arkpad extensions. |
content |
string | JSON |
Initial content (HTML or JSON). |
editable |
boolean |
Whether the editor is editable. Defaults to true. |
autofocus |
boolean |
Focus the editor on creation. |
getHTML(): string- Returns document as HTML.getJSON(): object- Returns document as ProseMirror JSON.getText(): string- Returns document as plain text.getMarkdown(): string- Returns document as Markdown. (Requires markdown-compatible extensions).setContent(content: string | JSON)- Replaces editor content.clearContent()- Wipes the document.
commands- Proxy object to run commands:editor.commands.toggleBold().chain()- Start a command chain.isActive(name: string, attrs?: object): boolean- Check if a mark/node is active.getAttributes(name: string): object- Get attributes of the active mark/node.
focus(pos?: 'start' | 'end' | number)- Focus the editor.blur()- Remove focus.setEditable(editable: boolean)- Toggle read-only mode.destroy()- Cleanup the editor instance.
Arkpad is entirely modular. You can use the Essentials bundle or pick individual extensions.
import { Bold, Italic, Heading, BulletList, Highlighter } from "@arkpad/core/extensions";
const editor = new ArkpadEditor({
extensions: [Bold, Italic, Heading.configure({ levels: [1, 2] })],
});Arkpad Core includes advanced features for building enterprise-grade editor experiences.
Get full IDE autocompletion for your custom commands by augmenting the ArkpadCommands interface.
// In your extension file
declare module "@arkpad/core" {
interface ArkpadCommands {
myCustomCommand: (arg: string) => void;
}
}
// Usage
editor.commands.myCustomCommand("hello"); // Fully typed!High-performance transaction middleware that only runs when needed.
const MyExtension = Extension.create({
addInterceptors() {
return [
{
on: "docChanged", // Only runs if document content changes
handler: ({ transaction }) => {
console.log("Document changed!");
return transaction;
},
},
];
},
});Control the loading order of extensions and modify existing node/mark schemas safely.
const HighPriorityExt = Extension.create({
priority: 200, // Default is 100. Higher runs first.
extendNodeSchema(nodeName, spec) {
if (nodeName === "paragraph") {
// Add custom attributes to all paragraphs
return {
...spec,
attrs: { ...spec.attrs, myAttr: { default: null } },
};
}
return spec;
},
});onInit(): Called when the editor is fully initialized.onUpdate(): Called on every content change.onDestroy(): Called during editor cleanup.
Arkpad uses an automated, conventional-commit-driven release workflow:
- Automatic Version Bumps: Any code changes in
@arkpad/coretrigger package version updates and generate changesets automatically on merge tomain. - Beautiful Emojified Changelogs: Changes are grouped into clean categories like
✨ Features,🐛 Bug Fixes,⚡ Performance Improvements,📝 Documentation,♻️ Refactoring,🎨 Styles & UI, and📦 Others. - GitHub Releases: Releases are automatically published on GitHub with the release description matching the version changelog exactly.
Built by ArkCabin