Components don't work with codemirror widgets.

[shubham-shrivastava]

Bug description: When using any component of ng-bootstrap as part of the widget in codemirror editor (e.g. tooltip), it doesn't work for some reason. The whole window is stuck and the only option left is to close the browser window.

Link to minimally-working StackBlitz that reproduces the issue: https://stackblitz.com/edit/angular-ivy-sa5kqb

In the above project, there is one component named slot-component which replaces the value that is dropped in the editor with a custom component. It uses [ngbTooltip] which makes the window frozen. You can reproduce it by dropping any of the values at the top (column 1, slot, column 2, slot.....) in the editor to see the behaviour.

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 13.2.7

ng-bootstrap: 12.1.2

Bootstrap: 5.1.3

Codemirror: 6.x.x

[maxokorokov]

Hey @shubham-shrivastava,

there is cdk, codemirror, ng-bootstrap and your own code involved in this. I'm sorry it doesn't work for you, but please understand that it is not really actionable for us. We won't debug your code, if you have a minimal reproduction use case with codemirror + ng-bootstrap with some explanations we can take a look at this.

[shubham-shrivastava]

Hi @maxokorokov thanks for replying. I have now updated the stackblitz with only codemirror and ng-bootstrap.

I am using this document in the codemirror editor This is editable. \n' + 'Here lies the issue - {text_to_replace}</h2> and using widget replacement to replace {text_to_replace} with a custom widget (slot-component) which is just some text in a box.

I have created a custom plugin (columnParserPlugin) to achieve the same. the plugin replaces the sample text with a replacement decoration. When I hover over the replaced decoration, the window is stuck, and the only way to unfreeze it is to reload the page.