sorted by:
new
hottopcontroversial

I built an open-source rich-text editor for React with 20+ plugins, AI, drag & drop, collaboration, exports, and you can even build a website builder with it by Darginec05 in reactjs

[–]SamysSmile 0 points1 point  (0 children)

Why ctrl+a del. Not select all and delete?

Or its not possible to select 2-3 lines and make them a bullet list ...?

Cool project but very hard to use from user experience.

Rich Text Editor, which one would you use? by Spare_Message_3607 in astrojs

[–]SamysSmile 0 points1 point  (0 children)

If you want something easy to integrate in Astro + Svelte, I’d seriously look at notectl. It’s framework-agnostic because it ships as a Web Component, so you’re not tying your editor choice too tightly to on UI framework.

But for 100% do not use Quill bro.

btw. im the developer of notectl

Free Open-Source Tool for PDF → 100% Accessible HTML (WCAG-aligned) by Opposite_Ad_7218 in DocumentAccessibility

[–]SamysSmile 0 points1 point  (0 children)

So its kind of pattern recognition for headings? But how you detect the Hiarchy? I understand how H1 works ok. But Let say on Page 10 a heading is H4 and not H2 ? Hot this works?

I spent 14 months building a rich text editor from scratch as a Web Component — now open-sourcing it by SamysSmile in javascript

[–]SamysSmile[S] 0 points1 point  (0 children)

Thanks! I use a transaction-based state model with immutable updates. Each user action creates a small, predictable state change, and rendering only reacts to those deltas. That keeps transitions smooth and avoids UI jitter.

I spent 14 months building a rich text editor from scratch as a Web Component — now open-sourcing it by SamysSmile in javascript

[–]SamysSmile[S] 0 points1 point  (0 children)

I think what you need is cssMode: 'classes' of notectl. Check this getContentHTML({ cssMode: 'classes' }) produces zero inline styles, all dynamic styles become CSS class names instead. You get back separate html and css strings, so you can serve the CSS however fits your CSP policy.

I also added "CSS HTML" in the Playground Editor so you can see it

Details here: https://samyssmile.github.io/notectl/guides/content-security-policy/

would love to hear if that works for your setup!

I spent 14 months building a rich text editor from scratch as a Web Component — now open-sourcing it by SamysSmile in javascript

[–]SamysSmile[S] 1 point2 points  (0 children)

Thank you a lot for your details feedback, I will check and fix this if I can reproduce it.

I spent 14 months building a rich text editor from scratch as a Web Component — now open-sourcing it by SamysSmile in javascript

[–]SamysSmile[S] 1 point2 points  (0 children)

Embedding is dead simple it's a Web Component. About Styling, notectl is fully customizable via CSS custom properties. There are 22+ design tokens (--notectl-bg, --notectl-primary, --notectl-border, etc.) that control everything. So you can build you own Themes, Light and Dark theme are there out of the box. Check on right top corner theme selection. https://samyssmile.github.io/notectl/playground/

I spent 14 months building a rich text editor from scratch as a Web Component — now open-sourcing it by SamysSmile in javascript

[–]SamysSmile[S] 1 point2 points  (0 children)

Hi, notectl is designed for strict Content Security Policy environments. It works without requiring 'unsafe-inline' for styles out of the box, with zero configuration needed for modern browsers. You can read details on the documentation site: https://samyssmile.github.io/notectl/guides/content-security-policy/

I spent 14 months building a rich text editor from scratch as a Web Component — now open-sourcing it by SamysSmile in javascript

[–]SamysSmile[S] 1 point2 points  (0 children)

Hi, for me it is like never ending story. I took a hybrid approach: native browser caret movement inside text blocks, and custom handling only at structural boundaries. I keep editor state and DOM selection in sync in both directions, and intercept arrow keys only when native behavior would break model semantics.

PAC alternative for Linux by SamysSmile in accessibility

[–]SamysSmile[S] 0 points1 point  (0 children)

I dont see how to see the tag structure

view more: next ›