astro-tractstack 2.0.9 → 2.0.11

package/dist/index.js

@@ -381,12 +381,6 @@ async function w(t, e, c) {
       src: t("../templates/src/components/compositor/elements/Svg.tsx"),
       dest: "src/components/compositor/elements/Svg.tsx"
     },
-    {
-      src: t(
-        "../templates/src/components/compositor/elements/PlayButton.tsx"
-      ),
-      dest: "src/components/compositor/elements/PlayButton.tsx"
-    },
     // Compositor panels
     {
       src: t(
@@ -581,6 +575,10 @@ async function w(t, e, c) {
       src: t("../templates/src/stores/nodesHistory.ts"),
       dest: "src/stores/nodesHistory.ts"
     },
+    {
+      src: t("../templates/src/stores/selection.ts"),
+      dest: "src/stores/selection.ts"
+    },
     // AAI utils
     {
       src: t("../templates/src/utils/aai/getTitleSlug.ts"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-tractstack",
-  "version": "2.0.9",
+  "version": "2.0.11",
   "description": "Astro integration for TractStack - redeeming the web from boring experiences",
   "type": "module",
   "main": "dist/index.js",

package/templates/css/custom.css

@@ -43,9 +43,3 @@ body {
 @media (prefers-reduced-motion) {
   scroll-behavior: auto;
 }
-
-[contenteditable]:empty:before {
-  content: attr(data-placeholder);
-  color: #888;
-  font-style: italic;
-}

package/templates/src/components/codehooks/EpinetDurationSelector.tsx

@@ -512,7 +512,7 @@ const EpinetDurationSelector = ({
                             onBeliefFilterChange(filter.beliefSlug, value)
                           }
                           type="button"
-                          className={`flex items-center gap-x-1.5 rounded-full px-3 py-1 text-sm font-medium transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 ${
+                          className={`flex items-center gap-x-1.5 rounded-full px-3 py-1 text-sm font-bold transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 ${
                             selectedValue === value
                               ? 'bg-cyan-600 text-white shadow-sm'
                               : 'bg-gray-100 text-gray-700 hover:bg-gray-200'

package/templates/src/components/codehooks/FeaturedArticleSetup.tsx

@@ -2,7 +2,8 @@ import { useState, useEffect, useMemo, useRef } from 'react';
 import { useStore } from '@nanostores/react';
 import { Combobox } from '@ark-ui/react';
 import { createListCollection } from '@ark-ui/react/collection';
-import { ChevronUpDownIcon, CheckIcon } from '@heroicons/react/20/solid';
+import CheckIcon from '@heroicons/react/20/solid/CheckIcon';
+import ChevronUpDownIcon from '@heroicons/react/20/solid/ChevronUpDownIcon';
 import { fullContentMapStore, viewportKeyStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
 import { cloneDeep } from '@/utils/helpers';

package/templates/src/components/codehooks/ProductGridSetup.tsx

@@ -190,7 +190,7 @@ export const ProductGridSetup = (props: ProductGridSetupProps) => {
         <div className="space-y-2 rounded-md border p-3">
           <label
             htmlFor="productType"
-            className="text-sm font-medium text-gray-700"
+            className="text-sm font-bold text-gray-700"
           >
             Product Type
           </label>
@@ -209,7 +209,7 @@ export const ProductGridSetup = (props: ProductGridSetupProps) => {
         <div className="rounded-md border bg-gray-50 p-3">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm font-medium text-gray-600">
+              <p className="text-sm font-bold text-gray-600">
                 Selected Products
               </p>
               <p className="font-bold text-gray-900">
@@ -219,7 +219,7 @@ export const ProductGridSetup = (props: ProductGridSetupProps) => {
             <button
               type="button"
               onClick={() => setShowSelector(!showSelector)}
-              className="rounded bg-white px-3 py-1 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+              className="rounded bg-white px-3 py-1 text-sm font-bold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
             >
               {showSelector ? 'Close' : 'Change Selection'}
             </button>
@@ -235,7 +235,7 @@ export const ProductGridSetup = (props: ProductGridSetupProps) => {
                 lazyMount
                 unmountOnExit
               >
-                <Combobox.Label className="text-sm font-medium text-gray-700">
+                <Combobox.Label className="text-sm font-bold text-gray-700">
                   Find products to include
                 </Combobox.Label>
                 <Combobox.Control>

package/templates/src/components/compositor/Compositor.tsx

@@ -1,4 +1,9 @@
-import { useEffect, useState } from 'react';
+import {
+  useEffect,
+  useState,
+  useRef,
+  type MouseEvent as ReactMouseEvent, // Alias React's MouseEvent
+} from 'react';
 import { useStore } from '@nanostores/react';
 import {
   viewportKeyStore,
@@ -10,17 +15,31 @@ import {
   codehookMapStore,
   brandColourStore,
   hasArtpacksStore,
+  settingsPanelStore,
 } from '@/stores/storykeep';
 import { getCtx, ROOT_NODE_NAME, type NodesContext } from '@/stores/nodes';
 import { stopLoadingAnimation } from '@/utils/helpers';
 import Node from './Node';
 import { ARTPACKS } from '@/constants/brandThemes';
+import {
+  selectionStore,
+  resetSelectionStore,
+  type SelectionStoreState,
+} from '@/stores/selection';
 import type { LoadData } from '@/types/compositorTypes';
 import type {
   Theme,
   BrandConfig,
   FullContentMapItem,
 } from '@/types/tractstack';
+import type { SelectionOrigin } from '@/types/nodeProps';
+
+type SelectionRect = {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+};
 
 export type CompositorProps = {
   nodes: LoadData | null;
@@ -33,10 +52,235 @@ export type CompositorProps = {
   fullCanonicalURL: string;
 };
 
+const VERBOSE = false;
+const LOG_PREFIX = '[Compositor] ';
+
 export const Compositor = (props: CompositorProps) => {
   const [initialized, setInitialized] = useState(false);
   const [updateCounter, setUpdateCounter] = useState(0);
-  const [isLoading, setIsLoading] = useState(true); // Start with loading true
+  const [isLoading, setIsLoading] = useState(true);
+
+  const [selectionRect, setSelectionRect] = useState<SelectionRect | null>(
+    null
+  );
+  const isDragging = useRef(false);
+  const selectionOrigin = useRef<SelectionOrigin | null>(null);
+  const dragStartCoords = useRef<{ x: number; y: number } | null>(null);
+
+  const $viewportKey = useStore(viewportKeyStore);
+  const $selection = useStore(selectionStore);
+  const viewportMaxWidth =
+    $viewportKey.value === `mobile`
+      ? 600
+      : $viewportKey.value === `tablet`
+        ? 1000
+        : 1500;
+  const viewportMinWidth =
+    $viewportKey.value === `mobile`
+      ? null
+      : $viewportKey.value === `tablet`
+        ? 801
+        : 1368;
+
+  const handleDragStart = (
+    origin: SelectionOrigin,
+    e: ReactMouseEvent<HTMLElement> // Use aliased React MouseEvent
+  ) => {
+    if (VERBOSE)
+      console.log(LOG_PREFIX + 'handleDragStart FIRED', { origin, event: e });
+    if (isDragging.current) {
+      if (VERBOSE)
+        console.log(LOG_PREFIX + 'handleDragStart aborted: already dragging.');
+      return;
+    }
+    isDragging.current = true;
+    selectionOrigin.current = origin;
+    dragStartCoords.current = { x: e.clientX, y: e.clientY };
+
+    resetSelectionStore();
+    if (VERBOSE) console.log(LOG_PREFIX + 'Selection store reset.');
+    selectionStore.setKey('isDragging', true);
+    selectionStore.setKey('blockNodeId', origin.blockNodeId);
+    selectionStore.setKey('lcaNodeId', origin.lcaNodeId);
+    selectionStore.setKey('startNodeId', origin.startNodeId);
+    selectionStore.setKey('startCharOffset', origin.startCharOffset);
+    selectionStore.setKey('endNodeId', origin.endNodeId);
+    selectionStore.setKey('endCharOffset', origin.endCharOffset);
+    if (VERBOSE)
+      console.log(
+        LOG_PREFIX + 'Selection store updated with origin:',
+        selectionStore.get()
+      );
+
+    const initialRect = {
+      left: e.clientX,
+      top: e.clientY,
+      width: 0,
+      height: 0,
+    };
+    setSelectionRect(initialRect);
+    if (VERBOSE)
+      console.log(LOG_PREFIX + 'Initial selectionRect set:', initialRect);
+
+    if (VERBOSE) console.log(LOG_PREFIX + 'Adding window event listeners...');
+    try {
+      window.addEventListener('mousemove', handleDragMove);
+      window.addEventListener('mouseup', handleMouseUp);
+      if (VERBOSE)
+        console.log(LOG_PREFIX + 'Window event listeners successfully added.');
+    } catch (error) {
+      console.error(LOG_PREFIX + 'Error adding window event listeners:', error);
+    }
+  };
+
+  const handleDragMove = (e: globalThis.MouseEvent) => {
+    if (
+      !isDragging.current ||
+      !selectionOrigin.current ||
+      !dragStartCoords.current
+    ) {
+      return;
+    }
+
+    const startX = dragStartCoords.current.x;
+    const startY = dragStartCoords.current.y;
+    const currentX = e.clientX;
+    const currentY = e.clientY;
+
+    const newRect = {
+      left: Math.min(startX, currentX),
+      top: Math.min(startY, currentY),
+      width: Math.abs(currentX - startX),
+      height: Math.abs(currentY - startY),
+    };
+    setSelectionRect(newRect);
+
+    const elementAtPoint = document.elementFromPoint(currentX, currentY);
+    if (!elementAtPoint) return;
+
+    const textNodeElement = elementAtPoint.closest(
+      '[data-parent-text-node-id]'
+    );
+
+    if (textNodeElement) {
+      const parentBlockNodeId =
+        textNodeElement
+          .closest('[data-node-id]')
+          ?.getAttribute('data-node-id') || null;
+
+      if (parentBlockNodeId !== selectionOrigin.current.blockNodeId) {
+        return;
+      }
+
+      const endNodeId = textNodeElement.getAttribute(
+        'data-parent-text-node-id'
+      );
+      const endCharOffset = parseInt(
+        textNodeElement.getAttribute('data-end-char-offset') || '0',
+        10
+      );
+
+      if (endNodeId) {
+        selectionStore.setKey('endNodeId', endNodeId);
+        selectionStore.setKey('endCharOffset', endCharOffset);
+      }
+    }
+  };
+
+  const handleMouseUp = async (e: globalThis.MouseEvent) => {
+    if (VERBOSE) console.log(LOG_PREFIX + 'handleMouseUp FIRED', { event: e });
+    if (!isDragging.current) {
+      if (VERBOSE)
+        console.log(LOG_PREFIX + 'handleMouseUp aborted: was not dragging.');
+      return;
+    }
+
+    if (VERBOSE) console.log(LOG_PREFIX + 'Removing window event listeners...');
+    try {
+      window.removeEventListener('mousemove', handleDragMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+      if (VERBOSE)
+        console.log(
+          LOG_PREFIX + 'Window event listeners successfully removed.'
+        );
+    } catch (error) {
+      console.error(
+        LOG_PREFIX + 'Error removing window event listeners:',
+        error
+      );
+    }
+
+    isDragging.current = false;
+    dragStartCoords.current = null;
+    setSelectionRect(null);
+    if (VERBOSE)
+      console.log(LOG_PREFIX + 'Drag state reset, selectionRect cleared.');
+
+    const selectionRange = selectionStore.get();
+    if (VERBOSE)
+      console.log(
+        LOG_PREFIX + 'Final selection range from store:',
+        selectionRange
+      );
+
+    if (
+      !selectionRange.startNodeId ||
+      !selectionRange.endNodeId ||
+      (selectionRange.startNodeId === selectionRange.endNodeId &&
+        selectionRange.startCharOffset === selectionRange.endCharOffset)
+    ) {
+      if (VERBOSE)
+        console.log(
+          LOG_PREFIX +
+            'handleMouseUp aborted: invalid or zero-length selection.'
+        );
+      resetSelectionStore();
+      selectionOrigin.current = null;
+      return;
+    }
+
+    if (VERBOSE)
+      console.log(LOG_PREFIX + 'Calculating selection bounding box.');
+
+    const startElement = document.querySelector(
+      `[data-parent-text-node-id="${selectionRange.startNodeId}"][data-start-char-offset="${selectionRange.startCharOffset}"]`
+    );
+    const endElement = document.querySelector(
+      `[data-parent-text-node-id="${selectionRange.endNodeId}"]`
+    );
+
+    let selectionBox = null;
+    if (startElement && endElement) {
+      const startRect = startElement.getBoundingClientRect();
+      const endRect = endElement.getBoundingClientRect();
+      const contentRect = document
+        .getElementById('content')
+        ?.getBoundingClientRect();
+
+      if (contentRect) {
+        selectionBox = {
+          top: Math.min(startRect.top, endRect.top) - contentRect.top,
+          left: Math.min(startRect.left, endRect.left) - contentRect.left,
+        };
+      }
+    }
+
+    if (selectionBox) {
+      if (VERBOSE)
+        console.log(LOG_PREFIX + 'Selection complete, setting isActive: true.');
+      selectionStore.setKey('selectionBox', selectionBox);
+      selectionStore.setKey('isActive', true);
+    } else {
+      if (VERBOSE)
+        console.log(
+          LOG_PREFIX + 'Could not calculate bounding box, resetting selection.'
+        );
+      resetSelectionStore();
+    }
+
+    selectionStore.setKey('isDragging', false);
+    selectionOrigin.current = null;
+  };
 
   useEffect(() => {
     fullContentMapStore.set(props.fullContentMap);
@@ -56,35 +300,28 @@ export const Compositor = (props: CompositorProps) => {
     props.availableCodeHooks,
   ]);
 
-  const $viewportKey = useStore(viewportKeyStore);
-  const viewportMaxWidth =
-    $viewportKey.value === `mobile`
-      ? 600
-      : $viewportKey.value === `tablet`
-        ? 1000
-        : 1500;
-  const viewportMinWidth =
-    $viewportKey.value === `mobile`
-      ? null
-      : $viewportKey.value === `tablet`
-        ? 801
-        : 1368;
-
   // Initialize nodes tree and set up subscriptions
   useEffect(() => {
+    if (VERBOSE) console.log(LOG_PREFIX + 'Compositor initializing...');
     getCtx(props).buildNodesTreeFromRowDataMadeNodes(props.nodes);
     hasArtpacksStore.set(ARTPACKS);
     setInitialized(true);
+    if (VERBOSE)
+      console.log(LOG_PREFIX + 'Nodes tree built, initialized set to true.');
 
     // Stop initial loading after initialization
     setTimeout(() => {
       setIsLoading(false);
       stopLoadingAnimation();
+      if (VERBOSE)
+        console.log(LOG_PREFIX + 'Initial loading animation stopped.');
     }, 300);
 
     const unsubscribe = getCtx(props).notifications.subscribe(
       ROOT_NODE_NAME,
       () => {
+        if (VERBOSE)
+          console.log(LOG_PREFIX + 'Received root notification, updating...');
         // Start loading state
         setIsLoading(true);
 
@@ -95,16 +332,83 @@ export const Compositor = (props: CompositorProps) => {
         setTimeout(() => {
           setIsLoading(false);
           stopLoadingAnimation();
+          if (VERBOSE)
+            console.log(LOG_PREFIX + 'Update loading animation stopped.');
         }, 300);
       }
     );
 
+    const unsubscribeToolMode = getCtx(props).toolModeValStore.subscribe(
+      (mode) => {
+        if (VERBOSE) console.log(LOG_PREFIX + 'Tool mode changed:', mode.value);
+        if (mode.value !== 'styles') {
+          if (VERBOSE)
+            console.log(
+              LOG_PREFIX + 'Exited styles mode, resetting selection store.'
+            );
+          resetSelectionStore();
+          // Ensure drag state is also reset if mode changes mid-drag
+          if (isDragging.current) {
+            if (VERBOSE)
+              console.log(
+                LOG_PREFIX + 'Mode changed mid-drag, cleaning up listeners.'
+              );
+            window.removeEventListener('mousemove', handleDragMove);
+            window.removeEventListener('mouseup', handleMouseUp);
+            isDragging.current = false;
+            dragStartCoords.current = null;
+            setSelectionRect(null);
+            selectionOrigin.current = null;
+          }
+        }
+      }
+    );
+
+    // Cleanup function
     return () => {
+      if (VERBOSE)
+        console.log(LOG_PREFIX + 'Compositor unmounting, cleaning up...');
       unsubscribe();
+      unsubscribeToolMode();
       stopLoadingAnimation();
+      // Ensure listeners are removed on unmount
+      window.removeEventListener('mousemove', handleDragMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+      if (VERBOSE) console.log(LOG_PREFIX + 'Cleanup complete.');
     };
   }, []);
 
+  useEffect(() => {
+    const handleAction = async () => {
+      if (!$selection.isActive || !$selection.pendingAction) {
+        return;
+      }
+
+      const ctx = getCtx(props);
+      const range = $selection;
+
+      if ($selection.pendingAction === 'style') {
+        if (VERBOSE) console.log(LOG_PREFIX + 'useEffect acting on: style');
+        await ctx.wrapRangeInSpan(range as SelectionStoreState, 'span');
+        resetSelectionStore();
+      }
+
+      if ($selection.pendingAction === 'link') {
+        if (VERBOSE) console.log(LOG_PREFIX + 'useEffect acting on: link');
+        const newAnchorNodeId = await ctx.wrapRangeInAnchor(
+          range as SelectionStoreState
+        );
+        if (newAnchorNodeId) {
+          ctx.handleInsertSignal('a', newAnchorNodeId);
+        }
+        resetSelectionStore();
+      }
+      ctx.notifyNode('root');
+    };
+
+    handleAction();
+  }, [$selection.pendingAction, $selection.isActive]);
+
   return (
     <div
       id="content" // This ID is used by startLoadingAnimation
@@ -130,6 +434,20 @@ export const Compositor = (props: CompositorProps) => {
         </div>
       )}
 
+      {/* Selection drag box */}
+      {selectionRect && (
+        <div
+          className="bg-mygreen/20 fixed z-50 border border-blue-600"
+          style={{
+            left: `${selectionRect.left}px`,
+            top: `${selectionRect.top}px`,
+            width: `${selectionRect.width}px`,
+            height: `${selectionRect.height}px`,
+            pointerEvents: 'none',
+          }}
+        />
+      )}
+
       {/* Main content */}
       {initialized && (
         <Node
@@ -137,6 +455,7 @@ export const Compositor = (props: CompositorProps) => {
           key={`${props.id}-${updateCounter}`}
           ctx={props.ctx}
           config={props.config}
+          onDragStart={handleDragStart}
         />
       )}
     </div>

package/templates/src/components/compositor/Node.tsx

@@ -1,7 +1,14 @@
-import { memo, type ReactElement, useEffect, useState } from 'react';
+import {
+  memo,
+  type ReactElement,
+  useEffect,
+  useState,
+  createElement,
+  type MouseEvent,
+} from 'react';
 import { useStore } from '@nanostores/react';
 import { getCtx } from '@/stores/nodes';
-import { styleElementInfoStore } from '@/stores/storykeep';
+import { styleElementInfoStore, viewportKeyStore } from '@/stores/storykeep';
 import { getType } from '@/utils/compositor/typeGuards';
 import { NodeWithGuid } from './NodeWithGuid';
 import PanelVisibilityWrapper from './PanelVisibilityWrapper';
@@ -31,13 +38,16 @@ import StoryFragmentTitlePanel from '@/components/edit/storyfragment/StoryFragme
 import ContextPanePanel from '@/components/edit/context/ContextPaneConfig';
 import ContextPaneTitlePanel from '@/components/edit/context/ContextPaneConfig_title';
 import { regexpHook } from '@/constants';
+import { RenderChildren } from './nodes/RenderChildren';
 import type {
   StoryFragmentNode,
   PaneNode,
   BaseNode,
   FlatNode,
 } from '@/types/compositorTypes';
-import type { NodeProps } from '@/types/nodeProps';
+import type { NodeProps, SelectionOrigin } from '@/types/nodeProps';
+
+const VERBOSE = false;
 
 function parseCodeHook(node: BaseNode | FlatNode) {
   if ('codeHookParams' in node && Array.isArray(node.codeHookParams)) {
@@ -84,7 +94,7 @@ const getElement = (
   const isPreview = getCtx(props).rootNodeId.get() === `tmp`;
   const hasPanes = useStore(getCtx(props).hasPanes);
   const isTemplate = useStore(getCtx(props).isTemplate);
-  const sharedProps = { nodeId: node.id, ctx: props.ctx, config: props.config };
+  const sharedProps = { ...props, nodeId: node.id };
   const type = getType(node);
 
   switch (type) {
@@ -274,6 +284,75 @@ const getElement = (
     case 'aside':
     case 'p': {
       const toolModeVal = getCtx(props).toolModeValStore.get().value;
+
+      if (toolModeVal === 'styles') {
+        const className = getCtx(props).getNodeClasses(
+          node.id,
+          viewportKeyStore.get().value
+        );
+
+        const handleMouseDown = (e: MouseEvent<HTMLElement>) => {
+          if (VERBOSE)
+            console.log('[Node.tsx] handleMouseDown FIRED', { event: e });
+          if (!props.onDragStart) {
+            if (VERBOSE)
+              console.log(
+                '[Node.tsx] handleMouseDown ABORTED: no onDragStart prop'
+              );
+            return;
+          }
+          e.preventDefault();
+          if (VERBOSE) console.log('[Node.tsx] preventDefault called');
+
+          const target = e.target as HTMLElement;
+          if (VERBOSE) console.log('[Node.tsx] mousedown target:', target);
+          const textNodeElement = target.closest('[data-parent-text-node-id]');
+
+          if (textNodeElement) {
+            const parentTextNodeId = textNodeElement.getAttribute(
+              'data-parent-text-node-id'
+            );
+            const startCharOffset = parseInt(
+              textNodeElement.getAttribute('data-start-char-offset') || '0',
+              10
+            );
+
+            if (parentTextNodeId) {
+              const origin: SelectionOrigin = {
+                blockNodeId: node.id,
+                lcaNodeId: node.id,
+                startNodeId: parentTextNodeId,
+                startCharOffset: startCharOffset,
+                endNodeId: parentTextNodeId,
+                endCharOffset: startCharOffset,
+              };
+              props.onDragStart(origin, e);
+            }
+          }
+        };
+
+        const children = getCtx(props).getChildNodeIDs(node.id);
+
+        // Propagate props to children, but explicitly enable text selection
+        // and remove the onDragStart handler to prevent it from firing on child elements.
+        const childProps: NodeProps = {
+          ...props,
+          onDragStart: undefined,
+          isSelectableText: true,
+        };
+
+        return createElement(
+          type,
+          {
+            className: className,
+            onMouseDown: handleMouseDown,
+            'data-node-id': node.id,
+            style: { userSelect: 'none' },
+          },
+          <RenderChildren children={children} nodeProps={childProps} />
+        );
+      }
+
       if (toolModeVal === `insert`)
         return <NodeBasicTagInsert {...sharedProps} tagName={type} />;
       else if (toolModeVal === `eraser`)
@@ -283,6 +362,7 @@ const getElement = (
       return <NodeBasicTag {...sharedProps} tagName={type} />;
     }
 
+    case 'span':
     case 'strong':
     case 'em':
       return <NodeBasicTag {...sharedProps} tagName={type} />;
@@ -293,12 +373,12 @@ const getElement = (
       const toolModeVal = getCtx(props).toolModeValStore.get().value;
       if (toolModeVal === `eraser`)
         return <NodeButtonEraser {...sharedProps} />;
-      return <NodeButton {...sharedProps} />;
+      return <NodeButton {...sharedProps} isSelectableText={false} />;
     }
     case 'a': {
       const toolModeVal = getCtx(props).toolModeValStore.get().value;
       if (toolModeVal === `eraser`) return <NodeAEraser {...sharedProps} />;
-      return <NodeA {...sharedProps} />;
+      return <NodeA {...sharedProps} isSelectableText={false} />;
     }
     case 'img':
       return <NodeImg {...sharedProps} />;

package/templates/src/components/compositor/nodes/RenderChildren.tsx

@@ -1,3 +1,5 @@
+// templates/src/components/compositor/nodes/RenderChildren.tsx
+
 import Node from '../Node';
 import type { NodeProps } from '@/types/nodeProps';
 import type { CompositorProps } from '../Compositor';
@@ -12,12 +14,7 @@ export const RenderChildren = (props: RenderChildrenProps) => {
   return (
     <>
       {children.map((id: string) => (
-        <Node
-          nodeId={id}
-          key={id}
-          ctx={nodeProps.ctx}
-          config={nodeProps.config}
-        />
+        <Node {...nodeProps} nodeId={id} key={id} />
       ))}
     </>
   );