fix: remove @angular/elements dependency

docs/migration-7-8.md

@@ -73,5 +73,4 @@ editor.blur.subscribe(() => {}); // no longer exposed
 
 #### Miscellaneous
 
-- `@angular/elements` is a peerDependency
 - Some CSS Bug fixes might affect existing components

package.json

@@ -17,7 +17,7 @@
     "test:demo": "ng test demo --browsers ChromeHeadless --watch false",
     "test:lib": "ng test ngx-editor --browsers ChromeHeadless --watch false",
     "test": "npm run test:lib && npm run test:demo",
-    "watch:lib": "ng build ngx-editor --watch"
+    "dev": "ng build ngx-editor --watch"
   },
   "keywords": [
     "angular-editor",
@@ -34,7 +34,6 @@
     "@angular/common": "~11.0.1",
     "@angular/compiler": "~11.0.1",
     "@angular/core": "~11.0.1",
-    "@angular/elements": "~11.0.1",
     "@angular/forms": "~11.0.1",
     "@angular/platform-browser": "~11.0.1",
     "@angular/platform-browser-dynamic": "~11.0.1",

src/lib/editor.component.ts

@@ -6,13 +6,11 @@ import {
   OnChanges, Injector,
 } from '@angular/core';
 import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
-import { createCustomElement } from '@angular/elements';
 import { Subscription } from 'rxjs';
 
 import * as plugins from './plugins';
 import { toHTML } from './parsers';
 import Editor from './Editor';
-import { ImageViewComponent } from './components/image-view/image-view.component';
 
 @Component({
   selector: 'ngx-editor',
@@ -89,15 +87,6 @@ export class NgxEditorComponent implements ControlValueAccessor, OnInit, OnChang
     this.setMeta('UPDATE_PLACEHOLDER', placeholder);
   }
 
-  private registerCustomElements(): void {
-    const imgViewComponent = customElements.get('ngx-image-view');
-
-    if (!imgViewComponent) {
-      const ImageViewElement = createCustomElement(ImageViewComponent, { injector: this.injector });
-      customElements.define('ngx-image-view', ImageViewElement);
-    }
-  }
-
   private registerPlugins(): void {
     this.editor.registerPlugin(plugins.editable(this.enabled));
     this.editor.registerPlugin(plugins.placeholder(this.placeholder));
@@ -127,7 +116,7 @@ export class NgxEditorComponent implements ControlValueAccessor, OnInit, OnChang
       throw new Error('NgxEditor: Required editor instance');
     }
 
-    this.registerCustomElements();
+    // this.registerCustomElements();
     this.registerPlugins();
 
     this.renderer.appendChild(this.ngxEditor.nativeElement, this.editor.view.dom);

src/lib/plugins/image.ts

@@ -1,44 +1,59 @@
-import { Injector, Renderer2 } from '@angular/core';
-import { NgElement, WithProperties } from '@angular/elements';
+import { ApplicationRef, ComponentFactoryResolver, ComponentRef, Injector } from '@angular/core';
 import { Node as ProseMirrorNode } from 'prosemirror-model';
 import { NodeSelection, Plugin, PluginKey } from 'prosemirror-state';
 import { EditorView, NodeView } from 'prosemirror-view';
+import { Subscription } from 'rxjs';
 
 import { ImageViewComponent } from '../components/image-view/image-view.component';
 
-type ImageViewElement = NgElement & WithProperties<ImageViewComponent>;
-
 class ImageRezieView implements NodeView {
   img: HTMLElement;
-  dom: ImageViewElement;
+  dom: HTMLElement;
   handle: HTMLElement;
   view: EditorView;
   getPos: () => number;
 
+  applicationRef: ApplicationRef;
+  imageComponentRef: ComponentRef<ImageViewComponent>;
+  resizeSubscription: Subscription;
+
   constructor(node: ProseMirrorNode, view: EditorView, getPos: () => number, injector: Injector) {
-    const renderer = injector.get(Renderer2);
+    const dom = document.createElement('image-view');
+
+    const componentFactoryResolver = injector.get(ComponentFactoryResolver);
+    this.applicationRef = injector.get(ApplicationRef);
+
+    // Create the component and wire it up with the element
+    const factory = componentFactoryResolver.resolveComponentFactory(
+      ImageViewComponent
+    );
+
+    this.imageComponentRef = factory.create(injector, [], dom);
+    // Attach to the view so that the change detector knows to run
+    this.applicationRef.attachView(this.imageComponentRef.hostView);
 
-    const dom = renderer.createElement('ngx-image-view') as ImageViewElement;
-    dom.src = node.attrs.src;
-    dom.alt = node.attrs.alt;
-    dom.title = node.attrs.title;
-    dom.outerWidth = node.attrs.width;
-    dom.view = view;
+    this.imageComponentRef.instance.src = node.attrs.src;
+    this.imageComponentRef.instance.alt = node.attrs.alt;
+    this.imageComponentRef.instance.title = node.attrs.title;
+    this.imageComponentRef.instance.outerWidth = node.attrs.width;
+    this.imageComponentRef.instance.view = view;
 
     this.dom = dom;
     this.view = view;
     this.getPos = getPos;
 
-    this.dom.addEventListener('imageResize', this.handleResize);
+    this.resizeSubscription = this.imageComponentRef.instance.imageResize.subscribe(() => {
+      this.handleResize();
+    });
   }
 
   handleResize = (): void => {
     const { state, dispatch } = this.view;
     const { tr } = state;
 
     const transaction = tr.setNodeMarkup(this.getPos(), undefined, {
-      src: this.dom.src,
-      width: this.dom.outerWidth
+      src: this.imageComponentRef.instance.src,
+      width: this.imageComponentRef.instance.outerWidth
     });
 
     const resolvedPos = transaction.doc.resolve(this.getPos());
@@ -48,16 +63,25 @@ class ImageRezieView implements NodeView {
     dispatch(transaction);
   }
 
+  update(): boolean {
+    return true;
+  }
+
+  ignoreMutation(): boolean {
+    return true;
+  }
+
   selectNode(): void {
-    this.dom.selected = true;
+    this.imageComponentRef.instance.selected = true;
   }
 
   deselectNode(): void {
-    this.dom.selected = false;
+    this.imageComponentRef.instance.selected = false;
   }
 
   destroy(): void {
-    this.dom.removeEventListener('imageResize', this.handleResize);
+    this.resizeSubscription.unsubscribe();
+    this.applicationRef.detachView(this.imageComponentRef.hostView);
   }
 }
 

src/package.json

@@ -17,7 +17,6 @@
     "@angular/common": ">=9.0.0",
     "@angular/core": ">=9.0.0",
     "@angular/forms": ">=9.0.0",
-    "@angular/elements": ">=9.0.0",
     "@angular/platform-browser": ">=9.0.0"
   },
   "dependencies": {