ngx-editor
Version:
Rich Text Editor for angular using ProseMirror
89 lines • 13.1 kB
JavaScript
import { ApplicationRef, ComponentFactoryResolver } from '@angular/core';
import { NodeSelection, Plugin, PluginKey } from 'prosemirror-state';
import { ImageViewComponent } from '../components/image-view/image-view.component';
class ImageRezieView {
constructor(node, view, getPos, injector) {
this.updating = false;
this.handleResize = () => {
if (this.updating) {
return;
}
const { state, dispatch } = this.view;
const { tr } = state;
const transaction = tr.setNodeMarkup(this.getPos(), undefined, {
...this.node.attrs,
width: this.imageComponentRef.instance.outerWidth,
});
const resolvedPos = transaction.doc.resolve(this.getPos());
const newSelection = new NodeSelection(resolvedPos);
transaction.setSelection(newSelection);
dispatch(transaction);
};
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);
this.setNodeAttributes(node.attrs);
this.imageComponentRef.instance.view = view;
this.dom = dom;
this.view = view;
this.node = node;
this.getPos = getPos;
this.resizeSubscription = this.imageComponentRef.instance.imageResize.subscribe(() => {
this.handleResize();
});
}
computeChanges(prevAttrs, newAttrs) {
return JSON.stringify(prevAttrs) === JSON.stringify(newAttrs);
}
setNodeAttributes(attrs) {
this.imageComponentRef.instance.src = attrs['src'];
this.imageComponentRef.instance.alt = attrs['alt'];
this.imageComponentRef.instance.title = attrs['title'];
this.imageComponentRef.instance.outerWidth = attrs['width'];
}
update(node) {
if (node.type !== this.node.type) {
return false;
}
this.node = node;
const changed = this.computeChanges(this.node.attrs, node.attrs);
if (changed) {
this.updating = true;
this.setNodeAttributes(node.attrs);
this.updating = false;
}
return true;
}
ignoreMutation() {
return true;
}
selectNode() {
this.imageComponentRef.instance.selected = true;
}
deselectNode() {
this.imageComponentRef.instance.selected = false;
}
destroy() {
this.resizeSubscription.unsubscribe();
this.applicationRef.detachView(this.imageComponentRef.hostView);
}
}
const imageResizePlugin = (injector) => {
return new Plugin({
key: new PluginKey('image-resize'),
props: {
nodeViews: {
image: (node, view, getPos) => {
return new ImageRezieView(node, view, getPos, injector);
},
}
}
});
};
export default imageResizePlugin;
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW1hZ2UtcmVzaXplLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWVkaXRvci9zcmMvbGliL3BsdWdpbnMvaW1hZ2UtcmVzaXplLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxjQUFjLEVBQUUsd0JBQXdCLEVBQTBCLE1BQU0sZUFBZSxDQUFDO0FBRWpHLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBSXJFLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLCtDQUErQyxDQUFDO0FBRW5GLE1BQU0sY0FBYztJQVlsQixZQUFZLElBQXFCLEVBQUUsSUFBZ0IsRUFBRSxNQUFvQixFQUFFLFFBQWtCO1FBRjdGLGFBQVEsR0FBRyxLQUFLLENBQUM7UUF1Q2pCLGlCQUFZLEdBQUcsR0FBUyxFQUFFO1lBQ3hCLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRTtnQkFDakIsT0FBTzthQUNSO1lBRUQsTUFBTSxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUUsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDO1lBQ3RDLE1BQU0sRUFBRSxFQUFFLEVBQUUsR0FBRyxLQUFLLENBQUM7WUFFckIsTUFBTSxXQUFXLEdBQUcsRUFBRSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLEVBQUUsU0FBUyxFQUFFO2dCQUM3RCxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSztnQkFDbEIsS0FBSyxFQUFFLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxRQUFRLENBQUMsVUFBVTthQUNsRCxDQUFDLENBQUM7WUFFSCxNQUFNLFdBQVcsR0FBRyxXQUFXLENBQUMsR0FBRyxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUMsQ0FBQztZQUMzRCxNQUFNLFlBQVksR0FBRyxJQUFJLGFBQWEsQ0FBQyxXQUFXLENBQUMsQ0FB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Q1osT0FBTyxJQUFJLENBQUM7SUFDZCxDQUFDO0lBRUQsVUFBVTtRQUNSLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxRQUFRLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQztJQUNsRCxDQUFDO0lBRUQsWUFBWTtRQUNWLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxRQUFRLENBQUMsUUFBUSxHQUFHLEtBQUssQ0FBQztJQUNuRCxDQUFDO0lBRUQsT0FBTztRQUNMLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxXQUFXLEVBQUUsQ0FBQztRQUN0QyxJQUFJLENBQUMsY0FBYyxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsaUJBQWlCLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDbEUsQ0FBQztDQUNGO0FBRUQsTUFBTSxpQkFBaUIsR0FBRyxDQUFDLFFBQWtCLEVBQVUsRUFBRTtJQUN2RCxPQUFPLElBQUksTUFBTSxDQUFDO1FBQ2hCLEdBQUcsRUFBRSxJQUFJLFNBQVMsQ0FBQyxjQUFjLENBQUM7UUFDbEMsS0FBSyxFQUFFO1lBQ0wsU0FBUyxFQUFFO2dCQUNULEtBQUssRUFBRSxDQUFDLElBQXFCLEVBQUUsSUFBZ0IsRUFBRSxNQUFvQixFQUFFLEVBQUU7b0JBQ3ZFLE9BQU8sSUFBSSxjQUFjLENBQUMsSUFBSSxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsUUFBUSxDQUFDLENBQUM7Z0JBQzFELENBQUM7YUFDRjtTQUNGO0tBQ0YsQ0FBQyxDQUFDO0FBQ0wsQ0FBQyxDQUFDO0FBRUYsZUFBZSxpQkFBaUIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFwcGxpY2F0aW9uUmVmLCBDb21wb25lbnRGYWN0b3J5UmVzb2x2ZXIsIENvbXBvbmVudFJlZiwgSW5qZWN0b3IgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE5vZGUgYXMgUHJvc2VNaXJyb3JOb2RlIH0gZnJvbSAncHJvc2VtaXJyb3ItbW9kZWwnO1xuaW1wb3J0IHsgTm9kZVNlbGVjdGlvbiwgUGx1Z2luLCBQbHVnaW5LZXkgfSBmcm9tICdwcm9zZW1pcnJvci1zdGF0ZSc7XG5pbXBvcnQgeyBFZGl0b3JWaWV3LCBOb2RlVmlldyB9IGZyb20gJ3Byb3NlbWlycm9yLXZpZXcnO1xuaW1wb3J0IHsgU3Vic2NyaXB0aW9uIH0gZnJvbSAncnhqcyc7XG5cbmltcG9ydCB7IEltYWdlVmlld0NvbXBvbmVudCB9IGZyb20gJy4uL2NvbXBvbmVudHMvaW1hZ2Utdmlldy9pbWFnZS12aWV3LmNvbXBvbmVudCc7XG5cbmNsYXNzIEltYWdlUmV6aWVWaWV3IGltcGxlbWVudHMgTm9kZVZpZXcge1xuICBkb206IEhUTUxFbGVtZW50O1xuICB2aWV3OiBFZGl0b3JWaWV3O1xuICBnZXRQb3M6ICgpID0+IG51bWJlcjtcblxuICBhcHBsaWNhdGlvblJlZjogQXBwbGljYXRpb25SZWY7XG4gIGltYWdlQ29tcG9uZW50UmVmOiBDb21wb25lbnRSZWY8SW1hZ2VWaWV3Q29tcG9uZW50PjtcbiAgcmVzaXplU3Vic2NyaXB0aW9uOiBTdWJzY3JpcHRpb247XG5cbiAgbm9kZTogUHJvc2VNaXJyb3JOb2RlO1xuICB1cGRhdGluZyA9IGZhbHNlO1xuXG4gIGNvbnN0cnVjdG9yKG5vZGU6IFByb3NlTWlycm9yTm9kZSwgdmlldzogRWRpdG9yVmlldywgZ2V0UG9zOiAoKSA9PiBudW1iZXIsIGluamVjdG9yOiBJbmplY3Rvcikge1xuICAgIGNvbnN0IGRvbSA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2ltYWdlLXZpZXcnKTtcblxuICAgIGNvbnN0IGNvbXBvbmVudEZhY3RvcnlSZXNvbHZlciA9IGluamVjdG9yLmdldChDb21wb25lbnRGYWN0b3J5UmVzb2x2ZXIpO1xuICAgIHRoaXMuYXBwbGljYXRpb25SZWYgPSBpbmplY3Rvci5nZXQoQXBwbGljYXRpb25SZWYpO1xuXG4gICAgLy8gQ3JlYXRlIHRoZSBjb21wb25lbnQgYW5kIHdpcmUgaXQgdXAgd2l0aCB0aGUgZWxlbWVudFxuICAgIGNvbnN0IGZhY3RvcnkgPSBjb21wb25lbnRGYWN0b3J5UmVzb2x2ZXIucmVzb2x2ZUNvbXBvbmVudEZhY3RvcnkoSW1hZ2VWaWV3Q29tcG9uZW50KTtcblxuICAgIHRoaXMuaW1hZ2VDb21wb25lbnRSZWYgPSBmYWN0b3J5LmNyZWF0ZShpbmplY3RvciwgW10sIGRvbSk7XG4gICAgLy8gQXR0YWNoIHRvIHRoZSB2aWV3IHNvIHRoYXQgdGhlIGNoYW5nZSBkZXRlY3RvciBrbm93cyB0byBydW5cbiAgICB0aGlzLmFwcGxpY2F0aW9uUmVmLmF0dGFjaFZpZXcodGhpcy5pbWFnZUNvbXBvbmVudFJlZi5ob3N0Vmlldyk7XG5cbiAgICB0aGlzLnNldE5vZGVBdHRyaWJ1dGVzKG5vZGUuYXR0cnMpO1xuICAgIHRoaXMuaW1hZ2VDb21wb25lbnRSZWYuaW5zdGFuY2UudmlldyA9IHZpZXc7XG5cbiAgICB0aGlzLmRvbSA9IGRvbTtcbiAgICB0aGlzLnZpZXcgPSB2aWV3O1xuICAgIHRoaXMubm9kZSA9IG5vZGU7XG4gICAgdGhpcy5nZXRQb3MgPSBnZXRQb3M7XG5cbiAgICB0aGlzLnJlc2l6ZVN1YnNjcmlwdGlvbiA9IHRoaXMuaW1hZ2VDb21wb25lbnRSZWYuaW5zdGFuY2UuaW1hZ2VSZXNpemUuc3Vic2NyaWJlKCgpID0+IHtcbiAgICAgIHRoaXMuaGFuZGxlUmVzaXplKCk7XG4gICAgfSk7XG4gIH1cblxuICBwcml2YXRlIGNvbXB1dGVDaGFuZ2VzKHByZXZBdHRyczogUmVjb3JkPHN0cmluZywgYW55PiwgbmV3QXR0cnM6IFJlY29yZDxzdHJpbmcsIGFueT4pOiBib29sZWFuIHtcbiAgICByZXR1cm4gSlNPTi5zdHJpbmdpZnkocHJldkF0dHJzKSA9PT0gSlNPTi5zdHJpbmdpZnkobmV3QXR0cnMpO1xuICB9XG5cbiAgcHJpdmF0ZSBzZXROb2RlQXR0cmlidXRlcyhhdHRyczogUmVjb3JkPHN0cmluZywgYW55Pik6IHZvaWQge1xuICAgIHRoaXMuaW1hZ2VDb21wb25lbnRSZWYuaW5zdGFuY2Uuc3JjID0gYXR0cnNbJ3NyYyddO1xuICAgIHRoaXMuaW1hZ2VDb21wb25lbnRSZWYuaW5zdGFuY2UuYWx0ID0gYXR0cnNbJ2FsdCddO1xuICAgIHRoaXMuaW1hZ2VDb21wb25lbnRSZWYuaW5zdGFuY2UudGl0bGUgPSBhdHRyc1sndGl0bGUnXTtcbiAgICB0aGlzLmltYWdlQ29tcG9uZW50UmVmLmluc3RhbmNlLm91dGVyV2lkdGggPSBhdHRyc1snd2lkdGgnXTtcbiAgfVxuXG4gIGhhbmRsZVJlc2l6ZSA9ICgpOiB2b2lkID0+IHtcbiAgICBpZiAodGhpcy51cGRhdGluZykge1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIGNvbnN0IHsgc3RhdGUsIGRpc3BhdGNoIH0gPSB0aGlzLnZpZXc7XG4gICAgY29uc3QgeyB0ciB9ID0gc3RhdGU7XG5cbiAgICBjb25zdCB0cmFuc2FjdGlvbiA9IHRyLnNldE5vZGVNYXJrdXAodGhpcy5nZXRQb3MoKSwgdW5kZWZpbmVkLCB7XG4gICAgICAuLi50aGlzLm5vZGUuYXR0cnMsXG4gICAgICB3aWR0aDogdGhpcy5pbWFnZUNvbXBvbmVudFJlZi5pbnN0YW5jZS5vdXRlcldpZHRoLFxuICAgIH0pO1xuXG4gICAgY29uc3QgcmVzb2x2ZWRQb3MgPSB0cmFuc2FjdGlvbi5kb2MucmVzb2x2ZSh0aGlzLmdldFBvcygpKTtcbiAgICBjb25zdCBuZXdTZWxlY3Rpb24gPSBuZXcgTm9kZVNlbGVjdGlvbihyZXNvbHZlZFBvcyk7XG5cbiAgICB0cmFuc2FjdGlvbi5zZXRTZWxlY3Rpb24obmV3U2VsZWN0aW9uKTtcbiAgICBkaXNwYXRjaCh0cmFuc2FjdGlvbik7XG4gIH1cblxuICB1cGRhdGUobm9kZTogUHJvc2VNaXJyb3JOb2RlKTogYm9vbGVhbiB7XG4gICAgaWYgKG5vZGUudHlwZSAhPT0gdGhpcy5ub2RlLnR5cGUpIHtcbiAgICAgIHJldHVybiBmYWxzZTtcbiAgICB9XG5cbiAgICB0aGlzLm5vZGUgPSBub2RlO1xuXG4gICAgY29uc3QgY2hhbmdlZCA9IHRoaXMuY29tcHV0ZUNoYW5nZXModGhpcy5ub2RlLmF0dHJzLCBub2RlLmF0dHJzKTtcbiAgICBpZiAoY2hhbmdlZCkge1xuICAgICAgdGhpcy51cGRhdGluZyA9IHRydWU7XG4gICAgICB0aGlzLnNldE5vZGVBdHRyaWJ1dGVzKG5vZGUuYXR0cnMpO1xuICAgICAgdGhpcy51cGRhdGluZyA9IGZhbHNlO1xuICAgIH1cbiAgICByZXR1cm4gdHJ1ZTtcbiAgfVxuXG4gIGlnbm9yZU11dGF0aW9uKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0cnVlO1xuICB9XG5cbiAgc2VsZWN0Tm9kZSgpOiB2b2lkIHtcbiAgICB0aGlzLmltYWdlQ29tcG9uZW50UmVmLmluc3RhbmNlLnNlbGVjdGVkID0gdHJ1ZTtcbiAgfVxuXG4gIGRlc2VsZWN0Tm9kZSgpOiB2b2lkIHtcbiAgICB0aGlzLmltYWdlQ29tcG9uZW50UmVmLmluc3RhbmNlLnNlbGVjdGVkID0gZmFsc2U7XG4gIH1cblxuICBkZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMucmVzaXplU3Vic2NyaXB0aW9uLnVuc3Vic2NyaWJlKCk7XG4gICAgdGhpcy5hcHBsaWNhdGlvblJlZi5kZXRhY2hWaWV3KHRoaXMuaW1hZ2VDb21wb25lbnRSZWYuaG9zdFZpZXcpO1xuICB9XG59XG5cbmNvbnN0IGltYWdlUmVzaXplUGx1Z2luID0gKGluamVjdG9yOiBJbmplY3Rvcik6IFBsdWdpbiA9PiB7XG4gIHJldHVybiBuZXcgUGx1Z2luKHtcbiAgICBrZXk6IG5ldyBQbHVnaW5LZXkoJ2ltYWdlLXJlc2l6ZScpLFxuICAgIHByb3BzOiB7XG4gICAgICBub2RlVmlld3M6IHtcbiAgICAgICAgaW1hZ2U6IChub2RlOiBQcm9zZU1pcnJvck5vZGUsIHZpZXc6IEVkaXRvclZpZXcsIGdldFBvczogKCkgPT4gbnVtYmVyKSA9PiB7XG4gICAgICAgICAgcmV0dXJuIG5ldyBJbWFnZVJlemllVmlldyhub2RlLCB2aWV3LCBnZXRQb3MsIGluamVjdG9yKTtcbiAgICAgICAgfSxcbiAgICAgIH1cbiAgICB9XG4gIH0pO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgaW1hZ2VSZXNpemVQbHVnaW47XG4iXX0=