diff --git a/shared/naturalcrit/codeEditor/codeEditor.jsx b/shared/naturalcrit/codeEditor/codeEditor.jsx
index b763c2a30..73869d6d1 100644
--- a/shared/naturalcrit/codeEditor/codeEditor.jsx
+++ b/shared/naturalcrit/codeEditor/codeEditor.jsx
@@ -168,6 +168,10 @@ const CodeEditor = createClass({
 					this.state.widgetUtils.removeLineWidget(key, this.state.widgets[key]);
 				}
 			}
+			this.setState({
+				hints      : [],
+				hintsField : undefined
+			});
 			const { widgets } = this.codeMirror.lineInfo(line);
 			if(!widgets) {
 				const widget = this.state.widgetUtils.updateLineWidgets(line);
@@ -198,6 +202,10 @@ const CodeEditor = createClass({
 					for (const widget of widgets) {
 						this.state.widgetUtils.removeLineWidget(n, widget);
 					}
+					this.setState({
+						hints      : [],
+						hintsField : undefined
+					});
 				}
 			}
 		});
diff --git a/shared/naturalcrit/codeEditor/helpers/widget-elements/color-selector/color-selector.jsx b/shared/naturalcrit/codeEditor/helpers/widget-elements/color-selector/color-selector.jsx
index eb1d9b607..0a117db18 100644
--- a/shared/naturalcrit/codeEditor/helpers/widget-elements/color-selector/color-selector.jsx
+++ b/shared/naturalcrit/codeEditor/helpers/widget-elements/color-selector/color-selector.jsx
@@ -1,7 +1,7 @@
 require('./color-selector.less');
 const React = require('react');
 const createClass = require('create-react-class');
-const { PATTERNS, STYLE_FN } = require('../constants');
+const { PATTERNS, STYLE_FN, SNIPPET_TYPE } = require('../constants');
 const CodeMirror = require('../../../code-mirror');
 const debounce = require('lodash.debounce');
 
@@ -39,7 +39,7 @@ const ColorSelector = createClass({
 		}
 	},
 	onChange : function(e) {
-		const { cm, text, field, n } = this.props;
+		const { cm, text, field, n, snippetType } = this.props;
 		const pattern = PATTERNS.field[field.type](field.name);
 		const [_, label, current] = text.match(pattern) ?? [null, field.name, ''];
 		let index = text.indexOf(`${label}:${current}`);
@@ -48,7 +48,10 @@ const ColorSelector = createClass({
 		}
 		let value = e.target.value;
 		if(index === -1) {
-			index = text.length;
+			if(snippetType === SNIPPET_TYPE.INLINE) {
+				index = text.indexOf('}');
+			}
+			index = index === -1 ? text.length : index;
 			value = `,${field.name}:${value}`;
 		} else {
 			index = index + 1 + field.name.length;
diff --git a/shared/naturalcrit/codeEditor/helpers/widget-elements/text/text.jsx b/shared/naturalcrit/codeEditor/helpers/widget-elements/text/text.jsx
index 64f2a2a2d..609ab1349 100644
--- a/shared/naturalcrit/codeEditor/helpers/widget-elements/text/text.jsx
+++ b/shared/naturalcrit/codeEditor/helpers/widget-elements/text/text.jsx
@@ -2,7 +2,7 @@ require('./text.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
-const { NUMBER_PATTERN, HINT_TYPE, PATTERNS, STYLE_FN } = require('../constants');
+const { NUMBER_PATTERN, HINT_TYPE, PATTERNS, STYLE_FN, FIELD_TYPE, SNIPPET_TYPE } = require('../constants');
 const CodeMirror = require('../../../code-mirror.js');
 
 const Text = createClass({
@@ -16,7 +16,8 @@ const Text = createClass({
 			setHints      : ()=>{},
 			onChange      : ()=>{},
 			getStyleHints : ()=>{},
-			def           : false
+			def           : false,
+			snippetType   : -1
 		};
 	},
 
@@ -114,13 +115,16 @@ const Text = createClass({
 		}
 	},
 	onChange : function (e){
-		const { cm, text, field, n } = this.props;
+		const { cm, text, field, n, snippetType } = this.props;
 		const pattern = PATTERNS.field[field.type](field.name);
 		const [_, label, current] = text.match(pattern) ?? [null, field.name, ''];
 		let index = text.indexOf(`${label}:${current}`);
 		let value = e.target.value;
 		if(index === -1) {
-			index = text.length;
+			if(snippetType === SNIPPET_TYPE.INLINE) {
+				index = text.indexOf('}');
+			}
+			index = index === -1 ? text.length : index;
 			value = `,${field.name}:${value}`;
 		} else {
 			index = index + 1 + field.name.length;
diff --git a/shared/naturalcrit/codeEditor/helpers/widgets.js b/shared/naturalcrit/codeEditor/helpers/widgets.js
index ff17c79aa..74a6d4b0a 100644
--- a/shared/naturalcrit/codeEditor/helpers/widgets.js
+++ b/shared/naturalcrit/codeEditor/helpers/widgets.js
@@ -94,11 +94,11 @@ module.exports = function(widgets, cm, setHints) {
 				if(field.type === FIELD_TYPE.CHECKBOX) {
 					return <Checkbox key={key} cm={cm} n={n} prefix={widget.name} value={field.name} def={true}/>;
 				} else if(field.type === FIELD_TYPE.TEXT) {
-					return <Text key={key} field={field} cm={cm} n={n} text={text} setHints={(f, h)=>setHints(h, f)} getStyleHints={getStyleHints} def={true}/>;
+					return <Text key={key} field={field} cm={cm} n={n} text={text} setHints={(f, h)=>setHints(h, f)} getStyleHints={getStyleHints} def={true} snippetType={widget.type}/>;
 				} else if(field.type === FIELD_TYPE.IMAGE_SELECTOR) {
 					return <ImageSelector key={key} field={field} cm={cm} n={n}/>;
 				} else if(field.type === FIELD_TYPE.COLOR_SELECTOR) {
-					return <ColorSelector key={key} field={field} cm={cm} n={n} text={text} def={true}/>;
+					return <ColorSelector key={key} field={field} cm={cm} n={n} text={text} def={true} snippetType={widget.type}/>;
 				} else {
 					return null;
 				}
@@ -114,9 +114,9 @@ module.exports = function(widgets, cm, setHints) {
 				};
 				const key = genKey(widget.name, n, style);
 				if(style.includes('color')) {
-					return <ColorSelector key={key} field={field} cm={cm} n={n} text={text}/>;
+					return <ColorSelector key={key} field={field} cm={cm} n={n} text={text} snippetType={widget.type}/>;
 				}
-				return <Text key={key} field={field} cm={cm} n={n} text={text} setHints={(f, h)=>setHints(h, f)} getStyleHints={getStyleHints}/>;
+				return <Text key={key} field={field} cm={cm} n={n} text={text} setHints={(f, h)=>setHints(h, f)} getStyleHints={getStyleHints} snippetType={widget.type}/>;
 			}).filter(Boolean);
 
 			const root = roots[n][id] ?? ReactDOMClient.createRoot(node || parent);