@refrakt-md/editor 0.8.0 → 0.8.2

package/app/src/lib/components/BlockCard.svelte

@@ -3,6 +3,22 @@
 	import type { ThemeConfig, RendererNode } from '@refrakt-md/transform';
 	import { renderBlockPreview } from '../preview/block-renderer.js';
 	import { initRuneBehaviors } from '@refrakt-md/behaviors';
+	export type EditType = 'inline' | 'link' | 'code' | 'image' | 'icon';
+
+	export interface SectionClickInfo {
+		dataName: string;
+		text: string;
+		rect: DOMRect;
+		editType: EditType;
+		/** For link-type edits: the href from the <a> child */
+		href?: string;
+		/** For icon-type edits: the current icon name from data-icon attribute */
+		iconName?: string;
+	}
+
+	type InteractiveTarget =
+		| { type: 'section'; el: HTMLElement; dataName: string; editType: EditType }
+		| { type: 'rune'; el: HTMLElement };
 
 	interface Props {
 		block: ParsedBlock;
@@ -15,6 +31,9 @@
 		communityStyles?: Record<string, Record<string, unknown>> | null;
 		aggregated?: Record<string, unknown>;
 		dragHandle?: boolean;
+		readOnly?: boolean;
+		onsectionclick?: (info: SectionClickInfo) => void;
+		onruneclick?: (info: { x: number; y: number; nestedRuneIndex?: number }) => void;
 		ondragstart: (e: DragEvent) => void;
 		ondragover: (e: DragEvent) => void;
 		ondrop: (e: DragEvent) => void;
@@ -31,6 +50,9 @@
 		communityStyles = null,
 		aggregated = {},
 		dragHandle = true,
+		readOnly = false,
+		onsectionclick,
+		onruneclick,
 		ondragstart,
 		ondragover,
 		ondrop,
@@ -42,6 +64,209 @@
 	let previewDebounce: ReturnType<typeof setTimeout>;
 	let behaviorCleanup: (() => void) | null = null;
 
+	/** Convert PascalCase to kebab-case: "CallToAction" → "call-to-action" */
+	function toKebab(s: string): string {
+		return s.replace(/([a-z])([A-Z])/g, '$1-$2').replace(/([A-Z])([A-Z][a-z])/g, '$1-$2').toLowerCase();
+	}
+
+	/** Build a lookup map from kebab-case data-rune values to RuneConfig */
+	function buildRuneConfigMap(config: ThemeConfig): Map<string, import('@refrakt-md/transform').RuneConfig> {
+		const map = new Map<string, import('@refrakt-md/transform').RuneConfig>();
+		for (const [key, cfg] of Object.entries(config.runes)) {
+			map.set(toKebab(key), cfg);
+		}
+		return map;
+	}
+
+	/** Find the nearest interactive target: an editable data-name section, or a data-rune root.
+	 *  Editable data-name sections take priority; data-rune is the fallback for dead-space clicks. */
+	function findInteractiveTarget(
+		start: HTMLElement,
+		root: HTMLElement,
+		runeConfigMap: Map<string, import('@refrakt-md/transform').RuneConfig>,
+	): InteractiveTarget | null {
+		let el: HTMLElement | null = start;
+		let dataNameEl: HTMLElement | null = null;
+		let dataRuneEl: HTMLElement | null = null;
+
+		// Walk up to find the nearest data-name and data-rune elements
+		while (el && el !== root) {
+			if (el.hasAttribute('data-name') && !dataNameEl) {
+				dataNameEl = el;
+			}
+			if (el.hasAttribute('data-rune') && !dataRuneEl) {
+				dataRuneEl = el;
+			}
+			el = el.parentElement;
+		}
+
+		// Try editable data-name section first (takes priority)
+		if (dataNameEl) {
+			const dataName = dataNameEl.getAttribute('data-name')!;
+
+			// Find containing rune's config for editHints lookup
+			let configEl: HTMLElement | null = dataNameEl.parentElement;
+			let runeConfig: import('@refrakt-md/transform').RuneConfig | undefined;
+			while (configEl && configEl !== root) {
+				const runeType = configEl.getAttribute('data-rune');
+				if (runeType) {
+					runeConfig = runeConfigMap.get(runeType);
+					break;
+				}
+				configEl = configEl.parentElement;
+			}
+
+			const hint = runeConfig?.editHints?.[dataName];
+
+			if (hint && hint !== 'none') {
+				return { type: 'section', el: dataNameEl, dataName, editType: hint };
+			}
+			// data-name found but not editable — fall through to rune
+		}
+
+		// Fall back to data-rune element
+		if (dataRuneEl) {
+			return { type: 'rune', el: dataRuneEl };
+		}
+
+		return null;
+	}
+
+	/** Attach click and hover handlers to interactive elements within the wrapper */
+	function attachSectionHandlers(wrapper: HTMLElement, runeConfigMap: Map<string, import('@refrakt-md/transform').RuneConfig>) {
+		let hoveredEl: HTMLElement | null = null;
+		let removeTimer: ReturnType<typeof setTimeout> | null = null;
+		const HOVER_DEBOUNCE = 75; // ms — bridges list-item gaps
+
+		// Tooltip element — lives inside the shadow DOM wrapper
+		const tooltip = document.createElement('div');
+		tooltip.className = 'rf-edit-tooltip';
+		wrapper.appendChild(tooltip);
+
+		function showTooltip(label: string, me: MouseEvent) {
+			tooltip.textContent = label;
+			tooltip.style.left = `${me.clientX + 12}px`;
+			tooltip.style.top = `${me.clientY + 12}px`;
+			tooltip.classList.add('rf-tooltip-visible');
+		}
+
+		function hideTooltip() {
+			tooltip.classList.remove('rf-tooltip-visible');
+		}
+
+		wrapper.addEventListener('mouseover', (e) => {
+			const result = findInteractiveTarget(e.target as HTMLElement, wrapper, runeConfigMap);
+			const target = result?.el ?? null;
+
+			// Cancel any pending deferred removal/switch
+			if (removeTimer !== null) {
+				clearTimeout(removeTimer);
+				removeTimer = null;
+			}
+
+			if (target === hoveredEl) {
+				// Re-entered the same target — already highlighted
+			} else if (target && hoveredEl && hoveredEl.contains(target)) {
+				// Moving to a child of current target — switch immediately
+				hoveredEl.classList.remove('rf-editable-hover');
+				hoveredEl = target;
+				hoveredEl.classList.add('rf-editable-hover');
+			} else if (hoveredEl && target && target.contains(hoveredEl)) {
+				// Moving to an ancestor (gap-crossing case) — defer the switch
+				const oldHovered = hoveredEl;
+				removeTimer = setTimeout(() => {
+					if (hoveredEl === oldHovered) {
+						oldHovered.classList.remove('rf-editable-hover');
+						hoveredEl = target;
+						hoveredEl.classList.add('rf-editable-hover');
+					}
+					removeTimer = null;
+				}, HOVER_DEBOUNCE);
+				return; // Keep current tooltip during deferred switch
+			} else {
+				// Completely different target — switch immediately
+				hoveredEl?.classList.remove('rf-editable-hover');
+				hoveredEl = target;
+				hoveredEl?.classList.add('rf-editable-hover');
+			}
+
+			if (result) {
+				const label = result.type === 'section'
+					? result.dataName
+					: result.el.getAttribute('data-rune') ?? '';
+				showTooltip(label, e as MouseEvent);
+			} else {
+				hideTooltip();
+			}
+		});
+
+		wrapper.addEventListener('mousemove', (e) => {
+			if (tooltip.classList.contains('rf-tooltip-visible')) {
+				tooltip.style.left = `${e.clientX + 12}px`;
+				tooltip.style.top = `${e.clientY + 12}px`;
+			}
+		});
+
+		wrapper.addEventListener('mouseout', (e) => {
+			const related = (e as MouseEvent).relatedTarget as HTMLElement | null;
+			if (hoveredEl && (!related || !hoveredEl.contains(related))) {
+				if (removeTimer !== null) {
+					clearTimeout(removeTimer);
+				}
+				const el = hoveredEl;
+				removeTimer = setTimeout(() => {
+					el.classList.remove('rf-editable-hover');
+					if (hoveredEl === el) hoveredEl = null;
+					removeTimer = null;
+				}, HOVER_DEBOUNCE);
+				hideTooltip();
+			}
+		});
+
+		wrapper.addEventListener('click', (e) => {
+			hideTooltip();
+			const result = findInteractiveTarget(e.target as HTMLElement, wrapper, runeConfigMap);
+			if (!result) return;
+
+			e.preventDefault();
+			e.stopPropagation();
+
+			if (result.type === 'section') {
+				const { el, dataName, editType } = result;
+				const rect = el.getBoundingClientRect();
+				// For link edits, extract the href from the <a> child
+				const anchor = editType === 'link' ? el.querySelector('a') as HTMLAnchorElement | null : null;
+				// For image edits, extract the src from the <img> child
+				const imgEl = editType === 'image' ? el.querySelector('img') as HTMLImageElement | null : null;
+				// For code edits, extract text from the <code> element to avoid
+				// picking up structural text (language labels, copy buttons, etc.)
+				const codeEl = editType === 'code' ? el.querySelector('code') : null;
+				// For icon edits, extract the icon name from the data-icon attribute
+				const iconEl = editType === 'icon'
+					? (el.hasAttribute('data-icon') ? el : el.querySelector('[data-icon]')) as HTMLElement | null
+					: null;
+				onsectionclick?.({
+					dataName,
+					text: (codeEl ?? el).textContent?.trim() ?? '',
+					rect,
+					editType,
+					href: anchor?.getAttribute('href') ?? imgEl?.getAttribute('src') ?? undefined,
+					iconName: iconEl?.getAttribute('data-icon') ?? undefined,
+				});
+			} else {
+				// type === 'rune' → open block edit panel
+				const me = e as MouseEvent;
+				const allRuneEls = Array.from(wrapper.querySelectorAll('[data-rune]'));
+				// First data-rune is the root; any others are nested
+				let nestedRuneIndex: number | undefined;
+				if (allRuneEls.length > 1 && result.el !== allRuneEls[0]) {
+					nestedRuneIndex = allRuneEls.indexOf(result.el) - 1;
+				}
+				onruneclick?.({ x: me.clientX, y: me.clientY, nestedRuneIndex });
+			}
+		});
+	}
+
 	$effect(() => {
 		if (!previewContainer || !themeConfig) return;
 
@@ -119,6 +344,55 @@ ${hlCss}
 							grid-column: full;
 							padding-inline: max(var(--rf-content-gutter, 1.5rem), calc((100% - var(--rf-content-max)) / 2));
 						}
+						/* Base: invisible outline + transition (persists on remove for fade-out) */
+						[data-name] {
+							outline: 2px dashed transparent;
+							outline-offset: 4px;
+							border-radius: 4px;
+							transition: outline-color 150ms ease;
+						}
+						[data-rune] {
+							outline: 2px dashed transparent;
+							outline-offset: 4px;
+							border-radius: 4px;
+							transition: outline-color 150ms ease;
+						}
+						/* Editable section hover affordance */
+						[data-name].rf-editable-hover {
+							outline-color: rgba(59, 130, 246, 0.5);
+						}
+						[data-name].rf-editable-hover,
+						[data-name].rf-editable-hover * {
+							cursor: text !important;
+						}
+						/* Rune root hover affordance — opens block edit panel */
+						[data-rune].rf-editable-hover {
+							outline-color: rgba(59, 130, 246, 0.3);
+						}
+						[data-rune].rf-editable-hover,
+						[data-rune].rf-editable-hover * {
+							cursor: pointer !important;
+						}
+						/* Hover tooltip */
+						.rf-edit-tooltip {
+							position: fixed;
+							padding: 2px 8px;
+							font-family: system-ui, -apple-system, sans-serif;
+							font-size: 11px;
+							font-weight: 600;
+							line-height: 1.4;
+							color: #fff;
+							background: rgba(30, 41, 59, 0.9);
+							border-radius: 4px;
+							pointer-events: none;
+							z-index: 10000;
+							white-space: nowrap;
+							opacity: 0;
+							transition: opacity 120ms ease;
+						}
+						.rf-edit-tooltip.rf-tooltip-visible {
+							opacity: 1;
+						}
 					</style>
 					<div class="rf-preview-wrapper">${html}</div>`;
 
@@ -126,6 +400,17 @@ ${hlCss}
 					const wrapper = shadowRoot.querySelector('.rf-preview-wrapper') as HTMLElement | null;
 					if (wrapper) {
 						behaviorCleanup = initRuneBehaviors(wrapper);
+
+						// Prevent link navigation in preview (editor is for editing, not browsing)
+						wrapper.addEventListener('click', (e) => {
+							const anchor = (e.target as HTMLElement).closest('a');
+							if (anchor) e.preventDefault();
+						}, true);
+
+						// Attach inline-edit click + hover handlers for rune sections
+						if (!readOnly && (onsectionclick || onruneclick) && block.type === 'rune') {
+							attachSectionHandlers(wrapper, buildRuneConfigMap(config));
+						}
 					}
 				}
 			} catch {