From f12a5c8d4a112b8f03b86307de00cd0fc14b4819 Mon Sep 17 00:00:00 2001 From: sibiraj-s Date: Sun, 7 Feb 2021 15:58:40 +0530 Subject: [PATCH] fix: remove @angular/elements dependency --- docs/migration-7-8.md | 1 - package-lock.json | 8 ----- package.json | 3 +- src/lib/editor.component.ts | 13 +------- src/lib/plugins/image.ts | 60 ++++++++++++++++++++++++++----------- src/package.json | 1 - 6 files changed, 44 insertions(+), 42 deletions(-) diff --git a/docs/migration-7-8.md b/docs/migration-7-8.md index 2e22acd0..9f5c92d7 100644 --- a/docs/migration-7-8.md +++ b/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 diff --git a/package-lock.json b/package-lock.json index fcbe9f72..91b40ee5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -342,14 +342,6 @@ "tslib": "^2.0.0" } }, - "@angular/elements": { - "version": "11.0.9", - "resolved": "https://registry.npmjs.org/@angular/elements/-/elements-11.0.9.tgz", - "integrity": "sha512-2/6znUQgllksCVARxPKn51hABmS3RrTa1ufk0JCp9IMsSfD/mizYLNEFpT5gH0GqKpsFYaxweNs57h2rqWDHfg==", - "requires": { - "tslib": "^2.0.0" - } - }, "@angular/forms": { "version": "11.0.9", "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-11.0.9.tgz", diff --git a/package.json b/package.json index 07a95cbb..fba632fc 100644 --- a/package.json +++ b/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", diff --git a/src/lib/editor.component.ts b/src/lib/editor.component.ts index f2882631..0ed63cbe 100644 --- a/src/lib/editor.component.ts +++ b/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); diff --git a/src/lib/plugins/image.ts b/src/lib/plugins/image.ts index 129e7b77..f925c2ee 100644 --- a/src/lib/plugins/image.ts +++ b/src/lib/plugins/image.ts @@ -1,35 +1,50 @@ -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; - class ImageRezieView implements NodeView { img: HTMLElement; - dom: ImageViewElement; + dom: HTMLElement; handle: HTMLElement; view: EditorView; getPos: () => number; + applicationRef: ApplicationRef; + imageComponentRef: ComponentRef; + 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 => { @@ -37,8 +52,8 @@ class ImageRezieView implements NodeView { 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); } } diff --git a/src/package.json b/src/package.json index 8f03e337..abf26dac 100644 --- a/src/package.json +++ b/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": {