prismer-editor

Full-featured Plate.js Markdown editor with injectable AI (⌘J commands + Copilot), customizable toolbar / slash menu / media uploads — single <MarkdownEditor> component, one config prop.

Full integration reference: INTEGRATION.md

Integration checklist

| Step | Required | What to do | |------|----------|------------| | Install peers | ✅ | npx install-peerdeps prismer-editor (~50 packages) | | Tailwind CSS | ✅ | @import "prismer-editor/tailwind.css" in global CSS | | Client-only | ✅ | "use client" or next/dynamic + ssr: false | | Next.js | recommended | transpilePackages: ["prismer-editor"] | | AI endpoints | optional | /api/ai/plate/command + /api/ai/plate/copilot | | Media upload | optional | config.media.uploadApi or custom upload |

Install

npm i prismer-editor platejs react react-dom
npx install-peerdeps prismer-editor

Quick start

"use client";
import { MarkdownEditor } from "prismer-editor";

export default function Page() {
  return (
    <MarkdownEditor
      initialMarkdown="# Hello"
      onChange={(md) => save(md)}
      config={{ ai: { body: { model: "gpt-4o-mini" } } }}
    />
  );
}

Tailwind CSS (required)

@import "tailwindcss";
@import "prismer-editor/tailwind.css";

Without this, toolbar and menus are unstyled.

Next.js

import dynamic from "next/dynamic";

const MarkdownEditor = dynamic(
  () => import("prismer-editor").then((m) => m.MarkdownEditor),
  { ssr: false }
);

Add to next.config: transpilePackages: ["prismer-editor"].

Controlled content

const [md, setMd] = useState("# Draft");
<MarkdownEditor markdown={md} onChange={setMd} changeIntervalMs={800} />;

Toolbar presets

Default standalone hides host-only buttons (openNote, export, import).

config={{
  toolbar: {
    fixed: { preset: "minimal" },   // full | standalone | minimal
    floating: { remove: ["comment"] },
  },
}}

config at a glance

| Area | Keys | Notes | |------|------|-------| | AI | ai.commandApi, ai.copilotApi, ai.body | SSE command + JSON copilot | | AI commands | ai.commands.add/remove | Custom ⌘J menu items, no server change | | Features | features.* | Disable plugins: comments, dnd, math, … | | Slash menu | slashMenu.add/remove | / menu customization | | Media | media.uploadApi, media.upload | Default /api/upload | | Toolbar | toolbar.fixed/floating | preset + remove by button id | | Editor | editor.readOnly, editor.placeholder | Chrome |

See INTEGRATION.md for endpoint contracts, button id lists, and full example.

Package exports

| Import | Description | |--------|-------------| | prismer-editor | MarkdownEditor + config types | | prismer-editor/tailwind.css | Tailwind v4 @source for bundle classes |

Live demos (LuminPulse monorepo)

| Route | Description | |-------|-------------| | /integrate/editor | External-dev experience (npm package) | | /pkg-editor | Minimal packaged smoke test | | /editor | Full harness (monorepo source) |

Build (monorepo)

npm run build -w prismer-editor
npm run smoke -w prismer-editor