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

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