npm - @refrakt-md/editor - Versions diffs - 0.8.1 → 0.8.3 - Mend

@refrakt-md/editor 0.8.1 → 0.8.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (42) hide show

package/app/dist/index.html CHANGED Viewed

@@ -4,8 +4,8 @@
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<title>refrakt editor</title>
-		<script type="module" crossorigin src="/assets/index-BlAOhWAQ.js"></script>
-		<link rel="stylesheet" crossorigin href="/assets/index-BD2EBUrQ.css">
+		<script type="module" crossorigin src="/assets/index-ogrpJNou.js"></script>
+		<link rel="stylesheet" crossorigin href="/assets/index-CzvG5PZT.css">
 	</head>
 	<body>
 		<div id="app"></div>

package/app/src/lib/api/client.ts CHANGED Viewed

@@ -192,12 +192,44 @@ export async function fetchPagesList(): Promise<PageListItem[]> {
 	return data.pages;
 }
+// ── Asset management ────────────────────────────────────────────────────
+export interface ImageAsset {
+	path: string;
+	name: string;
+	size: number;
+	modified: number;
+}
+export async function fetchAssets(): Promise<ImageAsset[]> {
+	const res = await fetch(`${BASE}/api/assets`);
+	if (!res.ok) throw new Error(`Failed to load assets: ${res.status}`);
+	const data = await res.json();
+	return data.images;
+}
+export async function uploadAsset(file: File): Promise<{ path: string; name: string }> {
+	const formData = new FormData();
+	formData.append('file', file);
+	const res = await fetch(`${BASE}/api/assets/upload`, {
+		method: 'POST',
+		body: formData,
+	});
+	if (!res.ok) {
+		const data = await res.json().catch(() => ({}));
+		throw new Error((data as { error?: string }).error ?? `Upload failed: ${res.status}`);
+	}
+	return res.json();
+}
 // ── Rune metadata ───────────────────────────────────────────────────────
 export interface RuneAttributeInfo {
 	type: string;
 	required: boolean;
 	values?: string[];
+	description?: string;
 }
 // ── Serialized content model types (from server) ────────────────────────

package/app/src/lib/components/ActionEditPopover.svelte CHANGED Viewed

@@ -96,6 +96,7 @@
 >
 	<div class="action-edit-popover__header">
 		<span class="action-edit-popover__label">action</span>
+		<button class="action-edit-popover__close" onclick={onclose} aria-label="Close">&times;</button>
 	</div>
 	<div class="action-edit-popover__row">
@@ -157,6 +158,9 @@
 	/* ── Header ──────────────────────────────────────────── */
 	.action-edit-popover__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
 		padding: 0 var(--ed-space-1, 0.25rem);
 	}
@@ -168,6 +172,20 @@
 		letter-spacing: 0.04em;
 	}
+	.action-edit-popover__close {
+		background: none;
+		border: none;
+		font-size: 18px;
+		line-height: 1;
+		color: var(--ed-text-muted, #94a3b8);
+		cursor: pointer;
+		padding: 0 4px;
+	}
+	.action-edit-popover__close:hover {
+		color: var(--ed-text-primary, #1a1a2e);
+	}
 	/* ── Rows ────────────────────────────────────────────── */
 	.action-edit-popover__row {
@@ -214,32 +232,36 @@
 	}
 	.action-edit-popover__btn {
-		padding: var(--ed-space-1, 0.25rem) var(--ed-space-2, 0.5rem);
-		border: 1px solid var(--ed-border-default, #e2e8f0);
-		border-radius: var(--ed-radius-sm, 4px);
-		font-size: 11px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--ed-space-2);
+		height: 28px;
+		padding: 0 var(--ed-space-3);
+		border: 1px solid var(--ed-text-secondary);
+		border-radius: var(--ed-radius-sm);
+		background: transparent;
+		color: var(--ed-text-secondary);
+		font-size: var(--ed-text-sm);
 		font-weight: 500;
 		cursor: pointer;
-		transition: background 100ms, color 100ms;
+		transition: background var(--ed-transition-fast), color var(--ed-transition-fast), border-color var(--ed-transition-fast);
+		white-space: nowrap;
 	}
-	.action-edit-popover__btn--apply {
-		background: var(--ed-accent, #3b82f6);
-		border-color: var(--ed-accent, #3b82f6);
-		color: white;
+	.action-edit-popover__btn:hover:not(.action-edit-popover__btn--apply):not(:disabled) {
+		border-color: var(--ed-text-primary);
+		color: var(--ed-text-primary);
 	}
-	.action-edit-popover__btn--apply:hover {
-		opacity: 0.9;
-	}
-	.action-edit-popover__btn--remove {
-		background: transparent;
-		color: var(--ed-text-muted, #94a3b8);
+	.action-edit-popover__btn--apply {
+		background: var(--ed-text-primary);
+		color: #ffffff;
+		border-color: var(--ed-text-primary);
 	}
-	.action-edit-popover__btn--remove:hover {
-		color: var(--ed-text-secondary, #475569);
-		background: var(--ed-surface-2, #f1f5f9);
+	.action-edit-popover__btn--apply:hover:not(:disabled) {
+		background: var(--ed-text-secondary);
+		border-color: var(--ed-text-secondary);
 	}
 </style>

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

@@ -3,7 +3,7 @@
 	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';
+	export type EditType = 'inline' | 'link' | 'code' | 'image' | 'icon';
 	export interface SectionClickInfo {
 		dataName: string;
@@ -12,6 +12,8 @@
 		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 =
@@ -133,6 +135,8 @@
 	/** 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');
@@ -143,23 +147,49 @@
 			tooltip.textContent = label;
 			tooltip.style.left = `${me.clientX + 12}px`;
 			tooltip.style.top = `${me.clientY + 12}px`;
-			tooltip.hidden = false;
+			tooltip.classList.add('rf-tooltip-visible');
 		}
 		function hideTooltip() {
-			tooltip.hidden = true;
+			tooltip.classList.remove('rf-tooltip-visible');
 		}
-		hideTooltip();
 		wrapper.addEventListener('mouseover', (e) => {
 			const result = findInteractiveTarget(e.target as HTMLElement, wrapper, runeConfigMap);
 			const target = result?.el ?? null;
-			if (target !== hoveredEl) {
+			// 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
@@ -171,7 +201,7 @@
 		});
 		wrapper.addEventListener('mousemove', (e) => {
-			if (!tooltip.hidden) {
+			if (tooltip.classList.contains('rf-tooltip-visible')) {
 				tooltip.style.left = `${e.clientX + 12}px`;
 				tooltip.style.top = `${e.clientY + 12}px`;
 			}
@@ -180,8 +210,15 @@
 		wrapper.addEventListener('mouseout', (e) => {
 			const related = (e as MouseEvent).relatedTarget as HTMLElement | null;
 			if (hoveredEl && (!related || !hoveredEl.contains(related))) {
-				hoveredEl.classList.remove('rf-editable-hover');
-				hoveredEl = null;
+				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();
 			}
 		});
@@ -199,15 +236,22 @@
 				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') ?? undefined,
+					href: anchor?.getAttribute('href') ?? imgEl?.getAttribute('src') ?? undefined,
+					iconName: iconEl?.getAttribute('data-icon') ?? undefined,
 				});
 			} else {
 				// type === 'rune' → open block edit panel
@@ -300,12 +344,22 @@ ${hlCss}
 							grid-column: full;
 							padding-inline: max(var(--rf-content-gutter, 1.5rem), calc((100% - var(--rf-content-max)) / 2));
 						}
-						/* Editable section hover affordance */
-						[data-name].rf-editable-hover {
-							outline: 2px dashed rgba(59, 130, 246, 0.5);
+						/* 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;
-							cursor: text;
+							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 * {
@@ -313,9 +367,7 @@ ${hlCss}
 						}
 						/* Rune root hover affordance — opens block edit panel */
 						[data-rune].rf-editable-hover {
-							outline: 2px dashed rgba(59, 130, 246, 0.3);
-							outline-offset: 4px;
-							border-radius: 4px;
+							outline-color: rgba(59, 130, 246, 0.3);
 						}
 						[data-rune].rf-editable-hover,
 						[data-rune].rf-editable-hover * {
@@ -335,6 +387,11 @@ ${hlCss}
 							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>`;

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

@@ -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));