Skip to content

Latest commit

 

History

History

README.md

@arkpad/core

The high-performance, modular engine for the Arkpad rich text editor. Built on ProseMirror, designed for developers who need absolute control.

📦 Installation

npm install @arkpad/core

🚀 Usage

import { 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());
    },
  });
}

🛠 API Reference

Configuration Options

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.

Instance Methods

Content

  • 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.

State & Commands

  • 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.

Interaction

  • focus(pos?: 'start' | 'end' | number) - Focus the editor.
  • blur() - Remove focus.
  • setEditable(editable: boolean) - Toggle read-only mode.
  • destroy() - Cleanup the editor instance.

🧩 Extensions

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] })],
});

🌟 Pro Features

Arkpad Core includes advanced features for building enterprise-grade editor experiences.

1. Typed Commands (Module Augmentation)

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!

2. Declarative Interceptors (Performance)

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;
        },
      },
    ];
  },
});

3. Priority & Schema Extensions

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;
  },
});

4. Lifecycle Hooks

  • onInit(): Called when the editor is fully initialized.
  • onUpdate(): Called on every content change.
  • onDestroy(): Called during editor cleanup.

🚀 Versioning & Release Flow

Arkpad uses an automated, conventional-commit-driven release workflow:

  • Automatic Version Bumps: Any code changes in @arkpad/core trigger package version updates and generate changesets automatically on merge to main.
  • 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