@brixter/brix-builder 0.0.1

package/dist/editor/PreviewImageEditor.svelte

@@ -0,0 +1,221 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { Image, Trash2 } from 'lucide-svelte';
+
+	let {
+		element,
+		onPick,
+		onRemove,
+		onBlur
+	}: {
+		element: HTMLImageElement;
+		onPick: () => void;
+		onRemove: () => void;
+		onBlur: () => void;
+	} = $props();
+
+	let coords = $state({ top: 0, left: 0, width: 0, height: 0 });
+	let isElementHovered = $state(false);
+	let isToolbarHovered = $state(false);
+	let isHovered = $derived(isElementHovered || isToolbarHovered);
+
+	let currentSrc = $state(element?.src || '');
+	let hasImage = $derived(
+		currentSrc &&
+		!currentSrc.startsWith('data:image/svg+xml') &&
+		currentSrc !== 'about:blank' &&
+		currentSrc !== ''
+	);
+
+	function updateCoords() {
+		const rect = element.getBoundingClientRect();
+		coords = {
+			top: rect.top,
+			left: rect.left,
+			width: rect.width,
+			height: rect.height
+		};
+	}
+
+	function clickListener(node: HTMLButtonElement, action: () => void) {
+		const handler = (event: MouseEvent) => {
+			event.stopPropagation();
+			action();
+		};
+		node.addEventListener('click', handler);
+		return {
+			destroy() {
+				node.removeEventListener('click', handler);
+			}
+		};
+	}
+
+	onMount(() => {
+		updateCoords();
+
+		const win = element.ownerDocument.defaultView || window;
+		win.addEventListener('scroll', updateCoords, { passive: true });
+		win.addEventListener('resize', updateCoords, { passive: true });
+
+		// Track hover state of the image element
+		const handleMouseEnter = () => {
+			isElementHovered = true;
+		};
+		const handleMouseLeave = () => {
+			isElementHovered = false;
+		};
+
+		element.addEventListener('mouseenter', handleMouseEnter);
+		element.addEventListener('mouseleave', handleMouseLeave);
+
+		// Initialize hover state in case mouse is already over the image
+		isElementHovered = element.matches(':hover');
+
+		// Click outside to blur/close
+		const handleGlobalClick = (event: MouseEvent) => {
+			const target = event.target as Element;
+			if (!target) return;
+
+			if (!target.closest('.builder-preview-image-toolbar') && target !== element) {
+				onBlur();
+			}
+		};
+
+		win.document.addEventListener('click', handleGlobalClick, true);
+
+		// Observe src attribute mutations to reactively update currentSrc
+		const observer = new MutationObserver(() => {
+			currentSrc = element.src || '';
+			updateCoords();
+		});
+		observer.observe(element, { attributes: true, attributeFilter: ['src'] });
+
+		return () => {
+			win.removeEventListener('scroll', updateCoords);
+			win.removeEventListener('resize', updateCoords);
+			element.removeEventListener('mouseenter', handleMouseEnter);
+			element.removeEventListener('mouseleave', handleMouseLeave);
+			win.document.removeEventListener('click', handleGlobalClick, true);
+			observer.disconnect();
+		};
+	});
+</script>
+
+<div
+	class="builder-preview-image-toolbar"
+	class:visible={isHovered}
+	onmouseenter={() => {
+		isToolbarHovered = true;
+	}}
+	onmouseleave={() => {
+		isToolbarHovered = false;
+	}}
+	style="
+		position: fixed;
+		top: {coords.top + 8}px;
+		left: {coords.left + coords.width - 8}px;
+		transform: translate(-100%, 0);
+		z-index: 99999;
+	"
+>
+	<button
+		type="button"
+		use:clickListener={onPick}
+		title="Choose image"
+		class="toolbar-btn"
+	>
+		<Image size={14} />
+		<span class="toolbar-label">Choose</span>
+	</button>
+	{#if hasImage}
+		<button
+			type="button"
+			use:clickListener={onRemove}
+			title="Remove image"
+			class="toolbar-btn toolbar-btn-danger"
+		>
+			<Trash2 size={14} />
+			<span class="toolbar-label">Remove</span>
+		</button>
+	{/if}
+</div>
+
+<style>
+	.builder-preview-image-toolbar {
+		display: flex;
+		align-items: center;
+		height: 2rem;
+		overflow: hidden;
+		border: 1px solid #d1d5db;
+		background-color: #fff;
+		font-size: 0.75rem;
+		line-height: 1rem;
+		color: #1e1c18;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity 0.15s ease-in-out;
+	}
+
+	.builder-preview-image-toolbar.visible {
+		opacity: 1;
+		pointer-events: auto;
+	}
+
+	:global(.dark) .builder-preview-image-toolbar {
+		border-color: #4b5563;
+		background-color: #2d2a25;
+		color: #f3f4f6;
+	}
+
+	.toolbar-btn {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		height: 100%;
+		border: none;
+		border-right: 1px solid #e5e7eb;
+		background: transparent;
+		padding: 0 0.625rem;
+		color: inherit;
+		font-size: inherit;
+		cursor: pointer;
+		transition: background-color 0.15s;
+	}
+
+	.toolbar-btn:last-child {
+		border-right: none;
+	}
+
+	.toolbar-btn:hover {
+		background-color: #f3f4f6;
+	}
+
+	:global(.dark) .toolbar-btn {
+		border-right-color: #444039;
+	}
+
+	:global(.dark) .toolbar-btn:hover {
+		background-color: #444039;
+	}
+
+	.toolbar-btn-danger {
+		color: #dc2626;
+	}
+
+	.toolbar-btn-danger:hover {
+		background-color: #fef2f2;
+	}
+
+	:global(.dark) .toolbar-btn-danger {
+		color: #f87171;
+	}
+
+	:global(.dark) .toolbar-btn-danger:hover {
+		background-color: rgba(153, 27, 27, 0.35);
+	}
+
+	.toolbar-label {
+		font-weight: 500;
+	}
+</style>

package/dist/editor/PreviewTextEditor.svelte

@@ -0,0 +1,246 @@
+<script lang="ts">
+	import { onMount, tick } from 'svelte';
+
+	let {
+		value,
+		placeholder = '',
+		multiline = false,
+		inline = false,
+		textStyle,
+		autofocus = false,
+		initialCaretOffset = null,
+		initialClickCoords = null,
+		onChange,
+		onBlur
+	}: {
+		value: string;
+		placeholder?: string;
+		multiline?: boolean;
+		inline?: boolean;
+		textStyle: string;
+		autofocus?: boolean;
+		initialCaretOffset?: number | null;
+		initialClickCoords?: { left: number; top: number } | null;
+		onChange: (value: string) => void;
+		onBlur: () => void;
+	} = $props();
+
+	let element = $state<HTMLDivElement | null>(null);
+	let draft = $state(value);
+
+	$effect(() => {
+		const nextValue = value;
+		if (!element) {
+			return;
+		}
+
+		if (element.ownerDocument.activeElement === element) {
+			return;
+		}
+
+		draft = nextValue;
+		element.textContent = nextValue;
+		updateEmptyState();
+	});
+
+	onMount(() => {
+		if (!element) {
+			return;
+		}
+
+		element.textContent = value;
+		draft = value;
+		updateEmptyState();
+
+		if (autofocus) {
+			void placeInitialSelection();
+		}
+	});
+
+	function readPlainText(node: HTMLElement): string {
+		return node.innerText.replace(/\u00a0/g, ' ').replace(/\r\n/g, '\n');
+	}
+
+	function updateEmptyState(): void {
+		if (!element) {
+			return;
+		}
+
+		element.classList.toggle('is-editor-empty', draft.trim().length === 0);
+	}
+
+	function emitChange(): void {
+		if (!element) {
+			return;
+		}
+
+		draft = readPlainText(element);
+		updateEmptyState();
+		onChange(draft);
+	}
+
+	function handlePaste(event: ClipboardEvent): void {
+		event.preventDefault();
+		const text = event.clipboardData?.getData('text/plain') ?? '';
+		insertPlainText(text);
+		emitChange();
+	}
+
+	function handleKeydown(event: KeyboardEvent): void {
+		if (!multiline && event.key === 'Enter') {
+			event.preventDefault();
+		}
+	}
+
+	function insertPlainText(text: string): void {
+		if (!element) {
+			return;
+		}
+
+		const doc = element.ownerDocument;
+		const selection = doc.getSelection();
+		if (!selection || selection.rangeCount === 0) {
+			element.textContent = (element.textContent ?? '') + text;
+			return;
+		}
+
+		const range = selection.getRangeAt(0);
+		range.deleteContents();
+		range.insertNode(doc.createTextNode(text));
+		range.collapse(false);
+		selection.removeAllRanges();
+		selection.addRange(range);
+	}
+
+	async function placeInitialSelection(): Promise<void> {
+		await tick();
+		if (!element) {
+			return;
+		}
+
+		element.focus();
+
+		const doc = element.ownerDocument;
+		const selection = doc.getSelection();
+		if (!selection) {
+			return;
+		}
+
+		if (initialClickCoords) {
+			const range =
+				doc.caretRangeFromPoint?.(initialClickCoords.left, initialClickCoords.top) ??
+				(() => {
+					const pos = doc.caretPositionFromPoint?.(
+						initialClickCoords.left,
+						initialClickCoords.top
+					);
+					if (!pos) {
+						return null;
+					}
+
+					const nextRange = doc.createRange();
+					nextRange.setStart(pos.offsetNode, pos.offset);
+					nextRange.collapse(true);
+					return nextRange;
+				})();
+
+			if (range && element.contains(range.startContainer)) {
+				selection.removeAllRanges();
+				selection.addRange(range);
+				return;
+			}
+		}
+
+		if (initialCaretOffset != null) {
+			setCaretAtOffset(element, initialCaretOffset, selection);
+		}
+	}
+
+	function setCaretAtOffset(
+		root: HTMLElement,
+		offset: number,
+		selection: Selection
+	): void {
+		const doc = root.ownerDocument;
+		const walker = doc.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+		let remaining = offset;
+
+		while (walker.nextNode()) {
+			const textNode = walker.currentNode as Text;
+			if (remaining <= textNode.length) {
+				const range = doc.createRange();
+				range.setStart(textNode, remaining);
+				range.collapse(true);
+				selection.removeAllRanges();
+				selection.addRange(range);
+				return;
+			}
+
+			remaining -= textNode.length;
+		}
+
+		const range = doc.createRange();
+		range.selectNodeContents(root);
+		range.collapse(false);
+		selection.removeAllRanges();
+		selection.addRange(range);
+	}
+</script>
+
+<div
+	bind:this={element}
+	class="builder-preview-text-editor"
+	class:is-editor-empty={!draft.trim()}
+	class:builder-preview-text-editor--inline={inline}
+	class:builder-preview-text-editor--multiline={multiline}
+	contenteditable="plaintext-only"
+	role="textbox"
+	aria-multiline={multiline}
+	data-placeholder={placeholder}
+	style={textStyle}
+	oninput={emitChange}
+	onpaste={handlePaste}
+	onkeydown={handleKeydown}
+	onblur={onBlur}
+></div>
+
+<style>
+	.builder-preview-text-editor {
+		width: 100%;
+		min-height: inherit;
+		margin: 0;
+		border: 0;
+		background: transparent;
+		padding: 0;
+		outline: none;
+		box-shadow: none;
+		font: inherit;
+		line-height: inherit;
+		letter-spacing: inherit;
+		text-transform: inherit;
+		text-align: inherit;
+		white-space: inherit;
+		word-wrap: inherit;
+		overflow-wrap: inherit;
+		cursor: text;
+	}
+
+	.builder-preview-text-editor--inline {
+		display: inline;
+		width: auto;
+		min-width: 1ch;
+		vertical-align: baseline;
+	}
+
+	.builder-preview-text-editor--multiline {
+		display: block;
+		white-space: pre-wrap;
+	}
+
+	.builder-preview-text-editor.is-editor-empty::before {
+		content: attr(data-placeholder);
+		color: #9ca3af;
+		opacity: 0.6;
+		pointer-events: none;
+	}
+</style>

package/dist/editor/RichTextEditor.svelte

@@ -0,0 +1,234 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { Editor } from '@tiptap/core';
+	import StarterKit from '@tiptap/starter-kit';
+	import type { BuilderRichTextValue } from '../core.js';
+
+	let {
+		value,
+		mode,
+		placeholder = '',
+		chrome = 'panel',
+		plainTextOnly = false,
+		hostInline = false,
+		autofocus = false,
+		initialCaretOffset = null,
+		initialClickCoords = null,
+		editorStyle = '',
+		onChange,
+		onBlur = () => {}
+	}: {
+		value: BuilderRichTextValue;
+		mode: BuilderRichTextValue['mode'];
+		placeholder?: string;
+		chrome?: 'panel' | 'inline';
+		plainTextOnly?: boolean;
+		hostInline?: boolean;
+		autofocus?: boolean;
+		initialCaretOffset?: number | null;
+		initialClickCoords?: { left: number; top: number } | null;
+		editorStyle?: string;
+		onChange: (nextValue: BuilderRichTextValue) => void;
+		onBlur?: () => void;
+	} = $props();
+
+	let element = $state<HTMLDivElement | null>(null);
+	let editor = $state<Editor | null>(null);
+	let lastSyncedHtml = $state('');
+
+	onMount(() => {
+		const initialHtml = getEditorContent(value.html, mode);
+		lastSyncedHtml = value.html;
+
+		editor = new Editor({
+			element: element ?? undefined,
+			autofocus: false,
+			extensions: [
+				StarterKit.configure({
+					heading: mode === 'inline' || plainTextOnly ? false : undefined,
+					bulletList: mode === 'inline' || plainTextOnly ? false : undefined,
+					orderedList: mode === 'inline' || plainTextOnly ? false : undefined,
+					blockquote: mode === 'inline' || plainTextOnly ? false : undefined,
+					codeBlock: false,
+					horizontalRule: mode === 'inline' || plainTextOnly ? false : undefined,
+					bold: plainTextOnly ? false : undefined,
+					italic: plainTextOnly ? false : undefined,
+					strike: plainTextOnly ? false : undefined,
+					code: plainTextOnly ? false : undefined
+				})
+			],
+			content: initialHtml,
+			editorProps: {
+				attributes: {
+					class:
+						chrome === 'inline'
+							? `builder-richtext-inline-editor${hostInline ? ' builder-richtext-inline-editor--host-inline' : ''}`
+							: mode === 'inline'
+								? 'builder-richtext-panel-editor min-h-11 border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none focus:border-[#FDE047] focus:ring-1 focus:ring-[#FDE047] dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:focus:border-[#FACC15] dark:focus:ring-[#FACC15]'
+								: 'builder-richtext-panel-editor min-h-32 border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none focus:border-[#FDE047] focus:ring-1 focus:ring-[#FDE047] dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:focus:border-[#FACC15] dark:focus:ring-[#FACC15]',
+					style: editorStyle,
+					'data-placeholder': placeholder
+				},
+				handleKeyDown: (_view, event) => {
+					if (plainTextOnly && event.key === 'Enter') {
+						event.preventDefault();
+						return true;
+					}
+
+					return false;
+				}
+			},
+			onBlur: () => {
+				onBlur();
+			},
+			onUpdate: ({ editor: activeEditor }) => {
+				const html = normalizeOutput(mode, activeEditor.getHTML());
+				lastSyncedHtml = html;
+				onChange({
+					kind: 'richtext',
+					mode,
+					html,
+					json: activeEditor.getJSON() as Record<string, unknown>
+				});
+				activeEditor.view.dom.classList.toggle('is-editor-empty', activeEditor.isEmpty);
+			},
+			onCreate: ({ editor: activeEditor }) => {
+				activeEditor.view.dom.classList.toggle('is-editor-empty', activeEditor.isEmpty);
+				if (autofocus) {
+					placeInitialSelection(activeEditor);
+				}
+			}
+		});
+
+		return () => {
+			editor?.destroy();
+			editor = null;
+		};
+	});
+
+	$effect(() => {
+		const nextHtml = value.html;
+		if (editor && !editor.isFocused && nextHtml !== lastSyncedHtml) {
+			lastSyncedHtml = nextHtml;
+			editor.commands.setContent(getEditorContent(nextHtml, mode), { emitUpdate: false });
+			editor.view.dom.classList.toggle('is-editor-empty', editor.isEmpty);
+		}
+	});
+
+	function placeInitialSelection(activeEditor: Editor): void {
+		if (initialClickCoords) {
+			const pos = activeEditor.view.posAtCoords(initialClickCoords)?.pos;
+			if (pos != null) {
+				activeEditor.chain().focus().setTextSelection(pos).run();
+				return;
+			}
+		}
+
+		if (initialCaretOffset != null && initialCaretOffset > 0) {
+			const docSize = activeEditor.state.doc.content.size;
+			const pos = Math.min(initialCaretOffset + 1, Math.max(1, docSize - 1));
+			activeEditor.chain().focus().setTextSelection(pos).run();
+			return;
+		}
+
+		if (hostInline && activeEditor.isEmpty) {
+			activeEditor.chain().focus().setTextSelection(1).run();
+			return;
+		}
+
+		activeEditor.commands.focus();
+	}
+
+	function getEditorContent(html: string, currentMode: BuilderRichTextValue['mode']): string {
+		if (!html.trim()) {
+			return '<p></p>';
+		}
+
+		if (currentMode === 'inline' && !html.trim().startsWith('<p')) {
+			return `<p>${html}</p>`;
+		}
+
+		return html;
+	}
+
+	function normalizeOutput(htmlMode: BuilderRichTextValue['mode'], html: string): string {
+		const trimmed = html.trim();
+		if (trimmed === '<p></p>') {
+			return '';
+		}
+
+		if (htmlMode !== 'inline') {
+			return trimmed;
+		}
+
+		const paragraphMatch = trimmed.match(/^<p>([\s\S]*)<\/p>$/);
+		return paragraphMatch ? paragraphMatch[1] : trimmed;
+	}
+</script>
+
+<div bind:this={element} class={chrome === 'inline' ? 'builder-richtext-mount' : undefined}></div>
+
+<style>
+	:global(.builder-richtext-panel-editor) {
+		width: 100%;
+	}
+
+	:global(.builder-richtext-inline-editor) {
+		width: 100%;
+		min-height: inherit;
+		border: 0;
+		background: transparent;
+		padding: 0;
+		margin: 0;
+		outline: none;
+		box-shadow: none;
+		color: inherit;
+		font: inherit;
+		line-height: inherit;
+		letter-spacing: inherit;
+		text-transform: inherit;
+		text-align: inherit;
+		white-space: inherit;
+		word-wrap: inherit;
+		overflow-wrap: inherit;
+		cursor: text;
+	}
+
+	:global(.builder-richtext-mount) {
+		display: contents;
+	}
+
+	:global(.builder-richtext-inline-editor > *:first-child) {
+		margin-top: 0;
+	}
+
+	:global(.builder-richtext-inline-editor > *:last-child) {
+		margin-bottom: 0;
+	}
+
+	:global(.builder-richtext-inline-editor p) {
+		margin: 0;
+		padding: 0;
+		line-height: inherit;
+	}
+
+	:global(.builder-richtext-inline-editor--host-inline) {
+		display: block;
+		width: 100%;
+		min-height: 1lh;
+		vertical-align: baseline;
+		position: relative;
+		white-space: nowrap;
+	}
+
+	:global(.builder-richtext-inline-editor--host-inline p) {
+		display: block;
+		margin: 0;
+		padding: 0;
+		min-height: inherit;
+	}
+
+	:global(.builder-richtext-inline-editor--host-inline .ProseMirror-trailingBreak) {
+		display: none;
+	}
+</style>