Skip to content

Commit ff9cf90

Browse files
andrewdoroandrewdoro
committed
fix: update docs & rename type to EditorInstance
1 parent 29a2079 commit ff9cf90

File tree

4 files changed

+15
-48
lines changed

4 files changed

+15
-48
lines changed

‎README.md

+1-40
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@
1717

1818
<p align="center">
1919
<a href="#introduction"><strong>Introduction</strong></a> ·
20-
<a href="#installation"><strong>Installation</strong></a> ·
2120
<a href="#deploy-your-own"><strong>Deploy Your Own</strong></a> ·
2221
<a href="#setting-up-locally"><strong>Setting Up Locally</strong></a> ·
2322
<a href="#tech-stack"><strong>Tech Stack</strong></a> ·
@@ -27,6 +26,7 @@
2726
<br/>
2827

2928
## Docs (WIP)
29+
3030
https://novel.sh/docs/introduction
3131

3232
## Introduction
@@ -37,44 +37,6 @@ https://github.com/steven-tey/novel/assets/28986134/2099877f-4f2b-4b1c-8782-5d80
3737

3838
<br />
3939

40-
41-
## Installation
42-
43-
To use Novel in a project, you can run the following command to install the `novel` [NPM package](https://www.npmjs.com/package/novel):
44-
45-
```
46-
npm i novel
47-
```
48-
49-
Then, you can use it in your code like this:
50-
51-
```jsx
52-
import { Editor } from "novel";
53-
54-
export default function App() {
55-
return <Editor />;
56-
}
57-
```
58-
59-
The `Editor` is a React component that takes in the following props:
60-
61-
| Prop | Type | Description | Default |
62-
| --------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- |
63-
| `completionApi` | `string` | The API route to use for the OpenAI completion API. | `/api/generate` |
64-
| `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"` |
65-
| `defaultValue` | `JSONContent` or `string` | The default value to use for the editor. | [`defaultEditorContent`](https://github.com/steven-tey/novel/blob/main/packages/core/src/ui/editor/default-content.tsx) |
66-
| `extensions` | `Extension[]` | A list of extensions to use for the editor, in addition to the [default Novel extensions](https://github.com/steven-tey/novel/blob/main/packages/core/src/ui/editor/extensions/index.tsx). | `[]` |
67-
| `editorProps` | `EditorProps` | Props to pass to the underlying Tiptap editor, in addition to the [default Novel editor props](https://github.com/steven-tey/novel/blob/main/packages/core/src/ui/editor/props.ts). | `{}` |
68-
| `onUpdate` | `(editor?: Editor) => void` | A callback function that is called whenever the editor is updated. | `() => {}` |
69-
| `onDebouncedUpdate` | `(editor?: Editor) => void` | A callback function that is called whenever the editor is updated, but only after the defined debounce duration. | `() => {}` |
70-
| `debounceDuration` | `number` | The duration (in milliseconds) to debounce the `onDebouncedUpdate` callback. | `750` |
71-
| `storageKey` | `string` | The key to use for storing the editor's value in local storage. | `novel__content` |
72-
| `disableLocalStorage` | `boolean` | Enabling this option will prevent read/write content from/to local storage. | `false` |
73-
74-
> **Note**: Make sure to define an API endpoint that matches the `completionApi` prop (default is `/api/generate`). This is needed for the AI autocompletions to work. Here's an example: https://github.com/steven-tey/novel/blob/main/apps/web/app/api/generate/route.ts
75-
76-
Here's an example application: https://github.com/steven-tey/novella
77-
7840
## Deploy Your Own
7941

8042
You can deploy your own version of Novel to Vercel with one click:
@@ -94,7 +56,6 @@ To run the app locally, you can run the following commands:
9456

9557
```
9658
pnpm i
97-
pnpm build
9859
pnpm dev
9960
```
10061

‎apps/docs/guides/tailwind/setup.mdx

+4-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,10 @@ You can find the full example here: [Tailwind Example](https://github.com/steven
4343
<Tip>
4444
`onUpdate` runs on every change. In most cases, you will want to debounce the updates to prevent too many state changes.
4545
```tsx
46-
const debouncedUpdates = useDebouncedCallback(async (editor: Editor) => {
46+
import { EditorInstance } from "novel"
47+
48+
...
49+
const debouncedUpdates = useDebouncedCallback(async (editor: EditorInstance) => {
4750
const json = editor.getJSON();
4851
setContent(json);
4952
setSaveStatus("Saved");

‎apps/web/components/tailwind/editor.tsx

+9-6
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import React, { useEffect, useState } from "react";
44
import { useDebouncedCallback } from "use-debounce";
55
import {
66
defaultEditorProps,
7-
Editor,
7+
EditorInstance,
88
EditorRoot,
99
EditorBubble,
1010
EditorCommand,
@@ -35,12 +35,15 @@ const TailwindEditor = () => {
3535
const [openColor, setOpenColor] = useState(false);
3636
const [openLink, setOpenLink] = useState(false);
3737

38-
const debouncedUpdates = useDebouncedCallback(async (editor: Editor) => {
39-
const json = editor.getJSON();
38+
const debouncedUpdates = useDebouncedCallback(
39+
async (editor: EditorInstance) => {
40+
const json = editor.getJSON();
4041

41-
window.localStorage.setItem("novel-content", JSON.stringify(json));
42-
setSaveStatus("Saved");
43-
}, 500);
42+
window.localStorage.setItem("novel-content", JSON.stringify(json));
43+
setSaveStatus("Saved");
44+
},
45+
500,
46+
);
4447

4548
useEffect(() => {
4649
const content = window.localStorage.getItem("novel-content");

‎packages/headless/src/components/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export { useCurrentEditor as useEditor } from "@tiptap/react";
2-
export { type Editor } from "@tiptap/core";
2+
export { type Editor as EditorInstance } from "@tiptap/core";
33
export type { JSONContent } from "@tiptap/react";
44

55
export { EditorRoot, EditorContent, type EditorContentProps, defaultEditorProps } from "./editor";

0 commit comments

Comments
 (0)