@seorii/tiptap 0.3.0 → 0.4.1

package/dist/plugin/upload/skeleton/index.js

@@ -0,0 +1,147 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+import { NodeSelection } from '@tiptap/pm/state';
+import { SvelteNodeViewRenderer } from 'svelte-tiptap';
+import UploadSkeleton from './UploadSkeleton.svelte';
+export const UPLOAD_SKELETON_NODE = 'tiptap-upload-skeleton';
+const defaultHeight = {
+    image: 220,
+    file: 56,
+    pdf: 420,
+    embed: 420,
+    block: 180
+};
+function findUploadSkeleton(doc, id) {
+    let foundPos = null;
+    let foundNode = null;
+    doc.descendants((node, pos) => {
+        if (node.type.name !== UPLOAD_SKELETON_NODE)
+            return;
+        if (node.attrs.uploadId !== id)
+            return;
+        foundPos = pos;
+        foundNode = node;
+        return false;
+    });
+    if (foundPos === null || foundNode === null)
+        return null;
+    return { pos: foundPos, node: foundNode };
+}
+function tryCreateNodeSelection(doc, pos) {
+    if (pos < 0 || pos > doc.content.size)
+        return null;
+    const node = doc.nodeAt(pos);
+    if (!node || node.type.spec.selectable === false)
+        return null;
+    try {
+        return NodeSelection.create(doc, pos);
+    }
+    catch {
+        return null;
+    }
+}
+export function insertUploadSkeleton(editor, { kind = 'block', height = defaultHeight[kind], at, select = true, insertParagraph = true } = {}) {
+    const skeletonType = editor.state.schema.nodes[UPLOAD_SKELETON_NODE];
+    if (!skeletonType)
+        return null;
+    const clampedHeight = Math.max(44, Math.min(1200, Math.round(height)));
+    const uploadId = `upload-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
+    const node = skeletonType.create({ uploadId, kind, height: clampedHeight });
+    const paragraph = editor.state.schema.nodes.paragraph?.create();
+    const safePos = Math.max(0, Math.min(at ?? editor.state.selection.from, editor.state.doc.content.size));
+    const tr = editor.state.tr.insert(safePos, node);
+    if (insertParagraph && paragraph) {
+        tr.insert(safePos + node.nodeSize, paragraph);
+    }
+    if (select) {
+        const nodeSelection = tryCreateNodeSelection(tr.doc, safePos);
+        if (nodeSelection)
+            tr.setSelection(nodeSelection);
+    }
+    editor.view.dispatch(tr);
+    return {
+        id: uploadId,
+        exists: () => Boolean(findUploadSkeleton(editor.state.doc, uploadId)),
+        replaceWith: (content, options = {}) => {
+            const target = findUploadSkeleton(editor.state.doc, uploadId);
+            if (!target)
+                return false;
+            if (!content?.type)
+                return false;
+            let nextNode;
+            try {
+                nextNode = editor.state.schema.nodeFromJSON(content);
+            }
+            catch {
+                return false;
+            }
+            const tr = editor.state.tr.replaceWith(target.pos, target.pos + target.node.nodeSize, nextNode);
+            if (options.select ?? true) {
+                const nodeSelection = tryCreateNodeSelection(tr.doc, target.pos);
+                if (nodeSelection)
+                    tr.setSelection(nodeSelection);
+            }
+            editor.view.dispatch(tr);
+            return true;
+        },
+        remove: () => {
+            const target = findUploadSkeleton(editor.state.doc, uploadId);
+            if (!target)
+                return false;
+            const removeFrom = target.pos;
+            let removeTo = target.pos + target.node.nodeSize;
+            const nextNode = editor.state.doc.nodeAt(removeTo);
+            if (nextNode?.type.name === 'paragraph' && nextNode.content.size === 0) {
+                removeTo += nextNode.nodeSize;
+            }
+            editor.view.dispatch(editor.state.tr.deleteRange(removeFrom, removeTo));
+            return true;
+        }
+    };
+}
+export default Node.create({
+    name: UPLOAD_SKELETON_NODE,
+    group: 'block',
+    atom: true,
+    draggable: false,
+    selectable: true,
+    addAttributes() {
+        return {
+            uploadId: {
+                default: null,
+                parseHTML: (element) => element.getAttribute('data-upload-id'),
+                renderHTML: (attributes) => attributes.uploadId ? { 'data-upload-id': attributes.uploadId } : {}
+            },
+            kind: {
+                default: 'block',
+                parseHTML: (element) => element.getAttribute('data-upload-kind') || 'block',
+                renderHTML: (attributes) => attributes.kind ? { 'data-upload-kind': attributes.kind } : {}
+            },
+            height: {
+                default: defaultHeight.block,
+                parseHTML: (element) => {
+                    const value = Number.parseInt(element.getAttribute('data-upload-height') || '', 10);
+                    return Number.isFinite(value) ? value : defaultHeight.block;
+                },
+                renderHTML: (attributes) => {
+                    const raw = Number.parseFloat(String(attributes.height ?? defaultHeight.block));
+                    const height = Number.isFinite(raw) ? Math.max(44, Math.min(1200, Math.round(raw))) : 180;
+                    return { 'data-upload-height': String(height) };
+                }
+            }
+        };
+    },
+    parseHTML() {
+        return [{ tag: UPLOAD_SKELETON_NODE }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return [
+            UPLOAD_SKELETON_NODE,
+            mergeAttributes(HTMLAttributes, {
+                'data-bubble-menu': 'false'
+            })
+        ];
+    },
+    addNodeView() {
+        return SvelteNodeViewRenderer(UploadSkeleton);
+    }
+});

package/dist/plugin/youtube.js

@@ -5,7 +5,7 @@ const youtubeExtractId = (url) => {
     const match = youtubeRegExp.exec(url.trim());
     return match ? match[1] : false;
 };
-const videoPlayerStaticAttributes = { nocookie: true };
+const videoPlayerStaticAttributes = { nocookie: true, 'data-bubble-menu': 'false' };
 export default Node.create({
     name: 'lite-youtube',
     content: '',

package/dist/tiptap/Bubble.svelte

@@ -10,23 +10,33 @@
 	import defaultI18n, { I18N_CONTEXT, type I18nTranslate } from '../i18n';
 	import ColorPicker from 'svelte-awesome-color-picker';
 	import { isTextSelection } from '@tiptap/core';
-	import type { EditorState, Selection } from '@tiptap/pm/state';
+	import { NodeSelection, type EditorState, type Selection } from '@tiptap/pm/state';
 	import type { EditorView } from '@tiptap/pm/view';
 
 	type Props = {
 		colors?: string[];
 		editable?: boolean;
 		override?: any;
+		docked?: boolean;
 		children?: any;
 	};
 
-	let { colors = [], editable, override, children }: Props = $props();
+	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<Selection | null>(null);
 	let table = $state<number[] | false>(false);
@@ -72,6 +82,7 @@
 
 	const shouldShow = ({
 		state,
+		view,
 		from,
 		to
 	}: {
@@ -85,6 +96,18 @@
 		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);
@@ -92,22 +115,13 @@
 </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>
@@ -157,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"
@@ -201,13 +215,19 @@
 					{#if editable}
 						<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>
@@ -216,15 +236,14 @@
 											small
 											full
 											outlined
+											active={hasTextColor}
+											class={hasTextColor ? 'color-active' : undefined}
 											onclick={() => tiptap.chain().focus().unsetColor().run()}
 										>
 											<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) => {
@@ -233,10 +252,12 @@
 										/>
 									</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>
@@ -253,30 +274,104 @@
 				<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);
+		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;
-		border-radius: 4px;
+		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 2px;
+			margin: 0;
 		}
+	}
 
-		& > :global(*:first-child) {
-			margin-left: 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;
+	}
 
-		& > :global(*:last-child) {
-			margin-right: 0;
+	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;
 		}
 	}
 
@@ -304,6 +399,16 @@
 		& > :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 {

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

@@ -3,6 +3,7 @@ type Props = {
     colors?: string[];
     editable?: boolean;
     override?: any;
+    docked?: boolean;
     children?: any;
 };
 declare const Bubble: import("svelte").Component<Props, {}, "">;

package/dist/tiptap/TipTap.svelte

@@ -19,6 +19,7 @@
 	} 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 = {
@@ -36,9 +37,11 @@
 		sanitize?: Record<string, any>;
 		colors?: string[];
 		bubble?: any;
+		bubbleDocked?: boolean;
 		preloader?: any;
 		crossorigin?: 'anonymous' | 'use-credentials';
 		codeBlockLanguageLabels?: Record<string, string>;
+		resize?: boolean | ResizeOptions;
 	};
 
 	let {
@@ -65,12 +68,22 @@
 			'#ab47bc' //purple
 		],
 		bubble = null,
+		bubbleDocked = false,
 		preloader,
 		crossorigin = 'anonymous',
-		codeBlockLanguageLabels = {}
+		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 || '', {
@@ -85,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 || [])
@@ -133,6 +154,15 @@
 			([{ 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: editorPlaceholder,
 					editable,
@@ -142,7 +172,8 @@
 					},
 					crossorigin,
 					codeBlockLanguageLabels,
-					...options
+					...options,
+					plugins: optionPlugins
 				});
 				tiptap.v.on('update', ({ editor: tiptap }: any) => {
 					let content = tiptap.getHTML(),
@@ -217,6 +248,11 @@
 </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>
@@ -236,8 +272,8 @@
 		<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}
@@ -291,7 +327,9 @@
 
 	.editable :global(.ProseMirror-selectednode img) {
 		transition: all 0.2s ease-in-out;
-		filter: drop-shadow(0 0 0.75rem var(--primary-light13));
+		outline: 3px solid var(--primary);
+		outline-offset: 2px;
+		filter: none;
 	}
 
 	.editable :global(.iframe-wrapper.ProseMirror-selectednode) {
@@ -302,6 +340,53 @@
 		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) {
@@ -325,6 +410,7 @@
 		& :global(img) {
 			transition: all 0.2s ease-in-out;
 			max-width: 100%;
+			object-fit: contain;
 			border-radius: 12px;
 			position: relative;
 		}

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

@@ -1,5 +1,6 @@
 import '@seorii/prosemirror-math/style.css';
 import type { UploadFn } from '../plugin/image/dragdrop';
+import { type ResizeOptions } from '../plugin/resize';
 type Props = {
     body: string;
     editable?: boolean;
@@ -15,9 +16,11 @@ type Props = {
     sanitize?: Record<string, any>;
     colors?: string[];
     bubble?: any;
+    bubbleDocked?: boolean;
     preloader?: any;
     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>;

package/dist/tiptap/tiptap.js

@@ -21,10 +21,12 @@ import { Color } from '@tiptap/extension-color';
 import { TextStyle } from '@tiptap/extension-text-style';
 import Iframe from '../plugin/iframe';
 import Embed from '../plugin/embed';
+import UploadSkeleton from '../plugin/upload/skeleton';
 // @ts-ignore
 import { MathInline, MathBlock } from '@seorii/prosemirror-math/tiptap';
 import Youtube from '../plugin/youtube';
 import Placeholder from '@tiptap/extension-placeholder';
+import columns from '../plugin/columns';
 import command from '../plugin/command/suggest';
 import emoji from '../plugin/command/emoji';
 import { countSlashItems, moveSlashSelection, runSlashItemAt, slashState } from '../plugin/command/stores.svelte';
@@ -238,6 +240,7 @@ const extensions = (placeholder, plugins, crossorigin, codeBlockLanguageLabels)
     orderedlist,
     MathInline,
     MathBlock,
+    ...columns,
     table,
     tableHeader,
     tableRow,
@@ -247,6 +250,7 @@ const extensions = (placeholder, plugins, crossorigin, codeBlockLanguageLabels)
     Indent,
     Color,
     TextStyle,
+    UploadSkeleton,
     Iframe,
     Embed,
     Code.extend({