10 ms·
Show HN: ORY Editor – A rich editor for the browser, built with React and Redux
- timdorr 9y agoDemo here: http://editor.ory.am/ http://editor.ory.am/ Looks similar to Draft (https://draftjs.org https://draftjs.org) at least in how they think about maintaining editable content outside of the DOM. Glad to see some editors finally put this theory to practice.
- hla19 9y agoAlmost broken on mobile, and my iphone gets really hot...
- jswizzard 9y agoWhich iphone do you use? Also is it safari? It's currently absolutely not optimized for mobile, as most content creation happens on the desktop. We might though at some point.
- criddell 9y agoWhen you say not optimized for mobile, does that include use on laptops?
- ekzy 9y agoMy Macbook gets really hot as well. It seems to be quite cpu intensive, and the editing is not very smooth. Otherwise, the product looks interesting
- jswizzard 9y agoWe're trying to improve the experience. One possible issue could also be a large gifs in the content: https://storage.googleapis.com/ory.am/inline-edit-lg.gif https://storage.googleapis.com/ory.am/inline-edit-lg.gif I'll resize that, and let you know - could you test again then?
- TAForObvReasons 9y ago> Promising libraries potentially solving the above where abandoned by their maintainers, because it started as a special use case, or a free-time project. > It is built by a company, reducing the likelihood of abandonment. Even projects "built by a company" suffer the same fate. The only way to reduce the likelihood of abandonment is to tie a revenue stream directly to it, like customers paying for support or a pro version with additional features
- jswizzard 9y agoThat's what we're doing: http://www.ory.am/sites/ http://www.ory.am/sites/ - although there's obviously never the guarantee that a project is maintained. However, all of our other projects have been maintained for over two years. Anyways, you're now one library richer, that solves a hard problem and we're committed to making it awesome.
- jswizzard 9y agoOh, and I almost forgot to say that. The editor is also used at serlo ( http://en.serlo.org/serlo http://en.serlo.org/serlo ) which is the largest educational platform for germany with 1 million MAUs. So there's really little chance of this being discontinued over the next 4 years.
- moron4hire 9y agoYeah, I've gotten this response for my framework vs. a competing one from Mozilla. I usually reply "Mine came out a year before theirs and I still work on it all the time, and how 'bout that Shumway?"
- deleted 9y ago[deleted]
- JoeAltmaier 9y agoI've come to the conclusion that "All software is ultimately abandoned". Ours is a fast-changing industry. If software isn't abandoned, it probably should be. Its the oldest frameworks and languages that get the most criticism.
- Shank 9y agoThe Chrome worker for the demo site accumulated about 600mb of ram. Is the editor really that heavy or is the demo page abnormally heavy?
- arekkas 9y agoSee this comment: https://news.ycombinator.com/item?id=14417601 https://news.ycombinator.com/item?id=14417601 - the memory heap should now be around 20 megabytes.
- nudpiedo 9y agoI like it because it looks complete and clean, however in safari for iPad the readme page in github already breaks and says the typical: "A problem has ocurred, so the page has been reloaded" I hope they fix it because it looks perfect for fast mockups Edit: it seems to sadly happen with all ORY pages including the documentation
- iplaw 9y agoI enjoyed messing around with it but, like others have noted, it seems to be resource intensive - both CPU and memory. My CPU fans kicked into turbo-jet mode after playing around with the editor for a while. Maybe it's less resource intensive on the user (non-editor) side? Optimizations will go a long way to swaying adoption. Clients like easy-to-use editing capabilities, and it doesn't get much easier than this.
- rkuykendall-com 9y agoI'd love to switch to a modern, React editor, but sadly they're all for 'rich text', but not full HTML, so I'm stuck with TinyMCE. I realize my use case is uncommon, which is users tweaking HTML emails before they are sent.
- tarr11 9y agoYou should take a look at the Monaco Editor[1], which is used in VS Code. It is available as a javascript component, and there is also a React wrapper around it [2] [1] https://github.com/Microsoft/monaco-editor https://github.com/Microsoft/monaco-editor [2] https://github.com/superRaytin/react-monaco-editor https://github.com/superRaytin/react-monaco-editor
- arekkas 9y agoThe high CPU and memory usage was due to a large gif which was included two times. This gif accidentally was 1280p with 20fps and was about 40mb large. For some reason, the resizer did not properly work. Anyways, the gif is now removed. I hope the performance gets much better now. The CPU fans on macbooks going up where probably due to a lack of a dedicated graphics card. This happened to me with my macbook and large gifs too. If the problems don't go away, please create an issue in the repo so we can work on improving this! It would be important to include your steps so we are able to reproduce these issues. edit:// Since this comment is on the top, I'll address a few more questions here too. If you missed the demo, it's here: http://editor.ory.am/ http://editor.ory.am/ First, this is a layout editor first- and foremost. Behind the scenes, React, Redux and slate.js ( http://slatejs.org/ http://slatejs.org/ ) is being used. Each cell is a React component that you can implement yourself. In fact, the text component itself is a plugin that wraps slate.js. Second, we're integrating this editor in Germany's largest e-learning platform (wiki-esque) with ~1 million MAUs: https://de.serlo.org https://de.serlo.org And lastly we're working on a business model behind it, with our ory sites product (early access): http://ory.am/sites/ http://ory.am/sites/ If you want to check out our other open source products, feel free to do so: https://github.com/ory https://github.com/ory
- rtcoms 9y ago> First, this is a layout editor first- and foremost. Behind the scenes, React, Redux and slate.js ( http://slatejs.org/ http://slatejs.org/ ) is being used. Would it make sense to have a separate repo for layout editor ?
- arekkas 9y agoNot sure what you mean? This is already the case, all cells that you can use in the demo are actually plugins. Check this directory: https://github.com/ory/editor/tree/master/packages/plugins/content https://github.com/ory/editor/tree/master/packages/plugins/c...
- ctoth 9y agoThis does not appear to work at all with my screen reader. Accessibility as afterthought, as always. I used to look forward to trying to help people fix their stuff to be accessible, but now I'm just tired of every single fucking thing somebody creates being broken for me because everything is a complete heaping pile of inaccessible garbage and nobody even thinks about accessibility. It's not like there aren't thousands of pages of documentation on how to make stuff accessible... but the libraries keep getting released without accessibility, and then people build components using several of these libraries and they're useless, and then people build entire apps out of these components... And the web that I used to know and love and get around just find goes dark. And this is going to get integrated into some big educational site? So I guess it sucks to be a blind student in Germany. What a mess. Sorry for the negativity, but this just really, really gets old.
- cocktailpeanuts 9y agoIsn't a lot of the "Others don't do this" addressed by Prosemirror? http://prosemirror.net/ http://prosemirror.net/
- explorigin 9y agoOne of their requirements is "Based on reusable React Components, it gives developers, authors and designers new ways of working together and creating better and richer experiences more easily." So basically Prosemirror is not buzzword-compatible enough for them. And also, "It is built by a company, reducing the likelihood of abandonment." Because Marijn Haverbeke's reputation for abandoning projects is so prominant </sarcasm> (Full disclosure: I supported the Prosemirror Kickstarter and contributed to CodeMirror.)
- arekkas 9y agoNevermind your sarcasm, but if you'd actually checked out both editors in detail, you would have seen the apparent differences. Anyways, you can replace the standard text editor, which is slate, with prosemirror, as all content is just a plugin.
- qrohlf 9y agoI'm curious, what does this offer over something like https://draftjs.org/ https://draftjs.org/, https://github.com/ianstormtaylor/slate https://github.com/ianstormtaylor/slate, or http://prosemirror.net/ http://prosemirror.net/ which also use normalized JSON (or ImmutableJS) objects for editor state and are backed by much larger and more established companies/communities. We just launched https://ridewithgps.com/ride_reports https://ridewithgps.com/ride_reports which is built with draft, and I found it to be very flexible. I'd love to see the industry start to focus on using two or three best-in-class editors and contributing bugfixes to those rather than slugging it out with contentEditable again and again in smaller one-off projects.
- arekkas 9y agoHey, the ORY Editor is actually built on top of slate - it simply adds drag and drop layout capabilities and a cool plugin system!
- qrohlf 9y agoYou might want to make that more clear in your documentation. Your current README doesn't mention Slate at all, I'd be much more inclined to go 'oh, this makes a lot of sense' if you were pitching 'Slate.js with the batteries included' instead of 'we built another WYSIWYG editor!'
- arekkas 9y agoThat's a good point!
- canada_dry 9y agoJust checked out ridewithgps.com - the implementation is very nice! It's a clean and simple look where the underlying tech stays out of the way.
- kminehart 9y agoOry makes some really cool stuff for OAuth / Authorization that we are considering using in our stack. https://github.com/ory/hydra https://github.com/ory/hydra https://github.com/ory/ladon https://github.com/ory/ladon https://github.com/ory/fosite https://github.com/ory/fosite
- hitekker 9y agoI think this looks great for CMS websites: where a user wishes to build an entire page in a web GUI. For composing text in blocks on existing pages, like comments or posts, you would need a lighter-weight solution. SlateJS (https://github.com/ianstormtaylor/slate https://github.com/ianstormtaylor/slate) fits that purpose for me exceedingly well, more than DraftJS, Quill and others, since it doesn't treat XML/HTML as a second-class citizen. The levels of complexity with text representation are: Document -> Post -> Text which corresponds roughly to the data sources: JSON/Data Structure -> XML/HTML -> Plaintext / Markdown Markdown can "upscale" to documents, but JSON data structures, by virtue of their complexity, do not "downscale" well at all to Markdown. HTML is the simple middle for me: it shouldn't be used for documents, but it is totally intuitive for posts where a users simply wants to adjust the color of one's text. The blocks wrapping this text should own the data structure, e.g. a flag for "NSFW Content" shouldn't be in the text editor but an option on the post itself.
- arekkas 9y agoThis is actually using slate js! We've been contributing to slate too :)
- hitekker 9y agoHa, then I should read more carefully before I comment :-) Excellent work! Do you think it may make more sense to market Ory as a Page Editor or Page Maker? Content in my mind can mean anything from a block to an entire page, though I recognize that CMS's have popularized the idea of content being equivalent to a page. Right now, I see "Layout Editor" and "Content Editor" being used to describe it, so maybe it would make sense to standardize that. Just a thought!
- arekkas 9y agoYes, we've been banging our heads to finde the right terminology to describe it. We'll put page editor / maker to our list of keywords :)
- chachra 9y ago
- ojosilva 9y agoLooks and works great, but there are 2 limitations I think would prevent it from using it in our stack: 1) It cannot be easily embedded, ie. as a field in a form. Apparently it's meant (UI-wise at least) as a full-screen editor and has lots of dependencies of its own, including React. 2) AGPLv3 license is a killer. Means that any work that links to the library should be opensourced. Despite some people interpreting it differently, it would be risky for a consumer product to ship making use of this library.
- arekkas 9y agoWe are working on (1), and make it possible to include it in non-react environments. However, there are still some dependencies required (such as react). So yes, this is not perfect at the moment. We're actually not confident with AGPLv3. We might change it to a more permissive license if it prevents people from adopting the technology. Feel free to create an issue on GitHub and we'll discuss it!
- ralmidani 9y agoActually, I would be more confident working with a GPL- or AGPL-licensed product, because enhancements are more likely to go back upstream.
- PythonicAlpha 9y agoThat is right. I just know, that many companies flee from GPL licenses (and more so AGPL). They omit any product involving GPL just to be sure not to get any juristic hassles (if rational or not). Here is the culprit: When no other people invest in enhancements, there is also nothing that can go back upstream. I like free software very much, but I also don't want to be forced to give things free, that I make. Problem is not the small enhancements I make to an OSS product, but when I link or use some OSS part in a bigger software that I made -- should I always be forced to give everything for free? Particularly for companies, that is a difficult thing. To be clear: Of course I would give away my contributions to an OSS product, but I also want to be free, to use OSS in commercial products without need to fear that I loose my own rights. GPL here is just difficult and when lawyers have to decide about software, anything can happen (as in the patent-wars).
- deleted 9y ago[deleted]
- ergo14 9y agoBut this is built with React so its not really reusable outside of its ecosystem. Is there a version that would run on preact instead? Maybe QuillJS would be a better option for general purpose editor.
- Filligree 9y agoHow performant is this? I don't have it on me right now, but if I were to dump a 400-kW document into the editor, would it still be snappy? That's one of the major weaknesses of Google Docs right now, and I'd consider switching if I found anything that lacks it.
- palakchokshi 9y agoLooks pretty good and I didn't see performance issues. From a usability perspective it's simple to use. I would suggest a couple of usability improvements. 1. The right side buttons for edit, layout, etc. have tooltips (that's great) but they should be like on/off buttons e.g. clicking layout once puts the editor in layout mode, clicking it again should bring editor out of layout mode back into preview. 2. In Edit mode the buttons on the bottom work like on/off buttons (that's great) those buttons should have tooltips. 3. Editing an image I can't put an alt value or title? How accessible is the content created by the editor? Keep up the good work. I would use this for quick website/blog setup.
- arekkas 9y agoHey, thanks for the feedback! I tracked this in the repo, see: https://github.com/ory/editor/issues/389 https://github.com/ory/editor/issues/389 But I will briefly address these issues here: > 1. The right side buttons for edit, layout, etc. have tooltips (that's great) but they should be like on/off buttons e.g. clicking layout once puts the editor in layout mode, clicking it again should bring editor out of layout mode back into preview. This was actually implemented at one point, but we removed it because some people found it confusing. We might add it though. Also keep in mind that the UI is just a component, you could simply provide your own! > those buttons should have tooltips. Great idea! > 3. Editing an image I can't put an alt value or title? How accessible is the content created by the editor? Noted, we forgot about that. You can, by the way, write your own image plugin that has an alt tag. But of course we will add this capability to the image plugin. :)
- palakchokshi 9y agoI wanted to walk you through my thought process regarding the right side buttons if you'll indulge me: 1. I clicked the edit button on the right to get in to edit mode. Edit button was highlighted in pink. 2. Saw the buttons on the bottom appear when I clicked a Text section. 3. Bolded some selected text by clicking the B button. B button got highlighted. 4. Clicked the B button again and text went back to normal and the highlight on the B got turned off. (At this point I'm thinking cool buttons are on/off. On state is indicated by a highlight, Off state is indicated as normal style) 5. Performed some other edits then clicked the Edit button the right since it was highlighted and based on my experience with the bottom buttons I expected clicking it again would turn off edit mode. You don't have to make the change. I just wanted to walk through the thought process of one user. Thanks for indulging me :)
- surfsvammel 9y agoI like it! If there was an online journaling web-app using this, I would definitely use it. hint hint
- GlobalServices 9y agoFWIW: It's not working at all in Microsoft Edge. Here's a screenshot with the console messages. https://imgoat.com/uploads/8f13708210/19062.PNG https://imgoat.com/uploads/8f13708210/19062.PNG
- aniskywalker 9y agoBuilt studiously.co website with this. Highly recommend the sites editor! Also using Hydra by the same author for OAuth2. Truly amazing work.
- anotheryou 9y agoline-height of the title does not look good on my screen http://i.imgur.com/SpxLfUD.jpg http://i.imgur.com/SpxLfUD.jpg (and the white text in front of the blackbord as not very readable either)
- kowdermeister 9y agoI get the cutting edge part, but what has happened to the good old distributed, built, minified version? What if I just want to play with it, install it in a second and I don't want to download 50% of NPM?
- zaroth 9y agoI went here: http://www.ory.am/sites/ http://www.ory.am/sites/ They have a signup page. The premium option is $9/mo. I tried to signup, it brought me to a Google form. I completed the form. OP: I will pay you $8/mo for this. It is beautiful and interesting, and is worth looking in to. I want to try to create some sites with this, I am happy to pay for it and self-host it. Hopefully it's easy to deploy. Or better yet, I can let you host it for me. With the option of self-hosting anytime in the future. The key to adoption is making it as easy to install as Wordpress. This could be big! Good luck.
- graysonk 9y ago> You are a web agency and are lookin for tailerd solutions? From the pricing page. Is this a typo or a joke I am missing?
- ge96 9y agoMan... everytime I think about building something... on this Chromebook I'm just like "Why did I buy this?" And it's ARM! ahhhhhhhh I did like Cloud9, but still not used to it versus a local dev environment... hypderdev yo! Heard about that
- caub 9y agoa Wysiwyg for layout is not a good idea, as it generates inlines styles, which is not reusable and SEO-friendly etc..
- friggindoc 9y agoYeah i prefer word for windows 3.11