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

@refrakt-md/editor 0.8.2 → 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 (29) 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-Cd12jZId.js"></script>
-		<link rel="stylesheet" crossorigin href="/assets/index-B6H6LF1M.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/components/BlockEditor.svelte CHANGED Viewed

@@ -9,15 +9,25 @@
 		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, 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';
@@ -114,6 +124,7 @@
 			editingFrontmatter = false;
 			anchorPoint = null;
 			inlineEdit = null;
+			proseInlineEdit = null;
 		}
 	});
@@ -124,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);
@@ -146,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 '';
@@ -171,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;
 	}
@@ -207,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;
@@ -231,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();
 	}
@@ -276,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--;
@@ -410,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();
 	}
@@ -429,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 ?? '');
@@ -576,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;
@@ -590,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;
@@ -609,6 +869,27 @@
 	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;
@@ -702,9 +983,10 @@
 	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,
@@ -714,9 +996,10 @@
 	function handleFieldCodeEdit(code: string, language: string, rect: DOMRect, mapping: CommandMapping) {
 		if (activeIndex === null) return;
+		const [flatIndex] = editorBlockToFlatRange(activeIndex);
 		inlineEdit = null;
 		commandEdit = {
-			blockIndex: activeIndex,
+			blockIndex: flatIndex,
 			rect,
 			mapping,
 		};
@@ -777,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}
@@ -788,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 -->
@@ -836,7 +1139,7 @@
 								onclick={(e) => toggleBlock(i, e.clientX, e.clientY)}
 								aria-pressed={activeIndex === i}
 							>
-								{blockLabel(block)}
+								{blockLabel(eb)}
 							</button>
 						{/if}
 					</div>
@@ -853,26 +1156,39 @@
 			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}
 		</div>
 	{/if}
@@ -937,6 +1253,16 @@
 			onclose={closeIconEdit}
 		/>
 	{/if}
+	{#if proseInlineEdit}
+		<InlineEditPopover
+			anchorRect={proseInlineEdit.rect}
+			dataName={proseInlineEdit.mapping.dataName}
+			inlineSource={proseInlineEdit.inlineSource}
+			onchange={handleProseInlineEditChange}
+			onclose={closeProseInlineEdit}
+		/>
+	{/if}
 </div>
@@ -1167,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;

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

@@ -26,6 +26,7 @@
 	let container: HTMLElement;
 	let view = $state<EditorView | undefined>(undefined);
+	let lastEmitted = '';
 	const langCompartment = new Compartment();
 	const markdocCompartment = new Compartment();
@@ -145,7 +146,8 @@
 				]),
 				EditorView.updateListener.of((update) => {
 					if (update.docChanged) {
-						onchange(update.state.doc.toString());
+						lastEmitted = update.state.doc.toString();
+						onchange(lastEmitted);
 					}
 				}),
 				EditorView.lineWrapping,
@@ -214,11 +216,19 @@
 		if (!editor) return;
 		const cmContent = editor.state.doc.toString();
-		if (current !== cmContent) {
-			editor.dispatch({
-				changes: { from: 0, to: editor.state.doc.length, insert: current },
-			});
+		if (current === cmContent) return;
+		// If CM still has what we last emitted, the incoming content
+		// is our own edit coming back (possibly normalized) — skip sync
+		if (lastEmitted && cmContent === lastEmitted) {
+			lastEmitted = '';
+			return;
 		}
+		lastEmitted = '';
+		editor.dispatch({
+			changes: { from: 0, to: editor.state.doc.length, insert: current },
+		});
 	});
 </script>