Live data from Hacker News

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

novel.sh

131–140 of 140 posts

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

#131
post #47

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?

Not quite sure what you mean by normal. But if you want a nice input field - as in it allows you to input text and does what you expect with plain text, something like water.css maybe. If you want rich text, the Web was designed to offload this to js. Markdown and other similar systems were created to provide an alternative to this, but there's a barrier to entry because you want more than text. Text plus markup requ…

> Not quite sure what you mean by normal.

I just mean .. average users. Where a text box has some very limited features that may be thought of as the baseline, the standard, etc. Not even sure what qualifies as that, but i imagine a lot of users expect to be able to highlight text and make it bold, italics, etc.

I love markdown and want to support it as the primary interface.. but i don't want to solely force it. I'd love a really, really thin layer of JS which just gives in-line highlighting for markdown, for example.

I might try to make it honestly, if i can't find it. But that's a long ways down the road.

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

#132

Earlier quoted context omitted.

I would like to add: If the GP goes for any JS based solution, they should make sure to serve the JS themselves, and not outsource it to 3 CDNs. For us not liking JS too much people, the next best thing to no JS is little JS server by the website's server itself. Best with most of the website already rendering without JS, so that we see things when hitting the website and may consider it worth allowing its first part…

I do plan on self-hosting all (the very select few i use) JS and CSS. It's part of the binary for dead simple self-hosting. I'm going to attempt to be very privacy friendly, as much as possible, which will be an interesting adventure because it's ActivityPub related. Regardless this is all just an exercise for me because, frankly, i hate most websites lol. The ones that look good also tend to be slow. The ones that a…

Here’s a comparison for you because I just did the same.

Old site.

- Built with Gatsby, hosted on Netlify.

- Lots of client-side JS, but page loads are instantaneous because everything is prefetched and a page load is a client-side JS event not a server request.

- https://v4-johnnydecimal.netlify.app/

New site.

- Built with Astro, hosted on Netlify.

- Zero client-side JS, but each page load is a good ol’ fashioned HTTP request to the server.

- Pages are small. After caching my web fonts, each page is single-digit kilobytes. This is deliberate, I worked hard to achieve this.

- It doesn’t feel as fast. Because it isn’t. Because it can’t possibly be.

- https://johnnydecimal.com

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

#133

Earlier quoted context omitted.

Have you heard of Obsidian? It's a note-taking app build on locally stored markdown files with bidirectional linking and a great ecosystem of third party plugins. One of the most popular plugins is https://github.com/blacksmithgu/obsidian-dataview which lets you treat your notes as databases and query them to form tables. The creator has been working on its successor, Datacore https://github.com/blacksmithgu/datacore…

I have used Obsidian before, and the lack of any excel-like functionality (Dataview just wasn't enough) was what drove me to Notion. I'll keep an eye on Datacore though, it does seem like it might be able to achieve enough of what I'm looking to do.

What else were you looking for in dataview? It has a JS API.

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

#135
post #73

Earlier quoted context omitted.

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.

I did not rely on the webrtc implementation. Really you gotta do a lot of "echo server"-style shraing of messages and some sync messages from time to time but Yjs/CRDT stuff works pretty smoothly on this front. But my requirements are pretty loose

Nice, yeah from what little I've done with it, I've learned that the difficulty can vary greatly depending on your requirements.

For me, I had a pre-existing note-taking app so there were tons of documents stored in html format. So I had this challenge where I had to read them from html, convert them to yjs, then sync the changes back to the DB in html format. It was kinda tough.

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

#136

Earlier quoted context omitted.

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!

Can this be used in Svelte or is it only for React?

It can be used for other frameworks than React, but the React version comes with built-in UI components. See https://www.blocknotejs.org/docs/vanilla-js for more info

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

#137

Earlier quoted context omitted.

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!

YousefED, love Blocknote, but I ended up not using it for a new project, just because it's too prescriptive. Which I totally get is a positive for many. I.e they want the UI and controls built in and off the shelf. I would love to just use the Core API (block etc) and get some useful hooks, so I can extend it in my own ways

Thanks for the feedback! It was designed from the philosophy that existing frameworks like PM or even TipTap are too low-level - but I can understand you need more ways to customize UI elements. It's certainly possible, but I think we need to document it better

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

#138

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 basical…

It's ironic that after posting a text editor you can't edit the text in your title.

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

#139

Earlier quoted context omitted.

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?

Yup!

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

#140

Earlier quoted context omitted.

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.

FYI On Firefox/Android the text on your website overflows and gets cut off at the right edge of the screen, without a way to scroll horizontally.

Thank you, will add that to the long list of remaining work!
Post reply on HN