steven-tey / novel

Notion-style WYSIWYG editor with AI-powered autocompletion.

Novel

An open-source Notion-style WYSIWYG editor with AI-powered autocompletions.

Introduction · Deploy Your Own · Setting Up Locally · Tech Stack · Contributing · License

Docs (WIP)

https://novel.sh/docs/introduction

Introduction

Novel is a Notion-style WYSIWYG editor with AI-powered autocompletions.

Novel.mp4

Deploy Your Own

You can deploy your own version of Novel to Vercel with one click:

Setting Up Locally

To set up Novel locally, you'll need to clone the repository and set up the following environment variables:

• OPENAI_API_KEY – your OpenAI API key (you can get one here)
• BLOB_READ_WRITE_TOKEN – your Vercel Blob read/write token (currently still in beta, but feel free to sign up on this form for access)

If you've deployed this to Vercel, you can also use vc env pull to pull the environment variables from your Vercel project.

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

pnpm i
pnpm dev

Cross-framework support

While Novel is built for React, we also have a few community-maintained packages for non-React frameworks:

• Svelte: https://novel.sh/svelte
• Vue: https://novel.sh/vue

VSCode Extension

Thanks to @bennykok, Novel also has a VSCode Extension: https://novel.sh/vscode

CleanShot.2023-09-02.at.09.36.03.mp4

Tech Stack

Novel 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

Contributing

Here's how you can contribute:

• Open an issue if you believe you've encountered a bug.
• Make a pull request to add new features/make quality-of-life improvements/fix bugs.

Repo Activity

License

Licensed under the Apache-2.0 license.

novel's Issues

Application error when I try to generate html content with Ai

I get the following error when I ask the AI to generate some html content

Recording.2023-07-05.221132.mp4

s/WYSYWIG/WYSIWYG

Is "WYSYWIG" a new acronym that means something different in this context, or was it a typo?

Want to contribute to project translation

Want to provide Chinese translation, how do I start?

Multiple Editors in one page which have different local storage keys

Hi team,
First of all thank you for this awesome project.
I wanted to know how I can add multiple editors in one page which have thier own local storage key, value. Right now it save only one local storage key: novel__content where all the content is being saved.

If there are two separate editors then it overrides each other's values.

Please help me with this.

Please support custom SYSTEM role messages

Please support custom SYSTEM role messages, thank you~!

Image resizing feature

Description

The current editor does not have an image resizing feature. This means that users are unable to resize images to fit their desired size. This can be a problem for users who want to use images in their content but don't need the full size of the image.

Solution

The proposed solution is to add an image resizing feature to the editor. This feature would allow users to resize images to a specific width, or height of the original size. The feature would also allow users to maintain the aspect ratio of the image when resizing.

Feature Example

Untitled.video.-.Made.with.Clipchamp.14.mp4

AI generated content in markdown is messy

openAI's response does not play nice with new markdown feature. My guess you need to force the response to be plain text.

flushSync issue when adding an Image from Slash Command

Hi there, and thank you for your excellent implementation. Trying to replicate it locally I got everything working, except the "Image" option from the slash command menu. I keep getting

Warning: flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.

that seems to be caused by the view.dispatch(transaction). Usually its triggered when I insert 2 images in a row, the 1st image is fine. It's working fine from onDrop or onPaste events, but not with the event when slash option is selected.

I am unsure what I could do to solve this issue, do you have any clue? Thanks a lot :)

Please support Azure OpenAI

Please support Azure OpenAI, thank you~!

As a user I need to be able to reset text formatting and indentation

Expected outcome: as a user of Novel's UI, I need text editing functionality that enables me to 'reset' text body indentation, particularly when creating a new line after a numbered or unordered list

Current outcome: When create a new line after a numbered or unordered list, I am able to delete the unwanted bullet point by hitting backspace however, I am not able to reset the indentation to be a primary body of text, either by hitting backspace again (which just deletes the new line and positions the new paragraph as a body within the list item) or by hitting return key which just creates a new line at the same (unwanted) indentation formatting

When Open AI key is not provided it does not show any proper response.

when i unfortunately tried using no open ai key it is showing some vague html in toast box. It would be better if it shows no key provided error in toast.

api/generate is facing 405 error

Hi, I deployed my novel project with vercel link you provided and figure it out that text generation doesn't work.
I set up all project in local environment and I found an error like below.

Do you happened to know that I have to subscribe any plans for testing novel?

error - Error: Response error: {
    "error": {
        "message": "You exceeded your current quota, please check your plan and billing details.",
        "type": "insufficient_quota",
        "param": null,
        "code": "insufficient_quota"
    }
}

    at Object.eval (webpack-internal:///(middleware)/./node_modules/ai/dist/index.mjs:137:32)
    at Generator.next (<anonymous>)
    at fulfilled (webpack-internal:///(middleware)/./node_modules/ai/dist/index.mjs:42:24)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Collision detection for Selector dropdowns

Currently, the Color and Node Selectors is unable to detect when it's near the bottom of the screen and has to be opened the other way round:

Using something like a Radix Popover could fix this:

CleanShot.2023-06-29.at.08.25.00.mp4

We'll also want to make sure to limit the height of the dropdown and add overflow-scroll depending on the screen height.

Can you add Resizable Media extension

I tried to add Resizable Media extension from this repo but I couldn't unfortunately
https://github.com/sereneinserenade/notitap/tree/main/src/tiptap/extensions/resizableMedia

can anyone add it to this repo ?

the "/" menu doesnt scroll when navigated with arrow keys

Custom LLMs & APIs Endpoints

Will it support the local llm models like LlaMa and RWKV using the local APIs like oobobga Text Generation WebUI ?
This would solve the problems of insufficient OpenAI credits and limited tokens and the countries that ChatGPT access is still unavailable in yet

[Feature Request] Support InternLM

Dear novel developer,

Greetings! I am vansinhu, a community developer and volunteer at InternLM. Your work has been immensely beneficial to me, and I believe it can be effectively utilized in InternLM as well. Welcome to add Discord https://discord.gg/gF9ezcmtM3 . I hope to get in touch with you.

Best regards,
vansinhu

Dark Mode

Can we have a Monospaced font?

In the font menu, can we have a Monospaced font. So I can share programming code?
Thanks!

Add variety of different types of formats

Description

The current text editor does not support a variety of different types of formats, which limits its usability. For example, it does not support code blocks, block quotes, or tables. Adding these formats would make the text editor more versatile and useful for a wider range of tasks.

We can add:

• CodeBlock
• BlockQuote
• Horizontal Rule
• Tables etc

Weird indentation after deleting todo list item

If you have a task list and delete any task that isn't the first, you are stuck in a weird indentation state. Pressing delete returns you to the previous line, so the user has to to press enter (while on the line with the weird indentation) to remove the indentation. Pressing enter actually seems like the proper way to delete an empty item without the indentation.

Screen.Recording.2023-06-23.at.7.49.40.PM.mov

There is also some other weird behavior with the indentation; if you have a line below the todo list (as I did to showcase the different indentation) while the strange indentation is happening, pressing delete while on that line below creates a new task. See 0:03 to 0:05 above.

vim keybindings

Please,
Add vim keybindings

AI

Underline/strike color is not matching selected color

Happy to have some help on this.

Tiptap HTML output:
<p><u><span style=\"color: #dc2626\">Underlined</span></u> <s><span style=\"color: #9333ea\">Strike</span></s></p>

Need Capability to specify OPENAI Model Version, temperature and output token length #1

While self hosting this app, we need capability to specify some of the key parameters to make it usable. Currently it only generates 2 sentences stops. SInce while hosting on our own the cost is bourn by the user it make perfect sense to allow the user to use this beautiful app to its true capability.

Feature to convert text to link or link to text

Currently novel.sh doesn't support feature to convert text to actual link e.g. "Twitter" word to actual twitter link.

Feature Request: Commenting System similar to Notion/Google Docs

A commenting system for Novel would be great IMO ✨.

• It allows users to highlight text and shoot in some hot takes🔥 or constructive feedback, Notion or Google Docs style. directly inline.
• Then multiple users comment on the same portion of the text 🗣️, the comments can be threaded.
• Once feedback has been addressed, users can have the ability to mark a comment as resolved ✅. Resolved comments can then either disappear or be accessible in a resolved comments section/archive.

Safari selectors state bug

I cannot use any selector from bubble menu on safari.

When I try to click on for example colors, bubble menu i rerendered or changes it's state to hidden and open once again.

Disable or remove EditorBubbleMenu on read only mode

The "EditorBubbleMenu" remains active when the editor is in readonly mode.

I want to make my blog editable in real-time, based on the session and author. However, I have an issue with the novel editor, where the "EditorBubbleMenu" still runs when the editor is in readonly mode.

#Demo

Demo

Go to File > publish to make editor read only mode

I'm using this code to make the editor disabled or readonly mode.

const [canEdit, setCanEdit] = useState(true);
...
useEffect(() => {
    editor?.setEditable(canEdit); // toggle editable
 }, [editor, canEdit]);

...

Tab-1689375707183.webm

Custom Endpoint/ChimeraGPT

When deploying Vercel Server, I want to be able to specify an endpoint. This is necessary for services like ChimeraGPT to work.

Weird UI

Thinking about adding a dark mode?

Is it possible to consider adding a dark mode switch, which could be great for writers used to writing in dark mode?

failed to fetch the chat response

HELP!!!
I have deployed it on the vercel and I try to type with autocomplete but failed
it report "failed to fetch the chat response"

Notes saved in local browser instead of cloud

Is it possible to have changes saved in the cloud when I use my own vercel deployment so I have the same content regardless of the device I'm using to connect

Word "C++" will trigger auto complete for "C", how can I type "C++" in the editor?

Blob early access

How can I get early access to Vercel blob 🙏?

Support Drag handles

Is it possible to implement drag handles similar to those in Notion?

When I deploy to Vercel and use autocomplete I get "Something went wrong" error

When I deploy to Vercel and use autocomplete by using either ++ or the slash menu I get a message "Something went wrong" in a pop-up in the lower right corner.

The error log shows status 429 ("too many requests") coming back from OpenAI, but this is unexpected because I haven't used it for anything else, and it happened with my first request.

This may be a problem on the OpenAI side.

Adding width to document for wider text documents

What is the easiest way to add width to the document, I am trying to create it for screenwriters or playwrights and the format gets crunched. Is there any easier way to change the formatting component?

Add support for different API routes for additional slash commands

The completion slash command is great, but it would be very valuable to be able to configure additional API routes that can be invoked when selecting additional slash commands.

For example:

A user may want to customise the slash commands by adding a 'Spell Check' command that may invoke the /spellcheck API route and run a slightly different prompt against OpenAI instead of generating content.

I have attempted to add this functionality myself but I have been unable to do so despite spending a few days on this (help!).

shash commands can appear anywhere?

now: It allows you to start a new line with / and will bring up a popup to select which node should be added
hope: type / anywhere will bring up a popup

Set Hyperlink on Text With Input UI

I wanted to contribute to this feature where a user can set a hyperlink on any text with some basic UI like this should I work on this ?

Allow storing editor content as HTML

Can we have an option to store the editor content as HTML? Or at least, is there an easy way to generate the raw HTML from the editor content?

EDIT: Looks like TipTap allows the following? Just confirming that this would work:

const html = editor.getHTML()

Whether external users can call APIs by themselves

Whether external users can call APIs by themselves? And thanks for such a good open source project!

Share your document?

Can we have the ability to share the document with a public link?

PS. Was not able to set "Label" for this message to "enhancement"..

Table support

Hey, first of thanks for developing and open sourcing novel 👍

It would be great if somebody could add proper table support.

Personally I like the approach of vrite: https://editor.vrite.io/

It also uses tiptap, so maybe you can borrow the code?
Code for the standalone editor is here: https://github.com/vriteio/vrite/tree/main/apps/web/src/views/standalone-editor

Only Show `EditorBubbleMenu` on Editor Right Click

Description

Currently, when right-clicking inside the editor, both the browser's default context menu appear and the EditorBubbleMenu component. This can be a bit jarring at first glance.

Screenshot:

Solution

Prevent the EditorBubbleMenu component or the browser default context menu from appearing when right-clicking inside the editor.

The solution can be as simple as either:

On the editor's main div (here)

<div onContextMenu={preventDefaultContextMenu}>

const preventDefaultContextMenu = (e) => {
  e.preventDefault();
};

or

A listener:

div.addEventListener("contextmenu", (e) => {e.preventDefault()});

Alternative

If the above is not preferred, it could be worth making the EditorBubbleMenu less of a popover and more of a 'footer menu' that appears at the bottom of the editor when the focus is active in the editor (typing).

trying to get the BLOB_READ_WRITE_TOKEN but inn vercel its not showing option for connect with blob

How to integrate into existing project?

Is there any instructions on how to integrate this into an existing project? Specifically I am looking to add this to an angular project.

Github Copilot like Ghost text autocomplete

Description

It would be nice instead of the adding the AI text directly to the document, it to be shown as a ghost text while you write something, similar to how GitHub copilot works and require tab to accept the generated text.

Implementation

I don't know how feasible this is using tiptap, I checked if there is any plugin for it that allows you to add ghost text i.e. text that is shown, but no selectable & disappears if you don't accept it via tab, but couldn't find any. So, this may require creating one.

Consideration

Since similar to GitHub copilot I would expect the autocomplete to be rerun if I don't accept the text and continue writing, this could result in a higher number of calls to openai. Therefore, it would probably be good to limit the output tokens