0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-22 20:29:43 +00:00

fix a few issues

This commit is contained in:
Charlie Humphreys
2023-07-18 22:13:40 -05:00
parent 379f260de5
commit e8b427ea21
4 changed files with 26 additions and 11 deletions

View File

@@ -168,6 +168,10 @@ const CodeEditor = createClass({
this.state.widgetUtils.removeLineWidget(key, this.state.widgets[key]); this.state.widgetUtils.removeLineWidget(key, this.state.widgets[key]);
} }
} }
this.setState({
hints : [],
hintsField : undefined
});
const { widgets } = this.codeMirror.lineInfo(line); const { widgets } = this.codeMirror.lineInfo(line);
if(!widgets) { if(!widgets) {
const widget = this.state.widgetUtils.updateLineWidgets(line); const widget = this.state.widgetUtils.updateLineWidgets(line);
@@ -198,6 +202,10 @@ const CodeEditor = createClass({
for (const widget of widgets) { for (const widget of widgets) {
this.state.widgetUtils.removeLineWidget(n, widget); this.state.widgetUtils.removeLineWidget(n, widget);
} }
this.setState({
hints : [],
hintsField : undefined
});
} }
} }
}); });

View File

@@ -1,7 +1,7 @@
require('./color-selector.less'); require('./color-selector.less');
const React = require('react'); const React = require('react');
const createClass = require('create-react-class'); const createClass = require('create-react-class');
const { PATTERNS, STYLE_FN } = require('../constants'); const { PATTERNS, STYLE_FN, SNIPPET_TYPE } = require('../constants');
const CodeMirror = require('../../../code-mirror'); const CodeMirror = require('../../../code-mirror');
const debounce = require('lodash.debounce'); const debounce = require('lodash.debounce');
@@ -39,7 +39,7 @@ const ColorSelector = createClass({
} }
}, },
onChange : function(e) { onChange : function(e) {
const { cm, text, field, n } = this.props; const { cm, text, field, n, snippetType } = this.props;
const pattern = PATTERNS.field[field.type](field.name); const pattern = PATTERNS.field[field.type](field.name);
const [_, label, current] = text.match(pattern) ?? [null, field.name, '']; const [_, label, current] = text.match(pattern) ?? [null, field.name, ''];
let index = text.indexOf(`${label}:${current}`); let index = text.indexOf(`${label}:${current}`);
@@ -48,7 +48,10 @@ const ColorSelector = createClass({
} }
let value = e.target.value; let value = e.target.value;
if(index === -1) { if(index === -1) {
index = text.length; if(snippetType === SNIPPET_TYPE.INLINE) {
index = text.indexOf('}');
}
index = index === -1 ? text.length : index;
value = `,${field.name}:${value}`; value = `,${field.name}:${value}`;
} else { } else {
index = index + 1 + field.name.length; index = index + 1 + field.name.length;

View File

@@ -2,7 +2,7 @@ require('./text.less');
const React = require('react'); const React = require('react');
const createClass = require('create-react-class'); const createClass = require('create-react-class');
const _ = require('lodash'); const _ = require('lodash');
const { NUMBER_PATTERN, HINT_TYPE, PATTERNS, STYLE_FN } = require('../constants'); const { NUMBER_PATTERN, HINT_TYPE, PATTERNS, STYLE_FN, FIELD_TYPE, SNIPPET_TYPE } = require('../constants');
const CodeMirror = require('../../../code-mirror.js'); const CodeMirror = require('../../../code-mirror.js');
const Text = createClass({ const Text = createClass({
@@ -16,7 +16,8 @@ const Text = createClass({
setHints : ()=>{}, setHints : ()=>{},
onChange : ()=>{}, onChange : ()=>{},
getStyleHints : ()=>{}, getStyleHints : ()=>{},
def : false def : false,
snippetType : -1
}; };
}, },
@@ -114,13 +115,16 @@ const Text = createClass({
} }
}, },
onChange : function (e){ onChange : function (e){
const { cm, text, field, n } = this.props; const { cm, text, field, n, snippetType } = this.props;
const pattern = PATTERNS.field[field.type](field.name); const pattern = PATTERNS.field[field.type](field.name);
const [_, label, current] = text.match(pattern) ?? [null, field.name, '']; const [_, label, current] = text.match(pattern) ?? [null, field.name, ''];
let index = text.indexOf(`${label}:${current}`); let index = text.indexOf(`${label}:${current}`);
let value = e.target.value; let value = e.target.value;
if(index === -1) { if(index === -1) {
index = text.length; if(snippetType === SNIPPET_TYPE.INLINE) {
index = text.indexOf('}');
}
index = index === -1 ? text.length : index;
value = `,${field.name}:${value}`; value = `,${field.name}:${value}`;
} else { } else {
index = index + 1 + field.name.length; index = index + 1 + field.name.length;

View File

@@ -94,11 +94,11 @@ module.exports = function(widgets, cm, setHints) {
if(field.type === FIELD_TYPE.CHECKBOX) { if(field.type === FIELD_TYPE.CHECKBOX) {
return <Checkbox key={key} cm={cm} n={n} prefix={widget.name} value={field.name} def={true}/>; return <Checkbox key={key} cm={cm} n={n} prefix={widget.name} value={field.name} def={true}/>;
} else if(field.type === FIELD_TYPE.TEXT) { } 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}/>; 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) { } else if(field.type === FIELD_TYPE.IMAGE_SELECTOR) {
return <ImageSelector key={key} field={field} cm={cm} n={n}/>; return <ImageSelector key={key} field={field} cm={cm} n={n}/>;
} else if(field.type === FIELD_TYPE.COLOR_SELECTOR) { } else if(field.type === FIELD_TYPE.COLOR_SELECTOR) {
return <ColorSelector key={key} field={field} cm={cm} n={n} text={text} def={true}/>; return <ColorSelector key={key} field={field} cm={cm} n={n} text={text} def={true} snippetType={widget.type}/>;
} else { } else {
return null; return null;
} }
@@ -114,9 +114,9 @@ module.exports = function(widgets, cm, setHints) {
}; };
const key = genKey(widget.name, n, style); const key = genKey(widget.name, n, style);
if(style.includes('color')) { if(style.includes('color')) {
return <ColorSelector key={key} field={field} cm={cm} n={n} text={text}/>; 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}/>; 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); }).filter(Boolean);
const root = roots[n][id] ?? ReactDOMClient.createRoot(node || parent); const root = roots[n][id] ?? ReactDOMClient.createRoot(node || parent);