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>;
 	}

shared/naturalcrit/codeEditor/helpers/widget-elements/checkbox/checkbox.jsx

@@ -0,0 +1,40 @@
+const React = require('react');
+const createClass = require('create-react-class');
+const _ = require('lodash');
+
+const Checkbox = createClass({
+	getDefaultProps : function() {
+		return {
+			CodeMirror : {},
+			value      : '',
+			prefix     : '',
+			cm         : {},
+			n          : -1
+		};
+	},
+
+	handleChange : function (e) {
+		const { cm, n, value, prefix, CodeMirror } = this.props;
+		const { text } = cm.lineInfo(n);
+		const updatedPrefix = `{{${prefix}`;
+		if(e.target?.checked)
+			cm.replaceRange(`,${value}`, CodeMirror.Pos(n, updatedPrefix.length), CodeMirror.Pos(n, updatedPrefix.length), '+insert');
+		else {
+			const start = text.indexOf(`,${value}`);
+			if(start > -1)
+				cm.replaceRange('', CodeMirror.Pos(n, start), CodeMirror.Pos(n, start + value.length + 1), '-delete');
+		}
+	},
+
+	render : function() {
+		const { cm, n, value, prefix } = this.props;
+		const { text } = cm.lineInfo(n);
+		const id = [prefix, value, n].join('-');
+		return <React.Fragment>
+			<input type='checkbox' id={id} onChange={this.handleChange} checked={_.includes(text, `,${value}`)}/>
+			<label htmlFor={id}>{_.startCase(value)}</label>
+		</React.Fragment>;
+	}
+});
+
+module.exports = Checkbox;

shared/naturalcrit/codeEditor/helpers/widget-elements/constants.js

@@ -5,26 +5,27 @@ export const HINT_TYPE = {
 	NUMBER_SUFFIX : 1
 };
 
-export const WIDGET_TYPE = {
+export const SNIPPET_TYPE = {
-	SNIPPET        : 0,
+	DEFAULT        : 0,
 	INLINE_SNIPPET : 1,
 	IMAGE          : 2,
 };
 
 export const FIELD_TYPE = {
-	STYLE : 0
+	TEXT     : 0,
+	CHECKBOX : 1
 };
 
 export const PATTERNS = {
-	widget : {
+	snippet : {
-		[WIDGET_TYPE.SNIPPET]        : (name)=>new RegExp(`^{{${name}(?:[^a-zA-Z].*)?`),
+		[SNIPPET_TYPE.DEFAULT]        : (name)=>new RegExp(`^{{${name}(?:[^a-zA-Z].*)?`),
-		[WIDGET_TYPE.INLINE_SNIPPET] : (name)=>new RegExp(`{{${name}`),
+		[SNIPPET_TYPE.INLINE_SNIPPET] : (name)=>new RegExp(`{{${name}`),
-		[WIDGET_TYPE.IMAGE]          : ()=>new RegExp(`^\\!\\[(?:[a-zA-Z -]+)?\\]\\(.*\\).*{[a-zA-Z0-9:, "'-]+}$`),
+		[SNIPPET_TYPE.IMAGE]          : ()=>new RegExp(`^\\!\\[(?:[a-zA-Z -]+)?\\]\\(.*\\).*{[a-zA-Z0-9:, "'-]+}$`),
 	},
 	field : {
-		[FIELD_TYPE.STYLE] : (name)=>new RegExp(`[{,;](${name}):("[^},;"]*"|[^},;]*)`),
+		[FIELD_TYPE.TEXT] : (name)=>new RegExp(`[{,;](${name}):("[^},;"]*"|[^},;]*)`),
 	},
-	collectStyles : new RegExp(`(?:([a-zA-Z-]+):)+`, 'g'),
+	collectStyles : new RegExp(`(?:([a-zA-Z-]+):(?!\\/))+`, 'g'),
 };
 
 export const NUMBER_PATTERN = new RegExp(`([^-\\d]*)([-\\d]+)(${UNITS.join('|')})?(.*)`);

shared/naturalcrit/codeEditor/helpers/widget-elements/field/field.jsx

@@ -1,9 +1,8 @@
 require('./field.less');
 const React = require('react');
-const ReactDOM = require('react-dom');
 const createClass = require('create-react-class');
 const _ = require('lodash');
-const { NUMBER_PATTERN, HINT_TYPE } = require('../constants');
+const { NUMBER_PATTERN, HINT_TYPE, PATTERNS } = require('../constants');
 
 const DEFAULT_WIDTH = '30px';
 
@@ -17,8 +16,8 @@ const Field = createClass({
 	getDefaultProps : function() {
 		return {
 			field         : {},
+			text          : '',
 			n             : 0,
-			value         : '',
 			setHints      : ()=>{},
 			onChange      : ()=>{},
 			getStyleHints : ()=>{}
@@ -33,26 +32,32 @@ const Field = createClass({
 		};
 	},
 
-	componentDidUpdate : function(_, { value }) {
+	componentDidUpdate : function({ text }, { value }) {
-		if(this.state.value !== this.props.value) {
+		if(this.props.text !== text) {
+			const { field, n } = this.props;
+			const pattern = PATTERNS.field[field.type](field.name);
+			const [_, __, value] = this.props.text.match(pattern) ?? [];
 			this.setState({
-				value : this.props.value,
+				value : value,
-				style : STYLE_FN(this.props.value),
+				style : STYLE_FN(value),
-				id    : `${this.props.field?.name}-${this.props.n}`
+				id    : `${field?.name}-${n}`
 			});
-			return;
 		}
 
 		if(this.state.value !== value) {
-			this.props.setHints(this, this.props.getStyleHints(this.props.field, this.state.value));
+			const { field } = this.props;
+			this.props.setHints(this, this.props.getStyleHints(field, field.hints ? this.state.value : []));
 		}
 	},
 
 	componentDidMount : function() {
-		const id = `${this.props.field?.name}-${this.props.n}`;
+		const { field, text, n } = this.props;
+		const id = `${field?.name}-${n}`;
+		const pattern = PATTERNS.field[field.type](field.name);
+		const [_, __, value] = text.match(pattern) ?? [];
 		this.setState({
-			value : this.props.value,
+			value : value,
-			style : STYLE_FN(this.props.value),
+			style : STYLE_FN(value),
 			id
 		});
 		this.fieldRef[id] = React.createRef();
@@ -61,19 +66,13 @@ const Field = createClass({
 	componentWillUnmount : function() {
 		this.fieldRef = undefined;
 		this.fieldRef = {};
-	},
+		this.fieldRef[this.state.id]?.remove();
-
-	change : function(e) {
-		this.props.onChange(e);
-		this.setState({
-			value : e.target.value,
-			style : STYLE_FN(e.target.value)
-		});
 	},
 
 	setFocus : function(e) {
 		const { type } = e;
-		this.props.setHints(this, type === 'focus' ? this.props.getStyleHints(this.props.field, this.state.value) : []);
+		const { field } = this.props;
+		this.props.setHints(this, type === 'focus' && field.hints ? this.props.getStyleHints(field, this.state.value) : []);
 	},
 
 	hintSelected : function(h, e) {
@@ -90,7 +89,7 @@ const Field = createClass({
 			}
 			value = `${match?.at(1) ?? ''}${match?.at(2) ?? ''}${h.hint}${suffix}`;
 		}
-		this.change({
+		this.onChange({
 			target : {
 				value
 			}
@@ -98,21 +97,22 @@ const Field = createClass({
 	},
 	keyDown : function(e) {
 		const { code } = e;
-		const { field, value } = this.props;
+		const { field } = this.props;
+		const { value } = this.state;
 		const match = value.match(NUMBER_PATTERN);
 		if(code === 'ArrowDown') {
-			if(match && match[3]) {
+			if(match && match[3] && CSS.supports(field.name, value)) {
 				e.preventDefault();
-				this.change({
+				this.onChange({
 					target : {
 						value : `${match.at(1) ?? ''}${Number(match[2]) - field.increment}${match[3]}${match.at(4) ?? ''}`
 					}
 				});
 			}
 		} else if(code === 'ArrowUp') {
-			if(match && match[3]) {
+			if(match && match[3] && CSS.supports(field.name, value)) {
 				e.preventDefault();
-				this.change({
+				this.onChange({
 					target : {
 						value : `${match.at(1) ?? ''}${Number(match[2]) + field.increment}${match[3]}${match.at(4) ?? ''}`
 					}
@@ -120,18 +120,35 @@ const Field = createClass({
 			}
 		}
 	},
+	onChange : function (e){
+		const { cm, text, field, n, CodeMirror } = 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;
+			value = `,${field.name}:${value}`;
+		} else {
+			index = index + 1 + field.name.length;
+		}
+		cm.replaceRange(value, CodeMirror.Pos(n, index), CodeMirror.Pos(n, index + current.length), '+insert');
+		this.setState({
+			value : e.target.value,
+			style : STYLE_FN(e.target.value)
+		});
+	},
 	render : function() {
-		const { value, id } = this.state;
+		const { value, id, style } = this.state;
 		const { field } = this.props;
 
 		return <React.Fragment>
 			<div className='widget-field'>
-				<label htmlFor={id}>{_.startCase(field.name)}:</label>
+				<label htmlFor={id}>{field.name}:</label>
 				<input id={id} type='text' value={value}
-					   step={field.increment || 1}
+					   style={style}
-					   style={this.state.style}
 					   ref={this.fieldRef[id]}
-					   onChange={this.change}
+					   onChange={this.onChange}
 					   onFocus={this.setFocus}
 					   onBlur={this.setFocus}
 					   onKeyDown={this.keyDown}/>

shared/naturalcrit/codeEditor/helpers/widget-elements/hints/hints.jsx

@@ -1,7 +1,5 @@
 const React = require('react');
-const ReactDOM = require('react-dom');
 const createClass = require('create-react-class');
-const _ = require('lodash');
 const { NUMBER_PATTERN } = require('../constants');
 
 const Hints = createClass({
@@ -42,24 +40,23 @@ const Hints = createClass({
 		}
 	},
 
-	componentDidMount : function() {
+	componentDidMount : function() {},
-	},
 
 	keyDown : function(e) {
 		const { code } = e;
 		const { activeHint } = this.state;
 		const { hints, field } = this.props;
-		const match = field.state.value.match(NUMBER_PATTERN);
+		const match = field?.state?.value?.match(NUMBER_PATTERN);
 		if(code === 'ArrowDown') {
 			e.preventDefault();
-			if(!match) {
+			if(!match || !match?.at(3)) {
 				this.setState({
 					activeHint : activeHint === hints.length - 1 ? 0 : activeHint + 1
 				});
 			}
 		} else if(code === 'ArrowUp') {
 			e.preventDefault();
-			if(!match) {
+			if(!match || !match?.at(3)) {
 				this.setState({
 					activeHint : activeHint === 0 ? hints.length - 1 : activeHint - 1
 				});
@@ -79,7 +76,8 @@ const Hints = createClass({
 		const { activeHint } = this.state;
 		const { hints, field } = this.props;
 		if(!field) return null;
-		const bounds = field.fieldRef[field.state.id].current?.getBoundingClientRect();
+		const bounds = field.fieldRef[field.state.id]?.current?.getBoundingClientRect();
+		if(!bounds) return null;
 
 		const hintElements = hints
 			.filter((h)=>h.hint !== field.state.value)
@@ -88,6 +86,7 @@ const Hints = createClass({
 				if(activeHint === i) {
 					className += ' CodeMirror-hint-active';
 					return <li key={i}
+						role={'option'}
 						className={className}
 						onMouseDown={(e)=>field.hintSelected(h, e)}
 						ref={this.activeHintRef}>
@@ -95,6 +94,7 @@ const Hints = createClass({
 					</li>;
 				}
 				return <li key={i}
+					role={'option'}
 					className={className}
 					onMouseDown={(e)=>field.hintSelected(h, e)}>
 					{h.hint}
@@ -104,7 +104,7 @@ const Hints = createClass({
 		let style = {
 			display : 'none'
 		};
-		if(hintElements.length > 1) {
+		if(hintElements.length > 0) {
 			style = {
 				...style,
 				display : 'block',
@@ -118,7 +118,6 @@ const Hints = createClass({
 				aria-expanded={true}
 				className={'CodeMirror-hints default'}
 				style={style}
-				onKeyDown={this.keyDown}
 				ref={this.hintsRef}>
 				{hintElements}
 			</ul>

shared/naturalcrit/codeEditor/helpers/widget-elements/index.js

@@ -1,119 +1,7 @@
-const React = require('react');
-const _ = require('lodash');
 const Field = require('./field/field.jsx');
-const { PATTERNS, UNITS, HINT_TYPE } = require('./constants');
+const Checkbox = require('./checkbox/checkbox.jsx');
 
-// See https://codemirror.net/5/addon/hint/css-hint.js for code reference
+module.exports = {
-const pseudoClasses = { 'active'           : 1, 'after'            : 1, 'before'           : 1, 'checked'          : 1, 'default'          : 1,
+	Field    : Field,
-	'disabled'         : 1, 'empty'            : 1, 'enabled'          : 1, 'first-child'      : 1, 'first-letter'     : 1,
+	Checkbox : Checkbox,
-	'first-line'       : 1, 'first-of-type'    : 1, 'focus'            : 1, 'hover'            : 1, 'in-range'         : 1,
-	'indeterminate'    : 1, 'invalid'          : 1, 'lang'             : 1, 'last-child'       : 1, 'last-of-type'     : 1,
-	'link'             : 1, 'not'              : 1, 'nth-child'        : 1, 'nth-last-child'   : 1, 'nth-last-of-type' : 1,
-	'nth-of-type'      : 1, 'only-of-type'     : 1, 'only-child'       : 1, 'optional'         : 1, 'out-of-range'     : 1,
-	'placeholder'      : 1, 'read-only'        : 1, 'read-write'       : 1, 'required'         : 1, 'root'             : 1,
-	'selection'        : 1, 'target'           : 1, 'valid'            : 1, 'visited'          : 1
-};
-
-module.exports = function(CodeMirror, setHints) {
-	const spec = CodeMirror.resolveMode('text/css');
-	const headless = CodeMirror(()=>{});
-
-	const makeTempCSSDoc = (value)=>CodeMirror.Doc(`.selector {\n${value}\n}`, 'text/css');
-
-	// See https://codemirror.net/5/addon/hint/css-hint.js for code reference
-	const getStyleHints = (field, value)=>{
-		const tempDoc = makeTempCSSDoc(`${field.name}:${value?.replaceAll(`'"`, '') ?? ''}`);
-		headless.swapDoc(tempDoc);
-		const pos = CodeMirror.Pos(1, field.name.length + 1 + (value?.length ?? 0), false);
-		const token = headless.getTokenAt(pos);
-		const inner = CodeMirror.innerMode(tempDoc.getMode(), token?.state);
-
-		if(inner.mode.name !== 'css') return;
-
-		if(token.type === 'keyword' && '!important'.indexOf(token.string) === 0)
-			return { list : ['!important'], from : CodeMirror.Pos(pos.line, token.start),
-				to   : CodeMirror.Pos(pos.line, token.end) };
-
-		let start = token.start, end = pos.ch, word = token.string.slice(0, end - start);
-		if(/[^\w$_-]/.test(word)) {
-			word = ''; start = end = pos.ch;
-		}
-
-		let result = [];
-		const add = (keywords)=>{
-			for (const name in keywords)
-				if(!word || name.lastIndexOf(word, 0) === 0)
-					result.push(name);
-		};
-
-		const st = inner.state.state;
-		if(st === 'pseudo' || token.type === 'variable-3') {
-			add(pseudoClasses);
-		} else if(st === 'block' || st === 'maybeprop') {
-			add(spec.propertyKeywords);
-		} else if(st === 'prop' || st === 'parens' || st === 'at' || st === 'params') {
-			add(spec.valueKeywords);
-			add(spec.colorKeywords);
-		} else if(st === 'media' || st === 'media_parens') {
-			add(spec.mediaTypes);
-			add(spec.mediaFeatures);
-		}
-		result = result.map((h)=>({ hint: h, type: HINT_TYPE.VALUE }))
-			.filter((h)=>CSS.supports(field.name, h.hint));
-
-		const numberSuffix = word.slice(-4).replaceAll(/\d/g, '');
-		if(token.type === 'number' && !UNITS.includes(numberSuffix)) {
-			result.push(...UNITS
-				.filter((u)=>u.includes(numberSuffix) && CSS.supports(field.name, `${value.replaceAll(/\D/g, '') ?? ''}${u}`))
-				.map((u)=>({ hint: u, type: HINT_TYPE.NUMBER_SUFFIX }))
-			);
-		}
-
-		return result;
-	};
-
-	return {
-		// checkbox widget
-		cClass : function(cm, n, prefix, cClass) {
-			const { text } = cm.lineInfo(n);
-			const id = _.kebabCase(prefix + '-' + cClass + '-' + n);
-			prefix = `{{${prefix}`;
-			const handleChange = (e)=>{
-				if(e.target?.checked)
-					cm.replaceRange(`,${cClass}`, CodeMirror.Pos(n, prefix.length), CodeMirror.Pos(n, prefix.length), '+insert');
-				else {
-					const start = text.indexOf(`,${cClass}`);
-					if(start > -1)
-						cm.replaceRange('', CodeMirror.Pos(n, start), CodeMirror.Pos(n, start + cClass.length + 1), '-delete');
-					else
-						e.target.checked = true;
-				}
-			};
-			return <React.Fragment key={id}>
-				<input type='checkbox' id={id} onChange={handleChange} checked={_.includes(text, `,${cClass}`)}/>
-				<label htmlFor={id}>{_.startCase(cClass)}</label>
-			</React.Fragment>;
-		},
-		field : function(cm, n, field) {
-			const { text } = cm.lineInfo(n);
-			const pattern = PATTERNS.field[field.type](field.name);
-			const [_, __, value] = text.match(pattern) ?? [];
-
-			const inputChange = (e)=>{
-				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;
-					value = `,${field.name}:${value}`;
-				} else {
-					index = index + 1 + field.name.length;
-				}
-				cm.replaceRange(value, CodeMirror.Pos(n, index), CodeMirror.Pos(n, index + current.length), '+insert');
-			};
-			return <React.Fragment key={`${field.name}-${n}`}>
-				<Field field={field} value={value} n={n} onChange={inputChange} setHints={(f, h)=>setHints(h, f)} getStyleHints={getStyleHints}/>
-			</React.Fragment>;
-		}
-	};
 };

shared/naturalcrit/codeEditor/helpers/widgets.js

@@ -1,38 +1,111 @@
 const React = require('react');
 const ReactDOM = require('react-dom');
-const { PATTERNS, FIELD_TYPE } = require('./widget-elements/constants');
+const { PATTERNS, FIELD_TYPE, HINT_TYPE, UNITS } = require('./widget-elements/constants');
 require('./widget-elements/hints/hints.jsx');
+const { Checkbox, Field } = require('./widget-elements');
+
+// See https://codemirror.net/5/addon/hint/css-hint.js for code reference
+const pseudoClasses = { 'active'           : 1, 'after'            : 1, 'before'           : 1, 'checked'          : 1, 'default'          : 1,
+	'disabled'         : 1, 'empty'            : 1, 'enabled'          : 1, 'first-child'      : 1, 'first-letter'     : 1,
+	'first-line'       : 1, 'first-of-type'    : 1, 'focus'            : 1, 'hover'            : 1, 'in-range'         : 1,
+	'indeterminate'    : 1, 'invalid'          : 1, 'lang'             : 1, 'last-child'       : 1, 'last-of-type'     : 1,
+	'link'             : 1, 'not'              : 1, 'nth-child'        : 1, 'nth-last-child'   : 1, 'nth-last-of-type' : 1,
+	'nth-of-type'      : 1, 'only-of-type'     : 1, 'only-child'       : 1, 'optional'         : 1, 'out-of-range'     : 1,
+	'placeholder'      : 1, 'read-only'        : 1, 'read-write'       : 1, 'required'         : 1, 'root'             : 1,
+	'selection'        : 1, 'target'           : 1, 'valid'            : 1, 'visited'          : 1
+};
+
+const genKey = (...args)=>args.join('-');
 
 module.exports = function(CodeMirror, widgets, cm, setHints) {
-	const hintsEl = document.createElement('ul');
+	const spec = CodeMirror.resolveMode('text/css');
-	hintsEl.id = 'hints';
+	const headless = CodeMirror(()=>{});
-	hintsEl.role = 'listbox';
-	hintsEl.ariaExpanded = 'true';
-	hintsEl.className = 'CodeMirror-hints default';
-	hintsEl.style = 'display: none;';
-	document.body.append(hintsEl);
 
-	const { cClass, field } = require('./widget-elements')(CodeMirror, setHints);
+	const makeTempCSSDoc = (value)=>CodeMirror.Doc(`.selector {\n${value}\n}`, 'text/css');
+
+	// See https://codemirror.net/5/addon/hint/css-hint.js for code reference
+	const getStyleHints = (field, value)=>{
+		const tempDoc = makeTempCSSDoc(`${field.name}:${value?.replaceAll(`'"`, '') ?? ''}`);
+		headless.swapDoc(tempDoc);
+		const pos = CodeMirror.Pos(1, field.name.length + 1 + (value?.length ?? 0), false);
+		const token = headless.getTokenAt(pos);
+		const inner = CodeMirror.innerMode(tempDoc.getMode(), token?.state);
+
+		if(inner.mode.name !== 'css') return;
+
+		if(token.type === 'keyword' && '!important'.indexOf(token.string) === 0)
+			return { list : ['!important'], from : CodeMirror.Pos(pos.line, token.start),
+				to   : CodeMirror.Pos(pos.line, token.end) };
+
+		let start = token.start, end = pos.ch, word = token.string.slice(0, end - start);
+		if(/[^\w$_-]/.test(word)) {
+			word = ''; start = end = pos.ch;
+		}
+
+		let result = [];
+		const add = (keywords)=>{
+			for (const name in keywords)
+				if(!word || name.lastIndexOf(word, 0) === 0)
+					result.push(name);
+		};
+
+		const st = inner.state.state;
+		if(st === 'pseudo' || token.type === 'variable-3') {
+			add(pseudoClasses);
+		} else if(st === 'block' || st === 'maybeprop') {
+			add(spec.propertyKeywords);
+		} else if(st === 'prop' || st === 'parens' || st === 'at' || st === 'params') {
+			add(spec.valueKeywords);
+			add(spec.colorKeywords);
+		} else if(st === 'media' || st === 'media_parens') {
+			add(spec.mediaTypes);
+			add(spec.mediaFeatures);
+		}
+		result = result.map((h)=>({ hint: h, type: HINT_TYPE.VALUE }))
+			.filter((h)=>CSS.supports(field.name, h.hint));
+
+		const numberSuffix = word.slice(-4).replaceAll(/\d/g, '');
+		if(token.type === 'number' && !UNITS.includes(numberSuffix)) {
+			result.push(...UNITS
+				.filter((u)=>u.includes(numberSuffix) && CSS.supports(field.name, `${value.replaceAll(/\D/g, '') ?? ''}${u}`))
+				.map((u)=>({ hint: u, type: HINT_TYPE.NUMBER_SUFFIX }))
+			);
+		}
+
+		return result;
+	};
+
+	const { Field, Checkbox } = require('./widget-elements');
 	const widgetOptions = widgets.map((widget)=>({
 		name         : widget.name,
-		pattern      : PATTERNS.widget[widget.type](widget.name),
+		pattern      : PATTERNS.snippet[widget.type](widget.name),
-		createWidget : (n, node)=>{
+		renderWidget : (n, node)=>{
 			const parent = document.createElement('div');
-			const classes = (widget.classes || []).map((c, i)=>cClass(cm, n, `${widget.name}`, c));
+			const textFieldNames = (widget.fields || []).filter((f)=>f.type === FIELD_TYPE.TEXT).map((f)=>f.name);
-			const fieldNames = (widget.fields || []).map((f)=>f.name);
-			const fields = (widget.fields || []).map((f, i)=>field(cm, n, f)).filter((f)=>!!f);
 			const { text } = cm.lineInfo(n);
+
+			const fields = (widget.fields || []).map((field)=>{
+				if(field.type === FIELD_TYPE.CHECKBOX) {
+					return <Checkbox key={genKey(widget.name, n, field.name)} cm={cm} CodeMirror={CodeMirror} n={n} prefix={widget.name} value={field.name}/>;
+				} else if(field.type === FIELD_TYPE.TEXT) {
+					return <Field key={genKey(widget.name, n, field.name)} cm={cm} CodeMirror={CodeMirror} field={field} n={n} text={text} setHints={(f, h)=>setHints(h, f)} getStyleHints={getStyleHints}/>;
+				} else {
+					return null;
+				}
+			}).filter(Boolean);
+
 			const styles = [...text.matchAll(PATTERNS.collectStyles)].map(([_, style])=>{
-				if(fieldNames.includes(style)) return false;
+				if(textFieldNames.includes(style)) return false;
-				return field(cm, n, {
+				const field = {
 					name      : style,
-					type      : FIELD_TYPE.STYLE,
+					type      : FIELD_TYPE.TEXT,
-					increment : 5
+					increment : 5,
-				});
+					hints     : true,
-			}).filter((s)=>!!s);
+				};
+				return <Field key={genKey(widget.name, n, style)} cm={cm} CodeMirror={CodeMirror} field={field} n={n} text={text} setHints={(f, h)=>setHints(h, f)} getStyleHints={getStyleHints}/>;
+			}).filter(Boolean);
 
 			ReactDOM.render(<React.Fragment>
-				{classes}
 				{fields}
 				{styles}
 			</React.Fragment>, node || parent);
@@ -41,16 +114,16 @@ module.exports = function(CodeMirror, widgets, cm, setHints) {
 		}
 	}));
 
-	const updateLineWidgets = (n, remove)=>{
+	const updateLineWidgets = (n)=>{
 		const { text, widgets } =  cm.lineInfo(n);
 		const widgetOption = widgetOptions.find((option)=>!!text.match(option.pattern));
 		if(!widgetOption) return;
 		if(!!widgets) {
 			for (const widget of widgets) {
-				widgetOption.createWidget(n, widget.node);
+				widgetOption.renderWidget(n, widget.node);
 			}
 		} else {
-			return cm.addLineWidget(n, widgetOption.createWidget(n), {
+			return cm.addLineWidget(n, widgetOption.renderWidget(n), {
 				above       : false,
 				coverGutter : false,
 				noHScroll   : true,
@@ -60,7 +133,7 @@ module.exports = function(CodeMirror, widgets, cm, setHints) {
 	};
 
 	return {
-		removeLineWidgets : (widget)=>{
+		removeLineWidget : (widget)=>{
 			cm.removeLineWidget(widget);
 		},
 		updateLineWidgets,
@@ -75,9 +148,12 @@ module.exports = function(CodeMirror, widgets, cm, setHints) {
 		updateWidgetGutter : ()=>{
 			cm.operation(()=>{
 				for (let i = 0; i < cm.lineCount(); i++) {
-					const line = cm.getLine(i);
+					const { text, widgets } = cm.lineInfo(i);
 
-					if(widgetOptions.some((option)=>line.match(option.pattern))) {
+					if(widgetOptions.some((option)=>text.match(option.pattern))) {
+						if(widgets) {
+							continue;
+						}
 						const optionsMarker = document.createElement('div');
 						optionsMarker.style.color = '#822';
 						optionsMarker.style.cursor = 'pointer';

themes/V3/5ePHB/widgets.js

@@ -1,24 +1,39 @@
-const { WIDGET_TYPE, FIELD_TYPE } = require('../../../shared/naturalcrit/codeEditor/helpers/widget-elements/constants');
+const { SNIPPET_TYPE, FIELD_TYPE } = require('../../../shared/naturalcrit/codeEditor/helpers/widget-elements/constants');
 
 module.exports = [{
 	name   : 'monster',
-	type    : WIDGET_TYPE.SNIPPET,
+	type   : SNIPPET_TYPE.DEFAULT,
-	classes : ['frame', 'wide']
+	fields : [{
+		name : 'frame',
+		type : FIELD_TYPE.CHECKBOX
+	}, {
+		name : 'wide',
+		type : FIELD_TYPE.CHECKBOX
+	}]
 }, {
 	name   : 'classTable',
-	type    : WIDGET_TYPE.SNIPPET,
+	type   : SNIPPET_TYPE.DEFAULT,
-	classes : ['frame', 'decoration', 'wide']
+	fields : [{
+		name : 'frame',
+		type : FIELD_TYPE.CHECKBOX
+	}, {
+		name : 'decoration',
+		type : FIELD_TYPE.CHECKBOX
+	}, {
+		name : 'wide',
+		type : FIELD_TYPE.CHECKBOX
+	}]
 }, {
 	name   : 'image',
-	type   : WIDGET_TYPE.IMAGE,
+	type   : SNIPPET_TYPE.IMAGE,
 	fields : []
 }, {
 	name   : 'artist',
-	type   : WIDGET_TYPE.SNIPPET,
+	type   : SNIPPET_TYPE.DEFAULT,
 	fields : [{
 		name      : 'top',
-		type      : FIELD_TYPE.STYLE,
+		type      : FIELD_TYPE.TEXT,
 		increment : 5,
-		lineBreak : true
+		hints     : true
 	}]
 }];