@seorii/tiptap 0.3.0-next.9 → 0.4.0

package/dist/tiptap/TipTap.svelte

@@ -1,14 +1,25 @@
 <script lang="ts">
-	import { onMount, onDestroy, setContext, untrack } from 'svelte';
+	import { setContext, untrack } from 'svelte';
 	import sanitizeHtml from 'sanitize-html';
 	import '@seorii/prosemirror-math/style.css';
 	import Bubble from './Bubble.svelte';
 	import Floating from './Floating.svelte';
 	import Command from './Command.svelte';
-	import { slashItems, slashProps, slashVisible } from '../plugin/command/stores';
-	import i18n from '../i18n';
+	import {
+		countSlashItems,
+		flattenSlashItems,
+		normalizeSlashIndex,
+		slashState
+	} from '../plugin/command/stores.svelte';
+	import {
+		I18N_CONTEXT,
+		setLocale as setI18nLocale,
+		translateWithLocale,
+		type I18nTranslate
+	} from '../i18n';
 	import type { UploadFn } from '../plugin/image/dragdrop';
 	import { fallbackUpload } from '../plugin/image/dragdrop';
+	import MediaResize, { type ResizeOptions } from '../plugin/resize';
 	import { Render } from 'nunui';
 
 	type Props = {
@@ -22,11 +33,15 @@
 		style?: string;
 		blocks?: any[];
 		placeholder?: string;
+		locale?: string;
 		sanitize?: Record<string, any>;
 		colors?: string[];
 		bubble?: any;
+		bubbleDocked?: boolean;
 		preloader?: any;
 		crossorigin?: 'anonymous' | 'use-credentials';
+		codeBlockLanguageLabels?: Record<string, string>;
+		resize?: boolean | ResizeOptions;
 	};
 
 	let {
@@ -39,7 +54,8 @@
 		imageUpload = fallbackUpload,
 		style = '',
 		blocks = [],
-		placeholder = i18n('placeholder'),
+		placeholder,
+		locale,
 		sanitize = {},
 		colors = [
 			'#ef5350', //red
@@ -52,10 +68,23 @@
 			'#ab47bc' //purple
 		],
 		bubble = null,
+		bubbleDocked = false,
 		preloader,
 		crossorigin = 'anonymous',
+		codeBlockLanguageLabels = {},
+		resize = true
 	}: Props = $props();
 
+	const scopedI18n: I18nTranslate = (...args) => translateWithLocale(locale, ...args);
+	const resizeDataAttrs = [
+		'data-resize-handler',
+		'data-resize-target',
+		'data-resize-min-height',
+		'data-resize-max-height',
+		'data-bubble-menu',
+		'data-hide-bubble-menu'
+	];
+
 	const san = (body: string) =>
 		sanitizeHtml(body || '', {
 			...(sanitize || {}),
@@ -69,18 +98,26 @@
 				'embed',
 				'mark',
 				'code',
+				'tiptap-upload-skeleton',
 				...(sanitize.allowedTags || [])
 			]),
 			allowedStyles: '*' as any,
 			allowedAttributes: {
 				'*': ['style', 'class'],
 				a: ['href', 'name', 'target'],
-				img: ['src', 'srcset', 'alt', 'title', 'width', 'height', 'loading'],
-				iframe: ['src', 'width', 'height', 'frameborder', 'allowfullscreen'],
+				img: ['src', 'srcset', 'alt', 'title', 'width', 'height', 'loading', ...resizeDataAttrs],
+				iframe: ['src', 'width', 'height', 'frameborder', 'allowfullscreen', ...resizeDataAttrs],
 				th: ['colwidth', 'colspan', 'rowspan'],
 				td: ['colwidth', 'colspan', 'rowspan'],
-				'lite-youtube': ['videoid', 'params', 'nocookie', 'title', 'provider'],
-				embed: ['src', 'type', 'frameborder', 'allowfullscreen'],
+				'lite-youtube': ['videoid', 'params', 'nocookie', 'title', 'provider', ...resizeDataAttrs],
+				embed: ['src', 'type', 'frameborder', 'allowfullscreen', ...resizeDataAttrs],
+				'tiptap-upload-skeleton': [
+					'data-upload-id',
+					'data-upload-kind',
+					'data-upload-height',
+					'data-bubble-menu',
+					'data-hide-bubble-menu'
+				],
 				mark: ['style', 'data-color'],
 				code: ['class'],
 				...(sanitize.allowedAttributes || [])
@@ -89,11 +126,16 @@
 
 	const tiptap = $state({ v: null as any, c: 0 });
 	setContext('editor', tiptap);
+	setContext(I18N_CONTEXT, scopedI18n);
 	let element: Element,
 		fullscreen = $state(false),
 		mounted = $state(false),
 		last = $state('');
 
+	$effect(() => {
+		setI18nLocale(locale);
+	});
+
 	$effect(() => {
 		if (tiptap.v) tiptap.v.setEditable(editable);
 	});
@@ -111,15 +153,27 @@
 		Promise.all([import('./tiptap'), import('@justinribeiro/lite-youtube')]).then(
 			([{ default: tt }]) => {
 				if (!untrack(() => mounted)) return;
+				const editorPlaceholder = placeholder ?? scopedI18n('placeholder');
+				const optionPlugins = Array.isArray(options.plugins)
+					? [...options.plugins]
+					: options.plugins
+						? [options.plugins]
+						: [];
+				if (resize) {
+					const resizeOptions = typeof resize === 'object' ? resize : {};
+					optionPlugins.unshift(MediaResize.configure(resizeOptions));
+				}
 				tiptap.v = ref = tt(element, r, {
-					placeholder,
+					placeholder: editorPlaceholder,
 					editable,
 					onTransaction: () => {
 						tiptap.v = ref = tiptap.v;
 						tiptap.c++;
 					},
 					crossorigin,
-					...options
+					codeBlockLanguageLabels,
+					...options,
+					plugins: optionPlugins
 				});
 				tiptap.v.on('update', ({ editor: tiptap }: any) => {
 					let content = tiptap.getHTML(),
@@ -150,29 +204,35 @@
 		tiptap.v?.commands?.setContent?.(body);
 	});
 
-	let selectedIndex = $state(0);
-	$effect(() => {
-		if (!slashVisible) selectedIndex = 0;
-	});
-
 	function handleKeydown(event: KeyboardEvent) {
-		if (!$slashVisible) return;
-		let count = $slashItems.length;
-		if (($slashItems[0] as any)?.list) count = $slashItems.reduce((acc, item) => acc + (item as any).list.length, 0);
+		if (event.defaultPrevented) return true;
+		if (!slashState.visible) return false;
+		const count = countSlashItems();
+		if (!count) return false;
+
+		if (event.key === 'Tab') {
+			event.preventDefault();
+			slashState.selectedIndex += event.shiftKey ? -1 : 1;
+			normalizeSlashIndex();
+			return true;
+		}
+
 		if (event.key === 'ArrowUp') {
 			event.preventDefault();
-			selectedIndex = (selectedIndex + count - 1) % count;
+			slashState.selectedIndex -= 1;
+			normalizeSlashIndex();
 			return true;
 		}
 		if (event.key === 'ArrowDown') {
 			event.preventDefault();
-			selectedIndex = (selectedIndex + 1) % count;
+			slashState.selectedIndex += 1;
+			normalizeSlashIndex();
 			return true;
 		}
 
 		if (event.key === 'Enter') {
 			event.preventDefault();
-			selectItem(selectedIndex);
+			selectItem(slashState.selectedIndex);
 			return true;
 		}
 
@@ -180,17 +240,19 @@
 	}
 
 	function selectItem(index: number) {
-		const item = ($slashItems[0] as any)?.list
-			? $slashItems.map((i: any) => i.list).flat()[index]
-			: $slashItems[index];
-		if (item) {
-			let range = $slashProps.range;
-			item.command({ editor: tiptap.v, range });
-		}
+		const item = flattenSlashItems()[index];
+		const { editor, range } = slashState.props;
+		if (!item || !editor || !range) return;
+		item.command({ editor, range });
 	}
 </script>
 
 <main class:fullscreen class:editable {style}>
+	{#if bubbleDocked && (editable || mark)}
+		<Bubble {colors} {editable} override={bubble} docked={bubbleDocked}>
+			<Render it={bubble} />
+		</Bubble>
+	{/if}
 	<div class="wrapper">
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div bind:this={element} class="target" onkeydown={handleKeydown}></div>
@@ -207,122 +269,222 @@
 		{/if}
 	</div>
 	{#if editable}
-		<Command {selectedIndex} />
+		<Command />
 		<Floating />
 	{/if}
-	{#if editable || mark}
-		<Bubble {colors} {editable} override={bubble}>
+	{#if !bubbleDocked && (editable || mark)}
+		<Bubble {colors} {editable} override={bubble} docked={bubbleDocked}>
 			<Render it={bubble} />
 		</Bubble>
 	{/if}
 </main>
 
-<style>main {
-  position: relative;
-  overscroll-behavior: none;
-  --shadow: 0 1px 2px rgba(127, 127, 127, 0.07), 0 2px 4px rgba(127, 127, 127, 0.07),
-  	0 4px 8px rgba(127, 127, 127, 0.07), 0 8px 16px rgba(127, 127, 127, 0.07),
-  	0 16px 32px rgba(127, 127, 127, 0.07), 0 32px 64px rgba(127, 127, 127, 0.07);
-}
-main.fullscreen {
-  z-index: 999999999;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: var(--surface);
-  padding: 82px 12px 12px 12px;
-}
-main .wrapper {
-  position: relative;
-}
-
-.target > :global(div) > :global(*:first-child) {
-  margin-top: 0 !important;
-}
-.target > :global(div) > :global(*:last-child) {
-  margin-bottom: 0 !important;
-}
-
-.editable :global(.ProseMirror-selectednode img) {
-  transition: all 0.2s ease-in-out;
-  filter: drop-shadow(0 0 0.75rem var(--primary-light13));
-}
-
-.editable :global(.iframe-wrapper.ProseMirror-selectednode) {
-  outline: 3px solid var(--primary);
-}
-
-.editable :global(lite-youtube.ProseMirror-selectednode) {
-  outline: 3px solid var(--primary);
-}
-
-div > :global(div) {
-  outline: none !important;
-}
-div > :global(div) :global(.ProseMirror) :global(p.is-editor-empty:first-child::before) {
-  color: var(--on-surface, #000);
-  opacity: 0.7;
-  content: attr(data-placeholder);
-  float: left;
-  height: 0;
-  pointer-events: none;
-  transition: 0.2s opacity ease-in-out;
-}
-div > :global(div) :global(.ProseMirror-focused) :global(p.is-editor-empty:first-child::before) {
-  opacity: 0;
-}
-div > :global(div) :global(a) {
-  cursor: pointer;
-}
-div > :global(div) :global(img) {
-  transition: all 0.2s ease-in-out;
-  max-width: 100%;
-  border-radius: 12px;
-  position: relative;
-}
-div > :global(div) :global(code.inline) {
-  background: var(--primary-light1);
-  padding: 2px 4px;
-  border-radius: 4px;
-}
-div > :global(div) :global(pre) {
-  background: var(--primary-light1);
-  padding: 12px;
-  border-radius: 12px;
-  max-width: 100%;
-}
-div > :global(div) :global(table) {
-  border-collapse: collapse;
-  width: 100%;
-  margin: 8px 0;
-  border: 1px solid var(--primary-light1);
-  border-radius: 12px;
-}
-div > :global(div) :global(th),
-div > :global(div) :global(td) {
-  padding: 8px;
-  border: 1px solid var(--primary-light1);
-}
-div > :global(div) :global(.math-render) {
-  cursor: initial;
-}
-div > :global(div) :global(lite-youtube) {
-  border-radius: 12px;
-}
-div > :global(div) :global(.iframe-wrapper) {
-  position: relative;
-  padding-bottom: 12px;
-  overflow: hidden;
-  width: 100%;
-  height: 600px;
-  border-radius: 12px;
-}
-div > :global(div) :global(iframe) {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}</style>
+<style>
+	main {
+		position: relative;
+		overscroll-behavior: none;
+		--shadow:
+			0 1px 2px rgba(127, 127, 127, 0.07), 0 2px 4px rgba(127, 127, 127, 0.07),
+			0 4px 8px rgba(127, 127, 127, 0.07), 0 8px 16px rgba(127, 127, 127, 0.07),
+			0 16px 32px rgba(127, 127, 127, 0.07), 0 32px 64px rgba(127, 127, 127, 0.07);
+		&.fullscreen {
+			z-index: 999999999;
+			position: fixed;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			background: var(--surface);
+			padding: 82px 12px 12px 12px;
+		}
+
+		& .wrapper {
+			position: relative;
+		}
+	}
+
+	main :global(.tiptap-code-block-toolbar) {
+		position: absolute;
+		top: 8px;
+		right: 8px;
+		z-index: 1;
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	main:not(.editable) :global(.tiptap-code-block-toolbar) {
+		visibility: hidden;
+		pointer-events: none;
+	}
+
+	.target > :global(div) > :global(*:first-child) {
+		margin-top: 0 !important;
+	}
+
+	.target > :global(div) > :global(*:last-child) {
+		margin-bottom: 0 !important;
+	}
+
+	.editable :global(.ProseMirror-selectednode img) {
+		transition: all 0.2s ease-in-out;
+		outline: 3px solid var(--primary);
+		outline-offset: 2px;
+		filter: none;
+	}
+
+	.editable :global(.iframe-wrapper.ProseMirror-selectednode) {
+		outline: 3px solid var(--primary);
+	}
+
+	.editable :global(lite-youtube.ProseMirror-selectednode) {
+		outline: 3px solid var(--primary);
+	}
+
+	.editable :global(.tiptap-media-resize-anchor) {
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		margin: 6px 0 2px;
+		line-height: 0;
+		pointer-events: none;
+	}
+
+	.editable :global(.tiptap-media-resize-handle) {
+		appearance: none;
+		-webkit-appearance: none;
+		display: block;
+		width: 42px;
+		height: 8px;
+		margin: 0;
+		padding: 0;
+		border: 1px solid var(--primary-light3, rgba(120, 120, 120, 0.45));
+		border-radius: 999px;
+		background: var(--primary-light6, rgba(120, 120, 120, 0.2));
+		cursor: ns-resize;
+		pointer-events: auto;
+		transition:
+			background-color 0.15s ease,
+			border-color 0.15s ease,
+			transform 0.15s ease;
+	}
+
+	.editable :global(.tiptap-media-resize-handle:hover),
+	.editable :global(.tiptap-media-resize-handle:focus-visible) {
+		background: var(--primary-light4, rgba(120, 120, 120, 0.35));
+		border-color: var(--primary-light2, rgba(100, 100, 100, 0.55));
+		outline: none;
+	}
+
+	.editable :global(.tiptap-media-resize-handle:active) {
+		transform: translateY(1px);
+	}
+
+	.editable :global(.tiptap-media-resize-proxy) {
+		width: 100%;
+		border-radius: 12px;
+		background: var(--primary-light4, rgba(120, 120, 120, 0.35));
+		opacity: 0.55;
+		pointer-events: none;
+	}
+
+	div > :global(div) {
+		outline: none !important;
+		& :global(.ProseMirror) :global(p.is-editor-empty:first-child::before) {
+			color: var(--on-surface, #000);
+			opacity: 0.7;
+			content: attr(data-placeholder);
+			float: left;
+			height: 0;
+			pointer-events: none;
+			transition: 0.2s opacity ease-in-out;
+		}
+
+		& :global(.ProseMirror-focused) :global(p.is-editor-empty:first-child::before) {
+			opacity: 0;
+		}
+
+		& :global(a) {
+			cursor: pointer;
+		}
+
+		& :global(img) {
+			transition: all 0.2s ease-in-out;
+			max-width: 100%;
+			border-radius: 12px;
+			position: relative;
+		}
+
+		& :global(code.inline) {
+			background: var(--primary-light1);
+			padding: 2px 4px;
+			border-radius: 4px;
+		}
+
+		& :global(pre) {
+			background: var(--primary-light1);
+			padding: 12px;
+			border-radius: 12px;
+			max-width: 100%;
+		}
+
+		& :global(.tiptap-code-block) {
+			max-width: 100%;
+			position: relative;
+		}
+
+		& :global(.tiptap-code-block-language) {
+			padding: 2px 6px;
+			border-radius: 8px;
+			border: 1px solid var(--primary-light2, #ddd);
+			outline: 1px solid transparent;
+			outline-offset: 0;
+			background: var(--surface, #fff);
+			color: var(--on-surface, #000);
+			font-size: 0.75em;
+
+			&:focus,
+			&:focus-visible {
+				outline-color: var(--primary-light9, #89a2d9);
+			}
+		}
+
+		& :global(table) {
+			border-collapse: collapse;
+			width: 100%;
+			margin: 8px 0;
+			border: 1px solid var(--primary-light1);
+			border-radius: 12px;
+		}
+
+		& :global(th),
+		& :global(td) {
+			padding: 8px;
+			border: 1px solid var(--primary-light1);
+		}
+
+		& :global(.math-render) {
+			cursor: initial;
+		}
+
+		& :global(lite-youtube) {
+			border-radius: 12px;
+		}
+
+		& :global(.iframe-wrapper) {
+			position: relative;
+			padding-bottom: 12px;
+			overflow: hidden;
+			width: 100%;
+			height: 600px;
+			border-radius: 12px;
+		}
+
+		& :global(iframe) {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+		}
+	}
+</style>

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

@@ -1,6 +1,7 @@
 import '@seorii/prosemirror-math/style.css';
 import type { UploadFn } from '../plugin/image/dragdrop';
-declare const TipTap: import("svelte").Component<{
+import { type ResizeOptions } from '../plugin/resize';
+type Props = {
     body: string;
     editable?: boolean;
     mark?: boolean;
@@ -11,10 +12,16 @@ declare const TipTap: import("svelte").Component<{
     style?: string;
     blocks?: any[];
     placeholder?: string;
+    locale?: string;
     sanitize?: Record<string, any>;
     colors?: string[];
     bubble?: any;
+    bubbleDocked?: boolean;
     preloader?: any;
-    crossorigin?: "anonymous" | "use-credentials";
-}, {}, "body" | "ref" | "loaded">;
+    crossorigin?: 'anonymous' | 'use-credentials';
+    codeBlockLanguageLabels?: Record<string, string>;
+    resize?: boolean | ResizeOptions;
+};
+declare const TipTap: import("svelte").Component<Props, {}, "body" | "ref" | "loaded">;
+type TipTap = ReturnType<typeof TipTap>;
 export default TipTap;

package/dist/tiptap/ToolbarButton.svelte

@@ -2,36 +2,56 @@
 	import { getContext } from 'svelte';
 	import { Button, IconButton, Render } from 'nunui';
 
-	const editor = getContext<{ v: any }>('editor');
+	const editor = getContext<{ v: any; c: number }>('editor');
 	const tiptap = $derived(editor.v);
 
+	type Props = {
+		prop?: string;
+		attrs?: Record<string, unknown>;
+		label?: string;
+		icon?: string;
+		methodName?: string;
+		tooltip?: string | Record<string, any>;
+		handler?: (() => void) | null;
+		children?: any;
+		[key: string]: unknown;
+	};
+
 	let {
 		prop = '',
-		attrs = '',
+		attrs = {},
 		label = '',
 		icon = '',
 		methodName = 'toggle' + prop.charAt(0).toUpperCase() + prop.slice(1),
 		tooltip,
-		handler,
+		handler = null,
+		children,
 		...rest
-	} = $props();
+	}: Props = $props();
 
-	const isActive = $derived(() => {
-		return editor && prop && tiptap.isActive(prop, attrs);
+	const isActive = $derived.by(() => {
+		// Recompute active styles on every editor transaction (selection/mark changes)
+		editor.c;
+		return !!(prop && tiptap?.isActive(prop, attrs));
 	});
 
 	function toggle() {
 		if (!tiptap) return;
-		//tiptap.chain().focus().clearNodes().run()
 		if (handler) return handler();
-		setTimeout(() => tiptap.chain().focus()[methodName](attrs)?.run(), 0);
+		setTimeout(() => {
+			const chain = tiptap.chain().focus() as Record<
+				string,
+				(attrs?: unknown) => { run?: () => void }
+			>;
+			chain[methodName]?.(attrs)?.run?.();
+		}, 0);
 	}
 </script>
 
 {#if icon}
-	<IconButton size="1.2em" {icon} active={isActive()} onclick={toggle} {tooltip} tabindex="0" />
+	<IconButton size="1.2em" {icon} active={isActive} onclick={toggle} {tooltip} tabindex={0} />
 {:else}
-	<Button outlined={!isActive()} onclick={handler || toggle} small {...rest}>
+	<Button outlined={!isActive} onclick={handler || toggle} small {...rest}>
 		{label}
 		<Render it={children} />
 	</Button>

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

@@ -1,10 +1,14 @@
-declare const ToolbarButton: import("svelte").Component<{
+type Props = {
     prop?: string;
-    attrs?: string;
+    attrs?: Record<string, unknown>;
     label?: string;
     icon?: string;
-    methodName?: unknown;
-    tooltip: unknown;
-    handler: unknown;
-} & Record<string, unknown>, {}, "">;
+    methodName?: string;
+    tooltip?: string | Record<string, any>;
+    handler?: (() => void) | null;
+    children?: any;
+    [key: string]: unknown;
+};
+declare const ToolbarButton: import("svelte").Component<Props, {}, "">;
+type ToolbarButton = ReturnType<typeof ToolbarButton>;
 export default ToolbarButton;

package/dist/tiptap/setMath.d.ts

@@ -1 +1,2 @@
-export default function setMath(tiptap: any): void;
+import type { Editor } from '@tiptap/core';
+export default function setMath(tiptap: Editor): void;