refactor(admin): update EssayForm to use clickOutside action

Replace manual click event listener with clickOutside action for the
publish menu dropdown. This simplifies the code and ensures consistent
click-outside behavior across all admin dropdowns.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Justin Edmund 2025-10-07 22:00:06 -07:00
parent 9cc7baddc6
commit 7300bd672b

View file

@ -9,6 +9,7 @@
import { makeDraftKey, saveDraft, loadDraft, clearDraft, timeAgo } from '$lib/admin/draftStore'
import { createAutoSaveStore } from '$lib/admin/autoSave.svelte'
import AutoSaveStatus from './AutoSaveStatus.svelte'
import { clickOutside } from '$lib/actions/clickOutside'
import type { JSONContent } from '@tiptap/core'
interface Props {
@ -315,22 +316,9 @@ $effect(() => {
showPublishMenu = !showPublishMenu
}
// Close menu when clicking outside
function handleClickOutside(event: MouseEvent) {
const target = event.target as HTMLElement
if (!target.closest('.save-actions')) {
showPublishMenu = false
}
function handleClickOutsideMenu() {
showPublishMenu = false
}
$effect(() => {
if (showPublishMenu) {
document.addEventListener('click', handleClickOutside)
return () => {
document.removeEventListener('click', handleClickOutside)
}
}
})
</script>
<AdminPage>
@ -356,7 +344,11 @@ $effect(() => {
/>
</div>
<div class="header-actions">
<div class="save-actions">
<div
class="save-actions"
use:clickOutside={{ enabled: showPublishMenu }}
on:clickoutside={handleClickOutsideMenu}
>
<Button variant="primary" onclick={handleSave} disabled={isSaving} class="save-button">
{status === 'published' ? 'Save' : 'Save Draft'}
</Button>