@refrakt-md/editor 0.8.0 → 0.8.2

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

@@ -8,13 +8,23 @@
 		buildRuneMap,
 		blockLabel,
 		extractRuneInner,
+		rebuildRuneSource,
 		type ParsedBlock,
+		type RuneBlock,
 	} from '../editor/block-parser.js';
+	import { findSectionMapping, applySectionEdit, findActionMapping, applyActionEdit, findCommandMapping, applyCommandEdit, applyLanguageEdit, findImageMapping, applyImageEdit, findIconMapping, applyIconEdit, type SectionMapping, type ActionMapping, type CommandMapping, type ImageMapping, type IconMapping } from '../editor/section-mapper.js';
+	import { stripInlineMarkdown } from '../editor/inline-markdown.js';
 	import { editorState } from '../state/editor.svelte.js';
 	import BlockCard from './BlockCard.svelte';
+	import type { SectionClickInfo } from './BlockCard.svelte';
 	import BlockEditPanel from './BlockEditPanel.svelte';
 	import FrontmatterEditPanel from './FrontmatterEditPanel.svelte';
 	import InsertBlockDialog from './InsertBlockDialog.svelte';
+	import InlineEditPopover from './InlineEditPopover.svelte';
+	import ActionEditPopover from './ActionEditPopover.svelte';
+	import CodeEditPopover from './CodeEditPopover.svelte';
+	import ImageEditPopover from './ImageEditPopover.svelte';
+	import IconPickerPopover from './IconPickerPopover.svelte';
 
 	interface Props {
 		bodyContent: string;
@@ -99,17 +109,14 @@
 			reconcileIds(blocks, newBlocks);
 			blocks = newBlocks;
 			lastParsedSource = body;
-			// Close edit panel when switching files
+			// Close edit panel and inline popover when switching files
 			activeIndex = null;
+			editingFrontmatter = false;
+			anchorPoint = null;
+			inlineEdit = null;
 		}
 	});
 
-	// Sync edit panel open state to global state (for layout adjustments)
-	$effect(() => {
-		editorState.editPanelOpen = !readOnly && (activeIndex !== null || editingFrontmatter);
-		return () => { editorState.editPanelOpen = false; };
-	});
-
 	/** Sync blocks back to source text */
 	function syncToSource() {
 		const newSource = serializeBlocks(blocks);
@@ -130,15 +137,71 @@
 
 	let activeIndex: number | null = $state(null);
 	let hoveredIndex: number | null = $state(null);
+	let anchorPoint: { x: number; y: number } | null = $state(null);
+	let pendingRuneIndex: number | null = $state(null);
+	let editSessionId: number = $state(0);
+
+	// ── Popover positioning ─────────────────────────────────────
+
+	const POPOVER_WIDTH = 420;
+	const POPOVER_GAP = 12;
+
+	let popoverStyle = $derived.by(() => {
+		if (!anchorPoint) return '';
+
+		const vw = window.innerWidth;
+		const vh = window.innerHeight;
+
+		// Prefer placing to the right of the click point
+		let left = anchorPoint.x + POPOVER_GAP;
+		if (left + POPOVER_WIDTH > vw - 16) {
+			left = anchorPoint.x - POPOVER_WIDTH - POPOVER_GAP;
+		}
+		if (left < 16) {
+			left = vw - POPOVER_WIDTH - 16;
+		}
+
+		// Vertical: start at click Y, clamped to viewport
+		let top = anchorPoint.y;
+		const maxH = vh - 120;
+		const maxTop = vh - Math.min(600, maxH) - 16;
+		if (top > maxTop) top = maxTop;
+		if (top < 60) top = 60;
+
+		return `left: ${left}px; top: ${top}px; max-height: min(600px, ${maxH}px);`;
+	});
+
+	function toggleBlock(index: number, x: number, y: number) {
+		editingFrontmatter = false;
+		if (activeIndex === index) {
+			activeIndex = null;
+			anchorPoint = null;
+			pendingRuneIndex = null;
+		} else {
+			editSessionId++;
+			activeIndex = index;
+			anchorPoint = { x, y };
+			pendingRuneIndex = null;
+		}
+	}
 
-	function toggleBlock(index: number) {
+	function handleRuneClick(index: number, x: number, y: number, nestedRuneIndex?: number) {
 		editingFrontmatter = false;
-		activeIndex = activeIndex === index ? null : index;
+		editSessionId++;
+		activeIndex = index;
+		anchorPoint = { x, y };
+		pendingRuneIndex = nestedRuneIndex ?? null;
 	}
 
-	function toggleFrontmatter() {
+	function toggleFrontmatter(e: MouseEvent) {
 		activeIndex = null;
-		editingFrontmatter = !editingFrontmatter;
+		if (editingFrontmatter) {
+			editingFrontmatter = false;
+			anchorPoint = null;
+		} else {
+			editingFrontmatter = true;
+			anchorPoint = { x: e.clientX, y: e.clientY };
+		}
 	}
 
 	function handleKeydown(e: KeyboardEvent) {
@@ -147,10 +210,25 @@
 			if (activeIndex !== null || editingFrontmatter) {
 				activeIndex = null;
 				editingFrontmatter = false;
+				anchorPoint = null;
+				pendingRuneIndex = null;
 			}
 		}
 	}
 
+	function handleListScroll() {
+		if (activeIndex !== null || editingFrontmatter) {
+			activeIndex = null;
+			editingFrontmatter = false;
+			anchorPoint = null;
+			pendingRuneIndex = null;
+		}
+	}
+
+	function handleResize() {
+		if (anchorPoint) anchorPoint = { ...anchorPoint };
+	}
+
 	// ── Block operations ─────────────────────────────────────────
 
 	function handleUpdateBlock(index: number, updated: ParsedBlock) {
@@ -178,6 +256,9 @@
 
 	function handleDragStart(e: DragEvent, index: number) {
 		dragIndex = index;
+		activeIndex = null;
+		editingFrontmatter = false;
+		anchorPoint = null;
 		if (e.dataTransfer) {
 			e.dataTransfer.effectAllowed = 'move';
 			e.dataTransfer.setData('text/plain', String(index));
@@ -338,6 +419,309 @@
 		syncToSource();
 	}
 
+	// ── Inline section editing ──────────────────────────────────
+
+	let inlineEdit: {
+		blockIndex: number;
+		dataName: string;
+		inlineSource: string;
+		rect: DOMRect;
+		mapping: SectionMapping;
+	} | null = $state(null);
+
+	function handleSectionClick(index: number, info: SectionClickInfo) {
+		const block = blocks[index];
+		if (block.type !== 'rune') return;
+		const rb = block as RuneBlock;
+
+		if (info.editType === 'link') {
+			const mapping = findActionMapping(rb.innerContent, info.text, info.href ?? '');
+			if (!mapping) return;
+
+			actionEdit = {
+				blockIndex: index,
+				rect: info.rect,
+				mapping,
+			};
+			return;
+		}
+
+		if (info.editType === 'code') {
+			const mapping = findCommandMapping(rb.innerContent, info.text);
+			if (!mapping) return;
+
+			commandEdit = {
+				blockIndex: index,
+				rect: info.rect,
+				mapping,
+			};
+			return;
+		}
+
+		if (info.editType === 'image') {
+			const imgSrc = info.href ?? '';
+			const mapping = findImageMapping(rb.innerContent, imgSrc);
+			if (!mapping) return;
+
+			imageEdit = {
+				blockIndex: index,
+				mapping,
+			};
+			return;
+		}
+
+		if (info.editType === 'icon') {
+			const iconName = info.iconName ?? '';
+			const mapping = findIconMapping(rb.innerContent, iconName);
+			if (!mapping) return;
+
+			iconEdit = {
+				blockIndex: index,
+				mapping,
+			};
+			return;
+		}
+
+		// Default: inline text editing
+		const mapping = findSectionMapping(rb.innerContent, info.dataName, info.text);
+		if (!mapping) return;
+
+		inlineEdit = {
+			blockIndex: index,
+			dataName: info.dataName,
+			inlineSource: mapping.inlineSource,
+			rect: info.rect,
+			mapping,
+		};
+	}
+
+	function handleInlineEditChange(newInlineSource: string) {
+		if (!inlineEdit) return;
+		const block = blocks[inlineEdit.blockIndex];
+		if (block.type !== 'rune') return;
+		const rb = block as RuneBlock;
+
+		const newInner = applySectionEdit(rb.innerContent, inlineEdit.mapping, newInlineSource);
+		const updated: RuneBlock = { ...rb, innerContent: newInner, source: '' };
+		updated.source = rebuildRuneSource(updated);
+
+		// Update the mapping to reflect the new source so subsequent edits work
+		inlineEdit = {
+			...inlineEdit,
+			inlineSource: newInlineSource,
+			mapping: {
+				...inlineEdit.mapping,
+				text: stripInlineMarkdown(newInlineSource),
+				source: inlineEdit.mapping.sourcePrefix + newInlineSource,
+				inlineSource: newInlineSource,
+			},
+		};
+
+		handleUpdateBlock(inlineEdit.blockIndex, updated);
+	}
+
+	function closeInlineEdit() {
+		inlineEdit = null;
+	}
+
+	// ── Action item editing ────────────────────────────────────
+
+	let actionEdit: {
+		blockIndex: number;
+		rect: DOMRect;
+		mapping: ActionMapping;
+	} | null = $state(null);
+
+	function handleActionEditChange(newText: string, newHref: string) {
+		if (!actionEdit) return;
+		const block = blocks[actionEdit.blockIndex];
+		if (block.type !== 'rune') return;
+		const rb = block as RuneBlock;
+
+		const newInner = applyActionEdit(rb.innerContent, actionEdit.mapping, newText, newHref);
+		const updated: RuneBlock = { ...rb, innerContent: newInner, source: '' };
+		updated.source = rebuildRuneSource(updated);
+
+		handleUpdateBlock(actionEdit.blockIndex, updated);
+	}
+
+	function handleActionRemove() {
+		if (!actionEdit) return;
+		const blockIndex = actionEdit.blockIndex;
+		const block = blocks[blockIndex];
+		if (block.type !== 'rune') return;
+		const rb = block as RuneBlock;
+
+		// Remove the entire list item line from the inner content
+		const newInner = rb.innerContent.replace(actionEdit.mapping.source + '\n', '').replace(actionEdit.mapping.source, '');
+		const updated: RuneBlock = { ...rb, innerContent: newInner, source: '' };
+		updated.source = rebuildRuneSource(updated);
+
+		actionEdit = null;
+		handleUpdateBlock(blockIndex, updated);
+	}
+
+	function closeActionEdit() {
+		actionEdit = null;
+	}
+
+	// ── Command (code block) editing ──────────────────────────
+
+	let commandEdit: {
+		blockIndex: number;
+		rect: DOMRect;
+		mapping: CommandMapping;
+	} | null = $state(null);
+
+	function handleCommandEditChange(newCode: string) {
+		if (!commandEdit) return;
+		const block = blocks[commandEdit.blockIndex];
+		if (block.type !== 'rune') return;
+		const rb = block as RuneBlock;
+
+		const newInner = applyCommandEdit(rb.innerContent, commandEdit.mapping, newCode);
+		const updated: RuneBlock = { ...rb, innerContent: newInner, source: '' };
+		updated.source = rebuildRuneSource(updated);
+
+		handleUpdateBlock(commandEdit.blockIndex, updated);
+	}
+
+	function handleCommandRemove() {
+		if (!commandEdit) return;
+		const blockIndex = commandEdit.blockIndex;
+		const block = blocks[blockIndex];
+		if (block.type !== 'rune') return;
+		const rb = block as RuneBlock;
+
+		// Remove the entire fenced code block from the inner content
+		const newInner = rb.innerContent.replace(commandEdit.mapping.source + '\n', '').replace(commandEdit.mapping.source, '');
+		const updated: RuneBlock = { ...rb, innerContent: newInner, source: '' };
+		updated.source = rebuildRuneSource(updated);
+
+		commandEdit = null;
+		handleUpdateBlock(blockIndex, updated);
+	}
+
+	function closeCommandEdit() {
+		commandEdit = null;
+	}
+
+	function handleLanguageChange(newLanguage: string) {
+		if (!commandEdit) return;
+		const block = blocks[commandEdit.blockIndex];
+		if (block.type !== 'rune') return;
+		const rb = block as RuneBlock;
+
+		const newInner = applyLanguageEdit(rb.innerContent, commandEdit.mapping, newLanguage);
+		const updated: RuneBlock = { ...rb, innerContent: newInner, source: '' };
+		updated.source = rebuildRuneSource(updated);
+
+		// Update the mapping to reflect the new language and opener
+		const afterDelimiter = commandEdit.mapping.opener.slice(commandEdit.mapping.delimiter.length);
+		const infoString = afterDelimiter.replace(/^\w*/, '').trim();
+		const newOpener = commandEdit.mapping.delimiter + newLanguage + (infoString ? ' ' + infoString : '');
+		const newSource = newOpener + '\n' + commandEdit.mapping.code + '\n' + commandEdit.mapping.delimiter;
+
+		commandEdit = {
+			...commandEdit,
+			mapping: {
+				...commandEdit.mapping,
+				language: newLanguage,
+				opener: newOpener,
+				source: newSource,
+			},
+		};
+
+		handleUpdateBlock(commandEdit.blockIndex, updated);
+	}
+
+	// ── Image editing ────────────────────────────────────────────
+
+	let imageEdit: {
+		blockIndex: number;
+		mapping: ImageMapping;
+	} | null = $state(null);
+
+	function handleImageEditChange(newSrc: string, newAlt: string) {
+		if (!imageEdit) return;
+		const block = blocks[imageEdit.blockIndex];
+		if (block.type !== 'rune') return;
+		const rb = block as RuneBlock;
+
+		const newInner = applyImageEdit(rb.innerContent, imageEdit.mapping, newAlt, newSrc);
+		const updated: RuneBlock = { ...rb, innerContent: newInner, source: '' };
+		updated.source = rebuildRuneSource(updated);
+
+		handleUpdateBlock(imageEdit.blockIndex, updated);
+	}
+
+	function handleImageRemove() {
+		if (!imageEdit) return;
+		const blockIndex = imageEdit.blockIndex;
+		const block = blocks[blockIndex];
+		if (block.type !== 'rune') return;
+		const rb = block as RuneBlock;
+
+		const newInner = rb.innerContent.replace(imageEdit.mapping.source + '\n', '').replace(imageEdit.mapping.source, '');
+		const updated: RuneBlock = { ...rb, innerContent: newInner, source: '' };
+		updated.source = rebuildRuneSource(updated);
+
+		imageEdit = null;
+		handleUpdateBlock(blockIndex, updated);
+	}
+
+	function closeImageEdit() {
+		imageEdit = null;
+	}
+
+	// ── Icon editing ────────────────────────────────────────────
+
+	let iconEdit: {
+		blockIndex: number;
+		mapping: IconMapping;
+	} | null = $state(null);
+
+	function handleIconEditChange(newIconName: string) {
+		if (!iconEdit) return;
+		const block = blocks[iconEdit.blockIndex];
+		if (block.type !== 'rune') return;
+		const rb = block as RuneBlock;
+
+		const newInner = applyIconEdit(rb.innerContent, iconEdit.mapping, newIconName);
+		const updated: RuneBlock = { ...rb, innerContent: newInner, source: '' };
+		updated.source = rebuildRuneSource(updated);
+
+		handleUpdateBlock(iconEdit.blockIndex, updated);
+	}
+
+	function closeIconEdit() {
+		iconEdit = null;
+	}
+
+	// ── Field edit from Structure tab ──────────────────────────────
+
+	function handleFieldEdit(dataName: string, inlineSource: string, rect: DOMRect, mapping: SectionMapping) {
+		if (activeIndex === null) return;
+		commandEdit = null;
+		inlineEdit = {
+			blockIndex: activeIndex,
+			dataName,
+			inlineSource,
+			rect,
+			mapping,
+		};
+	}
+
+	function handleFieldCodeEdit(code: string, language: string, rect: DOMRect, mapping: CommandMapping) {
+		if (activeIndex === null) return;
+		inlineEdit = null;
+		commandEdit = {
+			blockIndex: activeIndex,
+			rect,
+			mapping,
+		};
+	}
+
 	// Group runes by category for the insert menu
 	let runesByCategory = $derived.by(() => {
 		const map = new Map<string, RuneInfo[]>();
@@ -350,7 +734,7 @@
 	});
 </script>
 
-<svelte:window onkeydown={handleKeydown} />
+<svelte:window onkeydown={handleKeydown} onresize={handleResize} />
 
 <div class="block-editor">
 	{#if blocks.length === 0 && !readOnly}
@@ -366,10 +750,10 @@
 		</div>
 	{/if}
 
-	<div class="block-editor__stage" class:editing={!readOnly && (activeIndex !== null || editingFrontmatter)}>
+	<div class="block-editor__stage">
 		<!-- Scrollable block list -->
 		<div class="block-editor__scroll">
-			<div class="block-editor__list-wrap">
+			<div class="block-editor__list-wrap" onscroll={handleListScroll}>
 				<!-- Frontmatter summary header (blocks mode only) -->
 				{#if !readOnly}
 					<div class="block-editor__fm-header">
@@ -382,7 +766,7 @@
 						<button
 							class="block-editor__fm-edit"
 							class:active={editingFrontmatter}
-							onclick={toggleFrontmatter}
+							onclick={(e) => toggleFrontmatter(e)}
 							title="Edit frontmatter"
 						>
 							<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
@@ -414,6 +798,9 @@
 								{communityPostTransforms}
 								{communityStyles}
 								{aggregated}
+								{readOnly}
+								onsectionclick={readOnly ? undefined : (info) => handleSectionClick(i, info)}
+								onruneclick={readOnly ? undefined : (info) => handleRuneClick(i, info.x, info.y, info.nestedRuneIndex)}
 								ondragstart={readOnly ? undefined : (e) => handleDragStart(e, i)}
 								ondragover={readOnly ? undefined : (e) => handleDragOver(e, i)}
 								ondrop={readOnly ? undefined : (e) => handleDrop(e, i)}
@@ -446,7 +833,7 @@
 							<!-- Block label — slides in from right on hover, pinned when active -->
 							<button
 								class="block-editor__hover-label"
-								onclick={() => toggleBlock(i)}
+								onclick={(e) => toggleBlock(i, e.clientX, e.clientY)}
 								aria-pressed={activeIndex === i}
 							>
 								{blockLabel(block)}
@@ -457,30 +844,39 @@
 			</div>
 		</div>
 
-		<!-- Edit panel — slides in from the right (blocks mode only) -->
-		{#if !readOnly}
-			<div class="block-editor__edit-panel">
-				{#if editingFrontmatter}
-					<FrontmatterEditPanel
-						onclose={() => { editingFrontmatter = false; }}
-					/>
-				{:else if activeIndex !== null && blocks[activeIndex]}
-					{#key activeIndex}
-						<BlockEditPanel
-							block={blocks[activeIndex]}
-							{runeMap}
-							runes={() => runes}
-							{aggregated}
-							onupdate={(updated) => handleUpdateBlock(activeIndex!, updated)}
-							onremove={() => { const idx = activeIndex!; activeIndex = null; handleRemoveBlock(idx); }}
-							onclose={() => { activeIndex = null; }}
-						/>
-					{/key}
-				{/if}
-			</div>
-		{/if}
 	</div>
 
+	<!-- Popover edit panel — anchored to click position -->
+	{#if !readOnly && (activeIndex !== null || editingFrontmatter)}
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class="block-editor__popover-backdrop"
+			onmousedown={() => { activeIndex = null; editingFrontmatter = false; anchorPoint = null; pendingRuneIndex = null; }}
+		></div>
+		<div class="block-editor__popover" style={popoverStyle}>
+			{#if editingFrontmatter}
+				<FrontmatterEditPanel
+					onclose={() => { editingFrontmatter = false; anchorPoint = null; }}
+				/>
+			{:else if activeIndex !== null && blocks[activeIndex]}
+				{#key editSessionId}
+					<BlockEditPanel
+						block={blocks[activeIndex]}
+						{runeMap}
+						runes={() => runes}
+						{aggregated}
+						initialRuneIndex={pendingRuneIndex}
+						onupdate={(updated) => handleUpdateBlock(activeIndex!, updated)}
+						onremove={() => { const idx = activeIndex!; activeIndex = null; anchorPoint = null; pendingRuneIndex = null; handleRemoveBlock(idx); }}
+						onclose={() => { activeIndex = null; anchorPoint = null; pendingRuneIndex = null; }}
+						oneditfield={handleFieldEdit}
+						oneditcode={handleFieldCodeEdit}
+					/>
+				{/key}
+			{/if}
+		</div>
+	{/if}
+
 	{#if showInsertMenu}
 		<InsertBlockDialog
 			{runes}
@@ -489,6 +885,58 @@
 			onclose={closeInsertMenu}
 		/>
 	{/if}
+
+	{#if inlineEdit}
+		<InlineEditPopover
+			anchorRect={inlineEdit.rect}
+			dataName={inlineEdit.dataName}
+			inlineSource={inlineEdit.inlineSource}
+			onchange={handleInlineEditChange}
+			onclose={closeInlineEdit}
+		/>
+	{/if}
+
+	{#if actionEdit}
+		<ActionEditPopover
+			anchorRect={actionEdit.rect}
+			text={actionEdit.mapping.text}
+			href={actionEdit.mapping.href}
+			onchange={handleActionEditChange}
+			onremove={handleActionRemove}
+			onclose={closeActionEdit}
+		/>
+	{/if}
+
+	{#if commandEdit}
+		<CodeEditPopover
+			anchorRect={commandEdit.rect}
+			code={commandEdit.mapping.code}
+			language={commandEdit.mapping.language}
+			onchange={handleCommandEditChange}
+			onlanguagechange={handleLanguageChange}
+			onremove={handleCommandRemove}
+			onclose={closeCommandEdit}
+		/>
+	{/if}
+
+	{#if imageEdit}
+		<ImageEditPopover
+			currentSrc={imageEdit.mapping.src}
+			currentAlt={imageEdit.mapping.alt}
+			onchange={(src, alt) => { handleImageEditChange(src, alt); closeImageEdit(); }}
+			onremove={handleImageRemove}
+			onclose={closeImageEdit}
+		/>
+	{/if}
+
+	{#if iconEdit}
+		<IconPickerPopover
+			icons={themeConfig?.icons ?? {}}
+			currentIcon={iconEdit.mapping.name}
+			onchange={(name) => { handleIconEditChange(name); closeIconEdit(); }}
+			onclose={closeIconEdit}
+		/>
+	{/if}
 </div>
 
 
@@ -515,7 +963,6 @@
 		min-height: 0;
 		display: flex;
 		flex-direction: column;
-		transition: margin-right var(--ed-transition-slow);
 	}
 
 	.block-editor__list-wrap {
@@ -697,24 +1144,38 @@
 		color: white;
 	}
 
-	/* Edit panel — fixed to right edge of viewport, outside the card */
-	.block-editor__edit-panel {
+	/* Popover backdrop — transparent click target */
+	.block-editor__popover-backdrop {
 		position: fixed;
-		top: calc(60px + var(--ed-space-4));
-		right: 0;
-		bottom: 0;
-		width: 480px;
-		overflow-y: auto;
+		inset: 0;
+		z-index: 9;
+	}
+
+	/* Popover container — anchored to block card */
+	.block-editor__popover {
+		position: fixed;
+		width: 420px;
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
 		background: var(--ed-surface-0);
-		border-radius: var(--ed-radius-lg) 0 0 0;
-		box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-		transform: translateX(100%);
-		transition: transform var(--ed-transition-slow);
+		border-radius: var(--ed-radius-lg);
+		border: 1px solid var(--ed-border-default);
+		box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
+					0 8px 10px -6px rgba(0, 0, 0, 0.1);
 		z-index: 10;
+		animation: popover-enter 0.15s ease-out;
 	}
 
-	.block-editor__stage.editing .block-editor__edit-panel {
-		transform: translateX(0);
+	@keyframes popover-enter {
+		from {
+			opacity: 0;
+			transform: translateY(4px) scale(0.98);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0) scale(1);
+		}
 	}
 
 	/* Empty state */