You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
2.2 KiB
75 lines
2.2 KiB
<script lang="ts">
|
|
import { Heading1, Heading2, Heading3, Pilcrow } from '$uix/eidos/components/icon';
|
|
import { Popover } from '$uix/eidos/components/popover';
|
|
import * as Words from '$soma/components/words';
|
|
import type { WordsHeadingLevel } from '$soma/components/words';
|
|
|
|
let {
|
|
currentBlock = 'paragraph',
|
|
currentHeadingLevel = undefined
|
|
}: {
|
|
currentBlock?: string;
|
|
currentHeadingLevel?: WordsHeadingLevel;
|
|
} = $props();
|
|
|
|
let open = $state(false);
|
|
|
|
const headingLabel = $derived.by(() => {
|
|
if (currentBlock === 'heading' && currentHeadingLevel === 1) return 'Heading 1';
|
|
if (currentBlock === 'heading' && currentHeadingLevel === 2) return 'Heading 2';
|
|
if (currentBlock === 'heading' && currentHeadingLevel === 3) return 'Heading 3';
|
|
return 'Paragraph';
|
|
});
|
|
</script>
|
|
|
|
<Popover bind:open>
|
|
<Popover.Trigger aria-label={headingLabel}>
|
|
{#if currentBlock === 'heading' && currentHeadingLevel === 1}
|
|
<Heading1 size="sm" decorative />
|
|
{:else if currentBlock === 'heading' && currentHeadingLevel === 2}
|
|
<Heading2 size="sm" decorative />
|
|
{:else if currentBlock === 'heading' && currentHeadingLevel === 3}
|
|
<Heading3 size="sm" decorative />
|
|
{:else}
|
|
<Pilcrow size="sm" decorative />
|
|
{/if}
|
|
</Popover.Trigger>
|
|
<Popover.Portal>
|
|
<Popover.Content side="bottom" align="center" sideOffset={4}>
|
|
<div data-words-heading-picker>
|
|
<Words.CommandButton
|
|
command="heading"
|
|
level={1}
|
|
aria-label="Heading 1"
|
|
onclick={() => (open = false)}
|
|
>
|
|
<Heading1 size="sm" decorative />
|
|
</Words.CommandButton>
|
|
<Words.CommandButton
|
|
command="heading"
|
|
level={2}
|
|
aria-label="Heading 2"
|
|
onclick={() => (open = false)}
|
|
>
|
|
<Heading2 size="sm" decorative />
|
|
</Words.CommandButton>
|
|
<Words.CommandButton
|
|
command="heading"
|
|
level={3}
|
|
aria-label="Heading 3"
|
|
onclick={() => (open = false)}
|
|
>
|
|
<Heading3 size="sm" decorative />
|
|
</Words.CommandButton>
|
|
<Words.CommandButton
|
|
command="paragraph"
|
|
aria-label="Paragraph"
|
|
onclick={() => (open = false)}
|
|
>
|
|
<Pilcrow size="sm" decorative />
|
|
</Words.CommandButton>
|
|
</div>
|
|
</Popover.Content>
|
|
</Popover.Portal>
|
|
</Popover>
|