
Show HN: ORY Editor – A rich editor for the browser, built with React and Redux - jswizzard
https://github.com/ory/editor?branch=master
======
arekkas
The 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)

~~~
ctoth
This 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.

~~~
Operyl
It must really suck, and when I work on small(but large) personal projects I
feel bad that someone might not be able to use it. What are some good
resources to start thinking accessibility first? I remember in the past it was
.. a project and a half in and of itself.

~~~
ctoth
The nice thing is it's very easy to get started, and no matter what you're
working on, be it a web project, a mobile app, or even something for desktop
there are loads of resources out there, as well as people who care.

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](https://a11y-style-guide.com)
[1][http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mo...](http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile_access.shtml)
[2][https://NVAccess.org](https://NVAccess.org)

~~~
Operyl
I guess something I have trouble wrapping my head around is when is it
acceptable to give up on a11y? I mean, it seems improbable to get a11y into an
expansive CLI application. Or a 3D game. When does it become OK to give up?

~~~
ctoth
> it seems improbable to get a11y into an expansive CLI application

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?

~~~
ctoth
I don't really understand your question. Mark what up, a command line
interface? They don't really have markup.

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.

~~~
Operyl
I guess I meant that in the case of HTML you usually mark things up with aria
tags and what have you. Not that there was anything like that in CLI land.

------
hitekker
I 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
This is actually using slate js! We've been contributing to slate too :)

~~~
hitekker
Ha, 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
Yes, 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 :)

------
qrohlf
I'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
Hey, the ORY Editor is actually built on top of slate - it simply adds drag
and drop layout capabilities and a cool plugin system!

~~~
qrohlf
You 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
That's a good point!

------
TAForObvReasons
> 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

~~~
JoeAltmaier
I'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.

~~~
oneeyedpigeon
Big parts of the toolset I use every day are several decades old; if done
correctly, software can be iterated and refined until it's of a very high
quality. In my experience, it tends to stand a much greater chance the smaller
it is (the best examples I'm thinking of are small unix command-line tools
like find, grep).

~~~
JoeAltmaier
Yet I resent every time I have to use grep, instead of a tool integrated with
my IDE. Certainly those baroque old tools have their detractors too. That they
survive so long (like vi and emacs) due to cults, not objective evaluation?

~~~
oneeyedpigeon
I use sublime text as my main editor, but I still need to use vi from time-to-
time - e.g. when ssh'ing to a remote server. That's definitely an objective
need, unless you can offer an alternative that is just as widely available.

------
Shank
The 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
See 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.

~~~
jwong_
Didn't fix it for me, I just hit it at 11:55 EDT - still getting 500MB on
initial load of the editor.

~~~
arekkas
Could you share the profile file and some additional screenshots in the github
repo as an issue? That would help a lot identifying the issue.

~~~
hyder_m29
There is definitely a memory issue. Chrome's task manage shows me your tab at
900MB.

Some other issues:

\- create_content.png takes 37 seconds to load \- sea_bg.jpg takes 20 seconds
to load

~~~
arekkas
Was this on the blank page, or did you edit some things?

------
ojosilva
Looks 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
We 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
Actually, I would be more confident working with a GPL- or AGPL-licensed
product, because enhancements are more likely to go back upstream.

~~~
PythonicAlpha
That 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).

~~~
belorn
Any company that arbitrary limit themselves will be at an disadvantage to
their competitors. LAMP for example include GPL products and avoiding it can
be more costly and time consuming than the alternative (hosting solutions with
LAMP for example).

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?

------
kowdermeister
I 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?

------
palakchokshi
Looks 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
Hey, 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
I 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 :)

~~~
arekkas
Thank you for your feedback, I added it to the issue as well :)

------
iplaw
I 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.

------
hla19
Almost broken on mobile, and my iphone gets really hot...

~~~
jswizzard
Which 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
When you say _not optimized for mobile_ , does that include use on laptops?

------
rkuykendall-com
I'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
You 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)

------
zaroth
I 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.

------
ergo14
But 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.

~~~
t1amat
If you use preact without preact-compat then you seal yourself into the preact
ecosystem. That's why preact-compat exists.

~~~
ergo14
I was thinking more about using the editor with our polymer and vuejs
applications.

------
cocktailpeanuts
Isn't a lot of the "Others don't do this" addressed by Prosemirror?
[http://prosemirror.net/](http://prosemirror.net/)

~~~
explorigin
One 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
Nevermind 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.

------
kminehart
Ory 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)

------
timdorr
Demo 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.

------
nudpiedo
I 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

------
Filligree
How 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.

------
ge96
Man... 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

------
aniskywalker
Built studiously.co website with this. Highly recommend the sites editor!

Also using Hydra by the same author for OAuth2. Truly amazing work.

~~~
anotheryou
line-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)

------
surfsvammel
I like it! If there was an online journaling web-app using this, I would
definitely use it. _hint_ _hint_

------
graysonk
> 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?

------
friggindoc
Yeah i prefer word for windows 3.11

