7e1eaba3bc
Migrated the ESLint configuration to the new flat config format () and addressed several initial linting errors. Key changes include: - Updated ESLint configuration to treat as warnings instead of errors. - Fixed errors in by declaring and . - Corrected error in by using instead of an out-of-scope . - Resolved error in by replacing the undefined directive with the component. - Addressed errors in by replacing with and with . - Fixed errors in by importing necessary modules (, , ) and adding missing props (, , , , ).
83 lines
2.5 KiB
Svelte
83 lines
2.5 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>
|