@refrakt-md/editor 0.8.1 → 0.8.2

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

@@ -19,9 +19,14 @@
 		removeFieldContent,
 		appendListItem,
 		removeListItem,
+		reorderListItem,
+		appendGreedyItem,
+		removeGreedyItem,
+		reorderGreedyItem,
+		splitListItems,
 	} from '../editor/block-parser.js';
-	import { resolveContentStructure } from '../editor/content-model-resolver.js';
-	import type { SectionMapping } from '../editor/section-mapper.js';
+	import { resolveContentStructure, type ResolvedField } from '../editor/content-model-resolver.js';
+	import type { SectionMapping, CommandMapping } from '../editor/section-mapper.js';
 	import { stripInlineMarkdown } from '../editor/inline-markdown.js';
 	import RuneAttributes from './RuneAttributes.svelte';
 	import ContentTree from './ContentTree.svelte';
@@ -39,9 +44,10 @@
 		onremove: () => void;
 		onclose: () => void;
 		oneditfield?: (dataName: string, inlineSource: string, rect: DOMRect, mapping: SectionMapping) => void;
+		oneditcode?: (code: string, language: string, rect: DOMRect, mapping: CommandMapping) => void;
 	}
 
-	let { block, runeMap, runes, aggregated = {}, initialRuneIndex = null, onupdate, onremove, onclose, oneditfield }: Props = $props();
+	let { block, runeMap, runes, aggregated = {}, initialRuneIndex = null, onupdate, onremove, onclose, oneditfield, oneditcode }: Props = $props();
 
 	let label = $derived(blockLabel(block));
 
@@ -220,18 +226,54 @@
 		applyFieldChange(content => removeFieldContent(content, resolvedStructure!, fieldName, zoneName));
 	}
 
+	function findResolvedField(fieldName: string, zoneName?: string): ResolvedField | null {
+		if (!resolvedStructure) return null;
+		if (resolvedStructure.type === 'sequence') {
+			return resolvedStructure.fields.find(f => f.name === fieldName) ?? null;
+		}
+		if (resolvedStructure.type === 'delimited' && zoneName) {
+			const zone = resolvedStructure.zones.find(z => z.name === zoneName);
+			return zone?.fields.find(f => f.name === fieldName) ?? null;
+		}
+		return null;
+	}
+
+	function isGreedyItemField(field: ResolvedField): boolean {
+		return field.greedy && field.match !== 'any';
+	}
+
 	function handleAppendItem(fieldName: string, zoneName?: string) {
 		if (!resolvedStructure) return;
-		applyFieldChange(content => appendListItem(content, resolvedStructure!, fieldName, zoneName));
+		const field = findResolvedField(fieldName, zoneName);
+		if (field && isGreedyItemField(field)) {
+			applyFieldChange(content => appendGreedyItem(content, resolvedStructure!, fieldName, zoneName));
+		} else {
+			applyFieldChange(content => appendListItem(content, resolvedStructure!, fieldName, zoneName));
+		}
 	}
 
 	function handleRemoveListItem(fieldName: string, itemIndex: number, zoneName?: string) {
 		if (!resolvedStructure) return;
-		applyFieldChange(content => removeListItem(content, resolvedStructure!, fieldName, itemIndex, zoneName));
+		const field = findResolvedField(fieldName, zoneName);
+		if (field && isGreedyItemField(field)) {
+			applyFieldChange(content => removeGreedyItem(content, resolvedStructure!, fieldName, itemIndex, zoneName));
+		} else {
+			applyFieldChange(content => removeListItem(content, resolvedStructure!, fieldName, itemIndex, zoneName));
+		}
 	}
 
-	function handleEditField(fieldName: string, rect: DOMRect, zoneName?: string) {
-		if (!resolvedStructure || !oneditfield) return;
+	function handleReorderListItem(fieldName: string, fromIndex: number, toIndex: number, zoneName?: string) {
+		if (!resolvedStructure) return;
+		const field = findResolvedField(fieldName, zoneName);
+		if (field && isGreedyItemField(field)) {
+			applyFieldChange(content => reorderGreedyItem(content, resolvedStructure!, fieldName, fromIndex, toIndex, zoneName));
+		} else {
+			applyFieldChange(content => reorderListItem(content, resolvedStructure!, fieldName, fromIndex, toIndex, zoneName));
+		}
+	}
+
+	function handleEditField(fieldName: string, rect: DOMRect, zoneName?: string, nodeIndex?: number) {
+		if (!resolvedStructure) return;
 		// Find the field in the resolved structure
 		let field;
 		if (resolvedStructure.type === 'sequence') {
@@ -240,9 +282,30 @@
 			const zone = resolvedStructure.zones.find(z => z.name === zoneName);
 			field = zone?.fields.find(f => f.name === fieldName);
 		}
-		if (!field || !field.filled || field.nodes.length !== 1) return;
+		if (!field || !field.filled) return;
+
+		// Pick the target node — use nodeIndex for greedy fields, default to single-node fields
+		const targetIndex = nodeIndex ?? 0;
+		if (targetIndex >= field.nodes.length) return;
+		if (nodeIndex === undefined && field.nodes.length !== 1) return;
+
+		const targetNode = field.nodes[targetIndex];
+		const source = targetNode.source;
+
+		// Fence nodes → open code editor instead of inline text editor
+		if (targetNode.type === 'fence' && oneditcode) {
+			const code = targetNode.fenceCode ?? '';
+			const language = targetNode.fenceLanguage ?? '';
+			const opener = source.split('\n')[0];
+			const delimMatch = opener.match(/^(`{3,}|~{3,})/);
+			const delimiter = delimMatch ? delimMatch[1] : '```';
+			const mapping: CommandMapping = { source, code, language, opener, delimiter };
+			oneditcode(code, language, rect, mapping);
+			return;
+		}
+
+		if (!oneditfield) return;
 
-		const source = field.nodes[0].source;
 		const trimmed = source.trim();
 
 		// Strip markdown prefix (heading markers, blockquote markers)
@@ -270,6 +333,70 @@
 		oneditfield(fieldName, inlineContent, rect, mapping);
 	}
 
+	function handleEditListItem(fieldName: string, itemIndex: number, rect: DOMRect, zoneName?: string) {
+		if (!resolvedStructure || !oneditfield) return;
+		// Find the field in the resolved structure
+		let field;
+		if (resolvedStructure.type === 'sequence') {
+			field = resolvedStructure.fields.find(f => f.name === fieldName);
+		} else if (resolvedStructure.type === 'delimited' && zoneName) {
+			const zone = resolvedStructure.zones.find(z => z.name === zoneName);
+			field = zone?.fields.find(f => f.name === fieldName);
+		}
+		if (!field || !field.filled || field.nodes.length === 0) return;
+
+		const listNode = field.nodes[0];
+		const items = splitListItems(listNode.source);
+		if (itemIndex < 0 || itemIndex >= items.length) return;
+
+		const itemSource = items[itemIndex];
+		// Strip the list marker to get inline content
+		const markerMatch = itemSource.match(/^([-*+]\s+|\d+\.\s+)/);
+		const prefix = markerMatch ? markerMatch[1] : '';
+		const inlineContent = markerMatch ? itemSource.slice(prefix.length) : itemSource;
+
+		const mapping: SectionMapping = {
+			dataName: `${fieldName}[${itemIndex}]`,
+			text: stripInlineMarkdown(inlineContent),
+			source: itemSource,
+			sourcePrefix: prefix,
+			inlineSource: inlineContent,
+		};
+		oneditfield(`${fieldName}[${itemIndex}]`, inlineContent, rect, mapping);
+	}
+
+	function handleNavigateRune(fieldName: string, nodeIndex: number, zoneName?: string) {
+		if (!resolvedStructure) return;
+
+		// Find the field
+		let field;
+		if (resolvedStructure.type === 'sequence') {
+			field = resolvedStructure.fields.find(f => f.name === fieldName);
+		} else if (resolvedStructure.type === 'delimited' && zoneName) {
+			const zone = resolvedStructure.zones.find(z => z.name === zoneName);
+			field = zone?.fields.find(f => f.name === fieldName);
+		}
+		if (!field || nodeIndex < 0 || nodeIndex >= field.nodes.length) return;
+
+		const targetNode = field.nodes[nodeIndex];
+		if (targetNode.type !== 'rune') return;
+
+		// Find this node's index in the effectiveContentTree
+		const tree = effectiveContentTree;
+		const treeIndex = tree.findIndex(n => n.source === targetNode.source);
+		if (treeIndex === -1) return;
+
+		// Navigate to the nested rune
+		if (activeNode?.type === 'rune') {
+			activePath = [...activePath, treeIndex];
+		} else {
+			activePath = [treeIndex];
+		}
+
+		// Switch to settings tab to show the nested rune's settings
+		activeTab = 'settings';
+	}
+
 	// ── Edit handlers ────────────────────────────────────────────
 
 	function handleHeadingTextChange(text: string) {
@@ -558,7 +685,10 @@
 						onremovefield={handleRemoveField}
 						onappenditem={handleAppendItem}
 						onremovelistitem={handleRemoveListItem}
+						onreorderlistitem={handleReorderListItem}
 						oneditfield={handleEditField}
+						oneditlistitem={handleEditListItem}
+						onnavigaterune={handleNavigateRune}
 						onfieldselect={handleFieldSelect}
 						{selectedField}
 					/>
@@ -732,6 +862,8 @@
 	.edit-panel {
 		display: flex;
 		flex-direction: column;
+		flex: 1;
+		min-height: 0;
 	}
 
 	.edit-panel__top {
@@ -885,6 +1017,7 @@
 	.edit-panel__content-editor {
 		display: flex;
 		flex-direction: column;
+		flex-shrink: 0;
 		overflow: hidden;
 		margin-left: calc(-1 * var(--ed-space-5));
 		margin-right: calc(-1 * var(--ed-space-5));

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

@@ -12,7 +12,7 @@
 		type ParsedBlock,
 		type RuneBlock,
 	} 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';
@@ -23,6 +23,8 @@
 	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;
@@ -456,6 +458,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;
@@ -580,10 +606,103 @@
 		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,
@@ -593,6 +712,16 @@
 		};
 	}
 
+	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[]>();
@@ -741,6 +870,7 @@
 						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}
@@ -783,10 +913,30 @@
 			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>
 
 
@@ -1005,7 +1155,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);