Merge pull request steven-tey#87 from eyalcohen4/main

.eslintrc.json

@@ -1,3 +1,10 @@
 {
-  "extends": ["next/core-web-vitals", "eslint:recommended"]
+  "root": true,
+  // This tells ESLint to load the config from the package `eslint-config-custom`
+  "extends": ["next/core-web-vitals", "eslint:recommended"],
+  "settings": {
+    "next": {
+      "rootDir": ["apps/*/"]
+    }
+  }
 }

.gitignore

@@ -3,6 +3,11 @@
 /.pnp
 .pnp.js
 
+node_modules
+packages/*/node_modules
+apps/*/node_modules
+.next
+
 # next.js
 /.next/
 /out/
@@ -34,6 +39,12 @@ next-env.d.ts
 
 # vscode
 .vscode
+
+dist/**
+/dist
+packages/*/dist
+
+.turbo
 /test-results/
 /playwright-report/
 /playwright/.cache/

README.md

@@ -17,6 +17,7 @@
 
 <p align="center">
   <a href="#introduction"><strong>Introduction</strong></a> ·
+  <a href="#installation"><strong>Installation</strong></a> ·
   <a href="#deploy-your-own"><strong>Deploy Your Own</strong></a> ·
   <a href="#setting-up-locally"><strong>Setting Up Locally</strong></a> ·
   <a href="#tech-stack"><strong>Tech Stack</strong></a> ·
@@ -29,12 +30,45 @@
 
 [Novel](https://novel.sh/) is a Notion-style WYSIWYG editor with AI-powered autocompletions.
 
-Here's a quick 30-second demo:
-
 https://github.com/steven-tey/novel/assets/28986134/2099877f-4f2b-4b1c-8782-5d803d63be5c
 
 <br />
 
+## Installation
+
+To use Novel in a project, you can run the following command to install the `novel` NPM package:
+
+```
+npm i novel
+```
+
+Then, you can use it in your code like this:
+
+```
+import { Editor } from "novel";
+import "novel/styles.css";
+
+export default function App() {
+  return (
+     <Editor />
+  )
+}
+```
+
+The `Edtior` 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`                                                                                                         |
+| `defaultValue`      | `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) |
+| `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). | `[]`                                                                                                                    |
+| `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).        | `{}`                                                                                                                    |
+| `onUpdate`          | `(content: JSONContent) => void` | A callback function that is called whenever the editor's value is updated.                                                                                                                 | `() => {}`                                                                                                              |
+| `onDebouncedUpdate` | `(content: JSONContent) => void` | A callback function that is called whenever the editor's value is updated, but only after the defined debounce duration.                                                                   | `() => {}`                                                                                                              |
+| `debounceDuration`  | `number`                         | The duration (in milliseconds) to debounce the `onDebouncedUpdate` callback.                                                                                                               | `750`                                                                                                                   |
+
+Here's an example application: https://github.com/steven-tey/novella
+
 ## Deploy Your Own
 
 You can deploy your own version of Novel to Vercel with one click:

app/layout.tsx → apps/web/app/layout.tsx

@@ -1,5 +1,4 @@
 import "@/styles/globals.css";
-import "@/styles/prosemirror.css";
 
 import { Metadata } from "next";
 import { ReactNode } from "react";

app/page.tsx → apps/web/app/page.tsx

@@ -1,6 +1,6 @@
+import { Github } from "@/ui/icons";
+import Menu from "@/ui/menu";
 import Editor from "@/ui/editor";
-import Github from "@/ui/icons/github";
-import Menu from "./menu";
 
 export default function Page() {
   return (

apps/web/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

apps/web/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "novel-next-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "format:write": "prettier --write \"**/*.{css,js,json,jsx,ts,tsx}\"",
+    "format": "prettier \"**/*.{css,js,json,jsx,ts,tsx}\"",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@radix-ui/react-popover": "^1.0.6",
+    "@tiptap/core": "^2.0.3",
+    "@tiptap/extension-color": "^2.0.3",
+    "@tiptap/extension-highlight": "^2.0.3",
+    "@tiptap/extension-horizontal-rule": "^2.0.3",
+    "@tiptap/extension-image": "^2.0.3",
+    "@tiptap/extension-link": "^2.0.0-beta.220",
+    "@tiptap/extension-placeholder": "2.0.3",
+    "@tiptap/extension-task-item": "^2.0.3",
+    "@tiptap/extension-task-list": "^2.0.3",
+    "@tiptap/extension-text-style": "^2.0.3",
+    "@tiptap/extension-underline": "^2.0.3",
+    "@tiptap/pm": "^2.0.0-beta.220",
+    "@tiptap/react": "^2.0.3",
+    "@tiptap/starter-kit": "^2.0.0-beta.220",
+    "@tiptap/suggestion": "^2.0.3",
+    "@types/node": "18.15.3",
+    "@types/react": "18.0.28",
+    "@types/react-dom": "18.0.11",
+    "@upstash/ratelimit": "^0.4.3",
+    "@vercel/analytics": "^1.0.1",
+    "@vercel/blob": "^0.9.2",
+    "@vercel/kv": "^0.2.1",
+    "ai": "^2.1.3",
+    "clsx": "^1.2.1",
+    "eslint": "8.36.0",
+    "eslint-config-next": "13.2.4",
+    "eventsource-parser": "^0.1.0",
+    "framer-motion": "^10.12.18",
+    "lucide-react": "^0.244.0",
+    "next": "13.4.8-canary.14",
+    "novel": "workspace:^",
+    "openai-edge": "^1.0.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-markdown": "^8.0.5",
+    "sonner": "^0.7.0",
+    "tippy.js": "^6.3.7",
+    "tiptap-markdown": "^0.8.1",
+    "typescript": "4.9.5",
+    "use-debounce": "^9.0.3"
+  },
+  "devDependencies": {
+    "tailwind-config": "workspace:*"
+  }
+}