@alpaca-editor/core 1.0.3813 → 1.0.3817

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/component-designer/ComponentDesigner.tsx

@@ -63,7 +63,7 @@ export function ComponentDesigner() {
         <StackedPanels panels={mainPanels} />
       </SplitterPanel>
       <SplitterPanel>
-        <PageViewerFrame mode="view" />
+        <PageViewerFrame compareView={false} />
       </SplitterPanel>
     </Splitter>
   );

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/menubar/LanguageSelector.tsx

@@ -31,7 +31,7 @@ export function LanguageSelector({
   const allLanguages = editContext?.itemLanguages || [];
 
   const currentLanguage = allLanguages.find(
-    (x) => x.languageCode === selectedLanguage
+    (x) => x.languageCode === selectedLanguage,
   );
 
   const languages = showAllLanguagesInternal
@@ -49,11 +49,11 @@ export function LanguageSelector({
   return (
     <>
       <div
-        className={`p-[7px] text-sm cursor-pointer flex items-center gap-3 ${
+        className={`flex cursor-pointer items-center gap-3 p-[7px] py-[5px] text-sm ${
           darkMode
             ? "text-gray-500 hover:bg-gray-300"
             : "text-gray-200 hover:bg-gray-500"
-        }  rounded-md ${disabled ? "opacity-50" : ""}`}
+        } rounded-md ${disabled ? "opacity-50" : ""}`}
         onClick={(ev) => {
           if (disabled) return;
           overlaypanel.current?.toggle(ev, ev.currentTarget);
@@ -82,9 +82,9 @@ export function LanguageSelector({
         </div>
       </div>
       <OverlayPanel dismissable={true} ref={overlaypanel} closeOnEscape>
-        <div className="max-h-[50vh] min-w-64 flex flex-col">
+        <div className="flex max-h-[50vh] min-w-64 flex-col">
           {showAllLanguagesSwitch && (
-            <div className="text-xs p-2 flex items-center gap-2 justify-center">
+            <div className="flex items-center justify-center gap-2 p-2 text-xs">
               <span
                 className="cursor-pointer"
                 onClick={() => setShowAllLanguagesInternal(false)}
@@ -108,7 +108,7 @@ export function LanguageSelector({
               {languages.map((x) => (
                 <div
                   key={x.languageCode}
-                  className="cursor-pointer hover:bg-gray-200 flex gap-2 p-2"
+                  className="flex cursor-pointer gap-2 p-2 hover:bg-gray-200"
                   onClick={() => selectLanguage(x)}
                 >
                   <img src={x.icon} className="h-5" /> {x.name} ({x.versions})

package/src/editor/menubar/PageSelector.tsx

@@ -49,7 +49,7 @@ export function PageSelector({
     <>
       <div
         id="page-selector-button"
-        className="p-[7px] text-sm cursor-pointer flex items-center gap-3 text-gray-200 hover:bg-gray-500 rounded-md"
+        className="flex cursor-pointer items-center gap-3 rounded-md p-[7px] py-[5px] text-sm text-gray-200 hover:bg-gray-500"
         onClick={(ev) => overlaypanel.current?.toggle(ev, ev.currentTarget)}
         data-testid="page-selector-button"
       >
@@ -66,10 +66,10 @@ export function PageSelector({
         </div>
       </div>
       <OverlayPanel dismissable={true} ref={overlaypanel} closeOnEscape>
-        <div className="h-[75vh] min-w-48 flex flex-col overflow-hidden">
-          <div className="flex-1 flex flex-col gap-1">
-            <div className="p-2 flex flex-col">
-              <div className="text-xs text-gray-500 mb-2 flex items-center gap-1">
+        <div className="flex h-[75vh] min-w-48 flex-col overflow-hidden">
+          <div className="flex flex-1 flex-col gap-1">
+            <div className="flex flex-col p-2">
+              <div className="mb-2 flex items-center gap-1 text-xs text-gray-500">
                 <ArrowDownIcon /> Search
               </div>
               <ItemSearch
@@ -78,8 +78,8 @@ export function PageSelector({
                 itemSelected={(item) => loadItem(item)}
               />
             </div>
-            <div className="flex-1 flex flex-col">
-              <div className="border-t p-2 pb-1 text-xs text-gray-500 flex items-center gap-1">
+            <div className="flex flex-1 flex-col">
+              <div className="flex items-center gap-1 border-t p-2 pb-1 text-xs text-gray-500">
                 <ArrowDownIcon /> Select
               </div>
               <div className="relative flex-1">
@@ -91,8 +91,8 @@ export function PageSelector({
                 </div>
               </div>
             </div>
-            <div className="border-t p-2 flex flex-col">
-              <div className="text-xs text-gray-500 mb-2 flex items-center gap-1">
+            <div className="flex flex-col border-t p-2">
+              <div className="mb-2 flex items-center gap-1 text-xs text-gray-500">
                 <ArrowDownIcon /> Last visited
               </div>
               <BrowseHistory
@@ -101,8 +101,8 @@ export function PageSelector({
               />
             </div>
           </div>
-          <div className="border-t p-2 flex flex-col">
-            <div className="text-xs text-gray-500 mb-2 flex items-center gap-1">
+          <div className="flex flex-col border-t p-2">
+            <div className="mb-2 flex items-center gap-1 text-xs text-gray-500">
               <ArrowDownIcon /> Actions
             </div>
             <div className="flex gap-2">

package/src/editor/menubar/PageViewerControls.tsx

@@ -3,6 +3,7 @@ import { useEditContext } from "../client/editContext";
 import { Separator } from "./Separator";
 import { CompareIcon, FormEditIcon } from "../ui/Icons";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
+import { Route, SquarePen, UserRoundPen, EyeIcon, Pencil } from "lucide-react";
 
 export function PageViewerControls() {
   const editContext = useEditContext();
@@ -17,16 +18,54 @@ export function PageViewerControls() {
   const setDevice = pageViewContext.setDevice;
 
   return (
-    <div className="flex gap-2 items-center">
+    <div className="flex items-center gap-2">
       {hasLayout && (
         <>
-          {" "}
+          {!editContext.user?.isLimitedPreviewUser && (
+            <SimpleIconButton
+              icon={<Pencil className="h-6 w-6 p-1" />}
+              label="Edit"
+              size="large"
+              className={classNames(
+                editContext.mode === "edit"
+                  ? "bg-gray-200"
+                  : "hover:bg-gray-200 hover:text-gray-800",
+              )}
+              onClick={() => editContext.setMode("edit")}
+            />
+          )}
+
+          <SimpleIconButton
+            icon={<EyeIcon className="h-6 w-6 p-1" />}
+            label="Preview"
+            size="large"
+            className={classNames(
+              editContext.mode === "preview"
+                ? "bg-gray-200"
+                : "hover:bg-gray-200 hover:text-gray-800",
+            )}
+            onClick={() => editContext.setMode("preview")}
+          />
+
+          <SimpleIconButton
+            selected={editContext?.mode === "suggestions"}
+            icon={<UserRoundPen size={24} className="p-0.5" />}
+            label="Suggestions"
+            size="large"
+            className={classNames(
+              editContext?.mode === "suggestions"
+                ? "text-gray-600"
+                : "hover:text-gray-600",
+            )}
+            onClick={() => editContext?.setMode("suggestions")}
+          />
+          <Separator size="large" />
           <i
             className={classNames(
               device === "desktop"
                 ? "bg-gray-200"
-                : " hover:bg-gray-200 text-gray-100 hover:text-gray-800",
-              "pi pi-desktop cursor-pointer p-2 rounded-full"
+                : "text-gray-400 hover:bg-gray-200 hover:text-gray-800",
+              "pi pi-desktop cursor-pointer rounded-full p-2",
             )}
             title="Desktop"
             onClick={() => {
@@ -37,8 +76,8 @@ export function PageViewerControls() {
             className={classNames(
               device && device !== "desktop"
                 ? "bg-gray-200"
-                : " hover:bg-gray-200 text-gray-100 hover:text-gray-800",
-              "pi pi-mobile cursor-pointer p-2 rounded-full"
+                : "text-gray-400 hover:bg-gray-200 hover:text-gray-800",
+              "pi pi-mobile cursor-pointer rounded-full p-2",
             )}
             title="Mobile"
             onClick={() => {
@@ -51,8 +90,8 @@ export function PageViewerControls() {
             className={classNames(
               !device
                 ? "bg-gray-200"
-                : " hover:bg-gray-200 text-gray-100 hover:text-gray-800",
-              "w-8 h-8 cursor-pointer p-1 rounded-full"
+                : "text-gray-400 hover:bg-gray-200 hover:text-gray-800",
+              "h-8 w-8 cursor-pointer rounded-full p-1",
             )}
             title="Form"
             onClick={() => {
@@ -63,27 +102,14 @@ export function PageViewerControls() {
           </i>
           <Separator size="large" />
           <i
-            className="pi pi-external-link cursor-pointer hover:bg-gray-200 p-2 rounded-full text-gray-100 hover:text-gray-800"
+            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)}
           />
-          {!editContext.user?.isLimitedPreviewUser && (
-            <i
-              className={classNames(
-                editContext.previewMode
-                  ? "bg-gray-200"
-                  : " hover:bg-gray-200 text-gray-100 hover:text-gray-800",
-                "pi pi-eye cursor-pointer p-2 rounded-full"
-              )}
-              title="Preview"
-              onClick={() => editContext.setPreviewMode((x) => !x)}
-            />
-          )}
-          <Separator size="large" />
         </>
       )}
       <SimpleIconButton
-        icon={<CompareIcon className="w-6 h-6 p-1" />}
+        icon={<CompareIcon className="h-6 w-6 p-1" />}
         label="Compare"
         size="large"
         className={