@seorii/tiptap 0.3.0-next.9 → 0.4.0

package/dist/tiptap/Bubble.svelte

@@ -1,23 +1,45 @@
 <script lang="ts">
 	import { BubbleMenu } from 'svelte-tiptap';
-	import { getContext, tick } from 'svelte';
+	import { flushSync, getContext, tick, untrack } from 'svelte';
 	import 'tippy.js/animations/shift-away-subtle.css';
 	import ToolbarButton from './ToolbarButton.svelte';
 	import { isTableAnySelected } from '../plugin/table/util';
 	import deleteTable from '../plugin/table/deleteTable';
 	import setMath from './setMath';
 	import { Button, Icon, IconButton, Input, List, OneLine, Paper, Render } from 'nunui';
-	import i18n from '../i18n';
+	import defaultI18n, { I18N_CONTEXT, type I18nTranslate } from '../i18n';
 	import ColorPicker from 'svelte-awesome-color-picker';
 	import { isTextSelection } from '@tiptap/core';
+	import { NodeSelection, type EditorState, type Selection } from '@tiptap/pm/state';
+	import type { EditorView } from '@tiptap/pm/view';
 
-	let { colors = [], editable, override, children } = $props();
+	type Props = {
+		colors?: string[];
+		editable?: boolean;
+		override?: any;
+		docked?: boolean;
+		children?: any;
+	};
+
+	let { colors = [], editable, override, docked = false, children }: Props = $props();
 
 	const editor = getContext<{ v: any; c: number }>('editor');
+	const i18nFromContext = getContext<I18nTranslate | undefined>(I18N_CONTEXT);
+	const i18n: I18nTranslate = (...args) =>
+		i18nFromContext ? i18nFromContext(...args) : defaultI18n(...args);
 	const tiptap = $derived(editor.v);
+	const currentTextColor = $derived.by(() => {
+		editor.c;
+		const color = tiptap?.getAttributes('textStyle')?.color;
+		return typeof color === 'string' ? color.trim().toLowerCase() : '';
+	});
+	const hasTextColor = $derived.by(() => {
+		editor.c;
+		return !!tiptap?.getAttributes('textStyle')?.color;
+	});
 
-	let selection = $state(null);
-	let table = $state(false);
+	let selection = $state<Selection | null>(null);
+	let table = $state<number[] | false>(false);
 	let sel = $state('');
 	let _sel = $state('');
 	let link = $state(false);
@@ -25,6 +47,7 @@
 
 	$effect(() => {
 		let _ = editor.c;
+		flushSync();
 		selection = tiptap?.state?.selection;
 	});
 
@@ -45,19 +68,46 @@
 	});
 
 	$effect(() => {
-		if (tiptap && link) {
-			if (href) {
-				tiptap.chain().setLink({ href }).run();
-			} else if (tiptap.getAttributes('link').href) {
-				tiptap.chain().unsetLink().run();
+		const _href = href;
+		untrack(() => {
+			if (tiptap && link) {
+				if (href) {
+					tiptap.chain().setLink({ href: _href }).run();
+				} else if (tiptap.getAttributes('link').href) {
+					tiptap.chain().unsetLink().run();
+				}
 			}
-		}
+		});
 	});
 
-	const shouldShow = ({ view, state, from, to }) => {
+	const shouldShow = ({
+		state,
+		view,
+		from,
+		to
+	}: {
+		view: EditorView;
+		state: EditorState;
+		from: number;
+		to: number;
+	}) => {
+		if (!tiptap?.isEditable) return false;
+
 		const { doc, selection } = state;
 		const { empty } = selection;
 
+		if (selection instanceof NodeSelection && selection.node.isBlock) {
+			const nodeDom = view.nodeDOM(from);
+			if (
+				nodeDom instanceof Element &&
+				(nodeDom.hasAttribute('data-hide-bubble-menu') ||
+					nodeDom.getAttribute('data-bubble-menu') === 'false' ||
+					Boolean(nodeDom.querySelector('[data-hide-bubble-menu], [data-bubble-menu="false"]')))
+			) {
+				return false;
+			}
+		}
+
 		const isEmptyTextBlock = !doc.textBetween(from, to).length && isTextSelection(state.selection);
 
 		return !(empty || isEmptyTextBlock);
@@ -65,32 +115,23 @@
 </script>
 
 {#if tiptap}
-	<BubbleMenu
-		editor={tiptap}
-		updateDelay={50}
-		{shouldShow}
-		tippyOptions={{
-			moveTransition: 'transform 0.2s cubic-bezier(1,.5,0,.85)',
-			animation: 'shift-away-subtle',
-			duration: [200, 50]
-		}}
-	>
+	{#snippet toolbar()}
 		{#if override}
-			<main>
+			<main class:docked>
 				<Render it={override} />
 			</main>
 		{:else}
-			<main>
+			<main class:docked>
 				{#if link}
 					<div class="link">
 						<p>
 							<Icon icon="link" />
 							{i18n('link')}
 						</p>
-						<Input placeholder="url" fullWidth bind:value={href} autofocus />
+						<Input placeholder="url" bind:value={href} autofocus />
 						<div>
 							<Button
-								tabindex="0"
+								tabindex={0}
 								transparent
 								small
 								onclick={() => {
@@ -100,7 +141,7 @@
 								}}
 								>{i18n('delete')}
 							</Button>
-							<Button tabindex="0" transparent small onclick={() => (link = false)}
+							<Button tabindex={0} transparent small onclick={() => (link = false)}
 								>{i18n('close')}</Button
 							>
 						</div>
@@ -130,11 +171,11 @@
 					<ToolbarButton icon="close" handler={() => deleteTable({ editor: tiptap })} />
 				{:else}
 					{#if editable}
-						<Paper hover bl>
+						<Paper hover bl remap>
 							{#snippet target()}
 								<IconButton size="1.2em" icon="format_align_left" />
 							{/snippet}
-							<div style="margin: -6px;font-size: 0.6em">
+							<div class="menu-list align-menu">
 								<List>
 									<OneLine
 										icon="format_align_left"
@@ -172,15 +213,21 @@
 					<ToolbarButton icon="subscript" prop="subscript" />
 					<ToolbarButton icon="border_color" prop="highlight" />
 					{#if editable}
-						<ToolbarButton icon="functions" handler={() => setMath(tiptap)} />
+						<ToolbarButton icon="functions" prop="math_inline" handler={() => setMath(tiptap)} />
 					{/if}
-					<Paper bl block>
+					<Paper bl remap>
 						{#snippet target()}
 							<IconButton size="1.2em" icon="palette" />
 						{/snippet}
-						<div style="font-size: 0.6em">
+						<div class="menu-list">
 							<div class="colors">
-								<Button small outlined onclick={() => tiptap.chain().focus().unsetColor().run()}>
+								<Button
+									small
+									outlined
+									active={!hasTextColor}
+									class={!hasTextColor ? 'color-active' : undefined}
+									onclick={() => tiptap.chain().focus().unsetColor().run()}
+								>
 									{i18n('default')}
 								</Button>
 								<Paper bl remap block>
@@ -189,12 +236,14 @@
 											small
 											full
 											outlined
+											active={hasTextColor}
+											class={hasTextColor ? 'color-active' : undefined}
 											onclick={() => tiptap.chain().focus().unsetColor().run()}
 										>
-											<Icon colorize />
+											<Icon icon="palette" />
 										</Button>
 									{/snippet}
-									<div onclick={(event) => event.stopPropagation()} onmousedown={(event) => event.stopPropagation()}>
+									<div role="presentation" onmousedown={(event) => event.stopPropagation()}>
 										<ColorPicker
 											isDialog={false}
 											onInput={(event) => {
@@ -203,16 +252,15 @@
 										/>
 									</div>
 								</Paper>
-								{#each colors as color}
+								{#each colors as color (color)}
 									<Button
 										small
 										outlined
+										active={currentTextColor === color.toLowerCase()}
+										class={currentTextColor === color.toLowerCase() ? 'color-active' : undefined}
 										onclick={() => tiptap.chain().focus().setColor(color).run()}
 									>
-										<span
-										style:background={color}
-										class="pal"
-										></span>
+										<span style:background={color} class="pal"></span>
 									</Button>
 								{/each}
 							</div>
@@ -226,57 +274,148 @@
 				<Render it={children} />
 			</main>
 		{/if}
-	</BubbleMenu>
+	{/snippet}
+
+	{#if docked && tiptap.isEditable}
+		<div class="docked-menu">
+			{@render toolbar()}
+		</div>
+	{:else}
+		<BubbleMenu
+			editor={tiptap}
+			updateDelay={50}
+			{shouldShow}
+			tippyOptions={{
+				moveTransition: 'transform 0.2s cubic-bezier(1,.5,0,.85)',
+				animation: 'shift-away-subtle',
+				duration: [200, 50]
+			}}
+		>
+			{@render toolbar()}
+		</BubbleMenu>
+	{/if}
 {/if}
 
-<style>main {
-  box-shadow: var(--shadow);
-  background: var(--surface, #fff);
-  color: var(--on-surface, #000);
-  padding: 8px;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.2em;
-}
-main > :global(*) {
-  margin: 0 2px;
-}
-main > :global(*):first-child {
-  margin-left: 0;
-}
-main > :global(*):last-child {
-  margin-right: 0;
-}
-
-.link {
-  display: flex;
-  flex-direction: column;
-  font-size: 0.7em;
-}
-.link p {
-  margin: 0 0 0.6em 0;
-}
-.link div {
-  margin-top: 0.6em;
-  display: flex;
-  justify-content: flex-end;
-}
-
-.colors {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 4px;
-}
-.colors > :global(:first-child) {
-  grid-column: 1/3;
-}
-
-.pal {
-  width: 20px;
-  height: 16px;
-  border-radius: 4px;
-  display: inline-block;
-  margin-bottom: -2px;
-}</style>
+<style>
+	main {
+		box-shadow:
+			0 10px 24px rgba(22, 37, 63, 0.14),
+			0 2px 8px rgba(22, 37, 63, 0.1);
+		background: var(--surface, #fff);
+		border: 1px solid var(--primary-light2, #d5dff3);
+		color: var(--on-surface, #000);
+		padding: 8px 10px;
+		border-radius: 12px;
+		display: flex;
+		flex-wrap: nowrap;
+		gap: 4px;
+		align-items: center;
+		justify-content: center;
+		font-size: 1.2em;
+		& > :global(*) {
+			margin: 0;
+		}
+	}
+
+	.docked-menu {
+		position: sticky;
+		top: var(--tiptap-toolbar-sticky-top, 8px);
+		z-index: 40;
+		display: flex;
+		justify-content: center;
+		margin-bottom: 10px;
+		padding: 4px 0;
+	}
+
+	main.docked {
+		width: 100%;
+		justify-content: flex-start;
+		border-radius: 14px;
+		overflow-x: auto;
+		overflow-y: hidden;
+		backdrop-filter: blur(10px) saturate(1.15);
+		-webkit-backdrop-filter: blur(10px) saturate(1.15);
+	}
+
+	main:not(.docked) {
+		overflow-x: auto;
+		overflow-y: hidden;
+	}
+
+	main.docked > :global(*) {
+		flex-shrink: 0;
+	}
+
+	main.docked :global(button) {
+		font-size: 1.08em;
+	}
+
+	main.docked > :global(main.i) {
+		display: flex;
+		align-items: center;
+		line-height: 1;
+		transform: translateY(-1px);
+	}
+
+	.menu-list {
+		font-size: 0.6em;
+	}
+
+	.align-menu {
+		margin: -6px;
+	}
+
+	main.docked .menu-list {
+		font-size: 0.72em;
+	}
+
+	@media (max-width: 768px) {
+		main {
+			font-size: 1.05em;
+		}
+	}
+
+	.link {
+		display: flex;
+		flex-direction: column;
+		font-size: 0.7em;
+
+		& p {
+			margin: 0 0 0.6em 0;
+		}
+
+		& div {
+			margin-top: 0.6em;
+			display: flex;
+			justify-content: flex-end;
+		}
+	}
+
+	.colors {
+		display: grid;
+		grid-template-columns: 1fr 1fr 1fr;
+		gap: 4px;
+
+		& > :global(:first-child) {
+			grid-column: 1/3;
+		}
+
+		& :global(button.color-active) {
+			box-shadow: inset 0 0 0 1px var(--primary-dark2, #2d4b8f);
+			background: color-mix(in srgb, var(--primary-light1, #eef3ff) 65%, var(--surface, #fff));
+		}
+
+		& :global(button.color-active .pal) {
+			outline: 1px solid color-mix(in srgb, var(--on-surface, #111) 65%, transparent);
+			outline-offset: 1px;
+		}
+	}
+
+	.pal {
+		width: 20px;
+		height: 16px;
+		border-radius: 4px;
+		display: inline-block;
+		margin-bottom: -2px;
+	}
+</style>

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

@@ -1,8 +1,11 @@
 import 'tippy.js/animations/shift-away-subtle.css';
-declare const Bubble: import("svelte").Component<{
-    colors?: unknown;
-    editable: unknown;
-    override: unknown;
-    children: unknown;
-}, {}, "">;
+type Props = {
+    colors?: string[];
+    editable?: boolean;
+    override?: any;
+    docked?: boolean;
+    children?: any;
+};
+declare const Bubble: import("svelte").Component<Props, {}, "">;
+type Bubble = ReturnType<typeof Bubble>;
 export default Bubble;