frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5042 from node-red/5028-improve-auto-complete-long-keys

Browse Source 
Handle long auto-complete suggests
This commit is contained in:
Nick O'Leary 2025-02-10 16:51:31 +00:00 committed by GitHub
commit a0ddf96e03
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 56 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/node_modules/@node-red/editor-client/src/js/ui/common/autoComplete.js vendored
View File

@ -61,7 +61,7 @@
} }
this.menu = RED.popover.menu({ this.menu = RED.popover.menu({
tabSelect: true, tabSelect: true,
width: 300, width: Math.max(300, this.element.width()),
maxHeight: 200, maxHeight: 200,
class: "red-ui-autoComplete-container", class: "red-ui-autoComplete-container",
options: completions, options: completions,

36
packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js vendored
View File

@ -63,6 +63,7 @@
pre: value.substring(0,idx), pre: value.substring(0,idx),
match: value.substring(idx,idx+len), match: value.substring(idx,idx+len),
post: value.substring(idx+len), post: value.substring(idx+len),
exact: idx === 0 && value.length === searchValue.length
} }
} }
function generateSpans(match) { function generateSpans(match) {
@ -83,7 +84,7 @@
const srcMatch = getMatch(optSrc, val); const srcMatch = getMatch(optSrc, val);
if (valMatch.found || srcMatch.found) { if (valMatch.found || srcMatch.found) {
const element = $('<div>',{style: "display: flex"}); const element = $('<div>',{style: "display: flex"});
const valEl = $('<div/>',{style:"font-family: var(--red-ui-monospace-font); white-space:nowrap; overflow: hidden; flex-grow:1"}); const valEl = $('<div/>',{ class: "red-ui-autoComplete-completion" });
valEl.append(generateSpans(valMatch)); valEl.append(generateSpans(valMatch));
valEl.appendTo(element); valEl.appendTo(element);
if (optSrc) { if (optSrc) {
@ -159,7 +160,7 @@
if (valMatch.found) { if (valMatch.found) {
const optSrc = envVarsMap[v] const optSrc = envVarsMap[v]
const element = $('<div>',{style: "display: flex"}); const element = $('<div>',{style: "display: flex"});
const valEl = $('<div/>',{style:"font-family: var(--red-ui-monospace-font); white-space:nowrap; overflow: hidden; flex-grow:1"}); const valEl = $('<div/>',{ class: "red-ui-autoComplete-completion" });
valEl.append(generateSpans(valMatch)) valEl.append(generateSpans(valMatch))
valEl.appendTo(element) valEl.appendTo(element)
@ -201,7 +202,7 @@
const that = this const that = this
const getContextKeysFromRuntime = function(scope, store, searchKey, done) { const getContextKeysFromRuntime = function(scope, store, searchKey, done) {
contextKnownKeys[scope] = contextKnownKeys[scope] || {} contextKnownKeys[scope] = contextKnownKeys[scope] || {}
contextKnownKeys[scope][store] = contextKnownKeys[scope][store] || new Set() contextKnownKeys[scope][store] = contextKnownKeys[scope][store] || new Map()
if (searchKey.length > 0) { if (searchKey.length > 0) {
try { try {
RED.utils.normalisePropertyExpression(searchKey) RED.utils.normalisePropertyExpression(searchKey)
@ -223,11 +224,12 @@
const result = data[store] || {} const result = data[store] || {}
const keys = result.keys || [] const keys = result.keys || []
const keyPrefix = searchKey + (searchKey.length > 0 ? '.' : '') const keyPrefix = searchKey + (searchKey.length > 0 ? '.' : '')
keys.forEach(key => { keys.forEach(keyInfo => {
const key = keyInfo.key
if (/^[a-zA-Z_$][0-9a-zA-Z_$]*$/.test(key)) { if (/^[a-zA-Z_$][0-9a-zA-Z_$]*$/.test(key)) {
contextKnownKeys[scope][store].add(keyPrefix + key) contextKnownKeys[scope][store].set(keyPrefix + key, keyInfo)
} else { } else {
contextKnownKeys[scope][store].add(searchKey + "[\""+key.replace(/"/,"\\\"")+"\"]") contextKnownKeys[scope][store].set(searchKey + "[\""+key.replace(/"/,"\\\"")+"\"]", keyInfo)
} }
}) })
done() done()
@ -242,14 +244,14 @@
// Get the flow id of the node we're editing // Get the flow id of the node we're editing
const editStack = RED.editor.getEditStack() const editStack = RED.editor.getEditStack()
if (editStack.length === 0) { if (editStack.length === 0) {
done([]) done(new Map())
return return
} }
const editingNode = editStack.pop() const editingNode = editStack.pop()
if (editingNode.z) { if (editingNode.z) {
scope = `${scope}/${editingNode.z}` scope = `${scope}/${editingNode.z}`
} else { } else {
done([]) done(new Map())
return return
} }
} }
@ -269,17 +271,29 @@
return function(val, done) { return function(val, done) {
getContextKeys(val, function (keys) { getContextKeys(val, function (keys) {
const matches = [] const matches = []
keys.forEach(v => { keys.forEach((keyInfo, v) => {
let optVal = v let optVal = v
let valMatch = getMatch(optVal, val); let valMatch = getMatch(optVal, val);
if (!valMatch.found && val.length > 0 && val.endsWith('.')) { if (!valMatch.found && val.length > 0) {
if (val.endsWith('.')) {
// Search key ends in '.' - but doesn't match. Check again // Search key ends in '.' - but doesn't match. Check again
// with [" at the end instead so we match bracket notation // with [" at the end instead so we match bracket notation
valMatch = getMatch(optVal, val.substring(0, val.length - 1) + '["') valMatch = getMatch(optVal, val.substring(0, val.length - 1) + '["')
// } else if (val.endsWith('[') && /^array/.test(keyInfo.format)) {
// console.log('this case')
}
} }
if (valMatch.found) { if (valMatch.found) {
const element = $('<div>',{style: "display: flex"}); const element = $('<div>',{style: "display: flex"});
const valEl = $('<div/>',{style:"font-family: var(--red-ui-monospace-font); white-space:nowrap; overflow: hidden; flex-grow:1"}); const valEl = $('<div/>',{ class: "red-ui-autoComplete-completion" });
// if (keyInfo.format) {
// valMatch.post += ' ' + keyInfo.format
// }
if (valMatch.exact && /^array/.test(keyInfo.format)) {
valMatch.post += `[0-${keyInfo.length}]`
optVal += '['
}
valEl.append(generateSpans(valMatch)) valEl.append(generateSpans(valMatch))
valEl.appendTo(element) valEl.appendTo(element)
matches.push({ matches.push({

11
packages/node_modules/@node-red/editor-client/src/sass/ui/common/autoComplete.scss vendored
View File

@ -2,4 +2,15 @@
&.red-ui-popover-panel { &.red-ui-popover-panel {
border-top: none; border-top: none;
} }
}
.red-ui-autoComplete-completion {
font-family: var(--red-ui-monospace-font);
white-space: nowrap;
overflow: hidden;
flex-grow: 1;
text-overflow: ellipsis;
direction: rtl;
text-align: left;
} }

20
packages/node_modules/@node-red/runtime/lib/api/context.js vendored
View File

@ -104,13 +104,25 @@ var api = module.exports = {
store = store || availableStores.default; store = store || availableStores.default;
ctx.get(key,store,function(err, v) { ctx.get(key,store,function(err, v) {
if (opts.keysOnly) { if (opts.keysOnly) {
const result = {}
if (Array.isArray(v)) { if (Array.isArray(v)) {
resolve({ [store]: { format: `array[${v.length}]`}}) result.format = `array[${v.length}]`
} else if (typeof v === 'object') { } else if (typeof v === 'object') {
resolve({ [store]: { keys: Object.keys(v), format: 'Object' } }) result.keys = Object.keys(v).map(k => {
if (Array.isArray(v[k])) {
return { key: k, format: `array[${v[k].length}]`, length: v[k].length }
} else if (typeof v[k] === 'object') {
return { key: k, format: 'object' }
} else { } else {
resolve({ [store]: { keys: [] }}) return { key: k }
} }
})
result.format = 'object'
} else {
result.keys = []
}
resolve({ [store]: result })
return
} }
var encoded = util.encodeObject({msg:v}); var encoded = util.encodeObject({msg:v});
if (store !== availableStores.default) { if (store !== availableStores.default) {
@ -147,7 +159,7 @@ var api = module.exports = {
} }
return return
} }
result[store] = { keys } result[store] = { keys: keys.map(key => { return { key }}) }
c--; c--;
if (c === 0) { if (c === 0) {
if (!errorReported) { if (!errorReported) {