steven-tey / novel Goto Github PK
View Code? Open in Web Editor NEWNotion-style WYSIWYG editor with AI-powered autocompletion.
Home Page: https://novel.sh
License: Apache License 2.0
Notion-style WYSIWYG editor with AI-powered autocompletion.
Home Page: https://novel.sh
License: Apache License 2.0
Is it possible to consider adding a dark mode switch, which could be great for writers used to writing in dark mode?
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.
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.
How can I get early access to Vercel blob π?
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.
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 :)
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!).
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
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.
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()});
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).
When deploying Vercel Server, I want to be able to specify an endpoint. This is necessary for services like ChimeraGPT to work.
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.
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.
Please,
Add vim keybindings
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
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.
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.
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
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"..
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
A commenting system for Novel would be great IMO β¨.
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
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()
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.
Want to provide Chinese translation, how do I start?
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:
We'll also want to make sure to limit the height of the dropdown and add overflow-scroll
depending on the screen height.
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
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.
Whether external users can call APIs by themselves? And thanks for such a good open source project!
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.
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:
In the font menu, can we have a Monospaced font. So I can share programming code?
Thanks!
Please support Azure OpenAI, thank you~!
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)
Is there any instructions on how to integrate this into an existing project? Specifically I am looking to add this to an angular project.
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
Please support custom SYSTEM role messages, thank you~!
I get the following error when I ask the AI to generate some html content
Is "WYSYWIG" a new acronym that means something different in this context, or was it a typo?
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?
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 ?
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.
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.
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]);
...
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.