@refrakt-md/editor 0.8.1 → 0.8.3

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

@@ -9,20 +9,32 @@
 		blockLabel,
 		extractRuneInner,
 		rebuildRuneSource,
+		rebuildHeadingSource,
+		rebuildFenceSource,
+		groupIntoEditorBlocks,
 		type ParsedBlock,
 		type RuneBlock,
+		type HeadingBlock,
+		type FenceBlock,
+		type EditorBlock,
+		type ProseBlock,
 	} from '../editor/block-parser.js';
-	import { findSectionMapping, applySectionEdit, findActionMapping, applyActionEdit, findCommandMapping, applyCommandEdit, type SectionMapping, type ActionMapping, type CommandMapping } from '../editor/section-mapper.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 ProseBlockCard from './ProseBlockCard.svelte';
+	import type { ProseElementClickInfo } from './ProseBlockCard.svelte';
 	import BlockEditPanel from './BlockEditPanel.svelte';
+	import ProseEditPanel from './ProseEditPanel.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;
@@ -112,6 +124,7 @@
 			editingFrontmatter = false;
 			anchorPoint = null;
 			inlineEdit = null;
+			proseInlineEdit = null;
 		}
 	});
 
@@ -122,6 +135,162 @@
 		onchange(newSource);
 	}
 
+	// ── Prose block grouping ─────────────────────────────────────
+
+	let editorBlocks: EditorBlock[] = $derived(groupIntoEditorBlocks(blocks));
+
+	/** Map an editor block index to the range of flat block indices it covers */
+	function editorBlockToFlatRange(editorIndex: number): [number, number] {
+		const eb = editorBlocks[editorIndex];
+		if (!eb) return [0, 0];
+		if (eb.type === 'prose') {
+			const firstChild = eb.children[0];
+			const lastChild = eb.children[eb.children.length - 1];
+			const start = blocks.indexOf(firstChild);
+			const end = blocks.indexOf(lastChild);
+			return [start, end];
+		}
+		// Rune block — find its position in the flat array
+		const idx = blocks.indexOf(eb as ParsedBlock);
+		return [idx, idx];
+	}
+
+	/** Map a flat block index to the corresponding editor block index */
+	function flatToEditorIndex(flatIndex: number): number {
+		let offset = 0;
+		for (let i = 0; i < editorBlocks.length; i++) {
+			const eb = editorBlocks[i];
+			const count = eb.type === 'prose' ? eb.children.length : 1;
+			if (flatIndex < offset + count) return i;
+			offset += count;
+		}
+		return editorBlocks.length - 1;
+	}
+
+	// ── Prose block operations ───────────────────────────────────
+
+	/** Update a prose block from the ProseEditPanel (structure reorder, content edit) */
+	function handleUpdateProseBlock(editorIndex: number, updated: ProseBlock) {
+		const [startFlat, endFlat] = editorBlockToFlatRange(editorIndex);
+		const oldChildren = blocks.slice(startFlat, endFlat + 1);
+		reconcileIds(oldChildren, updated.children);
+		blocks = [
+			...blocks.slice(0, startFlat),
+			...updated.children,
+			...blocks.slice(endFlat + 1),
+		];
+		syncToSource();
+	}
+
+	/** Handle click on a prose element (heading, paragraph, etc.) for inline editing */
+	function handleProseSectionClick(editorIndex: number, info: ProseElementClickInfo) {
+		const eb = editorBlocks[editorIndex];
+		if (!eb || eb.type !== 'prose') return;
+
+		const child = eb.children[info.childIndex];
+		if (!child) return;
+
+		const [startFlat] = editorBlockToFlatRange(editorIndex);
+		const flatIndex = startFlat + info.childIndex;
+
+		if (child.type === 'fence') {
+			const fb = child as FenceBlock;
+			const code = fb.code;
+			const language = fb.language;
+			const opener = child.source.split('\n')[0];
+			const delimMatch = opener.match(/^(`{3,}|~{3,})/);
+			const delimiter = delimMatch ? delimMatch[1] : '```';
+			commandEdit = {
+				blockIndex: flatIndex,
+				rect: info.rect,
+				mapping: { source: child.source, code, language, opener, delimiter },
+			};
+			return;
+		}
+
+		// For headings and paragraphs: inline text editing
+		const source = child.source.trim();
+		let prefix = '';
+		let inlineContent = source;
+
+		if (child.type === 'heading') {
+			const match = source.match(/^(#{1,6}\s+)(.*)/);
+			if (match) {
+				prefix = match[1];
+				inlineContent = match[2];
+			}
+		} else if (child.type === 'quote') {
+			const match = source.match(/^(>\s*)(.*)/);
+			if (match) {
+				prefix = match[1];
+				inlineContent = match[2];
+			}
+		}
+
+		const mapping: SectionMapping = {
+			dataName: child.type,
+			text: stripInlineMarkdown(inlineContent),
+			source,
+			sourcePrefix: prefix,
+			inlineSource: inlineContent,
+		};
+
+		proseInlineEdit = {
+			editorIndex,
+			childIndex: info.childIndex,
+			flatIndex,
+			inlineSource: inlineContent,
+			rect: info.rect,
+			mapping,
+		};
+	}
+
+	// ── Prose inline edit state ──────────────────────────────────
+
+	let proseInlineEdit: {
+		editorIndex: number;
+		childIndex: number;
+		flatIndex: number;
+		inlineSource: string;
+		rect: DOMRect;
+		mapping: SectionMapping;
+	} | null = $state(null);
+
+	function handleProseInlineEditChange(newInlineSource: string) {
+		if (!proseInlineEdit) return;
+		const child = blocks[proseInlineEdit.flatIndex];
+		if (!child) return;
+
+		const newSource = proseInlineEdit.mapping.sourcePrefix + newInlineSource;
+		let updated: ParsedBlock;
+
+		if (child.type === 'heading') {
+			const hb = child as HeadingBlock;
+			updated = { ...hb, text: newInlineSource, source: '' } as HeadingBlock;
+			(updated as HeadingBlock).source = rebuildHeadingSource(updated as HeadingBlock);
+		} else {
+			updated = { ...child, source: newSource };
+		}
+
+		// Update the mapping for subsequent edits
+		proseInlineEdit = {
+			...proseInlineEdit,
+			inlineSource: newInlineSource,
+			mapping: {
+				...proseInlineEdit.mapping,
+				text: stripInlineMarkdown(newInlineSource),
+				source: newSource,
+				inlineSource: newInlineSource,
+			},
+		};
+
+		handleUpdateBlock(proseInlineEdit.flatIndex, updated);
+	}
+
+	function closeProseInlineEdit() {
+		proseInlineEdit = null;
+	}
+
 	// ── Frontmatter summary for visual mode header ──────────────
 
 	let editingFrontmatter = $state(false);
@@ -144,6 +313,33 @@
 	const POPOVER_WIDTH = 420;
 	const POPOVER_GAP = 12;
 
+	/** Drag the popover by its header */
+	function handlePopoverDragStart(e: MouseEvent) {
+		const header = (e.target as HTMLElement).closest('.edit-panel__header');
+		if (!header || (e.target as HTMLElement).closest('button')) return;
+
+		e.preventDefault();
+		const popoverEl = e.currentTarget as HTMLElement;
+		const rect = popoverEl.getBoundingClientRect();
+		const startX = e.clientX;
+		const startY = e.clientY;
+		const origLeft = rect.left;
+		const origTop = rect.top;
+
+		function onMove(ev: MouseEvent) {
+			popoverEl.style.left = `${origLeft + (ev.clientX - startX)}px`;
+			popoverEl.style.top = `${origTop + (ev.clientY - startY)}px`;
+		}
+
+		function onUp() {
+			window.removeEventListener('mousemove', onMove);
+			window.removeEventListener('mouseup', onUp);
+		}
+
+		window.addEventListener('mousemove', onMove);
+		window.addEventListener('mouseup', onUp);
+	}
+
 	let popoverStyle = $derived.by(() => {
 		if (!anchorPoint) return '';
 
@@ -169,24 +365,27 @@
 		return `left: ${left}px; top: ${top}px; max-height: min(600px, ${maxH}px);`;
 	});
 
-	function toggleBlock(index: number, x: number, y: number) {
+	function toggleBlock(editorIndex: number, x: number, y: number) {
 		editingFrontmatter = false;
-		if (activeIndex === index) {
+		const eb = editorBlocks[editorIndex];
+		if (!eb) return;
+
+		if (activeIndex === editorIndex) {
 			activeIndex = null;
 			anchorPoint = null;
 			pendingRuneIndex = null;
 		} else {
 			editSessionId++;
-			activeIndex = index;
+			activeIndex = editorIndex;
 			anchorPoint = { x, y };
 			pendingRuneIndex = null;
 		}
 	}
 
-	function handleRuneClick(index: number, x: number, y: number, nestedRuneIndex?: number) {
+	function handleRuneClick(editorIndex: number, x: number, y: number, nestedRuneIndex?: number) {
 		editingFrontmatter = false;
 		editSessionId++;
-		activeIndex = index;
+		activeIndex = editorIndex;
 		anchorPoint = { x, y };
 		pendingRuneIndex = nestedRuneIndex ?? null;
 	}
@@ -205,6 +404,10 @@
 	function handleKeydown(e: KeyboardEvent) {
 		if (readOnly) return;
 		if (e.key === 'Escape') {
+			if (proseInlineEdit) {
+				closeProseInlineEdit();
+				return;
+			}
 			if (activeIndex !== null || editingFrontmatter) {
 				activeIndex = null;
 				editingFrontmatter = false;
@@ -229,21 +432,24 @@
 
 	// ── Block operations ─────────────────────────────────────────
 
-	function handleUpdateBlock(index: number, updated: ParsedBlock) {
-		blocks = blocks.map((b, i) => (i === index ? updated : b));
+	/** Update a block by its flat index in the blocks array */
+	function handleUpdateBlock(flatIndex: number, updated: ParsedBlock) {
+		blocks = blocks.map((b, i) => (i === flatIndex ? updated : b));
 		syncToSource();
 	}
 
-	function handleRemoveBlock(index: number) {
+	/** Remove a block by its editor block index */
+	function handleRemoveEditorBlock(editorIndex: number) {
+		const [startFlat, endFlat] = editorBlockToFlatRange(editorIndex);
 		// Adjust activeIndex
 		if (activeIndex !== null) {
-			if (activeIndex === index) {
+			if (activeIndex === editorIndex) {
 				activeIndex = null;
-			} else if (activeIndex > index) {
+			} else if (activeIndex > editorIndex) {
 				activeIndex--;
 			}
 		}
-		blocks = blocks.filter((_, i) => i !== index);
+		blocks = [...blocks.slice(0, startFlat), ...blocks.slice(endFlat + 1)];
 		syncToSource();
 	}
 
@@ -274,17 +480,32 @@
 	function handleDrop(e: DragEvent, index: number) {
 		e.preventDefault();
 		if (dragIndex !== null && dragIndex !== index) {
-			const moved = blocks[dragIndex];
-			const next = blocks.filter((_, i) => i !== dragIndex);
-			next.splice(index, 0, moved);
-			blocks = next;
+			// Get the flat block ranges for source and destination
+			const [srcStart, srcEnd] = editorBlockToFlatRange(dragIndex);
+			const movedBlocks = blocks.slice(srcStart, srcEnd + 1);
+
+			// Remove the source blocks
+			const without = [...blocks.slice(0, srcStart), ...blocks.slice(srcEnd + 1)];
+
+			// Find the insertion point in the filtered array
+			let insertAt: number;
+			if (index >= editorBlocks.length) {
+				insertAt = without.length;
+			} else {
+				// Recalculate target position in the reduced array
+				const [tgtStart] = editorBlockToFlatRange(index);
+				// Adjust for removed blocks if source was before target
+				insertAt = tgtStart > srcEnd ? tgtStart - movedBlocks.length : tgtStart;
+			}
+
+			without.splice(insertAt, 0, ...movedBlocks);
+			blocks = without;
 
 			// Update activeIndex to follow the active block
 			if (activeIndex !== null) {
 				if (activeIndex === dragIndex) {
 					activeIndex = index > dragIndex ? index - 1 : index;
 				} else {
-					// Adjust if the move shifts the active block's position
 					let newActive = activeIndex;
 					if (dragIndex < activeIndex && index >= activeIndex) {
 						newActive--;
@@ -408,12 +629,29 @@
 			}
 		}
 
-		const pos = insertAtIndex ?? blocks.length;
-		blocks = [...blocks.slice(0, pos), newBlock, ...blocks.slice(pos)];
+		// Convert editor block index to flat block insertion position
+		const editorPos = insertAtIndex ?? editorBlocks.length;
+		let flatPos: number;
+		if (editorPos >= editorBlocks.length) {
+			flatPos = blocks.length;
+		} else {
+			const [start] = editorBlockToFlatRange(editorPos);
+			flatPos = start;
+		}
+
+		blocks = [...blocks.slice(0, flatPos), newBlock, ...blocks.slice(flatPos)];
 		insertAtIndex = null;
 		showInsertMenu = false;
 		editingFrontmatter = false;
-		activeIndex = pos;
+		// Set activeIndex for rune blocks; for prose blocks the new element merges into a prose block
+		if (type === 'rune') {
+			// Find the new block's editor index after re-grouping
+			const newEditorBlocks = groupIntoEditorBlocks(blocks);
+			activeIndex = newEditorBlocks.findIndex(eb => eb.type === 'rune' && eb === blocks[flatPos]);
+			if (activeIndex === -1) activeIndex = null;
+		} else {
+			activeIndex = null;
+		}
 		syncToSource();
 	}
 
@@ -427,10 +665,15 @@
 		mapping: SectionMapping;
 	} | null = $state(null);
 
-	function handleSectionClick(index: number, info: SectionClickInfo) {
-		const block = blocks[index];
+	function handleSectionClick(editorIndex: number, info: SectionClickInfo) {
+		const eb = editorBlocks[editorIndex];
+		if (!eb || eb.type !== 'rune') return;
+		const [flatIndex] = editorBlockToFlatRange(editorIndex);
+		const block = blocks[flatIndex];
 		if (block.type !== 'rune') return;
 		const rb = block as RuneBlock;
+		// Use flatIndex for all block operations below
+		const index = flatIndex;
 
 		if (info.editType === 'link') {
 			const mapping = findActionMapping(rb.innerContent, info.text, info.href ?? '');
@@ -456,6 +699,30 @@
 			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;
@@ -550,6 +817,16 @@
 	function handleCommandEditChange(newCode: string) {
 		if (!commandEdit) return;
 		const block = blocks[commandEdit.blockIndex];
+
+		if (block.type === 'fence') {
+			// Direct fence block (from prose section)
+			const fb = block as FenceBlock;
+			const updated: FenceBlock = { ...fb, code: newCode, source: '' };
+			updated.source = rebuildFenceSource(updated);
+			handleUpdateBlock(commandEdit.blockIndex, updated);
+			return;
+		}
+
 		if (block.type !== 'rune') return;
 		const rb = block as RuneBlock;
 
@@ -564,6 +841,15 @@
 		if (!commandEdit) return;
 		const blockIndex = commandEdit.blockIndex;
 		const block = blocks[blockIndex];
+
+		if (block.type === 'fence') {
+			// Direct fence block — remove entirely
+			commandEdit = null;
+			blocks = blocks.filter((_, i) => i !== blockIndex);
+			syncToSource();
+			return;
+		}
+
 		if (block.type !== 'rune') return;
 		const rb = block as RuneBlock;
 
@@ -580,12 +866,127 @@
 		commandEdit = null;
 	}
 
+	function handleLanguageChange(newLanguage: string) {
+		if (!commandEdit) return;
+		const block = blocks[commandEdit.blockIndex];
+
+		if (block.type === 'fence') {
+			// Direct fence block (from prose section)
+			const fb = block as FenceBlock;
+			const updated: FenceBlock = { ...fb, language: newLanguage, source: '' };
+			updated.source = rebuildFenceSource(updated);
+
+			// Update the mapping
+			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);
+			return;
+		}
+
+		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;
+		const [flatIndex] = editorBlockToFlatRange(activeIndex);
+		commandEdit = null;
 		inlineEdit = {
-			blockIndex: activeIndex,
+			blockIndex: flatIndex,
 			dataName,
 			inlineSource,
 			rect,
@@ -593,6 +994,17 @@
 		};
 	}
 
+	function handleFieldCodeEdit(code: string, language: string, rect: DOMRect, mapping: CommandMapping) {
+		if (activeIndex === null) return;
+		const [flatIndex] = editorBlockToFlatRange(activeIndex);
+		inlineEdit = null;
+		commandEdit = {
+			blockIndex: flatIndex,
+			rect,
+			mapping,
+		};
+	}
+
 	// Group runes by category for the insert menu
 	let runesByCategory = $derived.by(() => {
 		const map = new Map<string, RuneInfo[]>();
@@ -648,7 +1060,7 @@
 					</div>
 				{/if}
 
-				{#each blocks as block, i (block.id)}
+				{#each editorBlocks as eb, i (eb.id)}
 					<div
 						class="block-editor__row"
 						class:hovered={!readOnly && hoveredIndex === i}
@@ -659,23 +1071,43 @@
 						onmouseleave={() => { if (!readOnly && hoveredIndex === i) hoveredIndex = null; }}
 					>
 						<div class="block-editor__block-cell">
-							<BlockCard
-								{block}
-								{themeConfig}
-								{themeCss}
-								{highlightCss}
-								{highlightTransform}
-								{communityTags}
-								{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)}
-							/>
+							{#if eb.type === 'prose'}
+								<ProseBlockCard
+									block={eb}
+									{themeConfig}
+									{themeCss}
+									{highlightCss}
+									{highlightTransform}
+									{communityTags}
+									{communityPostTransforms}
+									{communityStyles}
+									{aggregated}
+									{readOnly}
+									onsectionclick={readOnly ? undefined : (info) => handleProseSectionClick(i, info)}
+									onblockclick={readOnly ? undefined : (info) => toggleBlock(i, info.x, info.y)}
+									ondragstart={readOnly ? undefined : (e) => handleDragStart(e, i)}
+									ondragover={readOnly ? undefined : (e) => handleDragOver(e, i)}
+									ondrop={readOnly ? undefined : (e) => handleDrop(e, i)}
+								/>
+							{:else}
+								<BlockCard
+									block={eb}
+									{themeConfig}
+									{themeCss}
+									{highlightCss}
+									{highlightTransform}
+									{communityTags}
+									{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)}
+								/>
+							{/if}
 						</div>
 						{#if !readOnly && showInsertMenuProp}
 							<!-- Insert markers — top and bottom edges -->
@@ -707,7 +1139,7 @@
 								onclick={(e) => toggleBlock(i, e.clientX, e.clientY)}
 								aria-pressed={activeIndex === i}
 							>
-								{blockLabel(block)}
+								{blockLabel(eb)}
 							</button>
 						{/if}
 					</div>
@@ -724,23 +1156,37 @@
 			class="block-editor__popover-backdrop"
 			onmousedown={() => { activeIndex = null; editingFrontmatter = false; anchorPoint = null; pendingRuneIndex = null; }}
 		></div>
-		<div class="block-editor__popover" style={popoverStyle}>
+		<div class="block-editor__popover" style={popoverStyle} onmousedown={handlePopoverDragStart}>
 			{#if editingFrontmatter}
 				<FrontmatterEditPanel
 					onclose={() => { editingFrontmatter = false; anchorPoint = null; }}
 				/>
-			{:else if activeIndex !== null && blocks[activeIndex]}
+			{:else if activeIndex !== null && editorBlocks[activeIndex]?.type === 'rune'}
+				{@const activeBlock = blocks[editorBlockToFlatRange(activeIndex)[0]]}
 				{#key editSessionId}
 					<BlockEditPanel
-						block={blocks[activeIndex]}
+						block={activeBlock}
 						{runeMap}
 						runes={() => runes}
 						{aggregated}
 						initialRuneIndex={pendingRuneIndex}
-						onupdate={(updated) => handleUpdateBlock(activeIndex!, updated)}
-						onremove={() => { const idx = activeIndex!; activeIndex = null; anchorPoint = null; pendingRuneIndex = null; handleRemoveBlock(idx); }}
+						onupdate={(updated) => handleUpdateBlock(editorBlockToFlatRange(activeIndex!)[0], updated)}
+						onremove={() => { const idx = activeIndex!; activeIndex = null; anchorPoint = null; pendingRuneIndex = null; handleRemoveEditorBlock(idx); }}
 						onclose={() => { activeIndex = null; anchorPoint = null; pendingRuneIndex = null; }}
 						oneditfield={handleFieldEdit}
+						oneditcode={handleFieldCodeEdit}
+					/>
+				{/key}
+			{:else if activeIndex !== null && editorBlocks[activeIndex]?.type === 'prose'}
+				{@const proseBlock = editorBlocks[activeIndex] as ProseBlock}
+				{#key editSessionId}
+					<ProseEditPanel
+						block={proseBlock}
+						runes={() => runes}
+						{aggregated}
+						onupdate={(updated) => handleUpdateProseBlock(activeIndex!, updated)}
+						onremove={() => { const idx = activeIndex!; activeIndex = null; anchorPoint = null; handleRemoveEditorBlock(idx); }}
+						onclose={() => { activeIndex = null; anchorPoint = null; }}
 					/>
 				{/key}
 			{/if}
@@ -783,10 +1229,40 @@
 			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}
+
+	{#if proseInlineEdit}
+		<InlineEditPopover
+			anchorRect={proseInlineEdit.rect}
+			dataName={proseInlineEdit.mapping.dataName}
+			inlineSource={proseInlineEdit.inlineSource}
+			onchange={handleProseInlineEditChange}
+			onclose={closeProseInlineEdit}
+		/>
+	{/if}
 </div>
 
 
@@ -1005,7 +1481,9 @@
 	.block-editor__popover {
 		position: fixed;
 		width: 420px;
-		overflow-y: auto;
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
 		background: var(--ed-surface-0);
 		border-radius: var(--ed-radius-lg);
 		border: 1px solid var(--ed-border-default);
@@ -1015,6 +1493,14 @@
 		animation: popover-enter 0.15s ease-out;
 	}
 
+	.block-editor__popover :global(.edit-panel__header) {
+		cursor: grab;
+	}
+
+	.block-editor__popover :global(.edit-panel__header):active {
+		cursor: grabbing;
+	}
+
 	@keyframes popover-enter {
 		from {
 			opacity: 0;