@seorii/tiptap 0.2.22 → 0.3.0-next.10

package/dist/tiptap/Command.svelte

@@ -1,102 +1,168 @@
-<script>import { Button, IconButton, Input, List, OneLine, TwoLine } from 'nunui';
-import { getContext } from 'svelte';
-import { slashVisible, slashItems, slashLocaltion, slashProps, slashDetail, slashSelection } from '../plugin/command/stores';
-import { fly, slide } from 'svelte/transition';
-import { quartOut } from 'svelte/easing';
-import i18n from '../i18n';
-const tiptap = getContext('editor');
-export let selectedIndex = 0;
-let height = 0, elements = [];
-let input = '', focus;
-$: if ($slashVisible) {
-    input = '';
-}
-$: setTimeout(() => focus?.focus?.(), 100);
+<script lang="ts">
+	import { Button, IconButton, Input, List, OneLine, TwoLine } from 'nunui';
+	import { getContext } from 'svelte';
+	import {
+		slashVisible,
+		slashItems,
+		slashLocaltion,
+		slashProps,
+		slashDetail,
+		slashSelection
+	} from '../plugin/command/stores';
+	import { fly, slide } from 'svelte/transition';
+	import { quartOut } from 'svelte/easing';
+	import i18n from '../i18n';
+
+	const editor = getContext<{ v: any }>('editor');
+	const tiptap = $derived(editor.v);
+	let { selectedIndex = 0 } = $props();
+
+	let height = $state(0),
+		elements = $state([]);
+	let input = $state(''),
+		focus: any = $state(null);
+
+	$effect(() => {
+		if ($slashVisible) input = '';
+	});
+	$effect(() => {
+		focus;
+		setTimeout(() => focus?.focus?.(), 100);
+	});
 </script>
 
 <svelte:window bind:innerHeight={height} />
 
 {#if $slashVisible}
-	<div class="scrim" on:click={() => $slashVisible = false} />
-	<main style="left: {$slashLocaltion.x}px; top: {$slashLocaltion.y + $slashLocaltion.height + 384 > height
+	<div class="scrim" onclick={() => ($slashVisible = false)} />
+	<main
+		style="left: {$slashLocaltion.x}px; top: {$slashLocaltion.y + $slashLocaltion.height + 384 >
+		height
 			? $slashLocaltion.y - $slashLocaltion.height - 384
-			: $slashLocaltion.y + $slashLocaltion.height}px;" transition:fly={{y: 10, duration: 200, easing: quartOut}}>
+			: $slashLocaltion.y + $slashLocaltion.height}px;"
+		transition:fly={{ y: 10, duration: 200, easing: quartOut }}
+	>
 		{#if $slashDetail === 'emoji'}
 			<div class="list">
 				<List>
-					{#each $slashItems as { title, command }, i(title)}
-						<div transition:slide={{duration: 400, easing: quartOut}}>
-							<OneLine on:click={() => {
-                                command?.($slashProps);
-                                setTimeout(() => $tiptap.commands.focus());
-                            }} bind:this={elements[i]} {title} active={selectedIndex === i} />
+					{#each $slashItems as { title, command }, i (title)}
+						<div transition:slide={{ duration: 400, easing: quartOut }}>
+							<OneLine
+								onclick={() => {
+									command?.($slashProps);
+									setTimeout(() => tiptap.commands.focus());
+								}}
+								bind:this={elements[i]}
+								{title}
+								active={selectedIndex === i}
+							/>
 						</div>
 					{/each}
 					{#if !$slashItems.length}
-						<div class="section"
-								 transition:slide={{duration: 400, easing: quartOut}}>{i18n('noResult')}</div>
+						<div class="section" transition:slide={{ duration: 400, easing: quartOut }}>
+							{i18n('noResult')}
+						</div>
 					{/if}
 				</List>
 			</div>
 		{:else if $slashDetail?.type === 'code'}
 			<div class="detail">
 				<header>
-					<IconButton icon="arrow_back" on:click={() => $slashDetail = null} />
+					<IconButton icon="arrow_back" onclick={() => ($slashDetail = null)} />
 					<div class="title">{i18n('insertCode')}</div>
 				</header>
 				<div>
-					<Button small on:click={() => {$slashSelection?.();$slashDetail.handler(undefined);}}>{i18n('auto')}</Button>
+					<Button
+						small
+						onclick={() => {
+							$slashSelection?.();
+							$slashDetail.handler(undefined);
+						}}>{i18n('auto')}</Button
+					>
 					{#each ['cpp', 'python', 'java'] as lang}
-						<Button small outlined on:click={() => {$slashSelection?.();$slashDetail.handler(lang);}}>{lang}</Button>
+						<Button
+							small
+							outlined
+							onclick={() => {
+								$slashSelection?.();
+								$slashDetail.handler(lang);
+							}}>{lang}</Button
+						>
 					{/each}
 				</div>
 			</div>
 		{:else if $slashDetail}
 			<div class="detail">
 				<header>
-					<IconButton icon="arrow_back" on:click={() => $slashDetail = null} />
+					<IconButton icon="arrow_back" onclick={() => ($slashDetail = null)} />
 					<div class="title">{$slashDetail.title}</div>
 				</header>
-				<Input placeholder={$slashDetail.placeholder} fullWidth bind:value={input} bind:input={focus}
-							 on:submit={() => {
-                           $slashSelection?.();
-                           $slashDetail.handler(input)
-                       }} />
+				<Input
+					placeholder={$slashDetail.placeholder}
+					fullWidth
+					bind:value={input}
+					bind:input={focus}
+					onsubmit={() => {
+						$slashSelection?.();
+						$slashDetail.handler(input);
+					}}
+				/>
 				<footer>
-					<Button tabindex="0" transparent small on:click={() => {
-                        input = ''
-                        $slashDetail = null
-                    }}>{i18n('cancel')}
+					<Button
+						tabindex="0"
+						transparent
+						small
+						onclick={() => {
+							input = '';
+							$slashDetail = null;
+						}}
+						>{i18n('cancel')}
 					</Button>
-					<Button tabindex="0" transparent small
-									on:click={() => {
-                                $slashSelection?.();
-                                $slashDetail.handler(input);
-                            }}>{i18n('insert')}
+					<Button
+						tabindex="0"
+						transparent
+						small
+						onclick={() => {
+							$slashSelection?.();
+							$slashDetail.handler(input);
+						}}
+						>{i18n('insert')}
 					</Button>
 				</footer>
 			</div>
 		{:else}
 			<div class="list">
 				<List>
-					{#each $slashItems as { section, list }, j(section)}
-						{@const lastCount = $slashItems.slice(0, j).reduce((acc, cur) => acc + cur.list.length, 0)}
-						<div class="section" transition:slide={{duration: 400, easing: quartOut}}>{section}</div>
-						<div transition:slide={{duration: 400, easing: quartOut}}>
-							{#each list || [] as { title, subtitle, icon, command, section }, i(title)}
-								<div transition:slide={{duration: 400, easing: quartOut}}>
-									<TwoLine on:mouseenter={() => (selectedIndex = i + lastCount)} on:click={() => {
-                                        command?.($slashProps);
-                                        setTimeout(() => $tiptap.commands.focus());
-                                    }} bind:this={elements[i + lastCount]} {icon} {title} subtitle={subtitle || ''}
-													 active={selectedIndex === i + lastCount} />
+					{#each $slashItems as { section, list }, j (section)}
+						{@const lastCount = $slashItems
+							.slice(0, j)
+							.reduce((acc, cur) => acc + cur.list.length, 0)}
+						<div class="section" transition:slide={{ duration: 400, easing: quartOut }}>
+							{section}
+						</div>
+						<div transition:slide={{ duration: 400, easing: quartOut }}>
+							{#each list || [] as { title, subtitle, icon, command, section }, i (title)}
+								<div transition:slide={{ duration: 400, easing: quartOut }}>
+									<TwoLine
+										onmouseenter={() => (selectedIndex = i + lastCount)}
+										onclick={() => {
+											command?.($slashProps);
+											setTimeout(() => tiptap.commands.focus());
+										}}
+										bind:this={elements[i + lastCount]}
+										{icon}
+										{title}
+										subtitle={subtitle || ''}
+										active={selectedIndex === i + lastCount}
+									/>
 								</div>
 							{/each}
 						</div>
 					{/each}
 					{#if !$slashItems.length}
-						<div class="section"
-								 transition:slide={{duration: 400, easing: quartOut}}>{i18n('noResult')}</div>
+						<div class="section" transition:slide={{ duration: 400, easing: quartOut }}>
+							{i18n('noResult')}
+						</div>
 					{/if}
 				</List>
 			</div>
@@ -136,12 +202,12 @@ main {
 .list {
   color: var(--primary-dark7);
 }
-.list :global(.title) {
+.list :global .title {
   font-size: 0.7em !important;
   font-weight: 300 !important;
   margin-bottom: 4px;
 }
-.list :global(.subtitle) {
+.list :global .subtitle {
   font-size: 0.8em !important;
   font-weight: 300 !important;
   color: var(--primary-dark1);
@@ -170,4 +236,4 @@ footer {
   margin-top: 0.6em;
   display: flex;
   justify-content: flex-end;
-}</style>
+}</style>

package/dist/tiptap/Command.svelte.d.ts

@@ -1,16 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        selectedIndex?: number | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type CommandProps = typeof __propDef.props;
-export type CommandEvents = typeof __propDef.events;
-export type CommandSlots = typeof __propDef.slots;
-export default class Command extends SvelteComponentTyped<CommandProps, CommandEvents, CommandSlots> {
-}
-export {};
+declare const Command: import("svelte").Component<{
+    selectedIndex?: number;
+}, {}, "">;
+export default Command;

package/dist/tiptap/Floating.svelte

@@ -1,45 +1,71 @@
-<script>import { FloatingMenu } from "svelte-tiptap";
-import { getContext } from "svelte";
-import { IconButton, List, OneLine, Tooltip } from "nunui";
-import ToolbarButton from "./ToolbarButton.svelte";
-import i18n from "../i18n";
-const tiptap = getContext('editor');
+<script lang="ts">
+	import { FloatingMenu } from 'svelte-tiptap';
+	import { getContext } from 'svelte';
+	import { IconButton, List, OneLine, Paper } from 'nunui';
+	import ToolbarButton from './ToolbarButton.svelte';
+	import i18n from '../i18n';
+
+	const editor = getContext<{ v: any }>('editor');
+	const tiptap = $derived(editor.v);
 </script>
 
-{#if $tiptap}
-    <FloatingMenu editor={$tiptap} tippyOptions={{animation:'fade', duration: [200, 50]}}>
-        <main on:mousedown={() => setTimeout(() => $tiptap.commands.focus())}>
-            <span>
-                {i18n('newLineInfo')}
-            </span>
-            <Tooltip bottom left xstack width="160px">
-                <IconButton size="1.2em" icon="text_fields" slot="target"/>
-                <div style="margin: -6px">
-                    <List>
-                        <OneLine icon="counter_1" title="{i18n('title')} 1"
-                                 on:click={() => $tiptap.commands.setHeading({level: 1})}/>
-                        <OneLine icon="counter_2" title="{i18n('title')} 2"
-                                 on:click={() => $tiptap.commands.setHeading({level: 2})}/>
-                        <OneLine icon="counter_3" title="{i18n('title')} 3"
-                                 on:click={() => $tiptap.commands.setHeading({level: 3})}/>
-                        <OneLine icon="segment" title={i18n('paragraph')}
-                                 on:click={() => $tiptap.commands.setParagraph()}/>
-                    </List>
-                </div>
-            </Tooltip>
-            <ToolbarButton icon="format_bold" prop="bold"/>
-            <ToolbarButton icon="format_italic" prop="italic"/>
-            <ToolbarButton icon="format_strikethrough" prop="strike"/>
-            <ToolbarButton icon="format_underlined" prop="underline"/>
-            <ToolbarButton icon="functions" handler={() => {
-                const end = $tiptap.state.selection.$to.pos;
-                $tiptap.chain().focus().insertContent({
-                  type: 'math_inline',
-                }).insertContent(' ').run();
-            }}/>
-            <ToolbarButton icon="code" prop="code"/>
-        </main>
-    </FloatingMenu>
+{#if tiptap}
+	<FloatingMenu editor={tiptap} tippyOptions={{ animation: 'fade', duration: [200, 50] }}>
+		<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+		<main onmousedown={() => setTimeout(() => tiptap.commands.focus())}>
+			<span>
+				{i18n('newLineInfo')}
+			</span>
+			<Paper bl hover width="160px">
+				{#snippet target()}
+					<IconButton size="1.2em" icon="text_fields" />
+				{/snippet}
+				<div style="margin: -6px">
+					<List>
+						<OneLine
+							icon="counter_1"
+							title="{i18n('title')} 1"
+							onclick={() => tiptap.commands.setHeading({ level: 1 })}
+						/>
+						<OneLine
+							icon="counter_2"
+							title="{i18n('title')} 2"
+							onclick={() => tiptap.commands.setHeading({ level: 2 })}
+						/>
+						<OneLine
+							icon="counter_3"
+							title="{i18n('title')} 3"
+							onclick={() => tiptap.commands.setHeading({ level: 3 })}
+						/>
+						<OneLine
+							icon="segment"
+							title={i18n('paragraph')}
+							onclick={() => tiptap.commands.setParagraph()}
+						/>
+					</List>
+				</div>
+			</Paper>
+			<ToolbarButton icon="format_bold" prop="bold" />
+			<ToolbarButton icon="format_italic" prop="italic" />
+			<ToolbarButton icon="format_strikethrough" prop="strike" />
+			<ToolbarButton icon="format_underlined" prop="underline" />
+			<ToolbarButton
+				icon="functions"
+				handler={() => {
+					const end = tiptap.state.selection.$to.pos;
+					tiptap
+						.chain()
+						.focus()
+						.insertContent({
+							type: 'math_inline'
+						})
+						.insertContent(' ')
+						.run();
+				}}
+			/>
+			<ToolbarButton icon="code" prop="code" />
+		</main>
+	</FloatingMenu>
 {/if}
 
 <style>span {
@@ -54,4 +80,4 @@ main {
 }
 main > :global(*) {
   margin-right: 4px;
-}</style>
+}</style>

package/dist/tiptap/Floating.svelte.d.ts

@@ -1,14 +1,2 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type FloatingProps = typeof __propDef.props;
-export type FloatingEvents = typeof __propDef.events;
-export type FloatingSlots = typeof __propDef.slots;
-export default class Floating extends SvelteComponentTyped<FloatingProps, FloatingEvents, FloatingSlots> {
-}
-export {};
+declare const Floating: import("svelte").Component<Record<string, never>, {}, "">;
+export default Floating;