@alpaca-editor/core 1.0.3962 → 1.0.3964

package/src/editor/FieldListField.tsx

@@ -19,6 +19,7 @@ import {
 import { useThrottledCallback } from "use-debounce";
 import { SimpleIconButton } from "./ui/SimpleIconButton";
 import { FieldHistory } from "./FieldHistory";
+import { Copy } from "lucide-react";
 
 export default function FieldListField({
   field,
@@ -53,6 +54,7 @@ export default function FieldListField({
   const [isModified, setIsModified] = useState(false);
   const [isSaved, setIsSaved] = useState(false);
   const [historyEntry, setHistoryEntry] = useState<FieldHistoryItem>();
+  const [showCopiedHint, setShowCopiedHint] = useState(false);
   async function handleActionClick(action: FieldButton): Promise<void> {
     editContext?.triggerFieldAction(field.descriptor, action);
   }
@@ -247,7 +249,7 @@ export default function FieldListField({
                   !simplified) && <span className="text-xs">·</span>}
                 {!field.isFallback && field.rawValue !== null ? (
                   <button
-                    className="p-0 text-xs"
+                    className="text-gray-1 p-0 text-xs"
                     onClick={() => {
                       editContext?.operations.editField({
                         field: field.descriptor,
@@ -260,11 +262,12 @@ export default function FieldListField({
                 ) : (
                   showFallbackButton
                 )}
+
                 {config?.buttons?.map((x) => {
                   return (
                     <button
                       key={x.id}
-                      className="p-0 text-xs"
+                      className="text-gray-1 p-0 text-xs"
                       onClick={() =>
                         editContext.triggerFieldAction(field.descriptor, x)
                       }
@@ -275,7 +278,7 @@ export default function FieldListField({
                 })}
                 {!simplified && (
                   <button
-                    className="p-0 text-xs"
+                    className="text-gray-1 p-0 text-xs"
                     onClick={() => {
                       setShowRawValue(!showRawValue);
                     }}
@@ -289,6 +292,31 @@ export default function FieldListField({
                     Raw
                   </button>
                 )}
+                {field.rawValue && (
+                  <div className="relative">
+                    <button
+                      className="text-gray-1 flex items-center gap-1 p-0 text-xs"
+                      onClick={() => {
+                        navigator.clipboard.writeText(field.rawValue!);
+                        setShowCopiedHint(true);
+                        setTimeout(() => setShowCopiedHint(false), 2000);
+                      }}
+                    >
+                      <Copy strokeWidth={1} className="h-3 w-3" /> Copy
+                    </button>
+                    {showCopiedHint && (
+                      <div
+                        className="absolute -top-8 left-1/2 animate-pulse rounded bg-gray-800 px-2 py-1 text-xs whitespace-nowrap text-white shadow-lg"
+                        style={{
+                          animation: "fadeOut 2s ease-out forwards",
+                          transform: "translateX(calc(-50% + 15px))",
+                        }}
+                      >
+                        Copied!
+                      </div>
+                    )}
+                  </div>
+                )}
                 <div className="ml-auto flex items-center gap-1">
                   <SimpleIconButton
                     icon="pi pi-comment"

package/src/editor/ImageEditButton.tsx

@@ -45,7 +45,7 @@ export function ImageEditButton({
 
   const defaultTriggerButton = (
     <button
-      className={`text-dark border-gray-3 hover:bg-gray-5 absolute right-2 bottom-2 flex items-center justify-center gap-2 border bg-white p-2 opacity-70 shadow-lg transition-opacity hover:opacity-85 ${buttonClassName || ""}`}
+      className={`text-dark border-gray-3 hover:bg-gray-5 absolute right-2 bottom-2 flex items-center justify-center gap-2 rounded border bg-white p-1.5 text-xs font-medium opacity-70 shadow-lg transition-opacity hover:opacity-85 ${buttonClassName || ""}`}
       onClick={(e) => {
         e.stopPropagation();
       }}

package/src/editor/MainLayout.tsx

@@ -78,7 +78,8 @@ export default function MainLayout(props: MainLayoutProps) {
         {!props.view.hideViewSelector && <LeftToolbar />}
         <div className="flex flex-1 flex-col">
           {editContext?.view?.titlebar}
-          {editContext?.view?.toolbar}
+          {editContext?.view?.toolbarFactory &&
+            editContext?.view?.toolbarFactory(editContext)}
           <div className="bg-gray-4 flex-1">
             <Splitter
               splitterClassName="bg-transparent -mr-2 md:w-[8px]"

package/src/editor/menubar/ApproveAndPublish.tsx

@@ -2,12 +2,14 @@ import { useEditContext } from "../client/editContext";
 
 export function ApproveAndPublishButton() {
   const editContext = useEditContext();
+  console.log("USER", editContext?.user);
+  if (editContext?.user?.isLimitedPreviewUser) return null;
   return (
     <div
-      className="bg-alpaca-blue hover:bg-alpaca-blue-light text-white p-4 cursor-pointer text-sm rounded-l-full"
+      className="bg-alpaca-blue hover:bg-alpaca-blue-light cursor-pointer rounded-l-full p-4 text-sm text-white"
       onClick={() => {
         const workboxView = editContext?.configuration.editor.views.find(
-          (x) => x.name == "workbox"
+          (x) => x.name == "workbox",
         );
         if (workboxView) editContext?.switchView(workboxView.name);
       }}

package/src/editor/menubar/GenericToolbar.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { Separator } from "./Separator";
+
+export interface ToolbarSection {
+  key: string;
+  component: React.ReactNode;
+}
+
+export interface GenericToolbarProps {
+  left?: ToolbarSection[];
+  center?: ToolbarSection[];
+  right?: ToolbarSection[];
+}
+
+export function GenericToolbar({
+  left = [],
+  center = [],
+  right = [],
+}: GenericToolbarProps) {
+  const renderSections = (sections: ToolbarSection[]) => {
+    return sections.map((section, index) => (
+      <React.Fragment key={section.key}>
+        {index > 0 && <Separator size="large" />}
+        {section.component}
+      </React.Fragment>
+    ));
+  };
+
+  return (
+    <div className="flex items-center justify-between gap-2 border-b px-4 py-2">
+      {/* Left section */}
+      <div className="flex items-center gap-2">{renderSections(left)}</div>
+
+      {/* Center section */}
+      {center.length > 0 && (
+        <div className="flex items-center gap-2">{renderSections(center)}</div>
+      )}
+
+      {/* Right section */}
+      <div className="flex items-center gap-2">{renderSections(right)}</div>
+    </div>
+  );
+}

package/src/editor/menubar/ItemToolbar.tsx

@@ -0,0 +1,24 @@
+import { useEditContext } from "../client/editContext";
+import { CompareIcon } from "../ui/Icons";
+import { SimpleIconButton } from "../ui/SimpleIconButton";
+
+export function ItemToolbar() {
+  const editContext = useEditContext();
+
+  if (!editContext) return null;
+
+  return (
+    <div className="flex items-center justify-center gap-2 border-b px-4 py-2">
+      <SimpleIconButton
+        icon={<CompareIcon className="h-6 w-6 p-1" />}
+        label="Compare"
+        size="large"
+        className={
+          editContext.compareMode ? "text-gray-600" : "hover:text-gray-600"
+        }
+        selected={editContext.compareMode}
+        onClick={() => editContext.setCompareMode(!editContext.compareMode)}
+      />
+    </div>
+  );
+}

package/src/editor/menubar/PageToolbar.tsx

@@ -0,0 +1,154 @@
+import { useEditContext } from "../client/editContext";
+import { Separator } from "./Separator";
+import { CompareIcon } from "../ui/Icons";
+import { SimpleIconButton } from "../ui/SimpleIconButton";
+import {
+  EyeIcon,
+  MessagesSquare,
+  Pencil,
+  Monitor,
+  Smartphone,
+  Table,
+  Plus,
+  Layers,
+} from "lucide-react";
+import { EnterFullScreenIcon } from "@radix-ui/react-icons";
+
+export function PageToolbar() {
+  const editContext = useEditContext();
+
+  if (!editContext) return null;
+
+  const pageViewContext = editContext.pageView;
+
+  const device = pageViewContext.device;
+  const setDevice = pageViewContext.setDevice;
+
+  // Insert mode logic
+  const insertMode = editContext.insertMode;
+
+  const toggleInsertMode = () => {
+    editContext.setInsertMode(true);
+  };
+
+  // Calculate total count of comments and suggestions
+  const commentsCount =
+    editContext.comments?.filter((x) => !x.isResolved).length || 0;
+  const suggestionsCount =
+    editContext.suggestedEdits?.filter((x) => x.status === "pending").length ||
+    0;
+  const totalCount = commentsCount + suggestionsCount;
+
+  return (
+    <div className="flex items-center justify-between gap-2 border-b px-4 py-2">
+      <div className="flex items-center gap-2">
+        {!editContext.user?.isLimitedPreviewUser && (
+          <SimpleIconButton
+            icon={<Pencil className="h-6 w-6 p-1" strokeWidth={1} />}
+            label="Edit"
+            size="large"
+            selected={editContext.mode === "edit"}
+            onClick={() => editContext.setMode("edit")}
+          />
+        )}
+
+        <SimpleIconButton
+          icon={<EyeIcon className="h-6 w-6 p-1" strokeWidth={1} />}
+          label="Preview"
+          size="large"
+          selected={editContext.mode === "preview"}
+          onClick={() => editContext.setMode("preview")}
+        />
+
+        <div className="relative">
+          <SimpleIconButton
+            selected={editContext?.mode === "suggestions"}
+            icon={<MessagesSquare strokeWidth={1} className="h-6 w-6 p-1" />}
+            label="Write suggestions"
+            size="large"
+            onClick={() => editContext?.setMode("suggestions")}
+          />
+          {totalCount > 0 && (
+            <div className="bg-theme-secondary text-3xs absolute -top-1 -right-1 flex h-[16px] min-w-[16px] items-center justify-center rounded-full px-1 text-white">
+              {totalCount > 99 ? "99+" : totalCount}
+            </div>
+          )}
+        </div>
+        <Separator size="large" />
+        <SimpleIconButton
+          icon={<Plus className="h-6 w-6 p-1" strokeWidth={1} />}
+          label="Add Component"
+          size="large"
+          selected={insertMode}
+          onClick={toggleInsertMode}
+          disabled={
+            !editContext.page?.item.canWriteItem || editContext.mode !== "edit"
+          }
+        />
+      </div>
+      {!editContext.isMobile && (
+        <div className="flex items-center gap-2">
+          <SimpleIconButton
+            icon={<Monitor className="h-6 w-6 p-1" strokeWidth={1} />}
+            label="Desktop"
+            size="large"
+            selected={device === "desktop"}
+            onClick={() => setDevice("desktop")}
+          />
+          <SimpleIconButton
+            icon={<Smartphone className="h-6 w-6 p-1" strokeWidth={1} />}
+            label="Mobile"
+            size="large"
+            selected={Boolean(device && device !== "desktop")}
+            onClick={() => {
+              if (editContext.configuration.devices[0]) {
+                setDevice(editContext.configuration.devices[0].name);
+              }
+            }}
+          />
+          <SimpleIconButton
+            icon={<Table className="h-6 w-6 p-1" strokeWidth={1} />}
+            label="Form"
+            size="large"
+            selected={!device}
+            onClick={() => setDevice("")}
+          />
+          <Separator size="large" />
+          {!editContext.isMobile && (
+            <SimpleIconButton
+              icon={<CompareIcon className="h-6 w-6 p-1" />}
+              label="Compare"
+              size="large"
+              className={
+                editContext.compareMode
+                  ? "text-gray-600"
+                  : "hover:text-gray-600"
+              }
+              selected={editContext.compareMode}
+              onClick={() =>
+                editContext.setCompareMode(!editContext.compareMode)
+              }
+            />
+          )}
+        </div>
+      )}
+      <div className="flex items-center gap-2">
+        <SimpleIconButton
+          icon={<EnterFullScreenIcon className="h-6 w-6 p-1" />}
+          label="Fullscreen"
+          size="large"
+          onClick={() => pageViewContext.setFullscreen(true)}
+        />
+        <SimpleIconButton
+          icon={<Layers className="h-6 w-6 p-1" strokeWidth={1} />}
+          label="Component Navigator"
+          size="large"
+          selected={editContext.showRightSidebar}
+          onClick={() =>
+            editContext.setShowRightSidebar(!editContext.showRightSidebar)
+          }
+        />
+      </div>
+    </div>
+  );
+}

package/src/editor/menubar/PageViewerControls.tsx

@@ -1,168 +1,10 @@
 import { useEditContext } from "../client/editContext";
-import { Separator } from "./Separator";
-import { CompareIcon, FormEditIcon } from "../ui/Icons";
-import { SimpleIconButton } from "../ui/SimpleIconButton";
-import {
-  EyeIcon,
-  MessagesSquare,
-  Pencil,
-  Monitor,
-  Smartphone,
-  Table,
-  Plus,
-  Layers,
-} from "lucide-react";
-import { EnterFullScreenIcon } from "@radix-ui/react-icons";
+import { createEditToolbar } from "./ToolbarFactory";
 
 export function PageViewerControls() {
   const editContext = useEditContext();
 
   if (!editContext) return null;
 
-  const hasLayout = editContext.contentEditorItem?.hasLayout;
-
-  const pageViewContext = editContext.pageView;
-
-  const device = pageViewContext.device;
-  const setDevice = pageViewContext.setDevice;
-
-  // Insert mode logic
-  const insertMode = editContext.insertMode;
-
-  const toggleInsertMode = () => {
-    editContext.setInsertMode(true);
-  };
-
-  // Calculate total count of comments and suggestions
-  const commentsCount =
-    editContext.comments?.filter((x) => !x.isResolved).length || 0;
-  const suggestionsCount =
-    editContext.suggestedEdits?.filter((x) => x.status === "pending").length ||
-    0;
-  const totalCount = commentsCount + suggestionsCount;
-
-  return (
-    <div className="flex items-center justify-between gap-2 border-b px-4 py-2">
-      {hasLayout && (
-        <>
-          <div className="flex items-center gap-2">
-            {!editContext.user?.isLimitedPreviewUser && (
-              <SimpleIconButton
-                icon={<Pencil className="h-6 w-6 p-1" strokeWidth={1} />}
-                label="Edit"
-                size="large"
-                selected={editContext.mode === "edit"}
-                onClick={() => editContext.setMode("edit")}
-              />
-            )}
-
-            <SimpleIconButton
-              icon={<EyeIcon className="h-6 w-6 p-1" strokeWidth={1} />}
-              label="Preview"
-              size="large"
-              selected={editContext.mode === "preview"}
-              onClick={() => editContext.setMode("preview")}
-            />
-
-            <div className="relative">
-              <SimpleIconButton
-                selected={editContext?.mode === "suggestions"}
-                icon={
-                  <MessagesSquare strokeWidth={1} className="h-6 w-6 p-1" />
-                }
-                label="Write suggestions"
-                size="large"
-                onClick={() => editContext?.setMode("suggestions")}
-              />
-              {totalCount > 0 && (
-                <div className="bg-theme-secondary text-3xs absolute -top-1 -right-1 flex h-[16px] min-w-[16px] items-center justify-center rounded-full px-1 text-white">
-                  {totalCount > 99 ? "99+" : totalCount}
-                </div>
-              )}
-            </div>
-            <Separator size="large" />
-            <SimpleIconButton
-              icon={<Plus className="h-6 w-6 p-1" strokeWidth={1} />}
-              label="Add Component"
-              size="large"
-              selected={insertMode}
-              onClick={toggleInsertMode}
-              disabled={
-                !editContext.page?.item.canWriteItem ||
-                editContext.mode !== "edit"
-              }
-            />
-          </div>
-          {!editContext.isMobile && (
-            <div className="flex items-center gap-2">
-              <SimpleIconButton
-                icon={<Monitor className="h-6 w-6 p-1" strokeWidth={1} />}
-                label="Desktop"
-                size="large"
-                selected={device === "desktop"}
-                onClick={() => setDevice("desktop")}
-              />
-              <SimpleIconButton
-                icon={<Smartphone className="h-6 w-6 p-1" strokeWidth={1} />}
-                label="Mobile"
-                size="large"
-                selected={Boolean(device && device !== "desktop")}
-                onClick={() => {
-                  if (editContext.configuration.devices[0]) {
-                    setDevice(editContext.configuration.devices[0].name);
-                  }
-                }}
-              />
-              <SimpleIconButton
-                icon={<Table className="h-6 w-6 p-1" strokeWidth={1} />}
-                label="Form"
-                size="large"
-                selected={!device}
-                onClick={() => setDevice("")}
-              />
-              <Separator size="large" />
-              {!editContext.isMobile && (
-                <SimpleIconButton
-                  icon={<CompareIcon className="h-6 w-6 p-1" />}
-                  label="Compare"
-                  size="large"
-                  className={
-                    editContext.compareMode
-                      ? "text-gray-600"
-                      : "hover:text-gray-600"
-                  }
-                  selected={editContext.compareMode}
-                  onClick={() =>
-                    editContext.setCompareMode(!editContext.compareMode)
-                  }
-                />
-              )}
-            </div>
-          )}
-          {/* <i
-            className="pi pi-external-link cursor-pointer rounded-full p-2 text-gray-400 hover:bg-gray-200 hover:text-gray-800"
-            title="Fullscreen"
-            onClick={() => pageViewContext.setFullscreen(true)}
-          /> */}
-          <div className="flex items-center gap-2">
-            <SimpleIconButton
-              icon={<EnterFullScreenIcon className="h-6 w-6 p-1" />}
-              label="Fullscreen"
-              size="large"
-              onClick={() => pageViewContext.setFullscreen(true)}
-            />
-            <SimpleIconButton
-              icon={<Layers className="h-6 w-6 p-1" strokeWidth={1} />}
-              label="Component Navigator"
-              size="large"
-              selected={editContext.showRightSidebar}
-              onClick={() =>
-                editContext.setShowRightSidebar(!editContext.showRightSidebar)
-              }
-            />
-          </div>
-        </>
-      )}
-    </div>
-  );
+  return createEditToolbar(editContext);
 }

package/src/editor/menubar/ToolbarFactory.tsx

@@ -0,0 +1,68 @@
+import { EditContextType } from "../client/editContext";
+import { GenericToolbar, ToolbarSection } from "./GenericToolbar";
+import {
+  ReviewCommands,
+  EditControls,
+  InsertControls,
+  ViewportControls,
+  UtilityControls,
+  CompareControls,
+} from "./toolbar-sections";
+
+export function createEditToolbar(editContext: EditContextType) {
+  if (!editContext) return null;
+
+  const hasLayout = editContext.contentEditorItem?.hasLayout;
+  const isReviewsView = editContext.viewName === "reviews";
+
+  // For items without layout (simple content editor)
+  if (!hasLayout) {
+    const left: ToolbarSection[] = [
+      {
+        key: "compare",
+        component: <CompareControls />,
+      },
+    ];
+
+    return <GenericToolbar left={left} />;
+  }
+
+  // For pages with layout
+  const left: ToolbarSection[] = [];
+  const right: ToolbarSection[] = [];
+  const center: ToolbarSection[] = [];
+
+  // Add review commands if in reviews view
+
+  // Standard edit controls
+  left.push({
+    key: "edit-controls",
+    component: <EditControls />,
+  });
+  if (isReviewsView) {
+    left.push({
+      key: "review-commands",
+      component: <ReviewCommands />,
+    });
+  }
+
+  // Insert controls
+  left.push({
+    key: "insert-controls",
+    component: <InsertControls />,
+  });
+
+  // Viewport controls (desktop/mobile/form)
+  center.push({
+    key: "viewport-controls",
+    component: <ViewportControls />,
+  });
+
+  // Utility controls (compare, fullscreen, sidebar)
+  right.push({
+    key: "utility-controls",
+    component: <UtilityControls />,
+  });
+
+  return <GenericToolbar left={left} right={right} center={center} />;
+}

package/src/editor/menubar/WorkflowButton.tsx

@@ -11,6 +11,7 @@ export function WorkflowButton() {
   const editContext = useEditContext();
 
   if (!editContext?.currentItemDescriptor) return null;
+  if (editContext?.user?.isLimitedPreviewUser) return null;
 
   // Find the current item in workboxItems to get its workflow commands
   const currentWorkboxItem = editContext.workboxItems?.find(

package/src/editor/menubar/toolbar-sections/CompareControls.tsx

@@ -0,0 +1,22 @@
+import { useEditContext } from "../../client/editContext";
+import { SimpleIconButton } from "../../ui/SimpleIconButton";
+import { CompareIcon } from "../../ui/Icons";
+
+export function CompareControls() {
+  const editContext = useEditContext();
+
+  if (!editContext) return null;
+
+  return (
+    <SimpleIconButton
+      icon={<CompareIcon className="h-6 w-6 p-1" />}
+      label="Compare"
+      size="large"
+      className={
+        editContext.compareMode ? "text-gray-600" : "hover:text-gray-600"
+      }
+      selected={editContext.compareMode}
+      onClick={() => editContext.setCompareMode(!editContext.compareMode)}
+    />
+  );
+}

package/src/editor/menubar/toolbar-sections/EditControls.tsx

@@ -0,0 +1,54 @@
+import { useEditContext } from "../../client/editContext";
+import { SimpleIconButton } from "../../ui/SimpleIconButton";
+import { EyeIcon, MessagesSquare, Pencil } from "lucide-react";
+
+export function EditControls() {
+  const editContext = useEditContext();
+
+  if (!editContext) return null;
+
+  // Calculate total count of comments and suggestions
+  const commentsCount =
+    editContext.comments?.filter((x) => !x.isResolved).length || 0;
+  const suggestionsCount =
+    editContext.suggestedEdits?.filter((x) => x.status === "pending").length ||
+    0;
+  const totalCount = commentsCount + suggestionsCount;
+
+  return (
+    <>
+      {!editContext.user?.isLimitedPreviewUser && (
+        <SimpleIconButton
+          icon={<Pencil className="h-6 w-6 p-1" strokeWidth={1} />}
+          label="Edit"
+          size="large"
+          selected={editContext.mode === "edit"}
+          onClick={() => editContext.setMode("edit")}
+        />
+      )}
+
+      <SimpleIconButton
+        icon={<EyeIcon className="h-6 w-6 p-1" strokeWidth={1} />}
+        label="Preview"
+        size="large"
+        selected={editContext.mode === "preview"}
+        onClick={() => editContext.setMode("preview")}
+      />
+
+      <div className="relative">
+        <SimpleIconButton
+          selected={editContext?.mode === "suggestions"}
+          icon={<MessagesSquare strokeWidth={1} className="h-6 w-6 p-1" />}
+          label="Write suggestions"
+          size="large"
+          onClick={() => editContext?.setMode("suggestions")}
+        />
+        {totalCount > 0 && (
+          <div className="bg-theme-secondary text-3xs absolute -top-1 -right-1 flex h-[16px] min-w-[16px] items-center justify-center rounded-full px-1 text-white">
+            {totalCount > 99 ? "99+" : totalCount}
+          </div>
+        )}
+      </div>
+    </>
+  );
+}