slate-angular 14.1.1 → 14.1.2

package/fesm2020/slate-angular.mjs

@@ -1839,18 +1839,28 @@ class BaseLeafComponent extends BaseComponent {
         // 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.classList.add('leaf-with-placeholder');
-                this.nativeElement.appendChild(this.placeholderElement);
+                this.createPlaceholder();
             }
+            this.updatePlaceholder();
         }
         else {
             this.destroyPlaceholder();
         }
     }
+    createPlaceholder() {
+        const placeholderElement = document.createElement('span');
+        placeholderElement.innerText = this.context.leaf['placeholder'];
+        placeholderElement.contentEditable = 'false';
+        placeholderElement.setAttribute('data-slate-placeholder', 'true');
+        this.placeholderElement = placeholderElement;
+        this.nativeElement.classList.add('leaf-with-placeholder');
+        this.nativeElement.appendChild(placeholderElement);
+    }
+    updatePlaceholder() {
+        if (this.placeholderElement.innerText !== this.context.leaf['placeholder']) {
+            this.placeholderElement.innerText = this.context.leaf['placeholder'];
+        }
+    }
     destroyPlaceholder() {
         if (this.placeholderElement) {
             this.placeholderElement.remove();
@@ -2587,6 +2597,10 @@ class SlateEditableComponent {
         if (decorateChange) {
             this.forceFlush();
         }
+        const placeholderChange = simpleChanges['placeholder'];
+        if (placeholderChange) {
+            this.detectContext();
+        }
         const readonlyChange = simpleChanges['readonly'];
         if (readonlyChange) {
             IS_READONLY.set(this.editor, this.readonly);