Basel Editor

A rich-text editor based on ProseMirror, packaged as an npm module for easy integration into other projects.

Installation

Local Usage (via npm link)

If you want to use this package locally while continuing to develop it, you can use npm link.

1. In the basel project folder, run:

   npm link

2. In your target project folder, link the package:

   npm link basel

3. (Optional but recommended) Add the dependency to your target project's package.json so intelligent IDE features like autocomplete work correctly:

   {
     "dependencies": {
       "basel": "file:../path/to/basel"
     }
   }

Getting Started

1. Import and Initialize

To use the editor in another project, you simply import createEditor and pass it a DOM element where you want the editor built.

<!-- In your index.html -->
<div id="editor"></div>

// In your Javascript/TypeScript file
import { createEditor, schema } from 'basel';

// 1. Get the DOM element
const editorElement = document.getElementById('editor');

// 2. Initialize the editor on the element
const view = createEditor(editorElement);

// If you need access to the ProseMirror schema used by the editor:
console.log(schema);

2. Styling

The editor's layout and functionality expect certain CSS styles to render fully, especially for elements like the ai prompt, bubble menus, drag handles, and ProseMirror extensions.

Currently, you should copy or import the style.css from the basel project into your target project to ensure the editor looks correct out of the box.

Development

If you make any changes to the core basel library:

1. Run npm run build in the basel folder.
2. The linked project will automatically see your changes! (You may need to restart your target project's dev server if it doesn't automatically hot-reload linked packages).