update widgets - add hints component and adjust autocomplete logic

2026-01-27 20:23:08 +00:00 · 2023-06-30 00:18:23 -05:00
parent 3af5d27e3e
commit f52d42bef5
10 changed files with 327 additions and 149 deletions
--- a/shared/naturalcrit/codeEditor/helpers/widget-elements/constants.js
+++ b/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('|')})?(.*)`);
--- a/shared/naturalcrit/codeEditor/helpers/widget-elements/field/field.jsx
+++ b/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(),
-	activeHintRef : React.createRef(),
+	fieldRef : {},

 	getDefaultProps : function() {
 		return {
-			field    : {},
-			n        : 0,
-			value    : '',
-			hints    : [],
-			onChange : ()=>{}
+			field         : {},
+			n             : 0,
+			value         : '',
+			setHints      : ()=>{},
+			onChange      : ()=>{},
+			getStyleHints : ()=>{}
 		};
 	},

 	getInitialState : function() {
 		return {
-			value      : '',
-			focused    : false,
-			activeHint : null
+			value : '',
+			style : STYLE_FN(),
+			id    : ''
 		};
 	},

-	componentDidUpdate : function({ hints }) {
+	componentDidUpdate : function(_, { value }) {
 		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
+				value : this.props.value,
+				style : STYLE_FN(this.props.value),
+				id    : `${this.props.field?.name}-${this.props.n}`
 			});
 			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'
-				});
-			}
+		if(this.state.value !== value) {
+			this.props.setHints(this, this.props.getStyleHints(this.props.field, this.state.value));
 		}
 	},

 	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 }) {
-		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 });
-		}
+	setFocus : function(e) {
+		const { type } = e;
+		this.props.setHints(this, type === 'focus' ? this.props.getStyleHints(this.props.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.change({
+			target : {
+				value
+			}
+		});
+	},
 	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);
+		const { field, value } = this.props;
+		const match = value.match(NUMBER_PATTERN);
 		if(code === 'ArrowDown') {
-			e.preventDefault();
-			if(match) {
+			if(match && match[3]) {
+				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) {
+			if(match && match[3]) {
+				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}/>
-				{focused ?
-					<div className='hints' ref={this.hintsRef}>
-						{hints}
-					</div> :
-					null
-				}
-
+				<input id={id} type='text' value={value}
+					   step={field.increment || 1}
+					   style={this.state.style}
+					   ref={this.fieldRef[id]}
+					   onChange={this.change}
+					   onFocus={this.setFocus}
+					   onBlur={this.setFocus}
+					   onKeyDown={this.keyDown}/>
 			</div>
 		</React.Fragment>;
 	}
--- a/shared/naturalcrit/codeEditor/helpers/widget-elements/field/field.less
+++ b/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;
--- a/shared/naturalcrit/codeEditor/helpers/widget-elements/hints/hints.jsx
+++ b/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;
--- a/shared/naturalcrit/codeEditor/helpers/widget-elements/index.js
+++ b/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 makeTempCSSDoc = (CodeMirror, value)=>CodeMirror.Doc(`.selector {
-${value}
-}`, 'text/css');
+const { PATTERNS, UNITS, HINT_TYPE } = require('./constants');

+// 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.lineBreak ? <br/> : null}
+				<Field field={field} value={value} n={n} onChange={inputChange} setHints={(f, h)=>setHints(h, f)} getStyleHints={getStyleHints}/>
 			</React.Fragment>;
 		}
 	};