feat(core): placeholder fake

worktile · Dec 22, 2021 · f0bed7b · f0bed7b
1 parent 749d2c3
commit f0bed7b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git 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>
diff --git 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(