NoteEditor

A rich text editor component library scaffold built with React, TypeScript, Ant Design, and BlockNote. The goal is a modern collaborative-doc editing experience that can be published to a private npm registry for reuse across business projects.

Features

• Block-based rich text editing
• Table insertion and editing
• Local staging for image and video uploads
• Reserved uploadFile hook for future server integration
• Library packaging with type declaration output

Install

Install the package itself:

npm install note-editor

Install peer dependencies required by the component library:

npm install react react-dom antd @ant-design/icons @blocknote/core @blocknote/react @blocknote/mantine

If you use pnpm or yarn, install the same package set with the equivalent command.

Local Development

npm install
npm run dev

Usage

import { NoteEditor } from "note-editor";
import "note-editor/dist/style.css";

export default function Page() {
  return (
    <NoteEditor
      showToolbar={true}
      onChange={(value) => {
        console.log(value.blocks, value.markdown, value.html);
      }}
      uploadFile={async ({ file }) => {
        // Replace this with a real server upload later.
        const localUrl = URL.createObjectURL(file);

        return {
          url: localUrl,
          previewUrl: localUrl,
          meta: {
            source: "local-staging",
          },
        };
      }}
    />
  );
}

The host application must provide all peer dependencies listed above.

Set showToolbar={false} when you need to hide the top toolbar and keep only the floating toolbar and side menu.

TypeScript

The package ships with declaration files. No additional type configuration is required in a standard React + TypeScript project.

Build

npm run build

Publish to npm

npm run build
npm pack --dry-run
npm publish --access public

Publish to a Private npm Registry

npm run build
npm publish --registry=<your-private-registry>