83 lines
2.6 KiB
Svelte
83 lines
2.6 KiB
Svelte
<script lang="ts">
|
|
import {
|
|
AlignCenter,
|
|
AlignLeft,
|
|
AlignRight,
|
|
AlignJustify,
|
|
ChevronDown,
|
|
Check
|
|
} from 'lucide-svelte';
|
|
import { type Editor } from '@tiptap/core';
|
|
import * as Tooltip from '$lib/components/ui/tooltip/index.js';
|
|
import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
|
|
import Button from '$lib/components/ui/button/button.svelte';
|
|
|
|
let { editor }: { editor: Editor } = $props();
|
|
</script>
|
|
|
|
<Tooltip.Provider>
|
|
<Tooltip.Root>
|
|
<Tooltip.Trigger>
|
|
<DropdownMenu.Root>
|
|
<DropdownMenu.Trigger>
|
|
<Button variant="ghost" size="sm" class="h-8">
|
|
{#if editor.isActive({ textAlign: 'left' })}
|
|
<AlignLeft />
|
|
{:else if editor.isActive({ textAlign: 'center' })}
|
|
<AlignCenter />
|
|
{:else if editor.isActive({ textAlign: 'right' })}
|
|
<AlignRight />
|
|
{:else if editor.isActive({ textAlign: 'justify' })}
|
|
<AlignJustify />
|
|
{:else}
|
|
<AlignLeft />
|
|
{/if}
|
|
<ChevronDown class="!size-3 text-muted-foreground" />
|
|
</Button>
|
|
</DropdownMenu.Trigger>
|
|
<DropdownMenu.Content class="w-56">
|
|
<DropdownMenu.Item
|
|
onclick={() => editor.chain().focus().setTextAlign('left').run()}
|
|
closeOnSelect={false}
|
|
>
|
|
<AlignLeft /> Align Left
|
|
{#if editor.isActive({ textAlign: 'left' })}
|
|
<Check class="absolute right-2 !size-3 text-muted-foreground" />
|
|
{/if}
|
|
</DropdownMenu.Item>
|
|
<DropdownMenu.Item
|
|
onclick={() => editor.chain().focus().setTextAlign('center').run()}
|
|
closeOnSelect={false}
|
|
>
|
|
<AlignCenter /> Align Center
|
|
{#if editor.isActive({ textAlign: 'center' })}
|
|
<Check class="absolute right-2 !size-3 text-muted-foreground" />
|
|
{/if}
|
|
</DropdownMenu.Item>
|
|
<DropdownMenu.Item
|
|
onclick={() => editor.chain().focus().setTextAlign('right').run()}
|
|
closeOnSelect={false}
|
|
>
|
|
<AlignRight /> Align Right
|
|
{#if editor.isActive({ textAlign: 'right' })}
|
|
<Check class="absolute right-2 !size-3 text-muted-foreground" />
|
|
{/if}
|
|
</DropdownMenu.Item>
|
|
<DropdownMenu.Item
|
|
onclick={() => editor.chain().focus().setTextAlign('justify').run()}
|
|
closeOnSelect={false}
|
|
>
|
|
<AlignJustify /> Align Justify
|
|
{#if editor.isActive({ textAlign: 'justify' })}
|
|
<Check class="absolute right-2 !size-3 text-muted-foreground" />
|
|
{/if}
|
|
</DropdownMenu.Item>
|
|
</DropdownMenu.Content>
|
|
</DropdownMenu.Root>
|
|
</Tooltip.Trigger>
|
|
<Tooltip.Content>
|
|
<p>Text Alignment</p>
|
|
</Tooltip.Content>
|
|
</Tooltip.Root>
|
|
</Tooltip.Provider>
|