@mythrantic/svelte-rich-text 1.1.0 → 1.2.0

package/README.md

@@ -1,3 +1,5 @@
+[![Open in Coder](https://coder.valiantlynx.com/open-in-coder.svg)](https://coder.valiantlynx.com/templates/docker/workspace?param.git_repo=git@github.com:mythrantic/svelte-rich-text.git)
+
 # Valiant Rich Text Svelte Component
 
 ![valiantlynx logo](./static/valiantlynx.jpg)

package/dist/components/ValiantRichText/editor.css

@@ -1,5 +1,43 @@
 /* Base TipTap Editor Styles with Light/Dark Theme Support */
 
+/* Default fallback theme */
+:root {
+	--color-background: #ffffff;
+	--color-foreground: #0f172a;
+	--color-muted: #f1f5f9;
+	--color-muted-foreground: #64748b;
+	--color-primary: #ea580c;
+	--color-primary-light: #f97316;
+	--color-primary-dark: #c2410c;
+	--color-secondary: #f1f5f9;
+	--color-secondary-foreground: #0f172a;
+	--color-accent: #ea580c;
+	--color-accent-light: #f97316;
+	--color-accent-dark: #c2410c;
+	--color-destructive: #dc2626;
+	--color-input: #e2e8f0;
+	--color-border: #e2e8f0;
+	--blockquote-color: #475569;
+	--blockquote-border: #ea580c;
+	--border-color: #e2e8f0;
+	--border-color-hover: #cbd5e1;
+	--code-bg: #f1f5f9;
+	--codeblock-bg: #1e293b;
+	--table-border: #e2e8f0;
+	--table-bg-selected: #f0f9ff;
+	--table-bg-hover: #f8fafc;
+	--highlight-color: #fef3c7;
+	--highlight-border: #fbbf24;
+	--search-result-bg: #fef08a;
+	--search-result-current-bg: #fbbf24;
+	--task-completed-color: #94a3b8;
+}
+
+.valiant-editor {
+	background-color: var(--color-background);
+	color: var(--color-foreground);
+}
+
 .tiptap :first-child {
 	margin-top: 0;
 }

package/dist/components/ValiantRichText/headless/components/AudioPlaceHolder.svelte

@@ -6,12 +6,40 @@
 	const { editor }: NodeViewProps = $props();
 	import Audio from '@lucide/svelte/icons/audio-lines';
 
+	let fileInput = $state<HTMLInputElement | undefined>();
+
 	function handleClick() {
-		const audioUrl = prompt('Please enter the audio URL');
+		// Try to open file picker first
+		if (fileInput) {
+			fileInput.click();
+		} else {
+			// Fallback to URL input
+			promptForUrl();
+		}
+	}
+
+	function promptForUrl() {
+		const audioUrl = prompt('Enter audio URL or select a file');
 		if (audioUrl) {
 			editor.chain().focus().setAudio(audioUrl).run();
 		}
 	}
+
+	function handleFileSelect(e: Event) {
+		const input = e.target as HTMLInputElement;
+		const file = input.files?.[0];
+
+		if (file) {
+			const reader = new FileReader();
+			reader.onload = (event) => {
+				const src = event.target?.result as string;
+				if (src) {
+					editor.chain().focus().setAudio(src).run();
+				}
+			};
+			reader.readAsDataURL(file);
+		}
+	}
 </script>
 
 <NodeViewWrapper>
@@ -22,5 +50,12 @@
 			title="Insert an audio"
 			onClick={handleClick}
 		/>
+		<input
+			bind:this={fileInput}
+			type="file"
+			accept="audio/*"
+			onchange={handleFileSelect}
+			style="display: none;"
+		/>
 	{/if}
 </NodeViewWrapper>

package/dist/components/ValiantRichText/headless/components/ImagePlaceholder.svelte

@@ -6,12 +6,40 @@
 	const { editor }: NodeViewProps = $props();
 	import Image from '@lucide/svelte/icons/image';
 
+	let fileInput = $state<HTMLInputElement | undefined>();
+
 	function handleClick() {
-		const imageUrl = prompt('Please enter the image URL');
+		// Try to open file picker first
+		if (fileInput) {
+			fileInput.click();
+		} else {
+			// Fallback to URL input
+			promptForUrl();
+		}
+	}
+
+	function promptForUrl() {
+		const imageUrl = prompt('Enter image URL or select a file');
 		if (imageUrl) {
 			editor.chain().focus().setImage({ src: imageUrl }).run();
 		}
 	}
+
+	function handleFileSelect(e: Event) {
+		const input = e.target as HTMLInputElement;
+		const file = input.files?.[0];
+
+		if (file) {
+			const reader = new FileReader();
+			reader.onload = (event) => {
+				const src = event.target?.result as string;
+				if (src) {
+					editor.chain().focus().setImage({ src }).run();
+				}
+			};
+			reader.readAsDataURL(file);
+		}
+	}
 </script>
 
 <NodeViewWrapper>
@@ -22,5 +50,12 @@
 			title="Insert an image"
 			onClick={handleClick}
 		/>
+		<input
+			bind:this={fileInput}
+			type="file"
+			accept="image/*"
+			onchange={handleFileSelect}
+			style="display: none;"
+		/>
 	{/if}
 </NodeViewWrapper>

package/dist/components/ValiantRichText/headless/components/VideoPlaceholder.svelte

@@ -6,12 +6,40 @@
 	const { editor }: NodeViewProps = $props();
 	import Video from '@lucide/svelte/icons/video';
 
+	let fileInput = $state<HTMLInputElement | undefined>();
+
 	function handleClick() {
-		const videoUrl = prompt('Please enter the video URL');
+		// Try to open file picker first
+		if (fileInput) {
+			fileInput.click();
+		} else {
+			// Fallback to URL input
+			promptForUrl();
+		}
+	}
+
+	function promptForUrl() {
+		const videoUrl = prompt('Enter video URL or select a file');
 		if (videoUrl) {
 			editor.chain().focus().setVideo(videoUrl).run();
 		}
 	}
+
+	function handleFileSelect(e: Event) {
+		const input = e.target as HTMLInputElement;
+		const file = input.files?.[0];
+
+		if (file) {
+			const reader = new FileReader();
+			reader.onload = (event) => {
+				const src = event.target?.result as string;
+				if (src) {
+					editor.chain().focus().setVideo(src).run();
+				}
+			};
+			reader.readAsDataURL(file);
+		}
+	}
 </script>
 
 <NodeViewWrapper>
@@ -22,5 +50,12 @@
 			title="Insert a video"
 			onClick={handleClick}
 		/>
+		<input
+			bind:this={fileInput}
+			type="file"
+			accept="video/*"
+			onchange={handleFileSelect}
+			style="display: none;"
+		/>
 	{/if}
 </NodeViewWrapper>

package/dist/components/ValiantRichText/headless/components/toolbar/FontSize.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Editor } from '@tiptap/core';
+	import ToolbarDropdown from './ToolbarDropdown.svelte';
 
 	interface Props {
 		editor: Editor;
@@ -17,36 +18,16 @@
 	];
 
 	let currentSize = $derived.by(() => editor.getAttributes('textStyle').fontSize || '');
+
+	function handleFontSizeChange(value: string) {
+		editor.chain().focus().setFontSize(value).run();
+	}
 </script>
 
-<select
+<ToolbarDropdown
+	options={FONT_SIZE}
 	value={currentSize}
-	onchange={(e) => {
-		editor
-			.chain()
-			.focus()
-			.setFontSize((e.target as HTMLSelectElement).value)
-			.run();
-	}}
-	title="Font Size"
->
-	{#each FONT_SIZE as fontSize (fontSize)}
-		<option value={fontSize.value} label={fontSize.label.split(' ')[0]}></option>
-	{/each}
-</select>
-
-<style>
-	select {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		border: none;
-		background-color: var(--edra-button-bg-color);
-		border-radius: var(--edra-button-border-radius);
-		cursor: pointer;
-		transition: background-color 0.2s ease-in-out;
-		padding: var(--edra-button-padding);
-		min-width: fit;
-		min-height: full;
-	}
-</style>
+	label="Font Size"
+	placeholder="Size"
+	onchange={handleFontSizeChange}
+/>

package/dist/components/ValiantRichText/headless/components/toolbar/QuickColors.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Editor } from '@tiptap/core';
+	import ToolbarDropdown from './ToolbarDropdown.svelte';
 
 	interface Props {
 		editor: Editor;
@@ -21,50 +22,31 @@
 
 	const currentColor = $derived.by(() => editor.getAttributes('textStyle').color ?? '');
 	const currentHighlight = $derived.by(() => editor.getAttributes('highlight').color ?? '');
+
+	function handleColorChange(color: string) {
+		editor.chain().focus().setColor(color).run();
+	}
+
+	function handleHighlightChange(color: string) {
+		editor.chain().focus().setHighlight({ color }).run();
+	}
 </script>
 
-<select
+<ToolbarDropdown
+	options={colors}
 	value={currentColor}
-	onchange={(e) => {
-		const color = (e.target as HTMLSelectElement).value;
-		editor.chain().focus().setColor(color).run();
-	}}
-	style={`color: ${currentColor}`}
-	title="Text Color"
->
-	<option value="" label="Default"></option>
-	{#each colors as color (color)}
-		<option value={color.value} label={color.label}></option>
-	{/each}
-</select>
+	label="Text Color"
+	placeholder="Color"
+	onchange={handleColorChange}
+/>
 
-<select
+<ToolbarDropdown
+	options={colors}
 	value={currentHighlight}
-	onchange={(e) => {
-		const color = (e.target as HTMLSelectElement).value;
-		editor.chain().focus().setHighlight({ color }).run();
-	}}
-	style={`background-color: ${currentHighlight}50`}
-	title="Hightlight Color"
->
-	<option value="" label="Default"></option>
-	{#each colors as color (color)}
-		<option value={color.value} label={color.label}>A</option>
-	{/each}
-</select>
+	label="Highlight Color"
+	placeholder="Highlight"
+	onchange={handleHighlightChange}
+/>
 
 <style>
-	select {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		border: none;
-		background-color: var(--edra-button-bg-color);
-		border-radius: var(--edra-button-border-radius);
-		cursor: pointer;
-		transition: background-color 0.2s ease-in-out;
-		padding: var(--edra-button-padding);
-		min-width: fit;
-		min-height: var(--edra-button-size);
-	}
 </style>

package/dist/components/ValiantRichText/headless/components/toolbar/SearchAndReplace.svelte

@@ -65,19 +65,20 @@
 
 <div class="edra-search-and-replace">
 	<button
-		class="edra-command-button"
+		class="edra-command-button edra-filter-button"
 		onclick={() => {
 			show = !show;
 			clear();
 			updateSearchTerm();
 		}}
-		title={show ? 'Go Back' : 'Search and Replace'}
+		title={show ? 'Go Back' : 'Filter and Search'}
 	>
 		{#if show}
 			<ArrowLeft class="edra-toolbar-icon" />
 		{:else}
 			<Search class="edra-toolbar-icon" />
 		{/if}
+		<span class="edra-filter-label">Filter</span>
 	</button>
 	{#if show}
 		<div class="edra-search-and-replace-content">

package/dist/components/ValiantRichText/headless/components/toolbar/ToolbarDropdown.svelte

@@ -0,0 +1,177 @@
+<script lang="ts">
+	import ChevronDown from '@lucide/svelte/icons/chevron-down';
+
+	interface Option {
+		label: string;
+		value: string;
+		icon?: any;
+	}
+
+	interface Props {
+		options: Option[];
+		value?: string;
+		placeholder?: string;
+		label?: string;
+		onchange?: (value: string) => void;
+		icon?: any;
+	}
+
+	let { options, value, placeholder = 'Select...', label, onchange, icon: Icon }: Props = $props();
+
+	let isOpen = $state(false);
+	let container: HTMLDivElement;
+	let selectedOption = $derived(options.find((opt) => opt.value === value));
+
+	function handleSelect(val: string) {
+		onchange?.(val);
+		isOpen = false;
+	}
+
+	function handleClickOutside(e: MouseEvent) {
+		const target = e.target as HTMLElement;
+		if (container && !container.contains(target)) {
+			isOpen = false;
+		}
+	}
+
+	$effect(() => {
+		if (isOpen) {
+			document.addEventListener('mousedown', handleClickOutside);
+			return () => document.removeEventListener('mousedown', handleClickOutside);
+		}
+	});
+</script>
+
+<div class="toolbar-dropdown-container" bind:this={container}>
+	<button
+		class="toolbar-dropdown-trigger"
+		onclick={() => (isOpen = !isOpen)}
+		title={label}
+		aria-label={label}
+		aria-haspopup="listbox"
+		aria-expanded={isOpen}
+	>
+		{#if Icon}
+			<svelte:component this={Icon} size={16} />
+		{/if}
+		<span class="toolbar-dropdown-label">
+			{selectedOption?.label || placeholder}
+		</span>
+		<ChevronDown size={14} style={isOpen ? 'transform: rotate(180deg)' : ''} class="chevron" />
+	</button>
+
+	{#if isOpen}
+		<div class="toolbar-dropdown-content" role="listbox">
+			{#each options as option (option.value)}
+				<button
+					class="toolbar-dropdown-item"
+					class:active={option.value === value}
+					onclick={() => handleSelect(option.value)}
+					role="option"
+					aria-selected={option.value === value}
+				>
+					{#if option.icon}
+						<svelte:component this={option.icon} size={14} />
+					{/if}
+					<span>{option.label}</span>
+				</button>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.toolbar-dropdown-container {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+	}
+
+	.toolbar-dropdown-trigger {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.375rem;
+		border: 1px solid transparent;
+		background-color: transparent;
+		border-radius: 0.375rem;
+		cursor: pointer;
+		transition: all 0.15s ease-in-out;
+		padding: 0.375rem 0.5rem;
+		min-height: 2.5rem;
+		color: var(--edra-icon-color);
+		font-size: 0.875rem;
+		font-weight: 500;
+		white-space: nowrap;
+		flex-shrink: 0;
+	}
+
+	.toolbar-dropdown-trigger:hover {
+		background-color: var(--color-muted);
+	}
+
+	.toolbar-dropdown-trigger:active {
+		background-color: var(--color-muted);
+	}
+
+	.chevron {
+		transition: transform 0.2s ease-in-out;
+	}
+
+	.chevron.rotated {
+		transform: rotate(180deg);
+	}
+
+	.toolbar-dropdown-label {
+		max-width: 6rem;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.toolbar-dropdown-content {
+		position: absolute;
+		top: calc(100% + 0.25rem);
+		left: 0;
+		z-index: 50;
+		min-width: -moz-max-content;
+		min-width: max-content;
+		background-color: var(--color-background);
+		border: 1px solid var(--color-border);
+		border-radius: 0.5rem;
+		box-shadow:
+			0 4px 6px -1px rgba(0, 0, 0, 0.1),
+			0 2px 4px -1px rgba(0, 0, 0, 0.06);
+		padding: 0.375rem;
+		display: flex;
+		flex-direction: column;
+		max-height: 20rem;
+		overflow-y: auto;
+	}
+
+	.toolbar-dropdown-item {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem 0.75rem;
+		background-color: transparent;
+		border: none;
+		border-radius: 0.375rem;
+		cursor: pointer;
+		color: var(--color-foreground);
+		font-size: 0.875rem;
+		transition: all 0.15s ease-in-out;
+		text-align: left;
+		min-width: 6rem;
+		font-weight: 400;
+	}
+
+	.toolbar-dropdown-item:hover {
+		background-color: var(--color-muted);
+	}
+
+	.toolbar-dropdown-item.active {
+		background-color: var(--color-muted);
+		font-weight: 600;
+		color: var(--color-primary);
+	}
+</style>

package/dist/components/ValiantRichText/headless/components/toolbar/ToolbarDropdown.svelte.d.ts

@@ -0,0 +1,29 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ToolbarDropdown: $$__sveltets_2_IsomorphicComponent<{
+    options: {
+        label: string;
+        value: string;
+        icon?: any;
+    }[];
+    value?: string;
+    placeholder?: string;
+    label?: string;
+    onchange?: (value: string) => void;
+    icon?: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ToolbarDropdown = InstanceType<typeof ToolbarDropdown>;
+export default ToolbarDropdown;