Overflow widgets with allowEditorOverflow: true don't work in notebooks

[hediet]

Apply this git patch:

diff --git a/src/vs/editor/contrib/unicodeHighlighter/browser/unicodeHighlighter.ts b/src/vs/editor/contrib/unicodeHighlighter/browser/unicodeHighlighter.ts
index e39eaa2eb55..3014123e5d9 100644
--- a/src/vs/editor/contrib/unicodeHighlighter/browser/unicodeHighlighter.ts
+++ b/src/vs/editor/contrib/unicodeHighlighter/browser/unicodeHighlighter.ts
@@ -52,6 +52,22 @@ export class UnicodeHighlighter extends Disposable implements IEditorContributio
 	) {
 		super();
 
+		const myDomElement = document.createElement('div');
+		myDomElement.style.width = '100px';
+		myDomElement.style.height = '100px';
+		myDomElement.style.backgroundColor = 'red';
+		this._editor.addOverlayWidget({
+			getDomNode: () => myDomElement,
+			getPosition: () => ({
+				preference: {
+					top: 0,
+					left: 0,
+				}
+			}),
+			getId: () => 'unicodeHighlighter1',
+			allowEditorOverflow: true,
+		});
+
 		this._bannerController = this._register(instantiationService.createInstance(BannerController, _editor));
 
 		this._register(this._editor.onDidChangeModel(() => {

Notice that it behaves as expected in normal editors:

However, it breaks in notebooks (scrolling does not reposition the widgets and switching editors does not hide the widgets):

This is a problem for inline edits, which use overflow widgets and need allowEditorOverflow: true.

[rebornix]

@hediet I found what's missing is the event to trigger the overflowing widget to be repositioned when we scroll the notebook list view, since there is no view event triggered in the cell monaco editor.

I tried below patch to force trigger a "render" when we scroll the list view, which will force the viewparts to re-render, thus the overflowing widgets get correct position calculated.

diff --git a/src/vs/editor/contrib/unicodeHighlighter/browser/unicodeHighlighter.ts b/src/vs/editor/contrib/unicodeHighlighter/browser/unicodeHighlighter.ts
index e39eaa2eb55..d714909ab4d 100644
--- a/src/vs/editor/contrib/unicodeHighlighter/browser/unicodeHighlighter.ts
+++ b/src/vs/editor/contrib/unicodeHighlighter/browser/unicodeHighlighter.ts
@@ -52,6 +52,22 @@ export class UnicodeHighlighter extends Disposable implements IEditorContributio
 	) {
 		super();
 
+		const myDomElement = document.createElement('div');
+		myDomElement.style.width = '100px';
+		myDomElement.style.height = '100px';
+		myDomElement.style.backgroundColor = 'red';
+		this._editor.addOverlayWidget({
+			getDomNode: () => myDomElement,
+			getPosition: () => ({
+				preference: {
+					top: 10,
+					left: 10,
+				}
+			}),
+			getId: () => 'unicodeHighlighter1',
+			allowEditorOverflow: true,
+		});
+
 		this._bannerController = this._register(instantiationService.createInstance(BannerController, _editor));
 
 		this._register(this._editor.onDidChangeModel(() => {
diff --git a/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts b/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts
index b08b816b95a..7683f871cba 100644
--- a/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts
+++ b/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts
@@ -1503,6 +1503,11 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditorD
 				this._webviewTransparentCover!.style.transform = `translateY(${e.scrollTop})`;
 			}
 		}));
+		this._localStore.add(this._list.onDidScroll(() => {
+			this.codeEditors.forEach(e => {
+				e[1].render(true);
+			});
+		}));
 
 		let hasPendingChangeContentHeight = false;
 		this._localStore.add(this._list.onDidChangeContentHeight(() => {

https://github.com/user-attachments/assets/f16d9e2f-2994-4458-8af8-e0a134e34a71

To mitigate this problem properly, it would be nice if we have a way (an API on CodeEditorWidget) that we can use to trigger the widgets to recalculate the positions.

---

Another problem I ran into is the "zindex" of the overflowing widgets. In notebook in general, the cell editor can be partially invisible (when users scroll the cell upwards), and having an overflowing widget will lead to following layout

which feels strange. This is not unique to the notebook editor only though, when we have a floating widget which is large, it can be above other workbench elements, for example when I set the zindex of unicodeHighlighter1 to 50 (same as the token inspector), it is rendered above the terminal and also workbench status bar.

I'm not sure how you would handle this for the completion widget, but I'd love to give this direction a try.

[rebornix]

Revisited this again with the latest InlineEditsSideBySideDiff and I learnt that InlineEditsSideBySideDiff is able to calculate it should be overflow or not (based on where is it rendered in the editor/viewport).

Non-Overflow

Overflow

The InlineEditsSideBySideDiff has its own calculation of shouldOverflow. In the notebook scenario, since we are rendering monaco editors in a list view, the calculation shouldOverflow will be different from the traditional editor. To ensure us to have a good rendering of the side by side diff editor, what we can look into:

• Get access to the InlineEdits contribution
• While users scroll the notebook
  • Trigger a reposition/render of content widget, so it can be positioned again properly (instead of doing codeEditor.render())
  • We (as notebook editor) calculate shouldOverflow and pass it to InlineEditsSideBySideDiff thus it can update its z-index

cc @ulugbekna @benibenj

[rebornix]

For the positioning I pushed https://github.com/microsoft/vscode/pull/238006 to at least allow the diff view to be rendered at the right position when users scroll. It's not ideal or performant but it's better than being broken.

[jayamohan-k]

@rebornix how to implement this. I am trying to create a button similar to "Merge Confict" in my extension code. I am unable to use document in my code, can you help me here.