About editing issues on Firefox

Nicolas Gaborit
Sep 17, 2018 · 2 min read

March 2019 Update: GitBook is using features of modern browsers to offer a wonderful rich text editor. The problem was our editing engine relies on a browser certain behavior for nested contenteditable elements that was implemented differently in Firefox. This was leading to GitBook crashing during editing. Gladly, Firefox has since aligned its behavior with other browsers on this matter, meaning that our Firefox users can once again edit on GitBook normally!

Rich text editing inside a browser is hard. Modern browsers have brought features that allow to accomplish a great editing experience (such as contenteditable). But these features often differ between browsers, which make working with them a puzzle.

There are a few JavaScript libraries that offer an abstraction layer above this, and propose an engine to build rich text editors. Slate is one of them, and the one GitBook uses and contributes to. It is a clean and powerful alternative to other libraries like DraftJS, Quill and Prosemirror.

Now for the technical details: in order to do its magic, Slate needs to monitor the user’s selection inside the page, to determine if it is inside the editable content and be able to react accordingly. The GitBook editor mixes the editable content (marked as contenteditable) with classic <input /> HTML elements for specific parts like image captions. It works wonders on modern browser, except on Firefox. Firefox is the only modern browser currently restricting access to the selection state when the selection is inside an input nested in a content editable element. We’ve opened a Mozilla bug report describing the behavior, with steps to reproduce it.

At this point, either we try to work around the issue by completely changing Slate’s approach to monitoring the selection, or we help Firefox conforming to other browsers behaviour. If you are involved in Firefox’s development, I would be glad to hear your ideas and discuss solutions, write to me at nicolas@gitbook.com.

We are sad this is critically affecting the experience of our Firefox users, and we wish to support all browsers. But until we come up with a better solution, we advise Firefox users to use another browser when editing content on GitBook.

GitBook

GitBook's blog

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store