\r\n \r\n\r\n## Introduction\r\n\r\n[Colabo Editor](#) is a Notion-style WYSIWYG editor with AI-powered autocompletions.\r\n\r\n \r\n\r\n## Installation\r\n\r\nTo use Colabo Editor in a project, you can run the following command to install the `Colabo Editor` [NPM package](#):\r\n\r\n```\r\nnpm i colabo-editor\r\n```\r\n\r\nThen, you can use it in your code like this:\r\n\r\n```jsx\r\nimport { Editor } from \"colabo-editor\";\r\n\r\nexport default function App() {\r\n return ;\r\n}\r\n```\r\n\r\nThe `Editor` is a React component that takes in the following props:\r\n\r\n| Prop | Type | Description | Default |\r\n| --------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- |\r\n| `completionApi` | `string` | The API route to use for the OpenAI completion API. | `/api/generate` |\r\n| `className` | `string` | Editor container classname. | `\"relative min-h-[500px] w-full max-w-screen-lg border-stone-200 bg-white sm:mb-[calc(20vh)] sm:rounded-lg sm:border sm:shadow-lg\"` |\r\n| `defaultValue` | `JSONContent` or `string` | The default value to use for the editor. | [`defaultEditorContent`]() |\r\n| `extensions` | `Extension[]` | A list of extensions to use for the editor, in addition to the [default Colabo Editor extensions](#). | `[]` |\r\n| `editorProps` | `EditorProps` | Props to pass to the underlying Tiptap editor, in addition to the [default Colabo Editor editor props](#). | `{}` |\r\n| `onUpdate` | `(editor?: Editor) => void` | A callback function that is called whenever the editor is updated. | `() => {}` |\r\n| `onDebouncedUpdate` | `(editor?: Editor) => void` | A callback function that is called whenever the editor is updated, but only after the defined debounce duration. | `() => {}` |\r\n| `debounceDuration` | `number` | The duration (in milliseconds) to debounce the `onDebouncedUpdate` callback. | `750` |\r\n| `storageKey` | `string` | The key to use for storing the editor's value in local storage. | `novel__content` |\r\n| `disableLocalStorage` | `boolean` | Enabling this option will prevent read/write content from/to local storage. | `false` |\r\n\r\n## Tech Stack\r\n\r\nColabo Editor is built on the following stack:\r\n\r\n- [Next.js](https://nextjs.org/) – framework\r\n- [Tiptap](https://tiptap.dev/) – text editor\r\n- [OpenAI](https://openai.com/) - AI completions\r\n- [Vercel AI SDK](https://sdk.vercel.ai/docs) – AI library\r\n- [Vercel](https://vercel.com) – deployments\r\n- [TailwindCSS](https://tailwindcss.com/) – styles\r\n- [Cal Sans](https://github.com/calcom/font) – font\r\n\r\n## Contributing\r\n\r\nHere's how you can contribute:\r\n\r\n- [Open an issue](#) if you believe you've encountered a bug.\r\n- Make a [pull request](#) to add new features/make quality-of-life improvements/fix bugs.\r\n\r\nLicensed under the [Apache-2.0 license](#).\r\n","readmeFilename":"README.md"}