add more image snippets and other snippets

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

@@ -66,7 +66,6 @@ const ImageSelector = createClass({
 		const currentText = `${label}${current ?? ''}`;
 		const index = 2;
 		const value = label + this.state.selected;
-		console.log(text, pattern, currentText, value, fullmatch, label, current);
 		cm.replaceRange(value, CodeMirror.Pos(n, index), CodeMirror.Pos(n, index + currentText.length), '+insert');
 	},
 

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

@@ -2,6 +2,8 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
+  max-height: 60vh;
+  overflow-y: scroll;
 
   img {
     flex: 0 0 auto;

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

@@ -78,9 +78,9 @@ const Text = createClass({
 
 	hintSelected : function(h, e) {
 		let value;
-		if(h.type === HINT_TYPE.VALUE) {
+		if(h?.type === HINT_TYPE.VALUE) {
 			value = h.hint;
-		} else if(h.type === HINT_TYPE.NUMBER_SUFFIX) {
+		} 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) {
@@ -102,20 +102,20 @@ const Text = createClass({
 		const { value } = this.state;
 		const match = value?.match(NUMBER_PATTERN);
 		if(code === 'ArrowDown') {
-			if(match && match[3] && CSS.supports(field.name, value)) {
+			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) ?? ''}`
+						value : `${match.at(1) ?? ''}${Number(match[2]) - field.increment}${match[3] ?? ''}${match.at(4) ?? ''}`
 					}
 				});
 			}
 		} else if(code === 'ArrowUp') {
-			if(match && match[3] && CSS.supports(field.name, value)) {
+			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) ?? ''}`
+						value : `${match.at(1) ?? ''}${Number(match[2]) + field.increment}${match[3] ?? ''}${match.at(4) ?? ''}`
 					}
 				});
 			}
@@ -133,6 +133,7 @@ const Text = createClass({
 		} else {
 			index = index + 1 + field.name.length;
 		}
+		if(!value) return;
 		cm.replaceRange(value, CodeMirror.Pos(n, index), CodeMirror.Pos(n, index + current.length), '+insert');
 		this.setState({
 			value : e.target.value,

themes/V3/5ePHB/widgets.js

@@ -1,6 +1,11 @@
 const _ = require('lodash');
 const { SNIPPET_TYPE, FIELD_TYPE } = require('../../../shared/naturalcrit/codeEditor/helpers/widget-elements/constants');
 
+const fourDigitNumberFromValue = (value)=>typeof value === 'number' ? (()=>{
+	const str = String(value);
+	return _.range(0, 4 - str.length).map(()=>'0').join('') + str;
+})() : value;
+
 module.exports = [{
 	name   : 'monster',
 	type   : SNIPPET_TYPE.BLOCK,
@@ -24,6 +29,30 @@ module.exports = [{
 		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,
@@ -71,10 +100,7 @@ module.exports = [{
 	fields : [{
 		name    : 'imageMaskCenter',
 		type    : FIELD_TYPE.IMAGE_SELECTOR,
-		preview : (value)=>`/assets/waterColorMasks/center/${typeof value === 'number' ? (()=>{
+		preview : (value)=>`/assets/waterColorMasks/center/${fourDigitNumberFromValue(value)}.webp`,
-			const str = String(value);
-			return _.range(0, 4 - str.length).map(()=>'0').join('') + str;
-		})() : value}.webp`,
 		values  : _.range(1, 17)
 	}, {
 		name      : '--offsetX',
@@ -89,4 +115,42 @@ module.exports = [{
 		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,
+	}]
 }];