Add syntax highlighting to live binding eval
This commit is contained in:
parent
53bb890d3d
commit
86695c0ee4
3 changed files with 48 additions and 9 deletions
|
@ -70,6 +70,7 @@
|
||||||
"dayjs": "^1.10.8",
|
"dayjs": "^1.10.8",
|
||||||
"downloadjs": "1.4.7",
|
"downloadjs": "1.4.7",
|
||||||
"fast-json-patch": "^3.1.1",
|
"fast-json-patch": "^3.1.1",
|
||||||
|
"json-format-highlight": "^1.0.4",
|
||||||
"lodash": "4.17.21",
|
"lodash": "4.17.21",
|
||||||
"posthog-js": "^1.36.0",
|
"posthog-js": "^1.36.0",
|
||||||
"remixicon": "2.5.0",
|
"remixicon": "2.5.0",
|
||||||
|
|
|
@ -33,6 +33,7 @@
|
||||||
} from "../CodeEditor"
|
} from "../CodeEditor"
|
||||||
import BindingPicker from "./BindingPicker.svelte"
|
import BindingPicker from "./BindingPicker.svelte"
|
||||||
import { BindingHelpers } from "./utils"
|
import { BindingHelpers } from "./utils"
|
||||||
|
import formatHighlight from "json-format-highlight"
|
||||||
|
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher()
|
||||||
|
|
||||||
|
@ -123,6 +124,24 @@
|
||||||
onSelectBinding("", { forceJS: true })
|
onSelectBinding("", { forceJS: true })
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const highlight = json => {
|
||||||
|
// Attempt to parse and then stringify, in case this is valid JSON
|
||||||
|
try {
|
||||||
|
json = JSON.stringify(JSON.parse(json), null, 2)
|
||||||
|
} catch (err) {
|
||||||
|
// Ignore
|
||||||
|
}
|
||||||
|
|
||||||
|
return formatHighlight(json, {
|
||||||
|
keyColor: "#e06c75",
|
||||||
|
numberColor: "#e5c07b",
|
||||||
|
stringColor: "#98c379",
|
||||||
|
trueColor: "#d19a66",
|
||||||
|
falseColor: "#d19a66",
|
||||||
|
nullColor: "#c678dd",
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
valid = isValid(readableToRuntimeBinding(bindings, value))
|
valid = isValid(readableToRuntimeBinding(bindings, value))
|
||||||
})
|
})
|
||||||
|
@ -192,7 +211,7 @@
|
||||||
</div>
|
</div>
|
||||||
{#if expressionResult}
|
{#if expressionResult}
|
||||||
<div class="result">
|
<div class="result">
|
||||||
{expressionResult}
|
{@html highlight(expressionResult)}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
<div class="binding-footer">
|
<div class="binding-footer">
|
||||||
|
@ -301,7 +320,7 @@
|
||||||
</div>
|
</div>
|
||||||
{#if expressionResult}
|
{#if expressionResult}
|
||||||
<div class="result">
|
<div class="result">
|
||||||
{expressionResult}
|
{@html highlight(expressionResult)}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
<div class="binding-footer">
|
<div class="binding-footer">
|
||||||
|
@ -524,6 +543,6 @@
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
max-height: 92px;
|
max-height: 128px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -3,6 +3,7 @@
|
||||||
import { convertToJS, processStringSync } from "@budibase/string-templates"
|
import { convertToJS, processStringSync } from "@budibase/string-templates"
|
||||||
import { Input, Layout, ActionButton, Icon, Popover } from "@budibase/bbui"
|
import { Input, Layout, ActionButton, Icon, Popover } from "@budibase/bbui"
|
||||||
import { handlebarsCompletions } from "constants/completions"
|
import { handlebarsCompletions } from "constants/completions"
|
||||||
|
import formatHighlight from "json-format-highlight"
|
||||||
|
|
||||||
export let addHelper
|
export let addHelper
|
||||||
export let addBinding
|
export let addBinding
|
||||||
|
@ -70,8 +71,20 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
const getBindingValue = binding => {
|
const getBindingValue = binding => {
|
||||||
const hbs = `{{ ${binding.runtimeBinding} }}`
|
const hbs = `{{ literal ${binding.runtimeBinding} }}`
|
||||||
return processStringSync(hbs, context)
|
const res = processStringSync(hbs, context)
|
||||||
|
return JSON.stringify(res, null, 2)
|
||||||
|
}
|
||||||
|
|
||||||
|
const highlight = json => {
|
||||||
|
return formatHighlight(json, {
|
||||||
|
keyColor: "#e06c75",
|
||||||
|
numberColor: "#e5c07b",
|
||||||
|
stringColor: "#98c379",
|
||||||
|
trueColor: "#d19a66",
|
||||||
|
falseColor: "#d19a66",
|
||||||
|
nullColor: "#c678dd",
|
||||||
|
})
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -79,7 +92,7 @@
|
||||||
align="left-outside"
|
align="left-outside"
|
||||||
bind:this={popover}
|
bind:this={popover}
|
||||||
anchor={popoverAnchor}
|
anchor={popoverAnchor}
|
||||||
maxWidth={400}
|
maxWidth={600}
|
||||||
maxHeight={300}
|
maxHeight={300}
|
||||||
dismissible={false}
|
dismissible={false}
|
||||||
>
|
>
|
||||||
|
@ -92,7 +105,7 @@
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{#if hoverTarget.code}
|
{#if hoverTarget.code}
|
||||||
<pre>{hoverTarget.code}</pre>
|
<pre>{@html highlight(hoverTarget.code)}</pre>
|
||||||
{/if}
|
{/if}
|
||||||
</Layout>
|
</Layout>
|
||||||
</div>
|
</div>
|
||||||
|
@ -387,8 +400,14 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
white-space: pre-wrap;
|
white-space: pre;
|
||||||
word-break: break-all;
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.helper pre :global(span) {
|
||||||
|
overflow: hidden !important;
|
||||||
|
text-overflow: ellipsis !important;
|
||||||
|
white-space: nowrap !important;
|
||||||
}
|
}
|
||||||
.helper :global(p) {
|
.helper :global(p) {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
Loading…
Reference in a new issue