Merge branch 'editor-widgets' of https://github.com/naturalcrit/homebrewery into editor-widgets

shared/naturalcrit/codeEditor/code-mirror.js

@@ -0,0 +1,36 @@
+let CodeMirror;
+if(typeof navigator !== 'undefined'){
+	CodeMirror = require('codemirror');
+
+	//Language Modes
+	require('codemirror/mode/gfm/gfm.js'); //Github flavoured markdown
+	require('codemirror/mode/css/css.js');
+	require('codemirror/mode/javascript/javascript.js');
+
+	//Addons
+	//Code folding
+	require('codemirror/addon/fold/foldcode.js');
+	require('codemirror/addon/fold/foldgutter.js');
+	//Search and replace
+	require('codemirror/addon/search/search.js');
+	require('codemirror/addon/search/searchcursor.js');
+	require('codemirror/addon/search/jump-to-line.js');
+	require('codemirror/addon/search/match-highlighter.js');
+	require('codemirror/addon/search/matchesonscrollbar.js');
+	require('codemirror/addon/dialog/dialog.js');
+	//Trailing space highlighting
+	// require('codemirror/addon/edit/trailingspace.js');
+	//Active line highlighting
+	// require('codemirror/addon/selection/active-line.js');
+	//Scroll past last line
+	require('codemirror/addon/scroll/scrollpastend.js');
+	//Auto-closing
+	//XML code folding is a requirement of the auto-closing tag feature and is not enabled
+	require('codemirror/addon/fold/xml-fold.js');
+	require('codemirror/addon/edit/closetag.js');
+
+	const foldCode = require('./helpers/fold-code');
+	foldCode.registerHomebreweryHelper(CodeMirror);
+}
+
+module.exports = CodeMirror;

shared/naturalcrit/codeEditor/codeEditor.jsx

@@ -5,43 +5,8 @@ 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 Hints = require('./helpers/widget-elements/hints/hints.jsx');
-
-let CodeMirror;
-if(typeof navigator !== 'undefined'){
-	CodeMirror = require('codemirror');
-
-	//Language Modes
-	require('codemirror/mode/gfm/gfm.js'); //Github flavoured markdown
-	require('codemirror/mode/css/css.js');
-	require('codemirror/mode/javascript/javascript.js');
-
-	//Addons
-	//Code folding
-	require('codemirror/addon/fold/foldcode.js');
-	require('codemirror/addon/fold/foldgutter.js');
-	//Search and replace
-	require('codemirror/addon/search/search.js');
-	require('codemirror/addon/search/searchcursor.js');
-	require('codemirror/addon/search/jump-to-line.js');
-	require('codemirror/addon/search/match-highlighter.js');
-	require('codemirror/addon/search/matchesonscrollbar.js');
-	require('codemirror/addon/dialog/dialog.js');
-	//Trailing space highlighting
-	// require('codemirror/addon/edit/trailingspace.js');
-	//Active line highlighting
-	// require('codemirror/addon/selection/active-line.js');
-	//Scroll past last line
-	require('codemirror/addon/scroll/scrollpastend.js');
-	//Auto-closing
-	//XML code folding is a requirement of the auto-closing tag feature and is not enabled
-	require('codemirror/addon/fold/xml-fold.js');
-	require('codemirror/addon/edit/closetag.js');
-
-	const foldCode = require('./helpers/fold-code');
-	foldCode.registerHomebreweryHelper(CodeMirror);
-}
+const CodeMirror = require('./code-mirror.js');
 
 const themeWidgets = require('../../../themes/V3/5ePHB/widgets');
 
@@ -62,7 +27,7 @@ const CodeEditor = createClass({
 		return {
 			docs        : {},
 			widgetUtils : {},
-			widgets     : [],
+			widgets     : {},
 			hints       : [],
 			hintsField  : undefined,
 		};
@@ -182,7 +147,7 @@ const CodeEditor = createClass({
 		closeTag.autoCloseCurlyBraces(CodeMirror, this.codeMirror);
 
 		this.setState({
-			widgetUtils : require('./helpers/widgets')(CodeMirror, themeWidgets, this.codeMirror, (hints, field)=>{
+			widgetUtils : require('./helpers/widgets')(themeWidgets, this.codeMirror, (hints, field)=>{
 				this.setState({
 					hints,
 					hintsField : field
@@ -196,6 +161,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 +191,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 +432,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 +442,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,43 @@
+const React = require('react');
+const createClass = require('create-react-class');
+const _ = require('lodash');
+require('./checkbox.less');
+const CodeMirror = require('../../../code-mirror.js');
+
+const Checkbox = createClass({
+	getDefaultProps : function() {
+		return {
+			value  : '',
+			prefix : '',
+			cm     : {},
+			n      : -1
+		};
+	},
+
+	handleChange : function (e) {
+		const { cm, n, value, prefix } = 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>
+			<div className='widget-checkbox'>
+				<input type='checkbox' id={id} onChange={this.handleChange} checked={_.includes(text, `,${value}`)}/>
+				<label htmlFor={id}>{_.startCase(value)}</label>
+			</div>
+		</React.Fragment>;
+	}
+});
+
+module.exports = Checkbox;

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

@@ -0,0 +1,7 @@
+.widget-checkbox {
+  display: inline-block;
+  flex: 0 0 auto;
+  background-color: #ddd;
+  border-radius: 10px;
+  padding: 4px 2px;
+}

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,
-	INLINE_SNIPPET : 1,
-	IMAGE          : 2,
+export const SNIPPET_TYPE = {
+	BLOCK    : 0,
+	INLINE   : 1,
+	INJECTOR : 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.BLOCK]    : (name)=>new RegExp(`^{{${name}(?:[^a-zA-Z].*)?`),
+		[SNIPPET_TYPE.INLINE]   : (name)=>new RegExp(`{{${name}`),
+		[SNIPPET_TYPE.INJECTOR] : ()=>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/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 Text = require('./text/text.jsx');
+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 = {
+	Text     : Text,
+	Checkbox : Checkbox,
 };

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

@@ -0,0 +1,161 @@
+require('./text.less');
+const React = require('react');
+const createClass = require('create-react-class');
+const _ = require('lodash');
+const { NUMBER_PATTERN, HINT_TYPE, PATTERNS } = require('../constants');
+const CodeMirror = require('../../../code-mirror.js');
+
+const DEFAULT_WIDTH = '30px';
+
+const STYLE_FN = (value)=>({
+	width : `calc(${value?.length ?? 0}ch + ${value?.length ? `${DEFAULT_WIDTH} / 2` : DEFAULT_WIDTH})`
+});
+
+const Text = createClass({
+	fieldRef : {},
+
+	getDefaultProps : function() {
+		return {
+			field         : {},
+			text          : '',
+			n             : 0,
+			setHints      : ()=>{},
+			onChange      : ()=>{},
+			getStyleHints : ()=>{}
+		};
+	},
+
+	getInitialState : function() {
+		return {
+			value : '',
+			style : STYLE_FN(),
+			id    : ''
+		};
+	},
+
+	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 : value,
+				style : STYLE_FN(value),
+				id    : `${field?.name}-${n}`
+			});
+		}
+
+		if(this.state.value !== value) {
+			const { field } = this.props;
+			this.props.setHints(this, this.props.getStyleHints(field, field.hints ? this.state.value : []));
+		}
+	},
+
+	componentDidMount : function() {
+		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 : value,
+			style : STYLE_FN(value),
+			id
+		});
+		this.fieldRef[id] = React.createRef();
+	},
+
+	componentWillUnmount : function() {
+		this.fieldRef = undefined;
+		this.fieldRef = {};
+		this.fieldRef[this.state.id]?.remove();
+	},
+
+	setFocus : function(e) {
+		const { type } = e;
+		const { field } = this.props;
+		this.props.setHints(this, type === 'focus' && field.hints ? this.props.getStyleHints(field, this.state.value) : []);
+	},
+
+	hintSelected : function(h, e) {
+		let value;
+		if(h.type === HINT_TYPE.VALUE) {
+			value = h.hint;
+		} else if(h.type === HINT_TYPE.NUMBER_SUFFIX) {
+			const match = this.state.value.match(NUMBER_PATTERN);
+			let suffix = match?.at(4) ?? '';
+			for (const char of h.hint) {
+				if(suffix.at(0) === char) {
+					suffix = suffix.slice(1);
+				}
+			}
+			value = `${match?.at(1) ?? ''}${match?.at(2) ?? ''}${h.hint}${suffix}`;
+		}
+		this.onChange({
+			target : {
+				value
+			}
+		});
+	},
+	keyDown : function(e) {
+		const { code } = e;
+		const { field } = this.props;
+		const { value } = this.state;
+		const match = value?.match(NUMBER_PATTERN);
+		if(code === 'ArrowDown') {
+			if(match && match[3] && CSS.supports(field.name, value)) {
+				e.preventDefault();
+				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] && CSS.supports(field.name, value)) {
+				e.preventDefault();
+				this.onChange({
+					target : {
+						value : `${match.at(1) ?? ''}${Number(match[2]) + field.increment}${match[3]}${match.at(4) ?? ''}`
+					}
+				});
+			}
+		}
+	},
+	onChange : function (e){
+		const { cm, text, field, n } = 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, style } = this.state;
+		const { field } = this.props;
+
+		return <React.Fragment>
+			<div className='widget-field'>
+				<label htmlFor={id}>{field.name}:</label>
+				<input id={id} type='text' value={value}
+					   style={style}
+					   ref={this.fieldRef[id]}
+					   onChange={this.onChange}
+					   onFocus={this.setFocus}
+					   onBlur={this.setFocus}
+					   onKeyDown={this.keyDown}/>
+			</div>
+		</React.Fragment>;
+	}
+});
+
+module.exports = Text;

shared/naturalcrit/codeEditor/helpers/widget-elements/text/text.less

@@ -0,0 +1,37 @@
+.widget-field {
+  display: inline-block;
+  flex: 0 0 auto;
+  background-color: #ddd;
+  border-radius: 10px;
+  padding: 4px 2px;
+
+  >label {
+    display: inline;
+    width: 50px;
+    margin: 0 0;
+  }
+
+  >input {
+    background-color: #ddd;
+    border: none;
+  }
+
+  >.hints {
+    position: relative;
+    left: 30px;
+    max-height: 100px;
+    overflow-y: scroll;
+    background-color: white;
+
+    >.hint {
+      margin: 0 0;
+      padding: 2px;
+      cursor: default;
+
+      &:hover,
+      &.active {
+        background-color: rgba(0, 0, 0, 0.1);
+      }
+    }
+  }
+}

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 { Text, Checkbox } = require('./widget-elements');
+const CodeMirror = require('../code-mirror.js');
 
-module.exports = function(CodeMirror, widgets, cm, setHints) {
-	const hintsEl = document.createElement('ul');
-	hintsEl.id = 'hints';
-	hintsEl.role = 'listbox';
-	hintsEl.ariaExpanded = 'true';
-	hintsEl.className = 'CodeMirror-hints default';
-	hintsEl.style = 'display: none;';
-	document.body.append(hintsEl);
+// 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(widgets, cm, 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) && h.hint.includes(value ?? ''));
+
+		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 { cClass, field } = require('./widget-elements')(CodeMirror, setHints);
 	const widgetOptions = widgets.map((widget)=>({
 		name         : widget.name,
-		pattern      : PATTERNS.widget[widget.type](widget.name),
-		createWidget : (n, node)=>{
+		pattern      : PATTERNS.snippet[widget.type](widget.name),
+		renderWidget : (n, node)=>{
 			const parent = document.createElement('div');
-			const classes = (widget.classes || []).map((c, i)=>cClass(cm, n, `${widget.name}`, c));
-			const fieldNames = (widget.fields || []).map((f)=>f.name);
-			const fields = (widget.fields || []).map((f, i)=>field(cm, n, f)).filter((f)=>!!f);
+			const textFieldNames = (widget.fields || []).filter((f)=>f.type === FIELD_TYPE.TEXT).map((f)=>f.name);
 			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 <Text 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;
-				return field(cm, n, {
+				if(textFieldNames.includes(style)) return false;
+				const field = {
 					name      : style,
-					type      : FIELD_TYPE.STYLE,
-					increment : 5
-				});
-			}).filter((s)=>!!s);
+					type      : FIELD_TYPE.TEXT,
+					increment : 5,
+					hints     : true,
+				};
+				return <Text 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';

shared/naturalcrit/markdown.js

@@ -313,12 +313,6 @@ const escape = function (html, encode) {
 	return html;
 };
 
-const sanatizeScriptTags = (content)=>{
-	return content
-		.replace(/<script/ig, '&lt;script')
-		.replace(/<\/script>/ig, '&lt;/script&gt;');
-};
-
 const tagTypes = ['div', 'span', 'a'];
 const tagRegex = new RegExp(`(${
 	_.map(tagTypes, (type)=>{
@@ -349,7 +343,7 @@ module.exports = {
 	render : (rawBrewText)=>{
 		rawBrewText = rawBrewText.replace(/^\\column$/gm, `\n<div class='columnSplit'></div>\n`)
 														 .replace(/^(:+)$/gm, (match)=>`${`<div class='blank'></div>`.repeat(match.length)}\n`);
-		return Marked.parse(sanatizeScriptTags(rawBrewText));
+		return Marked.parse(rawBrewText);
 	},
 
 	validate : (rawBrewText)=>{

shared/naturalcrit/markdownLegacy.js

@@ -90,12 +90,6 @@ const escape = function (html, encode) {
 	return html;
 };
 
-const sanatizeScriptTags = (content)=>{
-	return content
-		.replace(/<script/ig, '&lt;script')
-		.replace(/<\/script>/ig, '&lt;/script&gt;');
-};
-
 const tagTypes = ['div', 'span', 'a'];
 const tagRegex = new RegExp(`(${
 	_.map(tagTypes, (type)=>{
@@ -113,7 +107,7 @@ module.exports = {
 	marked : Markdown,
 	render : (rawBrewText)=>{
 		return Markdown(
-			sanatizeScriptTags(rawBrewText),
+			rawBrewText,
 			{ renderer: renderer }
 		);
 	},

shared/naturalcrit/nav/nav.jsx

@@ -1,5 +1,6 @@
 require('./nav.less');
 const React = require('react');
+const { useState, useRef, useEffect } = React;
 const createClass = require('create-react-class');
 const _ = require('lodash');
 const cx = require('classnames');
@@ -71,64 +72,49 @@ const Nav = {
 		}
 	}),
 
-	dropdown : createClass({
-		displayName     : 'Nav.dropdown',
-		getDefaultProps : function() {
-			return {
-				trigger : 'hover'
-			};
-		},
-		getInitialState : function() {
-			return {
-				showDropdown : false
-			};
-		},
-		componentDidMount : function() {
-			if(this.props.trigger == 'click')
-				document.addEventListener('click', this.handleClickOutside);
-		},
-		componentWillUnmount : function() {
-			if(this.props.trigger == 'click')
-				document.removeEventListener('click', this.handleClickOutside);
-		},
-		handleClickOutside : function(e){
-			// Close dropdown when clicked outside
-			if(this.refs.dropdown && !this.refs.dropdown.contains(e.target)) {
-				this.handleDropdown(false);
-			}
-		},
-		handleDropdown : function(show){
-			this.setState({
-				showDropdown : show
-			});
-		},
-		renderDropdown : function(dropdownChildren){
-			if(!this.state.showDropdown) return null;
+	dropdown : function dropdown(props) {
+		props = Object.assign({}, props, {
+			trigger : 'hover click'
+		});
 
-			return (
-				<div className='navDropdown'>
-					{dropdownChildren}
-				</div>
-			);
-		},
-		render : function () {
-			const dropdownChildren = React.Children.map(this.props.children, (child, i)=>{
-				// Ignore the first child
-				if(i < 1) return;
-				return child;
-			});
-			return (
-				<div className={`navDropdownContainer ${this.props.className}`}
-					ref='dropdown'
-					onMouseEnter={this.props.trigger == 'hover' ? ()=>{this.handleDropdown(true);} : undefined}
-					onClick=     {this.props.trigger == 'click' ? ()=>{this.handleDropdown(true);} : undefined}
-					onMouseLeave={this.props.trigger == 'hover' ? ()=>{this.handleDropdown(false);} : undefined}>
-					{this.props.children[0] || this.props.children /*children is not an array when only one child*/}
-					{this.renderDropdown(dropdownChildren)}
-				</div>
-			);
+		const myRef = useRef(null);
+		const [showDropdown, setShowDropdown] = useState(false);
+
+		useEffect(()=>{
+			document.addEventListener('click', handleClickOutside);
+			return ()=>{
+				document.removeEventListener('click', handleClickOutside);
+			};
+		}, []);
+
+		function handleClickOutside(e) {
+			// Close dropdown when clicked outside
+			if(!myRef.current?.contains(e.target)) {
+				handleDropdown(false);
+			}
 		}
-	})
+
+		function handleDropdown(show) {
+			setShowDropdown(show ?? !showDropdown);
+		}
+
+		const dropdownChildren = React.Children.map(props.children, (child, i)=>{
+			if(i < 1) return;
+			return child;
+		});
+
+		return (
+			<div className={`navDropdownContainer ${props.className}`}
+				ref={myRef}
+				onMouseEnter = { props.trigger.includes('hover') ? ()=>handleDropdown(true)  : undefined }
+				onMouseLeave = { props.trigger.includes('hover') ? ()=>handleDropdown(false) : undefined }
+				onClick      = { props.trigger.includes('click') ? ()=>handleDropdown(true)  : undefined }
+			>
+				{props.children[0] || props.children /*children is not an array when only one child*/}
+				{showDropdown && <div className='navDropdown'>{dropdownChildren}</div>}
+			</div>
+		);
+	}
 
 };
 

shared/naturalcrit/nav/nav.less

@@ -79,6 +79,8 @@ nav{
 			left     : 0px;
 			z-index  : 10000;
 			width    : 100%;
+			overflow : hidden auto;
+			max-height : calc(100vh - 28px);
 			.navItem{
 				animation-name: glideDropDown;
 				animation-duration: 0.4s;