fix a few issues

[Widgets] clean up codeEditor

client/homebrew/editor/editor.jsx

@@ -269,7 +269,7 @@ const Editor = createClass({
 					view={this.state.view}
 					value={this.props.brew.text}
 					onChange={this.props.onTextChange}
-					rerenderParent={this.rerenderParent} />
+					rerenderParent={this.rerenderParent}/>
 			</>;
 		}
 		if(this.isStyle()){

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

@@ -4,58 +4,32 @@ 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 Hints = require('./helpers/widget-elements/hints/hints.jsx');
+const CodeMirror = require('./code-mirror.js');
 
-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('./fold-code');
-	foldCode.registerHomebreweryHelper(CodeMirror);
-}
+const themeWidgets = require('../../../themes/V3/5ePHB/widgets');
 
 const CodeEditor = createClass({
 	displayName     : 'CodeEditor',
+	hintsRef        : React.createRef(),
 	getDefaultProps : function() {
 		return {
 			language      : '',
 			value         : '',
 			wrap          : true,
 			onChange      : ()=>{},
-			enableFolding : true
+			enableFolding : true,
 		};
 	},
 
 	getInitialState : function() {
 		return {
-			docs : {}
+			docs        : {},
+			widgetUtils : {},
+			widgets     : {},
+			hints       : [],
+			hintsField  : undefined,
 		};
 	},
 
@@ -91,6 +65,9 @@ const CodeEditor = createClass({
 		} else {
 			this.codeMirror.setOption('foldOptions', false);
 		}
+
+		this.state.widgetUtils.updateWidgetGutter();
+		this.state.widgetUtils.updateAllLineWidgets();
 	},
 
 	buildEditor : function() {
@@ -155,7 +132,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 +146,69 @@ const CodeEditor = createClass({
 		});
 		closeTag.autoCloseCurlyBraces(CodeMirror, this.codeMirror);
 
+		this.setState({
+			widgetUtils : require('./helpers/widgets')(themeWidgets, this.codeMirror, (hints, field)=>{
+				this.setState({
+					hints,
+					hintsField : field
+				});
+			})
+		});
+
 		// 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.codeMirror.on('change', (cm)=>{
+			this.props.onChange(cm.getValue());
+			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.widgetUtils.removeLineWidget(key, this.state.widgets[key]);
+				}
+			}
+			this.setState({
+				hints      : [],
+				hintsField : undefined
+			});
+			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)=>{
+			// Open line widgets when 'widget-gutter' marker clicked
+			if(this.codeMirror.lineInfo(n).gutterMarkers?.['widget-gutter']) {
+				const { widgets } = this.codeMirror.lineInfo(n);
+				if(!widgets) {
+					const widget = this.state.widgetUtils.updateLineWidgets(n);
+					if(widget) {
+						this.setState({
+							widgets : { ...this.state.widgets, [n]: widget }
+						});
+					}
+				} else {
+					for (const widget of widgets) {
+						this.state.widgetUtils.removeLineWidget(n, widget);
+					}
+					this.setState({
+						hints      : [],
+						hintsField : undefined
+					});
+				}
+			}
+		});
 	},
 
 	indent : function () {
@@ -403,10 +440,19 @@ const CodeEditor = createClass({
 			}
 		};
 	},
+	keyDown : function(e) {
+		if(this.hintsRef.current) {
+			this.hintsRef.current.keyDown(e);
+		}
+	},
 	//----------------------//
 
 	render : function(){
-		return <div className='codeEditor' ref='editor' style={this.props.style}/>;
+		const { hints, hintsField } = this.state;
+		return <React.Fragment>
+			<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/codeEditor.less

@@ -2,6 +2,8 @@
 @import (less) 'codemirror/addon/fold/foldgutter.css';
 @import (less) 'codemirror/addon/search/matchesonscrollbar.css';
 @import (less) 'codemirror/addon/dialog/dialog.css';
+@import (less) 'codemirror/addon/hint/show-hint.css';
+@import 'naturalcrit/styles/colors.less';
 
 @keyframes sourceMoveAnimation {
 	50%  {background-color: red;   color: white;}
@@ -14,7 +16,7 @@
     text-shadow: none;
     font-weight: 600;
     color: grey;
-}
+  }
 
   .sourceMoveFlash .CodeMirror-line{
     animation-name: sourceMoveAnimation;
@@ -30,4 +32,51 @@
   //    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAQAgMAAABW5NbuAAAACVBMVEVHcEwAAAAAAAAWawmTAAAAA3RSTlMAPBJ6PMxpAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAFUlEQVQI12NgwACcCQysASAEZGAAACMuAX06aCQUAAAAAElFTkSuQmCC) no-repeat right;
   //  }
   //}
+
+  .widget-gutter {
+    width: .7em;
+  }
+
+  .snippet-options-widget {
+    padding: 2px 0;
+
+    >div {
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    * {
+      margin: 0 2px 2px 2px;
+    }
+
+    input {
+      max-width: 10vw;
+    }
+  }
+
+  .widget-field {
+    border: 2px solid #ddd;
+
+    &.default {
+      background-color: @purple;
+      border: 2px solid @purple;
+      color: white;
+
+      >input {
+        background-color: @purple;
+        color: white;
+      }
+    }
+
+    &.suggested {
+      background-color: #ddd;
+      border: 2px dashed grey;
+      color: grey;
+
+      >input {
+        background-color: #ddd;
+        color: black;
+      }
+    }
+  }
 }

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

@@ -0,0 +1,48 @@
+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,
+			default : false
+		};
+	},
+
+	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, def } = this.props;
+		const { text } = cm.lineInfo(n);
+		const id = [prefix, value, n].join('-');
+		let className = 'widget-field widget-checkbox';
+		if(def) {
+			className += ' default';
+		}
+		return <React.Fragment>
+			<div className={className}>
+				<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/color-selector/color-selector.jsx

@@ -0,0 +1,95 @@
+require('./color-selector.less');
+const React = require('react');
+const createClass = require('create-react-class');
+const { PATTERNS, STYLE_FN, SNIPPET_TYPE } = require('../constants');
+const CodeMirror = require('../../../code-mirror');
+const debounce = require('lodash.debounce');
+
+const ColorSelector = createClass({
+	getDefaultProps : function() {
+		return {
+			field : {},
+			cm    : {},
+			n     : undefined,
+			text  : '',
+			def   : false
+		};
+	},
+	getInitialState : function() {
+		return {
+			value : ''
+		};
+	},
+	componentDidMount : function() {
+		const { field, text } = this.props;
+		const pattern = PATTERNS.field[field.type](field.name);
+		const [_, __, value] = text.match(pattern) ?? [];
+		this.setState({
+			value : value,
+		});
+	},
+	componentDidUpdate({ text }) {
+		const { field } = this.props;
+		if(this.props.text !== text) {
+			const pattern = PATTERNS.field[field.type](field.name);
+			const [_, __, value] = this.props.text.match(pattern) ?? [];
+			this.setState({
+				value,
+			});
+		}
+	},
+	onChange : function(e) {
+		const { cm, text, field, n, snippetType } = 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}`);
+		while (index !== -1 && text[index - 1] === '-') {
+			index = text.indexOf(`${label}:${current}`, index + 1);
+		}
+		let value = e.target.value;
+		if(index === -1) {
+			if(snippetType === SNIPPET_TYPE.INLINE) {
+				index = text.indexOf('}');
+			}
+			index = index === -1 ? text.length : index;
+			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,
+		});
+	},
+	debounce         : debounce((self, e)=>self.onChange(e), 300),
+	onChangeDebounce : function(e) {
+		this.setState({
+			value : e.target.value,
+		});
+		this.debounce(this, e);
+	},
+	render : function() {
+		const { field, n, text, def } = this.props;
+		const { value } = this.state;
+		const style = STYLE_FN(value);
+		const id = `${field?.name}-${n}`;
+		const pattern = PATTERNS.field[field.type](field.name);
+		const [_, label, __] = text.match(pattern) ?? [null, undefined, ''];
+		let className = 'widget-field color-selector';
+		if(!label) {
+			className += ' suggested';
+		}
+		if(def) {
+			className += ' default';
+		}
+		return <React.Fragment>
+			<div className={className}>
+				<label htmlFor={id}>{field.name}:</label>
+				<input className='color' type='color' value={value} onChange={this.onChangeDebounce}/>
+				<input id={id} className='text' type='text' style={style} value={value} onChange={this.onChange}/>
+			</div>
+		</React.Fragment>;
+	}
+});
+
+module.exports = ColorSelector;

shared/naturalcrit/codeEditor/helpers/widget-elements/color-selector/color-selector.less

@@ -0,0 +1,8 @@
+.color-selector {
+  .color {
+    height: 17px;
+    width: 13px;
+    padding: 0;
+    margin: 0;
+  }
+}

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

@@ -0,0 +1,50 @@
+const _ = require('lodash');
+
+export const UNITS = ['cm', 'mm', 'in', 'px', 'pt', 'pc', 'em', 'ex', 'ch', 'rem', 'vw', 'vh', 'vmin', 'vmax', '%'];
+
+export const HINT_TYPE = {
+	VALUE         : 0,
+	NUMBER_SUFFIX : 1
+};
+
+export const SNIPPET_TYPE = {
+	BLOCK    : 0,
+	INLINE   : 1,
+	INJECTOR : 2,
+};
+
+export const FIELD_TYPE = {
+	TEXT           : 0,
+	CHECKBOX       : 1,
+	IMAGE_SELECTOR : 2,
+	COLOR_SELECTOR : 3,
+};
+
+const textField = (name)=>new RegExp(`[{,;](${name}):([^};,"\\(]*\\((?!,)[^};"\\)]*\\)|"[^},;"]*"|[^},;]*)`);
+export const PATTERNS = {
+	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.TEXT]           : textField,
+		[FIELD_TYPE.IMAGE_SELECTOR] : (name)=>new RegExp(`{{(${name})(\\d*)`),
+		[FIELD_TYPE.COLOR_SELECTOR] : textField
+	},
+	collectStyles : new RegExp(`(?:([a-zA-Z-]+):(?!\\/))+`, 'g'),
+};
+
+export const NUMBER_PATTERN = new RegExp(`([^-\\d]*)([-\\d]+)(${UNITS.join('|')})?(.*)`);
+
+export const fourDigitNumberFromValue = (value)=>typeof value === 'number' ? (()=>{
+	const str = String(value);
+	return _.range(0, 4 - str.length).map(()=>'0').join('') + str;
+})() : value;
+
+const DEFAULT_WIDTH = '30px';
+
+export const STYLE_FN = (value, extras = {})=>({
+	width : `calc(${value?.length ?? 0}ch + ${value?.length ? `${DEFAULT_WIDTH} / 2` : DEFAULT_WIDTH})`,
+	...extras
+});

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

@@ -0,0 +1,128 @@
+const React = require('react');
+const createClass = require('create-react-class');
+const { NUMBER_PATTERN } = require('../constants');
+
+const Hints = createClass({
+	hintsRef      : React.createRef(),
+	activeHintRef : React.createRef(),
+
+	getDefaultProps : function() {
+		return {
+			hints : [],
+			field : undefined,
+		};
+	},
+
+	getInitialState : function() {
+		return {
+			activeHint : 0
+		};
+	},
+
+	componentDidUpdate : function({ hints }) {
+		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() {},
+
+	keyDown : function(e) {
+		const { code } = e;
+		const { activeHint } = this.state;
+		const { hints, field } = this.props;
+		const match = field?.state?.value?.match(NUMBER_PATTERN);
+		if(code === 'ArrowDown') {
+			e.preventDefault();
+			if(!match || !match?.at(3)) {
+				this.setState({
+					activeHint : activeHint === hints.length - 1 ? 0 : activeHint + 1
+				});
+			}
+		} else if(code === 'ArrowUp') {
+			e.preventDefault();
+			if(!match || !match?.at(3)) {
+				this.setState({
+					activeHint : activeHint === 0 ? hints.length - 1 : activeHint - 1
+				});
+			}
+		} else if(code === 'Enter') {
+			e.preventDefault();
+			if(!match || !match?.at(3)) {
+				field?.hintSelected(hints[activeHint]);
+				this.setState({
+					activeHint : 0
+				});
+			}
+		}
+	},
+
+	render : function() {
+		const { activeHint } = this.state;
+		const { hints, field } = this.props;
+		if(!field) return null;
+		const bounds = field.fieldRef[field.state.id]?.current?.getBoundingClientRect();
+		if(!bounds) return null;
+
+		const hintElements = hints
+			.filter((h)=>h.hint !== field.state.value)
+			.map((h, i)=>{
+				let className = 'CodeMirror-hint';
+				if(activeHint === i) {
+					className += ' CodeMirror-hint-active';
+					return <li key={i}
+						role={'option'}
+						className={className}
+						onMouseDown={(e)=>field.hintSelected(h, e)}
+						ref={this.activeHintRef}>
+						{h.hint}
+					</li>;
+				}
+				return <li key={i}
+					role={'option'}
+					className={className}
+					onMouseDown={(e)=>field.hintSelected(h, e)}>
+					{h.hint}
+				</li>;
+			});
+
+		let style = {
+			display : 'none'
+		};
+		if(hintElements.length > 0) {
+			style = {
+				...style,
+				display : 'block',
+				top     : `${bounds.top - 5}px`,
+				left    : `${bounds.left}px`
+			};
+		}
+		return <React.Fragment>
+			<ul role={'listbox'}
+				id={'hints'}
+				aria-expanded={true}
+				className={'CodeMirror-hints default'}
+				style={style}
+				ref={this.hintsRef}>
+				{hintElements}
+			</ul>
+		</React.Fragment>;
+	}
+});
+
+module.exports = Hints;

shared/naturalcrit/codeEditor/helpers/widget-elements/image-selector/image-selector.jsx

@@ -0,0 +1,92 @@
+require('./image-selector.less');
+const React = require('react');
+const createClass = require('create-react-class');
+const { Modal, modalHelpers } = require('../modal/modal.jsx');
+const { PATTERNS } = require('../constants.js');
+const CodeMirror = require('../../../code-mirror.js');
+const _ = require('lodash');
+
+const ImageSelector = createClass({
+	modalRef : React.createRef(),
+
+	getDefaultProps : function () {
+		return {
+			field : {},
+			cm    : {},
+			n     : undefined
+		};
+	},
+
+	getInitialState : function() {
+		return {
+			selected : undefined,
+		};
+	},
+
+	componentDidMount : function() {
+		modalHelpers.mount(this);
+	},
+
+	componentDidUpdate : function() {
+		const { name, preview, values } = this.props.field;
+		const { selected } = this.state;
+
+		const images = values.map((v, i)=>{
+			const className = String(selected) === String(v) ? 'selected' : '';
+			return <img key={i} className={className} src={preview(v)} alt={`${name} image ${v}`} onClick={()=>this.select(v)}/>;
+		});
+
+		this.state.modalRoot?.render(<Modal ref={this.modalRef} header={_.startCase(name)} save={this.save}>
+			<div className={'images'}>
+				{images}
+			</div>
+		</Modal>);
+	},
+
+	componentWillUnmount : function() {
+		modalHelpers.unmount(this);
+	},
+
+	save : function() {
+		const { cm, field, n } = this.props;
+		const { text } = cm.lineInfo(n);
+		const pattern = PATTERNS.field[field.type](field.name);
+		const [fullmatch, label, current] = text.match(pattern);
+		if(!fullmatch) {
+			console.warn('something is wrong... please report this warning with a screenshot');
+			return;
+		}
+		const currentText = `${label}${current ?? ''}`;
+		const index = 2;
+		const value = label + this.state.selected;
+		cm.replaceRange(value, CodeMirror.Pos(n, index), CodeMirror.Pos(n, index + currentText.length), '+insert');
+	},
+
+	select : function(value) {
+		this.setState({
+			selected : value
+		});
+	},
+
+	showModal : function() {
+		const { cm, field, n } = this.props;
+		const { text } = cm.lineInfo(n);
+		const pattern = PATTERNS.field[field.type](field.name);
+		const [fullmatch, _, current] = text.match(pattern);
+		if(!fullmatch) {
+			return;
+		}
+		this.setState({
+			selected : current
+		});
+		this.modalRef.current.setVisible(true);
+	},
+
+	render : function () {
+		return <React.Fragment>
+			<button onClick={this.showModal}>Select Image</button>
+		</React.Fragment>;
+	}
+});
+
+module.exports = ImageSelector;

shared/naturalcrit/codeEditor/helpers/widget-elements/image-selector/image-selector.less

@@ -0,0 +1,23 @@
+.images {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  max-height: 60vh;
+  overflow-y: scroll;
+
+  img {
+    flex: 0 0 auto;
+    max-width: 10vw;
+    max-height: 20vh;
+    border-radius: 10px;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, .1);
+    }
+
+    &.selected {
+      background-color: rgba(0, 0, 0, .175);
+    }
+  }
+}
+

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

@@ -0,0 +1,11 @@
+const Text = require('./text/text.jsx');
+const Checkbox = require('./checkbox/checkbox.jsx');
+const ImageSelector = require('./image-selector/image-selector.jsx');
+const ColorSelector = require('./color-selector/color-selector.jsx');
+
+module.exports = {
+	Text          : Text,
+	Checkbox      : Checkbox,
+	ImageSelector : ImageSelector,
+	ColorSelector : ColorSelector,
+};

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

@@ -0,0 +1,75 @@
+require('./modal.less');
+const React = require('react');
+const ReactDOMClient = require('react-dom/client');
+const createClass = require('create-react-class');
+
+const Modal = createClass({
+	getDefaultProps : function () {
+		return {
+			header : '',
+			save   : ()=>{},
+		};
+	},
+
+	getInitialState : function() {
+		return {
+			visible : false,
+		};
+	},
+
+	setVisible : function(visible) {
+		this.setState({
+			visible
+		});
+	},
+
+	save : function() {
+		this.props.save();
+		this.setVisible(false);
+	},
+
+	render : function () {
+		const { children, header } = this.props;
+		const { visible } = this.state;
+		return <React.Fragment>
+			{visible ? <div className={'bg-cover'}>
+				<div className={'modal'}>
+					<h1>{header}</h1>
+					<hr/>
+					{children}
+					<div className={'action-row'}>
+						<button id={'save'} onClick={()=>this.save()}>Save</button>
+						<button id={'cancel'} onClick={()=>this.setVisible(false)}>Cancel</button>
+					</div>
+				</div>
+			</div> : null}
+		</React.Fragment>;
+	}
+});
+
+module.exports = {
+	/*
+	* Requirements:
+	* - modalRef member variable
+	* - should be re-rendered via `this.state.modalRoot?.render` in `componentDidUpdate`
+	*/
+	Modal,
+	modalHelpers : {
+		// should be called in `componentDidMount`
+		// `self` should be passed as the component instance (`this`)
+		mount : (self)=>{
+			const el = document.createElement('div');
+			const root = ReactDOMClient.createRoot(el);
+			document.querySelector('body').append(el);
+			self.setState({
+				el,
+				modalRoot : root
+			});
+		},
+		// should be called in `componentWillUnmount`
+		// `self` should be passed as the component instance (`this`)
+		unmount : (self)=>{
+			self.state.el.remove();
+		}
+	}
+};

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

@@ -0,0 +1,58 @@
+@import 'naturalcrit/styles/colors.less';
+
+.bg-cover {
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  z-index: 10000000;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .5);
+}
+
+.modal {
+  position: absolute;
+  top: 10vh;
+  left: 25vw;
+  width: 50vw;
+  min-height: 50vh;
+  max-height: 80vh;
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 5px 5px 50px black;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  h1 {
+    margin-top: 5px;
+    margin-left: 5px;
+    font-size: 2em;
+  }
+
+  >* {
+    flex: 0 0 auto;
+  }
+
+  .action-row {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: left;
+
+    >* {
+      flex: 0 0 auto;
+      margin-left: 5px;
+    }
+  }
+
+  button {
+    &#cancel {
+      background-color: @redLight;
+
+      &:hover {
+        background-color: @red;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,165 @@
+require('./text.less');
+const React = require('react');
+const createClass = require('create-react-class');
+const _ = require('lodash');
+const { NUMBER_PATTERN, HINT_TYPE, PATTERNS, STYLE_FN, FIELD_TYPE, SNIPPET_TYPE } = require('../constants');
+const CodeMirror = require('../../../code-mirror.js');
+
+const Text = createClass({
+	fieldRef : {},
+
+	getDefaultProps : function() {
+		return {
+			field         : {},
+			text          : '',
+			n             : 0,
+			setHints      : ()=>{},
+			onChange      : ()=>{},
+			getStyleHints : ()=>{},
+			def           : false,
+			snippetType   : -1
+		};
+	},
+
+	getInitialState : function() {
+		return {
+			value : '',
+			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,
+				id    : `${field?.name}-${n}`
+			});
+		}
+
+		if(this.state.value !== value) {
+			const { field } = this.props;
+			this.props.setHints(this, field.hints ? this.props.getStyleHints(field, 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,
+			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 && 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 && 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, snippetType } = 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) {
+			if(snippetType === SNIPPET_TYPE.INLINE) {
+				index = text.indexOf('}');
+			}
+			index = index === -1 ? text.length : index;
+			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,
+		});
+	},
+	render : function() {
+		const { value, id } = this.state;
+		const { field, text, def } = this.props;
+		const style = STYLE_FN(value);
+		const pattern = PATTERNS.field[field.type](field.name);
+		const [_, label, __] = text.match(pattern) ?? [null, undefined, ''];
+		let className = 'widget-field';
+		if(!label) {
+			className += ' suggested';
+		}
+		if(def) {
+			className += ' default';
+		}
+		return <React.Fragment>
+			<div className={className}>
+				<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

@@ -0,0 +1,188 @@
+const React = require('react');
+const ReactDOMClient = require('react-dom/client');
+const { PATTERNS, FIELD_TYPE, HINT_TYPE, UNITS } = require('./widget-elements/constants');
+require('./widget-elements/hints/hints.jsx');
+const { Text, Checkbox, ImageSelector, ColorSelector } = require('./widget-elements');
+const CodeMirror = require('../code-mirror.js');
+
+// 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 roots = {};
+	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 widgetOptions = widgets.map((widget)=>({
+		name         : widget.name,
+		pattern      : PATTERNS.snippet[widget.type](widget.name),
+		renderWidget : (n, node)=>{
+			roots[n] = roots[n] ?? {};
+			const parent = document.createElement('div');
+			const id = `${widget.name}-${n}`;
+			parent.id = id;
+
+			const textFieldNames = (widget.fields || []).filter((f)=>f.type === FIELD_TYPE.TEXT || f.type === FIELD_TYPE.COLOR_SELECTOR).map((f)=>f.name);
+			const { text } = cm.lineInfo(n);
+
+			const fields = (widget.fields || []).map((field)=>{
+				const key = genKey(widget.name, n, field.name);
+				if(field.type === FIELD_TYPE.CHECKBOX) {
+					return <Checkbox key={key} cm={cm} n={n} prefix={widget.name} value={field.name} def={true}/>;
+				} else if(field.type === FIELD_TYPE.TEXT) {
+					return <Text key={key} field={field} cm={cm} n={n} text={text} setHints={(f, h)=>setHints(h, f)} getStyleHints={getStyleHints} def={true} snippetType={widget.type}/>;
+				} else if(field.type === FIELD_TYPE.IMAGE_SELECTOR) {
+					return <ImageSelector key={key} field={field} cm={cm} n={n}/>;
+				} else if(field.type === FIELD_TYPE.COLOR_SELECTOR) {
+					return <ColorSelector key={key} field={field} cm={cm} n={n} text={text} def={true} snippetType={widget.type}/>;
+				} else {
+					return null;
+				}
+			}).filter(Boolean);
+
+			const styles = [...text.matchAll(PATTERNS.collectStyles)].map(([_, style])=>{
+				if(textFieldNames.includes(style)) return false;
+				const field = {
+					name      : style,
+					type      : FIELD_TYPE.TEXT,
+					increment : 5,
+					hints     : true,
+				};
+				const key = genKey(widget.name, n, style);
+				if(style.includes('color')) {
+					return <ColorSelector key={key} field={field} cm={cm} n={n} text={text} snippetType={widget.type}/>;
+				}
+				return <Text key={key} field={field} cm={cm} n={n} text={text} setHints={(f, h)=>setHints(h, f)} getStyleHints={getStyleHints} snippetType={widget.type}/>;
+			}).filter(Boolean);
+
+			const root = roots[n][id] ?? ReactDOMClient.createRoot(node || parent);
+			root.render(<React.Fragment>
+				{fields}
+				{styles}
+			</React.Fragment>);
+			roots[n][id] = root;
+
+			return node || parent;
+		}
+	}));
+
+	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.renderWidget(n, widget.node);
+			}
+		} else {
+			return cm.addLineWidget(n, widgetOption.renderWidget(n), {
+				above       : false,
+				coverGutter : false,
+				noHScroll   : true,
+				className   : `snippet-options-widget ${widgetOption.name}-widget ${widgetOption.name}-widget-${n}`
+			});
+		}
+	};
+
+	return {
+		roots,
+		removeLineWidget : (n, widget)=>{
+			roots[n][widget.node.id]?.unmount();
+			delete roots[n][widget.node.id];
+			widget?.clear();
+		},
+		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 { text, widgets } = cm.lineInfo(i);
+
+					if(widgetOptions.some((option)=>text.match(option.pattern))) {
+						if(widgets) {
+							continue;
+						}
+						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);
+					}
+				}
+			});
+		}
+	};
+};

themes/V3/5ePHB/widgets.js

@@ -0,0 +1,154 @@
+const _ = require('lodash');
+const { SNIPPET_TYPE, FIELD_TYPE, fourDigitNumberFromValue } = require('../../../shared/naturalcrit/codeEditor/helpers/widget-elements/constants');
+
+module.exports = [{
+	name   : 'monster',
+	type   : SNIPPET_TYPE.BLOCK,
+	fields : [{
+		name : 'frame',
+		type : FIELD_TYPE.CHECKBOX
+	}, {
+		name : 'wide',
+		type : FIELD_TYPE.CHECKBOX
+	}]
+}, {
+	name   : 'classTable',
+	type   : SNIPPET_TYPE.BLOCK,
+	fields : [{
+		name : 'frame',
+		type : FIELD_TYPE.CHECKBOX
+	}, {
+		name : 'decoration',
+		type : FIELD_TYPE.CHECKBOX
+	}, {
+		name : 'wide',
+		type : FIELD_TYPE.CHECKBOX
+	}]
+}, {
+	name   : 'runeTable',
+	type   : SNIPPET_TYPE.BLOCK,
+	fields : [{
+		name : 'frame',
+		type : FIELD_TYPE.CHECKBOX
+	}, {
+		name : 'wide',
+		type : FIELD_TYPE.CHECKBOX
+	}, {
+		name : 'font-family',
+		type : FIELD_TYPE.TEXT
+	}]
+}, {
+	name   : 'index',
+	type   : SNIPPET_TYPE.BLOCK,
+	fields : [{
+		name : 'wide',
+		type : FIELD_TYPE.CHECKBOX
+	}, {
+		name      : 'columns',
+		type      : FIELD_TYPE.TEXT,
+		increment : 1
+	}]
+}, {
+	name   : 'image',
+	type   : SNIPPET_TYPE.INJECTOR,
+	fields : []
+}, {
+	name   : 'artist',
+	type   : SNIPPET_TYPE.BLOCK,
+	fields : [{
+		name      : 'top',
+		type      : FIELD_TYPE.TEXT,
+		increment : 5,
+		hints     : true
+	}]
+}, {
+	name   : 'watercolor',
+	type   : SNIPPET_TYPE.INLINE,
+	fields : [{
+		name    : 'watercolor',
+		type    : FIELD_TYPE.IMAGE_SELECTOR,
+		preview : (value)=>`/assets/watercolor/watercolor${value}.png`,
+		values  : _.range(1, 13)
+	}, {
+		name      : 'top',
+		type      : FIELD_TYPE.TEXT,
+		increment : 5,
+		hints     : true
+	}, {
+		name      : 'left',
+		type      : FIELD_TYPE.TEXT,
+		increment : 5,
+		hints     : true
+	}, {
+		name      : 'width',
+		type      : FIELD_TYPE.TEXT,
+		increment : 5,
+		hints     : true
+	}, {
+		name      : 'opacity',
+		type      : FIELD_TYPE.TEXT,
+		increment : 5
+	}, {
+		name : 'background-color',
+		type : FIELD_TYPE.COLOR_SELECTOR,
+	}]
+}, {
+	name   : 'imageMaskCenter',
+	type   : SNIPPET_TYPE.INLINE,
+	fields : [{
+		name    : 'imageMaskCenter',
+		type    : FIELD_TYPE.IMAGE_SELECTOR,
+		preview : (value)=>`/assets/waterColorMasks/center/${fourDigitNumberFromValue(value)}.webp`,
+		values  : _.range(1, 17)
+	}, {
+		name      : '--offsetX',
+		type      : FIELD_TYPE.TEXT,
+		increment : 5,
+	}, {
+		name      : '--offsetY',
+		type      : FIELD_TYPE.TEXT,
+		increment : 5,
+	}, {
+		name      : '--rotation',
+		type      : FIELD_TYPE.TEXT,
+		increment : 5,
+	}]
+}, {
+	name   : 'imageMaskEdge',
+	type   : SNIPPET_TYPE.INLINE,
+	fields : [{
+		name    : 'imageMaskEdge',
+		type    : FIELD_TYPE.IMAGE_SELECTOR,
+		preview : (value)=>`/assets/waterColorMasks/edge/${fourDigitNumberFromValue(value)}.webp`,
+		values  : _.range(1, 9)
+	}, {
+		name      : '--offset',
+		type      : FIELD_TYPE.TEXT,
+		increment : 5,
+	}, {
+		name      : '--rotation',
+		type      : FIELD_TYPE.TEXT,
+		increment : 5,
+	}]
+}, {
+	name   : 'imageMaskCorner',
+	type   : SNIPPET_TYPE.INLINE,
+	fields : [{
+		name    : 'imageMaskCorner',
+		type    : FIELD_TYPE.IMAGE_SELECTOR,
+		preview : (value)=>`/assets/waterColorMasks/corner/${fourDigitNumberFromValue(value)}.webp`,
+		values  : _.range(1, 38)
+	}, {
+		name      : '--offsetX',
+		type      : FIELD_TYPE.TEXT,
+		increment : 5,
+	}, {
+		name      : '--offsetY',
+		type      : FIELD_TYPE.TEXT,
+		increment : 5,
+	}, {
+		name      : '--rotation',
+		type      : FIELD_TYPE.TEXT,
+		increment : 5,
+	}]
+}];