Fix #234 - Cursor rendering incorrectly in firefox

yabwe · Jun 4, 2016 · b004db1 · b004db1
1 parent d496a1c
commit b004db1
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/src/js/extensions/placeholder.js b/src/js/extensions/placeholder.js
@@ -42,13 +42,23 @@
 
         showPlaceholder: function (el) {
             if (el) {
-                el.classList.add('medium-editor-placeholder');
+                // https://github.com/yabwe/medium-editor/issues/234
+                // In firefox, styling the placeholder with an absolutely positioned
+                // pseudo element causes the cursor to appear in a bad location
+                // when the element is completely empty, so apply a different class to
+                // style it with a relatively positioned pseudo element
+                if (MediumEditor.util.isFF && el.childNodes.length === 0) {
+                    el.classList.add('medium-editor-placeholder-relative');
+                } else {
+                    el.classList.add('medium-editor-placeholder');
+                }
             }
         },
 
         hidePlaceholder: function (el) {
             if (el) {
                 el.classList.remove('medium-editor-placeholder');
+                el.classList.remove('medium-editor-placeholder-relative');
             }
         },
 

diff --git a/src/sass/components/_placeholder.scss b/src/sass/components/_placeholder.scss
@@ -4,11 +4,24 @@
     &:after {
         content: attr(data-placeholder) !important;
         font-style: italic;
-        left: 0;
         position: absolute;
+        left: 0;
         top: 0;
         white-space: pre;
         padding: inherit;
         margin: inherit;
     }
 }
+
+.medium-editor-placeholder-relative {
+    position: relative;
+
+    &:after {
+        content: attr(data-placeholder) !important;
+        font-style: italic;
+        position: relative;
+        white-space: pre;
+        padding: inherit;
+        margin: inherit;
+    }
+}