add the concept of widgets and widget fields

shared/naturalcrit/codeEditor/codeEditor.jsx

@@ -4,7 +4,8 @@ const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
 const cx = require('classnames');
-const closeTag = require('./close-tag');
+const closeTag = require('./helpers/close-tag');
+const { WIDGET_TYPE, FIELD_TYPE } = require('./helpers/widget-elements/constants');
 
 let CodeMirror;
 if(typeof navigator !== 'undefined'){
@@ -37,10 +38,36 @@ if(typeof navigator !== 'undefined'){
 	require('codemirror/addon/fold/xml-fold.js');
 	require('codemirror/addon/edit/closetag.js');
 
-	const foldCode = require('./fold-code');
+	const foldCode = require('./helpers/fold-code');
 	foldCode.registerHomebreweryHelper(CodeMirror);
 }
 
+const themeWidgets = [{
+	name    : 'monster',
+	type    : WIDGET_TYPE.SNIPPET,
+	classes : ['frame', 'wide']
+}, {
+	name    : 'classTable',
+	type    : WIDGET_TYPE.SNIPPET,
+	classes : ['frame', 'decoration', 'wide']
+}, {
+	name   : 'image',
+	type   : WIDGET_TYPE.IMAGE,
+	fields : []
+}, {
+	name   : 'artist',
+	type   : WIDGET_TYPE.SNIPPET,
+	fields : [{
+		name      : 'top',
+		type      : FIELD_TYPE.STYLE,
+		increment : 5,
+		lineBreak : true
+	}]
+}, { // catch all
+	name : '',
+	type : WIDGET_TYPE.SNIPPET
+}];
+
 const CodeEditor = createClass({
 	displayName     : 'CodeEditor',
 	getDefaultProps : function() {
@@ -49,13 +76,16 @@ const CodeEditor = createClass({
 			value         : '',
 			wrap          : true,
 			onChange      : ()=>{},
-			enableFolding : true
+			enableFolding : true,
+			theme         : null
 		};
 	},
 
 	getInitialState : function() {
 		return {
-			docs : {}
+			docs          : {},
+			widgetUtils   : {},
+			focusedWidget : null
 		};
 	},
 
@@ -91,6 +121,9 @@ const CodeEditor = createClass({
 		} else {
 			this.codeMirror.setOption('foldOptions', false);
 		}
+
+		this.state.widgetUtils.updateWidgetGutter();
+		this.state.widgetUtils.updateAllLineWidgets();
 	},
 
 	buildEditor : function() {
@@ -155,7 +188,7 @@ const CodeEditor = createClass({
 			},
 			foldGutter        : true,
 			foldOptions       : this.foldOptions(this.codeMirror),
-			gutters           : ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
+			gutters           : ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'widget-gutter'],
 			autoCloseTags     : true,
 			styleActiveLine   : true,
 			showTrailingSpace : false,
@@ -169,9 +202,36 @@ const CodeEditor = createClass({
 		});
 		closeTag.autoCloseCurlyBraces(CodeMirror, this.codeMirror);
 
+		this.setState({
+			widgetUtils : require('./helpers/widgets')(CodeMirror, themeWidgets, this.codeMirror)
+		});
+
 		// Note: codeMirror passes a copy of itself in this callback. cm === this.codeMirror. Either one works.
 		this.codeMirror.on('change', (cm)=>{this.props.onChange(cm.getValue());});
 		this.updateSize();
+
+		this.codeMirror.on('change', (cm)=>{
+			this.props.onChange(cm.getValue());
+
+			this.state.widgetUtils.updateWidgetGutter();
+		});
+
+		this.codeMirror.on('gutterClick', (cm, n)=>{
+			const { gutterMarkers } = this.codeMirror.lineInfo(n);
+
+			if(!!gutterMarkers && !!gutterMarkers['widget-gutter']) {
+				const { widgets } = this.codeMirror.lineInfo(n);
+				if(!widgets) {
+					this.state.widgetUtils.updateLineWidgets(n);
+				} else {
+					this.codeMirror.operation(()=>{
+						for (const widget of widgets) {
+							this.state.widgetUtils.removeLineWidgets(widget);
+						}
+					});
+				}
+			}
+		});
 	},
 
 	indent : function () {

shared/naturalcrit/codeEditor/codeEditor.less

@@ -30,4 +30,21 @@
   //    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAQAgMAAABW5NbuAAAACVBMVEVHcEwAAAAAAAAWawmTAAAAA3RSTlMAPBJ6PMxpAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAFUlEQVQI12NgwACcCQysASAEZGAAACMuAX06aCQUAAAAAElFTkSuQmCC) no-repeat right;
   //  }
   //}
+
+  .widget-gutter {
+    width: .7em;
+  }
+
+  .snippet-options-widget {
+    background-color: lightblue;
+    padding: 2px 0 2px 0;
+
+    * {
+      margin: 0 2px 0 2px;
+    }
+
+    input {
+      max-width: 10vw;
+    }
+  }
 }

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

@@ -0,0 +1,23 @@
+export const UNITS = ['cm', 'mm', 'in', 'px', 'pt', 'pc', 'em', 'ex', 'ch', 'rem', 'vw', 'vh', 'vmin', 'vmax', '%'];
+
+export const WIDGET_TYPE = {
+	SNIPPET        : 0,
+	INLINE_SNIPPET : 1,
+	IMAGE          : 2,
+};
+
+export const FIELD_TYPE = {
+	STYLE : 0
+};
+
+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:, "'-]+}$`),
+	},
+	field : {
+		[FIELD_TYPE.STYLE] : (name)=>new RegExp(`[{,;](${name}):((?:"[^},;"]*")|(?:[^},;]*))`),
+	},
+	collectStyles : new RegExp(`(?:[{,;]([a-zA-Z-]+):)+`, 'g'),
+};

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

@@ -0,0 +1,154 @@
+require('./field.less');
+const React = require('react');
+const createClass = require('create-react-class');
+const _ = require('lodash');
+const { UNITS } = require('../constants');
+
+const Field = createClass({
+	hintsRef      : React.createRef(),
+	activeHintRef : React.createRef(),
+
+	getDefaultProps : function() {
+		return {
+			field    : {},
+			n        : 0,
+			value    : '',
+			hints    : [],
+			onChange : ()=>{}
+		};
+	},
+
+	getInitialState : function() {
+		return {
+			value      : '',
+			focused    : false,
+			activeHint : null
+		};
+	},
+
+	componentDidUpdate : function({ hints }) {
+		if(this.state.value !== this.props.value) {
+			this.setState({
+				value : this.props.value
+			});
+		}
+
+		const hintsLength = this.props.hints.length;
+		if(hintsLength - 1 < this.state.activeHint && hintsLength !== hints.length) {
+			this.setState({
+				activeHint : hintsLength === 0 ? 0 : hintsLength - 1
+			});
+			return;
+		}
+
+		if(this.hintsRef.current && this.activeHintRef.current) {
+			const offset = this.activeHintRef.current.offsetTop;
+			const scrollTop = this.hintsRef.current.scrollTop;
+			if(scrollTop + 50 < offset || scrollTop + 50 > offset) {
+				this.hintsRef.current.scrollTo({
+					top      : offset - 50,
+					behavior : 'smooth'
+				});
+			}
+		}
+	},
+
+	componentDidMount : function() {
+		this.setState({
+			value : this.props.value
+		});
+	},
+
+	change : function(e) {
+		this.props.onChange(e);
+		this.setState({
+			value : e.target.value
+		});
+	},
+
+	setFocus : function({ type }) {
+		if(type === 'focus') {
+			this.setState({ focused: true, activeHint: this.props.hints.length > 0 ? 0 : null });
+		} else if(type === 'blur'){
+			this.setState({ focused: false, activeHint: null });
+		}
+	},
+
+	keyDown : function(e) {
+		const { code } = e;
+		const { value, activeHint } = this.state;
+		const { field, hints } = this.props;
+		const numberPattern = new RegExp(`([^-\\d]*)([-\\d]+)(${UNITS.join('|')})(.*)`);
+		const match = value.match(numberPattern);
+		if(code === 'ArrowDown') {
+			e.preventDefault();
+			if(match) {
+				this.change({
+					target : {
+						value : `${match.at(1) ?? ''}${Number(match[2]) - field.increment}${match[3]}${match.at(4) ?? ''}`
+					}
+				});
+			} else {
+				this.setState({
+					activeHint : activeHint === hints.length - 1 ? 0 : activeHint + 1
+				});
+			}
+		} else if(code === 'ArrowUp') {
+			e.preventDefault();
+			if(match) {
+				this.change({
+					target : {
+						value : `${match.at(1) ?? ''}${Number(match[2]) + field.increment}${match[3]}${match.at(4) ?? ''}`
+					}
+				});
+			} else {
+				this.setState({
+					activeHint : activeHint === 0 ? hints.length - 1 : activeHint - 1
+				});
+			}
+		} else if(code === 'Enter') {
+			e.preventDefault();
+			if(!match) {
+				this.change({
+					target : {
+						value : hints[activeHint]
+					}
+				});
+				this.setState({
+					activeHint : 0
+				});
+			}
+		}
+	},
+
+	render : function(){
+		const { focused, value, activeHint } = this.state;
+		const { field, n } = this.props;
+		const hints = this.props.hints
+			.filter((h)=>h!==value)
+			.map((h, i)=>{
+				if(activeHint === i) {
+					return <div key={i} className={'hint active'} onClick={()=>this.change({ target: { value: h } })} ref={this.activeHintRef}>{h}</div>;
+				} else {
+					return <div key={i} className={'hint'} onClick={()=>this.change({ target: { value: h } })}>{h}</div>;
+				}
+			});
+
+		const id = `${field.name}-${n}`;
+		return <React.Fragment>
+			<div className='widget-field'>
+				<label htmlFor={id}>{_.startCase(field.name)}:</label>
+				<input id={id} type='text' value={value} step={field.increment || 1} onChange={this.change} onFocus={this.setFocus} onBlur={this.setFocus} onKeyDown={this.keyDown}/>
+				{focused ?
+					<div className='hints' ref={this.hintsRef}>
+						{hints}
+					</div> :
+					null
+				}
+
+			</div>
+		</React.Fragment>;
+	}
+});
+
+module.exports = Field;

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

@@ -0,0 +1,32 @@
+.widget-field {
+  display: inline-block;
+
+  >label {
+    display: inherit;
+    width: 50px;
+    margin: 0 0;
+  }
+
+  >input {
+
+  }
+
+  >.hints {
+    position: relative;
+    left: 50px;
+    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/widget-elements/index.js

@@ -0,0 +1,109 @@
+const React = require('react');
+const _ = require('lodash');
+const Field = require('./field/field.jsx');
+const { PATTERNS } = require('./constants');
+
+const makeTempCSSDoc = (CodeMirror, value)=>CodeMirror.Doc(`.selector {
+${value}
+}`, 'text/css');
+
+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) {
+	const spec = CodeMirror.resolveMode('text/css');
+	const headless = CodeMirror(()=>{});
+
+	// See https://codemirror.net/5/addon/hint/css-hint.js for code reference
+	const getStyleHints = (field, value)=>{
+		const tempDoc = makeTempCSSDoc(CodeMirror, `${field.name}:${value?.replaceAll(`'"`, '') ?? ''}`);
+		headless.swapDoc(tempDoc);
+		const pos = CodeMirror.Pos(1, field.name.length + 1 + value?.length, 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;
+		}
+
+		const 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);
+		}
+		return result;
+	};
+
+	return {
+		cClass : (cm, n, prefix, cClass)=>{
+			const { text } = cm.lineInfo(n);
+			const id = `${_.kebabCase(prefix.replace('{{', ''))}-${_.kebabCase(cClass)}-${n}`;
+			const frameChange = (e)=>{
+				if(!!e.target && 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={`${_.kebabCase(prefix)}-${cClass}-${n}`}>
+				<input type='checkbox' id={id} onChange={frameChange} checked={_.includes(text, `,${cClass}`)}/>
+				<label htmlFor={id}>{_.startCase(cClass)}</label>
+			</React.Fragment>;
+		},
+		field : (cm, n, field)=>{
+			const { text } = cm.lineInfo(n);
+			const pattern = PATTERNS.field[field.type](field.name);
+			const [_, __, value] = text.match(pattern) ?? [];
+			const hints = getStyleHints(field, value);
+
+			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} hints={hints} n={n} onChange={inputChange}/>
+				{!!field.lineBreak ? <br/> : null}
+			</React.Fragment>;
+		}
+	};
+};

shared/naturalcrit/codeEditor/helpers/widgets.js

@@ -0,0 +1,84 @@
+const React = require('react');
+const ReactDOM = require('react-dom');
+const { PATTERNS, FIELD_TYPE } = require('./widget-elements/constants');
+
+module.exports = function(CodeMirror, widgets, cm) {
+	const { cClass, field } = require('./widget-elements')(CodeMirror);
+	const widgetOptions = widgets.map((widget)=>({
+		name         : widget.name,
+		pattern      : PATTERNS.widget[widget.type](widget.name),
+		createWidget : (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 { text } = cm.lineInfo(n);
+			const styles = [...text.matchAll(PATTERNS.collectStyles)].map(([_, style])=>{
+				if(fieldNames.includes(style)) return false;
+				return field(cm, n, {
+					name      : style,
+					type      : FIELD_TYPE.STYLE,
+					increment : 5,
+					lineBreak : true
+				});
+			}).filter((s)=>!!s);
+
+			ReactDOM.render(<React.Fragment>
+				{classes}
+				{fields}
+				{styles}
+			</React.Fragment>, node || parent);
+
+			return node || parent;
+		}
+	}));
+
+	const updateLineWidgets = (n, remove)=>{
+		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);
+			}
+		} else {
+			cm.addLineWidget(n, widgetOption.createWidget(n), {
+				above       : false,
+				coverGutter : false,
+				noHScroll   : true,
+				className   : `snippet-options-widget ${widgetOption.name}-widget`
+			});
+		}
+	};
+
+	return {
+		removeLineWidgets : (widget)=>{
+			cm.removeLineWidget(widget);
+		},
+		updateLineWidgets,
+		updateAllLineWidgets : ()=>{
+			for (let i = 0; i < cm.lineCount(); i++) {
+				const { widgets } = cm.lineInfo(i);
+				if(!!widgets)
+					updateLineWidgets(i);
+			}
+		},
+		updateWidgetGutter : ()=>{
+			cm.operation(()=>{
+				for (let i = 0; i < cm.lineCount(); i++) {
+					const line = cm.getLine(i);
+
+					if(widgetOptions.some((option)=>line.match(option.pattern))) {
+						const optionsMarker = document.createElement('div');
+						optionsMarker.style.color = '#822';
+						optionsMarker.style.cursor = 'pointer';
+						optionsMarker.innerHTML = '●';
+						cm.setGutterMarker(i, 'widget-gutter', optionsMarker);
+					} else {
+						cm.setGutterMarker(i, 'widget-gutter', null);
+					}
+				}
+			});
+		}
+	};
+};