@dryui/ui 0.1.2 → 0.1.3

package/dist/rich-text-editor/rich-text-editor-content.svelte

@@ -1,13 +1,101 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { RichTextEditor as RichTextEditorPrimitive } from '@dryui/primitives/rich-text-editor';
+	import { getRichTextEditorCtx } from '@dryui/primitives/rich-text-editor';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {}
 
 	let { ...rest }: Props = $props();
+
+	const ctx = getRichTextEditorCtx();
+
+	let contentEl = $state<HTMLDivElement>();
+
+	// Register the content element with the context
+	$effect(() => {
+		if (contentEl) {
+			ctx.contentEl = contentEl;
+		}
+	});
+
+	// Sync value into contenteditable (also clears hint elements on mount)
+	$effect(() => {
+		if (!contentEl) return;
+		const html = ctx.html || '';
+		if (contentEl.innerHTML !== html && document.activeElement !== contentEl) {
+			contentEl.innerHTML = html;
+		}
+	});
+
+	// Listen for selectionchange on document to track formatting state
+	$effect(() => {
+		if (!contentEl) return;
+
+		function onSelectionChange() {
+			const sel = window.getSelection();
+			if (!sel || sel.rangeCount === 0) return;
+			if (contentEl!.contains(sel.anchorNode)) {
+				ctx.updateState();
+			}
+		}
+
+		document.addEventListener('selectionchange', onSelectionChange);
+		return () => {
+			document.removeEventListener('selectionchange', onSelectionChange);
+		};
+	});
+
+	function handleInput() {
+		ctx.updateState();
+		ctx.syncValue();
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (ctx.readonly) return;
+
+		const mod = event.metaKey || event.ctrlKey;
+		if (!mod) return;
+
+		switch (event.key.toLowerCase()) {
+			case 'b':
+				event.preventDefault();
+				ctx.toggleBold();
+				break;
+			case 'i':
+				event.preventDefault();
+				ctx.toggleItalic();
+				break;
+			case 'u':
+				event.preventDefault();
+				ctx.toggleUnderline();
+				break;
+			case 'k':
+				event.preventDefault();
+				contentEl?.dispatchEvent(new CustomEvent('rte-link-request', { bubbles: true }));
+				break;
+		}
+	}
 </script>
 
-<RichTextEditorPrimitive.Content data-part="content" {...rest} />
+<!--
+	The elements below (h1–h3, p, ul, ol, li, a) are created dynamically by the
+	browser's execCommand API inside the contenteditable div. They are declared
+	here so Svelte can verify the scoped CSS selectors that style them. The
+	$effect that syncs ctx.html into innerHTML replaces these on mount.
+-->
+<div
+	bind:this={contentEl}
+	contenteditable={!ctx.readonly}
+	role="textbox"
+	aria-multiline="true"
+	aria-placeholder={ctx.placeholder || undefined}
+	data-placeholder={ctx.placeholder || undefined}
+	data-part="content"
+	data-rte-content
+	data-readonly={ctx.readonly || undefined}
+	oninput={handleInput}
+	onkeydown={handleKeydown}
+	{...rest}
+><h1>.</h1><h2>.</h2><h3>.</h3><p></p><ul><li></li></ul><ol><li></li></ol><a aria-hidden="true" href="https://example.com">.</a></div>
 
 <style>
 	[data-part='content'] {
@@ -32,7 +120,7 @@
 		pointer-events: none;
 	}
 
-	/* Typography inside the editor content */
+	/* Typography for contenteditable elements created by execCommand */
 	[data-part='content'] h1 {
 		font-size: var(--dry-type-heading-2-size, var(--dry-text-2xl-size));
 		font-weight: 700;

package/dist/rich-text-editor/rich-text-editor-root.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { RichTextEditor as RichTextEditorPrimitive } from '@dryui/primitives/rich-text-editor';
+	import { setRichTextEditorCtx } from '@dryui/primitives/rich-text-editor';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		value?: string;
@@ -10,10 +10,175 @@
 		children: Snippet;
 	}
 
-	let { value = $bindable(''), children, ...rest }: Props = $props();
+	let {
+		value = $bindable(''),
+		placeholder = '',
+		readonly: readonlyProp = false,
+		children,
+		...rest
+	}: Props = $props();
+
+	let isBold = $state(false);
+	let isItalic = $state(false);
+	let isUnderline = $state(false);
+	let isStrikethrough = $state(false);
+	let isOrderedList = $state(false);
+	let isUnorderedList = $state(false);
+	let currentHeading = $state<string | null>(null);
+	let currentLink = $state<string | null>(null);
+
+	function execCommand(command: string, cmdValue?: string) {
+		if (readonlyProp) return;
+		ctx.contentEl?.focus();
+		document.execCommand(command, false, cmdValue);
+		updateState();
+		syncValue();
+	}
+
+	function updateState() {
+		isBold = document.queryCommandState('bold');
+		isItalic = document.queryCommandState('italic');
+		isUnderline = document.queryCommandState('underline');
+		isStrikethrough = document.queryCommandState('strikethrough');
+		isOrderedList = document.queryCommandState('insertOrderedList');
+		isUnorderedList = document.queryCommandState('insertUnorderedList');
+
+		const block = document.queryCommandValue('formatBlock');
+		if (block && /^h[1-3]$/i.test(block)) {
+			currentHeading = block.toLowerCase();
+		} else {
+			currentHeading = null;
+		}
+
+		const sel = window.getSelection();
+		if (sel && sel.rangeCount > 0) {
+			let node: Node | null = sel.anchorNode;
+			while (node && node !== ctx.contentEl) {
+				if (node instanceof HTMLAnchorElement) {
+					currentLink = node.href;
+					return;
+				}
+				node = node.parentNode;
+			}
+		}
+		currentLink = null;
+	}
+
+	function syncValue() {
+		if (ctx.contentEl) {
+			value = ctx.contentEl.innerHTML;
+		}
+	}
+
+	const ctx = setRichTextEditorCtx({
+		get isBold() {
+			return isBold;
+		},
+		get isItalic() {
+			return isItalic;
+		},
+		get isUnderline() {
+			return isUnderline;
+		},
+		get isStrikethrough() {
+			return isStrikethrough;
+		},
+		get isOrderedList() {
+			return isOrderedList;
+		},
+		get isUnorderedList() {
+			return isUnorderedList;
+		},
+		get currentHeading() {
+			return currentHeading;
+		},
+		get currentLink() {
+			return currentLink;
+		},
+		get html() {
+			return value;
+		},
+		get readonly() {
+			return readonlyProp;
+		},
+		get placeholder() {
+			return placeholder;
+		},
+		contentEl: null,
+		execCommand,
+		toggleBold() {
+			execCommand('bold');
+		},
+		toggleItalic() {
+			execCommand('italic');
+		},
+		toggleUnderline() {
+			execCommand('underline');
+		},
+		toggleStrikethrough() {
+			execCommand('strikethrough');
+		},
+		toggleOrderedList() {
+			execCommand('insertOrderedList');
+		},
+		toggleUnorderedList() {
+			execCommand('insertUnorderedList');
+		},
+		setHeading(level: 'h1' | 'h2' | 'h3' | 'p') {
+			if (level === 'p') {
+				execCommand('formatBlock', 'p');
+			} else {
+				if (currentHeading === level) {
+					execCommand('formatBlock', 'p');
+				} else {
+					execCommand('formatBlock', level);
+				}
+			}
+		},
+		insertLink(url: string) {
+			if (readonlyProp) return;
+			const sel = window.getSelection();
+			if (!sel || sel.rangeCount === 0) return;
+
+			if (sel.isCollapsed) {
+				const a = document.createElement('a');
+				a.href = url;
+				a.textContent = url;
+				a.target = '_blank';
+				a.rel = 'noopener noreferrer';
+				const range = sel.getRangeAt(0);
+				range.insertNode(a);
+				range.setStartAfter(a);
+				range.collapse(true);
+				sel.removeAllRanges();
+				sel.addRange(range);
+			} else {
+				document.execCommand('createLink', false, url);
+				if (ctx.contentEl) {
+					const links = ctx.contentEl.querySelectorAll('a[href="' + CSS.escape(url) + '"]');
+					links.forEach((link) => {
+						link.setAttribute('target', '_blank');
+						link.setAttribute('rel', 'noopener noreferrer');
+					});
+				}
+			}
+			updateState();
+			syncValue();
+		},
+		removeLink() {
+			execCommand('unlink');
+		},
+		getContent() {
+			return ctx.contentEl?.innerHTML ?? '';
+		},
+		updateState,
+		syncValue
+	});
 </script>
 
-<RichTextEditorPrimitive.Root bind:value data-part="root" {children} {...rest} />
+<div data-part="root" data-rte-root data-readonly={readonlyProp || undefined} {...rest}>
+	{@render children()}
+</div>
 
 <style>
 	[data-part='root'] {