From b6d37dd825dcfc5d2eb0c4c1be6a3598e51c0a73 Mon Sep 17 00:00:00 2001 From: Charlie Humphreys Date: Sat, 10 Jun 2023 13:02:13 -0500 Subject: [PATCH 1/6] add the concept of widgets and widget fields --- shared/naturalcrit/codeEditor/codeEditor.jsx | 72 +++++++- shared/naturalcrit/codeEditor/codeEditor.less | 17 ++ .../codeEditor/{ => helpers}/close-tag.js | 0 .../codeEditor/{ => helpers}/fold-code.js | 0 .../helpers/widget-elements/constants.js | 23 +++ .../helpers/widget-elements/field/field.jsx | 154 ++++++++++++++++++ .../helpers/widget-elements/field/field.less | 32 ++++ .../helpers/widget-elements/index.js | 109 +++++++++++++ .../naturalcrit/codeEditor/helpers/widgets.js | 84 ++++++++++ 9 files changed, 485 insertions(+), 6 deletions(-) rename shared/naturalcrit/codeEditor/{ => helpers}/close-tag.js (100%) rename shared/naturalcrit/codeEditor/{ => helpers}/fold-code.js (100%) create mode 100644 shared/naturalcrit/codeEditor/helpers/widget-elements/constants.js create mode 100644 shared/naturalcrit/codeEditor/helpers/widget-elements/field/field.jsx create mode 100644 shared/naturalcrit/codeEditor/helpers/widget-elements/field/field.less create mode 100644 shared/naturalcrit/codeEditor/helpers/widget-elements/index.js create mode 100644 shared/naturalcrit/codeEditor/helpers/widgets.js diff --git a/shared/naturalcrit/codeEditor/codeEditor.jsx b/shared/naturalcrit/codeEditor/codeEditor.jsx index d127bfdd8..daf8eba65 100644 --- a/shared/naturalcrit/codeEditor/codeEditor.jsx +++ b/shared/naturalcrit/codeEditor/codeEditor.jsx @@ -4,7 +4,8 @@ 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 { WIDGET_TYPE, FIELD_TYPE } = require('./helpers/widget-elements/constants'); let CodeMirror; if(typeof navigator !== 'undefined'){ @@ -37,10 +38,36 @@ if(typeof navigator !== 'undefined'){ require('codemirror/addon/fold/xml-fold.js'); require('codemirror/addon/edit/closetag.js'); - const foldCode = require('./fold-code'); + const foldCode = require('./helpers/fold-code'); foldCode.registerHomebreweryHelper(CodeMirror); } +const themeWidgets = [{ + 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', getDefaultProps : function() { @@ -49,13 +76,16 @@ const CodeEditor = createClass({ value : '', wrap : true, onChange : ()=>{}, - enableFolding : true + enableFolding : true, + theme : null }; }, getInitialState : function() { return { - docs : {} + docs : {}, + widgetUtils : {}, + focusedWidget : null }; }, @@ -91,6 +121,9 @@ const CodeEditor = createClass({ } else { this.codeMirror.setOption('foldOptions', false); } + + this.state.widgetUtils.updateWidgetGutter(); + this.state.widgetUtils.updateAllLineWidgets(); }, buildEditor : function() { @@ -155,7 +188,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,14 +202,41 @@ const CodeEditor = createClass({ }); closeTag.autoCloseCurlyBraces(CodeMirror, this.codeMirror); + this.setState({ + widgetUtils : require('./helpers/widgets')(CodeMirror, themeWidgets, this.codeMirror) + }); + // 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.updateSize(); + + this.codeMirror.on('change', (cm)=>{ + this.props.onChange(cm.getValue()); + + this.state.widgetUtils.updateWidgetGutter(); + }); + + this.codeMirror.on('gutterClick', (cm, n)=>{ + const { gutterMarkers } = this.codeMirror.lineInfo(n); + + if(!!gutterMarkers && !!gutterMarkers['widget-gutter']) { + const { widgets } = this.codeMirror.lineInfo(n); + if(!widgets) { + this.state.widgetUtils.updateLineWidgets(n); + } else { + this.codeMirror.operation(()=>{ + for (const widget of widgets) { + this.state.widgetUtils.removeLineWidgets(widget); + } + }); + } + } + }); }, indent : function () { const cm = this.codeMirror; - if (cm.somethingSelected()) { + if(cm.somethingSelected()) { cm.execCommand('indentMore'); } else { cm.execCommand('insertSoftTab'); diff --git a/shared/naturalcrit/codeEditor/codeEditor.less b/shared/naturalcrit/codeEditor/codeEditor.less index 1334299e4..9fd9d7d73 100644 --- a/shared/naturalcrit/codeEditor/codeEditor.less +++ b/shared/naturalcrit/codeEditor/codeEditor.less @@ -30,4 +30,21 @@ // background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAQAgMAAABW5NbuAAAACVBMVEVHcEwAAAAAAAAWawmTAAAAA3RSTlMAPBJ6PMxpAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAFUlEQVQI12NgwACcCQysASAEZGAAACMuAX06aCQUAAAAAElFTkSuQmCC) no-repeat right; // } //} + + .widget-gutter { + width: .7em; + } + + .snippet-options-widget { + background-color: lightblue; + padding: 2px 0 2px 0; + + * { + margin: 0 2px 0 2px; + } + + input { + max-width: 10vw; + } + } } diff --git a/shared/naturalcrit/codeEditor/close-tag.js b/shared/naturalcrit/codeEditor/helpers/close-tag.js similarity index 100% rename from shared/naturalcrit/codeEditor/close-tag.js rename to shared/naturalcrit/codeEditor/helpers/close-tag.js diff --git a/shared/naturalcrit/codeEditor/fold-code.js b/shared/naturalcrit/codeEditor/helpers/fold-code.js similarity index 100% rename from shared/naturalcrit/codeEditor/fold-code.js rename to shared/naturalcrit/codeEditor/helpers/fold-code.js diff --git a/shared/naturalcrit/codeEditor/helpers/widget-elements/constants.js b/shared/naturalcrit/codeEditor/helpers/widget-elements/constants.js new file mode 100644 index 000000000..dda0ab5ea --- /dev/null +++ b/shared/naturalcrit/codeEditor/helpers/widget-elements/constants.js @@ -0,0 +1,23 @@ +export const UNITS = ['cm', 'mm', 'in', 'px', 'pt', 'pc', 'em', 'ex', 'ch', 'rem', 'vw', 'vh', 'vmin', 'vmax', '%']; + +export const WIDGET_TYPE = { + SNIPPET : 0, + INLINE_SNIPPET : 1, + IMAGE : 2, +}; + +export const FIELD_TYPE = { + STYLE : 0 +}; + +export const PATTERNS = { + widget : { + [WIDGET_TYPE.SNIPPET] : (name)=>new RegExp(`^{{${name}(?:[^a-zA-Z].*)?`), + [WIDGET_TYPE.INLINE_SNIPPET] : (name)=>new RegExp(`{{${name}`), + [WIDGET_TYPE.IMAGE] : ()=>new RegExp(`^\\!\\[(?:[a-zA-Z -]+)?\\]\\(.*\\).*{[a-zA-Z0-9:, "'-]+}$`), + }, + field : { + [FIELD_TYPE.STYLE] : (name)=>new RegExp(`[{,;](${name}):((?:"[^},;"]*")|(?:[^},;]*))`), + }, + collectStyles : new RegExp(`(?:[{,;]([a-zA-Z-]+):)+`, 'g'), +}; \ No newline at end of file diff --git a/shared/naturalcrit/codeEditor/helpers/widget-elements/field/field.jsx b/shared/naturalcrit/codeEditor/helpers/widget-elements/field/field.jsx new file mode 100644 index 000000000..f945f8993 --- /dev/null +++ b/shared/naturalcrit/codeEditor/helpers/widget-elements/field/field.jsx @@ -0,0 +1,154 @@ +require('./field.less'); +const React = require('react'); +const createClass = require('create-react-class'); +const _ = require('lodash'); +const { UNITS } = require('../constants'); + +const Field = createClass({ + hintsRef : React.createRef(), + activeHintRef : React.createRef(), + + getDefaultProps : function() { + return { + field : {}, + n : 0, + value : '', + hints : [], + onChange : ()=>{} + }; + }, + + getInitialState : function() { + return { + value : '', + focused : false, + activeHint : null + }; + }, + + componentDidUpdate : function({ hints }) { + 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 + }); + 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() { + this.setState({ + value : this.props.value + }); + }, + + change : function(e) { + this.props.onChange(e); + this.setState({ + value : 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 }); + } + }, + + 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); + if(code === 'ArrowDown') { + e.preventDefault(); + if(match) { + 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) { + 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 { 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
this.change({ target: { value: h } })} ref={this.activeHintRef}>{h}
; + } else { + return
this.change({ target: { value: h } })}>{h}
; + } + }); + + const id = `${field.name}-${n}`; + return +
+ + + {focused ? +
+ {hints} +
: + null + } + +
+ ; + } +}); + +module.exports = Field; \ No newline at end of file diff --git a/shared/naturalcrit/codeEditor/helpers/widget-elements/field/field.less b/shared/naturalcrit/codeEditor/helpers/widget-elements/field/field.less new file mode 100644 index 000000000..71f656347 --- /dev/null +++ b/shared/naturalcrit/codeEditor/helpers/widget-elements/field/field.less @@ -0,0 +1,32 @@ +.widget-field { + display: inline-block; + + >label { + display: inherit; + width: 50px; + margin: 0 0; + } + + >input { + + } + + >.hints { + position: relative; + left: 50px; + 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); + } + } + } +} \ No newline at end of file diff --git a/shared/naturalcrit/codeEditor/helpers/widget-elements/index.js b/shared/naturalcrit/codeEditor/helpers/widget-elements/index.js new file mode 100644 index 000000000..a8706d448 --- /dev/null +++ b/shared/naturalcrit/codeEditor/helpers/widget-elements/index.js @@ -0,0 +1,109 @@ +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 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 +}; + +module.exports = function(CodeMirror) { + const spec = CodeMirror.resolveMode('text/css'); + const headless = CodeMirror(()=>{}); + + // 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(`'"`, '') ?? ''}`); + headless.swapDoc(tempDoc); + const pos = CodeMirror.Pos(1, field.name.length + 1 + value?.length, 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; + } + + const 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); + } + return result; + }; + + return { + cClass : (cm, n, prefix, cClass)=>{ + const { text } = cm.lineInfo(n); + const id = `${_.kebabCase(prefix.replace('{{', ''))}-${_.kebabCase(cClass)}-${n}`; + const frameChange = (e)=>{ + if(!!e.target && e.target.checked) + cm.replaceRange(`,${cClass}`, CodeMirror.Pos(n, prefix.length), CodeMirror.Pos(n, prefix.length), '+insert'); + else { + const start = text.indexOf(`,${cClass}`); + if(start > -1) + cm.replaceRange('', CodeMirror.Pos(n, start), CodeMirror.Pos(n, start + cClass.length + 1), '-delete'); + else + e.target.checked = true; + } + }; + return + + + ; + }, + field : (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, '']; + let index = text.indexOf(`${label}:${current}`); + let value = e.target.value; + if(index === -1) { + index = text.length; + 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'); + }; + return + + {!!field.lineBreak ?
: null} + ; + } + }; +}; diff --git a/shared/naturalcrit/codeEditor/helpers/widgets.js b/shared/naturalcrit/codeEditor/helpers/widgets.js new file mode 100644 index 000000000..04bdb9f5a --- /dev/null +++ b/shared/naturalcrit/codeEditor/helpers/widgets.js @@ -0,0 +1,84 @@ +const React = require('react'); +const ReactDOM = require('react-dom'); +const { PATTERNS, FIELD_TYPE } = require('./widget-elements/constants'); + +module.exports = function(CodeMirror, widgets, cm) { + const { cClass, field } = require('./widget-elements')(CodeMirror); + const widgetOptions = widgets.map((widget)=>({ + name : widget.name, + pattern : PATTERNS.widget[widget.type](widget.name), + createWidget : (n, node)=>{ + const parent = document.createElement('div'); + const classes = (widget.classes || []).map((c, i)=>cClass(cm, n, `{{${widget.name}`, c)); + const fieldNames = (widget.fields || []).map((f)=>f.name); + const fields = (widget.fields || []).map((f, i)=>field(cm, n, f)).filter((f)=>!!f); + const { text } = cm.lineInfo(n); + const styles = [...text.matchAll(PATTERNS.collectStyles)].map(([_, style])=>{ + if(fieldNames.includes(style)) return false; + return field(cm, n, { + name : style, + type : FIELD_TYPE.STYLE, + increment : 5, + lineBreak : true + }); + }).filter((s)=>!!s); + + ReactDOM.render( + {classes} + {fields} + {styles} + , node || parent); + + return node || parent; + } + })); + + const updateLineWidgets = (n, remove)=>{ + 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.createWidget(n, widget.node); + } + } else { + cm.addLineWidget(n, widgetOption.createWidget(n), { + above : false, + coverGutter : false, + noHScroll : true, + className : `snippet-options-widget ${widgetOption.name}-widget` + }); + } + }; + + return { + removeLineWidgets : (widget)=>{ + cm.removeLineWidget(widget); + }, + 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 line = cm.getLine(i); + + if(widgetOptions.some((option)=>line.match(option.pattern))) { + 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); + } + } + }); + } + }; +}; \ No newline at end of file From 47c84d9f016a40e9b4ebe9a66a9f46add6198c68 Mon Sep 17 00:00:00 2001 From: Charlie Humphreys Date: Fri, 30 Jun 2023 00:18:23 -0500 Subject: [PATCH 2/6] update widgets - add hints component and adjust autocomplete logic --- client/homebrew/editor/editor.jsx | 2 +- shared/naturalcrit/codeEditor/codeEditor.jsx | 78 +++++---- shared/naturalcrit/codeEditor/codeEditor.less | 13 +- .../helpers/widget-elements/constants.js | 13 +- .../helpers/widget-elements/field/field.jsx | 163 ++++++++---------- .../helpers/widget-elements/field/field.less | 11 +- .../helpers/widget-elements/hints/hints.jsx | 113 ++++++++++++ .../helpers/widget-elements/index.js | 36 ++-- .../naturalcrit/codeEditor/helpers/widgets.js | 23 ++- themes/V3/5ePHB/widgets.js | 24 +++ 10 files changed, 327 insertions(+), 149 deletions(-) create mode 100644 shared/naturalcrit/codeEditor/helpers/widget-elements/hints/hints.jsx create mode 100644 themes/V3/5ePHB/widgets.js diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index 58e84e4fc..174a81b1b 100644 --- a/client/homebrew/editor/editor.jsx +++ b/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()){ diff --git a/shared/naturalcrit/codeEditor/codeEditor.jsx b/shared/naturalcrit/codeEditor/codeEditor.jsx index daf8eba65..137c3ef4a 100644 --- a/shared/naturalcrit/codeEditor/codeEditor.jsx +++ b/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 = [{ - 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 themeWidgets = require('../../../themes/V3/5ePHB/widgets'); 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
; + const { hints, hintsField } = this.state; + return +
+ + ; } }); diff --git a/shared/naturalcrit/codeEditor/codeEditor.less b/shared/naturalcrit/codeEditor/codeEditor.less index 9fd9d7d73..0caf0ff48 100644 --- a/shared/naturalcrit/codeEditor/codeEditor.less +++ b/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 2px 0; + padding: 2px 0; + + >div { + display: flex; + flex-wrap: wrap; + } * { - margin: 0 2px 0 2px; + margin: 0 2px; } input { diff --git a/shared/naturalcrit/codeEditor/helpers/widget-elements/constants.js b/shared/naturalcrit/codeEditor/helpers/widget-elements/constants.js index dda0ab5ea..a264e8b01 100644 --- 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'), -}; \ No newline at end of file + collectStyles : new RegExp(`(?:([a-zA-Z-]+):)+`, 'g'), +}; + +export const NUMBER_PATTERN = new RegExp(`([^-\\d]*)([-\\d]+)(${UNITS.join('|')})?(.*)`); diff --git a/shared/naturalcrit/codeEditor/helpers/widget-elements/field/field.jsx b/shared/naturalcrit/codeEditor/helpers/widget-elements/field/field.jsx index f945f8993..8148e989d 100644 --- 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
this.change({ target: { value: h } })} ref={this.activeHintRef}>{h}
; - } else { - return
this.change({ target: { value: h } })}>{h}
; - } - }); - - const id = `${field.name}-${n}`; return
- - {focused ? -
- {hints} -
: - null - } - +
; } diff --git a/shared/naturalcrit/codeEditor/helpers/widget-elements/field/field.less b/shared/naturalcrit/codeEditor/helpers/widget-elements/field/field.less index 71f656347..d586209a7 100644 --- 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; diff --git a/shared/naturalcrit/codeEditor/helpers/widget-elements/hints/hints.jsx b/shared/naturalcrit/codeEditor/helpers/widget-elements/hints/hints.jsx new file mode 100644 index 000000000..6227b02b1 --- /dev/null +++ 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
  • field.hintSelected(h, e)}>{h.hint}
    • ; + }); + + let style = { + display : 'none' + }; + if(hintElements.length > 1) { + style = { + ...style, + display : 'block', + top : `${bounds.top - 5}px`, + left : `${bounds.left}px` + }; + } + return +
      + {hintElements} +
    +     ; + } +}); + +module.exports = Hints; \ No newline at end of file diff --git a/shared/naturalcrit/codeEditor/helpers/widget-elements/index.js b/shared/naturalcrit/codeEditor/helpers/widget-elements/index.js index a8706d448..d1919a94c 100644 --- 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) { ; }, - 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 - - {!!field.lineBreak ?
    : null} + setHints(h, f)} getStyleHints={getStyleHints}/>     ; } }; diff --git a/shared/naturalcrit/codeEditor/helpers/widgets.js b/shared/naturalcrit/codeEditor/helpers/widgets.js index 04bdb9f5a..4b994cec7 100644 --- a/shared/naturalcrit/codeEditor/helpers/widgets.js +++ b/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) { - const { cClass, field } = require('./widget-elements')(CodeMirror); +module.exports = function(CodeMirror, widgets, cm, setHints) { + 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, - lineBreak : true + increment : 5 }); }).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 : ()=>{ diff --git a/themes/V3/5ePHB/widgets.js b/themes/V3/5ePHB/widgets.js new file mode 100644 index 000000000..c7abaeb98 --- /dev/null +++ b/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 + }] +}]; \ No newline at end of file From b7be2d6463c5de45a1fa6552677db049526fb1a8 Mon Sep 17 00:00:00 2001 From: Charlie Humphreys Date: Fri, 30 Jun 2023 00:37:20 -0500 Subject: [PATCH 3/6] fix ref issues and remove unneeded value --- shared/naturalcrit/codeEditor/codeEditor.jsx | 11 +++++----- .../helpers/widget-elements/hints/hints.jsx | 20 +++++++++++++++++-- 2 files changed, 23 insertions(+), 8 deletions(-) diff --git a/shared/naturalcrit/codeEditor/codeEditor.jsx b/shared/naturalcrit/codeEditor/codeEditor.jsx index 137c3ef4a..86cf36104 100644 --- a/shared/naturalcrit/codeEditor/codeEditor.jsx +++ b/shared/naturalcrit/codeEditor/codeEditor.jsx @@ -60,12 +60,11 @@ const CodeEditor = createClass({ getInitialState : function() { return { - docs : {}, - widgetUtils : {}, - widgets : [], - focusedWidget : null, - hints : [], - hintsField : undefined, + docs : {}, + widgetUtils : {}, + widgets : [], + hints : [], + hintsField : undefined, }; }, diff --git a/shared/naturalcrit/codeEditor/helpers/widget-elements/hints/hints.jsx b/shared/naturalcrit/codeEditor/helpers/widget-elements/hints/hints.jsx index 6227b02b1..a20ab6bf4 100644 --- a/shared/naturalcrit/codeEditor/helpers/widget-elements/hints/hints.jsx +++ b/shared/naturalcrit/codeEditor/helpers/widget-elements/hints/hints.jsx @@ -87,8 +87,18 @@ const Hints = createClass({ let className = 'CodeMirror-hint'; if(activeHint === i) { className += ' CodeMirror-hint-active'; + return
  • field.hintSelected(h, e)} + ref={this.activeHintRef}> + {h.hint} +
    • ; } - return
  • field.hintSelected(h, e)}>{h.hint}
    • ; + return
  • field.hintSelected(h, e)}> + {h.hint} +
    • ; }); let style = { @@ -103,7 +113,13 @@ const Hints = createClass({ }; } return -
      +
        {hintElements}
      ; From 712f0309e9d750bc98552dd114e4e0d77b2a8c28 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Mon, 3 Jul 2023 15:27:18 -0400 Subject: [PATCH 4/6] Simplify click-outside close widget logic --- shared/naturalcrit/codeEditor/codeEditor.jsx | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/shared/naturalcrit/codeEditor/codeEditor.jsx b/shared/naturalcrit/codeEditor/codeEditor.jsx index 86cf36104..cb787d59c 100644 --- a/shared/naturalcrit/codeEditor/codeEditor.jsx +++ b/shared/naturalcrit/codeEditor/codeEditor.jsx @@ -453,16 +453,8 @@ 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) { + // Close open widgets if click outside of a widget + if(!e.target.matches('.CodeMirror-linewidget *')) { for (const widget of this.state.widgets) { this.state.widgetUtils.removeLineWidgets(widget); } From 35a74b3e468b814cbb07354a22e7e40191b139e9 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Mon, 3 Jul 2023 17:16:29 -0400 Subject: [PATCH 5/6] clean up codeEditor --- shared/naturalcrit/codeEditor/codeEditor.jsx | 17 ++++------------- 1 file changed, 4 insertions(+), 13 deletions(-) diff --git a/shared/naturalcrit/codeEditor/codeEditor.jsx b/shared/naturalcrit/codeEditor/codeEditor.jsx index 86cf36104..d1035a0b5 100644 --- a/shared/naturalcrit/codeEditor/codeEditor.jsx +++ b/shared/naturalcrit/codeEditor/codeEditor.jsx @@ -191,19 +191,16 @@ const CodeEditor = createClass({ }); // 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.updateSize(); - this.codeMirror.on('change', (cm)=>{ this.props.onChange(cm.getValue()); - this.state.widgetUtils.updateWidgetGutter(); }); - this.codeMirror.on('gutterClick', (cm, n)=>{ - const { gutterMarkers } = this.codeMirror.lineInfo(n); + this.updateSize(); - if(!!gutterMarkers && !!gutterMarkers['widget-gutter']) { + 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); @@ -212,12 +209,6 @@ const CodeEditor = createClass({ widgets : [...this.state.widgets, widget] }); } - } else { - this.codeMirror.operation(()=>{ - for (const widget of widgets) { - this.state.widgetUtils.removeLineWidgets(widget); - } - }); } } }); From b9aaee43c27f467f58a9b4a13560c3597512d6e5 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Tue, 4 Jul 2023 03:31:21 -0400 Subject: [PATCH 6/6] tweak cClass logic --- shared/naturalcrit/codeEditor/codeEditor.jsx | 2 +- .../codeEditor/helpers/widget-elements/index.js | 12 +++++++----- shared/naturalcrit/codeEditor/helpers/widgets.js | 2 +- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/shared/naturalcrit/codeEditor/codeEditor.jsx b/shared/naturalcrit/codeEditor/codeEditor.jsx index 86cf36104..85565e0de 100644 --- a/shared/naturalcrit/codeEditor/codeEditor.jsx +++ b/shared/naturalcrit/codeEditor/codeEditor.jsx @@ -464,7 +464,7 @@ const CodeEditor = createClass({ } if(!found) { for (const widget of this.state.widgets) { - this.state.widgetUtils.removeLineWidgets(widget); + widget.clear(); } this.setState({ widgets : [] diff --git a/shared/naturalcrit/codeEditor/helpers/widget-elements/index.js b/shared/naturalcrit/codeEditor/helpers/widget-elements/index.js index d1919a94c..937e7e32b 100644 --- a/shared/naturalcrit/codeEditor/helpers/widget-elements/index.js +++ b/shared/naturalcrit/codeEditor/helpers/widget-elements/index.js @@ -73,11 +73,13 @@ module.exports = function(CodeMirror, setHints) { }; return { + // checkbox widget cClass : function(cm, n, prefix, cClass) { const { text } = cm.lineInfo(n); - const id = `${_.kebabCase(prefix.replace('{{', ''))}-${_.kebabCase(cClass)}-${n}`; - const frameChange = (e)=>{ - if(!!e.target && e.target.checked) + const id = _.kebabCase(prefix + '-' + cClass + '-' + n); + prefix = `{{${prefix}`; + const handleChange = (e)=>{ + if(e.target?.checked) cm.replaceRange(`,${cClass}`, CodeMirror.Pos(n, prefix.length), CodeMirror.Pos(n, prefix.length), '+insert'); else { const start = text.indexOf(`,${cClass}`); @@ -87,8 +89,8 @@ module.exports = function(CodeMirror, setHints) { e.target.checked = true; } }; - return - + return + ; }, diff --git a/shared/naturalcrit/codeEditor/helpers/widgets.js b/shared/naturalcrit/codeEditor/helpers/widgets.js index 4b994cec7..89a2f0674 100644 --- a/shared/naturalcrit/codeEditor/helpers/widgets.js +++ b/shared/naturalcrit/codeEditor/helpers/widgets.js @@ -18,7 +18,7 @@ module.exports = function(CodeMirror, widgets, cm, setHints) { pattern : PATTERNS.widget[widget.type](widget.name), createWidget : (n, node)=>{ const parent = document.createElement('div'); - const classes = (widget.classes || []).map((c, i)=>cClass(cm, n, `{{${widget.name}`, c)); + const classes = (widget.classes || []).map((c, i)=>cClass(cm, n, `${widget.name}`, c)); const fieldNames = (widget.fields || []).map((f)=>f.name); const fields = (widget.fields || []).map((f, i)=>field(cm, n, f)).filter((f)=>!!f); const { text } = cm.lineInfo(n);