@seorii/tiptap 0.3.0-next.9 → 0.4.0

package/dist/tiptap/Command.svelte

@@ -1,131 +1,128 @@
 <script lang="ts">
 	import { Button, IconButton, Input, List, OneLine, TwoLine } from 'nunui';
-	import { getContext } from 'svelte';
+	import { getContext, tick } from 'svelte';
 	import {
-		slashVisible,
-		slashItems,
-		slashLocaltion,
-		slashProps,
-		slashDetail,
-		slashSelection
-	} from '../plugin/command/stores';
+		isSlashGroup,
+		isSlashItem,
+		slashState,
+		type SlashGroup,
+		type SlashItem
+	} from '../plugin/command/stores.svelte';
 	import { fly, slide } from 'svelte/transition';
 	import { quartOut } from 'svelte/easing';
-	import i18n from '../i18n';
+	import defaultI18n, { I18N_CONTEXT, type I18nTranslate } from '../i18n';
 
 	const editor = getContext<{ v: any }>('editor');
+	const i18nFromContext = getContext<I18nTranslate | undefined>(I18N_CONTEXT);
+	const i18n: I18nTranslate = (...args) =>
+		i18nFromContext ? i18nFromContext(...args) : defaultI18n(...args);
 	const tiptap = $derived(editor.v);
-	let { selectedIndex = 0 } = $props();
 
-	let height = $state(0),
-		elements = $state([]);
+	let height = $state(0);
 	let input = $state(''),
-		focus: any = $state(null);
+		focus = $state<HTMLInputElement | HTMLTextAreaElement | undefined>(undefined);
+	let menu = $state<HTMLElement | null>(null);
+
+	const emojiItems = $derived(slashState.items.filter(isSlashItem));
+	const groupedItems = $derived(slashState.items.filter(isSlashGroup));
+
+	function runCommand(item: SlashItem | undefined) {
+		if (!item) return;
+		const { editor, range } = slashState.props;
+		if (!editor || !range) return;
+
+		item.command({ editor, range });
+		setTimeout(() => tiptap?.commands?.focus?.());
+	}
+
+	function runDetailCommand() {
+		const detail = slashState.detail;
+		if (!detail || detail === 'emoji') return;
+
+		slashState.selection?.();
+		detail.handler(input);
+	}
 
 	$effect(() => {
-		if ($slashVisible) input = '';
+		if (slashState.visible) input = '';
 	});
 	$effect(() => {
 		focus;
 		setTimeout(() => focus?.focus?.(), 100);
 	});
+
+	$effect(() => {
+		if (!slashState.visible) return;
+		const detail = slashState.detail;
+		if (detail && detail !== 'emoji') return;
+
+		const selectedIndex = slashState.selectedIndex;
+		void tick().then(() => {
+			const target = menu?.querySelector<HTMLElement>(`[data-slash-index="${selectedIndex}"]`);
+			target?.scrollIntoView({ block: 'nearest' });
+		});
+	});
 </script>
 
 <svelte:window bind:innerHeight={height} />
 
-{#if $slashVisible}
-	<div class="scrim" onclick={() => ($slashVisible = false)} />
+{#if slashState.visible}
+	<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+	<div class="scrim" onclick={() => (slashState.visible = false)}></div>
 	<main
-		style="left: {$slashLocaltion.x}px; top: {$slashLocaltion.y + $slashLocaltion.height + 384 >
+		bind:this={menu}
+		style="left: {slashState.location.x}px; top: {slashState.location.y +
+			slashState.location.height +
+			384 >
 		height
-			? $slashLocaltion.y - $slashLocaltion.height - 384
-			: $slashLocaltion.y + $slashLocaltion.height}px;"
+			? slashState.location.y - slashState.location.height - 384
+			: slashState.location.y + slashState.location.height}px;"
 		transition:fly={{ y: 10, duration: 200, easing: quartOut }}
 	>
-		{#if $slashDetail === 'emoji'}
+		{#if slashState.detail === 'emoji'}
 			<div class="list">
 				<List>
-					{#each $slashItems as { title, command }, i (title)}
-						<div transition:slide={{ duration: 400, easing: quartOut }}>
+					{#each emojiItems as item, i (item.title)}
+						<div data-slash-index={i} transition:slide={{ duration: 400, easing: quartOut }}>
 							<OneLine
-								onclick={() => {
-									command?.($slashProps);
-									setTimeout(() => tiptap.commands.focus());
-								}}
-								bind:this={elements[i]}
-								{title}
-								active={selectedIndex === i}
+								onclick={() => runCommand(item)}
+								title={item.title}
+								active={slashState.selectedIndex === i}
 							/>
 						</div>
 					{/each}
-					{#if !$slashItems.length}
+					{#if !emojiItems.length}
 						<div class="section" transition:slide={{ duration: 400, easing: quartOut }}>
 							{i18n('noResult')}
 						</div>
 					{/if}
 				</List>
 			</div>
-		{:else if $slashDetail?.type === 'code'}
+		{:else if slashState.detail}
 			<div class="detail">
 				<header>
-					<IconButton icon="arrow_back" onclick={() => ($slashDetail = null)} />
-					<div class="title">{i18n('insertCode')}</div>
-				</header>
-				<div>
-					<Button
-						small
-						onclick={() => {
-							$slashSelection?.();
-							$slashDetail.handler(undefined);
-						}}>{i18n('auto')}</Button
-					>
-					{#each ['cpp', 'python', 'java'] as lang}
-						<Button
-							small
-							outlined
-							onclick={() => {
-								$slashSelection?.();
-								$slashDetail.handler(lang);
-							}}>{lang}</Button
-						>
-					{/each}
-				</div>
-			</div>
-		{:else if $slashDetail}
-			<div class="detail">
-				<header>
-					<IconButton icon="arrow_back" onclick={() => ($slashDetail = null)} />
-					<div class="title">{$slashDetail.title}</div>
+					<IconButton icon="arrow_back" onclick={() => (slashState.detail = null)} />
+					<div class="title">{slashState.detail.title}</div>
 				</header>
 				<Input
-					placeholder={$slashDetail.placeholder}
-					fullWidth
+					placeholder={slashState.detail.placeholder}
+					block
 					bind:value={input}
 					bind:input={focus}
-					onsubmit={() => {
-						$slashSelection?.();
-						$slashDetail.handler(input);
-					}}
+					onsubmit={runDetailCommand}
 				/>
 				<footer>
 					<Button
-						tabindex="0"
+						tabindex={0}
 						transparent
 						small
 						onclick={() => {
 							input = '';
-							$slashDetail = null;
+							slashState.detail = null;
 						}}
 						>{i18n('cancel')}
 					</Button>
-					<Button
-						tabindex="0"
-						transparent
-						small
-						onclick={() => {
-							$slashSelection?.();
-							$slashDetail.handler(input);
-						}}
+					<Button tabindex={0} transparent small onclick={runDetailCommand}
 						>{i18n('insert')}
 					</Button>
 				</footer>
@@ -133,33 +130,32 @@
 		{:else}
 			<div class="list">
 				<List>
-					{#each $slashItems as { section, list }, j (section)}
-						{@const lastCount = $slashItems
+					{#each groupedItems as group, j (group.section)}
+						{@const lastCount = groupedItems
 							.slice(0, j)
 							.reduce((acc, cur) => acc + cur.list.length, 0)}
 						<div class="section" transition:slide={{ duration: 400, easing: quartOut }}>
-							{section}
+							{group.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 }}>
+							{#each group.list as item, i (item.title)}
+								<div
+									data-slash-index={i + lastCount}
+									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}
+										onmouseenter={() => (slashState.selectedIndex = i + lastCount)}
+										onclick={() => runCommand(item)}
+										icon={item.icon}
+										title={item.title}
+										subtitle={item.subtitle || ''}
+										active={slashState.selectedIndex === i + lastCount}
 									/>
 								</div>
 							{/each}
 						</div>
 					{/each}
-					{#if !$slashItems.length}
+					{#if !groupedItems.length}
 						<div class="section" transition:slide={{ duration: 400, easing: quartOut }}>
 							{i18n('noResult')}
 						</div>
@@ -170,70 +166,76 @@
 	</main>
 {/if}
 
-<style>.scrim {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  cursor: default;
-  z-index: 0;
-}
-
-main {
-  position: fixed;
-  background: var(--surface, #fff);
-  width: 220px;
-  max-height: 384px;
-  border-radius: 4px;
-  overflow-y: scroll;
-  z-index: 10;
-  box-shadow: var(--shadow);
-}
-
-.section {
-  padding: 8px 16px;
-  font-size: 0.8em;
-  font-weight: 300;
-  color: var(--on-surface, #000);
-  opacity: 0.7;
-}
-
-.list {
-  color: var(--primary-dark7);
-}
-.list :global .title {
-  font-size: 0.7em !important;
-  font-weight: 300 !important;
-  margin-bottom: 4px;
-}
-.list :global .subtitle {
-  font-size: 0.8em !important;
-  font-weight: 300 !important;
-  color: var(--primary-dark1);
-}
-
-.detail {
-  font-size: 0.8em;
-  padding: 8px;
-  display: flex;
-  flex-direction: column;
-}
-
-header {
-  display: flex;
-  align-items: center;
-  margin-bottom: 6px;
-}
-header > :global(*) {
-  margin-right: 8px;
-}
-header > :global(*):last-child {
-  margin-right: 0;
-}
-
-footer {
-  margin-top: 0.6em;
-  display: flex;
-  justify-content: flex-end;
-}</style>
+<style>
+	.scrim {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		cursor: default;
+		z-index: 0;
+	}
+
+	main {
+		position: fixed;
+		background: var(--surface, #fff);
+		width: 220px;
+		max-height: 384px;
+		border-radius: 4px;
+		overflow-y: scroll;
+		z-index: 10;
+		box-shadow: var(--shadow);
+	}
+
+	.section {
+		padding: 8px 16px;
+		font-size: 0.8em;
+		font-weight: 300;
+		color: var(--on-surface, #000);
+		opacity: 0.7;
+	}
+
+	.list {
+		color: var(--primary-dark7);
+
+		& :global(.title) {
+			font-size: 0.7em !important;
+			font-weight: 300 !important;
+			margin-bottom: 4px;
+		}
+
+		& :global(.subtitle) {
+			font-size: 0.8em !important;
+			font-weight: 300 !important;
+			color: var(--primary-dark1);
+		}
+	}
+
+	.detail {
+		font-size: 0.8em;
+		padding: 8px;
+		display: flex;
+		flex-direction: column;
+	}
+
+	header {
+		display: flex;
+		align-items: center;
+		margin-bottom: 6px;
+
+		& > :global(*) {
+			margin-right: 8px;
+
+			&:last-child {
+				margin-right: 0;
+			}
+		}
+	}
+
+	footer {
+		margin-top: 0.6em;
+		display: flex;
+		justify-content: flex-end;
+	}
+</style>

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

@@ -1,4 +1,3 @@
-declare const Command: import("svelte").Component<{
-    selectedIndex?: number;
-}, {}, "">;
+declare const Command: import("svelte").Component<Record<string, never>, {}, "">;
+type Command = ReturnType<typeof Command>;
 export default Command;

package/dist/tiptap/Floating.svelte

@@ -2,11 +2,42 @@
 	import { FloatingMenu } from 'svelte-tiptap';
 	import { getContext } from 'svelte';
 	import { IconButton, List, OneLine, Paper } from 'nunui';
+	import type { CommandProps } from '@tiptap/core';
+	import { NodeSelection } from '@tiptap/pm/state';
 	import ToolbarButton from './ToolbarButton.svelte';
-	import i18n from '../i18n';
+	import defaultI18n, { I18N_CONTEXT, type I18nTranslate } from '../i18n';
 
 	const editor = getContext<{ v: any }>('editor');
+	const i18nFromContext = getContext<I18nTranslate | undefined>(I18N_CONTEXT);
+	const i18n: I18nTranslate = (...args) =>
+		i18nFromContext ? i18nFromContext(...args) : defaultI18n(...args);
 	const tiptap = $derived(editor.v);
+
+	function insertMathInline() {
+		tiptap
+			.chain()
+			.focus()
+			.command(({ state, tr, dispatch }: CommandProps) => {
+				const { math_inline: mathInline } = state.schema.nodes;
+				if (!mathInline) return false;
+
+				const fromSelection = state.selection.$from;
+				const index = fromSelection.index();
+				if (!fromSelection.parent.canReplaceWith(index, index, mathInline)) return false;
+
+				const insertedPosition = fromSelection.pos;
+				const mathNode = mathInline.create({});
+				const nextTr = tr.replaceSelectionWith(mathNode);
+				nextTr.setSelection(NodeSelection.create(nextTr.doc, insertedPosition));
+				dispatch?.(nextTr);
+				return true;
+			})
+			.run();
+	}
+
+	function insertCodeBlock() {
+		tiptap.chain().focus().setCodeBlock({ language: null }).run();
+	}
 </script>
 
 {#if tiptap}
@@ -16,7 +47,7 @@
 			<span>
 				{i18n('newLineInfo')}
 			</span>
-			<Paper bl hover width="160px">
+			<Paper bl hover style="width: 160px">
 				{#snippet target()}
 					<IconButton size="1.2em" icon="text_fields" />
 				{/snippet}
@@ -52,32 +83,28 @@
 			<ToolbarButton
 				icon="functions"
 				handler={() => {
-					const end = tiptap.state.selection.$to.pos;
-					tiptap
-						.chain()
-						.focus()
-						.insertContent({
-							type: 'math_inline'
-						})
-						.insertContent(' ')
-						.run();
+					insertMathInline();
 				}}
 			/>
-			<ToolbarButton icon="code" prop="code" />
+			<ToolbarButton icon="code" handler={insertCodeBlock} />
 		</main>
 	</FloatingMenu>
 {/if}
 
-<style>span {
-  opacity: 0.6;
-}
+<style>
+	span {
+		opacity: 0.6;
+	}
+
+	main {
+		display: flex;
+		flex-wrap: wrap;
+		width: max-content;
+		align-items: center;
+		position: relative;
 
-main {
-  display: flex;
-  flex-wrap: wrap;
-  width: max-content;
-  align-items: center;
-}
-main > :global(*) {
-  margin-right: 4px;
-}</style>
+		& > :global(*) {
+			margin-right: 4px;
+		}
+	}
+</style>

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

@@ -1,2 +1,3 @@
 declare const Floating: import("svelte").Component<Record<string, never>, {}, "">;
+type Floating = ReturnType<typeof Floating>;
 export default Floating;