@alpaca-editor/core 1.0.3956 → 1.0.3960

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

@@ -222,7 +222,7 @@ export function FrameMenu({
     shared: "border-orange-400",
     readonly: "border-gray-400",
     layout: "border-purple-400",
-    default: "border-sky-400",
+    default: "border-component-blue",
     nonMovable: "border-red-400",
     suggestions: "border-teal-400",
   };
@@ -231,7 +231,7 @@ export function FrameMenu({
     shared: "bg-orange-400",
     readonly: "bg-gray-400",
     layout: "bg-purple-400",
-    default: "bg-sky-400",
+    default: "bg-component-blue",
     nonMovable: "bg-red-400",
     suggestions: "bg-teal-400",
   };
@@ -254,7 +254,7 @@ export function FrameMenu({
         className={cn(
           "pointer-events-none absolute inset-0 rounded-b-sm border-2",
           colorVariants[color],
-          "tour-frame-menu opacity-50 hover:opacity-100",
+          "tour-frame-menu opacity-70 hover:opacity-100",
           !isMultiSelected && isHeaderWiderThanComponent && "border-t-0",
           !isMultiSelected && !isHeaderWiderThanComponent && "rounded-tl-sm",
           isMultiSelected && "rounded-t-sm",
@@ -273,8 +273,8 @@ export function FrameMenu({
             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") +
-              (isHeaderWiderThanComponent ? " rounded-bl-lg" : "")
+              (componentRect.y - 36 < 0 ? "rounded-bl" : "rounded-t") +
+              (isHeaderWiderThanComponent ? " rounded-bl" : "")
             }
             style={{
               right: "-2px",

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

@@ -18,7 +18,7 @@ export function SuggestionHighlightings({
 
   useEffect(() => {
     setSuggestions(
-      editContext?.suggestedEdits.filter((x) => x.status === "Pending") || [],
+      editContext?.suggestedEdits.filter((x) => x.status === "pending") || [],
     );
   }, [editContext?.comments, editContext?.suggestedEdits]);
 
@@ -26,7 +26,7 @@ export function SuggestionHighlightings({
     <>
       {editContext?.showSuggestedEdits &&
         suggestions
-          .filter((x) => x.status !== "approved" && x.status !== "rejected")
+          .filter((x) => x.status !== "applied" && x.status !== "rejected")
           .map((suggestion) => (
             <SuggestionHighlighting
               iframe={iframe}

package/src/editor/page-viewer/EditorForm.tsx

@@ -11,47 +11,38 @@ import { Component, Field, FullItem, RenderedItem } from "../pageModel";
 import { Spinner } from "../ui/Spinner";
 import { PageViewContext } from "./pageViewContext";
 import { SimpleTabs, Tab } from "../ui/SimpleTabs";
+import { ChevronLeft, X } from "lucide-react";
 
 export function EditorForm({
   pageViewContext,
   readonly,
   compareView,
+  onCollapse,
 }: {
   pageViewContext?: PageViewContext;
   readonly?: boolean;
   compareView: boolean;
+  onCollapse?: () => void;
 }) {
   const editContext = useEditContext()!;
   if (!pageViewContext) pageViewContext = editContext.pageView;
 
-  const setInsertMode = editContext.setInsertMode;
   const insertMode =
     editContext.insertMode && editContext.mode === "edit" && !compareView;
   const [activeTabKey, setActiveTabKey] = useState("content");
   const [item, setItem] = useState<RenderedItem>();
   const [component, setComponent] = useState<Component>();
   const [fullItem, setFullItem] = useState<FullItem>();
-
-  const toggleInsertMode = () => {
-    if (insertMode) {
-      setInsertMode(false);
-    } else {
-      setInsertMode(true);
-    }
-  };
+  const [hasDatasource, setHasDatasource] = useState(true);
 
   useEffect(() => {
     async function loadFullItem() {
-      if (!item) return;
+      if (!item || !hasDatasource) return;
       const fullItem = await editContext!.itemsRepository.getItem(item);
       setFullItem(fullItem);
     }
     loadFullItem();
-  }, [item]);
-
-  useEffect(() => {
-    if (editContext.selectedForInsertion) setInsertMode(true);
-  }, [editContext.selectedForInsertion]);
+  }, [item, hasDatasource]);
 
   let isShared = false;
 
@@ -59,38 +50,50 @@ export function EditorForm({
     if (!pageViewContext.page) {
       setComponent(undefined);
       setItem(undefined);
+      setHasDatasource(true);
       return;
     }
     let newSelectedItem;
+    let selectedComponent;
 
     if (editContext.selection.length === 1) {
-      const component = getComponentById(
+      selectedComponent = getComponentById(
         editContext.selection[0]!,
         pageViewContext.page,
       );
 
-      setComponent(component);
-      newSelectedItem = component?.datasourceItem;
+      setComponent(selectedComponent);
+      newSelectedItem = selectedComponent?.datasourceItem;
       if (
-        component?.datasourceItem &&
-        component?.datasourceItem?.id !== component?.id
+        selectedComponent?.datasourceItem &&
+        selectedComponent?.datasourceItem?.id !== selectedComponent?.id
       )
         isShared = true;
     } else {
       newSelectedItem = pageViewContext.page.rootComponent.datasourceItem;
-      setComponent(pageViewContext.page.rootComponent);
+      selectedComponent = pageViewContext.page.rootComponent;
+      setComponent(selectedComponent);
     }
 
-    setItem(
-      newSelectedItem || pageViewContext.page.rootComponent.datasourceItem,
-    );
+    // Check if we have a datasource item
+    const hasItemDatasource = !!newSelectedItem;
+    setHasDatasource(hasItemDatasource);
+
+    if (hasItemDatasource) {
+      setItem(newSelectedItem);
+    } else {
+      // No datasource item, clear the item state
+      setItem(undefined);
+      setFullItem(undefined);
+    }
   }, [
     editContext.selection,
     pageViewContext.page,
     pageViewContext.pageItemDescriptor,
   ]);
 
-  if (!fullItem || !item)
+  // Show spinner only when we have a datasource but haven't loaded the full item yet
+  if (hasDatasource && (!fullItem || !item))
     return (
       <div className="grid h-full w-full items-center justify-center">
         <Spinner />
@@ -123,28 +126,32 @@ export function EditorForm({
 
   const itemFields: ItemFields[] = [];
 
-  const contentFields = Object.values(fullItem?.fields || []).filter(
-    (x) =>
-      ((editorFields && editorFields["Content"]?.addFields.includes(x.name!)) ||
-        item.renderedFieldIds.indexOf(x.id) >= 0) &&
-      !(
-        editorFields && editorFields["Content"]?.removeFields.includes(x.name!)
-      ),
-  );
-  if (contentFields.length > 0) itemFields.push({ fields: contentFields });
+  if (item) {
+    const contentFields = Object.values(fullItem?.fields || []).filter(
+      (x) =>
+        ((editorFields &&
+          editorFields["Content"]?.addFields.includes(x.name!)) ||
+          item.renderedFieldIds.indexOf(x.id) >= 0) &&
+        !(
+          editorFields &&
+          editorFields["Content"]?.removeFields.includes(x.name!)
+        ),
+    );
+    if (contentFields.length > 0) itemFields.push({ fields: contentFields });
 
-  component?.items
-    .filter((x) => x.id !== item.id)
-    .forEach((i) => {
-      const fields: Field[] = [];
-      i.renderedFieldIds.forEach((id) => {
-        const field = Object.values(fullItem?.fields || []).find(
-          (x) => x.id === id,
-        );
-        if (field) fields.push(field);
+    component?.items
+      .filter((x) => x.id !== item.id)
+      .forEach((i) => {
+        const fields: Field[] = [];
+        i.renderedFieldIds.forEach((id) => {
+          const field = Object.values(fullItem?.fields || []).find(
+            (x) => x.id === id,
+          );
+          if (field) fields.push(field);
+        });
+        if (fields.length > 0) itemFields.push({ headline: i.name, fields });
       });
-      if (fields.length > 0) itemFields.push({ headline: i.name, fields });
-    });
+  }
 
   const getFieldsTab = (fields: ItemFields[], headline: string, id: string) => {
     return {
@@ -187,33 +194,31 @@ export function EditorForm({
       getFieldsTab([{ fields: designFields }], "Design", "design"),
     );
 
-  tabPanels.push({
-    label: "Advanced",
-    content: (
-      <div className="relative h-full">
-        <div className="absolute inset-0 overflow-auto">
-          <ItemInfo item={fullItem} />
-          <FieldList
-            fields={[{ fields: fullItem?.fields || [] }]}
-            validators={validators}
-            showStandardFieldsEnabled={true}
-            readonly={readonly}
-          />
+  if (hasDatasource)
+    tabPanels.push({
+      label: "Advanced",
+      content: (
+        <div className="relative h-full">
+          <div className="absolute inset-0 overflow-auto">
+            {fullItem && <ItemInfo item={fullItem} />}
+            <FieldList
+              fields={[{ fields: fullItem?.fields || [] }]}
+              validators={validators}
+              showStandardFieldsEnabled={true}
+              readonly={readonly}
+            />
+          </div>
         </div>
-      </div>
-    ),
-    id: "advanced",
-  });
+      ),
+      id: "advanced",
+    });
 
   return (
-    <div
-      className="flex h-full flex-col bg-gray-50"
-      data-testid="editor-sidepanel"
-    >
-      <h1 className="flex h-12 items-center justify-center border-b border-gray-200 p-2">
+    <div className="flex h-full flex-col" data-testid="editor-sidepanel">
+      <h1 className="border-gray-3 flex h-12 items-center justify-center border-b p-2">
         {component && component !== pageViewContext.page?.rootComponent && (
           <SimpleIconButton
-            icon="pi pi-angle-left"
+            icon={<ChevronLeft className="h-6 w-6" strokeWidth={1} />}
             onClick={() => editContext.select([])}
             label="Back to page"
             size="large"
@@ -221,41 +226,61 @@ export function EditorForm({
         )}
         {editContext.selection.length === 0 && <div className="w-12" />}
         <div
-          className="flex-1 text-center text-gray-800"
+          className="text-dark flex-1 text-center text-sm font-medium"
           id="item-name"
           data-testid="component-name"
         >
-          {item?.name}
-          {isShared && (
+          {insertMode ? "Add Component" : component?.name}
+          {!insertMode && isShared && (
             <span className="ml-2 rounded-md bg-orange-400 p-2 text-sm text-black">
               Shared
             </span>
           )}
         </div>
         <SimpleIconButton
-          id="insert-component-button"
-          icon={insertMode ? "pi pi-pencil" : "pi pi-plus"}
-          onClick={() => toggleInsertMode()}
-          label={insertMode ? "Continue editing" : "Insert component"}
+          icon={<X className="h-6 w-6 p-1" strokeWidth={1} />}
+          onClick={() => {
+            if (insertMode) {
+              editContext.setInsertMode(false);
+            } else {
+              onCollapse?.();
+            }
+          }}
+          label="Close"
           size="large"
-          disabled={
-            !editContext.page?.item.canWriteItem ||
-            !fullItem?.canWriteItem ||
-            editContext.mode !== "edit" ||
-            compareView
-          }
         />
       </h1>
 
       {insertMode && <Insert />}
       {!insertMode && (
-        <SimpleTabs
-          key="editor-tabs"
-          tabs={tabPanels}
-          className="flex flex-1 items-center justify-center border-b border-gray-200 bg-gray-50 py-2.5 text-sm"
-          activeTab={tabPanels.findIndex((x) => x.id === activeTabKey) || 0}
-          setActiveTab={(index) => setActiveTabKey(tabPanels[index]?.id!)}
-        ></SimpleTabs>
+        <div className="flex flex-1 flex-col">
+          {/* <div className="border-b border-gray-200 bg-gray-50 px-4 py-3">
+            <div className="flex flex-wrap gap-2 text-sm">
+              {component?.isShared && (
+                <Badge variant="outline">Shared Component</Badge>
+              )}
+              {component?.layoutId && (
+                <Badge variant="outline">Layout Component</Badge>
+              )}
+              {component?.isInheritedFromMasterLanguage && (
+                <Badge variant="outline">Inherited</Badge>
+              )}
+              {component?.isRemovedFromMasterLanguage && (
+                <Badge variant="outline">Removed from Master</Badge>
+              )}
+              {!component?.visible && <Badge variant="outline">Hidden</Badge>}
+              <Badge variant="outline">{component?.type}</Badge>
+              {!hasDatasource && <Badge variant="outline">No Datasource</Badge>}
+            </div>
+          </div> */}
+          <SimpleTabs
+            key="editor-tabs"
+            tabs={tabPanels}
+            className="flex flex-1 items-center justify-center border-b border-gray-200 pt-4 text-xs"
+            activeTab={tabPanels.findIndex((x) => x.id === activeTabKey) || 0}
+            setActiveTab={(index) => setActiveTabKey(tabPanels[index]?.id!)}
+          ></SimpleTabs>
+        </div>
       )}
     </div>
   );

package/src/editor/page-viewer/PageViewer.tsx

@@ -1,4 +1,3 @@
-import { Allotment, AllotmentHandle } from "allotment";
 import { PageViewContext } from "./pageViewContext";
 import { EditorForm } from "./EditorForm";
 import { PageViewerFrame } from "./PageViewerFrame";
@@ -8,6 +7,8 @@ import { SimpleIconButton } from "../ui/SimpleIconButton";
 import { useEditContext } from "../client/editContext";
 import { useDebouncedCallback } from "use-debounce";
 import { Ellipsis, PanelLeftClose, PanelLeftOpen } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Splitter, SplitterPanel } from "../ui/Splitter";
 
 export function PageViewer({
   pageViewContext,
@@ -15,49 +16,22 @@ export function PageViewer({
   compareView,
   name,
   followEditsDefault,
+  className,
 }: {
   pageViewContext?: PageViewContext;
   showFormEditor: boolean;
   compareView?: boolean;
   name: string;
   followEditsDefault?: boolean;
+  className?: string;
 }) {
-  const panels = [];
-
   const editContext = useEditContext();
 
   const [followEdits, setFollowEdits] = useState(followEditsDefault);
-
-  const allotmentRef = useRef<AllotmentHandle>(null);
-  const [formEditorWidth, setFormEditorWidth] = useState(0);
   const [formEditorCollapsed, setFormEditorCollapsed] = useState(false);
 
   if (!pageViewContext) return null;
 
-  useEffect(() => {
-    const width = localStorage.getItem("editor.editFormWidth." + name)
-      ? parseInt(localStorage.getItem("editor.editFormWidth." + name)!)
-      : 300;
-
-    setFormEditorWidth(width);
-    resizePanels(width);
-  }, []);
-
-  const resizePanels = useDebouncedCallback((width: number) => {
-    if (!allotmentRef.current) return;
-    const newsizes: number[] = [];
-    if (showFormEditor) newsizes.push(width);
-    allotmentRef.current?.resize(newsizes);
-  }, 140);
-
-  useEffect(() => {
-    if (formEditorWidth > 0)
-      localStorage.setItem(
-        "editor.editFormWidth." + name,
-        formEditorWidth.toString(),
-      );
-  }, [formEditorWidth]);
-
   useEffect(() => {
     if (
       followEdits &&
@@ -79,7 +53,7 @@ export function PageViewer({
       }
 
       const element =
-        pageViewContext.editorIframeRef.current?.contentWindow?.document.querySelector(
+        pageViewContext?.editorIframeRef.current?.contentWindow?.document.querySelector(
           `[data-fieldid="${lastEdit.fieldId}"][data-itemid="${lastEdit.item.id}"][data-language="${lastEdit.item.language}"][data-version="${lastEdit.item.version}"]`,
         );
 
@@ -87,74 +61,83 @@ export function PageViewer({
         element.scrollIntoView({ behavior: "smooth", block: "center" });
       }
     }
-  }, [editContext?.lastEditedFields]);
+  }, [
+    editContext?.lastEditedFields,
+    editContext,
+    followEdits,
+    pageViewContext,
+  ]);
 
-  if (showFormEditor) {
-    if (!formEditorCollapsed) {
-      panels.push(
-        <div key="form" className="flex h-full w-full flex-col">
-          <div className="flex-1">
-            <EditorForm
-              pageViewContext={pageViewContext}
-              readonly={editContext?.mode !== "edit"}
-              compareView={compareView || false}
-            />
-          </div>
-          <div className="flex items-center justify-between gap-1 bg-gray-50 p-1">
-            <div className="p-1 text-xs text-gray-500">
-              {editContext?.statusMessage}
-            </div>
-            <div className="flex gap-1">
-              <SimpleIconButton
-                icon=<Ellipsis size={12} />
-                selected={editContext?.enableCompletions}
-                label="Enable Completions"
-                onClick={() => editContext?.setEnableCompletions((c) => !c)}
-              />
-              <SimpleIconButton
-                icon="pi pi-step-forward"
-                selected={followEdits}
-                label="Follow"
-                onClick={() => setFollowEdits((f) => !f)}
-              />
-              <SimpleIconButton
-                icon={<PanelLeftClose size={12} />}
-                label="Collapse"
-                onClick={() => setFormEditorCollapsed(true)}
+  if (!pageViewContext) return null;
+
+  // Create panels array for the Splitter component
+  const panels: SplitterPanel[] = [];
+
+  if (showFormEditor && !formEditorCollapsed) {
+    panels.push({
+      name: "form",
+      defaultSize: 300,
+      collapsible: true,
+      content: (
+        <div className="h-full w-full p-2 pl-1">
+          <div className="border-gray-3 flex h-full w-full flex-col rounded-2xl border bg-white">
+            <div className="flex-1">
+              <EditorForm
+                pageViewContext={pageViewContext}
+                readonly={editContext?.mode !== "edit"}
+                compareView={compareView || false}
+                onCollapse={() => setFormEditorCollapsed(true)}
               />
             </div>
+            <div className="flex items-center justify-between gap-1 p-1">
+              <div className="p-1 text-xs text-gray-500">
+                {editContext?.statusMessage}
+              </div>
+              <div className="flex gap-1">
+                <SimpleIconButton
+                  icon=<Ellipsis size={12} />
+                  selected={editContext?.enableCompletions}
+                  label="Enable Completions"
+                  onClick={() => editContext?.setEnableCompletions((c) => !c)}
+                />
+                <SimpleIconButton
+                  icon="pi pi-step-forward"
+                  selected={followEdits}
+                  label="Follow"
+                  onClick={() => setFollowEdits((f) => !f)}
+                />
+                <SimpleIconButton
+                  icon={<PanelLeftClose size={12} />}
+                  label="Collapse"
+                  onClick={() => setFormEditorCollapsed(true)}
+                />
+              </div>
+            </div>
           </div>
-        </div>,
-      );
-    }
+        </div>
+      ),
+    });
   }
 
-  panels.push(
-    <PageViewerFrame
-      compareView={compareView || false}
-      pageViewContext={pageViewContext}
-      key="frame"
-    />,
-  );
-
-  if (editContext?.isMobile) {
-    panels.reverse();
-  }
+  panels.push({
+    name: "frame",
+    defaultSize: "auto",
+    content: (
+      <PageViewerFrame
+        compareView={compareView || false}
+        pageViewContext={pageViewContext}
+      />
+    ),
+  });
 
   return (
-    <>
-      <Allotment
-        proportionalLayout={false}
-        ref={allotmentRef}
-        vertical={editContext?.isMobile}
-        onChange={(newSizes) => {
-          if (!newSizes || newSizes.length === 0) return;
-          if (showFormEditor && newSizes[0]) {
-            setFormEditorWidth(newSizes[0]);
-          }
-        }}
-        children={panels}
-      ></Allotment>
+    <div className={cn("h-full w-full", className)}>
+      <Splitter
+        panels={panels}
+        splitterClassName="bg-transparent -ml-1"
+        direction={editContext?.isMobile ? "vertical" : "horizontal"}
+        localStorageKey={`editor.pageViewer.${name}`}
+      />
       {formEditorCollapsed && (
         <div className="absolute bottom-0 left-0 z-10 flex items-center justify-center">
           <SimpleIconButton
@@ -164,6 +147,6 @@ export function PageViewer({
           />
         </div>
       )}
-    </>
+    </div>
   );
 }

package/src/editor/page-viewer/PageViewerFrame.tsx

@@ -803,7 +803,7 @@ export function PageViewerFrame({
       : pageViewContext.deviceHeight || 640;
 
   return (
-    <div className="relative flex h-full w-full flex-col items-center bg-slate-100 select-none">
+    <div className="relative mt-2 flex h-full w-full flex-col items-center select-none">
       {!editContext.pageView.fullscreen && (
         <EditorWarnings item={pageViewContext.page?.item} />
       )}

package/src/editor/reviews/Comments.tsx

@@ -30,7 +30,7 @@ export function Comments() {
 
     // Filter out applied suggestions if hideAppliedSuggestions is true
     const filteredSuggestedEdits = hideAppliedSuggestions
-      ? suggestedEdits.filter((edit) => edit.status !== "Applied")
+      ? suggestedEdits.filter((edit) => edit.status !== "applied")
       : suggestedEdits;
 
     const combined: FeedbackItem[] = [...comments, ...filteredSuggestedEdits];
@@ -47,6 +47,24 @@ export function Comments() {
 
   return (
     <div className="flex h-full flex-col">
+      <div className="border-gray-3 flex-1 overflow-auto border-b">
+        <div className="h-fill-available p-4">
+          {feedbackItems.map((item) => {
+            // Use a discriminator check. Here we assume suggested edits have the properties oldValue and newValue.
+            if ("oldValue" in item && "newValue" in item) {
+              return (
+                <SuggestedEditComponent
+                  key={item.id}
+                  edit={item as SuggestedEdit}
+                />
+              );
+            }
+            return (
+              <CommentComponent key={item.id} comment={item as CommentType} />
+            );
+          })}
+        </div>
+      </div>
       <SimpleToolbar>
         <SimpleIconButton
           id="add-comment"
@@ -101,25 +119,6 @@ export function Comments() {
           }}
         />
       </SimpleToolbar>
-
-      <div className="flex-1 overflow-auto">
-        <div className="h-fill-available border-l border-gray-200 bg-gray-50 p-4">
-          {feedbackItems.map((item) => {
-            // Use a discriminator check. Here we assume suggested edits have the properties oldValue and newValue.
-            if ("oldValue" in item && "newValue" in item) {
-              return (
-                <SuggestedEditComponent
-                  key={item.id}
-                  edit={item as SuggestedEdit}
-                />
-              );
-            }
-            return (
-              <CommentComponent key={item.id} comment={item as CommentType} />
-            );
-          })}
-        </div>
-      </div>
     </div>
   );
 }