diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js index 3da15de746..880f245667 100644 --- a/packages/builder/src/builderStore/dataBinding.js +++ b/packages/builder/src/builderStore/dataBinding.js @@ -74,13 +74,9 @@ export const getDatasourceForProvider = (asset, component) => { }) if (dataProviderSetting) { const settingValue = component[dataProviderSetting.key] - const providerId = settingValue?.match(/{{\s*literal\s+(\S+)\s*}}/)[1] - if (providerId) { - const provider = findComponent(asset.props, providerId) - return getDatasourceForProvider(asset, provider) - } else { - return null - } + const providerId = extractLiteralHandlebarsID(settingValue) + const provider = findComponent(asset.props, providerId) + return getDatasourceForProvider(asset, provider) } // Extract datasource from component instance @@ -135,11 +131,9 @@ const getContextBindings = (asset, componentId) => { let datasource const setting = contextDefinition.dataProviderSetting const settingValue = component[setting] - if (settingValue) { - const providerId = settingValue.match(/{{\s*literal\s+(\S+)\s*}}/)[1] - const provider = findComponent(asset.props, providerId) - datasource = getDatasourceForProvider(asset, provider) - } + const providerId = extractLiteralHandlebarsID(settingValue) + const provider = findComponent(asset.props, providerId) + datasource = getDatasourceForProvider(asset, provider) if (!datasource) { return } @@ -367,6 +361,17 @@ function bindingReplacement(bindableProperties, textWithBindings, convertTo) { return result } +/** + * Extracts a component ID from a handlebars expression setting of + * {{ literal [componentId] }} + */ +function extractLiteralHandlebarsID(value) { + if (!value) { + return null + } + return value.match(/{{\s*literal[\s\[]+([a-fA-F0-9]+)[\s\]]*}}/)[1] +} + /** * Converts a readable data binding into a runtime data binding */