Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: I made an open-source Notion-style WYSYWIG editor

novel.sh

Post reply on HN
Print view View original

51–60 of 140 posts

Re: Show HN: I made an open-source Notion-style WYSYWIG editor

#51

Post by unshavedyak »

Blahah wrote: post #48
unshavedyak wrote: post #43

Earlier quoted context omitted.

> Just add a CSS stylesheet which turns into something half-decent, put a note that markdown is supported, and make a plain text editor. Any examples that you can think of which make a plain text area half-decent? So many sites go with heavy-JS options that i'm not sure what is possible for a good (half decent) visual editing experience in just CSS

Are you looking to avoid the js tooling ecosystem? As in, just an html file with script tags is fine?

As much as possible, the specifics matter i think, so i'll weigh what script(s) offer in terms of UX compared to load time/bandwidth/etc. In general i'm just trying to stay super lightweight, only giving in when necessary.

Also, focusing on CSS first means - hopefully - that the UX is "as good as it gets" for JS-less individuals. If i add a small JS framework on-top of that it's likely fine.

edit: I'm sort of experimenting with how good i can make modern websites. Both on UX, accessibility, low bandwidth (folks on satellite connections appreciate this), etc. I'd like the site to "look like any modern site" (minus obtrusive crap), but suffer as few flaws as possible.

Re: Show HN: I made an open-source Notion-style WYSYWIG editor

#52

Post by steventey »

ithkuil wrote: post #50
Blahah wrote: post #35

Earlier quoted context omitted.

Not sure why that seems like a challenge, but it's trivial since 2001. Use a codeblock.

++ triggers AI autocomplete; a whole wall of text of autocomplete. So the question was likely: how to write the word "C++" in your prose (as opposed to writing some C++ code)

Great question – all you need to do is hit CMD+Z or Esc when the generation starts and it automatically aborts it and gives you your "++" back!

Here's the code for it: https://github.com/steven-tey/novel/blob/main/ui/editor/inde...

I've debated between "++" vs "+++", but settled for ++ since it's lesser keystrokes (at the risk of conflicting with more common words/phrases) haha

Re: Show HN: I made an open-source Notion-style WYSYWIG editor

#55

Post by bhl »

unshavedyak wrote: post #24

Tangent: On the note of web based text field for "normal users", what's the best UX you can get while also trying to be as no-JS-friendly as possible? Are there CSS-only tricks to make editing in an input field nice? I'm making a low-JS site, but it also has a lot of input fields, user content generation, etc. In "modern CSS" i feel like Input boxes should be better than they are. Is JS the only way?

For rich text, I would just use ProseMirror or Lexical and avoid the pain of working with contenteditable directly.

To appreciate the difficulty and nuances with building a text editor on contenteditable, I would read through the commit history on ProseMirror https://github.com/ProseMirror/prosemirror-view/commits/mast...

Re: Show HN: I made an open-source Notion-style WYSYWIG editor

#56

Post by YousefED »

rtpg wrote: post #36

At the risk of sabotaging stuff I've worked on, it's _astoundingly easy_ to glue together Y.js, prosemirror, and a little bit of express.js to get a distributed Notion clone with conflict free resolution. Like I have something that I got working in 3 days with multiple pages, so links between things, and cursor syncing (most of this work is provided by wonderful people with full-featured libraries!). There's some tri…

fyi, from my experience it’s still quite a lot of work to build on top of Prosemirror and TipTap directly to do so.

So I’ve started working on https://www.blocknotejs.org to make this even easier for developers; its a batteries-included library with Notion style UI elements out of the box.

Definitely bullish on this ecosystem including Yjs and local first dev!

Re: Show HN: I made an open-source Notion-style WYSYWIG editor

#57

Post by steventey »

Hello Hacker News! Maker of Novel.sh here!

First of all, apologies for the typo lol, apparently I can't spell "WYSIWYG" :')

Some context: I've always been a huge fan of Notion's editor, and since Vercel launched the AI SDK yesterday (https://sdk.vercel.ai/docs), I decided to take this as an opportunity to recreate Notion's block editor + incorporate some of Notion's latest AI features with `npm i ai`

Here's basically how it works:

1. Tiptap Editor setup with custom slash command extension 2. `useCompletion` hook at the parent editor + the slash command menu – using `id` to share states 3. `/api/generate` route to stream responses from OpenAI

Novel also handles image uploads via drag & drop / copy & paste. Images are stored as base64 strings in localStorage currently, but I'm planning to implement uploads to Vercel Blob in the future.

The code is fully open-source – feel free to check it out: http://novel.sh/github

Hope y'all like this – let me know if you have any feedback!

Re: Show HN: I made an open-source Notion-style WYSYWIG editor

#58

Post by JSavageOne »

rtpg wrote: post #36

At the risk of sabotaging stuff I've worked on, it's _astoundingly easy_ to glue together Y.js, prosemirror, and a little bit of express.js to get a distributed Notion clone with conflict free resolution. Like I have something that I got working in 3 days with multiple pages, so links between things, and cursor syncing (most of this work is provided by wonderful people with full-featured libraries!). There's some tri…

Would love to see a demo and/or the code if you were open to open-sourcing it! I'm sure there's someone out there who'd be willing to contribute to the styling.

Re: Show HN: I made an open-source Notion-style WYSYWIG editor

#60

Post by JSavageOne »

russellbeattie wrote: post #6
billconan wrote: post #3

I have a similar project https://github.com/shi-yan/Epiphany

Mine: https://hypertext.plus Pure HTML document editor. Open source, PWA, based on TinyMCE, with CSS and markup editing, JS macros, saves to local drive, plus OpenAI integration if you have a key.

The features sound great. Some advice though:

- I was about to tell you that there really should be a demo, but just now I realized the "World Wide Web Phase 2 Begins Here" button links to the demo. You really should change that text to "Live Demo" or something more clear.

- The demo itself takes a long time to load and seemed to refresh multiple times

- The GitHub should also have a link to the demo, and an image would be nice as well

- The landing page is very ugly. Any generic template would do better and inspire more confidence.

- Why not highlight some of those features you mentioned on the landing page?

Best of luck! The features sound great.

Post reply on HN