astro-tractstack 2.0.9 → 2.0.11

package/templates/src/stores/nodes.ts

@@ -1,4 +1,15 @@
 import { atom, map } from 'nanostores';
+import { ulid } from 'ulid';
+import { processClassesForViewports } from '@/utils/compositor/reduceNodesClassNames';
+import { NotificationSystem } from '@/stores/notificationSystem';
+import { cloneDeep, isDeepEqual } from '@/utils/helpers';
+import { extractClassesFromNodes } from '@/utils/compositor/nodesHelper';
+import { handleClickEventDefault } from '@/utils/compositor/handleClickEvent';
+import allowInsert from '@/utils/compositor/allowInsert';
+import { reservedSlugs } from '@/constants';
+import { NodesHistory, PatchOp } from '@/stores/nodesHistory';
+import { moveNodeAtLocationInContext } from '@/utils/compositor/nodesHelper';
+import { MarkdownGenerator } from '@/utils/compositor/nodesMarkdownGenerator';
 import {
   hasButtonPayload,
   hasTagName,
@@ -40,22 +51,14 @@ import type {
 } from '@/types/compositorTypes';
 import type { NodeProps, WidgetProps } from '@/types/nodeProps';
 import type { CSSProperties } from 'react';
-import { processClassesForViewports } from '@/utils/compositor/reduceNodesClassNames';
-import { ulid } from 'ulid';
-import { NotificationSystem } from '@/stores/notificationSystem';
-import { cloneDeep, isDeepEqual } from '@/utils/helpers';
-import { extractClassesFromNodes } from '@/utils/compositor/nodesHelper';
-import { handleClickEventDefault } from '@/utils/compositor/handleClickEvent';
-import allowInsert from '@/utils/compositor/allowInsert';
-import { reservedSlugs } from '@/constants';
-import { NodesHistory, PatchOp } from '@/stores/nodesHistory';
-import { moveNodeAtLocationInContext } from '@/utils/compositor/nodesHelper';
-import { MarkdownGenerator } from '@/utils/compositor/nodesMarkdownGenerator';
+import { selectionStore } from '@/stores/selection';
+import type { SelectionRange, SelectionStoreState } from '@/stores/selection';
 import type { CompositorProps } from '@/components/compositor/Compositor';
 
 const blockedClickNodes = new Set<string>(['em', 'strong']);
 export const ROOT_NODE_NAME = 'root';
 export const UNDO_REDO_HISTORY_CAPACITY = 500;
+const VERBOSE = false;
 
 function strippedStyles(obj: Record<string, string[]>) {
   return Object.fromEntries(
@@ -337,10 +340,17 @@ export class NodesContext {
     // click handler based on toolModeVal
     switch (toolModeVal) {
       case `styles`:
-        handleClickEventDefault(node, dblClick, this.clickedParentLayer.get());
+        const selection = selectionStore.get();
+        if (!selection.isActive)
+          handleClickEventDefault(
+            node,
+            dblClick,
+            this.clickedParentLayer.get()
+          );
         break;
       case `text`:
         if (
+          dblClick &&
           node.nodeType === 'TagElement' &&
           'tagName' in node &&
           (node.tagName === 'a' || node.tagName === 'button')
@@ -359,12 +369,6 @@ export class NodesContext {
             dblClick,
             this.clickedParentLayer.get()
           );
-        } else {
-          handleClickEventDefault(
-            node,
-            dblClick,
-            this.clickedParentLayer.get()
-          );
         }
         break;
       case `eraser`:
@@ -377,6 +381,578 @@ export class NodesContext {
     this.setClickedParentLayer(null);
   }
 
+  public async wrapRangeInAnchor(
+    range: SelectionStoreState
+  ): Promise<string | null> {
+    if (
+      !range.startNodeId ||
+      !range.endNodeId ||
+      !range.lcaNodeId ||
+      !range.blockNodeId
+    ) {
+      return Promise.resolve(null);
+    }
+
+    const originalAllNodes = new Map(this.allNodes.get());
+    const originalParentNodes = new Map(this.parentNodes.get());
+    const paneNodeId = this.getClosestNodeTypeFromId(range.blockNodeId, 'Pane');
+    const originalPaneNode = this.allNodes.get().get(paneNodeId)
+      ? (cloneDeep(this.allNodes.get().get(paneNodeId)) as PaneNode)
+      : null;
+    const wrapperNodeId = `a-${ulid()}`;
+
+    const redoLogic = (): string | null => {
+      if (!range.startNodeId || !range.endNodeId || !range.lcaNodeId)
+        return null;
+
+      let startNodeToFind: string | null = null;
+      let endNodeToFind: string | null = null;
+
+      if (range.startNodeId === range.endNodeId) {
+        const { left: nodeSplitAtEnd } = this._splitTextNode(
+          range.endNodeId,
+          range.endCharOffset
+        );
+
+        const { right: middleNode } = this._splitTextNode(
+          nodeSplitAtEnd.id,
+          range.startCharOffset
+        );
+
+        if (!middleNode) {
+          console.error(
+            'wrapRangeInAnchor: Single-node split failed to create a middle node.'
+          );
+          return null;
+        }
+        startNodeToFind = middleNode.id;
+        endNodeToFind = middleNode.id;
+      } else {
+        const { left: endNodeAfterSplit } = this._splitTextNode(
+          range.endNodeId,
+          range.endCharOffset
+        );
+        endNodeToFind = endNodeAfterSplit.id;
+
+        const { right: startNodeAfterSplit } = this._splitTextNode(
+          range.startNodeId,
+          range.startCharOffset
+        );
+
+        if (!startNodeAfterSplit) {
+          console.error(
+            'wrapRangeInAnchor: Multi-node split failed to create a start node.'
+          );
+          return null;
+        }
+        startNodeToFind = startNodeAfterSplit.id;
+      }
+
+      const newAllNodes = new Map(this.allNodes.get());
+      const newParentNodes = new Map(this.parentNodes.get());
+      const parentChildren = newParentNodes.get(range.lcaNodeId!);
+
+      if (!parentChildren) {
+        console.error('wrapRangeInAnchor: Could not find parent children');
+        return null;
+      }
+
+      const startIndex = parentChildren.indexOf(startNodeToFind!);
+      const endIndex = parentChildren.indexOf(endNodeToFind!);
+
+      if (startIndex === -1 || endIndex === -1) {
+        console.error(
+          'wrapRangeInAnchor: Could not find split nodes in parent',
+          {
+            startIndex,
+            endIndex,
+            startNodeToFind,
+            endNodeToFind,
+          }
+        );
+        return null;
+      }
+
+      const actualStartIndex = Math.min(startIndex, endIndex);
+      const actualEndIndex = Math.max(startIndex, endIndex);
+
+      const newParentChildren = [...parentChildren];
+      const nodesToWrapIds = newParentChildren.slice(
+        actualStartIndex,
+        actualEndIndex + 1
+      );
+
+      if (nodesToWrapIds.length === 0) {
+        console.error('wrapRangeInAnchor: No nodes to wrap.');
+        return null;
+      }
+
+      const nodesToWrap = nodesToWrapIds
+        .map((id) => newAllNodes.get(id))
+        .filter((n): n is BaseNode => !!n);
+
+      const wrapperNode: FlatNode = {
+        id: wrapperNodeId,
+        nodeType: 'TagElement',
+        parentId: range.lcaNodeId,
+        tagName: 'a',
+        href: '#',
+        overrideClasses: {},
+      };
+      newAllNodes.set(wrapperNode.id, wrapperNode);
+      newParentNodes.set(wrapperNode.id, []);
+
+      for (const node of nodesToWrap) {
+        const nodeToUpdate = newAllNodes.get(node.id);
+        if (nodeToUpdate) {
+          nodeToUpdate.parentId = wrapperNode.id;
+        }
+        newParentNodes.get(wrapperNode.id)!.push(node.id);
+      }
+
+      newParentChildren.splice(
+        actualStartIndex,
+        nodesToWrapIds.length,
+        wrapperNode.id
+      );
+      newParentNodes.set(range.lcaNodeId!, newParentChildren);
+
+      this.allNodes.set(newAllNodes);
+      this.parentNodes.set(newParentNodes);
+
+      if (originalPaneNode) {
+        this.modifyNodes([{ ...originalPaneNode, isChanged: true }], {
+          notify: false,
+          recordHistory: false,
+        });
+      }
+
+      this.notifyNode(range.blockNodeId!);
+      return wrapperNode.id;
+    };
+
+    const undoLogic = () => {
+      this.allNodes.set(originalAllNodes);
+      this.parentNodes.set(originalParentNodes);
+
+      if (originalPaneNode) {
+        this.modifyNodes([originalPaneNode], {
+          notify: false,
+          recordHistory: false,
+        });
+      }
+      this.notifyNode(range.blockNodeId!);
+    };
+
+    const newAnchorId = redoLogic();
+
+    this.history.addPatch({
+      op: PatchOp.REPLACE,
+      undo: undoLogic,
+      redo: redoLogic,
+    });
+
+    return new Promise((resolve) =>
+      setTimeout(() => resolve(newAnchorId), 310)
+    );
+  }
+
+  /**
+   * Splits a text node at a given character offset.
+   * This is a robust function that correctly handles splits at offset 0
+   * by creating an empty left node, and splits at the end by returning
+   * the original node as 'left' and null as 'right'.
+   *
+   * @param nodeId - The ID of the 'text' node to split.
+   * @param offset - The character offset at which to split.
+   * @returns An object containing the left and (optional) right node.
+   */
+  private _splitTextNode(
+    nodeId: string,
+    offset: number
+  ): { left: FlatNode; right: FlatNode | null } {
+    console.log(`%c[_splitTextNode] CALLED`, 'color: #f59e0b;', {
+      nodeId,
+      offset,
+    });
+
+    const allNodes = new Map(this.allNodes.get());
+    const parentNodes = new Map(this.parentNodes.get());
+    const originalNode = allNodes.get(nodeId) as FlatNode;
+
+    if (
+      !originalNode ||
+      originalNode.tagName !== 'text' ||
+      typeof originalNode.copy !== 'string' // Check for copy existence
+    ) {
+      console.warn('_splitTextNode: Invalid node or type.', {
+        nodeId,
+        offset,
+        originalNode,
+      });
+      return { left: originalNode, right: null };
+    }
+
+    const text = originalNode.copy;
+
+    // Handle split at the end of the string (no-op)
+    if (offset >= text.length) {
+      console.warn(
+        `%c[_splitTextNode] OFFSET >= LENGTH DETECTED. Returning right: null`,
+        'color: #f59e0b;',
+        { nodeId, text, offset }
+      );
+      return { left: originalNode, right: null };
+    }
+
+    // Handle split at the beginning of the string (THE FIX)
+    if (offset === 0) {
+      console.log(
+        `%c[_splitTextNode] OFFSET 0 DETECTED. Creating empty left node.`,
+        'color: #f59e0b; font-weight: bold;',
+        { nodeId, text }
+      );
+
+      // Create a new empty node for the "left" half
+      const leftNode: FlatNode = {
+        id: ulid(),
+        nodeType: 'TagElement',
+        parentId: originalNode.parentId,
+        tagName: 'text',
+        copy: '', // Empty text
+      };
+      allNodes.set(leftNode.id, leftNode);
+
+      // The original node becomes the "right" half
+      const rightNode = originalNode;
+
+      // Insert the new empty node *before* the original node
+      const parentChildren = parentNodes.get(leftNode.parentId!)!;
+      if (!parentChildren) {
+        console.error(
+          '_splitTextNode (offset 0): Could not find parent children list for',
+          {
+            parentId: leftNode.parentId,
+          }
+        );
+        // We still return the nodes so the operation MIGHT succeed
+        return { left: leftNode, right: rightNode };
+      }
+
+      const nodeIndex = parentChildren.indexOf(rightNode.id);
+      const newParentChildren = [...parentChildren];
+
+      if (nodeIndex > -1) {
+        newParentChildren.splice(nodeIndex, 0, leftNode.id);
+      } else {
+        console.warn(
+          '_splitTextNode (offset 0): Could not find node in parent, prepending.',
+          {
+            nodeId: rightNode.id,
+            parentId: leftNode.parentId,
+          }
+        );
+        newParentChildren.unshift(leftNode.id);
+      }
+
+      parentNodes.set(leftNode.parentId!, newParentChildren);
+      this.allNodes.set(allNodes);
+      this.parentNodes.set(parentNodes);
+
+      // Return the new empty node as 'left' and the original node as 'right'
+      // This allows wrapRangeInSpan to find the original node as 'middleNode'
+      return { left: leftNode, right: rightNode };
+    }
+
+    // Standard split (offset > 0 and < text.length)
+    console.log(
+      `%c[_splitTextNode] Performing standard split...`,
+      'color: green;',
+      { text, offset }
+    );
+
+    const leftText = text.substring(0, offset);
+    const rightText = text.substring(offset);
+
+    // Modify the original node to become the 'left' node
+    const leftNode = cloneDeep(originalNode);
+    leftNode.copy = leftText;
+    allNodes.set(leftNode.id, leftNode);
+
+    // Create a new node for the 'right' half
+    const rightNode: FlatNode = {
+      id: ulid(),
+      nodeType: 'TagElement',
+      parentId: leftNode.parentId,
+      tagName: 'text',
+      copy: rightText,
+    };
+    allNodes.set(rightNode.id, rightNode);
+
+    const parentChildren = parentNodes.get(leftNode.parentId!)!;
+    if (!parentChildren) {
+      console.error(
+        '_splitTextNode (standard): Could not find parent children list for',
+        {
+          parentId: leftNode.parentId,
+        }
+      );
+      return { left: leftNode, right: null };
+    }
+
+    const nodeIndex = parentChildren.indexOf(leftNode.id);
+    const newParentChildren = [...parentChildren];
+
+    if (nodeIndex > -1) {
+      // Insert the new 'right' node immediately after the 'left' node
+      newParentChildren.splice(nodeIndex + 1, 0, rightNode.id);
+    } else {
+      console.warn(
+        '_splitTextNode (standard): Could not find node in parent, appending.',
+        {
+          nodeId: leftNode.id,
+          parentId: leftNode.parentId,
+        }
+      );
+      newParentChildren.push(rightNode.id);
+    }
+
+    parentNodes.set(leftNode.parentId!, newParentChildren);
+
+    this.allNodes.set(allNodes);
+    this.parentNodes.set(parentNodes);
+
+    return { left: leftNode, right: rightNode };
+  }
+
+  /**
+   * Wraps a range of nodes (typically text nodes) inside a new formatting
+   * element, like a <span>. This is an atomic operation with history support.
+   *
+   * @param range - The selection range state.
+   * @param tagName - The tag name for the wrapper element (e.g., 'span').
+   * @returns A Promise that resolves with the new wrapper node's ID, or null.
+   */
+  // Replacement for wrapRangeInSpan in src/stores/nodes.ts
+
+  public async wrapRangeInSpan(
+    range: SelectionRange,
+    tagName: 'span'
+  ): Promise<string | null> {
+    if (
+      !range.startNodeId ||
+      !range.endNodeId ||
+      !range.lcaNodeId ||
+      !range.blockNodeId
+    ) {
+      return Promise.resolve(null);
+    }
+
+    const originalAllNodes = new Map(this.allNodes.get());
+    const originalParentNodes = new Map(this.parentNodes.get());
+    const paneNodeId = this.getClosestNodeTypeFromId(range.blockNodeId, 'Pane');
+    const originalPaneNode = this.allNodes.get().get(paneNodeId)
+      ? (cloneDeep(this.allNodes.get().get(paneNodeId)) as PaneNode)
+      : null;
+    const wrapperNodeId = ulid();
+
+    const redoLogic = (): string | null => {
+      if (VERBOSE)
+        console.log(
+          '%c[wrapRangeInSpan] START',
+          'color: blue; font-weight: bold;',
+          {
+            range: cloneDeep(range),
+            lcaChildren_BEFORE: cloneDeep(
+              this.parentNodes.get().get(range.lcaNodeId!)
+            ),
+          }
+        );
+      if (!range.startNodeId || !range.endNodeId || !range.lcaNodeId)
+        return null;
+
+      let startNodeToFind: string | null = null;
+      let endNodeToFind: string | null = null;
+
+      if (range.startNodeId === range.endNodeId) {
+        // SINGLE-NODE SELECTION
+        const { left: nodeSplitAtEnd } = this._splitTextNode(
+          range.endNodeId,
+          range.endCharOffset
+        );
+
+        const { right: middleNode } = this._splitTextNode(
+          nodeSplitAtEnd.id,
+          range.startCharOffset
+        );
+
+        if (!middleNode) {
+          console.error(
+            'wrapRangeInSpan: Single-node split failed to create a middle node.'
+          );
+          return null;
+        }
+        startNodeToFind = middleNode.id;
+        endNodeToFind = middleNode.id;
+      } else {
+        // MULTI-NODE SELECTION
+        const { left: endNodeAfterSplit } = this._splitTextNode(
+          range.endNodeId,
+          range.endCharOffset
+        );
+        endNodeToFind = endNodeAfterSplit.id;
+
+        const { right: startNodeAfterSplit } = this._splitTextNode(
+          range.startNodeId,
+          range.startCharOffset
+        );
+
+        if (!startNodeAfterSplit) {
+          console.error(
+            'wrapRangeInSpan: Multi-node split failed to create a start node.'
+          );
+          return null;
+        }
+        startNodeToFind = startNodeAfterSplit.id;
+      }
+      if (VERBOSE)
+        console.log('%c[wrapRangeInSpan] SPLIT COMPLETE', 'color: blue;', {
+          startNodeToFind,
+          endNodeToFind,
+          lcaChildren_AFTER_SPLIT: cloneDeep(
+            this.parentNodes.get().get(range.lcaNodeId!)
+          ),
+        });
+
+      const newAllNodes = new Map(this.allNodes.get());
+      const newParentNodes = new Map(this.parentNodes.get());
+      const parentChildren = newParentNodes.get(range.lcaNodeId!);
+
+      if (!parentChildren) {
+        console.error('wrapRangeInSpan: Could not find parent children');
+        return null;
+      }
+
+      const startIndex = parentChildren.indexOf(startNodeToFind!);
+      const endIndex = parentChildren.indexOf(endNodeToFind!);
+
+      if (startIndex === -1 || endIndex === -1) {
+        console.error('wrapRangeInSpan: Could not find split nodes in parent', {
+          startIndex,
+          endIndex,
+          startNodeToFind,
+          endNodeToFind,
+        });
+        return null;
+      }
+
+      const actualStartIndex = Math.min(startIndex, endIndex);
+      const actualEndIndex = Math.max(startIndex, endIndex);
+
+      const newParentChildren = [...parentChildren];
+      const nodesToWrapIds = newParentChildren.slice(
+        actualStartIndex,
+        actualEndIndex + 1
+      );
+      if (VERBOSE)
+        console.log('%c[wrapRangeInSpan] INDEXES', 'color: blue;', {
+          startIndex,
+          endIndex,
+          actualStartIndex,
+          actualEndIndex,
+        });
+
+      if (nodesToWrapIds.length === 0) {
+        console.error('wrapRangeInSpan: No nodes to wrap.');
+        return null;
+      }
+      if (VERBOSE)
+        console.log('%c[wrapRangeInSpan] NODES TO WRAP', 'color: orange;', {
+          nodesToWrapIds: cloneDeep(nodesToWrapIds),
+        });
+
+      const nodesToWrap = nodesToWrapIds
+        .map((id) => newAllNodes.get(id))
+        .filter((n): n is BaseNode => !!n);
+
+      const wrapperNode: FlatNode = {
+        id: wrapperNodeId,
+        nodeType: 'TagElement',
+        parentId: range.lcaNodeId,
+        tagName: tagName,
+      };
+      newAllNodes.set(wrapperNode.id, wrapperNode);
+      newParentNodes.set(wrapperNode.id, []);
+
+      for (const node of nodesToWrap) {
+        node.parentId = wrapperNode.id;
+        newParentNodes.get(wrapperNode.id)!.push(node.id);
+      }
+
+      newParentChildren.splice(
+        actualStartIndex,
+        nodesToWrapIds.length,
+        wrapperNode.id
+      );
+      newParentNodes.set(range.lcaNodeId!, newParentChildren);
+
+      this.allNodes.set(newAllNodes);
+      this.parentNodes.set(newParentNodes);
+
+      if (originalPaneNode) {
+        this.modifyNodes([{ ...originalPaneNode, isChanged: true }], {
+          notify: false,
+          recordHistory: false,
+        });
+      }
+      const lcaChildrenIds = newParentNodes.get(range.lcaNodeId!);
+      const finalLCAChildrenNodes = lcaChildrenIds
+        ? lcaChildrenIds.map((id) => newAllNodes.get(id))
+        : [];
+
+      const wrapperChildrenIds = newParentNodes.get(wrapperNodeId);
+      const finalWrapperChildrenNodes = wrapperChildrenIds
+        ? wrapperChildrenIds.map((id) => newAllNodes.get(id))
+        : [];
+
+      if (VERBOSE)
+        console.log(
+          '%c[wrapRangeInSpan] END (FINAL PAYLOAD)',
+          'color: green; font-weight: bold;',
+          {
+            wrapperNodeId,
+            lcaChildren_FINAL: finalLCAChildrenNodes,
+            wrapperChildren_FINAL: finalWrapperChildrenNodes,
+          }
+        );
+      this.notifyNode(range.blockNodeId!);
+      return wrapperNode.id;
+    };
+
+    const undoLogic = () => {
+      this.allNodes.set(originalAllNodes);
+      this.parentNodes.set(originalParentNodes);
+
+      if (originalPaneNode) {
+        this.modifyNodes([originalPaneNode], {
+          notify: false,
+          recordHistory: false,
+        });
+      }
+      this.notifyNode(range.blockNodeId!);
+    };
+
+    const newSpanId = redoLogic();
+
+    this.history.addPatch({
+      op: PatchOp.REPLACE,
+      undo: undoLogic,
+      redo: redoLogic,
+    });
+
+    return new Promise((resolve) => setTimeout(() => resolve(newSpanId), 310));
+  }
+
   private clickTimer: number | null = null;
   private DOUBLE_CLICK_DELAY = 300;
   private isProcessingDoubleClick = false;
@@ -877,6 +1453,35 @@ export class NodesContext {
                 : ``
             }`;
           }
+
+          if ('tagName' in node && node.tagName === 'span') {
+            const spanNode = node as FlatNode;
+            const [all, mobile, tablet, desktop] = processClassesForViewports(
+              { mobile: {}, tablet: {}, desktop: {} },
+              spanNode.overrideClasses || {},
+              1
+            );
+            const outlineClass =
+              this.toolModeValStore.get().value === 'styles'
+                ? ' outline outline-1 outline-dotted outline-gray-400/60'
+                : '';
+
+            const getClassString = (classes: string[]): string =>
+              classes && classes.length > 0 ? classes[0] : '';
+
+            if (isPreview) return getClassString(desktop) + outlineClass;
+            switch (viewport) {
+              case 'desktop':
+                return getClassString(desktop) + outlineClass;
+              case 'tablet':
+                return getClassString(tablet) + outlineClass;
+              case 'mobile':
+                return getClassString(mobile) + outlineClass;
+              default:
+                return getClassString(all) + outlineClass;
+            }
+          }
+
           const closestPaneId = this.getClosestNodeTypeFromId(
             nodeId,
             'Markdown'
@@ -1362,7 +1967,8 @@ export class NodesContext {
         });
         break;
     }
-    this.toolModeValStore.set({ value: 'text' });
+    this.toolModeValStore.set({ value: 'styles' });
+    this.notifyNode('root');
   }
 
   addTemplateImpressionNode(targetId: string, node: ImpressionNode) {
@@ -2455,7 +3061,7 @@ export class NodesContext {
         recordHistory: false,
       });
 
-      this.notifyNode(parentId);
+      this.notifyNode(`root`);
     };
 
     // --- 4. Define the atomic "undo" (backward) operation ---
@@ -2470,7 +3076,7 @@ export class NodesContext {
         recordHistory: false,
       });
 
-      this.notifyNode(parentId);
+      this.notifyNode(`root`);
     };
 
     // --- 5. Execute the operation and add to history ---