9 ms·
Squire: FastMail’s rich text editor
- misiti3780 12y agoUnless I am missing something - it looks like quill.js still has more features: http://quilljs.com/ http://quilljs.com/
- thelibrarian 12y agoQuill is a web content editor, and Squire is an email editor. They are very similar, but slightly different - e.g. Squire supports quoting and changing quote levels, and knows how to handle attachments.
- timhaines 12y agoI went looking for where their docs talk about handling attachments, and couldn't find it. Can you point me in the right direction?
- robn_fastmail 12y agoNot sure what's about either. Like many rich-text editors, it can handle embedded images, but the attachment stuff proper is handled in the surrounding application.
- thelibrarian 12y agoMy mistake - I was editing an email at the time, and looking at the editor and roving over the UI, I thought "attachments, of course!", without actually checking to see whether or not that was part of the editor or not.
- thangalin 12y agoThere's a deeper issue here that needs to be addressed. Consider the following review: https://bitbucket.org/djarvis/world-politics/wiki/Editor https://bitbucket.org/djarvis/world-politics/wiki/Editor There are well over 30 WYSIWYG editors that (fail to) normalize the differences between browsers to provide a consistent text editing experience. Much of this duplicated effort would be better directed at reviewing, publishing, and updating a standard draft for editable, browser-based content. https://blog.whatwg.org/the-road-to-html-5-contenteditable https://blog.whatwg.org/the-road-to-html-5-contenteditable Even though Squire isn't meant as a drop-in replacement for web page editing, it still suffers from the same endemic issue that plagues all editors: browser inconsistency.
- jhchen 12y agoOne of Quill’s goals is to be a browser consistent editor. It already produces identical HTML between browsers and everything runs through an automated test suite covering over a dozen platforms. I wouldn’t say it has succeeded in this regard yet (it’s still pre-1.0 software) but it’s at least a goal. Perhaps Quill will be the first to achieve this but I do think many other new editors are hot on the heels. The problematic ones are very old editors and too lightweight of editors (it’s not possible to solve all of contenteditable’s issues in ten lines of code). I’m not sure where Squire falls but it’s always interesting to see different approaches and use cases. I hate to be nitpick, but since the linked editor list has ~10 facts per editor, and at least two of them are incorrect about Quill (Quill does not depend on jQuery and its license is BSD. Also unclear about the wrapping complaint), I have to say I’m not sure it’s a very reliable list. Disclaimer: I am the author and maintainer of Quill.
- thangalin 12y agoFair enough. It takes a lot of time to: voluntarily find and download each editor, see how well (and easily) they integrate with the sample page, and perform the basic research. I readily admit that mistakes may have been made. FWIW, here are two pictures of the same page: - http://i.imgur.com/CThwDev.png http://i.imgur.com/CThwDev.png (Quill) - http://i.imgur.com/FXiVmBd.png http://i.imgur.com/FXiVmBd.png (Aloha) In addition to injecting superfluous markup, Quill also changes the font. Incidentally, the LICENSE file does not explicitly state that it is BSD-based. I admit that I did not read (very far) below the fold on either the Quill homepage or its Github page, but went directly to the LICENSE file. (Again, mostly because I don't want to waste a lot of time hunting for the same information across 30+ projects.) https://github.com/quilljs/quill/blob/develop/LICENSE https://github.com/quilljs/quill/blob/develop/LICENSE As far as I have discovered, no other such comprehensive comparison exists. I trust readers will verify the information for themselves and hope that it may prove useful.
- X-Istence 12y agoLooks like a standard 3-clause BSD license to me. It's short enough that you can read through it in less than a minute, and know whether you want to use it or not.
- ChuckMcM 12y agoInteresting. It still has issues with the "oops I have too many words in the selection that I made into a link and I want to fix it." This is a problem in Gmail's editor as well. The handling of bulleted lists seems a bit more robust but that may be I've just been trained out of my bad habits.
- anilshanbhag 12y agoI personally like Readactor. It is light weight and cross-browser. After using it in an app which started to make money, I finally paid up for the premium and it was worth it.
- grahamg 12y agoThis is just obvious marketing by FastMail with hardly any notoriety. Is HN this easily distracted by shiny objects that this makes it to the front page? The person who submitted this even works for FastMail as a "Systems Admin and Programmer".
- Animats 12y agoI'd settle for Thunderbird wrapping lines correctly.
- mrschwabe 12y agoLooking forward to comparing this vs Scribe by the Guardian! Which is already a very good, somewhat lightweight HTML text editor. I say 'somewhat' because I find the installation and their plugin architecture rather clunky. Squire (don't know if the similar naming is by co-incidence) and it's one 10KB file seems very appealing. /happy Fastmail customer
- sqren 12y agoDirect link to the demo: http://neilj.github.io/Squire/ http://neilj.github.io/Squire/
- frik 12y agoIt has some glitches on iOS. We need better WYSIWYG-API implementations for HTML5. Sure, it would mean competition to web office apps from Microsoft, Apple and Google. A Word-clone web app could be a single HTML5 code line, but at the moment due to the broken API e.g. Google Docs renders the page line by line as seperate divs, even the blinking cursur is a div - it's a complex full page render engine based on divs!! And no similar open source project exists.
- byronm 12y ago> And no similar open source project exists. Check out http://quilljs.com http://quilljs.com -- it's a cross browser rich text editor that does provide such an api. Granted, it doesn't yet have all the functionality of a complete word processor, but it's early days and its module system provides good extensibility. Part of what's exciting to me about it is that it's also a good chance to rethink what a word processor should provide in the context of the web, instead of simply porting what made sense when the target was printing a document to paper.
- ossreality 12y agolol, and what do you think every other wysiwyg editor does? "Word-clone web app", I don't think you have any idea what you're saying.
- nchelluri 12y agoI'm turning into a fan of this article series. Maybe I will become a customer at some point.
- danieldk 12y agoIt is also great that they contribute a lot back to open source projects. Not just this editor, but they are also a major contributor to Cyrus IMAP.
- sandstrom 12y agoI hope the next post in their series will be on opening a DC in Iceland, for non-US email storage.
- danieldk 12y agoThey already have a data center in Iceland. But that's an extra replica, they do not provide an option to store your mail only there. On the other hand, I am not sure it is overly naive to assume that if your data is not in the US, it's safe. The primary rational motive would be to show with your wallet that hoarding data is not appreciated.
- brongondwana 12y agoWe've still got Confidentiality and Availability to go in the security series :) (I've got a couple more to write myself as well - but while I've managed to get other people writing, I'm going to sit on mine for a bit and save them for a day when I don't have anything else to use. It's a surprisingly large amount of work putting together a detailed blog post every day, and I really only even thought of doing it a couple of days before we had to start)
- trop 12y agoQuestion for brongondwana: was there a discussion about how much to reveal about Fastmail's inner workings? That is, when do articles moves from discussing best practices (and already open source code) and into revealing trade secrets of running a top-quality email service?
- Fannon 12y agoThe more I think about it, I dislike the idea of WYSIWYG editors. Not that I would force normal users into writing markup, thats even worse. But in order to deal with browser inconsistencies and potential new and interesting features, the idea of WYSIWYM (What You See Is What You Mean) looks much more promising to me. The most important thing is, that the editor / workflows disallows users from making mistakes and get the result they wanted to. Regular WYSIWYG editors give too much freedom, resulting in mixed results and often confusion. Even for simple tables, it's hard to edit a table if it has to look exactly like it should after editing. If you allow the editing experience to be different from the reading experience, you could provide additional hints and tools in the interface. My personal experience is that often users prefer an even stricter way, of entering content through very strict and validating forms. The visual output can then be created from "raw" data. Which is not only consistent then, but can also be altered. Of course there area areas where WYSIWYG is just fine, but then I'd prefer more "seamless" editors like http://www.aloha-editor.org/ http://www.aloha-editor.org/
- deleted 12y ago[deleted]
- sandwell 12y agoHappy FastMail customer, but sometimes the editor is buggy (cursor appears in the middle of text when editing and jumps around a lot making it difficult to type), which is not something I've noticed with other editors like CK or TinyMce. I wonder if that is an artifact of the DIY approach rather than delegating to the browser.
- glass- 12y agoI have been with Fastmail for a few years now and I don't think I have ever used the rich text editor, only plain text. I wonder how common that is.
- seszett 12y agoI have been experimenting with contenteditable myself[0] (for a small instant messaging project [1]), and indeed I found it quite difficult to use. The problem is you're constantly going to be doing things against the browser. For compatibility reasons I have to support a small fixed set of tags (b, s, u, tt basically) but of course none of the contenteditable commands use these tags, so I ended up using selection and range to insert the tags myself, and actively ignoring the browser's default shortcuts (ctrl-B, ctrl-I, etc automatically work in some browsers). The API for accessing selection is also different from that of simple input elements. Now, I actually want pseudo-WYSIWYG - that is, I want bold text to be shown in bold, but I still want the <b> tag to be shown in light grey so you know it's there and you can edit it yourself. But people can also sometimes post just a "<" in their text, so basically at every keystroke the control has to parse the whole text again, insert whatever tags and apply whatever style might be necessary. Without forgetting the convert back to spaces the " "s the browser has helpfully included in the text. Anyway, what I wanted to say is contenteditable is really not as usable as it could be, and there is a lack in pseudo-WYSIWYG libraries which just allow you to type your text using HTML (or markdown) tags and render them along with the final text. Thinking of it, maybe a more appropriate name for such a tool would be syntax-highlighting. [0] https://github.com/seeschloss/miaoli/blob/master/public/javascripts/puli.js https://github.com/seeschloss/miaoli/blob/master/public/java... (it's still a long way from being completely decorrelated from the main project, but I'd like to end up with a nice generic drop-in pseudo-wysiwyg control one day) [1] http://sz.gy/tribune/test http://sz.gy/tribune/test (don't be fooled by the fact that it has a domain name, it's far from production ready - also, the control doesn't work well with mobile Safari, for some reason I don't understand yet)
- zackham 12y agoMight give https://github.com/codemirror/codemirror https://github.com/codemirror/codemirror a try if you really want to go down the syntax highlighting path. Shouldn't be too hard to adapt it to exactly what you're looking to do.
- seszett 12y agoIt seems a bit like overkill for my simple needs though, while at the same time it would require me to write a custom "mode", so I'm not sure that would be the best option.
- eterm 12y agoI don't like how it (doesn't) handle toggling bold etc. If you press "b" then go back to typing, the output is not bold. To bold text you have to select previously typed text and then apply the styling. I don't think this would be intuitive to most users.
- nmjenkins 12y agoIt does support this. The demo being linked to is not a particularly great integration and using an out of date version of Squire. Try it in FastMail.
- matthewborden 12y ago@eterm Feel free to submit a pull request and implement it. Here's the link to the demo source: https://github.com/neilj/Squire/tree/Squire-UI https://github.com/neilj/Squire/tree/Squire-UI
- jrochkind1 12y agoI wanted to do something with JS range and selection API's, but was having trouble figuring out how they worked or what browser support they actually have. Excited to look at the source code for squire as an example! hooray open source.
- philfreo 12y agoThanks for releasing! It would be awesome to see your toolbar / UI released as a separate project also. Also check out Scribe - https://github.com/guardian/scribe https://github.com/guardian/scribe which is similarly very light weight - has no UI built in. Mostly exists to fix browser inconsistencies with contenteditable.