update based on feedback

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 = {
-	SNIPPET        : 0,
+export const SNIPPET_TYPE = {
+	DEFAULT        : 0,
 	INLINE_SNIPPET : 1,
 	IMAGE          : 2,
 };
 
 export const FIELD_TYPE = {
-	STYLE : 0
+	TEXT     : 0,
+	CHECKBOX : 1
 };
 
 export const PATTERNS = {
-	widget : {
-		[WIDGET_TYPE.SNIPPET]        : (name)=>new RegExp(`^{{${name}(?:[^a-zA-Z].*)?`),
-		[WIDGET_TYPE.INLINE_SNIPPET] : (name)=>new RegExp(`{{${name}`),
-		[WIDGET_TYPE.IMAGE]          : ()=>new RegExp(`^\\!\\[(?:[a-zA-Z -]+)?\\]\\(.*\\).*{[a-zA-Z0-9:, "'-]+}$`),
+	snippet : {
+		[SNIPPET_TYPE.DEFAULT]        : (name)=>new RegExp(`^{{${name}(?:[^a-zA-Z].*)?`),
+		[SNIPPET_TYPE.INLINE_SNIPPET] : (name)=>new RegExp(`{{${name}`),
+		[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 }) {
-		if(this.state.value !== this.props.value) {
+	componentDidUpdate : function({ text }, { 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,
-				style : STYLE_FN(this.props.value),
-				id    : `${this.props.field?.name}-${this.props.n}`
+				value : value,
+				style : STYLE_FN(value),
+				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,
-			style : STYLE_FN(this.props.value),
+			value : 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 = {};
-	},
-
-	change : function(e) {
-		this.props.onChange(e);
-		this.setState({
-			value : e.target.value,
-			style : STYLE_FN(e.target.value)
-		});
+		this.fieldRef[this.state.id]?.remove();
 	},
 
 	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={this.state.style}
+					   style={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
-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
-};
-
-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>;
-		}
-	};
+module.exports = {
+	Field    : Field,
+	Checkbox : Checkbox,
 };