Ensure CodeMirror hints are rendered on top of modals

This commit is contained in:
Andrew Kingston 2021-11-23 16:57:51 +00:00
parent d72094e8ad
commit e65bfe5b9a
2 changed files with 8 additions and 3 deletions

View File

@ -1,6 +1,4 @@
<script context="module">
import { Label } from "@budibase/bbui"
export const EditorModes = {
JS: {
name: "javascript",
@ -21,6 +19,7 @@
</script>
<script>
import { Label } from "@budibase/bbui"
import CodeMirror from "components/integration/codemirror"
import { themeStore } from "builderStore"
import { createEventDispatcher, onMount } from "svelte"
@ -156,4 +155,9 @@
div :global(.CodeMirror-focused) {
border-color: var(--spectrum-alias-border-color-mouse-focus);
}
/* Ensure hints are always on top */
:global(.CodeMirror-hints) {
z-index: 999999;
}
</style>

View File

@ -49,6 +49,7 @@
$: filteredHelpers = helpers?.filter(helper => {
return helper.label.match(searchRgx) || helper.description.match(searchRgx)
})
$: codeMirrorHints = bindings?.map(x => `$("${x.readableBinding}")`)
const updateValue = value => {
valid = isValid(readableToRuntimeBinding(bindings, value))
@ -178,7 +179,7 @@
height={200}
value={decodeJSBinding(jsValue)}
on:change={onChangeJSValue}
hints={bindings?.map(x => `$("${x.readableBinding}")`)}
hints={codeMirrorHints}
/>
<Body size="S">
JavaScript expressions are executed as functions, so ensure that