feat(demo): add images demo #WIK-563

demo/app/app-routing.module.ts

@@ -4,6 +4,7 @@ import { DemoRichtextComponent } from './richtext/richtext.component';
 import { DemoHugeDocumentComponent } from './huge-document/huge-document.component';
 import { DemoMarkdownShortcutsComponent } from './markdown-shorcuts/markdown-shortcuts.component';
 import { DemoTablesComponent } from './tables/tables.component';
+import { DemoImagesComponent } from './images/images.component';
 
 const routes: Routes = [
     {
@@ -21,6 +22,10 @@ const routes: Routes = [
     {
         path: 'tables',
         component: DemoTablesComponent
+    },
+    {
+        path: 'images',
+        component: DemoImagesComponent
     }
 ];
 @NgModule({

demo/app/app.component.scss

@@ -124,6 +124,21 @@ $editor-width: 800px;
         margin: 0 -20px;
         margin-bottom: 20px;
     }
+
+    .demo-element-image{
+        display: block;
+        img{ 
+            display: block;
+            max-width: 100%;
+            max-height: 20em;
+            box-shadow: none;
+            box-sizing: border-box;
+        }
+        .outline{
+            box-shadow: 0 0 0 2px #348fe4;
+        }
+    }
+
 }
 
 .demo-table-editor-wrapper{
@@ -149,4 +164,4 @@ $editor-width: 800px;
         padding: 8px;
         cursor: text;
     }
-}
+}

demo/app/app.component.ts

@@ -24,6 +24,10 @@ export class AppComponent implements OnInit {
         {
             url: '/tables',
             name: 'Tables'
+        },
+        {
+            url: '/images',
+            name: 'Images'
         }
     ];
 

demo/app/app.module.ts

@@ -12,6 +12,7 @@ import { DemoElementImageComponent } from './components/image/image-component';
 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';
 
 @NgModule({
     declarations: [
@@ -22,7 +23,8 @@ import { DemoTablesComponent } from './tables/tables.component';
         DemoHugeDocumentComponent,
         DemoElementImageComponent,
         DemoMarkTextComponent,
-        DemoTablesComponent
+        DemoTablesComponent,
+        DemoImagesComponent
     ],
     imports: [
         BrowserModule,
@@ -31,7 +33,7 @@ import { DemoTablesComponent } from './tables/tables.component';
         FormsModule,
         SlateModule
     ],
-    entryComponents: [DemoMarkTextComponent],
+    entryComponents: [DemoMarkTextComponent, DemoElementImageComponent],
     providers: [
     ],
     bootstrap: [AppComponent]

demo/app/components/image/image-component.ts

@@ -3,7 +3,11 @@ import { BaseElementComponent } from 'slate-angular';
 
 @Component({
     selector: 'demo-element-image',
-    templateUrl: 'image-component.html'
+    template: `<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
+               <img [src]="element.url" alt="" [class.outline]="selection"> `,
+    host: {
+        class: 'demo-element-image',
+    }
 })
 export class DemoElementImageComponent extends BaseElementComponent {
 }

demo/app/images/images.component.html

@@ -0,0 +1,11 @@
+<div class="demo-rich-editor-wrapper single">
+    <div class="demo-global-toolbar">
+        <demo-button (onMouseDown)="addImages()">
+            <span class="material-icons">image</span>
+        </demo-button>
+    </div>
+    <slate-editable class="demo-slate-angular-editor demo-image-editor" [editor]="editor" [(ngModel)]="value"
+        (ngModelChange)="valueChange($event)" [renderElement]="renderElement()">
+    </slate-editable>
+</div>
+

demo/app/images/images.component.ts

@@ -0,0 +1,127 @@
+import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
+import { withAngular, AngularEditor } from 'slate-angular';
+import { createEditor, Transforms } from 'slate';
+import { DemoElementImageComponent } from '../components/image/image-component';
+
+@Component({
+    selector: 'demo-images',
+    templateUrl: 'images.component.html'
+})
+export class DemoImagesComponent implements OnInit {
+    value = initialValue;
+
+    editor = withImage(withAngular(createEditor()));
+
+    constructor(private cdr: ChangeDetectorRef) {}
+
+    renderElement() {
+        return (element: any) => {
+            if (element.type === 'image') {
+                return DemoElementImageComponent;
+            }
+            return null;
+        };
+    }
+
+    ngOnInit() {}
+
+    isImgUrl(imgUrl: string) {
+        return new Promise((resolve, reject) => {
+            var ImgObj = new Image();
+            ImgObj.src = imgUrl;
+            ImgObj.onload = () => {
+                resolve(true);
+            }
+            ImgObj.onerror = () => {
+                reject(false)
+            }
+        }).catch(error => { });
+    }
+
+    createImageNode(imgUrl: string) {
+        const imageNode = {
+            type: 'image',
+            url: imgUrl,
+            children: [
+                {
+                    'text': ''
+                }
+            ],
+            voids: true
+        }
+        Transforms.insertNodes(this.editor, imageNode);
+    }
+
+    addImages() {
+        const imgUrl = window.prompt('Enter the URL of the image:');
+        if (imgUrl) {
+            this.isImgUrl(imgUrl).then(value => {
+                if (value) {
+                    this.createImageNode(imgUrl);
+                } else {
+                    window.alert('URL is not an image');
+                }
+            })
+        }
+    }
+
+    valueChange(event) {
+    }
+}
+const initialValue = [
+    {
+        "type": "paragraph",
+        "children": [
+            {
+                "text": "In addition to nodes that contain editable text, you can also create other types of nodes, like images or videos."
+            }
+        ],
+        "key": "HdSTK"
+    },
+    {
+        "type": "image",
+        "url": "https://source.unsplash.com/kFrdX5IeQzI",
+        "children": [
+            {
+                "text": ""
+            }
+        ],
+        "key": "EwcCn",
+        "voids": true,
+        "name": "src=http___s13.sinaimg.cn_bmiddle_4d049168cc5e11e7fb13c&refer=http___s13.sinaimg.jpeg",
+        "width": 400,
+        "height": 300,
+        "thumbUrl": "https://atlas-rc.pingcode.com/files/public/5ffa68d453ffebf847cf49b9/origin-url",
+        "originUrl": "https://atlas-rc.pingcode.com/files/public/5ffa68d453ffebf847cf49b9/origin-url",
+        "align": "center"
+    },
+    {
+        "type": "paragraph",
+        "children": [
+            {
+                "text": "This example shows images in action. It features two ways to add images. You can either add an image via the toolbar icon above, or if you want in on a little secret, copy an image URL to your keyboard and paste it anywhere in the editor!"
+            }
+        ],
+        "key": "ecJaY"
+    },
+    {
+        "type": "paragraph",
+        "children": [
+            {
+                "text": ""
+            }
+        ],
+        "key": "zRTHT"
+    }
+];
+
+const withImage = (editor: AngularEditor) => {
+    const {  isVoid } = editor;
+
+    editor.isVoid = element => {
+        return element.type === 'image' || isVoid(element);
+    };
+
+    return editor;
+}
+