diff --git a/src/style.css b/src/style.css index 11c7343..872538e 100644 --- a/src/style.css +++ b/src/style.css @@ -75,7 +75,8 @@ color: #007bff !important; } - .sp-container .sp-variable-value { + .sp-container .sp-variable-value, + .sp-container .sp-variable-icon.layers_fill { background: #1d222b !important; color: #007aff !important; } @@ -265,12 +266,6 @@ color: #067aff; } -.sp-container .sp-value { - background: #f4f7ff; - font-weight: bold; - font-size: 0.9rem; -} - .sp-container .sp-variable-value { background: #e2f0ff; padding: 0 5px; @@ -281,6 +276,12 @@ place-content: center; } +.sp-container .sp-value { + background: #f4f7ff; + font-weight: bold; + font-size: 0.9rem; +} + .sp-container .sp-variable-icon { width: 15px; height: 15px; @@ -293,6 +294,15 @@ font-size: 0.7rem; } +.sp-container .sp-variable-icon.wand_stars { + background: #8e8e93 +} + +.sp-container .sp-variable-icon.layers_fill { + background: #e2f0ff; + color: #067aff; +} + .sp-container .sp-scrollable-action-content { display: block; border: 1px solid #f1f1f1; diff --git a/src/value.ts b/src/value.ts index a0685d3..a98e0c3 100644 --- a/src/value.ts +++ b/src/value.ts @@ -42,32 +42,34 @@ export function renderValue(value?: any, placeholder: string = 'Value'): HTMLEle } function renderObjectValue(container: HTMLElement, value?: any) { - if (!value || !value.Value) { + if (!value) { container.innerText = '[Empty Value]'; return; } let varName; let varType; - if (value.Value.attachmentsByRange) { - let str = String(value.Value.string); - for (let v in value.Value.attachmentsByRange) { - let variable = value.Value.attachmentsByRange[v]; - let varTypeName = variable.OutputName ?? variable.VariableName ?? variable.PropertyName; - if (variable.Aggrandizements) { - const aggrandizements = variable.Aggrandizements[0]; - switch (aggrandizements.Type) { - case 'WFCoercionVariableAggrandizement': - varTypeName += `as ${aggrandizements.CoercionItemClass}`; - break; + if (value.Value) { + if (value.Value.attachmentsByRange) { + let str = String(value.Value.string); + for (let v in value.Value.attachmentsByRange) { + let variable = value.Value.attachmentsByRange[v]; + let varTypeName = variable.OutputName ?? variable.VariableName ?? variable.PropertyName; + if (variable.Aggrandizements) { + const aggrandizements = variable.Aggrandizements[0]; + switch (aggrandizements.Type) { + case 'WFCoercionVariableAggrandizement': + varTypeName += `as ${aggrandizements.CoercionItemClass}`; + break; + } } + const inlineVar = renderInlineVariable(varTypeName, variable.Type); + str = str.replace('\uFFFC', inlineVar.outerHTML); } - const inlineVar = renderInlineVariable(varTypeName, variable.Type); - str = str.replace('\uFFFC', inlineVar.outerHTML); + container.innerHTML = str; + return; } - container.innerHTML = str; - return; - } else if (value.Value) { + varName = value.Value.VariableName ?? value.Value.OutputName; varType = value.Value.Type; } else if (value.Variable) { @@ -100,7 +102,12 @@ function variableIcon(valueType: string) { } } -function renderInlineVariable(v: string, char?: string) { +function renderInlineVariable(varName: string, char?: string) { + switch (varName) { + case 'ShortcutInput': + varName = 'Shortcut Input'; + } + const variable = document.createElement('div'); variable.className = 'sp-variable-value'; @@ -114,13 +121,13 @@ function renderInlineVariable(v: string, char?: string) { i.innerText = char ?? 'f_cursive'; icon.appendChild(i); - if (char && char === 'wand_stars') { - icon.style.backgroundColor = '#8e8e93'; + if (char) { + icon.classList.add(char); } variable.appendChild(icon); const name = document.createElement('div'); - name.innerText = v; + name.innerText = varName; variable.appendChild(name); return variable;