From b5c97c13bb364e3d6caff811142a2cdc8237b12d Mon Sep 17 00:00:00 2001 From: Duncan McClean Date: Thu, 15 Jan 2026 14:12:29 +0000 Subject: [PATCH 1/3] Only show set selected state when TipTap editor is focused --- resources/js/components/fieldtypes/bard/Set.vue | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/resources/js/components/fieldtypes/bard/Set.vue b/resources/js/components/fieldtypes/bard/Set.vue index 0df701732e..168c0d51ac 100644 --- a/resources/js/components/fieldtypes/bard/Set.vue +++ b/resources/js/components/fieldtypes/bard/Set.vue @@ -7,7 +7,7 @@ // We’re styling a Set so that it shows a “selection outline” when selected with the mouse or keyboard. // The extra `&:not(:has(:focus-within))` rule turns that outline off if any element inside the Set has focus (e.g. when editing inside a Bard field). // This prevents the outer selection outline from showing while the user is actively working inside the Set. - 'st-set-is-selected [&:not(:has(:focus-within))]:border-blue-400! [&:not(:has(:focus-within))]:dark:border-blue-400! [&:not(:has(:focus-within))]:before:content-[\'\'] [&:not(:has(:focus-within))]:before:absolute [&:not(:has(:focus-within))]:before:inset-[-1px] [&:not(:has(:focus-within))]:before:pointer-events-none [&:not(:has(:focus-within))]:before:border-2 [&:not(:has(:focus-within))]:before:border-blue-400 [&:not(:has(:focus-within))]:dark:before:border-blue-400 [&:not(:has(:focus-within))]:before:rounded-lg': selected || withinSelection, + 'st-set-is-selected [&:not(:has(:focus-within))]:border-blue-400! [&:not(:has(:focus-within))]:dark:border-blue-400! [&:not(:has(:focus-within))]:before:content-[\'\'] [&:not(:has(:focus-within))]:before:absolute [&:not(:has(:focus-within))]:before:inset-[-1px] [&:not(:has(:focus-within))]:before:pointer-events-none [&:not(:has(:focus-within))]:before:border-2 [&:not(:has(:focus-within))]:before:border-blue-400 [&:not(:has(:focus-within))]:dark:before:border-blue-400 [&:not(:has(:focus-within))]:before:rounded-lg': showSelectionHighlight, 'border-red-500': hasError, }" :data-type="config.handle" @@ -255,6 +255,10 @@ export default { return this.decorationSpecs.withinSelection; }, + showSelectionHighlight() { + return (this.selected || this.withinSelection) && this.editor.isFocused; + }, + fieldVm() { return this.extension.options.bard; }, From af55e07e75a9a7ded1ab2793cf779ec495ebe163 Mon Sep 17 00:00:00 2001 From: Duncan McClean Date: Thu, 15 Jan 2026 14:23:14 +0000 Subject: [PATCH 2/3] Revert "Only show set selected state when TipTap editor is focused" This reverts commit b5c97c13bb364e3d6caff811142a2cdc8237b12d. --- resources/js/components/fieldtypes/bard/Set.vue | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/resources/js/components/fieldtypes/bard/Set.vue b/resources/js/components/fieldtypes/bard/Set.vue index 168c0d51ac..0df701732e 100644 --- a/resources/js/components/fieldtypes/bard/Set.vue +++ b/resources/js/components/fieldtypes/bard/Set.vue @@ -7,7 +7,7 @@ // We’re styling a Set so that it shows a “selection outline” when selected with the mouse or keyboard. // The extra `&:not(:has(:focus-within))` rule turns that outline off if any element inside the Set has focus (e.g. when editing inside a Bard field). // This prevents the outer selection outline from showing while the user is actively working inside the Set. - 'st-set-is-selected [&:not(:has(:focus-within))]:border-blue-400! [&:not(:has(:focus-within))]:dark:border-blue-400! [&:not(:has(:focus-within))]:before:content-[\'\'] [&:not(:has(:focus-within))]:before:absolute [&:not(:has(:focus-within))]:before:inset-[-1px] [&:not(:has(:focus-within))]:before:pointer-events-none [&:not(:has(:focus-within))]:before:border-2 [&:not(:has(:focus-within))]:before:border-blue-400 [&:not(:has(:focus-within))]:dark:before:border-blue-400 [&:not(:has(:focus-within))]:before:rounded-lg': showSelectionHighlight, + 'st-set-is-selected [&:not(:has(:focus-within))]:border-blue-400! [&:not(:has(:focus-within))]:dark:border-blue-400! [&:not(:has(:focus-within))]:before:content-[\'\'] [&:not(:has(:focus-within))]:before:absolute [&:not(:has(:focus-within))]:before:inset-[-1px] [&:not(:has(:focus-within))]:before:pointer-events-none [&:not(:has(:focus-within))]:before:border-2 [&:not(:has(:focus-within))]:before:border-blue-400 [&:not(:has(:focus-within))]:dark:before:border-blue-400 [&:not(:has(:focus-within))]:before:rounded-lg': selected || withinSelection, 'border-red-500': hasError, }" :data-type="config.handle" @@ -255,10 +255,6 @@ export default { return this.decorationSpecs.withinSelection; }, - showSelectionHighlight() { - return (this.selected || this.withinSelection) && this.editor.isFocused; - }, - fieldVm() { return this.extension.options.bard; }, From 2c20f68ef36f74a74abc3774bfa6b49965382873 Mon Sep 17 00:00:00 2001 From: Duncan McClean Date: Thu, 15 Jan 2026 14:29:41 +0000 Subject: [PATCH 3/3] Only show selected state when user has previously interacted with Bard --- resources/js/components/fieldtypes/bard/BardFieldtype.vue | 7 ++++++- resources/js/components/fieldtypes/bard/Set.vue | 6 +++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue index 33e2e18842..5ef72b4821 100644 --- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue +++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue @@ -208,6 +208,7 @@ export default { pageHeader: null, escBinding: null, showAddSetButton: false, + hasBeenFocused: false, provide: { bard: this.makeBardProvide(), bardSets: this.config.sets, @@ -745,7 +746,10 @@ export default { enablePasteRules: this.config.enable_paste_rules, editorProps: { attributes: { class: 'bard-content' } }, onDrop: () => this.debounceNextUpdate = false, - onFocus: () => this.$emit('focus'), + onFocus: () => { + this.hasBeenFocused = true; + this.$emit('focus'); + }, onBlur: () => { // Since clicking into a field inside a set would also trigger a blur, we can't just emit the // blur event immediately. We need to make sure that the newly focused element is outside @@ -977,6 +981,7 @@ export default { Object.defineProperties(bard, { setConfigs: { get: () => this.setConfigs }, isReadOnly: { get: () => this.readOnly }, + hasBeenFocused: { get: () => this.hasBeenFocused }, }); return bard; }, diff --git a/resources/js/components/fieldtypes/bard/Set.vue b/resources/js/components/fieldtypes/bard/Set.vue index 0df701732e..e7f6824eb7 100644 --- a/resources/js/components/fieldtypes/bard/Set.vue +++ b/resources/js/components/fieldtypes/bard/Set.vue @@ -7,7 +7,7 @@ // We’re styling a Set so that it shows a “selection outline” when selected with the mouse or keyboard. // The extra `&:not(:has(:focus-within))` rule turns that outline off if any element inside the Set has focus (e.g. when editing inside a Bard field). // This prevents the outer selection outline from showing while the user is actively working inside the Set. - 'st-set-is-selected [&:not(:has(:focus-within))]:border-blue-400! [&:not(:has(:focus-within))]:dark:border-blue-400! [&:not(:has(:focus-within))]:before:content-[\'\'] [&:not(:has(:focus-within))]:before:absolute [&:not(:has(:focus-within))]:before:inset-[-1px] [&:not(:has(:focus-within))]:before:pointer-events-none [&:not(:has(:focus-within))]:before:border-2 [&:not(:has(:focus-within))]:before:border-blue-400 [&:not(:has(:focus-within))]:dark:before:border-blue-400 [&:not(:has(:focus-within))]:before:rounded-lg': selected || withinSelection, + 'st-set-is-selected [&:not(:has(:focus-within))]:border-blue-400! [&:not(:has(:focus-within))]:dark:border-blue-400! [&:not(:has(:focus-within))]:before:content-[\'\'] [&:not(:has(:focus-within))]:before:absolute [&:not(:has(:focus-within))]:before:inset-[-1px] [&:not(:has(:focus-within))]:before:pointer-events-none [&:not(:has(:focus-within))]:before:border-2 [&:not(:has(:focus-within))]:before:border-blue-400 [&:not(:has(:focus-within))]:dark:before:border-blue-400 [&:not(:has(:focus-within))]:before:rounded-lg': showSelectionHighlight, 'border-red-500': hasError, }" :data-type="config.handle" @@ -255,6 +255,10 @@ export default { return this.decorationSpecs.withinSelection; }, + showSelectionHighlight() { + return (this.selected || this.withinSelection) && this.bard.hasBeenFocused; + }, + fieldVm() { return this.extension.options.bard; },