@bendyline/squisq-editor-react 2.0.0 → 2.1.0

package/src/treeview/__tests__/treeOps.test.ts

@@ -3,6 +3,7 @@ import { parseTree, renderTree, type Tree, type TreeNode } from '@bendyline/squi
 import {
   addItemOp,
   indentItemOp,
+  moveItemOp,
   moveItemDownOp,
   moveItemUpOp,
   outdentItemOp,
@@ -90,6 +91,56 @@ describe('treeOps', () => {
     expect(outdentItemOp(t, 'root')).toBe(t);
   });
 
+  it('moveItemOp reorders siblings before or after a target', () => {
+    expect(flat(moveItemOp(tree(BASE), 'c', 'a', 'before'))).toEqual([
+      '0:root/',
+      '1:c',
+      '1:a',
+      '1:b/',
+      '2:b1',
+    ]);
+    expect(flat(moveItemOp(tree(BASE), 'b', 'c', 'after'))).toEqual([
+      '0:root/',
+      '1:a',
+      '1:c',
+      '1:b/',
+      '2:b1',
+    ]);
+  });
+
+  it('moveItemOp reparents nodes and carries their subtrees', () => {
+    expect(flat(moveItemOp(tree(BASE), 'c', 'a', 'child'))).toEqual([
+      '0:root/',
+      '1:a',
+      '2:c',
+      '1:b/',
+      '2:b1',
+    ]);
+    expect(flat(moveItemOp(tree(BASE), 'b', 'a', 'child'))).toEqual([
+      '0:root/',
+      '1:a',
+      '2:b/',
+      '3:b1',
+      '1:c',
+    ]);
+  });
+
+  it('moveItemOp can outdent relative to a shallower target', () => {
+    expect(flat(moveItemOp(tree(BASE), 'b1', 'b', 'before'))).toEqual([
+      '0:root/',
+      '1:a',
+      '1:b1',
+      '1:b/',
+      '1:c',
+    ]);
+  });
+
+  it('moveItemOp rejects self-drops and drops into the source subtree', () => {
+    const t = tree(BASE);
+    expect(moveItemOp(t, 'b', 'b', 'child')).toBe(t);
+    expect(moveItemOp(t, 'b', 'b1', 'child')).toBe(t);
+  });
+
   it('moveItemUp / moveItemDown reorder siblings within bounds', () => {
     expect(flat(moveItemDownOp(tree(BASE), 'a'))).toEqual([
       '0:root/',
@@ -115,6 +166,7 @@ describe('treeOps', () => {
       (t: Tree) => addItemOp(t, 'b', 'child', 'b2'),
       (t: Tree) => indentItemOp(t, 'c'),
       (t: Tree) => outdentItemOp(t, 'b1'),
+      (t: Tree) => moveItemOp(t, 'c', 'a', 'child'),
       (t: Tree) => moveItemDownOp(t, 'a'),
     ]) {
       const next = op(tree(BASE));

package/src/treeview/__tests__/treeViewCommands.test.ts

@@ -111,6 +111,22 @@ describe('applyTreeCommand', () => {
     expect(utils?.children.map((c) => c.label)).toContain('config.ts');
   });
 
+  it('moveItem reorders and reparents through one fence rewrite', () => {
+    const editor = makeEditor('```\n' + ART + '\n```\n');
+    const id = firstId(editor);
+    expect(
+      applyTreeCommand(editor, id, {
+        kind: 'moveItem',
+        id: 'config-ts',
+        targetId: 'utils',
+        position: 'child',
+      }),
+    ).toBe(true);
+    const tree = parseTree(fenceOf(editor).text);
+    const utils = tree.roots[0].children.find((n) => n.label === 'utils/');
+    expect(utils?.children.map((child) => child.label)).toEqual(['math.ts', 'config.ts']);
+  });
+
   it('removeItem drops a node', () => {
     const editor = makeEditor('```\n' + ART + '\n```\n');
     const id = firstId(editor);

package/src/treeview/treeOps.ts

@@ -41,6 +41,8 @@ interface Loc {
   parent: TreeNode | null;
 }
 
+export type TreeDropPosition = 'before' | 'child' | 'after';
+
 /** Locate a node by id in a (cloned) tree, returning its sibling array + index + parent. */
 function locate(roots: TreeNode[], id: string, parent: TreeNode | null = null): Loc | null {
   for (let i = 0; i < roots.length; i++) {
@@ -55,6 +57,10 @@ function markDir(n: TreeNode): void {
   n.isDir = n.label.endsWith('/') || n.children.length > 0;
 }
 
+function containsNode(node: TreeNode, id: string): boolean {
+  return node.id === id || node.children.some((child) => containsNode(child, id));
+}
+
 export function renameItemOp(tree: Tree, id: string, label: string): Tree {
   const clean = sanitizeTreeLabel(label);
   const next = cloneTree(tree);
@@ -127,6 +133,59 @@ export function outdentItemOp(tree: Tree, id: string): Tree {
   return next;
 }
 
+/**
+ * Move a node and its complete subtree relative to any other node. Dropping
+ * before/after adopts the target's parent; dropping as a child appends to the
+ * target. A node can never be moved into its own subtree.
+ */
+export function moveItemOp(
+  tree: Tree,
+  id: string,
+  targetId: string,
+  position: TreeDropPosition,
+): Tree {
+  const currentSource = locate(tree.roots, id);
+  const currentTarget = locate(tree.roots, targetId);
+  if (
+    !currentSource ||
+    !currentTarget ||
+    id === targetId ||
+    containsNode(currentSource.node, targetId)
+  ) {
+    return tree;
+  }
+
+  // Avoid a fence rewrite when the drop describes the node's current slot.
+  if (currentSource.siblings === currentTarget.siblings) {
+    if (position === 'before' && currentSource.index === currentTarget.index - 1) return tree;
+    if (position === 'after' && currentSource.index === currentTarget.index + 1) return tree;
+  }
+  if (
+    position === 'child' &&
+    currentSource.parent?.id === currentTarget.node.id &&
+    currentSource.index === currentSource.siblings.length - 1
+  ) {
+    return tree;
+  }
+
+  const next = cloneTree(tree);
+  const source = locate(next.roots, id);
+  if (!source) return tree;
+  const [moved] = source.siblings.splice(source.index, 1);
+  if (source.parent) markDir(source.parent);
+
+  // Locate again after removal so same-sibling indices are current.
+  const target = locate(next.roots, targetId);
+  if (!target) return tree;
+  if (position === 'child') {
+    target.node.children.push(moved);
+    markDir(target.node);
+  } else {
+    target.siblings.splice(target.index + (position === 'after' ? 1 : 0), 0, moved);
+  }
+  return next;
+}
+
 export function moveItemUpOp(tree: Tree, id: string): Tree {
   const next = cloneTree(tree);
   const loc = locate(next.roots, id);

package/src/treeview/treeViewCommands.ts

@@ -13,12 +13,14 @@ import { findTreeBlockPos, parseTreeForNode } from './TreeViewExtension';
 import {
   addItemOp,
   indentItemOp,
+  moveItemOp,
   moveItemDownOp,
   moveItemUpOp,
   outdentItemOp,
   removeItemOp,
   renameItemOp,
   toggleDirOp,
+  type TreeDropPosition,
 } from './treeOps';
 
 export type TreeCommand =
@@ -32,6 +34,7 @@ export type TreeCommand =
   | { kind: 'renameItem'; id: string; label: string }
   | { kind: 'indentItem'; id: string }
   | { kind: 'outdentItem'; id: string }
+  | { kind: 'moveItem'; id: string; targetId: string; position: TreeDropPosition }
   | { kind: 'moveItemUp'; id: string }
   | { kind: 'moveItemDown'; id: string }
   | { kind: 'removeItem'; id: string }
@@ -79,6 +82,8 @@ export function applyTreeCommand(editor: Editor, blockId: string, cmd: TreeComma
       return applyOp(editor, blockId, (t) => indentItemOp(t, cmd.id));
     case 'outdentItem':
       return applyOp(editor, blockId, (t) => outdentItemOp(t, cmd.id));
+    case 'moveItem':
+      return applyOp(editor, blockId, (t) => moveItemOp(t, cmd.id, cmd.targetId, cmd.position));
     case 'moveItemUp':
       return applyOp(editor, blockId, (t) => moveItemUpOp(t, cmd.id));
     case 'moveItemDown':

package/src/writeCanvasSettings.ts

@@ -0,0 +1,30 @@
+import type { CSSProperties } from 'react';
+
+/** Host-controlled typography for the markdown Write canvas. */
+export interface WriteCanvasSettings {
+  /** Base text size in CSS pixels. Headings continue to scale relative to it. */
+  textSize?: number;
+  /** Unitless line-height multiplier for body text. */
+  lineSpacing?: number;
+}
+
+type WriteCanvasCSSProperties = CSSProperties & {
+  '--squisq-write-text-size'?: string;
+  '--squisq-write-line-spacing'?: string;
+};
+
+/** Translate public Write-canvas settings into the CSS variables consumed by the editor. */
+export function writeCanvasSettingsStyle(settings?: WriteCanvasSettings): WriteCanvasCSSProperties {
+  const style: WriteCanvasCSSProperties = {};
+  if (isPositiveFinite(settings?.textSize)) {
+    style['--squisq-write-text-size'] = `${settings.textSize}px`;
+  }
+  if (isPositiveFinite(settings?.lineSpacing)) {
+    style['--squisq-write-line-spacing'] = String(settings.lineSpacing);
+  }
+  return style;
+}
+
+function isPositiveFinite(value: number | undefined): value is number {
+  return typeof value === 'number' && Number.isFinite(value) && value > 0;
+}