fix(demo): fix conflict

demo/app/app-routing.module.ts

@@ -5,6 +5,7 @@ import { DemoHugeDocumentComponent } from './huge-document/huge-document.compone
 import { DemoMarkdownShortcutsComponent } from './markdown-shorcuts/markdown-shortcuts.component';
 import { DemoTablesComponent } from './tables/tables.component';
 import { DemoImagesComponent } from './images/images.component';
+import { DemoSearchHighlightingComponent } from './search-highlighting/search-highlighting.component';
 
 const routes: Routes = [
     {
@@ -26,6 +27,10 @@ const routes: Routes = [
     {
         path: 'images',
         component: DemoImagesComponent
+    },
+    {
+        path: 'search-highlighting',
+        component: DemoSearchHighlightingComponent
     }
 ];
 @NgModule({

demo/app/app.component.ts

@@ -25,7 +25,11 @@ export class AppComponent implements OnInit {
         {
             url: '/images',
             name: 'Images'
-        }
+        },
+        {
+            url: '/search-highlighting',
+            name: 'Search Highlighting'
+        },
     ];
 
     showSideNav: boolean;

demo/app/app.module.ts

@@ -13,6 +13,8 @@ import { DemoMarkTextComponent } from './components/text/text.component';
 import { DemoButtonComponent } from './components/button/button.component';
 import { DemoTablesComponent } from './tables/tables.component';
 import { DemoImagesComponent } from './images/images.component';
+import { DemoSearchHighlightingComponent } from './search-highlighting/search-highlighting.component';
+import { DemoLeafComponent } from './search-highlighting/leaf.component';
 
 @NgModule({
     declarations: [
@@ -25,22 +27,25 @@ import { DemoImagesComponent } from './images/images.component';
         DemoMarkTextComponent,
         DemoTablesComponent,
         DemoTablesComponent,
-        DemoImagesComponent
+        DemoImagesComponent,
+        DemoSearchHighlightingComponent,
+        DemoLeafComponent,
     ],
     imports: [
         BrowserModule,
         BrowserAnimationsModule,
         AppRoutingModule,
         FormsModule,
-        SlateModule
+        SlateModule,
     ],
-    entryComponents: [DemoMarkTextComponent, DemoElementImageComponent],
-    providers: [
+    entryComponents: [
+        DemoMarkTextComponent,
+        DemoElementImageComponent,
+        DemoLeafComponent,
     ],
-    bootstrap: [AppComponent]
+    providers: [],
+    bootstrap: [AppComponent],
 })
 export class AppModule {
-    constructor() {
-
-    }
+  constructor() {}
 }

demo/app/search-highlighting/leaf.component.ts

@@ -0,0 +1,30 @@
+import { Component, ElementRef, Renderer2, ChangeDetectorRef } from '@angular/core';
+import { BaseLeafComponent } from 'slate-angular';
+
+@Component({
+  selector: 'span[demoLeaf]',
+  template: `
+    <span slateString [context]="context" [viewContext]="viewContext"
+      ><span></span
+    ></span>
+  `,
+})
+export class DemoLeafComponent extends BaseLeafComponent {
+    constructor(
+        public elementRef: ElementRef,
+        public cdr: ChangeDetectorRef,
+        private renderer: Renderer2
+    ) {
+        super(elementRef, cdr);
+    }
+
+    onContextChange() {
+        super.onContextChange();
+        this.changeStyle();
+    }
+
+    changeStyle() {
+        const backgroundColor = this.leaf.highlight ? '#ffeeba' : null;
+        this.renderer.setStyle(this.nativeElement, 'backgroundColor', backgroundColor);
+    }
+}

demo/app/search-highlighting/search-highlighting.component.html

@@ -0,0 +1,22 @@
+<div class="demo-rich-editor-wrapper single">
+    <div class="demo-global-toolbar">
+        <div class="search-highlighting-toolbar">
+            <span class="material-icons">search</span>
+            <input
+                type="search"
+                placeholder="Search the text..."
+                [(ngModel)]="keywords"
+                (ngModelChange)="keywordsChange($event)"
+            />
+        </div>
+    </div>
+    <slate-editable
+        class="demo-slate-angular-editor demo-image-editor"
+        [editor]="editor"
+        [(ngModel)]="value"
+        [renderText]="renderText"
+        [decorate]="decorate"
+        [renderLeaf]="renderLeaf"
+    >
+    </slate-editable>
+</div>

demo/app/search-highlighting/search-highlighting.component.scss

@@ -0,0 +1,16 @@
+.search-highlighting-toolbar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  top: 0.5em;
+  left: 0.5em;
+  color: #ccc;
+  border: 2px solid #ccc;
+  border-radius: 4px;
+
+  input {
+    border: none;
+    outline: none;
+    background-color: transparent;
+  }
+}

demo/app/search-highlighting/search-highlighting.component.ts

@@ -0,0 +1,88 @@
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { createEditor, NodeEntry, Text } from 'slate';
+import { withAngular } from 'slate-angular';
+import { DemoMarkTextComponent, MarkTypes } from '../components/text/text.component';
+import { DemoLeafComponent } from './leaf.component';
+
+@Component({
+  selector: 'demo-search-highlight',
+  templateUrl: './search-highlighting.component.html',
+  styleUrls: ['./search-highlighting.component.scss'],
+})
+export class DemoSearchHighlightingComponent implements OnInit {
+    keywords = '';
+
+    value = initialValue;
+
+    editor = withAngular(createEditor());
+
+    decorate: (nodeEntry: NodeEntry) => Range[];
+
+    constructor(private cdr: ChangeDetectorRef) {}
+
+    ngOnInit(): void {
+        this.generateDcoreate();
+    }
+
+    keywordsChange(event) {
+        this.generateDcoreate();
+        this.cdr.markForCheck();
+    }
+
+    generateDcoreate() {
+        this.decorate = ([node, path]) => {
+            const ranges = [];
+
+            if (this.keywords && Text.isText(node)) {
+                const { text } = node;
+                const parts = text.split(this.keywords);
+                let offset = 0;
+
+                parts.forEach((part, i) => {
+                    if (i !== 0) {
+                        ranges.push({
+                            anchor: { path, offset: offset - this.keywords.length },
+                            focus: { path, offset },
+                            highlight: true,
+                        });
+                    }
+
+                    offset = offset + part.length + this.keywords.length;
+                });
+            }
+
+            return ranges;
+        };
+    }
+
+    renderText = (text: Text) => {
+        if (text.bold || text.italic || text[MarkTypes.code] || text.underlined) {
+            return DemoMarkTextComponent;
+        }
+    }
+
+    renderLeaf = (text: Text) => {
+        if (text.bold || text.highlight) {
+            return DemoLeafComponent;
+        }
+        return null;
+    }
+}
+
+const initialValue = [
+    {
+        children: [
+            {
+                text:
+                'This is editable text that you can search. As you search, it looks for matching strings of text, and adds ',
+            },
+            { text: 'decorations', bold: true },
+            { text: ' to them in realtime.' },
+        ],
+    },
+    {
+        children: [
+            { text: 'Try it out for yourself by typing in the search box above!' },
+        ],
+    },
+];