update widgets - add hints component and adjust autocomplete logic

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/codeEditor.jsx

@@ -6,6 +6,7 @@ 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'){
@@ -42,34 +43,11 @@ if(typeof navigator !== 'undefined'){
 	foldCode.registerHomebreweryHelper(CodeMirror);
 }
 
-const themeWidgets = [{
+const themeWidgets = require('../../../themes/V3/5ePHB/widgets');
-	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',
+	hintsRef        : React.createRef(),
 	getDefaultProps : function() {
 		return {
 			language      : '',
@@ -77,7 +55,6 @@ const CodeEditor = createClass({
 			wrap          : true,
 			onChange      : ()=>{},
 			enableFolding : true,
-			theme         : null
 		};
 	},
 
@@ -85,7 +62,10 @@ const CodeEditor = createClass({
 		return {
 			docs          : {},
 			widgetUtils   : {},
-			focusedWidget : null
+			widgets       : [],
+			focusedWidget : null,
+			hints         : [],
+			hintsField    : undefined,
 		};
 	},
 
@@ -203,7 +183,12 @@ const CodeEditor = createClass({
 		closeTag.autoCloseCurlyBraces(CodeMirror, this.codeMirror);
 
 		this.setState({
-			widgetUtils : require('./helpers/widgets')(CodeMirror, themeWidgets, this.codeMirror)
+			widgetUtils : require('./helpers/widgets')(CodeMirror, 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.
@@ -222,7 +207,12 @@ const CodeEditor = createClass({
 			if(!!gutterMarkers && !!gutterMarkers['widget-gutter']) {
 				const { widgets } = this.codeMirror.lineInfo(n);
 				if(!widgets) {
-					this.state.widgetUtils.updateLineWidgets(n);
+					const widget = this.state.widgetUtils.updateLineWidgets(n);
+					if(widget) {
+						this.setState({
+							widgets : [...this.state.widgets, widget]
+						});
+					}
 				} else {
 					this.codeMirror.operation(()=>{
 						for (const widget of widgets) {
@@ -463,10 +453,38 @@ const CodeEditor = createClass({
 			}
 		};
 	},
+	handleMouseDown : function(e) {
+		let target = e.target;
+		let found = false;
+		while (target.parentElement) {
+			target = target.parentElement;
+			if(target.classList.contains('CodeMirror-linewidget')) {
+				found = true;
+				break;
+			}
+		}
+		if(!found) {
+			for (const widget of this.state.widgets) {
+				this.state.widgetUtils.removeLineWidgets(widget);
+			}
+			this.setState({
+				widgets : []
+			});
+		}
+	},
+	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} onMouseDown={this.handleMouseDown} onKeyDown={this.keyDown}/>
+			<Hints ref={this.hintsRef} hints={hints} field={hintsField}/>
+		</React.Fragment>;
 	}
 });
 

shared/naturalcrit/codeEditor/codeEditor.less

@@ -2,6 +2,7 @@
 @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';
 
 @keyframes sourceMoveAnimation {
 	50%  {background-color: red;   color: white;}
@@ -14,7 +15,7 @@
     text-shadow: none;
     font-weight: 600;
     color: grey;
-}
+  }
 
   .sourceMoveFlash .CodeMirror-line{
     animation-name: sourceMoveAnimation;
@@ -36,11 +37,15 @@
   }
 
   .snippet-options-widget {
-    background-color: lightblue;
+    padding: 2px 0;
-    padding: 2px 0 2px 0;
+
+    >div {
+      display: flex;
+      flex-wrap: wrap;
+    }
 
     * {
-      margin: 0 2px 0 2px;
+      margin: 0 2px;
     }
 
     input {

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

@@ -1,5 +1,10 @@
 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 WIDGET_TYPE = {
 	SNIPPET        : 0,
 	INLINE_SNIPPET : 1,
@@ -17,7 +22,9 @@ export const PATTERNS = {
 		[WIDGET_TYPE.IMAGE]          : ()=>new RegExp(`^\\!\\[(?:[a-zA-Z -]+)?\\]\\(.*\\).*{[a-zA-Z0-9:, "'-]+}$`),
 	},
 	field : {
-		[FIELD_TYPE.STYLE] : (name)=>new RegExp(`[{,;](${name}):((?:"[^},;"]*")|(?:[^},;]*))`),
+		[FIELD_TYPE.STYLE] : (name)=>new RegExp(`[{,;](${name}):("[^},;"]*"|[^},;]*)`),
 	},
-	collectStyles : new RegExp(`(?:[{,;]([a-zA-Z-]+):)+`, 'g'),
+	collectStyles : new RegExp(`(?:([a-zA-Z-]+):)+`, 'g'),
-};
+};
+
+export const NUMBER_PATTERN = new RegExp(`([^-\\d]*)([-\\d]+)(${UNITS.join('|')})?(.*)`);

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

@@ -1,151 +1,140 @@
 require('./field.less');
 const React = require('react');
+const ReactDOM = require('react-dom');
 const createClass = require('create-react-class');
 const _ = require('lodash');
-const { UNITS } = require('../constants');
+const { NUMBER_PATTERN, HINT_TYPE } = require('../constants');
+
+const DEFAULT_WIDTH = '30px';
+
+const STYLE_FN = (value)=>({
+	width : `calc(${value?.length ?? 0}ch + ${value?.length ? `${DEFAULT_WIDTH} / 2` : DEFAULT_WIDTH})`
+});
 
 const Field = createClass({
-	hintsRef      : React.createRef(),
+	fieldRef : {},
-	activeHintRef : React.createRef(),
 
 	getDefaultProps : function() {
 		return {
-			field    : {},
+			field         : {},
-			n        : 0,
+			n             : 0,
-			value    : '',
+			value         : '',
-			hints    : [],
+			setHints      : ()=>{},
-			onChange : ()=>{}
+			onChange      : ()=>{},
+			getStyleHints : ()=>{}
 		};
 	},
 
 	getInitialState : function() {
 		return {
-			value      : '',
+			value : '',
-			focused    : false,
+			style : STYLE_FN(),
-			activeHint : null
+			id    : ''
 		};
 	},
 
-	componentDidUpdate : function({ hints }) {
+	componentDidUpdate : function(_, { value }) {
 		if(this.state.value !== this.props.value) {
 			this.setState({
-				value : this.props.value
+				value : this.props.value,
-			});
+				style : STYLE_FN(this.props.value),
-		}
+				id    : `${this.props.field?.name}-${this.props.n}`
-
-		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) {
+		if(this.state.value !== value) {
-			const offset = this.activeHintRef.current.offsetTop;
+			this.props.setHints(this, this.props.getStyleHints(this.props.field, this.state.value));
-			const scrollTop = this.hintsRef.current.scrollTop;
-			if(scrollTop + 50 < offset || scrollTop + 50 > offset) {
-				this.hintsRef.current.scrollTo({
-					top      : offset - 50,
-					behavior : 'smooth'
-				});
-			}
 		}
 	},
 
 	componentDidMount : function() {
+		const id = `${this.props.field?.name}-${this.props.n}`;
 		this.setState({
-			value : this.props.value
+			value : this.props.value,
+			style : STYLE_FN(this.props.value),
+			id
 		});
+		this.fieldRef[id] = React.createRef();
+	},
+
+	componentWillUnmount : function() {
+		this.fieldRef = undefined;
+		this.fieldRef = {};
 	},
 
 	change : function(e) {
 		this.props.onChange(e);
 		this.setState({
-			value : e.target.value
+			value : e.target.value,
+			style : STYLE_FN(e.target.value)
 		});
 	},
 
-	setFocus : function({ type }) {
+	setFocus : function(e) {
-		if(type === 'focus') {
+		const { type } = e;
-			this.setState({ focused: true, activeHint: this.props.hints.length > 0 ? 0 : null });
+		this.props.setHints(this, type === 'focus' ? this.props.getStyleHints(this.props.field, this.state.value) : []);
-		} else if(type === 'blur'){
-			this.setState({ focused: false, activeHint: null });
-		}
 	},
 
+	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.change({
+			target : {
+				value
+			}
+		});
+	},
 	keyDown : function(e) {
 		const { code } = e;
-		const { value, activeHint } = this.state;
+		const { field, value } = this.props;
-		const { field, hints } = this.props;
+		const match = value.match(NUMBER_PATTERN);
-		const numberPattern = new RegExp(`([^-\\d]*)([-\\d]+)(${UNITS.join('|')})(.*)`);
-		const match = value.match(numberPattern);
 		if(code === 'ArrowDown') {
-			e.preventDefault();
+			if(match && match[3]) {
-			if(match) {
+				e.preventDefault();
 				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 && match[3]) {
-			if(match) {
+				e.preventDefault();
 				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 { value, id } = this.state;
+		const { field } = this.props;
 
-	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}/>
+				<input id={id} type='text' value={value}
-				{focused ?
+					   step={field.increment || 1}
-					<div className='hints' ref={this.hintsRef}>
+					   style={this.state.style}
-						{hints}
+					   ref={this.fieldRef[id]}
-					</div> :
+					   onChange={this.change}
-					null
+					   onFocus={this.setFocus}
-				}
+					   onBlur={this.setFocus}
-
+					   onKeyDown={this.keyDown}/>
 			</div>
 		</React.Fragment>;
 	}

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

@@ -1,19 +1,24 @@
 .widget-field {
   display: inline-block;
+  flex: 0 0 auto;
+  background-color: #22d4f6;
+  border-radius: 10px;
+  padding: 4px 2px;
 
   >label {
-    display: inherit;
+    display: inline;
     width: 50px;
     margin: 0 0;
   }
 
   >input {
-
+    background-color: #22d4f6;
+    border: none;
   }
 
   >.hints {
     position: relative;
-    left: 50px;
+    left: 30px;
     max-height: 100px;
     overflow-y: scroll;
     background-color: white;

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

@@ -0,0 +1,113 @@
+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({
+	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) {
+				this.setState({
+					activeHint : activeHint === hints.length - 1 ? 0 : activeHint + 1
+				});
+			}
+		} else if(code === 'ArrowUp') {
+			e.preventDefault();
+			if(!match) {
+				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();
+
+		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} className={className} onMouseDown={(e)=>field.hintSelected(h, e)}>{h.hint}</li>;
+			});
+
+		let style = {
+			display : 'none'
+		};
+		if(hintElements.length > 1) {
+			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} onKeyDown={this.keyDown}>
+				{hintElements}
+			</ul>
+		</React.Fragment>;
+	}
+});
+
+module.exports = Hints;

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

@@ -1,12 +1,9 @@
 const React = require('react');
 const _ = require('lodash');
 const Field = require('./field/field.jsx');
-const { PATTERNS } = require('./constants');
+const { PATTERNS, UNITS, HINT_TYPE } = require('./constants');
-
-const makeTempCSSDoc = (CodeMirror, value)=>CodeMirror.Doc(`.selector {
-${value}
-}`, 'text/css');
 
+// 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,
@@ -17,15 +14,17 @@ const pseudoClasses = { 'active'           : 1, 'after'            : 1, 'before'
 	'selection'        : 1, 'target'           : 1, 'valid'            : 1, 'visited'          : 1
 };
 
-module.exports = function(CodeMirror) {
+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(CodeMirror, `${field.name}:${value?.replaceAll(`'"`, '') ?? ''}`);
+		const tempDoc = makeTempCSSDoc(`${field.name}:${value?.replaceAll(`'"`, '') ?? ''}`);
 		headless.swapDoc(tempDoc);
-		const pos = CodeMirror.Pos(1, field.name.length + 1 + value?.length, false);
+		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);
 
@@ -40,7 +39,7 @@ module.exports = function(CodeMirror) {
 			word = ''; start = end = pos.ch;
 		}
 
-		const result = [];
+		let result = [];
 		const add = (keywords)=>{
 			for (const name in keywords)
 				if(!word || name.lastIndexOf(word, 0) === 0)
@@ -59,11 +58,22 @@ module.exports = function(CodeMirror) {
 			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 {
-		cClass : (cm, n, prefix, cClass)=>{
+		cClass : function(cm, n, prefix, cClass) {
 			const { text } = cm.lineInfo(n);
 			const id = `${_.kebabCase(prefix.replace('{{', ''))}-${_.kebabCase(cClass)}-${n}`;
 			const frameChange = (e)=>{
@@ -82,11 +92,10 @@ module.exports = function(CodeMirror) {
 				<label htmlFor={id}>{_.startCase(cClass)}</label>
 			</React.Fragment>;
 		},
-		field : (cm, n, field)=>{
+		field : function(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, ''];
@@ -101,8 +110,7 @@ module.exports = function(CodeMirror) {
 				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 field={field} value={value} n={n} onChange={inputChange} setHints={(f, h)=>setHints(h, f)} getStyleHints={getStyleHints}/>
-				{!!field.lineBreak ? <br/> : null}
 			</React.Fragment>;
 		}
 	};

shared/naturalcrit/codeEditor/helpers/widgets.js

@@ -1,9 +1,18 @@
 const React = require('react');
 const ReactDOM = require('react-dom');
 const { PATTERNS, FIELD_TYPE } = require('./widget-elements/constants');
+require('./widget-elements/hints/hints.jsx');
 
-module.exports = function(CodeMirror, widgets, cm) {
+module.exports = function(CodeMirror, widgets, cm, setHints) {
-	const { cClass, field } = require('./widget-elements')(CodeMirror);
+	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);
+
+	const { cClass, field } = require('./widget-elements')(CodeMirror, setHints);
 	const widgetOptions = widgets.map((widget)=>({
 		name         : widget.name,
 		pattern      : PATTERNS.widget[widget.type](widget.name),
@@ -18,8 +27,7 @@ module.exports = function(CodeMirror, widgets, cm) {
 				return field(cm, n, {
 					name      : style,
 					type      : FIELD_TYPE.STYLE,
-					increment : 5,
+					increment : 5
-					lineBreak : true
 				});
 			}).filter((s)=>!!s);
 
@@ -42,11 +50,11 @@ module.exports = function(CodeMirror, widgets, cm) {
 				widgetOption.createWidget(n, widget.node);
 			}
 		} else {
-			cm.addLineWidget(n, widgetOption.createWidget(n), {
+			return cm.addLineWidget(n, widgetOption.createWidget(n), {
 				above       : false,
 				coverGutter : false,
 				noHScroll   : true,
-				className   : `snippet-options-widget ${widgetOption.name}-widget`
+				className   : `snippet-options-widget ${widgetOption.name}-widget ${widgetOption.name}-widget-${n}`
 			});
 		}
 	};
@@ -59,8 +67,9 @@ module.exports = function(CodeMirror, widgets, cm) {
 		updateAllLineWidgets : ()=>{
 			for (let i = 0; i < cm.lineCount(); i++) {
 				const { widgets } = cm.lineInfo(i);
-				if(!!widgets)
+				if(!!widgets) {
 					updateLineWidgets(i);
+				}
 			}
 		},
 		updateWidgetGutter : ()=>{

themes/V3/5ePHB/widgets.js

@@ -0,0 +1,24 @@
+const { WIDGET_TYPE, FIELD_TYPE } = require('../../../shared/naturalcrit/codeEditor/helpers/widget-elements/constants');
+
+module.exports = [{
+	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
+	}]
+}];