I like the "block" abstraction. It seems like a good way to visually work with structured content. It also makes the editor really easy to customize (at least conceptually), which I find a big plus.
At least in the example, there did not seem to be a way to undo things. This is a bit annoying, especially because it forces a confirmation step when deleting things. I think most common use-cases would be much better served by being able to undo a delete than having to confirm it each time. Even if you don't want to have a general undo button, I would prefer a GMail-style undo link that only pops up after you've deleted something to the current behavior.
: I like the "block" abstraction. It seems like a good way to visually work with structured content.
Hmm, IDK. I can see that it could be a good way to represent and manipulate the chunks of text once you've got them, but having to click a special icon and choose the block type every time you add a new paragraph (rather than just pressing "return" for the most common case of a new text paragraph) seems pretty clumsy.
I really like the blocks idea. Considering this will be used by content creators who are not necessarily code savvy, it seems like a great way to allow them to organise the structure of the document without giving them enough rope to hang themselves. In practise, most content will be text and they can just keep writing and hitting return. I can't imagine many documents will include a large number of other content types.
I currently work on a site that uses TinyMCE and inserting images, videos etc. is a nightmare. There's this combination of the burden of HTML sanitization and the illusion of total freedom that TinyMCE gives to content creators. Something with better separation of content types would be wonderful.
OneNote uses a less rigorously enforced version of the block abstraction. You don't have to work in blocks but it encourages you to. What makes it actually usable is using tables to create structure.
I used this block idea in a CMS I once wrote but basically none of our clients got it and therefore they didn't like it. In the end I rewrote it to the normal way.
This is interesting. Back in 2005 my company had built this exact same editor for our CMS product and customers hated it, too. Turns out, most people seem to prefer filling in forms. However, maybe the time is now right for a change.
Direct editing is becoming more common and therby acceptable I think.
I agree with you. I prefer the concept of undoing because I personally don't like to be asked if I really want to perform each action I intended to do. It makes also the application feels faster because it require one step less.
> I like the "block" abstraction. It seems like a good way to visually work with structured content.
I've seen this idea in the real word, and it fails with editors. If you provide WYSIWYG, editors expect to format content just like one does in Word or InDesign, absolutely positioning elements, and the result to be identical (which is obviously a problem nowadays with elastic layouts and mobile sites).
It's still a rough draft — so expect it to work best only in Blink/WebKit now.
Some shortcuts:
* Arrows — move between blocks
* Shift + Arrows — rearrange blocks
* Enter — creates a new paragraph
* Esc — merge with previous block (only for text based blocks, remove current block otherwise)
* If paragraphs starts with # it transforms into heading (repeat # for more heading levels)
* If paragraphs starts with ``` it transform into code snippet
* Images are entered as 
* HR — *
It's just about 500LOC, Thanks to excellent React[1] library. No inline markup yet, but it's not difficult to add. Also needs some more polishing and tests.
Structured editors are cool. Not everything needs to be org-mode, but I feel like this project could learn from some existing tools:
• Quip's block level editing (https://quip.com/). This avoids the problem where users can't decide whether they should make multiple paragraphs within a block, or if they should make multiple blocks with one paragraph each — Quip makes it so that pressing return puts you into a state where you've created a whole new block-level chunk of information. Whether that's a paragraph or a heading or an image or a table, it doesn't matter because it enforces that the space must mean something. It even prevents you from pressing return multiple times, which would be handled in other wysiwyg editors with multiple <br>s or javascript margins or god knows what else.
• The ability to track and apply revisions a la substance.io (http://substance.io/#substance/manual). Having granular control about both the contents and placement of blocks is very important, especially when considering that a lot of content is edited while being written and revised once published. Substance's extension API is worth checking out too.
That said though, I think you're doing great work, and I'll be watching this project closely. Death to TinyMCE!
That's him - Sir Trevor is a much loved British personality (ex-news anchor); he's enough of a fixture to have been parodied for many years by Lenny Henry (a British comedian) as Sir Trevor McDonought.
He's best known for being a good communicator, clear and concise, informative but never patronising. Which makes him quite a good 'patron' for a writing app.
Ehhh.... To be honest, I find the editor to be clunky and this would not be something I would enjoy using. Somebody enlighten me what's so great about Sir Trevor except that it comes with an MIT license.
On the example page there is no option to add images. So initially I thought that sir trevor couldn't do image blocks. You might get more interest if the Example page makes it clear some blocks are disabled.
The block based layout reminds me a lot of some of the desktop publishing software I used to use in the early-mid 90's. At the time, it served well the purpose of integrating multiple media types into a single document, but it was a bit of a clunky way to edit. That's my concern with Sir Trevor.
The nicest (for me) aspect of Markdown, is that it removes the need to mess around with anything other than text to produce a formatted output document. Sir Trevor seems to remove that benefit, for limited upside.
Presumably the upside is that it's easy to use for non-techy types. I implemented a system with markdown editing for a charity I help out at, and everyone has freaked out about the markdown editing. I've been looking for a dead-simple editor I can give them .. and this looks interesting option.
Checkthis certainly has a beautiful UI/UX. I like the fact that the add-content bar between blocks doesn't interfere with the block spacing (With Sir Trevor the add content bar adds height between blocks), and the grouping of blocks in the add menu of Checkthis is going to work better for a larger number of block types than the Sir Trevor horizontal list.
The drag-and-drop repositioning is also much slicker with Checkthis, as you get to see the other blocks shuffle around the one you're moving, rather than partially so with a copy of the block.
Looks like a great editor that is simple enough for your average user to understand. It's only problem seems to be it's "IE 10+" requirement. I understand not supporting 6 and 7, fine, not supporting 8, okay that's Windows XP users, they are dying off, fine, but not supporting 9?
That being said I'll probably still use this somewhere and just deal with the support calls or try to get it to support 9 somehow, great work!.
This is awesome! We've got plans at Blue Bay Travel, to completely rewrite our main sales sites, Caribbean Warehouse and Tropical Warehouse to use a block layout. Now that we're growing, we intend to keep the design limited but feel like content is always dynamic.
This is going to become a big part for us next year when we hopefully start the rewrite.
Nicely done! Plus, everyone is excited to use it because we all adore Sir Trevor!
Hmmm... This kind of editing is great for trivial examples or when inputting text through tablet/phone and it beats WYSIWYG editors hands down, but for any serious work I still prefer WYMeditor: http://www.wymeditor.org/ (don't be fooled by apparent inactivity - they just don't update the page very often).
I like the concept on the homepage, but the demo doesn't work in latest Chrome (or at least the demo page is blank) even though they say Chrome is supported.
Orders of magnitude better than any other editor; great API and (obviously) made by a great team. We're going to be using it for everything we make at @makeshift from now on :)
It's a nice compliment for Sir Trevor to be compared to the Medium editor, but as a matter of fact we started writing it in October 2011, and shipped the first version to production in March 2012 well before Medium was available - http://en.wikipedia.org/wiki/Medium_%28service%29
The use case I am thinking about is crowdsourcing typo corrections --- while reading some text you see a type, click click and you submit a typo-fix to the author. Such a tool would vastly improve the quality of English out there on the interwebs.
This is awesome. I've been sketching and thinking about such an approach to editing for months now — it would be perfect for one of my products. Not only have you validated that this "block" concept makes sense to other people, you've also given me a head start on the code. Many thanks, and I look forward to using (and contributing to) the project!
Normally the test I make with those WYSIWYG editors is to "select all", cut and copy a few times... it always messes them up! Does this pass that test? :) (StackOverflow still uses a plain text editor with separate preview, right?)
Beautiful demo BTW, totally sold it to me. Congrats!
Holy wow, I really like it. It has the potential to be really diverse and huge, I mean, a block can essentially be anything. You could replace entire CMS with this. It's not often that something can say "the future of..." and mean it, but I feel like this can.
This is a quite interesting, it also displays the native Bold/Italic/Underline formatting in Safari on iOS when you select text which I don't think I've ever seen before on a webpage. Is that just part and part of having something contenteditable?
Unlike concrete5 this actually gives out markdown so there's less worry about keeping control of weird/wasteful html. I like it uses the medium like editor since its less clutterful & Its exactly what I was looking for!
Concrete5 has the block model for sure, but I believe the editor is standard TinyMCE. Sir Trevor seems to take this to the next level, with the ability to configure a block for context specific editing. This would be a nice enhancement to Concrete5, or perhaps a new add-on.
One improvement to Sir Tevor would be to provide drag-and-drop ordering, which Concrete5 has today.
It has it, it's just not as slick as it could be. In Sir Tev, you're moving a copy of the object, whereas moving the actual object would be cleaner, and more obvious. At the moment it looks more like when you accidentally grab an image and move it (for it to then snap back into place) in some browsers.
I'm actually using it.. It's reall good if you can use it and it's stable..
Had a little problem with one of the dependencies though (removed a line from the source of underscore.js to get it to work, everything else just works fine)
At least in the example, there did not seem to be a way to undo things. This is a bit annoying, especially because it forces a confirmation step when deleting things. I think most common use-cases would be much better served by being able to undo a delete than having to confirm it each time. Even if you don't want to have a general undo button, I would prefer a GMail-style undo link that only pops up after you've deleted something to the current behavior.