Show HN: Gemini-Powered Contextual Text Editor with Inline Diffing View

Show HN: Gemini-Powered Contextual Text Editor with Inline Diffing View(ai-writing-tool.vercel.app)

3 points by ynh 1 year ago | 3 comments

Hey Hacker News,

I'm excited to share an early prototype of an AI-powered editor that leverages context for improved text generation and refinement. By providing notes, links, and other relevant information, you guide the AI, leading to more useful outputs. This editor is designed around my workflow, where I frequently use LLMs to refine my writing. I found myself spending a lot of time copying context into chatbot UIs and then copying the results back into my documents. This editor prototype aims to make using LLMs for writing more intuitive and streamlined, addressing the inefficiencies of copying context between different interfaces and comparing text.

This project is still in its early stages, and I'm looking for feedback. How could this be improved? What features are missing? Let me know in the comments.

Link to project: ai-writing-tool.vercel.app

Thanks!

ShaggyHotDog 1 year ago |

I like the subtle editor. What did you use to build the editor? Lexical or TipTap?

Also you might want to limit the AI generation (Cost wise) in some way before posting on hacker news, maybe only authenticated user can generate content.

ynh 1 year ago | |

I think using TipTap would have been the best option but I decided to build my own editor using contenteditable with the diff-dom library to maximize my learnings.

The editor keeps track of the original text and the modified text (not yet accepted text). The rendering starts by calculating the diff between the two texts and building a virtual DOM tree with special markers for changes. Then, cursors and selections are inserted into the virtual DOM, after which the DOM is processed by the markdown parser. The parser converts markdown syntax into formatted DOM elements. Finally, the virtual DOM is diffed against the contenteditable DOM, and the minimal updates are applied. There is some additional logic to handle cursor positioning between the updates and to manage the history.

ShaggyHotDog 1 year ago | | |

That is impressive, any examples that I can see, maybe something you followed or learned from?