Live data from Hacker News

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

novel.sh

61–70 of 140 posts

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

#61
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…

Notion is goat-ed! It's one of the greatest software ever created in our time imho.

Y.js sounds amazing – gonna have to look into it! Have been using Liveblocks for real-time data stuff, the DX is a breeze to work with!

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

#62

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

Since we're shilling projects, this is the Notion clone I've been working on: https://mindgarden.app/ . It's not ready yet though, hopefully will be in a few weeks.

Wow this looks awesome! Using Lexical?

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

#63

Pretty awesome. Wish, it doesn't rely on any framework and can be plug & play with other frameworks.

Tiptap, of which Novel.sh is built on top of, has cross framework support I believe (React, Vue)! Novel is fully open-source so feel free to check out the code and plug and play into your framework of choice: http://novel.sh/github

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

#65

How is it possible for the LLM completion to be so fast? I can't even run 169M RNN models that quickly.

Oh, it just uses OpenAI. https://github.com/steven-tey/novel/blob/62d32be43dae8aa40fa... ...and has a 50-request limit per day . https://github.com/steven-tey/novel/blob/62d32be43dae8aa40fa... ...and trims the content to, um. 500 characters?! https://github.com/steven-tey/novel/blob/62d32be43dae8aa40fa... So past a certain point you'll get the same completion repeatedly / a completion of the start of your document, c…

Oh yeah good catch – just bumped up the character limit to 5,000 (forgot I just upgraded to gpt-3.5-turbo-16k today) :)

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

#67

Very clever that the user is prompted to use the autocomplete to read the description.

yeah in v1 I had something like copilot suggestion model: https://twitter.com/steventey/status/1669798463289040921/vid...

But I ended up scrapping it because it was a bit too noisy. Might add it back as an optional checkbox tho!

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

#68
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!

I built on the same stack and have a similar opinion. It’s only easy if you’re depending on the webrtc implementation. If you’re coordinating changes across your own server, you gotta put in some work.

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

#69
post #28

Earlier quoted context omitted.

Not the answer anyone was expecting, but SharePoint Online. Wiki pages, every list you create is a SQL table with a robust API, and the power platform is one of the best no/low code solutions available. I create full react applications around this and host the SPA in a SharePoint document library.

Can you recommend a good tutorial?

The first step might actually be a non-starter for most people. Notion is free, SharePoint is usually offered as a capability within a business or school's Office 365 subscription. I believe you can either subscribe yourself for $5.00 / month using this link: https://www.microsoft.com/en-us/microsoft-365/sharepoint/com..., or maybe you're lucky and already have an account with your school / work. If neither of these work for you, you can also sign up for the Microsoft Developer Program, which is actually pretty cool; here is a guide for setting up a SharePoint site through the developer program: https://www.sharepointdiary.com/2021/05/how-to-create-sharep...

I should take a moment to clarify that I'm not affiliated with Microsoft or any of the links I'm posting here in any way. I make a living building web sites and as mentioned above, many of them leverage SharePoint. I find it a pretty easy way to build intranet solutions for my customers.

Assuming you've got your SharePoint site created within SharePoint Online, creating a "List" is pretty simple. Here's an article from Microsoft explaining how to do so: https://support.microsoft.com/en-us/office/create-a-list-0d3.... Think of a list as a database table. From there you can create various types of columns including "look-up" columns, which are basically joining to another table on the same site with a foreign key.

I think from there you could dive into the Power Platform, but there's so much out there, I think this would be a good start.

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

#70

Earlier quoted context omitted.

Rich text editing is probably not possible or not worth it. However, most people who disable JS are probably fine with not using rich text and definitely shouldn’t expect it. Just add a CSS stylesheet which turns into something half-decent, put a note that markdown is supported, and make a plain text editor.

> 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

The easiest (but maybe not the best) way is make your entire site adopt a CSS-only framework like Bulma: https://bulma.io/documentation/form/textarea/. Or you can use TailwindCSS or Uniform CSS and look for examples as a guide: https://tailwind-elements.com/docs/standard/forms/textarea/, https://tailwindcomponents.com/component/textarea, https://www.material-tailwind.com/docs/html/textarea, https://www.creative-tim.com/learning-lab/tailwind/html/text..., https://daisyui.com/components/textarea/

It's bit harder to do correctly manually just because of cross-platform browser quirks, you'll probably at least want normalize.css or CSS Reset. Even MDN docs has a half-decent textarea in 20 lines of CSS: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/te... (it looks ugly with monospace but change the font and I think it looks great)

Post reply on HN