Skip to content

[6.x] Fix Bard Link Toolbar #13306

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jasonvarga merged 17 commits into from
Jan 22, 2026
Merged

[6.x] Fix Bard Link Toolbar #13306

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
fbe79fe
Update icon references
duncanmcclean Dec 10, 2025
599d78a
Prevent popover closing when clicking combobox items
duncanmcclean Dec 10, 2025
9136c61
Avoid needing to "click" a ref to open relationship selector
duncanmcclean Dec 10, 2025
85cd68d
Merge branch 'master' into bard-link-toolbar
duncanmcclean Dec 11, 2025
0ea501c
Use a prop instead, like we did in v5
duncanmcclean Dec 11, 2025
6b7ee8e
Merge branch 'master' into bard-link-toolbar
duncanmcclean Dec 17, 2025
b91d25d
Merge branch 'master' into bard-link-toolbar
jasonvarga Jan 22, 2026
d7cf91e
steal classes from input to style this as an input. Addresses the "Se…
jasonvarga Jan 22, 2026
9f7ecb1
fix asset thumbnail not showing
jasonvarga Jan 22, 2026
361ee02
fix empty asset selector
jasonvarga Jan 22, 2026
41cdcf3
call prop dismissible for consistency with modals and simplify
jasonvarga Jan 22, 2026
939a4b4
switch to a stack
jasonvarga Jan 22, 2026
1584947
Ensure Stack Header left padding is same as content
jackmcdade Jan 22, 2026
f2c13fb
Restyle the components
jackmcdade Jan 22, 2026
a8f1ed2
Don't import Popover
jackmcdade Jan 22, 2026
ba6a4c7
remove reference to popover and remove mod+k shortcut to open it. tha…
jasonvarga Jan 22, 2026
b0d8f87
remove unnecessary stuff
jasonvarga Jan 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 0 additions & 6 deletions resources/js/components/fieldtypes/bard/Link.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,12 +61,6 @@ export const Link = Mark.create({
];
},

addKeyboardShortcuts() {
return {
'Mod-k': () => this.options.vm.events.emit('link-toggle'),
};
},

addProseMirrorPlugins() {
const vm = this.options.vm;
return [
Expand Down
254 changes: 127 additions & 127 deletions resources/js/components/fieldtypes/bard/LinkToolbar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,135 +1,110 @@
<template>
<div class="bard-link-toolbar">
<div>
<div class="border-b bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-800 rounded-t-xl">
<section class="flex gap-2 items-center p-4 border-b dark:border-gray-800">
<ui-select
v-model="linkType"
:options="visibleLinkTypes"
option-label="title"
option-value="type"
size="sm"
class="flex-1"
/>

<div class="flex-1">
<!-- URL input -->
<ui-input
v-if="linkType === 'url'"
v-model="url.url"
type="text"
ref="urlInput"
size="sm"
:placeholder="__('URL')"
@keydown.enter.prevent="commit"
/>
<StackContent class="space-y-5">
<section class="flex gap-3 items-center">
<ui-select
v-model="linkType"
:options="visibleLinkTypes"
option-label="title"
option-value="type"
class="w-1/4 min-w-24"
/>

<!-- Email input -->
<ui-input
v-else-if="linkType === 'mailto'"
v-model="urlData.mailto"
type="text"
ref="mailtoInput"
size="sm"
:placeholder="__('Email Address')"
@keydown.enter.prevent="commit"
/>
<div class="flex-1 min-w-0">
<!-- URL input -->
<ui-input
v-if="linkType === 'url'"
v-model="url.url"
type="text"
ref="urlInput"
autofocus
:placeholder="__('https://')"
@keydown.enter.prevent="commit"
/>

<!-- Phone input -->
<ui-input
v-else-if="linkType === 'tel'"
v-model="urlData.tel"
ref="telInput"
size="sm"
:placeholder="__('Phone Number')"
@keydown.enter.prevent="commit"
/>
<!-- Email input -->
<ui-input
v-else-if="linkType === 'mailto'"
v-model="urlData.mailto"
type="text"
ref="mailtoInput"
:placeholder="__('Email Address')"
@keydown.enter.prevent="commit"
/>

<!-- Data input -->
<div
v-else
class="flex w-full min-w-[240px] cursor-pointer items-center justify-between"
@click="openSelector"
>
<Icon v-if="isLoading" name="loading" />

<div v-else class="flex flex-1 items-center truncate me-2">
<img
v-if="linkType === 'asset' && itemData.asset && itemData.isImage"
:src="itemData.asset.thumbnail || itemData.asset.url"
class="asset-thumbnail lazyloaded h-6 max-h-full w-6 max-w-full rounded-sm object-cover me-2"
/>
{{ displayValue }}
</div>

<button
class="flex items-center"
v-tooltip="`${__('Browse')}...`"
:aria-label="`${__('Browse')}...`"
@click="openSelector"
>
<ui-icon v-show="linkType === 'asset'" name="folder-image" class="size-4" />
<ui-icon v-show="linkType !== 'asset'" name="folder-generic" class="size-4" />
</button>
</div>
<!-- Phone input -->
<ui-input
v-else-if="linkType === 'tel'"
v-model="urlData.tel"
ref="telInput"
:placeholder="__('Phone Number')"
@keydown.enter.prevent="commit"
/>

<!-- Data input -->
<div
v-else
:class="[
'flex overflow-hidden cursor-pointer items-center justify-between',
'w-full block bg-white dark:bg-gray-900 min-w-0',
'border border-gray-300 with-contrast:border-gray-500 dark:border-gray-700 dark:with-contrast:border-gray-500 dark:inset-shadow-2xs dark:inset-shadow-black',
'text-gray-925 dark:text-gray-300 placeholder:text-gray-500 dark:placeholder:text-gray-400/85',
'appearance-none antialiased shadow-ui-sm disabled:shadow-none disabled:opacity-50 not-prose',
'text-sm rounded-lg px-2.5 py-1.5 h-10 leading-[1.125rem]'
]"
@click="openSelector"
>
<Icon v-if="isLoading" name="loading" />

<div v-else class="flex flex-1 items-center me-2 overflow-hidden min-w-0">
<img
v-if="linkType === 'asset' && itemData.asset && itemData.asset.isImage"
:src="itemData.asset.thumbnail || itemData.asset.url"
class="asset-thumbnail lazyloaded size-6 max-h-full max-w-full rounded-sm object-cover me-2 flex-shrink-0"
/>
<div class="truncate min-w-0 flex-1">{{ displayValue || __('Choose item...') }}</div>
</div>
</section>

<div class="space-y-3 p-4">
<!-- Title attribute -->
<ui-input
type="text"
ref="input"
size="sm"
v-model="title"
:prepend="__('Label')"
:placeholder="__('Optional')"
/>

<!-- Rel attribute -->
<ui-input
type="text"
ref="input"
size="sm"
v-model="rel"
:prepend="__('Rel')"
:placeholder="__('Optional')"
/>

<ui-checkbox
:label="__('Open in new window')"
v-model="targetBlank"
size="sm"
/>
</div>

<button
class="flex items-center cursor-pointer"
v-tooltip="`${__('Browse')}...`"
:aria-label="`${__('Browse')}...`"
@click="openSelector"
>
<Icon v-show="linkType === 'asset'" name="folder-photos" class="size-4" />
<Icon v-show="linkType !== 'asset'" name="folder" class="size-4" />
</button>
</div>
</div>
</section>

<ui-separator :text="__('Advanced Options')" />

<section class="space-y-5">
<!-- Title attribute -->
<ui-input
type="text"
ref="input"
v-model="title"
:prepend="__('Label')"
:placeholder="__('Add a link label')"
/>

<footer class="flex items-center justify-end gap-2 sm:gap-3 rounded-b-md bg-gray-100 p-2 font-normal dark:bg-gray-800 rounded-b-xl">
<ui-button
@click="$emit('canceled')"
:text="__('Cancel')"
size="sm"
inset
variant="ghost"
/>
<ui-button
:text="__('Remove Link')"
@click="remove"
size="sm"
inset
/>
<ui-button
:text="__('Apply Link')"
:disabled="!canCommit"
@click="commit"
size="sm"
variant="primary"
/>
</footer>
</div>
<!-- Rel attribute -->
<ui-input
type="text"
ref="input"
v-model="rel"
:prepend="__('Rel')"
:placeholder="__('noopener, noreferrer')"
/>

<!-- Selectors -->
<div class="flex items-center gap-2">
<ui-switch
v-model="targetBlank"
/>
<ui-description :text="__('Open in new window')" />
</div>
</section>

<relationship-input
class="hidden"
Expand All @@ -150,7 +125,7 @@

<Stack v-model:open="showAssetSelector" inset :show-close-button="false">
<asset-selector
:container="config.container"
:container="{id: config.container}"
:folder="config.folder || '/'"
:restrict-folder-navigation="config.restrict_assets"
:selected="[]"
Expand All @@ -159,19 +134,44 @@
@closed="showAssetSelector = false"
/>
</Stack>
</div>
</StackContent>


<StackFooter>
<template #end>
<ui-button
@click="$emit('canceled')"
:text="__('Cancel')"
variant="ghost"
/>
<ui-button
:text="__('Remove Link')"
@click="remove"
/>
<ui-button
:text="__('Apply Link')"
:disabled="!canCommit"
@click="commit"
variant="primary"
/>
</template>
</StackFooter>

<!-- Selectors -->
</template>

<script>
import qs from 'qs';
import AssetSelector from '../../assets/Selector.vue';
import { Icon, Stack } from '@/components/ui';
import { Icon, Stack, StackContent, StackFooter } from '@/components/ui';

export default {
components: {
AssetSelector,
Icon,
Stack,
StackContent,
StackFooter,
},

props: {
Expand Down Expand Up @@ -414,7 +414,7 @@ export default {
},

openEntrySelector() {
this.$refs.relationshipInput.$refs.existing.click();
this.$refs.relationshipInput.openSelector();
},

openAssetSelector() {
Expand Down
26 changes: 10 additions & 16 deletions resources/js/components/fieldtypes/bard/LinkToolbarButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
<template>
<Popover ref="popover" class="!size-min" :inset="true" v-model:open="showingToolbar">
<Stack
:title="__('Link')"
size="narrow"
inset
:wrap-slot="false"
v-model:open="showingToolbar"
>
<template #trigger>
<Button
class="px-2!"
Expand All @@ -15,28 +21,27 @@
</template>
<link-toolbar
v-if="linkAttrs !== null"
class="min-w-84 size-min"
ref="toolbar"
:link-attrs="linkAttrs"
:config="config"
:bard="bard"
@updated="setLink"
@canceled="close"
/>
</Popover>
</Stack>
</template>

<script>
import { Popover } from '@/components/ui';
import { Stack } from '@/components/ui';
import LinkToolbar from './LinkToolbar.vue';
import BardToolbarButton from './ToolbarButton.vue';

export default {
mixins: [BardToolbarButton],

components: {
Popover,
LinkToolbar,
Stack,
},

data() {
Expand All @@ -49,7 +54,6 @@ export default {
methods: {
close() {
this.showingToolbar = false;
this.$refs.popover.close();
},

setLink(attributes) {
Expand All @@ -70,15 +74,5 @@ export default {
}
},

created() {
this.bard.events.on('link-toggle', () => {
this.toggleLinkToolbar();
this.$refs.popover.toggle();
});
},

beforeUnmount() {
this.bard.events.off('link-toggle');
},
};
</script>
2 changes: 1 addition & 1 deletion resources/js/components/fieldtypes/relationship/RelationshipFieldtype.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ export default {
},

linkExistingItem() {
this.$refs.input.$refs.existing.$el.click();
this.$refs.input.openSelector();
},

unlinkAll() {
Expand Down
Loading