@alpaca-editor/core 1.0.3812 → 1.0.3815

package/src/editor/commands/componentCommands.tsx

@@ -10,6 +10,19 @@ import {
 } from "../../types";
 
 import { Component, ItemDescriptor, Placeholder } from "../pageModel";
+import {
+  Check,
+  Copy,
+  MessageCircleMore,
+  Palette,
+  Plus,
+  RefreshCcw,
+  Sparkles,
+  Square,
+  StopCircle,
+  Trash2,
+  TriangleAlert,
+} from "lucide-react";
 
 export type ComponentCommandData = CommandData & {
   components: Component[];
@@ -37,11 +50,11 @@ export function getSelectedComponentCommands(editContext: EditContextType) {
 
   const componentCommands = getComponentCommands(
     selectedComponents,
-    editContext
+    editContext,
   );
 
   const componentCommandMenuItems = componentCommands.filter(
-    (x) => x.visibilityScopes.indexOf("menu") >= 0
+    (x) => x.visibilityScopes.indexOf("menu") >= 0,
   );
 
   return componentCommandMenuItems;
@@ -49,14 +62,14 @@ export function getSelectedComponentCommands(editContext: EditContextType) {
 
 export function getComponentCommands(
   entities: (Placeholder | Component)[],
-  editContext: EditContextType
+  editContext: EditContextType,
 ): ComponentCommand[] {
   const components = entities.filter(
-    (x) => x && !isPlaceholder(x)
+    (x) => x && !isPlaceholder(x),
   ) as Component[];
 
   const commands = [
-    getCreateCommentCommand(),
+    getCreateCommentCommand(components),
     getInsertCommand(components, editContext),
     getDeleteCommand(components, editContext),
     getDuplicateCommand(components, editContext),
@@ -72,7 +85,7 @@ export function getComponentCommands(
 
 function getInsertCommand(
   components: Component[],
-  editContext: EditContextType
+  editContext: EditContextType,
 ): ComponentCommand | null {
   if (components.length !== 1 || isPlaceholder(components[0])) return null;
   const item = components[0];
@@ -80,7 +93,7 @@ function getInsertCommand(
   if (!item.placeholders || item.placeholders.length === 0) return null;
   return {
     id: "insert",
-    icon: "pi pi-plus",
+    icon: <Plus size={14} />,
     label: "Insert component",
     disabled: (context) => !context.editContext.page?.item.canWriteItem,
     visibilityScopes: ["editFrame", "contextMenu"],
@@ -92,13 +105,13 @@ function getInsertCommand(
 
 function getDuplicateCommand(
   components: Component[],
-  editContext: EditContextType
+  editContext: EditContextType,
 ): ComponentCommand | null {
   if (components.length !== 1) return null;
 
   return {
     id: "duplicate",
-    icon: "pi pi-copy",
+    icon: <Copy size={14} />,
     label: "Duplicate",
     visibilityScopes: ["contextMenu", "menu"],
     disabled: (c) => !(c.editContext.page?.item.canWriteItem || false),
@@ -118,7 +131,7 @@ function getDuplicateCommand(
 function getAiCommand(editContext: EditContextType): ComponentCommand {
   return {
     id: "ai",
-    icon: "pi pi-sparkles",
+    icon: <Sparkles size={14} />,
     label: "AI",
     disabled: () => false,
 
@@ -134,7 +147,7 @@ function getAiCommand(editContext: EditContextType): ComponentCommand {
 
 function getDesignCommand(
   components: Component[],
-  editContext: EditContextType
+  editContext: EditContextType,
 ): ComponentCommand | null {
   if (components.length !== 1 || isPlaceholder(components[0])) return null;
   const item = components[0];
@@ -142,21 +155,21 @@ function getDesignCommand(
   if (!item.datasourceItem?.fields) return null;
   if (
     !Object.values(item.datasourceItem.fields).find(
-      (x) => x.section === "Design"
+      (x) => x.section === "Design",
     )
   )
     return null;
 
   return {
     id: "design",
-    icon: "pi pi-palette",
+    icon: <Palette size={14} />,
     label: "Design",
     disabled: () => false,
     execute: async (context: CommandContext<any>) => {
       editContext.showFieldEditorPopup(
         item.datasourceItem?.fields || [],
         ["Design", "Rendering"],
-        context.event!
+        context.event!,
       );
     },
     visibilityScopes: ["editFrame", "contextMenu"],
@@ -165,7 +178,7 @@ function getDesignCommand(
 
 function getLinkToMasterCommand(
   components: Component[],
-  editContext: EditContextType
+  editContext: EditContextType,
 ): ComponentCommand | null {
   if (!components.length) return null;
   if (editContext.page?.item?.masterLanguages?.length === 0) return null;
@@ -174,7 +187,7 @@ function getLinkToMasterCommand(
     components,
     editContext,
     "componentLinkedToMasterLanguage",
-    "Linked To Master Language"
+    "Linked To Master Language",
   );
 }
 
@@ -182,30 +195,34 @@ function getCheckboxCommand(
   components: Component[],
   editContext: EditContextType,
   fieldName: string,
-  label: string
+  label: string,
 ): ComponentCommand | null {
   const someLinked = components.find(
     (x) =>
       x.datasourceItem?.fields.find((x) => x.name === fieldName)?.rawValue ===
-      "1"
+      "1",
   );
   const allLinked = !components.find(
     (x) =>
       x.datasourceItem?.fields.find((x) => x.name === fieldName)?.rawValue !==
-      "1"
+      "1",
   );
 
   return {
     id: fieldName,
-    icon:
-      "pi pi-" +
-      (allLinked ? "check-square" : someLinked ? "stop-circle" : "stop"),
+    icon: allLinked ? (
+      <Check size={14} />
+    ) : someLinked ? (
+      <StopCircle size={14} />
+    ) : (
+      <Square size={14} />
+    ),
     label,
     disabled: () => false,
     execute: async () => {
       components.forEach((c) => {
         const field = c.datasourceItem?.fields.find(
-          (x) => x.name === fieldName
+          (x) => x.name === fieldName,
         );
         if (!field) return;
         editContext.operations.editField({
@@ -221,7 +238,7 @@ function getCheckboxCommand(
 
 function getInheritChildrenFromMasterCommand(
   components: Component[],
-  editContext: EditContextType
+  editContext: EditContextType,
 ): ComponentCommand | null {
   if (!components.length) return null;
   if (editContext.page?.item?.masterLanguages?.length === 0) return null;
@@ -232,7 +249,7 @@ function getInheritChildrenFromMasterCommand(
     components,
     editContext,
     "inheritChildrenFromMasterLanguage",
-    "Inherit Children From Master"
+    "Inherit Children From Master",
   );
 }
 
@@ -243,7 +260,7 @@ function isLocked(c: Component, editContext: EditContextType): boolean {
         x.fieldLock?.item.id === c.id &&
         x.fieldLock.item.language == c.datasourceItem?.language &&
         x.fieldLock.item.version === c.datasourceItem?.version &&
-        x.sessionId !== editContext.sessionId
+        x.sessionId !== editContext.sessionId,
     ) !== undefined
   ) {
     return true;
@@ -252,21 +269,21 @@ function isLocked(c: Component, editContext: EditContextType): boolean {
       c.placeholders?.find(
         (x) =>
           x.components.find((child) => isLocked(child, editContext)) !==
-          undefined
+          undefined,
       ) !== undefined
     );
 }
 
 function getDeleteCommand(
   components: Component[],
-  editContext: EditContextType
+  editContext: EditContextType,
 ): ComponentCommand | null {
   const applicableComponents = components.filter(
     (c) =>
       ((!isPlaceholder(c) && !c.layoutId) ||
         c.layoutId === editContext.page?.item.id) &&
       !isLocked(c, editContext) &&
-      editContext.page?.item.canWriteItem
+      editContext.page?.item.canWriteItem,
   );
 
   if (applicableComponents.length === 0) return null;
@@ -274,7 +291,7 @@ function getDeleteCommand(
   return {
     id: "delete",
     label: "Delete",
-    icon: "pi pi-fw pi-trash",
+    icon: <Trash2 size={14} />,
     execute: async (context: CommandContext<any>) =>
       deleteComponents(applicableComponents, context.editContext),
     disabled: () =>
@@ -295,7 +312,7 @@ function canSynchronize(placeholderData: Placeholder) {
 
 function getSyncCommand(
   components: (Placeholder | Component)[],
-  editContext: EditContextType
+  editContext: EditContextType,
 ): ComponentCommand {
   const placeholders: PlaceholderToSynchronize[] = [];
 
@@ -321,13 +338,13 @@ function getSyncCommand(
     placeholders.length > 0 ||
     (components.length === 0 &&
       editContext.page?.rootComponent.placeholders.find((x) =>
-        canSynchronize(x)
+        canSynchronize(x),
       ));
 
   return {
     id: "synchronize",
     label: "Synchronize",
-    icon: "pi pi-fw pi-sync",
+    icon: <RefreshCcw size={14} />,
     disabled: () => !canSync,
     visibilityScopes: ["menu", "editFrame", "contextMenu"],
     execute: async () => {
@@ -348,7 +365,7 @@ function getSyncCommand(
 
 function deleteComponents(
   components: Component[],
-  editContext: EditContextType
+  editContext: EditContextType,
 ) {
   if (!components.length) return;
 
@@ -360,7 +377,7 @@ function deleteComponents(
         : "Are you sure you want to remove this component? ") +
       components.map((x) => x.name).join(", "),
     header: components.length > 1 ? "Remove components" : "Remove component",
-    icon: "pi pi-exclamation-triangle",
+    icon: <TriangleAlert size={14} />,
     accept: () => {
       if (!editContext.page?.item.descriptor) return;
       console.log("Remove components", components);
@@ -378,13 +395,15 @@ function deleteComponents(
   });
 }
 
-function getCreateCommentCommand(): ComponentCommand | null {
-  // if (components.length !== 1 || isPlaceholder(components[0])) return null;
+function getCreateCommentCommand(
+  components: Component[],
+): ComponentCommand | null {
+  if (components.length !== 1 || isPlaceholder(components[0])) return null;
 
   return {
     id: "addComment",
     label: "Add Comment",
-    icon: "pi pi-comment",
+    icon: <MessageCircleMore size={14} />,
     disabled: () => false,
     visibilityScopes: ["contextMenu"],
     execute: async (context: CommandContext<any>) => {
@@ -396,7 +415,7 @@ function getCreateCommentCommand(): ComponentCommand | null {
 
 function getItemDescriptor(
   component: Component,
-  editContext: EditContextType
+  editContext: EditContextType,
 ): ItemDescriptor | null {
   return {
     id: component.id,

package/src/editor/componentTreeHelper.tsx

@@ -104,11 +104,12 @@ export const isValidPlaceholder = (
       (y) =>
         y.typeId === dragObject.typeId ||
         y.typeId === dragObject?.templateId ||
-        y.compatibleTemplates?.find((z) => z == dragObject.typeId) !==
+        y.compatibleTypeIds?.find((z) => z == dragObject.typeId) !==
           undefined ||
         y.typeId === dragObject.templateId ||
-        y.compatibleTemplates?.find((z) => z == dragObject.templateId) !==
+        y.compatibleTypeIds?.find((z) => z == dragObject.templateId) !==
           undefined,
+      undefined,
     ) !== undefined
   );
 };

package/src/editor/control-center/ControlCenterMenu.tsx

@@ -9,7 +9,7 @@ export function ControlCenterMenu() {
   const searchParams = useSearchParams();
   const urlActiveItemKey = searchParams.get("ccpanel");
   const [activeItemKey, setActiveItemKey] = useState<string | null>(
-    urlActiveItemKey
+    urlActiveItemKey,
   );
 
   const router = useRouter();
@@ -34,12 +34,12 @@ export function ControlCenterMenu() {
 
   const items = config?.controlCenter.groups.map((group) => {
     return {
-      key: group.title,
+      id: group.title,
       label: group.title,
       icon: group.icon,
       items:
         group.panels.map((panel) => ({
-          key: panel.id,
+          id: panel.id,
           label: panel.title,
         })) || [],
     };
@@ -64,7 +64,7 @@ export function ControlCenterMenu() {
       items={items}
       activeItemKey={activeItemKey}
       onItemClick={(item) => {
-        setActiveItemKey(item.key);
+        setActiveItemKey(item.id);
       }}
     />
   );

package/src/editor/field-types/TreeListEditor.tsx

@@ -33,7 +33,7 @@ export default function TreeListEditor({
     ItemData[]
   >([]);
   const [selectedFromList, setSelectedFromList] = useState<ReferencedItem[]>(
-    []
+    [],
   );
   const overlayPanelRef = useRef<OverlayPanel>(null);
   const [currentItemId, setCurrentItemId] = useState<string>("");
@@ -109,7 +109,7 @@ export default function TreeListEditor({
       idPath?: string;
       name: string;
       icon?: string;
-    }[]
+    }[],
   ) {
     setSelectedItemNodesInTree([]);
 
@@ -138,8 +138,8 @@ export default function TreeListEditor({
   }
 
   return (
-    <div className="border focus-shadow border-gray-200">
-      <div className="bg-white mb-1 p-2 border-b border-gray-200">
+    <div className="focus-shadow border border-gray-200">
+      <div className="mb-1 border-b border-gray-200 bg-white p-2">
         <ItemSearch
           rootItemIds={rootItemIds.map((x) => normalizeGuid(x))}
           itemSelected={async (item) => {
@@ -181,9 +181,9 @@ export default function TreeListEditor({
           </div>
         </SplitterPanel>
         <SplitterPanel>
-          <div className="h-full w-full relative">
+          <div className="relative h-full w-full">
             <div className="absolute inset-0 flex">
-              <div className="bg-gray-100 flex flex-col justify-center gap-1 p-1">
+              <div className="flex flex-col justify-center gap-1 bg-gray-100 p-1">
                 <SimpleIconButton
                   label="Add"
                   icon="pi pi-angle-right"
@@ -197,7 +197,7 @@ export default function TreeListEditor({
                   disabled={readOnly}
                 />
               </div>
-              <div className="flex-1 h-full relative">
+              <div className="relative h-full flex-1">
                 <ListBox
                   className="absolute inset-0 overflow-auto text-xs"
                   options={values}
@@ -209,7 +209,7 @@ export default function TreeListEditor({
                   onChange={(e) => setSelectedFromList(e.value)}
                   itemTemplate={(option) => (
                     <div
-                      className="select-none hover:bg-gray-50 relative group flex items-center gap-1"
+                      className="group relative flex items-center gap-1.5 select-none hover:bg-gray-50"
                       onMouseEnter={async () => {
                         setHoveredItemId(option.id);
                         // setExpandIdPath(option.idPath || "");
@@ -219,10 +219,10 @@ export default function TreeListEditor({
                         if (!readOnly) removeFromList([option]);
                       }}
                     >
-                      <img src={option.icon} className="w-4 h-4 mr-2" />
+                      <img src={option.icon} className="h-4 w-4" />
                       {trimPath(option.path)}{" "}
                       <button
-                        className="opacity-0 group-hover:opacity-100 transition-opacity"
+                        className="opacity-0 transition-opacity group-hover:opacity-100"
                         onClick={(e) => {
                           e.stopPropagation();
                           setCurrentItemId(option.id);
@@ -245,7 +245,7 @@ export default function TreeListEditor({
         <div className="p-3">
           <div className="flex justify-end gap-2">
             <Button
-              className="px-3 py-1 bg-blue-500 text-white rounded text-sm"
+              className="rounded bg-blue-500 px-3 py-1 text-sm text-white"
               onClick={() => {
                 editContext.loadItem(currentItemId);
                 overlayPanelRef.current?.hide();

package/src/editor/page-editor-chrome/FrameMenu.tsx

@@ -5,7 +5,8 @@ import { Rect, findComponentRect } from "../utils";
 import { useThrottledCallback } from "use-debounce";
 import { Component } from "../pageModel";
 import { PageViewContext } from "../page-viewer/pageViewContext";
-
+import { ArrowUpFromDot } from "lucide-react";
+import { cn } from "../../lib/utils";
 export function FrameMenu({
   component,
   mode,
@@ -18,8 +19,12 @@ export function FrameMenu({
   const editContext = useEditContext();
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
   const mutationObserverRef = useRef<MutationObserver | null>(null);
+  const headerRef = useRef<HTMLDivElement>(null);
 
   const [componentRect, setComponentRect] = useState<Rect>();
+  const [isHeaderWiderThanComponent, setIsHeaderWiderThanComponent] =
+    useState(false);
+  const [isHovered, setIsHovered] = useState(false);
 
   const updatePosition = () => {
     if (!component || !editContext || !pageViewContext) return;
@@ -32,7 +37,7 @@ export function FrameMenu({
       setComponentRect(undefined);
     };
 
-    const componentRect = findComponentRect(iframe, component.id)?.rect;
+    const componentRect = findComponentRect(iframe, component)?.rect;
 
     if (!componentRect) {
       resetSelection();
@@ -74,7 +79,7 @@ export function FrameMenu({
       scrollContainer?.addEventListener("scroll", updatePositionThrottled);
       iframe.contentWindow?.addEventListener("scroll", updatePositionThrottled);
 
-      const componentRect = findComponentRect(iframe, component.id);
+      const componentRect = findComponentRect(iframe, component);
 
       if (!componentRect) {
         updatePosition();
@@ -98,6 +103,24 @@ export function FrameMenu({
     };
   }, [component]);
 
+  // Effect to measure header width and compare with componentRect
+  useEffect(() => {
+    if (!headerRef.current || !componentRect) return;
+
+    const headerResizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const headerWidth = entry.contentRect.width;
+        setIsHeaderWiderThanComponent(headerWidth > componentRect.width);
+      }
+    });
+
+    headerResizeObserver.observe(headerRef.current);
+
+    return () => {
+      headerResizeObserver.disconnect();
+    };
+  }, [componentRect]);
+
   useEffect(() => {
     setTimeout(() => {
       updatePosition();
@@ -114,6 +137,7 @@ export function FrameMenu({
 
   const commands = editContext.getComponentCommands([component]);
   const isDraggable =
+    component.canBeMoved &&
     mode === "edit" &&
     !component.layoutId &&
     pageViewContext.page?.item.canWriteItem;
@@ -140,9 +164,8 @@ export function FrameMenu({
     }));
 
   const customButtons: EditButton[] = []; // TODO
-  let buttons = [...customButtons];
 
-  buttons = [...buttons, ...commandButtons];
+  const buttons = [...customButtons, ...commandButtons];
 
   function handleDragStart(event: React.DragEvent<HTMLDivElement>): void {
     if (!component?.datasourceItem) return;
@@ -169,7 +192,7 @@ export function FrameMenu({
     editContext!.dragEnd();
   }
 
-  const isShared = component.datasourceItem?.id !== component.id;
+  const isShared = component.isShared;
   const isReadonly = mode === "compare" || mode === "view";
   const isLayout = component.layoutId;
 
@@ -179,29 +202,50 @@ export function FrameMenu({
       ? "shared"
       : isLayout
         ? "layout"
-        : "default";
+        : component.canBeMoved
+          ? "default"
+          : "nonMovable";
 
   const colorVariants = {
     shared: "border-orange-400",
-    readonly: "border-purple-400",
+    readonly: "border-gray-400",
     layout: "border-purple-400",
     default: "border-sky-400",
+    nonMovable: "border-red-400",
   };
 
   const bgColorVariants = {
     shared: "bg-orange-400",
-    readonly: "bg-purple-400",
+    readonly: "bg-gray-400",
     layout: "bg-purple-400",
     default: "bg-sky-400",
+    nonMovable: "bg-red-400",
   };
-  if (!componentRect) return null;
+
+  // Calculate initial estimation for the header width
+  const estimatedHeaderWidth = buttons.length * 30 + component.name.length * 8; // Approximate width calculation
+  const initialIsHeaderWiderThanComponent =
+    estimatedHeaderWidth > (componentRect?.width || 0);
+
+  useEffect(() => {
+    setIsHeaderWiderThanComponent(initialIsHeaderWiderThanComponent);
+  }, [initialIsHeaderWiderThanComponent]);
 
   const isMultiSelected = editContext.selection.length > 1;
+  if (!componentRect) return null;
 
   return (
     <>
       <div
-        className={`pointer-events-none absolute inset-0 border-2 ${colorVariants[color]} tour-frame-menu opacity-50 hover:opacity-100`}
+        className={cn(
+          "pointer-events-none absolute inset-0 rounded-b-sm border-2",
+          colorVariants[color],
+          "tour-frame-menu opacity-50 hover:opacity-100",
+          isHovered && "opacity-100",
+          !isMultiSelected && isHeaderWiderThanComponent && "border-t-0",
+          !isMultiSelected && !isHeaderWiderThanComponent && "rounded-tl-sm",
+          isMultiSelected && "rounded-t-sm",
+        )}
         style={{
           left: componentRect.x,
           top: componentRect.y,
@@ -213,9 +257,11 @@ export function FrameMenu({
       >
         {!isMultiSelected && (
           <div
+            ref={headerRef}
             className={
               `editframe-menu pointer-events-auto absolute z-1000 flex items-center pr-4 text-base text-white ${bgColorVariants[color]} ` +
-              (componentRect.y - 36 < 0 ? "rounded-bl-lg" : "rounded-t-lg")
+              (componentRect.y - 36 < 0 ? "rounded-bl-lg" : "rounded-t-lg") +
+              (isHeaderWiderThanComponent ? " rounded-bl-lg" : "")
             }
             style={{
               right: "-2px",
@@ -232,20 +278,38 @@ export function FrameMenu({
               draggable={isDraggable}
               onDragStart={handleDragStart}
               onDragEnd={handleDragEnd}
-              className={`px-4 ${
+              className={`group flex items-center gap-1 pr-2 pl-3 text-sm text-nowrap ${
                 isDraggable ? "cursor-move" : "cursor-default"
               } `}
             >
               {component.name}
+              {component.parentPlaceholder?.parentComponent && (
+                <span
+                  className="cursor-pointer opacity-0 transition-opacity group-hover:opacity-100"
+                  onClick={() => {
+                    editContext.select([
+                      component.parentPlaceholder?.parentComponent.id || "",
+                    ]);
+                  }}
+                >
+                  <ArrowUpFromDot height={14} width={14} />
+                </span>
+              )}
             </div>
             {mode === "edit" && (
-              <div className="flex items-center gap-2">
+              <div className="flex items-center gap-2 text-sm">
                 {buttons.map((b, i) => (
-                  <div className="cursor-pointer p-1" key={i}>
+                  <div
+                    className="cursor-pointer hover:text-gray-200"
+                    key={i}
+                    onClick={(ev) => {
+                      ev.stopPropagation();
+                      b.onClick(ev);
+                    }}
+                  >
                     {typeof b.icon === "string" ? (
                       <i
-                        className={b.icon + " cursor-pointer"}
-                        onClick={b.onClick}
+                        className={b.icon + " cursor-pointer text-sm"}
                         title={b.label}
                       />
                     ) : (

package/src/editor/page-editor-chrome/InlineEditor.tsx

@@ -28,7 +28,7 @@ export function InlineEditor({
           x.fieldId === fieldId &&
           x.item.id === itemId &&
           x.item.language === language &&
-          x.item.version === version
+          x.item.version === version,
       )?.value;
 
       if (modifiedFieldValue === value) return;
@@ -47,7 +47,7 @@ export function InlineEditor({
         value: value,
       });
     },
-    context.configuration.debounceFieldEditsInterval
+    context.configuration.debounceFieldEditsInterval,
   );
 
   useEffect(() => {
@@ -56,7 +56,7 @@ export function InlineEditor({
 
     const editableElements =
       pageViewContext.editorIframeRef.current?.contentWindow?.document.querySelectorAll(
-        '[contenteditable="true"]'
+        '[contenteditable="true"]',
       );
 
     editableElements?.forEach((element) => {
@@ -90,7 +90,7 @@ export function InlineEditor({
           fieldName,
           itemId,
           language,
-          version
+          version,
         );
       });
 
@@ -116,7 +116,7 @@ export function InlineEditor({
       modifiedFieldsContext?.modifiedFields.forEach((field) => {
         const elements =
           pageViewContext.editorIframeRef.current!.contentWindow?.document.querySelectorAll(
-            `[data-fieldid="${field.fieldId}"][data-itemid="${field.item.id}"][data-language="${field.item.language}"][data-version="${field.item.version}"`
+            `[data-fieldid="${field.fieldId}"][data-itemid="${field.item.id}"][data-language="${field.item.language}"][data-version="${field.item.version}"`,
           );
 
         elements?.forEach(async (element) => {