update based on feedback

shared/naturalcrit/codeEditor/codeEditor.jsx

@@ -5,7 +5,7 @@ const createClass = require('create-react-class');
 const _ = require('lodash');
 const cx = require('classnames');
 const closeTag = require('./helpers/close-tag');
-const { WIDGET_TYPE, FIELD_TYPE } = require('./helpers/widget-elements/constants');
+const { SNIPPET_TYPE, FIELD_TYPE } = require('./helpers/widget-elements/constants');
 const Hints = require('./helpers/widget-elements/hints/hints.jsx');
 
 let CodeMirror;
@@ -62,7 +62,7 @@ const CodeEditor = createClass({
 		return {
 			docs        : {},
 			widgetUtils : {},
-			widgets     : [],
+			widgets     : {},
 			hints       : [],
 			hintsField  : undefined,
 		};
@@ -196,6 +196,26 @@ const CodeEditor = createClass({
 			this.state.widgetUtils.updateWidgetGutter();
 		});
 
+		this.codeMirror.on('cursorActivity', (cm)=>{
+			const { line } = cm.getCursor();
+			for (const key in this.state.widgets) {
+				if(key != line) {
+					this.state.widgets[key]?.clear();
+				}
+			}
+			const { widgets } = this.codeMirror.lineInfo(line);
+			if(!widgets) {
+				const widget = this.state.widgetUtils.updateLineWidgets(line);
+				if(widget) {
+					this.setState({
+						widgets : {
+							[line] : widget
+						}
+					});
+				}
+			}
+		});
+
 		this.updateSize();
 
 		this.codeMirror.on('gutterClick', (cm, n)=>{
@@ -206,9 +226,13 @@ const CodeEditor = createClass({
 					const widget = this.state.widgetUtils.updateLineWidgets(n);
 					if(widget) {
 						this.setState({
-							widgets : [...this.state.widgets, widget]
+							widgets : { ...this.state.widgets, [n]: widget }
 						});
 					}
+				} else {
+					for (const widget of widgets) {
+						widget.clear();
+					}
 				}
 			}
 		});
@@ -443,17 +467,6 @@ const CodeEditor = createClass({
 			}
 		};
 	},
-	handleMouseDown : function(e) {
-		// Close open widgets if click outside of a widget
-		if(!e.target.matches('.CodeMirror-linewidget *')) {
-			for (const widget of this.state.widgets) {
-				widget.clear();
-			}
-			this.setState({
-				widgets : []
-			});
-		}
-	},
 	keyDown : function(e) {
 		if(this.hintsRef.current) {
 			this.hintsRef.current.keyDown(e);
@@ -464,7 +477,7 @@ const CodeEditor = createClass({
 	render : function(){
 		const { hints, hintsField } = this.state;
 		return <React.Fragment>
-			<div className='codeEditor' ref='editor' style={this.props.style} onMouseDown={this.handleMouseDown} onKeyDown={this.keyDown}/>
+			<div className='codeEditor' ref='editor' style={this.props.style} onKeyDown={this.keyDown}/>
 			<Hints ref={this.hintsRef} hints={hints} field={hintsField}/>
 		</React.Fragment>;
 	}