About editing issues on Firefox

Nicolas Gaborit
GitBook
Published in
2 min readSep 17, 2018

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.

--

--

Nicolas Gaborit
GitBook
Editor for

a.k.a. Soreine, I'm product developer at GitBook