Merge pull request #3403 from Budibase/cheeks-lab-day

Inline text editing + perf. enhancements + preview enhancements

packages/builder/src/builderStore/store/frontend.js

@@ -620,6 +620,9 @@ export const getFrontendStore = () => {
         if (!name || !component) {
           return
         }
+        if (component[name] === value) {
+          return
+        }
         component[name] = value
         store.update(state => {
           state.selectedComponentId = component._id

packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte

@@ -36,11 +36,9 @@
   // Messages that can be sent from the iframe preview to the builder
   // Budibase events are and initalisation events
   const MessageTypes = {
-    IFRAME_LOADED: "iframe-loaded",
     READY: "ready",
     ERROR: "error",
     BUDIBASE: "type",
-    KEYDOWN: "keydown"
   }
 
   // Construct iframe template
@@ -69,7 +67,7 @@
     theme: $store.theme,
     customTheme: $store.customTheme,
     previewDevice: $store.previewDevice,
-    messagePassing: $store.clientFeatures.messagePassing
+    messagePassing: $store.clientFeatures.messagePassing,
   }
 
   // Saving pages and screens to the DB causes them to have _revs.
@@ -111,7 +109,6 @@
         loading = false
         error = event.error || "An unknown error occurred"
       },
-      [MessageTypes.KEYDOWN]: handleKeydownEvent
     }
 
     const messageHandler = handlers[message.data.type] || handleBudibaseEvent
@@ -122,15 +119,24 @@
     window.addEventListener("message", receiveMessage)
     if (!$store.clientFeatures.messagePassing) {
       // Legacy - remove in later versions of BB
-      iframe.contentWindow.addEventListener("ready", () => {
+      iframe.contentWindow.addEventListener(
-        receiveMessage({ data: { type: MessageTypes.READY }})
+        "ready",
-      }, { once: true })
+        () => {
-      iframe.contentWindow.addEventListener("error", event => {
+          receiveMessage({ data: { type: MessageTypes.READY } })
-        receiveMessage({ data: { type: MessageTypes.ERROR, error: event.detail }})
+        },
-      }, { once: true })
+        { once: true }
+      )
+      iframe.contentWindow.addEventListener(
+        "error",
+        event => {
+          receiveMessage({
+            data: { type: MessageTypes.ERROR, error: event.detail },
+          })
+        },
+        { once: true }
+      )
       // Add listener for events sent by client library in preview
       iframe.contentWindow.addEventListener("bb-event", handleBudibaseEvent)
-      iframe.contentWindow.addEventListener("keydown", handleKeydownEvent)
     }
   })
 
@@ -140,14 +146,20 @@
       window.removeEventListener("message", receiveMessage)
       if (!$store.clientFeatures.messagePassing) {
         // Legacy - remove in later versions of BB
-        iframe.contentWindow.removeEventListener("bb-event", handleBudibaseEvent)
+        iframe.contentWindow.removeEventListener(
-        iframe.contentWindow.removeEventListener("keydown", handleKeydownEvent)
+          "bb-event",
+          handleBudibaseEvent
+        )
       }
     }
   })
 
   const handleBudibaseEvent = event => {
     const { type, data } = event.data || event.detail
+    if (!type) {
+      return
+    }
+
     if (type === "select-component" && data.id) {
       store.actions.components.select({ _id: data.id })
     } else if (type === "update-prop") {
@@ -183,19 +195,6 @@
     }
   }
 
-  const handleKeydownEvent = event => {
-    const { key } = event.data || event
-    if (
-      (key === "Delete" || key === "Backspace") &&
-      selectedComponentId &&
-      ["input", "textarea"].indexOf(
-        iframe.contentWindow.document.activeElement?.tagName.toLowerCase()
-      ) === -1
-    ) {
-      confirmDeleteComponent(selectedComponentId)
-    }
-  }
-
   const confirmDeleteComponent = componentId => {
     idToDelete = componentId
     confirmDeleteDialog.show()

packages/builder/src/components/design/AppPreview/iframeTemplate.js

@@ -84,7 +84,6 @@ export default `
           if (window.loadBudibase) {
             window.loadBudibase()
             document.documentElement.classList.add("loaded")
-            window.parent.postMessage({ type: "iframe-loaded" })
           } else {
             throw "The client library couldn't be loaded"
           }
@@ -94,10 +93,6 @@ export default `
       }
 
       window.addEventListener("message", receiveMessage)
-      window.addEventListener("keydown", evt => {
-        window.parent.postMessage({ type: "keydown", key: event.key })
-      })
-
       window.parent.postMessage({ type: "ready" })
     </script>
   </head>

packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte

@@ -13,6 +13,12 @@
   $: noChildrenAllowed = !component || !definition?.hasChildren
   $: noPaste = !$store.componentToPaste
 
+  // "editable" has been repurposed for inline text editing.
+  // It remains here for legacy compatibility.
+  // Future components should define "static": true for indicate they should
+  // not show a context menu.
+  $: showMenu = definition?.editable !== false && definition?.static !== true
+
   const moveUpComponent = () => {
     const asset = get(currentAsset)
     const parent = findComponentParent(asset.props, component._id)
@@ -69,7 +75,7 @@
   }
 </script>
 
-{#if definition?.editable !== false}
+{#if showMenu}
   <ActionMenu>
     <div slot="control" class="icon">
       <Icon size="S" hoverable name="MoreSmallList" />

packages/builder/src/pages/builder/app/[application]/data/index.svelte

@@ -7,7 +7,7 @@
 
   let modal
   $: setupComplete =
-    $datasources.list.find(x => (x._id = "bb_internal")).entities.length > 1 ||
+    $datasources.list.find(x => (x._id = "bb_internal"))?.entities.length > 1 ||
     $datasources.list.length > 1
 
   onMount(() => {

packages/client/manifest.json

@@ -240,13 +240,15 @@
     "name": "Screenslot",
     "icon": "WebPage",
     "description": "Contains your app screens",
-    "editable": false
+    "static": true
   },
   "button": {
     "name": "Button",
     "description": "A basic html button that is ready for styling",
     "icon": "Button",
+    "editable": true,
     "illegalChildren": ["section"],
+    "showSettingsBar": true,
     "settings": [
       {
         "type": "text",
@@ -255,6 +257,7 @@
       },
       {
         "type": "select",
+        "showInBar": true,
         "label": "Variant",
         "key": "type",
         "options": [
@@ -283,6 +286,7 @@
       {
         "type": "select",
         "label": "Size",
+        "showInBar": true,
         "key": "size",
         "options": [
           {
@@ -307,11 +311,18 @@
       {
         "type": "boolean",
         "label": "Quiet",
-        "key": "quiet"
+        "key": "quiet",
+        "showInBar": true,
+        "barIcon": "VisibilityOff",
+        "barTitle": "Quiet variant",
+        "barSeparator": false
       },
       {
         "type": "boolean",
         "label": "Disabled",
+        "showInBar": true,
+        "barIcon": "NoEdit",
+        "barTitle": "Disable button",
         "key": "disabled"
       },
       {
@@ -590,6 +601,7 @@
     "icon": "TextParagraph",
     "illegalChildren": ["section"],
     "showSettingsBar": true,
+    "editable": true,
     "settings": [
       {
         "type": "text",
@@ -696,6 +708,7 @@
     "description": "A component for displaying heading text",
     "illegalChildren": ["section"],
     "showSettingsBar": true,
+    "editable": true,
     "settings": [
       {
         "type": "text",
@@ -940,6 +953,7 @@
     "description": "A basic link component for internal and external links",
     "icon": "Link",
     "showSettingsBar": true,
+    "editable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -1831,6 +1845,7 @@
     "icon": "Text",
     "illegalChildren": ["section"],
     "styles": ["size"],
+    "editable": true,
     "settings": [
       {
         "type": "field/string",
@@ -1869,6 +1884,7 @@
     "name": "Number Field",
     "icon": "123",
     "styles": ["size"],
+    "editable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -1908,6 +1924,7 @@
     "name": "Password Field",
     "icon": "LockClosed",
     "styles": ["size"],
+    "editable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -1947,6 +1964,7 @@
     "name": "Options Picker",
     "icon": "ViewList",
     "styles": ["size"],
+    "editable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -2070,6 +2088,7 @@
     "name": "Multi-select Picker",
     "icon": "ViewList",
     "styles": ["size"],
+    "editable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -2171,6 +2190,7 @@
   "booleanfield": {
     "name": "Checkbox",
     "icon": "Checkmark",
+    "editable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -2234,6 +2254,7 @@
     "name": "Rich Text",
     "icon": "TextParagraph",
     "styles": ["size"],
+    "editable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -2274,6 +2295,7 @@
     "name": "Date Picker",
     "icon": "DateInput",
     "styles": ["size"],
+    "editable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -2319,6 +2341,7 @@
     "name": "Attachment",
     "icon": "Attach",
     "styles": ["size"],
+    "editable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -2348,6 +2371,7 @@
     "name": "Relationship Picker",
     "icon": "TaskList",
     "styles": ["size"],
+    "editable": true,
     "illegalChildren": ["section"],
     "settings": [
       {

packages/client/src/components/ClientApp.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { writable } from "svelte/store"
+  import { writable, get } from "svelte/store"
   import { setContext, onMount } from "svelte"
   import { Layout, Heading, Body } from "@budibase/bbui"
   import Component from "./Component.svelte"
@@ -25,6 +25,7 @@
   import CustomThemeWrapper from "./CustomThemeWrapper.svelte"
   import DNDHandler from "components/preview/DNDHandler.svelte"
   import ErrorSVG from "builder/assets/error.svg"
+  import KeyboardManager from "components/preview/KeyboardManager.svelte"
 
   // Provide contexts
   setContext("sdk", SDK)
@@ -39,7 +40,7 @@
     await initialise()
     await authStore.actions.fetchUser()
     dataLoaded = true
-    if ($builderStore.inBuilder) {
+    if (get(builderStore).inBuilder) {
       builderStore.actions.notifyLoaded()
     } else {
       builderStore.actions.pingEndUser()
@@ -143,6 +144,7 @@
       </UserBindingsProvider>
     {/if}
   </div>
+  <KeyboardManager />
 {/if}
 
 <style>

packages/client/src/components/Component.svelte

@@ -4,7 +4,7 @@
 
 <script>
   import { getContext, setContext } from "svelte"
-  import { writable, get } from "svelte/store"
+  import { writable } from "svelte/store"
   import * as AppComponents from "components/app"
   import Router from "./Router.svelte"
   import { enrichProps, propsAreSame } from "utils/componentProps"
@@ -19,15 +19,22 @@
   export let isScreen = false
   export let isBlock = false
 
+  // Component settings are the un-enriched settings for this component that
+  // need to be enriched at this level.
+  // Nested settings are the un-enriched block settings that are to be passed on
+  // and enriched at a deeper level.
+  let componentSettings
+  let nestedSettings
+
   // The enriched component settings
   let enrichedSettings
 
-  // Any prop overrides that need to be applied due to conditional UI
+  // Any setting overrides that need to be applied due to conditional UI
   let conditionalSettings
 
-  // Settings are hashed when inside the builder preview and used as a key,
+  // Resultant cached settings which will be passed to the component instance.
-  // so that components fully remount whenever any settings change
+  // These are a combination of the enriched, nested and conditional settings.
-  let hash = 0
+  let cachedSettings
 
   // Latest timestamp that we started a props update.
   // Due to enrichment now being async, we need to avoid overwriting newer
@@ -63,6 +70,7 @@
   $: selected =
     $builderStore.inBuilder && $builderStore.selectedComponentId === id
   $: inSelectedPath = $builderStore.selectedComponentPath?.includes(id)
+  $: inDragPath = inSelectedPath && $builderStore.editMode
 
   // Interactive components can be selected, dragged and highlighted inside
   // the builder preview
@@ -70,7 +78,9 @@
     $builderStore.inBuilder &&
     ($builderStore.previewType === "layout" || insideScreenslot) &&
     !isBlock
-  $: draggable = interactive && !isLayout && !isScreen
+  $: editable = definition?.editable
+  $: editing = editable && selected && $builderStore.editMode
+  $: draggable = !inDragPath && interactive && !isLayout && !isScreen
   $: droppable = interactive && !isLayout && !isScreen
 
   // Empty components are those which accept children but do not have any.
@@ -79,44 +89,39 @@
   $: empty = interactive && !children.length && definition?.hasChildren
   $: emptyState = empty && definition?.showEmptyState !== false
 
-  // Raw props are all props excluding internal props and children
+  // Raw settings are all settings excluding internal props and children
   $: rawSettings = getRawSettings(instance)
   $: instanceKey = hashString(JSON.stringify(rawSettings))
 
-  // Component settings are those which are intended for this component and
+  // Update and enrich component settings
-  // which need to be enriched
+  $: updateSettings(rawSettings, instanceKey, settingsDefinition, $context)
-  $: componentSettings = getComponentSettings(rawSettings, settingsDefinition)
-  $: enrichComponentSettings(rawSettings, instanceKey, $context)
-
-  // Nested settings are those which are intended for child components inside
-  // blocks and which should not be enriched at this level
-  $: nestedSettings = getNestedSettings(rawSettings, settingsDefinition)
 
   // Evaluate conditional UI settings and store any component setting changes
   // which need to be made
   $: evaluateConditions(enrichedSettings?._conditions)
 
   // Build up the final settings object to be passed to the component
-  $: settings = {
+  $: cacheSettings(enrichedSettings, nestedSettings, conditionalSettings)
-    ...enrichedSettings,
-    ...nestedSettings,
-    ...conditionalSettings,
-  }
-
-  // Render key is used when in the builder preview to fully remount
-  // components when settings are changed
-  $: renderKey = `${hash}-${emptyState}`
 
   // Update component context
   $: componentStore.set({
     id,
     children: children.length,
-    styles: { ...instance._styles, id, empty: emptyState, interactive },
+    styles: {
+      ...instance._styles,
+      id,
+      empty: emptyState,
+      interactive,
+      draggable,
+      editable,
+    },
     empty: emptyState,
     selected,
     name,
+    editing,
   })
 
+  // Extracts all settings from the component instance
   const getRawSettings = instance => {
     let validSettings = {}
     Object.entries(instance)
@@ -137,12 +142,14 @@
     return AppComponents[name]
   }
 
+  // Gets this component's definition from the manifest
   const getComponentDefinition = component => {
     const prefix = "@budibase/standard-components/"
     const type = component?.replace(prefix, "")
     return type ? Manifest[type] : null
   }
 
+  // Gets the definition of this component's settings from the manifest
   const getSettingsDefinition = definition => {
     if (!definition) {
       return []
@@ -162,35 +169,50 @@
     return settings
   }
 
-  const getComponentSettings = (rawSettings, settingsDefinition) => {
+  // Updates and enriches component settings when raw settings change
-    let clone = { ...rawSettings }
+  const updateSettings = (settings, key, settingsDefinition, context) => {
-    settingsDefinition?.forEach(setting => {
+    const instanceChanged = key !== lastInstanceKey
-      if (setting.nested) {
+
-        delete clone[setting.key]
+    // Derive component and nested settings if the instance changed
-      }
+    if (instanceChanged) {
-    })
+      splitRawSettings(settings, settingsDefinition)
-    return clone
     }
 
-  const getNestedSettings = (rawSettings, settingsDefinition) => {
+    // Enrich component settings
-    let clone = { ...rawSettings }
+    enrichComponentSettings(componentSettings, context, instanceChanged)
+
+    // Update instance key
+    if (instanceChanged) {
+      lastInstanceKey = key
+    }
+  }
+
+  // Splits the raw settings into those destined for the component itself
+  // and nexted settings for child components inside blocks
+  const splitRawSettings = (rawSettings, settingsDefinition) => {
+    let newComponentSettings = { ...rawSettings }
+    let newNestedSettings = { ...rawSettings }
     settingsDefinition?.forEach(setting => {
-      if (!setting.nested) {
+      if (setting.nested) {
-        delete clone[setting.key]
+        delete newComponentSettings[setting.key]
+      } else {
+        delete newNestedSettings[setting.key]
       }
     })
-    return clone
+    componentSettings = newComponentSettings
+    nestedSettings = newNestedSettings
   }
 
   // Enriches any string component props using handlebars
-  const enrichComponentSettings = (rawSettings, instanceKey, context) => {
+  const enrichComponentSettings = (rawSettings, context, instanceChanged) => {
-    const instanceSame = instanceKey === lastInstanceKey
+    const contextChanged = context.key !== lastContextKey
-    const contextSame = context.key === lastContextKey
 
-    if (instanceSame && contextSame) {
+    // Skip enrichment if the context and instance are unchanged
+    if (!contextChanged) {
+      if (!instanceChanged) {
         return
+      }
     } else {
-      lastInstanceKey = instanceKey
       lastContextKey = context.key
     }
 
@@ -206,31 +228,11 @@
       return
     }
 
-    // Update the component props.
+    enrichedSettings = newEnrichedSettings
-    // Most props are deeply compared so that svelte will only trigger reactive
-    // statements on props that have actually changed.
-    if (!newEnrichedSettings) {
-      return
-    }
-    let propsChanged = false
-    if (!enrichedSettings) {
-      enrichedSettings = {}
-      propsChanged = true
-    }
-    Object.keys(newEnrichedSettings).forEach(key => {
-      if (!propsAreSame(newEnrichedSettings[key], enrichedSettings[key])) {
-        propsChanged = true
-        enrichedSettings[key] = newEnrichedSettings[key]
-      }
-    })
-
-    // Update the hash if we're in the builder so we can fully remount this
-    // component
-    if (get(builderStore).inBuilder && propsChanged) {
-      hash = hashString(JSON.stringify(enrichedSettings))
-    }
   }
 
+  // Evaluates the list of conditional UI conditions and determines any setting
+  // or visibility changes required
   const evaluateConditions = conditions => {
     if (!conditions?.length) {
       return
@@ -250,10 +252,25 @@
     conditionalSettings = result.settingUpdates
     visible = nextVisible
   }
+
+  // Combines and caches all settings which will be passed to the component
+  // instance. Settings are aggressively memoized to avoid triggering svelte
+  // reactive statements as much as possible.
+  const cacheSettings = (enriched, nested, conditional) => {
+    const allSettings = { ...enriched, ...nested, ...conditional }
+    if (!cachedSettings) {
+      cachedSettings = allSettings
+    } else {
+      Object.keys(allSettings).forEach(key => {
+        if (!propsAreSame(allSettings[key], cachedSettings[key])) {
+          cachedSettings[key] = allSettings[key]
+        }
+      })
+    }
+  }
 </script>
 
-{#key renderKey}
+{#if constructor && cachedSettings && (visible || inSelectedPath)}
-  {#if constructor && settings && (visible || inSelectedPath)}
   <!-- The ID is used as a class because getElementsByClassName is O(1) -->
   <!-- and the performance matters for the selection indicators -->
   <div
@@ -262,11 +279,12 @@
     class:droppable
     class:empty
     class:interactive
+    class:editing
     class:block={isBlock}
     data-id={id}
     data-name={name}
   >
-      <svelte:component this={constructor} {...settings}>
+    <svelte:component this={constructor} {...cachedSettings}>
       {#if children.length}
         {#each children as child (child._id)}
           <svelte:self instance={child} />
@@ -278,8 +296,7 @@
       {/if}
     </svelte:component>
   </div>
-  {/if}
+{/if}
-{/key}
 
 <style>
   .component {
@@ -291,4 +308,7 @@
   .draggable :global(*:hover) {
     cursor: grab;
   }
+  .editing :global(*:hover) {
+    cursor: auto;
+  }
 </style>

packages/client/src/components/CustomThemeWrapper.svelte

@@ -79,4 +79,9 @@
     scrollbar-color: var(--spectrum-global-color-gray-400)
       var(--spectrum-alias-background-color-default);
   }
+
+  /* Remove border when editing contenteditable components */
+  :global(*[contenteditable="true"]:focus) {
+    outline: none;
+  }
 </style>

packages/client/src/components/app/Button.svelte

@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
   import "@spectrum-css/button/dist/index-vars.css"
 
-  const { styleable } = getContext("sdk")
+  const { styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
 
   export let disabled = false
@@ -11,16 +11,35 @@
   export let size = "M"
   export let type = "primary"
   export let quiet = false
+
+  let node
+
+  $: $component.editing && node?.focus()
+  $: componentText = getComponentText(text, $builderStore, $component)
+
+  const getComponentText = (text, builderState, componentState) => {
+    if (!builderState.inBuilder || componentState.editing) {
+      return text || " "
+    }
+    return text || componentState.name || "Placeholder text"
+  }
+
+  const updateText = e => {
+    builderStore.actions.updateProp("text", e.target.textContent)
+  }
 </script>
 
 <button
   class={`spectrum-Button spectrum-Button--size${size} spectrum-Button--${type}`}
   class:spectrum-Button--quiet={quiet}
-  disabled={disabled || false}
+  {disabled}
   use:styleable={$component.styles}
   on:click={onClick}
+  contenteditable={$component.editing}
+  on:blur={$component.editing ? updateText : null}
+  bind:this={node}
 >
-  {text || ""}
+  {componentText}
 </button>
 
 <style>

packages/client/src/components/app/DataProvider.svelte

@@ -34,12 +34,18 @@
   let bookmarks = [null]
   let pageNumber = 0
   let query = null
+  let queryExtensions = {}
 
   // Sorting can be overridden at run time, so we can't use the prop directly
   let currentSortColumn = sortColumn
   let currentSortOrder = sortOrder
 
-  $: query = buildLuceneQuery(filter)
+  // Reset the current sort state to props if props change
+  $: currentSortColumn = sortColumn
+  $: currentSortOrder = sortOrder
+
+  $: defaultQuery = buildLuceneQuery(filter)
+  $: extendQuery(defaultQuery, queryExtensions)
   $: internalTable = dataSource?.type === "table"
   $: nestedProvider = dataSource?.type === "provider"
   $: hasNextPage = bookmarks[pageNumber + 1] != null
@@ -91,8 +97,12 @@
       metadata: { dataSource },
     },
     {
-      type: ActionTypes.SetDataProviderQuery,
+      type: ActionTypes.AddDataProviderQueryExtension,
-      callback: newQuery => (query = newQuery),
+      callback: addQueryExtension,
+    },
+    {
+      type: ActionTypes.RemoveDataProviderQueryExtension,
+      callback: removeQueryExtension,
     },
     {
       type: ActionTypes.SetDataProviderSorting,
@@ -264,6 +274,38 @@
     pageNumber--
     allRows = res.rows
   }
+
+  const addQueryExtension = (key, operator, field, value) => {
+    if (!key || !operator || !field) {
+      return
+    }
+    const extension = { operator, field, value }
+    queryExtensions = { ...queryExtensions, [key]: extension }
+  }
+
+  const removeQueryExtension = key => {
+    if (!key) {
+      return
+    }
+    const newQueryExtensions = { ...queryExtensions }
+    delete newQueryExtensions[key]
+    queryExtensions = newQueryExtensions
+  }
+
+  const extendQuery = (defaultQuery, extensions) => {
+    const extensionValues = Object.values(extensions || {})
+    let extendedQuery = { ...defaultQuery }
+    extensionValues.forEach(({ operator, field, value }) => {
+      extendedQuery[operator] = {
+        ...extendedQuery[operator],
+        [field]: value,
+      }
+    })
+
+    if (JSON.stringify(query) !== JSON.stringify(extendedQuery)) {
+      query = extendedQuery
+    }
+  }
 </script>
 
 <div use:styleable={$component.styles} class="container">

packages/client/src/components/app/DateRangePicker.svelte

@@ -3,7 +3,7 @@
   import { getContext } from "svelte"
   import dayjs from "dayjs"
   import utc from "dayjs/plugin/utc"
-  import { onMount } from "svelte"
+  import { onDestroy } from "svelte"
 
   dayjs.extend(utc)
 
@@ -14,7 +14,14 @@
   const component = getContext("component")
   const { styleable, ActionTypes, getAction } = getContext("sdk")
 
-  const setQuery = getAction(dataProvider?.id, ActionTypes.SetDataProviderQuery)
+  $: addExtension = getAction(
+    dataProvider?.id,
+    ActionTypes.AddDataProviderQueryExtension
+  )
+  $: removeExtension = getAction(
+    dataProvider?.id,
+    ActionTypes.RemoveDataProviderQueryExtension
+  )
   const options = [
     "Last 1 day",
     "Last 7 days",
@@ -25,44 +32,30 @@
   ]
   let value = options.includes(defaultValue) ? defaultValue : "Last 30 days"
 
-  const updateDateRange = option => {
+  $: queryExtension = getQueryExtension(value)
-    const query = dataProvider?.state?.query
+  $: addExtension?.($component.id, "range", field, queryExtension)
-    if (!query || !setQuery) {
-      return
-    }
 
-    value = option
+  const getQueryExtension = value => {
     let low = dayjs.utc().subtract(1, "year")
     let high = dayjs.utc().add(1, "day")
 
-    if (option === "Last 1 day") {
+    if (value === "Last 1 day") {
       low = dayjs.utc().subtract(1, "day")
-    } else if (option === "Last 7 days") {
+    } else if (value === "Last 7 days") {
       low = dayjs.utc().subtract(7, "days")
-    } else if (option === "Last 30 days") {
+    } else if (value === "Last 30 days") {
       low = dayjs.utc().subtract(30, "days")
-    } else if (option === "Last 3 months") {
+    } else if (value === "Last 3 months") {
       low = dayjs.utc().subtract(3, "months")
-    } else if (option === "Last 6 months") {
+    } else if (value === "Last 6 months") {
       low = dayjs.utc().subtract(6, "months")
     }
 
-    // Update data provider query with the new filter
+    return { low: low.format(), high: high.format() }
-    setQuery({
-      ...query,
-      range: {
-        ...query.range,
-        [field]: {
-          high: high.format(),
-          low: low.format(),
-        },
-      },
-    })
   }
 
-  // Update the range on mount to the initial value
+  onDestroy(() => {
-  onMount(() => {
+    removeExtension?.($component.id)
-    updateDateRange(value)
   })
 </script>
 
@@ -71,6 +64,6 @@
     placeholder={null}
     {options}
     {value}
-    on:change={e => updateDateRange(e.detail)}
+    on:change={e => (value = e.detail)}
   />
 </div>

packages/client/src/components/app/Heading.svelte

@@ -13,10 +13,11 @@
   export let underline
   export let size
 
-  $: placeholder = $builderStore.inBuilder && !text
+  let node
-  $: componentText = $builderStore.inBuilder
+
-    ? text || $component.name || "Placeholder text"
+  $: $component.editing && node?.focus()
-    : text || ""
+  $: placeholder = $builderStore.inBuilder && !text && !$component.editing
+  $: componentText = getComponentText(text, $builderStore, $component)
   $: sizeClass = `spectrum-Heading--size${size || "M"}`
   $: alignClass = `align--${align || "left"}`
 
@@ -24,6 +25,13 @@
   // overrides the color when it's passed as inline style.
   $: styles = enrichStyles($component.styles, color)
 
+  const getComponentText = (text, builderState, componentState) => {
+    if (!builderState.inBuilder || componentState.editing) {
+      return text || ""
+    }
+    return text || componentState.name || "Placeholder text"
+  }
+
   const enrichStyles = (styles, color) => {
     if (!color) {
       return styles
@@ -36,15 +44,24 @@
       },
     }
   }
+
+  // Convert contenteditable HTML to text and save
+  const updateText = e => {
+    const sanitized = e.target.innerHTML.replace(/<br>/gi, "\n")
+    builderStore.actions.updateProp("text", sanitized)
+  }
 </script>
 
 <h1
+  bind:this={node}
+  contenteditable={$component.editing}
   use:styleable={styles}
   class:placeholder
   class:bold
   class:italic
   class:underline
   class="spectrum-Heading {sizeClass} {alignClass}"
+  on:blur={$component.editing ? updateText : null}
 >
   {componentText}
 </h1>

packages/client/src/components/app/Link.svelte

@@ -14,19 +14,25 @@
   export let underline
   export let size
 
-  $: external = url && typeof url === "string" && !url.startsWith("/")
+  let node
+
+  $: $component.editing && node?.focus()
+  $: externalLink = url && typeof url === "string" && !url.startsWith("/")
   $: target = openInNewTab ? "_blank" : "_self"
   $: placeholder = $builderStore.inBuilder && !text
-  $: componentText = $builderStore.inBuilder
+  $: componentText = getComponentText(text, $builderStore, $component)
-    ? text || "Placeholder link"
-    : text || ""
 
-  // Add color styles to main styles object, otherwise the styleable helper
-  // overrides the color when it's passed as inline style.
   // Add color styles to main styles object, otherwise the styleable helper
   // overrides the color when it's passed as inline style.
   $: styles = enrichStyles($component.styles, color)
 
+  const getComponentText = (text, builderState, componentState) => {
+    if (!builderState.inBuilder || componentState.editing) {
+      return text || ""
+    }
+    return text || componentState.name || "Placeholder text"
+  }
+
   const enrichStyles = (styles, color) => {
     if (!color) {
       return styles
@@ -39,10 +45,27 @@
       },
     }
   }
+
+  const updateText = e => {
+    builderStore.actions.updateProp("text", e.target.textContent)
+  }
 </script>
 
-{#if $builderStore.inBuilder || componentText}
+{#if $component.editing}
-  {#if external}
+  <div
+    bind:this={node}
+    contenteditable
+    use:styleable={styles}
+    class:bold
+    class:italic
+    class:underline
+    class="align--{align || 'left'} size--{size || 'M'}"
+    on:blur={$component.editing ? updateText : null}
+  >
+    {componentText}
+  </div>
+{:else if $builderStore.inBuilder || componentText}
+  {#if externalLink}
     <a
       {target}
       href={url || "/"}
@@ -72,12 +95,12 @@
 {/if}
 
 <style>
-  a {
+  a,
+  div {
     color: var(--spectrum-alias-text-color);
-    white-space: nowrap;
     transition: color 130ms ease-in-out;
   }
-  a:hover {
+  a:not(.placeholder):hover {
     color: var(--spectrum-link-primary-m-text-color-hover) !important;
   }
   .placeholder {

packages/client/src/components/app/Text.svelte

@@ -12,10 +12,11 @@
   export let underline
   export let size
 
-  $: placeholder = $builderStore.inBuilder && !text
+  let node
-  $: componentText = $builderStore.inBuilder
+
-    ? text || $component.name || "Placeholder text"
+  $: $component.editing && node?.focus()
-    : text || ""
+  $: placeholder = $builderStore.inBuilder && !text && !$component.editing
+  $: componentText = getComponentText(text, $builderStore, $component)
   $: sizeClass = `spectrum-Body--size${size || "M"}`
   $: alignClass = `align--${align || "left"}`
 
@@ -23,6 +24,13 @@
   // overrides the color when it's passed as inline style.
   $: styles = enrichStyles($component.styles, color)
 
+  const getComponentText = (text, builderState, componentState) => {
+    if (!builderState.inBuilder || componentState.editing) {
+      return text || ""
+    }
+    return text || componentState.name || "Placeholder text"
+  }
+
   const enrichStyles = (styles, color) => {
     if (!color) {
       return styles
@@ -35,15 +43,24 @@
       },
     }
   }
+
+  // Convert contenteditable HTML to text and save
+  const updateText = e => {
+    const sanitized = e.target.innerHTML.replace(/<br>/gi, "\n")
+    builderStore.actions.updateProp("text", sanitized)
+  }
 </script>
 
 <p
+  bind:this={node}
+  contenteditable={$component.editing}
   use:styleable={styles}
   class:placeholder
   class:bold
   class:italic
   class:underline
   class="spectrum-Body {sizeClass} {alignClass}"
+  on:blur={$component.editing ? updateText : null}
 >
   {componentText}
 </p>

packages/client/src/components/app/blocks/CardsBlock.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { onMount, getContext } from "svelte"
+  import { getContext } from "svelte"
   import Block from "components/Block.svelte"
   import BlockComponent from "components/BlockComponent.svelte"
   import { Heading } from "@budibase/bbui"
@@ -46,6 +46,7 @@
   let repeaterId
   let schema
 
+  $: fetchSchema(dataSource)
   $: enrichedSearchColumns = enrichSearchColumns(searchColumns, schema)
   $: enrichedFilter = enrichFilter(filter, enrichedSearchColumns, formId)
   $: cardWidth = cardHorizontal ? 420 : 300
@@ -107,12 +108,12 @@
     return `${split[0]}/{{ ${safe(repeaterId)}.${safe(col)} }}`
   }
 
-  // Load the datasource schema on mount so we can determine column types
+  // Load the datasource schema so we can determine column types
-  onMount(async () => {
+  const fetchSchema = async dataSource => {
     if (dataSource) {
       schema = await API.fetchDatasourceSchema(dataSource)
     }
-  })
+  }
 </script>
 
 <Block>

packages/client/src/components/app/blocks/TableBlock.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { onMount, getContext } from "svelte"
+  import { getContext } from "svelte"
   import Block from "components/Block.svelte"
   import BlockComponent from "components/BlockComponent.svelte"
   import { Heading } from "@budibase/bbui"
@@ -41,6 +41,7 @@
   let dataProviderId
   let schema
 
+  $: fetchSchema(dataSource)
   $: enrichedSearchColumns = enrichSearchColumns(searchColumns, schema)
   $: enrichedFilter = enrichFilter(filter, enrichedSearchColumns, formId)
   $: titleButtonAction = [
@@ -85,12 +86,12 @@
     return enrichedColumns.slice(0, 3)
   }
 
-  // Load the datasource schema on mount so we can determine column types
+  // Load the datasource schema so we can determine column types
-  onMount(async () => {
+  const fetchSchema = async dataSource => {
     if (dataSource) {
       schema = await API.fetchDatasourceSchema(dataSource)
     }
-  })
+  }
 </script>
 
 <Block>

packages/client/src/components/app/forms/Field.svelte

@@ -17,54 +17,53 @@
   const formContext = getContext("form")
   const formStepContext = getContext("form-step")
   const fieldGroupContext = getContext("field-group")
-  const { styleable } = getContext("sdk")
+  const { styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
 
   // Register field with form
   const formApi = formContext?.formApi
   const labelPos = fieldGroupContext?.labelPosition || "above"
-  const formField = formApi?.registerField(
+  $: formStep = formStepContext ? $formStepContext || 1 : 1
+  $: formField = formApi?.registerField(
     field,
     type,
     defaultValue,
     disabled,
     validation,
-    formStepContext || 1
+    formStep
   )
 
+  // Focus label when editing
+  let labelNode
+  $: $component.editing && labelNode?.focus()
+
   // Update form properties in parent component on every store change
-  const unsubscribe = formField?.subscribe(value => {
+  $: unsubscribe = formField?.subscribe(value => {
     fieldState = value?.fieldState
     fieldApi = value?.fieldApi
     fieldSchema = value?.fieldSchema
   })
   onDestroy(() => unsubscribe?.())
 
-  // Keep field state up to date with props which might change due to
-  // conditional UI
-  $: updateValidation(validation)
-  $: updateDisabled(disabled)
-
   // Determine label class from position
   $: labelClass = labelPos === "above" ? "" : `spectrum-FieldLabel--${labelPos}`
 
-  const updateValidation = validation => {
+  const updateLabel = e => {
-    fieldApi?.updateValidation(validation)
+    builderStore.actions.updateProp("label", e.target.textContent)
-  }
-
-  const updateDisabled = disabled => {
-    fieldApi?.setDisabled(disabled)
   }
 </script>
 
 <FieldGroupFallback>
   <div class="spectrum-Form-item" use:styleable={$component.styles}>
     <label
+      bind:this={labelNode}
+      contenteditable={$component.editing}
+      on:blur={$component.editing ? updateLabel : null}
       class:hidden={!label}
       for={fieldState?.fieldId}
       class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelClass}`}
     >
-      {label || ""}
+      {label || " "}
     </label>
     <div class="spectrum-Form-itemField">
       {#if !formContext}

packages/client/src/components/app/forms/Form.svelte

@@ -1,6 +1,7 @@
 <script>
-  import { getContext, onMount } from "svelte"
+  import { getContext } from "svelte"
   import InnerForm from "./InnerForm.svelte"
+  import { hashString } from "utils/helpers"
 
   export let dataSource
   export let theme
@@ -15,6 +16,8 @@
   let schema
   let table
 
+  $: fetchSchema(dataSource)
+
   // Returns the closes data context which isn't a built in context
   const getInitialValues = (type, dataSource, context) => {
     // Only inherit values for update forms
@@ -35,7 +38,7 @@
   }
 
   // Fetches the form schema from this form's dataSource
-  const fetchSchema = async () => {
+  const fetchSchema = async dataSource => {
     if (!dataSource) {
       schema = {}
     }
@@ -62,14 +65,15 @@
       schema = dataSourceSchema || {}
     }
 
+    if (!loaded) {
       loaded = true
     }
+  }
 
   $: initialValues = getInitialValues(actionType, dataSource, $context)
-  $: resetKey = JSON.stringify(initialValues)
+  $: resetKey = hashString(
-
+    JSON.stringify(initialValues) + JSON.stringify(schema)
-  // Load the form schema on mount
+  )
-  onMount(fetchSchema)
 </script>
 
 {#if loaded}

packages/client/src/components/app/forms/FormStep.svelte

@@ -1,5 +1,6 @@
 <script>
   import { getContext, setContext } from "svelte"
+  import { writable } from "svelte/store"
   import Placeholder from "../Placeholder.svelte"
 
   export let step = 1
@@ -9,7 +10,9 @@
   const formContext = getContext("form")
 
   // Set form step context so fields know what step they are within
-  setContext("form-step", step || 1)
+  const stepStore = writable(step || 1)
+  $: stepStore.set(step || 1)
+  setContext("form-step", stepStore)
 
   $: formState = formContext?.formState
   $: currentStep = $formState?.currentStep

packages/client/src/components/app/forms/InnerForm.svelte

@@ -96,15 +96,14 @@
         return
       }
 
-      // If we've already registered this field then wipe any errors and
+      // If we've already registered this field then keep some existing state
-      // return the existing field
+      let initialValue = initialValues[field] ?? defaultValue
+      let fieldId = `id-${generateID()}`
       const existingField = getField(field)
       if (existingField) {
-        existingField.update(state => {
+        const { fieldState } = get(existingField)
-          state.fieldState.error = null
+        initialValue = fieldState.value ?? initialValue
-          return state
+        fieldId = fieldState.fieldId
-        })
-        return existingField
       }
 
       // Auto columns are always disabled
@@ -125,8 +124,8 @@
         type,
         step: step || 1,
         fieldState: {
-          fieldId: `id-${generateID()}`,
+          fieldId,
-          value: initialValues[field] ?? defaultValue,
+          value: initialValue,
           error: null,
           disabled: disabled || fieldDisabled || isAutoColumn,
           defaultValue,
@@ -137,7 +136,12 @@
       })
 
       // Add this field
+      if (existingField) {
+        const otherFields = fields.filter(info => get(info).name !== field)
+        fields = [...otherFields, fieldInfo]
+      } else {
         fields = [...fields, fieldInfo]
+      }
 
       return fieldInfo
     },
@@ -287,7 +291,7 @@
 
   // Provide form step context so that forms without any step components
   // register their fields to step 1
-  setContext("form-step", 1)
+  setContext("form-step", writable(1))
 
   // Action context to pass to children
   const actions = [

packages/client/src/components/app/table/Table.svelte

@@ -17,10 +17,6 @@
 
   const component = getContext("component")
   const { styleable, getAction, ActionTypes, routeStore } = getContext("sdk")
-  const setSorting = getAction(
-    dataProvider?.id,
-    ActionTypes.SetDataProviderSorting
-  )
   const customColumnKey = `custom-${Math.random()}`
   const customRenderers = [
     {
@@ -29,13 +25,16 @@
     },
   ]
 
-  // Table state
   $: hasChildren = $component.children
   $: loading = dataProvider?.loading ?? false
   $: data = dataProvider?.rows || []
   $: fullSchema = dataProvider?.schema ?? {}
   $: fields = getFields(fullSchema, columns, showAutoColumns)
   $: schema = getFilteredSchema(fullSchema, fields, hasChildren)
+  $: setSorting = getAction(
+    dataProvider?.id,
+    ActionTypes.SetDataProviderSorting
+  )
 
   const getFields = (schema, customColumns, showAutoColumns) => {
     // Check for an invalid column selection

packages/client/src/components/preview/Indicator.svelte

@@ -17,10 +17,9 @@
 
 <div
   in:fade={{
-    delay: transition ? 50 : 0,
+    delay: transition ? 130 : 0,
     duration: transition ? 130 : 0,
   }}
-  out:fade={{ duration: transition ? 130 : 0 }}
   class="indicator"
   class:flipped
   class:line

packages/client/src/components/preview/KeyboardManager.svelte

@@ -0,0 +1,35 @@
+<script>
+  import { onMount, onDestroy } from "svelte"
+  import { get } from "svelte/store"
+  import { builderStore } from "stores"
+
+  onMount(() => {
+    if (get(builderStore).inBuilder) {
+      document.addEventListener("keydown", onKeyDown)
+    }
+  })
+
+  onDestroy(() => {
+    if (get(builderStore).inBuilder) {
+      document.removeEventListener("keydown", onKeyDown)
+    }
+  })
+
+  const onKeyDown = e => {
+    if (e.key === "Delete" || e.key === "Backspace") {
+      deleteSelectedComponent()
+    }
+  }
+
+  const deleteSelectedComponent = () => {
+    const state = get(builderStore)
+    if (!state.inBuilder || !state.selectedComponentId || state.editMode) {
+      return
+    }
+    const activeTag = document.activeElement?.tagName.toLowerCase()
+    if (["input", "textarea"].indexOf(activeTag) !== -1) {
+      return
+    }
+    builderStore.actions.deleteComponent(state.selectedComponentId)
+  }
+</script>

packages/client/src/components/preview/SelectionIndicator.svelte

@@ -1,11 +1,15 @@
 <script>
   import { builderStore } from "stores"
   import IndicatorSet from "./IndicatorSet.svelte"
+
+  $: color = $builderStore.editMode
+    ? "var(--spectrum-global-color-static-green-500)"
+    : "var(--spectrum-global-color-static-blue-600)"
 </script>
 
 <IndicatorSet
   componentId={$builderStore.selectedComponentId}
-  color="var(--spectrum-global-color-static-blue-600)"
+  {color}
   zIndex="910"
   transition
 />

packages/client/src/components/preview/SettingsBar.svelte

@@ -122,7 +122,7 @@
               prop={setting.key}
               value={option.value}
               icon={option.barIcon}
-              title={option.barTitle}
+              title={option.barTitle || option.label}
             />
           {/each}
         {:else}
@@ -136,7 +136,7 @@
         <SettingsButton
           prop={setting.key}
           icon={setting.barIcon}
-          title={setting.barTitle}
+          title={setting.barTitle || setting.label}
           bool
         />
       {:else if setting.type === "color"}

packages/client/src/constants.js

@@ -25,7 +25,8 @@ export const UnsortableTypes = [
 export const ActionTypes = {
   ValidateForm: "ValidateForm",
   RefreshDatasource: "RefreshDatasource",
-  SetDataProviderQuery: "SetDataProviderQuery",
+  AddDataProviderQueryExtension: "AddDataProviderQueryExtension",
+  RemoveDataProviderQueryExtension: "RemoveDataProviderQueryExtension",
   SetDataProviderSorting: "SetDataProviderSorting",
   ClearForm: "ClearForm",
   ChangeFormStep: "ChangeFormStep",

packages/client/src/stores/builder.js

@@ -1,4 +1,4 @@
-import { writable, derived } from "svelte/store"
+import { writable, derived, get } from "svelte/store"
 import Manifest from "manifest.json"
 import { findComponentById, findComponentPathById } from "../utils/components"
 import { pingEndUser } from "../api"
@@ -14,6 +14,7 @@ const createBuilderStore = () => {
     layout: null,
     screen: null,
     selectedComponentId: null,
+    editMode: false,
     previewId: null,
     previewType: null,
     selectedPath: [],
@@ -50,6 +51,10 @@ const createBuilderStore = () => {
 
   const actions = {
     selectComponent: id => {
+      if (id === get(writableStore).selectedComponentId) {
+        return
+      }
+      writableStore.update(state => ({ ...state, editMode: false }))
       dispatchEvent("select-component", { id })
     },
     updateProp: (prop, value) => {
@@ -65,10 +70,7 @@ const createBuilderStore = () => {
       pingEndUser()
     },
     setSelectedPath: path => {
-      writableStore.update(state => {
+      writableStore.update(state => ({ ...state, selectedPath: path }))
-        state.selectedPath = path
-        return state
-      })
     },
     moveComponent: (componentId, destinationComponentId, mode) => {
       dispatchEvent("move-component", {
@@ -78,10 +80,16 @@ const createBuilderStore = () => {
       })
     },
     setDragging: dragging => {
-      writableStore.update(state => {
+      if (dragging === get(writableStore).isDragging) {
-        state.isDragging = dragging
+        return
-        return state
+      }
-      })
+      writableStore.update(state => ({ ...state, isDragging: dragging }))
+    },
+    setEditMode: enabled => {
+      if (enabled === get(writableStore).editMode) {
+        return
+      }
+      writableStore.update(state => ({ ...state, editMode: enabled }))
     },
   }
   return {

packages/client/src/utils/styleable.js

@@ -21,12 +21,7 @@ export const styleable = (node, styles = {}) => {
   let applyNormalStyles
   let applyHoverStyles
   let selectComponent
-
+  let editComponent
-  // Allow dragging if required
-  const parent = node.closest(".component")
-  if (parent && parent.classList.contains("draggable")) {
-    node.setAttribute("draggable", true)
-  }
 
   // Creates event listeners and applies initial styles
   const setupStyles = (newStyles = {}) => {
@@ -45,6 +40,9 @@ export const styleable = (node, styles = {}) => {
       ...(newStyles.hover || {}),
     }
 
+    // Allow dragging if required
+    node.setAttribute("draggable", !!newStyles.draggable)
+
     // Applies a style string to a DOM node
     const applyStyles = styleString => {
       node.style = styleString
@@ -69,6 +67,17 @@ export const styleable = (node, styles = {}) => {
       return false
     }
 
+    // Handler to start editing a component (if applicable) when double
+    // clicking in the builder preview
+    editComponent = event => {
+      if (newStyles.interactive && newStyles.editable) {
+        builderStore.actions.setEditMode(true)
+      }
+      event.preventDefault()
+      event.stopPropagation()
+      return false
+    }
+
     // Add listeners to toggle hover styles
     node.addEventListener("mouseover", applyHoverStyles)
     node.addEventListener("mouseout", applyNormalStyles)
@@ -76,6 +85,7 @@ export const styleable = (node, styles = {}) => {
     // Add builder preview click listener
     if (newStyles.interactive) {
       node.addEventListener("click", selectComponent, false)
+      node.addEventListener("dblclick", editComponent, false)
     }
 
     // Apply initial normal styles
@@ -87,6 +97,7 @@ export const styleable = (node, styles = {}) => {
     node.removeEventListener("mouseover", applyHoverStyles)
     node.removeEventListener("mouseout", applyNormalStyles)
     node.removeEventListener("click", selectComponent)
+    node.removeEventListener("dblclick", editComponent)
   }
 
   // Apply initial styles