@foxui/text 0.4.0

package/dist/components/rich-text-editor/RichTextEditor.svelte

@@ -0,0 +1,427 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import { Editor, mergeAttributes, type Content } from '@tiptap/core';
+	import StarterKit from '@tiptap/starter-kit';
+	import Placeholder from '@tiptap/extension-placeholder';
+	import Image from '@tiptap/extension-image';
+	import { all, createLowlight } from 'lowlight';
+	import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
+	import BubbleMenu from '@tiptap/extension-bubble-menu';
+	import Underline from '@tiptap/extension-underline';
+	import RichTextEditorMenu from './RichTextEditorMenu.svelte';
+	import type { RichTextTypes } from '.';
+	import RichTextEditorLinkMenu from './RichTextEditorLinkMenu.svelte';
+	import Slash, { suggestion } from './slash-menu';
+	import Typography from '@tiptap/extension-typography';
+	import { RichTextLink } from './RichTextLink';
+
+	import './code.css';
+	import { cn } from '@foxui/core';
+	import { ImageUploadNode } from './image-upload/ImageUploadNode';
+	import { Transaction } from '@tiptap/pm/state';
+
+	let {
+		content = $bindable({}),
+		placeholder = 'Write or press / for commands',
+		editor = $bindable(null),
+		ref = $bindable(null),
+		class: className,
+		onupdate,
+		ontransaction
+	}: {
+		content?: Content;
+		placeholder?: string;
+		editor?: Editor | null;
+		ref?: HTMLDivElement | null;
+		class?: string;
+		onupdate?: (content: Content, context: { editor: Editor; transaction: Transaction }) => void;
+		ontransaction?: () => void;
+	} = $props();
+
+	const lowlight = createLowlight(all);
+
+	let hasFocus = true;
+
+	let menu: HTMLElement | null = $state(null);
+	let menuLink: HTMLElement | null = $state(null);
+
+	let selectedType: RichTextTypes = $state('paragraph');
+
+	let isBold = $state(false);
+	let isItalic = $state(false);
+	let isUnderline = $state(false);
+	let isStrikethrough = $state(false);
+	let isLink = $state(false);
+	let isImage = $state(false);
+
+	const CustomImage = Image.extend({
+		// addAttributes(this) {
+		// 	return {
+		// 		inline: true,
+		// 		allowBase64: true,
+		// 		HTMLAttributes: {},
+		// 		uploadImageHandler: { default: undefined }
+		// 	};
+		// },
+		renderHTML({ HTMLAttributes }) {
+			const attrs = mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+				uploadImageHandler: undefined
+			});
+			const isLocal = attrs['data-local'] === 'true';
+
+			// if (isLocal) {
+			// 	// For local images, wrap in a container with a label
+			// 	return [
+			// 		'div',
+			// 		{ class: 'image-container' },
+			// 		['img', { ...attrs, class: `${attrs.class || ''} local-image` }],
+			// 		['span', { class: 'local-image-label' }, 'Local preview']
+			// 	];
+			// }
+
+			console.log('attrs', attrs);
+
+			// For regular images, just return the img tag
+			return ['img', attrs];
+		}
+	});
+
+	onMount(() => {
+		if (!ref) return;
+
+		let extensions = [
+			StarterKit.configure({
+				dropcursor: {
+					class: 'text-accent-500/30 rounded-2xl',
+					width: 2
+				},
+				codeBlock: false,
+				heading: {
+					levels: [1, 2, 3]
+				}
+			}),
+			Placeholder.configure({
+				placeholder: ({ node }) => {
+					// only show in paragraphs
+					if (node.type.name === 'paragraph' || node.type.name === 'heading') {
+						return placeholder;
+					}
+					return '';
+				}
+			}),
+			CustomImage.configure({
+				HTMLAttributes: {
+					class: 'max-w-full object-contain relative rounded-2xl'
+				},
+				allowBase64: true
+			}),
+			CodeBlockLowlight.configure({
+				lowlight,
+				defaultLanguage: 'js'
+			}),
+			BubbleMenu.configure({
+				element: menu,
+				shouldShow: ({ editor }) => {
+					// dont show if image selected or no selection or is code block
+					return (
+						!editor.isActive('image') &&
+						!editor.view.state.selection.empty &&
+						!editor.isActive('codeBlock') &&
+						!editor.isActive('link') &&
+						!editor.isActive('imageUpload')
+					);
+				},
+				pluginKey: 'bubble-menu-marks'
+			}),
+			BubbleMenu.configure({
+				element: menuLink,
+				shouldShow: ({ editor }) => {
+					// only show if link is selected
+					return editor.isActive('link') && !editor.view.state.selection.empty;
+				},
+				pluginKey: 'bubble-menu-links'
+			}),
+			Underline.configure({}),
+			RichTextLink.configure({
+				openOnClick: false,
+				autolink: true,
+				defaultProtocol: 'https'
+			}),
+			Slash.configure({
+				suggestion: suggestion({
+					char: '/',
+					pluginKey: 'slash',
+					switchTo,
+					processImageFile
+				})
+			}),
+			Typography.configure(),
+			ImageUploadNode.configure({
+				upload: async (file, onProgress, abortSignal) => {
+					console.log('uploading image', file);
+					// wait 2 seconds
+					for (let i = 0; i < 10; i++) {
+						await new Promise((resolve) => setTimeout(resolve, 200));
+						onProgress?.({ progress: i / 10 });
+					}
+
+					return 'https://picsum.photos/200/300';
+				}
+			})
+		];
+
+		editor = new Editor({
+			element: ref,
+			extensions,
+			editorProps: {
+				attributes: {
+					class: 'outline-none'
+				}
+			},
+			onUpdate: (ctx) => {
+				content = ctx.editor.getJSON();
+				onupdate?.(content, ctx);
+			},
+			onFocus: () => {
+				hasFocus = true;
+			},
+			onBlur: () => {
+				hasFocus = false;
+			},
+			onTransaction: (ctx) => {
+				isBold = ctx.editor.isActive('bold');
+				isItalic = ctx.editor.isActive('italic');
+				isUnderline = ctx.editor.isActive('underline');
+				isStrikethrough = ctx.editor.isActive('strike');
+				isLink = ctx.editor.isActive('link');
+				isImage = ctx.editor.isActive('image');
+
+				if (ctx.editor.isActive('heading', { level: 1 })) {
+					selectedType = 'heading-1';
+				} else if (ctx.editor.isActive('heading', { level: 2 })) {
+					selectedType = 'heading-2';
+				} else if (ctx.editor.isActive('heading', { level: 3 })) {
+					selectedType = 'heading-3';
+				} else if (ctx.editor.isActive('blockquote')) {
+					selectedType = 'blockquote';
+				} else if (ctx.editor.isActive('code')) {
+					selectedType = 'code';
+				} else if (ctx.editor.isActive('bulletList')) {
+					selectedType = 'bullet-list';
+				} else if (ctx.editor.isActive('orderedList')) {
+					selectedType = 'ordered-list';
+				} else {
+					selectedType = 'paragraph';
+				}
+				ontransaction?.();
+			},
+			content
+		});
+
+		menu?.classList.remove('hidden');
+		menuLink?.classList.remove('hidden');
+	});
+
+	// Flag to track whether a file is being dragged over the drop area
+	let isDragOver = $state(false);
+
+	// Store local image files for later upload
+	let localImages: Map<string, File> = $state(new Map());
+
+	// Track which image URLs in the editor are local previews
+	let localImageUrls: Set<string> = $state(new Set());
+
+	// Process image file to create a local preview
+	async function processImageFile(file: File) {
+		if (!editor) {
+			console.warn('Tiptap editor not initialized');
+			return;
+		}
+
+		try {
+			const localUrl = URL.createObjectURL(file);
+
+			localImages.set(localUrl, file);
+			localImageUrls.add(localUrl);
+
+			//editor.commands.setImageUploadNode();
+			editor
+				.chain()
+				.focus()
+				.setImageUploadNode({
+					preview: localUrl
+				})
+				.run();
+
+			// wait 2 seconds
+			// await new Promise((resolve) => setTimeout(resolve, 500));
+
+			// content = editor.getJSON();
+
+			// console.log('replacing image url in content');
+			// replaceImageUrlInContent(content, localUrl, 'https://picsum.photos/200/300');
+			// editor.commands.setContent(content);
+		} catch (error) {
+			console.error('Error creating image preview:', error);
+		}
+	}
+
+	const handlePaste = (event: ClipboardEvent) => {
+		const items = event.clipboardData?.items;
+		if (!items) return;
+		// Check for image data in clipboard
+		for (const item of Array.from(items)) {
+			if (!item.type.startsWith('image/')) continue;
+			const file = item.getAsFile();
+			if (!file) continue;
+			event.preventDefault();
+			processImageFile(file);
+			return;
+		}
+	};
+
+	function handleDragOver(event: DragEvent) {
+		event.preventDefault();
+		event.stopPropagation();
+		isDragOver = true;
+	}
+	function handleDragLeave(event: DragEvent) {
+		event.preventDefault();
+		event.stopPropagation();
+		isDragOver = false;
+	}
+	function handleDrop(event: DragEvent) {
+		event.preventDefault();
+		event.stopPropagation();
+		isDragOver = false;
+		if (!event.dataTransfer?.files?.length) return;
+		const file = event.dataTransfer.files[0];
+		if (file?.type.startsWith('image/')) {
+			processImageFile(file);
+		}
+	}
+
+	onDestroy(() => {
+		for (const localUrl of localImageUrls) {
+			URL.revokeObjectURL(localUrl);
+		}
+
+		editor?.destroy();
+	});
+
+	let link = $state('');
+
+	let linkInput: HTMLInputElement | null = $state(null);
+
+	function clickedLink() {
+		if (isLink) {
+			//tiptap?.chain().focus().unsetLink().run();
+			// get current link
+			link = editor?.getAttributes('link').href;
+
+			setTimeout(() => {
+				linkInput?.focus();
+			}, 100);
+		} else {
+			link = '';
+			// set link
+			editor?.chain().focus().setLink({ href: link }).run();
+
+			setTimeout(() => {
+				linkInput?.focus();
+			}, 100);
+		}
+	}
+
+	function switchTo(value: RichTextTypes) {
+		editor?.chain().focus().setParagraph().run();
+
+		if (value === 'heading-1') {
+			editor?.chain().focus().setNode('heading', { level: 1 }).run();
+		} else if (value === 'heading-2') {
+			editor?.chain().focus().setNode('heading', { level: 2 }).run();
+		} else if (value === 'heading-3') {
+			editor?.chain().focus().setNode('heading', { level: 3 }).run();
+		} else if (value === 'blockquote') {
+			editor?.chain().focus().setBlockquote().run();
+		} else if (value === 'code') {
+			editor?.chain().focus().setCodeBlock().run();
+		} else if (value === 'bullet-list') {
+			editor?.chain().focus().toggleBulletList().run();
+		} else if (value === 'ordered-list') {
+			editor?.chain().focus().toggleOrderedList().run();
+		}
+	}
+</script>
+
+<div
+	bind:this={ref}
+	class={cn('relative flex-1', className)}
+	onpaste={handlePaste}
+	ondragover={handleDragOver}
+	ondragleave={handleDragLeave}
+	ondrop={handleDrop}
+	role="region"
+></div>
+
+<RichTextEditorMenu
+	bind:ref={menu}
+	{editor}
+	{isBold}
+	{isItalic}
+	{isUnderline}
+	{isStrikethrough}
+	{isLink}
+	{isImage}
+	{clickedLink}
+	{processImageFile}
+	{switchTo}
+	bind:selectedType
+/>
+
+<RichTextEditorLinkMenu bind:ref={menuLink} {editor} bind:link bind:linkInput />
+
+<style>
+	:global(.tiptap) {
+		:first-child {
+			margin-top: 0;
+		}
+
+		:global(img) {
+			display: block;
+			height: auto;
+			margin: 1.5rem 0;
+			max-width: 100%;
+
+			&.ProseMirror-selectednode {
+				outline: 3px solid var(--color-accent-500);
+			}
+		}
+
+		:global(div[data-type='image-upload']) {
+			&.ProseMirror-selectednode {
+				outline: 3px solid var(--color-accent-500);
+			}
+		}
+
+		:global(blockquote p:first-of-type::before) {
+			content: none;
+		}
+
+		:global(blockquote p:last-of-type::after) {
+			content: none;
+		}
+
+		:global(blockquote p) {
+			font-style: normal;
+		}
+	}
+
+	:global(.tiptap .is-empty::before) {
+		color: var(--color-base-500);
+		content: attr(data-placeholder);
+		float: left;
+		height: 0;
+		pointer-events: none;
+	}
+</style>

package/dist/components/rich-text-editor/RichTextEditor.svelte.d.ts

@@ -0,0 +1,18 @@
+import { Editor, type Content } from '@tiptap/core';
+import './code.css';
+import { Transaction } from '@tiptap/pm/state';
+type $$ComponentProps = {
+    content?: Content;
+    placeholder?: string;
+    editor?: Editor | null;
+    ref?: HTMLDivElement | null;
+    class?: string;
+    onupdate?: (content: Content, context: {
+        editor: Editor;
+        transaction: Transaction;
+    }) => void;
+    ontransaction?: () => void;
+};
+declare const RichTextEditor: import("svelte").Component<$$ComponentProps, {}, "ref" | "editor" | "content">;
+type RichTextEditor = ReturnType<typeof RichTextEditor>;
+export default RichTextEditor;

package/dist/components/rich-text-editor/RichTextEditorLinkMenu.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { Button, Input } from "@foxui/core";
+	import type { Editor } from "@tiptap/core";
+
+	let {
+		editor,
+		link = $bindable(''),
+		ref = $bindable(null),
+		linkInput = $bindable(null)
+	}: {
+		editor: Editor | null;
+		link: string;
+		ref: HTMLElement | null;
+		linkInput: HTMLInputElement | null;
+	} = $props();
+
+	function processLink(link: string) {
+		return link.includes(':') ? link : `http://${link}`;
+	}
+</script>
+
+<div
+	bind:this={ref}
+	class="menu bg-base-50 dark:bg-base-900 relative hidden w-fit rounded-2xl px-1 py-1 shadow-lg backdrop-blur-sm"
+>
+	<div class="flex items-center gap-1">
+		<Input
+			bind:ref={linkInput}
+			sizeVariant="sm"
+			bind:value={link}
+			placeholder="Enter link"
+			onblur={() => {
+				if (link === '') {
+					editor?.chain().focus().extendMarkRange('link').unsetLink().run();
+				} else {
+					editor?.chain().focus().extendMarkRange('link').setLink({ href: processLink(link) }).run();
+				}
+			}}
+			onkeydown={(e: KeyboardEvent) => {
+				if (e.key === 'Enter') {
+					if (link === '') {
+						editor?.chain().focus().extendMarkRange('link').unsetLink().run();
+					} else {
+						editor?.chain().focus().extendMarkRange('link').setLink({ href: processLink(link) }).run();
+					}
+				}
+			}}
+		/>
+		<Button
+			size="iconSm"
+			onclick={() => {
+				if (link === '') {
+					editor?.chain().focus().extendMarkRange('link').unsetLink().run();
+				} else {
+					editor?.chain().focus().extendMarkRange('link').setLink({ href: processLink(link) }).run();
+				}
+			}}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				class="size-6"
+			>
+				<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+			</svg>
+
+			<span class="sr-only">save link</span>
+		</Button>
+		<Button
+			size="iconSm"
+			onclick={() => {
+				editor?.chain().focus().extendMarkRange('link').unsetLink().run();
+			}}
+			variant="ghost"
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
+				/>
+			</svg>
+			<span class="sr-only">remove link</span>
+		</Button>
+	</div>
+</div>

package/dist/components/rich-text-editor/RichTextEditorLinkMenu.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Editor } from "@tiptap/core";
+type $$ComponentProps = {
+    editor: Editor | null;
+    link: string;
+    ref: HTMLElement | null;
+    linkInput: HTMLInputElement | null;
+};
+declare const RichTextEditorLinkMenu: import("svelte").Component<$$ComponentProps, {}, "ref" | "link" | "linkInput">;
+type RichTextEditorLinkMenu = ReturnType<typeof RichTextEditorLinkMenu>;
+export default RichTextEditorLinkMenu;