fix(focus): Use a null escape character instead of a br tag for focused elements

This makes editable elements more compatible with inline styles

Author: marcbachmann

spec/dispatcher.spec.js

@@ -71,7 +71,39 @@ describe('Dispatcher', function () {
       editable.unload()
     })
 
-    describe('on Enter', function () {
+    describe('on focus', function () {
+      it('should trigger the focus event', function () {
+        elem.blur()
+        const focus = on('focus', function (element) {
+          expect(element).toEqual(elem)
+        })
+        elem.focus()
+        expect(focus.calls).toBe(1)
+      })
+
+      it('should contain an empty textnode', function () {
+        elem.blur()
+        expect(elem.textContent).toEqual('')
+        elem.focus()
+        expect(elem.textContent).toEqual('\u0000')
+      })
+
+      it('should not add an empty text node if there is content', function () {
+        elem.blur()
+        elem.appendChild(document.createTextNode('Hello'))
+        elem.focus()
+        expect(elem.textContent).toEqual('Hello')
+      })
+
+      it('removes the empty text node again on blur', function () {
+        elem.focus()
+        expect(elem.textContent).toEqual('\u0000')
+        elem.blur()
+        expect(elem.textContent).toEqual('')
+      })
+    })
+
+    describe('on enter', function () {
 
       beforeEach(function () {
         event = new Event('keydown')

src/content.js

@@ -14,6 +14,7 @@ function restoreRange (host, range, func) {
 const zeroWidthSpace = /\u200B/g
 const zeroWidthNonBreakingSpace = /\uFEFF/g
 const whitespaceExceptSpace = /[^\S ]/g
+const nullEscapeCharacter = /\u0000/g // eslint-disable-line no-control-regex
 
 // Clean up the Html.
 export function tidyHtml (element) {
@@ -83,6 +84,7 @@ export function extractContent (element, keepUiElements) {
     ? getInnerHtmlOfFragment(element)
     : element.innerHTML
   )
+    .replace(nullEscapeCharacter, '') // Used to generate empty text nodes on focus event.
     .replace(zeroWidthNonBreakingSpace, '') // Used for forcing inline elements to have a height
     .replace(zeroWidthSpace, '<br>') // Used for cross-browser newlines
 

src/create-default-behavior.js

@@ -24,13 +24,11 @@ export default function createDefaultBehavior (editable) {
 
   return {
     focus (element) {
-      // Add a <br> element if the editable is empty to force it to have height
-      // E.g. Firefox does not render empty block elements and most browsers do
-      // not render  empty inline elements.
+      // Add an empty text node if the editable is empty to force it to have height
+      // E.g. Firefox does not render empty block elements
+      //   and most browsers do not render empty inline elements.
       if (!parser.isVoid(element)) return
-      const br = document.createElement('br')
-      br.setAttribute('data-editable', 'remove')
-      element.appendChild(br)
+      element.appendChild(document.createTextNode('\u0000'))
     },
 
     blur (element) {