ngAfterViewInit() {
this._portal = new TemplatePortal(this._dialogTemplate, this._viewContainerRef);
this._overlayRef = this._overlay.create({
positionStrategy: this._overlay.position().global().centerHorizontally().centerVertically(),
hasBackdrop: true
});
this._overlayRef.backdropClick().subscribe(() => this._overlayRef.detach());
}
return (editor: EditorService) => {
const pluginState: CodeBlockState = pluginKey.getState(editor.state)
const origin = pluginState.element
if (!pluginState.toolbarVisible) {
overlayRef.detach()
return
}
const toolbar = new FloatingToolbar(editor, overlayRef)
const injector = Injector.create({
parent: parentInjector,
providers: [
{
provide: FloatingToolbar,
useValue: toolbar,
},
{
provide: EditorToolbar,
useValue: toolbar,
},
],
})
const linkPanelPortal = new ComponentPortal(CodePanelComponent, null, injector)
const positions = [
new ConnectionPositionPair(
{ originX: "center", originY: "bottom" },
{ overlayX: "center", overlayY: "top" },
),
]
if (previousOrigin !== origin) {
overlayRef.detach()
}
if (!overlayRef.hasAttached()) {
overlayRef.attach(linkPanelPortal)
const strategy = overlay
.position()
.flexibleConnectedTo(origin)
.withFlexibleDimensions(false)
.withPush(false)
.withPositions(positions)
const scrollStrategy = overlay.scrollStrategies.reposition()
strategy.attach(overlayRef)
strategy.apply()
scrollStrategy.attach(overlayRef)
scrollStrategy.enable()
overlayRef.updatePositionStrategy(strategy)
previousOrigin = origin
}
}
positionStrategyForCells(cells: HTMLElement[]): PositionStrategy {
return this.overlay.position()
.flexibleConnectedTo(cells[0])
.withGrowAfterOpen()
.withPush()
.withViewportMargin(16)
.withPositions([{
originX: 'start',
originY: 'top',
overlayX: 'start',
overlayY: 'top',
}]);
}
// Create component to ApplicationRef
private createModal(): void {
this.overlayRef = this.overlay.create();
this.modalRef = this.overlayRef.attach(new ComponentPortal(NzModalComponent));
}
return (editor: EditorService) => {
const pluginState: HyperlinkState = pluginKey.getState(editor.state)
const { link } = editor.state.schema.marks
let origin
let previousOrigin
if (!pluginState.activeLinkMark || !link) {
overlayRef.detach()
return
}
const toolbar = new FloatingToolbar(editor, overlayRef)
const injector = Injector.create({
parent: parentInjector,
providers: [
{
provide: FloatingToolbar,
useValue: toolbar,
},
{
provide: EditorToolbar,
useValue: toolbar,
},
],
})
const linkPanelPortal = new ComponentPortal(LinkPanelComponent, null, injector)
const positions = [
new ConnectionPositionPair(
{ originX: "start", originY: "bottom" },
{ overlayX: "start", overlayY: "top" },
),
new ConnectionPositionPair(
{ originX: "start", originY: "top" },
{ overlayX: "start", overlayY: "bottom" },
),
]
switch (pluginState.activeLinkMark.type) {
case InsertStatus.EDIT_LINK_TOOLBAR: {
const el = editor.view.nodeDOM(pluginState.activeLinkMark.pos)
origin = el.parentElement as HTMLElement
break
}
case InsertStatus.INSERT_LINK_TOOLBAR: {
const el = editor.view.domAtPos(pluginState.activeLinkMark.from)
origin = el.node as HTMLElement
break
}
default:
}
if (previousOrigin !== origin) {
overlayRef.detach()
}
if (!overlayRef.hasAttached()) {
overlayRef.attach(linkPanelPortal)
const strategy = overlay
.position()
.flexibleConnectedTo(origin)
.withFlexibleDimensions(false)
.withPush(false)
.withPositions(positions)
const scrollStrategy = overlay.scrollStrategies.reposition()
strategy.attach(overlayRef)
strategy.apply()
scrollStrategy.attach(overlayRef)
scrollStrategy.enable()
overlayRef.updatePositionStrategy(strategy)
previousOrigin = origin
}
}