Show HN: ORY Editor – A rich editor for the browser, built with React and Redux
github.com
github.com
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/
First, this is a layout editor first- and foremost. Behind the scenes, React, Redux and slate.js ( 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
And lastly we're working on a business model behind it, with our ory sites product (early access): http://ory.am/sites/
If you want to check out our other open source products, feel free to do so: https://github.com/ory
Would it make sense to have a separate repo for layout editor ?
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.
For web stuff, over the last month or so I've been pointing people to the relatively new but still pretty nice A11y Style Guide[0] This is obviously for just getting started. When we get into more complicated markup, I often find fantastic resources, articles, and examples from companies like SSB BART or Deque (no affiliation with either)
When mobile accessibility comes up, few people do it better than the BBC, and they have a great resource on it[1]
I'm also working on a playbook for mobile accessibility, but that's still under development.
The really important and kind of awesome thing is that it's extremely easier to test the accessibility of whatever you're building as you build it. Unlike the bad old days where screen readers costs $1,000 and no developers had access to them, on mobile or Mac screen readers are built directly into your device, and on Windows NVDA is completely free from [2]
Hope this gives you a starting point, and if you have more questions feel free to reach out, email in profile.
[0]: https://a11y-style-guide.com [1]http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mo... [2]https://NVAccess.org
Why? I used to use make menuconfig back in 2000--why should it not work now?
3d game? This I'll grant you. Some experiences are just not replicatable for the blind, though if you're interested in this at all check out the weird and wonderful world of audiogames and 3d audio with HRTF.
An editor? Even a visual editor? Is not one of these experiences. I used to use Visual Basic 6 just fine, dragging and dropping controls out of the toolbox, lining things up, and editing the code behind the widgets all the way back in 2002.
I see that this project apparently took 8 years by 150 people, according to the OP. With this much human effort behind it, it's remarkable that no one once said, hey, I wonder if anybody with a visual disability might want to use the app that this will be a part of?
If I'm trying to read a lot of data in a CLI, the output of top, for instance, I need to read by line with the screen reader fixed to a given column offset but it works fine even if it's a little awkward.
By the way, blind students use the education platform, and they are really happy that such an amazing, ad-free platform exists.
You are in a minority. Minorities are always an afterthought. It's hard meeting the needs of every single minority - there are so many with many diverse needs.
However, this concept that there are a lot of minorities so obviously we can't cover all the bases seems a little silly. Do people of color need different markup? Do women require somebody adds special javascript libraries so they can access the content? Making content accessible to a screen reader is part of our job as web developers. Just like the site isn't done until it renders in IE 11, it's not done until it reads with NVDA. In fact, often times people can install an alternative browser, whereas it is currently impossible to install an alternative pair of eyeballs, so I would go so far as to advocate accessibility before heroic browser compatibility battles but obviously I'm biased here ;-)
Interesting opinion. I'd argue that it's not at all a web developer's job to comply with every single accessibility guideline or support outdated browsers, unless required by their contract and paid for by whoever commissioned the work. These requirements are part of the reason that most governmental contracts are overpriced by a factor of 10 (the other reason being corruption).
This is similar to the responsive/mobile design - if you care about it from the start, you'll structure the site/component in a way that it really won't take you much more time to support accessibility features. If you don't care at all, retrofitting accessibility will require severe refactoring and probably won't ever be done.
So not caring about it in "MVP" is about the worst thing you can do.
You should also keep in mind that you're (implicitly) asking people to do more work – which is fine, but there are real costs and people aren't bad because they haven't already borne them.
Most of my job as a developer is thinking. So yes, it is more work. Accessibility / Responsiveness isn't always done first because it takes more time (either thinking or "working").
I was surprised there was no discussion of Android accessibility this year at IO.
This is a frigging open source project. Take it or leave it. If you want something, you send a frigging patch. Or you ask nicely.
> ORY is a company building and maintaining developer tools for a safer, more accessible web.
Only if you are trying to play word games. Try googling that exact phrase - accessible web - and see if there are any results that support your point.
EDIT: Okay I retract the "did not contain that exact phrase" part; I thought you were talking about their company's tag line. Anyway, feel free to be mad at the word choice.
Aside from using tab indexes to jump around on a page, what else helps?
Is Hacker News really good with accessibility?
Oh Screen Reader has that voice right? So proper use of Header tags... man how do you follow a chain of comments? control find and look for your user name? Oh maybe the threads part of Hacker News.
Aria tags...
Well probably good news for you with the move towards voice-interfaces with the Amazon Echo products and what not, maybe there will be API's or something to present data with voice-first in mind so no visual.
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) 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.
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!
We just launched 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.
It's a clean and simple look where the underlying tech stays out of the way.
> 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
Anyways, you're now one library richer, that solves a hard problem and we're committed to making it awesome.
I like grep... It does not do the same thing as Ctrl+F in my editor, but that's fine.
Some other issues:
- create_content.png takes 37 seconds to load - sea_bg.jpg takes 20 seconds to load
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.
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!
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).
A great example of such competitive environment is game development where you can't let religious fear of licenses get in the way. If a license is compatible with the business model then use it, and if not then try to get the developer to give you an exception. Development time is precious in getting the product released in the right time window and in a stable state. Studios can't afford skipping GPL development tools (which would not be part of the end product) or LGPL libraries (unless constrained by aspects shared by the competition), as the risk to the company from delayed release is significant higher than the cost of having a lawyer go through a license and confirm if it will impact the model for releasing the game. As a result many AAA games are released with a huge list of free and open source libraries.
But if you are an incumbent holder in a market with very little competition, then you can have policy against licenses and do well. What would an extra month of development for iphone cost Apple as a company?
That's a feature, not a bug. If I release free software and you are unable or unwilling to play fair, I don't __want__ you to use my software.
If ORY was a full stack content editing service, rather than just a client with a demo server, then you could still run it unmodified, making it easy to share the source (just link to the official repo). Your other services could either operate on the data being saved by ORY-service, or communicate with it via an HTTP API (whose implementation would be an open component of the ORY-service). But once again, your own software would not fall under the AGPL, because they do not extend, or trivially wrap, ORY.
The only way an AGPL license would force a user of ORY to share their own code, would be if they forked ORY and extended its own codebase, or wrapped it in a trivial adaptor for some framework or platform, e.g. a Wordpress plugin.
IANAL, and the AGPL is a long read, but I do feel like I understood it, and could use this alongside closed-source services.
> I am not a lawyer, and this is not legal advice, but the choice of AGPL makes this utterly unusable as part of a commercial web application.
> Not only would it require all frontend code to be open sourced, but if it's used in-process in the application server as recommended for server-side rendering (for accessibility or SEO), all backend code for that application process would need to be open sourced as well.
...
> If you want the largest usage (and, by extension, upstream contributions), I'd encourage a license like Apache, BSD, or MIT. React itself is licensed under the BSD 3-clause license to sidestep many of these issues! The ecosystem nowadays is such that the default is to fork on Github anyways and send pull requests upstream, so that the application can benefit from continuous upstream bugfixes and just use the mainline NPM version without needing to maintain a fork. There are so many incentives to contribute that I think many open source projects lose more than they gain by trying to formalize contractual obligations.
What if I just want to play with it, install it in a second and I don't want to download 50% of NPM?
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.
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. :)
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 :)
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.
I'll resize that, and let you know - could you test again then?
I realize my use case is uncommon, which is users tweaking HTML emails before they are sent.
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.
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.)
Looks similar to Draft (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.
"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
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.
I did like Cloud9, but still not used to it versus a local dev environment... hypderdev yo! Heard about that
Also using Hydra by the same author for OAuth2. Truly amazing work.
From the pricing page. Is this a typo or a joke I am missing?