@quoin-cms/admin 0.1.0

package/src/lib/components/lexical/PullQuoteNode.ts

@@ -0,0 +1,112 @@
+import { DecoratorNode } from 'lexical';
+import type {
+	EditorConfig,
+	LexicalEditor,
+	LexicalNode,
+	NodeKey,
+	SerializedLexicalNode,
+	Spread,
+} from 'lexical';
+import PullQuoteComponent from './PullQuoteComponent.svelte';
+
+export type SerializedPullQuoteNode = Spread<
+	{
+		type: 'pull-quote';
+		version: 1;
+		text: string;
+		attribution: string;
+	},
+	SerializedLexicalNode
+>;
+
+export class PullQuoteNode extends DecoratorNode<unknown> {
+	__text: string;
+	__attribution: string;
+
+	static getType(): string {
+		return 'pull-quote';
+	}
+
+	static clone(node: PullQuoteNode): PullQuoteNode {
+		return new PullQuoteNode(node.__text, node.__attribution, node.__key);
+	}
+
+	constructor(text: string, attribution: string, key?: NodeKey) {
+		super(key);
+		this.__text = text;
+		this.__attribution = attribution;
+	}
+
+	createDOM(_config: EditorConfig): HTMLElement {
+		const div = document.createElement('div');
+		div.className = 'lexical-pull-quote';
+		div.setAttribute('contenteditable', 'false');
+		return div;
+	}
+
+	updateDOM(): boolean {
+		return false;
+	}
+
+	static importJSON(json: SerializedPullQuoteNode): PullQuoteNode {
+		return new PullQuoteNode(json.text, json.attribution);
+	}
+
+	exportJSON(): SerializedPullQuoteNode {
+		return {
+			...super.exportJSON(),
+			type: 'pull-quote',
+			version: 1,
+			text: this.__text,
+			attribution: this.__attribution,
+		};
+	}
+
+	decorate(_editor: LexicalEditor, _config: EditorConfig) {
+		return {
+			componentClass: PullQuoteComponent,
+			updateProps: (props: Record<string, unknown>) => {
+				props.text = this.__text;
+				props.attribution = this.__attribution;
+				props.nodeKey = this.__key;
+			},
+		};
+	}
+
+	isInline(): boolean {
+		return false;
+	}
+
+	getText(): string {
+		return this.__text;
+	}
+
+	getAttribution(): string {
+		return this.__attribution;
+	}
+
+	setText(text: string): this {
+		const writable = this.getWritable();
+		writable.__text = text;
+		return writable;
+	}
+
+	setAttribution(attribution: string): this {
+		const writable = this.getWritable();
+		writable.__attribution = attribution;
+		return writable;
+	}
+}
+
+export function $createPullQuoteNode(
+	text: string,
+	attribution: string,
+): PullQuoteNode {
+	return new PullQuoteNode(text, attribution);
+}
+
+export function $isPullQuoteNode(
+	node: LexicalNode | null | undefined,
+): node is PullQuoteNode {
+	return node instanceof PullQuoteNode;
+}

package/src/lib/components/lexical/lexical-helpers.ts

@@ -0,0 +1,24 @@
+/**
+ * Re-exports of Lexical $ functions for use in Svelte 5 components.
+ * Svelte 5 reserves the $ prefix, so we alias these functions.
+ */
+export {
+	$getNodeByKey as getNodeByKey,
+	$getSelection as getSelection,
+	$isRangeSelection as isRangeSelection,
+	$insertNodes as insertNodes,
+	$createParagraphNode as createParagraphNode,
+} from 'lexical';
+
+export { $isPullQuoteNode as isPullQuoteNode } from './PullQuoteNode.js';
+export { $isCustomHTMLNode as isCustomHTMLNode } from './CustomHTMLNode.js';
+export { $createPullQuoteNode as createPullQuoteNode } from './PullQuoteNode.js';
+export { $createCustomHTMLNode as createCustomHTMLNode } from './CustomHTMLNode.js';
+
+export { $createYouTubeNode as createYouTubeNode } from 'svelte-lexical';
+export { $createImageNode as createImageNode } from 'svelte-lexical';
+
+export { $isHeadingNode as isHeadingNode } from '@lexical/rich-text';
+export { $isListNode as isListNode } from '@lexical/list';
+export { $getNearestNodeOfType as getNearestNodeOfType } from '@lexical/utils';
+export { ListNode } from '@lexical/list';

package/src/lib/components/lexical/nodes.ts

@@ -0,0 +1,8 @@
+import type { Klass, LexicalNode } from 'lexical';
+import { PullQuoteNode } from './PullQuoteNode.js';
+import { CustomHTMLNode } from './CustomHTMLNode.js';
+
+export const customNodes: Array<Klass<LexicalNode>> = [
+	PullQuoteNode,
+	CustomHTMLNode,
+];

package/src/lib/components/lexical/toolbar/EditorToolbar.svelte

@@ -0,0 +1,159 @@
+<script lang="ts">
+import {
+	getEditor,
+	toggleBold,
+	toggleItalic,
+	toggleUnderline,
+	toggleStrikethrough,
+	formatHeading,
+	formatBulletList,
+	formatNumberedList,
+	formatQuote,
+	formatCode,
+	undo,
+	redo,
+} from 'svelte-lexical';
+import {
+	COMMAND_PRIORITY_CRITICAL,
+	SELECTION_CHANGE_COMMAND,
+} from 'lexical';
+import { getSelection, isRangeSelection, isHeadingNode, isListNode, getNearestNodeOfType, ListNode } from '../lexical-helpers.js';
+import { onMount } from 'svelte';
+import {
+	Bold,
+	Italic,
+	Underline as UnderlineIcon,
+	Strikethrough,
+	Heading1,
+	Heading2,
+	Heading3,
+	List,
+	ListOrdered,
+	Quote,
+	Code,
+	Undo2,
+	Redo2,
+} from 'lucide-svelte';
+import InsertBlockDropdown from './InsertBlockDropdown.svelte';
+
+const editor = getEditor();
+
+// Active format states
+let isBold = $state(false);
+let isItalic = $state(false);
+let isUnderline = $state(false);
+let isStrike = $state(false);
+let blockType = $state('paragraph');
+
+function updateToolbar() {
+	const selection = getSelection();
+	if (isRangeSelection(selection)) {
+		isBold = selection.hasFormat('bold');
+		isItalic = selection.hasFormat('italic');
+		isUnderline = selection.hasFormat('underline');
+		isStrike = selection.hasFormat('strikethrough');
+
+		const anchorNode = selection.anchor.getNode();
+		const element = anchorNode.getKey() === 'root'
+			? anchorNode
+			: anchorNode.getTopLevelElementOrThrow();
+
+		if (isHeadingNode(element)) {
+			blockType = element.getTag();
+		} else if (isListNode(element)) {
+			const parentList = getNearestNodeOfType(anchorNode, ListNode);
+			blockType = parentList ? parentList.getListType() : element.getListType();
+		} else {
+			blockType = element.getType();
+		}
+	}
+}
+
+onMount(() => {
+	const unregister = editor.registerCommand(
+		SELECTION_CHANGE_COMMAND,
+		() => {
+			updateToolbar();
+			return false;
+		},
+		COMMAND_PRIORITY_CRITICAL,
+	);
+
+	const unregisterUpdate = editor.registerUpdateListener(({ editorState }) => {
+		editorState.read(() => {
+			updateToolbar();
+		});
+	});
+
+	return () => {
+		unregister();
+		unregisterUpdate();
+	};
+});
+
+function btn(active: boolean): string {
+	return `rounded p-1.5 hover:bg-accent ${active ? 'bg-accent text-accent-foreground' : ''}`;
+}
+</script>
+
+<div class="flex flex-wrap gap-0.5 border-b bg-muted/30 p-1.5">
+	<!-- Text formatting -->
+	<button type="button" class={btn(isBold)} onclick={() => toggleBold(editor)} title="Bold">
+		<Bold class="h-4 w-4" />
+	</button>
+	<button type="button" class={btn(isItalic)} onclick={() => toggleItalic(editor)} title="Italic">
+		<Italic class="h-4 w-4" />
+	</button>
+	<button type="button" class={btn(isUnderline)} onclick={() => toggleUnderline(editor)} title="Underline">
+		<UnderlineIcon class="h-4 w-4" />
+	</button>
+	<button type="button" class={btn(isStrike)} onclick={() => toggleStrikethrough(editor)} title="Strikethrough">
+		<Strikethrough class="h-4 w-4" />
+	</button>
+
+	<div class="mx-1 w-px bg-border"></div>
+
+	<!-- Headings -->
+	<button type="button" class={btn(blockType === 'h1')} onclick={() => formatHeading(editor, blockType, 'h1')} title="Heading 1">
+		<Heading1 class="h-4 w-4" />
+	</button>
+	<button type="button" class={btn(blockType === 'h2')} onclick={() => formatHeading(editor, blockType, 'h2')} title="Heading 2">
+		<Heading2 class="h-4 w-4" />
+	</button>
+	<button type="button" class={btn(blockType === 'h3')} onclick={() => formatHeading(editor, blockType, 'h3')} title="Heading 3">
+		<Heading3 class="h-4 w-4" />
+	</button>
+
+	<div class="mx-1 w-px bg-border"></div>
+
+	<!-- Lists -->
+	<button type="button" class={btn(blockType === 'bullet')} onclick={() => formatBulletList(editor, blockType)} title="Bullet List">
+		<List class="h-4 w-4" />
+	</button>
+	<button type="button" class={btn(blockType === 'number')} onclick={() => formatNumberedList(editor, blockType)} title="Ordered List">
+		<ListOrdered class="h-4 w-4" />
+	</button>
+
+	<!-- Block types -->
+	<button type="button" class={btn(blockType === 'quote')} onclick={() => formatQuote(editor, blockType)} title="Blockquote">
+		<Quote class="h-4 w-4" />
+	</button>
+	<button type="button" class={btn(blockType === 'code')} onclick={() => formatCode(editor, blockType)} title="Code Block">
+		<Code class="h-4 w-4" />
+	</button>
+
+	<div class="mx-1 w-px bg-border"></div>
+
+	<!-- Insert dropdown -->
+	<InsertBlockDropdown />
+
+	<div class="mx-1 w-px bg-border"></div>
+
+	<!-- History -->
+	<button type="button" class="rounded p-1.5 hover:bg-accent" onclick={() => undo(editor)} title="Undo">
+		<Undo2 class="h-4 w-4" />
+	</button>
+	<button type="button" class="rounded p-1.5 hover:bg-accent" onclick={() => redo(editor)} title="Redo">
+		<Redo2 class="h-4 w-4" />
+	</button>
+</div>

package/src/lib/components/lexical/toolbar/InsertBlockDropdown.svelte

@@ -0,0 +1,278 @@
+<script lang="ts">
+import { getEditor } from 'svelte-lexical';
+import { insertNodes, createParagraphNode, createPullQuoteNode, createCustomHTMLNode, createYouTubeNode, createImageNode } from '../lexical-helpers.js';
+import { Plus, Youtube, Quote, Code2, Image as ImageIcon } from 'lucide-svelte';
+import MediaLibrary from '../../MediaLibrary.svelte';
+
+const editor = getEditor();
+
+let isOpen = $state(false);
+let showYoutubeDialog = $state(false);
+let showImageDialog = $state(false);
+let mediaLibraryOpen = $state(false);
+let youtubeUrl = $state('');
+let imageUrl = $state('');
+let imageAlt = $state('');
+
+function toggleDropdown() {
+	isOpen = !isOpen;
+}
+
+function closeDropdown() {
+	isOpen = false;
+}
+
+function extractYoutubeId(url: string): string | null {
+	const patterns = [
+		/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/,
+		/^([a-zA-Z0-9_-]{11})$/,
+	];
+	for (const pattern of patterns) {
+		const match = url.match(pattern);
+		if (match) return match[1];
+	}
+	return null;
+}
+
+function insertYoutube() {
+	const videoId = extractYoutubeId(youtubeUrl);
+	if (!videoId) {
+		alert('Invalid YouTube URL');
+		return;
+	}
+	editor.update(() => {
+		const node = createYouTubeNode(videoId);
+		insertNodes([node]);
+	});
+	youtubeUrl = '';
+	showYoutubeDialog = false;
+	closeDropdown();
+}
+
+function handleImageSelect(media: { url: string; alt: string }) {
+	editor.update(() => {
+		const node = createImageNode({
+			src: media.url,
+			altText: media.alt || '',
+			width: undefined,
+			height: undefined,
+			maxWidth: 800,
+		});
+		insertNodes([node]);
+	});
+	mediaLibraryOpen = false;
+	closeDropdown();
+}
+
+function insertImage() {
+	if (!imageUrl) {
+		alert('Please enter an image URL');
+		return;
+	}
+	editor.update(() => {
+		const node = createImageNode({
+			src: imageUrl,
+			altText: imageAlt || '',
+			width: undefined,
+			height: undefined,
+			maxWidth: 800,
+		});
+		insertNodes([node]);
+	});
+	imageUrl = '';
+	imageAlt = '';
+	showImageDialog = false;
+	closeDropdown();
+}
+
+function insertPullQuote() {
+	editor.update(() => {
+		const node = createPullQuoteNode('', '');
+		insertNodes([node]);
+		const paragraph = createParagraphNode();
+		node.insertAfter(paragraph);
+	});
+	closeDropdown();
+}
+
+function insertCustomHTML() {
+	editor.update(() => {
+		const node = createCustomHTMLNode('');
+		insertNodes([node]);
+		const paragraph = createParagraphNode();
+		node.insertAfter(paragraph);
+	});
+	closeDropdown();
+}
+
+function handleYoutubeKeydown(e: KeyboardEvent) {
+	if (e.key === 'Enter') {
+		e.preventDefault();
+		insertYoutube();
+	}
+	if (e.key === 'Escape') {
+		showYoutubeDialog = false;
+	}
+}
+
+function handleImageKeydown(e: KeyboardEvent) {
+	if (e.key === 'Enter') {
+		e.preventDefault();
+		insertImage();
+	}
+	if (e.key === 'Escape') {
+		showImageDialog = false;
+	}
+}
+</script>
+
+<svelte:window onclick={() => { if (isOpen) closeDropdown(); }} />
+
+<div class="relative">
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<button
+		type="button"
+		class="rounded p-1.5 hover:bg-accent flex items-center gap-0.5"
+		onclick={(e) => { e.stopPropagation(); toggleDropdown(); }}
+		title="Insert block"
+	>
+		<Plus class="h-4 w-4" />
+		<span class="text-xs">Insert</span>
+	</button>
+
+	{#if isOpen}
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class="absolute left-0 top-full mt-1 z-50 min-w-[180px] rounded-md border bg-popover p-1 shadow-md"
+			onclick={(e) => e.stopPropagation()}
+		>
+			<button
+				type="button"
+				class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent"
+				onclick={() => { showYoutubeDialog = true; isOpen = false; }}
+			>
+				<Youtube class="h-4 w-4" />
+				YouTube Video
+			</button>
+			<button
+				type="button"
+				class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent"
+				onclick={() => { mediaLibraryOpen = true; isOpen = false; }}
+			>
+				<ImageIcon class="h-4 w-4" />
+				Image
+			</button>
+			<button
+				type="button"
+				class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent"
+				onclick={() => { showImageDialog = true; isOpen = false; }}
+			>
+				<ImageIcon class="h-4 w-4" />
+				Image from URL
+			</button>
+			<button
+				type="button"
+				class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent"
+				onclick={insertPullQuote}
+			>
+				<Quote class="h-4 w-4" />
+				Pull Quote
+			</button>
+			<button
+				type="button"
+				class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent"
+				onclick={insertCustomHTML}
+			>
+				<Code2 class="h-4 w-4" />
+				Custom HTML
+			</button>
+		</div>
+	{/if}
+</div>
+
+<!-- YouTube URL dialog -->
+{#if showYoutubeDialog}
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onclick={() => (showYoutubeDialog = false)}>
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div class="bg-popover rounded-lg p-4 shadow-lg w-[400px] space-y-3" onclick={(e) => e.stopPropagation()}>
+			<h3 class="text-sm font-medium">Insert YouTube Video</h3>
+			<input
+				type="text"
+				class="w-full rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary"
+				placeholder="YouTube URL (e.g. https://youtube.com/watch?v=...)"
+				bind:value={youtubeUrl}
+				onkeydown={handleYoutubeKeydown}
+			/>
+			<div class="flex justify-end gap-2">
+				<button
+					type="button"
+					class="rounded-md px-3 py-1.5 text-sm hover:bg-accent"
+					onclick={() => (showYoutubeDialog = false)}
+				>
+					Cancel
+				</button>
+				<button
+					type="button"
+					class="rounded-md bg-primary px-3 py-1.5 text-sm text-primary-foreground hover:bg-primary/90"
+					onclick={insertYoutube}
+				>
+					Insert
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<!-- Image URL dialog -->
+{#if showImageDialog}
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onclick={() => (showImageDialog = false)}>
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div class="bg-popover rounded-lg p-4 shadow-lg w-[400px] space-y-3" onclick={(e) => e.stopPropagation()}>
+			<h3 class="text-sm font-medium">Insert Image</h3>
+			<input
+				type="text"
+				class="w-full rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary"
+				placeholder="Image URL"
+				bind:value={imageUrl}
+				onkeydown={handleImageKeydown}
+			/>
+			<input
+				type="text"
+				class="w-full rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary"
+				placeholder="Alt text (optional)"
+				bind:value={imageAlt}
+				onkeydown={handleImageKeydown}
+			/>
+			<div class="flex justify-end gap-2">
+				<button
+					type="button"
+					class="rounded-md px-3 py-1.5 text-sm hover:bg-accent"
+					onclick={() => (showImageDialog = false)}
+				>
+					Cancel
+				</button>
+				<button
+					type="button"
+					class="rounded-md bg-primary px-3 py-1.5 text-sm text-primary-foreground hover:bg-primary/90"
+					onclick={insertImage}
+				>
+					Insert
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<MediaLibrary
+	bind:open={mediaLibraryOpen}
+	accept={['image/jpeg', 'image/png', 'image/webp', 'image/svg+xml']}
+	onSelect={handleImageSelect}
+/>

package/src/lib/components/versions/CompareSelector.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { formatDate } from '$lib/utils/format.js'
+
+	export interface VersionOption {
+		id: string
+		label: string
+		status?: string
+		isLatest?: boolean
+		date: string
+	}
+
+	let {
+		options,
+		selected,
+		onChange,
+	}: {
+		options: VersionOption[]
+		selected: string
+		onChange: (id: string) => void
+	} = $props()
+</script>
+
+<select
+	class="rounded-md border border-stone-300 bg-white px-3 py-1.5 text-sm text-stone-700 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+	value={selected}
+	onchange={(e) => onChange((e.target as HTMLSelectElement).value)}
+>
+	{#each options as opt}
+		<option value={opt.id}>{opt.label} — {formatDate(opt.date)}</option>
+	{/each}
+</select>