{{ item.label }}
diff --git a/src/app/editor/core/utils/reorder.ts b/src/app/editor/core/utils/reorder.ts
new file mode 100644
index 0000000..09becf1
--- /dev/null
+++ b/src/app/editor/core/utils/reorder.ts
@@ -0,0 +1,23 @@
+export function moveItemImmutable(items: readonly T[], fromIndex: number, toIndex: number): T[] {
+ const len = items.length;
+ if (len === 0) return [];
+
+ const from = Math.max(0, Math.min(len - 1, fromIndex));
+ const to = Math.max(0, Math.min(len, toIndex)); // allow insert at end (== len)
+
+ if (from === to || from + 1 === to) {
+ // When moving forward by one, splice logic would be a no-op; still return a new array
+ const clone = items.slice();
+ if (from === to) return clone;
+ }
+
+ const next = items.slice();
+ const [item] = next.splice(from, 1);
+ next.splice(to > from ? to - 1 : to, 0, item);
+ return next;
+}
+
+export function clampIndex(index: number, min: number, max: number): number {
+ if (Number.isNaN(index)) return min;
+ return Math.max(min, Math.min(max, index));
+}
diff --git a/src/app/editor/services/document.service.ts b/src/app/editor/services/document.service.ts
index 40d58af..743a86d 100644
--- a/src/app/editor/services/document.service.ts
+++ b/src/app/editor/services/document.service.ts
@@ -1,4 +1,5 @@
import { Injectable, signal, computed, effect } from '@angular/core';
+import { moveItemImmutable } from '../core/utils/reorder';
import { Block, BlockType, DocumentModel, HeadingProps, OutlineHeading } from '../core/models/block.model';
import { generateId } from '../core/utils/id-generator';
@@ -174,11 +175,10 @@ export class DocumentService {
const fromIndex = blocks.findIndex(b => b.id === id);
if (fromIndex < 0) return doc;
- const [block] = blocks.splice(fromIndex, 1);
- blocks.splice(toIndex, 0, block);
+ const moved = moveItemImmutable(blocks, fromIndex, toIndex);
// Renumber numbered lists after move
- const renumbered = this.renumberListItems(blocks);
+ const renumbered = this.renumberListItems(moved);
return { ...doc, blocks: renumbered, meta: { ...doc.meta, updatedAt: new Date().toISOString() } };
});
diff --git a/src/app/editor/services/drag-drop.service.ts b/src/app/editor/services/drag-drop.service.ts
index e102af0..248d9ac 100644
--- a/src/app/editor/services/drag-drop.service.ts
+++ b/src/app/editor/services/drag-drop.service.ts
@@ -1,6 +1,6 @@
import { Injectable, signal } from '@angular/core';
-interface IndicatorRect {
+export interface IndicatorRect {
top: number;
left: number;
width: number;
@@ -16,7 +16,7 @@ export class DragDropService {
readonly fromIndex = signal(-1);
readonly overIndex = signal(-1);
readonly indicator = signal(null);
- readonly dropMode = signal<'line' | 'column-left' | 'column-right'>('line');
+ readonly dropMode = signal<'line' | 'column-left' | 'column-right' | 'column-gap'>('line');
private containerEl: HTMLElement | null = null;
private startY = 0;
@@ -62,6 +62,21 @@ export class DragDropService {
return { ...result, moved };
}
+ /**
+ * Expose the container rect so components can position custom indicators
+ * relative to the main editor scroll container.
+ */
+ getContainerRect(): DOMRect | null {
+ try { return this.containerEl?.getBoundingClientRect() ?? null; } catch { return null; }
+ }
+
+ /**
+ * Allow components to override the indicator explicitly (e.g., Y-cursor between items).
+ */
+ setIndicator(ind: IndicatorRect | null): void {
+ this.indicator.set(ind);
+ }
+
private computeOverIndex(clientY: number, clientX?: number) {
if (!this.containerEl) return;
const nodes = Array.from(this.containerEl.querySelectorAll('.block-wrapper'));
@@ -80,8 +95,13 @@ export class DragDropService {
const isHoveringBlock = clientY >= r.top && clientY <= r.bottom;
if (isHoveringBlock) {
+ // If this wrapper is a Columns block, prefer gap detection below
+ const isColumnsWrapper = !!nodes[i].querySelector('[data-column-index]');
+ if (isColumnsWrapper) {
+ continue;
+ }
const relativeX = clientX - r.left;
- const edgeThreshold = 100; // pixels from edge to trigger column mode (increased for better detection)
+ const edgeThreshold = Math.min(120, Math.max(48, r.width * 0.25)); // 25% width, clamped 48-120px
if (relativeX < edgeThreshold) {
// Near left edge - create column on left
@@ -118,6 +138,43 @@ export class DragDropService {
}
}
}
+
+ // Columns gap detection: show a vertical Y-style indicator between columns (stable nearest boundary)
+ const el = document.elementFromPoint(clientX, clientY) as HTMLElement | null;
+ const colEl = el?.closest('[data-column-index]') as HTMLElement | null;
+ if (colEl) {
+ const columnsContainer = colEl.parentElement as HTMLElement | null;
+ const columnsWrapper = (columnsContainer?.closest('.block-wrapper') as HTMLElement) || columnsContainer;
+ if (columnsContainer && columnsWrapper) {
+ const cols = Array.from(columnsContainer.querySelectorAll('[data-column-index]'));
+ const containerRect2 = columnsWrapper.getBoundingClientRect();
+ const gapThreshold = 60; // px near column borders considered as gap
+ let bestLeft = 0;
+ let bestDist = Number.POSITIVE_INFINITY;
+ for (let j = 0; j < cols.length; j++) {
+ const cRect = cols[j].getBoundingClientRect();
+ const dLeft = Math.abs(clientX - cRect.left);
+ const dRight = Math.abs(clientX - cRect.right);
+ const localBest = dLeft < dRight ? { left: cRect.left, dist: dLeft } : { left: cRect.right, dist: dRight };
+ if (localBest.dist < bestDist) {
+ bestDist = localBest.dist;
+ bestLeft = localBest.left;
+ }
+ }
+ if (bestDist <= gapThreshold) {
+ this.dropMode.set('column-gap');
+ this.overIndex.set(this.overIndex());
+ this.indicator.set({
+ top: containerRect2.top - containerRect.top,
+ left: bestLeft - containerRect.left,
+ width: 4,
+ height: containerRect2.height,
+ mode: 'vertical'
+ });
+ return;
+ }
+ }
+ }
}
// Default horizontal mode (line change) - improved detection
@@ -125,6 +182,7 @@ export class DragDropService {
// Find which block we're hovering over or between
let found = false;
+ let hoveredBlockEl: HTMLElement | null = null;
for (let i = 0; i < nodes.length; i++) {
const r = nodes[i].getBoundingClientRect();
@@ -136,12 +194,14 @@ export class DragDropService {
// Insert BEFORE this block
targetIndex = i;
indicatorTop = r.top - containerRect.top;
+ hoveredBlockEl = nodes[i];
found = true;
break;
} else if (clientY <= r.bottom) {
// Insert AFTER this block
targetIndex = i + 1;
indicatorTop = r.bottom - containerRect.top;
+ hoveredBlockEl = nodes[i];
found = true;
break;
}
@@ -155,10 +215,22 @@ export class DragDropService {
}
this.overIndex.set(targetIndex);
+ // Default to full container width; if inside a column, clamp to that column width
+ let indLeft = 0;
+ let indWidth = containerRect.width;
+ const el2 = (typeof document !== 'undefined' && clientX !== undefined)
+ ? (document.elementFromPoint(clientX, clientY) as HTMLElement | null)
+ : null;
+ const colEl2 = el2?.closest('[data-column-index]') as HTMLElement | null;
+ if (colEl2) {
+ const colRect = colEl2.getBoundingClientRect();
+ indLeft = colRect.left - containerRect.left;
+ indWidth = colRect.width;
+ }
this.indicator.set({
top: indicatorTop,
- left: 0,
- width: containerRect.width,
+ left: indLeft,
+ width: indWidth,
mode: 'horizontal'
});
}
diff --git a/src/app/editor/services/shortcuts.service.ts b/src/app/editor/services/shortcuts.service.ts
index 714a73a..08d2643 100644
--- a/src/app/editor/services/shortcuts.service.ts
+++ b/src/app/editor/services/shortcuts.service.ts
@@ -54,15 +54,15 @@ export class ShortcutsService {
this.insertOrConvertBlock('heading', { level: 3, text: '' });
break;
- // Lists
+ // Lists (use list-item everywhere to match palette behavior)
case 'bullet-list':
- this.insertOrConvertBlock('list', { kind: 'bullet' });
+ this.insertOrConvertBlock('list-item' as BlockType, { kind: 'bullet', text: '' });
break;
case 'numbered-list':
- this.insertOrConvertBlock('list', { kind: 'numbered' });
+ this.insertOrConvertBlock('list-item' as BlockType, { kind: 'numbered', number: 1, text: '' });
break;
case 'checkbox-list':
- this.insertOrConvertBlock('list', { kind: 'check' });
+ this.insertOrConvertBlock('list-item' as BlockType, { kind: 'check', checked: false, text: '' });
break;
// Blocks
@@ -156,14 +156,6 @@ export class ShortcutsService {
if (preset) {
block.props = { ...block.props, ...preset };
}
- // If it's a list created via shortcut, seed the first item's text for immediate visibility
- if (type === 'list') {
- const k = (block.props?.kind || '').toLowerCase();
- const label = k === 'check' ? 'checkbox-list' : k === 'numbered' ? 'numbered-list' : 'bullet-list';
- if (Array.isArray(block.props?.items) && block.props.items.length > 0) {
- block.props.items = [{ ...block.props.items[0], text: label }];
- }
- }
this.documentService.appendBlock(block);
this.selectionService.setActive(block.id);
}
diff --git a/vault/attachments/nimbus/2025/1111/img-pasted-20251111-155828-wu11ic.png b/vault/attachments/nimbus/2025/1111/img-pasted-20251111-155828-wu11ic.png
new file mode 100644
index 0000000..5837b20
Binary files /dev/null and b/vault/attachments/nimbus/2025/1111/img-pasted-20251111-155828-wu11ic.png differ