Installation

To use Editor-S in a project, you can run the following command to install the editor-s NPM package:

npm i editor-s

Then, you can use it in your code like this:

import { Editor } from "editor-s";

export default function App() {
  return <Editor />;
}

The Editor is a React component that takes in the following props:

| Prop | Type | Description | Default | | --------------------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | | completionApi | string | The API route to use for the OpenAI completion API. | /api/generate | | 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" | | defaultValue | JSONContent or string | The default value to use for the editor. | defaultEditorContent | | extensions | Extension[] | A list of extensions to use for the editor, in addition to the default Editor-S extensions. | [] | | editorProps | EditorProps | Props to pass to the underlying Tiptap editor, in addition to the default Editor-S editor props. | {} | | onUpdate | (editor?: Editor) => void | A callback function that is called whenever the editor is updated. | () => {} | | onDebouncedUpdate | (editor?: Editor) => void | A callback function that is called whenever the editor is updated, but only after the defined debounce duration. | () => {} | | debounceDuration | number | The duration (in milliseconds) to debounce the onDebouncedUpdate callback. | 750 | | storageKey | string | The key to use for storing the editor's value in local storage. | editors__content | | disableLocalStorage | boolean | Enabling this option will prevent read/write content from/to local storage. | false |

Setting Up Locally

To run the app locally, you can run the following commands:

pnpm i
pnpm build
pnpm dev

Tech Stack

Editor-S is built on the following stack:

• Next.js – framework
• Tiptap – text editor
• OpenAI - AI completions
• Vercel AI SDK – AI library
• Vercel – deployments
• TailwindCSS – styles
• Cal Sans – font

License

Licensed under the Apache-2.0 license.