fix(demo): set image void #WIK-563

worktile · May 19, 2021 · 0a12ce0 · 0a12ce0
1 parent f8287a2
commit 0a12ce0
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 26 deletions.
diff --git a/demo/app/components/image/image-component.ts b/demo/app/components/image/image-component.ts
@@ -1,12 +1,12 @@
-import { Component, ElementRef, Renderer2, ChangeDetectorRef, HostListener, Output, EventEmitter } from '@angular/core';
+import { Component } from '@angular/core';
 import { BaseElementComponent } from 'slate-angular';
 
 @Component({
-    selector: 'demo-element-image,[demoImage]',
-    template: `<img [src]="element.url" alt="" contenteditable="false">`,
+    selector: 'demo-element-image',
+    template: `<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
+               <img [src]="element.url" alt="" [class.outline]="selection"> `,
     host: {
-        '[attr.contenteditable]': 'false',
-        class: 'demo-element-image'
+        class: 'demo-element-image',
     }
 })
 export class DemoElementImageComponent extends BaseElementComponent {

diff --git a/demo/app/images/images.component.ts b/demo/app/images/images.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, HostListener, ChangeDetectorRef } from '@angular/core';
+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';
@@ -10,23 +10,8 @@ import { DemoElementImageComponent } from '../components/image/image-component';
 export class DemoImagesComponent implements OnInit {
     value = initialValue;
 
-    editor = withAngular(createEditor());
+    editor = withImage(withAngular(createEditor()));
 
-    @HostListener('mousedown', ['$event'])
-    imageMousedown(event: MouseEvent) {
-        event.stopPropagation()
-        document.querySelectorAll('img').forEach(item => {
-            item.classList.remove('outline')
-        })
-        const target = event.target as HTMLElement;
-        if( target.tagName === 'DEMO-ELEMENT-IMAGE'){
-            target.children[0].classList.add('outline')
-        }
-        if (target.tagName === 'IMG') {
-            target.classList.add('outline');
-        }
-        return
-    }
     constructor(private cdr: ChangeDetectorRef) {}
 
     renderElement() {
@@ -65,10 +50,6 @@ export class DemoImagesComponent implements OnInit {
             voids: true
         }
         Transforms.insertNodes(this.editor, imageNode);
-        AngularEditor.deselect(this.editor);
-        this.cdr.detectChanges();
-        const dom = AngularEditor.toDOMNode(this.editor, imageNode);
-        dom.children[0].classList.add('outline');
     }
 
     addImages() {
@@ -134,3 +115,13 @@ const initialValue = [
     }
 ];
 
+const withImage = (editor: AngularEditor) => {
+    const {  isVoid } = editor;
+
+    editor.isVoid = element => {
+        return element.type === 'image' || isVoid(element);
+    };
+
+    return editor;
+}
+