@alpaca-editor/core 1.0.3969 → 1.0.3974

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, Pentagon } from "lucide-react";
+import { SimpleIconButton } from "../ui/SimpleIconButton";
 
 type CustomTreeNode = TreeNode<Component | Placeholder> & {
   parent?: CustomTreeNode;
@@ -45,6 +46,59 @@ 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;
+  // }
+
+  // Helper function to get all editable descendants, flattening the tree
+  function getEditableDescendants(
+    component: Component,
+    parent: CustomTreeNode,
+  ): CustomTreeNode[] {
+    const editableNodes: CustomTreeNode[] = [];
+
+    if (component.editable) {
+      // If this component is editable, include it and map its children normally
+      const node = mapComponentNode(component, parent);
+      editableNodes.push(node);
+    } else {
+      // If this component is not editable, skip it and collect its editable descendants
+      if (component.placeholders) {
+        for (const placeholder of component.placeholders) {
+          // if (placeholder.editable) {
+          //   const placeholderNode = mapPlaceholderNode(placeholder, parent);
+          //   editableNodes.push(placeholderNode);
+          // } else {
+          for (const childComponent of placeholder.components) {
+            const childEditableNodes = getEditableDescendants(
+              childComponent,
+              parent,
+            );
+            editableNodes.push(...childEditableNodes);
+          }
+          // }
+        }
+      }
+    }
+
+    return editableNodes;
+  }
+
   useEffect(() => {
     if (treeRef.current) {
       const selectedNodeKey = Object.keys(selectedKeys || {})[0];
@@ -106,7 +160,24 @@ export function ComponentTree({}) {
       tags: [],
     };
 
-    node.children = p.components.map((c) => mapComponentNode(c, node));
+    if (editContext?.hideNonEditableComponents) {
+      // Flatten the tree: collect all editable descendants directly
+      const flattenedComponents: CustomTreeNode[] = [];
+      for (const component of p.components) {
+        const editableNodes = getEditableDescendants(component, node);
+        flattenedComponents.push(...editableNodes);
+      }
+      node.children = flattenedComponents;
+    } else {
+      // Always map components, but filter based on editability and descendants
+      const mappedComponents = p.components.map((c) =>
+        mapComponentNode(c, node),
+      );
+      node.children = mappedComponents.filter((componentNode) => {
+        const component = componentNode.data as Component;
+        return component.editable || true; //hasEditableDescendants(component);
+      });
+    }
 
     return node;
   }
@@ -119,23 +190,66 @@ export function ComponentTree({}) {
       return [];
     }
 
-    // Show all placeholders (both editable and non-editable)
-    const allPlaceholders = c.placeholders;
-
-    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) => {
-        const componentNode = mapComponentNode(c, parent);
-        // Apply gray styling to components in non-editable placeholders
-        if (!placeholder.editable) {
-          componentNode.className =
-            (componentNode.className || "") + " text-gray-400";
+    if (editContext?.hideNonEditableComponents) {
+      // Flatten the tree: collect all editable descendants from all placeholders
+      const flattenedNodes: CustomTreeNode[] = [];
+
+      for (const placeholder of c.placeholders) {
+        if (placeholder.editable) {
+          //If placeholder is editable, include it normally
+          if (c.placeholders.length > 1 || !c.editable) {
+            // Multiple placeholders - show placeholder node
+            const placeholderNode = mapPlaceholderNode(placeholder, parent);
+            flattenedNodes.push(placeholderNode);
+          } else {
+            //  Single placeholder - map components directly
+            for (const component of placeholder.components) {
+              const editableNodes = getEditableDescendants(component, parent);
+              flattenedNodes.push(...editableNodes);
+            }
+          }
+        } else {
+          // Placeholder is not editable - collect editable descendants from its components
+          for (const component of placeholder.components) {
+            const editableNodes = getEditableDescendants(component, parent);
+            flattenedNodes.push(...editableNodes);
+          }
         }
-        return componentNode;
+      }
+
+      return flattenedNodes;
+    } else {
+      // Original logic for when hideNonEditableComponents is false
+      // Filter placeholders based on editable descendants
+      let 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 || true, // || hasEditableDescendants(comp),
+        );
       });
+
+      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 (only when showing non-editable components)
+          if (!placeholder.editable) {
+            componentNode.className =
+              (componentNode.className || "") + " text-gray-400";
+          }
+          return componentNode;
+        });
+
+        // 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 || true; // || hasEditableDescendants(component);
+        });
+      }
     }
     return [];
   }
@@ -158,7 +272,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",
     };
 
@@ -205,6 +320,16 @@ export function ComponentTree({}) {
       });
     }
 
+    if (c.isSharedLayout) {
+      node.tags!.push({
+        id: "shared-layout",
+        severity: "warning",
+        value: "",
+        icon: <Pentagon className="h-3 w-3 text-gray-400" strokeWidth={1} />,
+        tooltip: "Component is shared across all languages",
+      });
+    }
+
     if (c.isShared) {
       node.tags!.push({
         id: "linked",
@@ -218,7 +343,11 @@ export function ComponentTree({}) {
 
     node.children = mapPlaceholders(c, node);
 
-    if (c.items.length > 0 && c.items[0]!.id !== c.datasourceItem?.id) {
+    if (
+      c.items.length > 0 &&
+      c.items[0]!.id !== c.datasourceItem?.id &&
+      c.items[0]!.id !== page?.item.id
+    ) {
       const itemsNode: CustomTreeNode = {
         key: "items" + c.id,
         label: "items",
@@ -283,7 +412,7 @@ export function ComponentTree({}) {
 
     setRootNodes(finalNodes);
     setNodeDictionary(dict);
-  }, [page]);
+  }, [page, editContext?.hideNonEditableComponents]);
 
   const handleTreeSelection = useCallback(
     (key: string, event: React.MouseEvent) => {
@@ -360,45 +489,47 @@ export function ComponentTree({}) {
       },
     }));
 
-    // Check if we have a placeholder to add insert options
-    const placeholder = getPlaceholder(nodeDictionary[node.key] || null);
-    if (placeholder && placeholder.insertOptions) {
-      const insertOptions = placeholder.insertOptions
-        .filter((x) => !x.isHidden && !x.isInvalid)
-        .map((x) => ({
-          id: x.typeId,
-          icon: (
-            <img
-              src={getAbsoluteIconUrl(x.icon)}
-              width="16"
-              height="16"
-              className="m-1"
-            />
-          ),
-          label: x.name,
-          command: () => {
-            editContextRef.current?.operations.addComponent(
-              x.typeId,
-              placeholder.key,
-              0, // Insert at the beginning by default
-              editContextRef.current?.currentItemDescriptor!,
-            );
-          },
-        }));
-
-      if (insertOptions.length > 0) {
-        // Add separator if there are existing menu items
-        if (menu.length > 0) {
-          menu.push({ separator: true });
+    if (editContext?.mode === "edit") {
+      // Check if we have a placeholder to add insert options
+      const placeholder = getPlaceholder(nodeDictionary[node.key] || null);
+      if (placeholder && placeholder.insertOptions) {
+        const insertOptions = placeholder.insertOptions
+          .filter((x) => !x.isHidden && !x.isInvalid)
+          .map((x) => ({
+            id: x.typeId,
+            icon: (
+              <img
+                src={getAbsoluteIconUrl(x.icon)}
+                width="16"
+                height="16"
+                className="m-1"
+              />
+            ),
+            label: x.name,
+            command: () => {
+              editContextRef.current?.operations.addComponent(
+                x.typeId,
+                placeholder.key,
+                0, // Insert at the beginning by default
+                editContextRef.current?.currentItemDescriptor!,
+              );
+            },
+          }));
+
+        if (insertOptions.length > 0) {
+          // Add separator if there are existing menu items
+          if (menu.length > 0) {
+            menu.push({ separator: true });
+          }
+
+          // Add insert submenu
+          menu.push({
+            id: "insert",
+            label: "Insert",
+            icon: <Plus size={16} />,
+            items: insertOptions,
+          });
         }
-
-        // Add insert submenu
-        menu.push({
-          id: "insert",
-          label: "Insert",
-          icon: <Plus size={16} />,
-          items: insertOptions,
-        });
       }
     }
 
@@ -489,60 +620,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>
   );
 }
@@ -561,7 +720,7 @@ function renderNode(node: CustomTreeNode) {
           <div key={`tag-${node.key}-${x.id}`}>
             <span
               id={`id-${node.key}-${x.id}`}
-              className="ml-2 rounded p-0.5 px-1.5 text-xs text-white"
+              className="ml-2 flex rounded p-0.5 px-1.5 text-xs text-white"
               style={{
                 backgroundColor: x.color,
                 marginLeft: "8px",
@@ -577,7 +736,7 @@ function renderNode(node: CustomTreeNode) {
                   : undefined
               }
             >
-              {x.icon && <i className={x.icon}></i>}
+              {x.icon}
               {x.value}
             </span>
           </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,18 @@ 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)
+    ) {
       return element.getAttribute("data-component-start") ?? undefined;
     }
     const prev: Element | null = element.previousElementSibling;
@@ -268,6 +276,10 @@ export function findNearestComponentId(startElement: Element) {
   return;
 }
 
+function isEditableComponent(element: Element) {
+  return element.getAttribute("data-editable") !== "false";
+}
+
 export function findFieldElement(
   iframe: HTMLIFrameElement,
   fieldDescriptor: FieldDescriptor,
@@ -277,10 +289,6 @@ export function findFieldElement(
   const fieldElement = iframe.contentWindow?.document.body.querySelector(
     "[data-itemid='" +
       fieldDescriptor.item.id +
-      "'][data-language='" +
-      fieldDescriptor.item.language +
-      "'][data-version='" +
-      fieldDescriptor.item.version +
       "'][data-fieldid='" +
       fieldDescriptor.fieldId +
       "']",
@@ -427,35 +435,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.3974";
+export const buildDate = "2025-07-02 12:45:37";

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;