terminoir 0.9.0 → 0.10.0

package/dist/components/ListItem.svelte

@@ -10,6 +10,8 @@
     class: className = '',
     leading,
     trailing,
+    expanded,
+    details,
     children,
     ...rest
   }: {
@@ -22,6 +24,10 @@
     class?: string;
     leading?: Snippet;
     trailing?: Snippet;
+    /** For a row that opens `details`: whether they are shown (sets `aria-expanded`). */
+    expanded?: boolean;
+    /** Content under the row, such as the settings it opens. Shown only while `expanded` is not false. */
+    details?: Snippet;
     /** Replaces title/description for custom content. */
     children?: Snippet;
   } & Record<string, unknown> = $props();
@@ -42,12 +48,15 @@
 
 <li class={cn('terminoir-list-item', active && 'terminoir-list-item--active', className)} {...rest}>
   {#if onclick}
-    <button type="button" class="terminoir-list-item__row terminoir-list-item__button terminoir-focusable" {onclick}>
+    <button type="button" class="terminoir-list-item__row terminoir-list-item__button terminoir-focusable" aria-expanded={expanded} {onclick}>
       {@render body()}
     </button>
   {:else}
     <div class="terminoir-list-item__row">{@render body()}</div>
   {/if}
+  {#if details && expanded !== false}
+    <div class="terminoir-list-item__details">{@render details()}</div>
+  {/if}
 </li>
 
 <style>
@@ -103,6 +112,9 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  .terminoir-list-item__details {
+    padding: var(--space-1) 0.85rem var(--space-4) calc(0.85rem + 1.25rem + var(--space-3));
+  }
   .terminoir-list-item__trailing {
     display: inline-flex;
     align-items: center;

package/dist/components/ListItem.svelte.d.ts

@@ -9,6 +9,10 @@ type $$ComponentProps = {
     class?: string;
     leading?: Snippet;
     trailing?: Snippet;
+    /** For a row that opens `details`: whether they are shown (sets `aria-expanded`). */
+    expanded?: boolean;
+    /** Content under the row, such as the settings it opens. Shown only while `expanded` is not false. */
+    details?: Snippet;
     /** Replaces title/description for custom content. */
     children?: Snippet;
 } & Record<string, unknown>;

package/dist/components/MarkdownEditor.svelte

@@ -13,6 +13,7 @@
   import { cn } from '../utils/cn.js';
   import type { PickerOption } from '../utils/componentTypes.js';
   import { moveIndex } from '../utils/listNav.js';
+  import { findDropTarget, moveBlock } from '../utils/markdownEditor/blockDrag.js';
   import { matchBlocks, placeholderPlugin, taskListItemView, tidyMarkdown, type BlockItem } from '../utils/markdownEditor/blocks.js';
   import { triggerPlugin, type Trigger } from '../utils/markdownEditor/triggers.js';
   import { wikilink, wikilinkNode } from '../utils/markdownEditor/wikilink.js';
@@ -21,6 +22,8 @@
   type MenuEntry = { id: string; label: string; icon?: string; iconColor?: string; description?: string; choose: () => void };
 
   const LINK_SEARCH_DEBOUNCE_MS = 120;
+  /** How far left of the text a dragged block can still be dropped (the handle's gutter), and above or below it. */
+  const DROP_MARGIN_PX = 72;
 
   let {
     value,
@@ -50,7 +53,12 @@
   let host = $state<HTMLDivElement>();
   let handle = $state<HTMLDivElement>();
   let editor: Editor | undefined;
+  let ready = $state(false);
   let provider: BlockProvider | undefined;
+  /** Position of the block being dragged by its handle. */
+  let dragFrom: number | null = null;
+  /** Where it would land, as a line in the editor's own coordinates. */
+  let dropLine = $state<{ pos: number; top: number; left: number; width: number } | null>(null);
   /** Normalized markdown of what the editor last loaded or emitted; changes equal to it are not edits. */
   let known = '';
 
@@ -142,10 +150,10 @@
     onchange?.(tidy);
   }
 
-  /** Load outside changes, but never under the writer's caret. */
+  /** Load outside changes, but never under the writer's caret. Also runs once the editor exists, for a value that changed while it was being created. */
   $effect(() => {
     const next = value;
-    if (!editor || tidyMarkdown(next) === known) return;
+    if (!ready || tidyMarkdown(next) === known) return;
     const focused = act((ctx) => ctx.get(editorViewCtx).hasFocus());
     if (focused) return;
     act(replaceAll(next));
@@ -166,6 +174,62 @@
     });
   }
 
+  function nearEditor(event: DragEvent): boolean {
+    const rect = root!.getBoundingClientRect();
+    return (
+      event.clientX >= rect.left - DROP_MARGIN_PX &&
+      event.clientX <= rect.right &&
+      event.clientY >= rect.top - DROP_MARGIN_PX &&
+      event.clientY <= rect.bottom + DROP_MARGIN_PX
+    );
+  }
+
+  /** Blocks land between their siblings, wherever along the line the pointer is (the gutter included). */
+  function onBlockDragOver(event: DragEvent) {
+    if (dragFrom === null) return;
+    if (!nearEditor(event)) {
+      dropLine = null;
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';
+    const from = dragFrom;
+    const target = act((ctx) => findDropTarget(ctx.get(editorViewCtx), from, event.clientY));
+    const origin = root!.getBoundingClientRect();
+    dropLine = target ? { ...target, top: target.top - origin.top, left: target.left - origin.left } : null;
+  }
+
+  function onBlockDrop(event: DragEvent) {
+    const from = dragFrom;
+    const line = dropLine;
+    if (from === null || !line) return;
+    event.preventDefault();
+    event.stopPropagation();
+    act((ctx) => {
+      const view = ctx.get(editorViewCtx);
+      const tr = moveBlock(view.state, from, line.pos);
+      if (tr) view.dispatch(tr.scrollIntoView());
+      view.dragging = null;
+      view.focus();
+    });
+    endBlockDrag();
+  }
+
+  function startBlockDrag() {
+    dragFrom = provider?.active?.$pos.pos ?? null;
+    if (dragFrom === null) return;
+    document.addEventListener('dragover', onBlockDragOver, true);
+    document.addEventListener('drop', onBlockDrop, true);
+  }
+
+  function endBlockDrag() {
+    dragFrom = null;
+    dropLine = null;
+    document.removeEventListener('dragover', onBlockDragOver, true);
+    document.removeEventListener('drop', onBlockDrop, true);
+  }
+
   function onHostClick(event: MouseEvent) {
     const link = (event.target as HTMLElement).closest<HTMLElement>('[data-wikilink]');
     if (link && onlinkopen) onlinkopen(link.dataset.wikilink ?? '');
@@ -204,10 +268,12 @@
       known = tidyMarkdown(act(getMarkdown()) ?? value);
       provider = new BlockProvider({ ctx: created.ctx, content: handle!, root, getOffset: () => 6 });
       provider.update();
+      ready = true;
     });
 
     return () => {
       disposed = true;
+      endBlockDrag();
       provider?.destroy();
       void editor?.destroy();
     };
@@ -218,12 +284,15 @@
   <!-- Link chips are also reachable as text; the click only adds a shortcut to open them. -->
   <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
   <div bind:this={host} onclick={onHostClick}></div>
-  <div class="terminoir-md__handle" bind:this={handle}>
+  <div class="terminoir-md__handle" bind:this={handle} ondragstart={startBlockDrag} ondragend={endBlockDrag} role="presentation">
     <button type="button" class="terminoir-md__handle-button" aria-label="Add block below" onmousedown={(e) => e.preventDefault()} onclick={addBlockBelow}>
       <NavIcon name="plus" />
     </button>
     <span class="terminoir-md__handle-grip" aria-hidden="true" title="Drag to move"><NavIcon name="grip-vertical" /></span>
   </div>
+  {#if dropLine}
+    <div class="terminoir-md__drop-line" aria-hidden="true" style:top={`${dropLine.top}px`} style:left={`${dropLine.left}px`} style:width={`${dropLine.width}px`}></div>
+  {/if}
 </div>
 
 {#if trigger && (entries.length || trigger.kind === 'link')}
@@ -336,6 +405,15 @@
   .terminoir-md__handle-button:hover,
   .terminoir-md__handle-grip:hover { background: color-mix(in srgb, var(--foreground) 8%, transparent); color: var(--foreground); }
 
+  .terminoir-md__drop-line {
+    position: absolute;
+    height: 2px;
+    margin-top: -1px;
+    border-radius: 1px;
+    background: var(--primary);
+    pointer-events: none;
+  }
+
   .terminoir-md__menu {
     position: fixed;
     z-index: 60;

package/dist/utils/markdownEditor/blockDrag.d.ts

@@ -0,0 +1,21 @@
+/** Moving a block by its drag handle: where it lands, and the transaction that moves it. */
+import type { EditorState, Transaction } from '@milkdown/kit/prose/state';
+import type { EditorView } from '@milkdown/kit/prose/view';
+type Span = {
+    top: number;
+    bottom: number;
+};
+/** A place a dragged block can land: document position, and the line drawn there. */
+export type DropTarget = {
+    pos: number;
+    top: number;
+    left: number;
+    width: number;
+};
+/** Index of the gap (0 = before the first block, n = after the last) nearest to `y`. */
+export declare function dropGap(blocks: readonly Span[], y: number): number;
+/** Moves the node at `from` to document position `to`; null when that would leave it in place. */
+export declare function moveBlock(state: EditorState, from: number, to: number): Transaction | null;
+/** The gap among the dragged block's siblings closest to `y`, in viewport coordinates. */
+export declare function findDropTarget(view: EditorView, from: number, y: number): DropTarget | null;
+export {};

package/dist/utils/markdownEditor/blockDrag.js

@@ -0,0 +1,34 @@
+/** Index of the gap (0 = before the first block, n = after the last) nearest to `y`. */
+export function dropGap(blocks, y) {
+    const index = blocks.findIndex((block) => y < (block.top + block.bottom) / 2);
+    return index === -1 ? blocks.length : index;
+}
+/** Moves the node at `from` to document position `to`; null when that would leave it in place. */
+export function moveBlock(state, from, to) {
+    const node = state.doc.nodeAt(from);
+    if (!node || (to >= from && to <= from + node.nodeSize))
+        return null;
+    const tr = state.tr.delete(from, from + node.nodeSize);
+    return tr.insert(tr.mapping.map(to), node);
+}
+/** The gap among the dragged block's siblings closest to `y`, in viewport coordinates. */
+export function findDropTarget(view, from, y) {
+    const $from = view.state.doc.resolve(from);
+    const start = $from.start();
+    const siblings = [];
+    $from.parent.forEach((_, offset) => {
+        const dom = view.nodeDOM(start + offset);
+        if (dom instanceof HTMLElement)
+            siblings.push({ pos: start + offset, rect: dom.getBoundingClientRect() });
+    });
+    if (!siblings.length)
+        return null;
+    const gap = dropGap(siblings.map((s) => s.rect), y);
+    const { left, width } = siblings[0].rect;
+    if (gap < siblings.length) {
+        const { pos, rect } = siblings[gap];
+        const above = siblings[gap - 1]?.rect.bottom ?? rect.top;
+        return { pos, top: (above + rect.top) / 2, left, width };
+    }
+    return { pos: start + $from.parent.content.size, top: siblings[siblings.length - 1].rect.bottom, left, width };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "terminoir",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Terminoir — Liquid Glass design tokens and Svelte 5 UI components.",
   "license": "Apache-2.0",
   "type": "module",