From f0bed7b5bf13fcccd64f2906929b2b105c36c123 Mon Sep 17 00:00:00 2001
From: pubuzhixing8 <pubuzhixing@gmail.com>
Date: Wed, 22 Dec 2021 21:39:36 +0800
Subject: [PATCH] feat(core): placeholder fake

---
 .../editable/editable.component.html          |  2 +-
 .../components/editable/editable.component.ts | 22 ++++++++++++++-----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/src/components/editable/editable.component.html b/packages/src/components/editable/editable.component.html
index d8718d59..00ff98cd 100644
--- a/packages/src/components/editable/editable.component.html
+++ b/packages/src/components/editable/editable.component.html
@@ -1,2 +1,2 @@
-<slate-children [children]="editor.children" [context]="context" [viewContext]="viewContext" [viewContext]="viewContext"></slate-children>
+<slate-children [children]="editor.children" [context]="context" [viewContext]="viewContext"></slate-children>
 <slate-string-template #templateComponent></slate-string-template>
\ No newline at end of file
diff --git a/packages/src/components/editable/editable.component.ts b/packages/src/components/editable/editable.component.ts
index 5e9063a9..0387c02b 100644
--- a/packages/src/components/editable/editable.component.ts
+++ b/packages/src/components/editable/editable.component.ts
@@ -107,6 +107,11 @@ export class SlateEditableComponent implements OnInit, OnChanges, OnDestroy, Aft
 
     @Input() decorate: (entry: NodeEntry) => Range[] = () => [];
 
+    @Input() placeholderDecorate: (editor: Editor) => Range[] = () => {
+        // default logic
+        return [];
+    };
+
     @Input() isStrictDecorate: boolean = true;
 
     @Input() trackBy: (node: Element) => any = () => null;
@@ -394,7 +399,7 @@ export class SlateEditableComponent implements OnInit, OnChanges, OnDestroy, Aft
         this.context = {
             parent: this.editor,
             selection: this.editor.selection,
-            decorations: this.decorate([this.editor, []]),
+            decorations: this.generateDecorations(),
             decorate: this.decorate,
             readonly: this.readonly
         };
@@ -413,21 +418,28 @@ export class SlateEditableComponent implements OnInit, OnChanges, OnDestroy, Aft
     }
 
     detectContext() {
+        const decorations = this.generateDecorations();
         if (this.context.selection !== this.editor.selection ||
             this.context.decorate !== this.decorate ||
-            this.context.readonly !== this.readonly) {
-            const decorations = this.decorate([this.editor, []]);
-            const isSameDecorations = isDecoratorRangeListEqual(this.context.decorations, decorations);
+            this.context.readonly !== this.readonly ||
+            !isDecoratorRangeListEqual(this.context.decorations, decorations)) {
             this.context = {
                 parent: this.editor,
                 selection: this.editor.selection,
-                decorations: isSameDecorations ? this.context.decorations : decorations,
+                decorations: decorations,
                 decorate: this.decorate,
                 readonly: this.readonly
             };
         }
     }
 
+    generateDecorations() {
+        const decorations = this.decorate([this.editor, []]);
+        const placeholderDecorations = this.placeholderDecorate(this.editor);
+        decorations.push(...placeholderDecorations);
+        return decorations;
+    }
+
     //#region event proxy
     private addEventListener(eventName: string, listener: EventListener, target: HTMLElement | Document = this.elementRef.nativeElement) {
         this.manualListeners.push(