npm package: @mohamedali.chaabani/nazzemarabic
Description: Notion-style WYSIWYG editor with AI-powered autocompletions
Author: Steven Tey
Latest version: 1.1.9

# nazzemarabic

A Notion-style WYSIWYG editor with AI-powered autocompletions, advanced table support, Microsoft-style emoji picker, and smooth drag-and-drop functionality.



## Introduction

`nazzemarabic` is a customizable, headless text editor built on [Tiptap](https://tiptap.dev) and [ProseMirror](https://prosemirror.net), extending [Novel.sh](https://novel.sh). It includes successfully integrated features like table nodes, a Microsoft-style emoji picker, and optimized drag-and-drop interactions, with support for RTL (Arabic) layouts.

## Installation

Install the package:

```bash
npm i nazzemarabic
```

Use in your React project:

```jsx
"use client";

import { Editor } from "nazzemarabic";

export default function App() {
  return <Editor id="editor1" />;
}
```

### Editor Props

| Prop                | Type                          | Description                                                                 | Default                     |
|--------------------|-------------------------------|-----------------------------------------------------------------------------|-----------------------------|
| `id`               | `string`                     | Unique editor identifier.                                                   | Required                    |
| `completionApi`    | `string`                     | API route for AI completion.                                                | `/api/generate`             |
| `className`        | `string`                     | Editor container class.                                                     | `novel-relative novel-min-h-[500px]...` |
| `defaultValue`     | `JSONContent` or `string`    | Initial editor content.                                                     | `defaultEditorContent`      |
| `extensions`       | `Extension[]`                | Additional Tiptap extensions.                                               | `[]`                        |
| `editorProps`      | `EditorProps`                | Props for the underlying editor.                                            | `{}`                        |
| `onUpdate`         | `(editor?: Editor) => void`  | Callback on editor updates.                                                 | `() => {}`                  |
| `onDebouncedUpdate`| `(editor?: Editor) => void`  | Debounced callback on editor updates.                                       | `() => {}`                  |
| `debounceDuration` | `number`                     | Debounce duration for `onDebouncedUpdate` (ms).                             | `750`                       |
| `storageKey`       | `string`                     | Key for local storage.                                                      | `novel__content`            |
| `disableLocalStorage` | `boolean`                 | Disables local storage read/write.                                          | `false`                     |
| `isReadOnly`       | `boolean`                    | Enables read-only mode.                                                     | `false`                     |

**Note**: Configure an API endpoint for `completionApi` to enable AI-powered autocompletions.

[Try the Demo](link-to-demo)

## Features

- **Table Support**: Successfully added table nodes with a dedicated `TableMenu` for seamless creation and editing.
- **Emoji Picker**: Successfully integrated Microsoft-style emoji picker via `IconPicker`.
- **Smooth Drag-and-Drop**: Enhanced drag-and-drop for intuitive content reordering.
- **AI Autocompletions**: Triggered by typing `++`, powered by your AI provider.
- **RTL Support**: Dynamic text direction (LTR/RTL) based on `lang` from local storage (e.g., Arabic support).
- **Image Resizing**: Built-in `ImageResizer` for flexible image handling.
- **Customizable**: Extends Tiptap and ProseMirror with additional extensions.

## Setting Up Locally in a Monorepo

To set up `nazzemarabic` in a monorepo:

1. Clone the repository.
2. Set environment variables:
   - `AI_API_KEY`: Your AI provider key.
3. Install dependencies:

```bash
npm install
```

4. Build the core package:

```bash
cd packages/core
npm run build
```



5. Publish the core package:

```bash
cd packages/core
npm login ( this step required to connect your cli with account npm that you will use the publish )
npm run publish
```

6. Run the web app in development mode:

```bash
cd ../../apps/web
npm run dev
```

### Monorepo Workflow

- **Core Package**: Located in `packages/core`. Build with `npm run build`.
- **Web App**: Located in `apps/web`. Run with `npm run dev`.
- **Directory Navigation**:
  - List directories: `ls`
  - Clear terminal: `clear`
  - Navigate: Use `cd` to switch between `packages/core` and `apps/web`.

## Tech Stack

- **Next.js**: Framework
- **Tiptap & ProseMirror**: Editor core
- **Your AI Provider**: AI completions
- **Vercel AI SDK**: AI integration
- **Vercel**: Deployment
- **TailwindCSS**: Styling
- **Cal Sans**: Font
- **Sonner**: Toast notifications
- **use-debounce**: Debounced updates

## Contributing

- Report bugs via [issues](link-to-issues).
- Submit pull requests for features, improvements, or fixes to [GitHub](link-to-repo).

[GitHub Repository](link-to-repo) | [License](link-to-license)