remove the '$0' from the parenthesis when intellisense adds it. (#8731)

* remove the '$0' from the parenthesis when
intellisense adds it.

Cursor position still appears at the end instead of inside
the parenthesis.

* change the cursor position to be inside
parenthesis

* fixed how the string and cursor is manipulated

Author: David Kutugata

news/2 Fixes/8101.md

@@ -0,0 +1 @@
+Prevented '$0' from appearing inside brackets when using intellisense autocomplete.

src/datascience-ui/interactive-common/editor.tsx

@@ -188,6 +188,25 @@ export class Editor extends React.Component<IEditorProps, IEditorState> {
     private modelChanged = (e: monacoEditor.editor.IModelContentChangedEvent) => {
         if (this.state.model) {
             this.props.onChange(e.changes, this.state.model);
+            const value = this.state.model.getValue();
+            const secondHalf = value.substr(e.changes[0].rangeOffset);
+
+            // The second condition makes sure this block is only entered once after
+            // adding the intellisense suggestion.
+            if (secondHalf.includes('($0)') && e.changes[0].rangeOffset > 0) {
+                // We leave the first half of value intact and only replace the first occurance
+                // of '($0)' on the second half
+                this.state.model.setValue(value.substr(0, e.changes[0].rangeOffset) + secondHalf.replace('($0)', '()'));
+
+                // The monaco editor is leaving the cursor at the end of the intellisense,
+                // so we move it one position to the left to leave it inside the parenthesis
+                setTimeout(() => {
+                    if (this.state.editor) {
+                        const pos = this.state.editor.getPosition();
+                        this.state.editor.setPosition(pos!.delta(0, -1));
+                    }
+                }, 0);
+            }
         }
     }