@alpaca-editor/core 1.0.3969 → 1.0.3973

package/src/editor/sidebar/ComponentTree.tsx

@@ -13,7 +13,8 @@ import { PerfectTree, TreeNode } from "../ui/PerfectTree";
 
 import { isValidPlaceholder } from "../componentTreeHelper";
 import { getAbsoluteIconUrl } from "../utils";
-import { Plus } from "lucide-react";
+import { Plus, EyeIcon, EyeOff } from "lucide-react";
+import { SimpleIconButton } from "../ui/SimpleIconButton";
 
 type CustomTreeNode = TreeNode<Component | Placeholder> & {
   parent?: CustomTreeNode;
@@ -45,6 +46,25 @@ export function ComponentTree({}) {
 
   const treeRef = useRef<HTMLDivElement>(null);
 
+  // Helper function to check if a component has editable descendants
+  function hasEditableDescendants(component: Component): boolean {
+    if (!component.placeholders) return false;
+
+    for (const placeholder of component.placeholders) {
+      // If placeholder itself is editable, we have editable descendants
+      if (placeholder.editable) return true;
+
+      // Check if any component in this placeholder is editable or has editable descendants
+      for (const comp of placeholder.components) {
+        if (comp.editable || hasEditableDescendants(comp)) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  }
+
   useEffect(() => {
     if (treeRef.current) {
       const selectedNodeKey = Object.keys(selectedKeys || {})[0];
@@ -106,7 +126,18 @@ export function ComponentTree({}) {
       tags: [],
     };
 
-    node.children = p.components.map((c) => mapComponentNode(c, node));
+    // Always map components, but filter based on editability and descendants
+    const mappedComponents = p.components.map((c) => mapComponentNode(c, node));
+
+    if (editContext?.hideNonEditableComponents) {
+      // Show components that are either editable or have editable descendants
+      node.children = mappedComponents.filter((componentNode) => {
+        const component = componentNode.data as Component;
+        return component.editable || hasEditableDescendants(component);
+      });
+    } else {
+      node.children = mappedComponents;
+    }
 
     return node;
   }
@@ -119,23 +150,42 @@ export function ComponentTree({}) {
       return [];
     }
 
-    // Show all placeholders (both editable and non-editable)
-    const allPlaceholders = c.placeholders;
+    // Filter placeholders based on hideNonEditableComponents setting and editable descendants
+    let placeholdersToShow = c.placeholders;
+    if (editContext?.hideNonEditableComponents) {
+      placeholdersToShow = c.placeholders.filter((p) => {
+        // Show placeholder if it's editable or has editable descendants
+        if (p.editable) return true;
+        return p.components.some(
+          (comp) => comp.editable || hasEditableDescendants(comp),
+        );
+      });
+    }
 
-    if (allPlaceholders.length > 1) {
-      return allPlaceholders.map((x) => mapPlaceholderNode(x, parent));
-    } else if (allPlaceholders.length > 0) {
-      const placeholder = allPlaceholders[0]!;
-      // For single placeholders, always map the components directly (don't show placeholder node)
-      return placeholder.components.map((c) => {
+    if (placeholdersToShow.length > 1) {
+      return placeholdersToShow.map((x) => mapPlaceholderNode(x, parent));
+    } else if (placeholdersToShow.length > 0) {
+      const placeholder = placeholdersToShow[0]!;
+      // For single placeholders, map the components directly (don't show placeholder node)
+      const mappedComponents = placeholder.components.map((c) => {
         const componentNode = mapComponentNode(c, parent);
-        // Apply gray styling to components in non-editable placeholders
-        if (!placeholder.editable) {
+        // Apply gray styling to components in non-editable placeholders (only when showing non-editable components)
+        if (!placeholder.editable && !editContext?.hideNonEditableComponents) {
           componentNode.className =
             (componentNode.className || "") + " text-gray-400";
         }
         return componentNode;
       });
+
+      if (editContext?.hideNonEditableComponents) {
+        // Filter components to only show editable ones or those with editable descendants
+        return mappedComponents.filter((componentNode) => {
+          const component = componentNode.data as Component;
+          return component.editable || hasEditableDescendants(component);
+        });
+      } else {
+        return mappedComponents;
+      }
     }
     return [];
   }
@@ -158,7 +208,8 @@ export function ComponentTree({}) {
       data: c,
       parent: parent,
       tags: [],
-      className: c.isRemovedFromMasterLanguage ? "text-gray-400" : "",
+      className:
+        c.isRemovedFromMasterLanguage || !c.editable ? "text-gray-400" : "",
       type: "component",
     };
 
@@ -219,6 +270,7 @@ export function ComponentTree({}) {
     node.children = mapPlaceholders(c, node);
 
     if (c.items.length > 0 && c.items[0]!.id !== c.datasourceItem?.id) {
+      console.log("c.items", c.items, c);
       const itemsNode: CustomTreeNode = {
         key: "items" + c.id,
         label: "items",
@@ -287,6 +339,7 @@ export function ComponentTree({}) {
 
   const handleTreeSelection = useCallback(
     (key: string, event: React.MouseEvent) => {
+      console.log("handleTreeSelection", key, event);
       let newKeys = [key];
       if (event.ctrlKey) {
         if (selectedKeys.includes(key)) {
@@ -300,6 +353,8 @@ export function ComponentTree({}) {
         .filter((key) => nodeDictionary[key])
         .map((key) => nodeDictionary[key]!.componentId!);
 
+      console.log("selectedComponentIds", selectedComponentIds, nodeDictionary);
+
       editContextRef.current?.select(selectedComponentIds);
 
       if (selectedComponentIds.length === 1) {
@@ -489,60 +544,88 @@ export function ComponentTree({}) {
 
   // Use the PerfectTree component
   return (
-    <div className="p-2" ref={treeRef}>
-      <PerfectTree
-        nodes={rootNodes}
-        isDragging={!!editContext?.dragObject}
-        selectedKeys={selectedItems}
-        expandedKeys={expandedItems}
-        onToggleExpand={handleToggle}
-        onSelect={handleTreeSelection}
-        onContextMenu={handleTreeContextMenu}
-        enableDragAndDrop={true}
-        onDragOverZone={(parent, index, event) =>
-          handleDragOverZone(parent as CustomTreeNode | null, index, event)
-        }
-        isValidDropZone={(parent, index) => {
-          const placeholder = getPlaceholder(parent as CustomTreeNode | null);
-          if (!placeholder) return false;
-          if (!editContext?.dragObject) return false;
-          const result = isValidPlaceholder(
-            placeholder,
-            editContext.dragObject,
-          );
-
-          return result;
-        }}
-        onStartDrag={(data) => {
-          const component = data.node.data as Component;
-
-          // Initialize drag data to make sure dataTransfer is set
-          data.event.dataTransfer.setData("text/plain", data.node.key);
-
-          // Only create drag object for components with datasourceItem
-          if (!component?.datasourceItem) return;
-          setTimeout(() => {
-            editContext!.dragStart({
-              type: "component",
-              typeId: component.typeId,
-              templateId: component.datasourceItem?.templateId,
-              name: component.name,
-              component: {
-                id: component.id,
-                language: editContext!.page!.item.language,
-                version: editContext!.page!.item.version,
-              },
-            });
-          }, 1);
-        }}
-        onDragEnd={(event) => {
-          editContext!.dragEnd();
-        }}
-        onDrop={(parent, index, event) =>
-          handleDropZone(parent as CustomTreeNode | null, index, event)
-        }
-        renderNode={(node) => renderNode(node as CustomTreeNode)}
-      />
+    <div className="flex h-full flex-col">
+      {/* Toolbar */}
+      <div className="flex items-center justify-between border-b border-gray-200 px-2 py-1">
+        <SimpleIconButton
+          icon={
+            editContext?.hideNonEditableComponents ? (
+              <EyeOff className="h-4 w-4" strokeWidth={1.5} />
+            ) : (
+              <EyeIcon className="h-4 w-4" strokeWidth={1.5} />
+            )
+          }
+          label={
+            editContext?.hideNonEditableComponents
+              ? "Show non-editable components"
+              : "Hide non-editable components"
+          }
+          size="small"
+          selected={editContext?.hideNonEditableComponents}
+          onClick={() =>
+            editContext?.setHideNonEditableComponents(
+              !editContext.hideNonEditableComponents,
+            )
+          }
+        />
+      </div>
+
+      {/* Tree content */}
+      <div className="flex-1 p-2" ref={treeRef}>
+        <PerfectTree
+          nodes={rootNodes}
+          isDragging={!!editContext?.dragObject}
+          selectedKeys={selectedItems}
+          expandedKeys={expandedItems}
+          onToggleExpand={handleToggle}
+          onSelect={handleTreeSelection}
+          onContextMenu={handleTreeContextMenu}
+          enableDragAndDrop={true}
+          onDragOverZone={(parent, index, event) =>
+            handleDragOverZone(parent as CustomTreeNode | null, index, event)
+          }
+          isValidDropZone={(parent, index) => {
+            const placeholder = getPlaceholder(parent as CustomTreeNode | null);
+            if (!placeholder) return false;
+            if (!editContext?.dragObject) return false;
+            const result = isValidPlaceholder(
+              placeholder,
+              editContext.dragObject,
+            );
+
+            return result;
+          }}
+          onStartDrag={(data) => {
+            const component = data.node.data as Component;
+
+            // Initialize drag data to make sure dataTransfer is set
+            data.event.dataTransfer.setData("text/plain", data.node.key);
+
+            // Only create drag object for components with datasourceItem
+            if (!component?.datasourceItem) return;
+            setTimeout(() => {
+              editContext!.dragStart({
+                type: "component",
+                typeId: component.typeId,
+                templateId: component.datasourceItem?.templateId,
+                name: component.name,
+                component: {
+                  id: component.id,
+                  language: editContext!.page!.item.language,
+                  version: editContext!.page!.item.version,
+                },
+              });
+            }, 1);
+          }}
+          onDragEnd={(event) => {
+            editContext!.dragEnd();
+          }}
+          onDrop={(parent, index, event) =>
+            handleDropZone(parent as CustomTreeNode | null, index, event)
+          }
+          renderNode={(node) => renderNode(node as CustomTreeNode)}
+        />
+      </div>
     </div>
   );
 }

package/src/editor/sidebar/Debug.tsx

@@ -98,7 +98,7 @@ export function Debug({}: {}) {
         tabs={tabs}
         activeTab={activeTab}
         setActiveTab={setActiveTab}
-        className="alpaceditor-tabs border-gray-3 border-b px-2 pt-2 text-sm"
+        className="alpaceditor-tabs border-gray-3 flex border-b px-2 pt-2 text-sm"
       />
 
       <div className="absolute top-2 right-1 h-4 w-4">

package/src/editor/utils.ts

@@ -254,10 +254,19 @@ export function getFieldDescriptorFromElement(
   };
 }
 
-export function findNearestComponentId(startElement: Element) {
+export function findNearestEditableComponentId(startElement: Element) {
   let element: Element | null = startElement;
   while (element) {
-    if (element.hasAttribute("data-component-start")) {
+    if (element.getAttribute("sc_item") && isEditableComponent(element)) {
+      return extractItemIdFromItemUri(element.getAttribute("sc_item")!);
+    }
+
+    if (
+      element.hasAttribute("data-component-start") &&
+      !element.hasAttribute("data-skip-component") &&
+      isEditableComponent(element)
+    ) {
+      console.log("found editable component", element);
       return element.getAttribute("data-component-start") ?? undefined;
     }
     const prev: Element | null = element.previousElementSibling;
@@ -268,6 +277,10 @@ export function findNearestComponentId(startElement: Element) {
   return;
 }
 
+function isEditableComponent(element: Element) {
+  return element.getAttribute("data-editable") !== "false";
+}
+
 export function findFieldElement(
   iframe: HTMLIFrameElement,
   fieldDescriptor: FieldDescriptor,
@@ -427,35 +440,35 @@ export const getAbsolutePosition = (
   };
 };
 
-export function findParentComponentId(element: HTMLElement) {
-  while (element && element !== document.documentElement) {
-    if (element.getAttribute("sc_item")) {
-      return extractItemIdFromItemUri(element.getAttribute("sc_item")!);
-    }
+// export function findParentComponentId(element: HTMLElement) {
+//   while (element && element !== document.documentElement) {
+//     if (element.getAttribute("sc_item")) {
+//       return extractItemIdFromItemUri(element.getAttribute("sc_item")!);
+//     }
 
-    const startElement = findStartElement(element);
+//     const startElement = findStartElement(element);
 
-    if (startElement) {
-      return startElement.getAttribute("data-component-start");
-    }
-    element = element.parentElement as HTMLElement;
-  }
-  return null;
-}
+//     if (startElement) {
+//       return startElement.getAttribute("data-component-start");
+//     }
+//     element = element.parentElement as HTMLElement;
+//   }
+//   return null;
+// }
 
-function findStartElement(element: HTMLElement) {
-  let prev: Element | null = element;
-  while (prev) {
-    prev = prev.previousElementSibling;
-    if (
-      prev?.getAttribute("data-component-start") &&
-      !prev.hasAttribute("data-skip-component")
-    ) {
-      return prev;
-    }
-  }
-  return null;
-}
+// function findStartElement(element: HTMLElement) {
+//   let prev: Element | null = element;
+//   while (prev) {
+//     prev = prev.previousElementSibling;
+//     if (
+//       prev?.getAttribute("data-component-start") &&
+//       !prev.hasAttribute("data-skip-component")
+//     ) {
+//       return prev;
+//     }
+//   }
+//   return null;
+// }
 
 export function normalizeGuid(id: string) {
   id = id.toUpperCase();

package/src/revision.ts

@@ -1,2 +1,2 @@
-export const version = "1.0.3969";
-export const buildDate = "2025-06-27 01:46:55";
+export const version = "1.0.3973";
+export const buildDate = "2025-07-02 01:52:41";

package/src/types.ts

@@ -168,6 +168,7 @@ export type UserPreferences = {
   pinnedViews?: string[];
   showViewNames?: boolean;
   showRightSidebar?: boolean;
+  hideNonEditableComponents?: boolean;
 };
 
 export type HistoryEntry = {
@@ -238,6 +239,7 @@ export type InsertOption = {
   typeId: string;
   name: string;
   icon: string;
+  thumbnail?: string;
   group?: string;
   svg?: string;
   isInvalid: boolean;