fix(placeholder): fix placeholder cannot follow the font size

worktile · Jan 18, 2022 · 004015c · 004015c
1 parent 92e7ff7
commit 004015c
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 14 deletions.
diff --git a/.changeset/breezy-lies-explain.md b/.changeset/breezy-lies-explain.md
@@ -0,0 +1,5 @@
+---
+"slate-angular": patch
+---
+
+correct placeholder position, placeholder span must be inside text node
diff --git a/packages/src/styles/index.scss b/packages/src/styles/index.scss
@@ -16,11 +16,13 @@
         opacity: 0.333;
         user-select: none;
         text-decoration: none;
-        top: 0px;
+        top: 0;
     }
-    [data-slate-node='element'] {
-        &.element-placeholder {
+    & [data-slate-leaf="true"] {
+        &.leaf-with-placeholder {
             position: relative;
+            display: inline-block;
+            width: 100%;
         }
     }
 }

diff --git a/packages/src/view/base.ts b/packages/src/view/base.ts
@@ -58,7 +58,7 @@ export class BaseLeafComponent extends BaseComponent<SlateLeafContext> implement
 
     placeholderElement: HTMLSpanElement;
 
-    @HostBinding('attr.data-slate-leaf')  isSlateLeaf = true
+    @HostBinding('attr.data-slate-leaf') isSlateLeaf = true
 
     get text(): Text {
         return this.context && this.context.text;
@@ -82,31 +82,26 @@ export class BaseLeafComponent extends BaseComponent<SlateLeafContext> implement
     renderPlaceholder() {
         // issue-1: IME input was interrupted
         // issue-2: IME input focus jumping
-        // Issue occurs when the placeholder node is removed (in leaf span)
-        // So add a placeholder span to the block element root node
+        // Issue occurs when the span node of the placeholder is before the slateString span node
         if (this.context.leaf['placeholder']) {
             if (!this.placeholderElement) {
                 this.placeholderElement = document.createElement('span');
                 this.placeholderElement.innerText = this.context.leaf['placeholder'];
                 this.placeholderElement.contentEditable = 'false';
                 this.placeholderElement.setAttribute('data-slate-placeholder', 'true');
-                this.nativeElement.closest('[data-slate-node="element"]')?.classList.add('element-placeholder');
-                this.nativeElement.closest('[data-slate-node="element"]')?.appendChild(this.placeholderElement);
+                this.nativeElement.classList.add('leaf-with-placeholder');
+                this.nativeElement.appendChild(this.placeholderElement);
             }
         } else {
-            if (this.placeholderElement) {
-                this.placeholderElement.remove();
-                this.placeholderElement = null;
-                this.nativeElement.closest('[data-slate-node="element"]')?.classList.remove('element-placeholder');
-            }
+            this.destroyPlaceholder();
         }
     }
 
     destroyPlaceholder() {
         if (this.placeholderElement) {
             this.placeholderElement.remove();
             this.placeholderElement = null;
-            this.nativeElement?.closest('[data-slate-node="element"]')?.classList.remove('element-placeholder');
+            this.nativeElement.classList.remove('leaf-with-placeholder');
         }
     }
 }