fix(placeholder): just use inline-flex on firefox

packages/src/components/editable/editable.component.ts

@@ -32,8 +32,7 @@ import {
     DOMSelection,
     getDefaultView
 } from '../../utils/dom';
-import { Subject, interval } from 'rxjs';
-import { takeUntil, throttle } from 'rxjs/operators';
+import { Subject } from 'rxjs';
 import { IS_FIREFOX, IS_SAFARI, IS_EDGE_LEGACY, IS_CHROME_LEGACY, IS_CHROME } from '../../utils/environment';
 import Hotkeys from '../../utils/hotkeys';
 import { BeforeInputEvent, extractBeforeInputEvent } from '../../custom-event/BeforeInputEventPlugin';
@@ -182,6 +181,10 @@ export class SlateEditableComponent implements OnInit, OnChanges, OnDestroy, Aft
 
         // remove unused DOM, just keep templateComponent instance
         this.templateElementRef.nativeElement.remove();
+
+        // add browser class
+        let browserClass = IS_FIREFOX ? 'firefox' : (IS_SAFARI ? 'safari' : '');
+        browserClass && this.elementRef.nativeElement.classList.add(browserClass);
     }
 
     ngOnChanges(simpleChanges: SimpleChanges) {

packages/src/styles/index.scss

@@ -21,13 +21,19 @@
     & [data-slate-leaf="true"] {
         &.leaf-with-placeholder {
             position: relative;
-            // Compatible for firefox, there are two problems with using inline-block
-            // Issue-1: paragraph height becomes taller
-            // Issue-2: blocks focus movement on key down
-            display: inline-flex;
+            display: inline-block;
             width: 100%;
         }
     }
+    &.firefox {
+        // Compatible for firefox, there are two problems with using inline-block
+        // Issue-1: paragraph height becomes taller
+        // Issue-2: blocks focus movement on key down
+        .leaf-with-placeholder {
+            display: inline-flex !important;
+        }
+
+    }
 }
 
 .slate-spacer {