@alpaca-editor/core 1.0.3812 → 1.0.3815

package/src/components/ui/context-menu.tsx

@@ -0,0 +1,250 @@
+import * as React from "react";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+
+function ContextMenu({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
+}
+
+function ContextMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return (
+    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
+  );
+}
+
+function ContextMenuGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return (
+    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+  );
+}
+
+function ContextMenuPortal({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return (
+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+  );
+}
+
+function ContextMenuSub({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return (
+    <ContextMenuPrimitive.RadioGroup
+      data-slot="context-menu-radio-group"
+      {...props}
+    />
+  );
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </ContextMenuPrimitive.SubTrigger>
+  );
+}
+
+function ContextMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className,
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  );
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  );
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn(
+        "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+};

package/src/config/config.tsx

@@ -31,7 +31,6 @@ import {
   EditIcon,
   GraphQLIcon,
   JsonIcon,
-  NavigatorIcon,
   PageWizardIcon,
   WizardIcon,
 } from "../editor/ui/Icons";
@@ -91,6 +90,7 @@ import { getWizards } from "../page-wizard/service";
 import { startPageWizardCommand } from "../page-wizard/startPageWizardCommand";
 import { ImageFieldEditor } from "../editor/field-types/ImageFieldEditor";
 import { FieldAction } from "./types";
+import { Layers } from "lucide-react";
 
 const defaultRichTextEditorProfile: RichTextEditorProfile = {
   toolbar: {
@@ -129,7 +129,7 @@ const pageEditorRightSidebar = {
   panels: [
     {
       name: "component-tree",
-      icon: <NavigatorIcon />,
+      icon: <Layers size={14} />,
       title: "Component Navigator",
       content: <ComponentTree />,
       initialSize: 20,

package/src/config/types.ts

@@ -85,10 +85,12 @@ export type ViewPanel = {
 
 export type MenuItem = {
   id: string;
-  label: string;
-  icon: ReactNode;
+  label?: string;
+  icon?: ReactNode;
   items?: MenuItem[];
   command?: (event: any) => Promise<void>;
+  disabled?: boolean;
+  separator?: boolean;
 };
 
 export type EditorConfiguration = {

package/src/editor/ComponentInfo.tsx

@@ -47,13 +47,11 @@ export function ComponentInfo({ component }: { component: Component | null }) {
 
   return (
     <div>
-      <h2 className="py-3 px-3 text-l font-bold my-2">
-        {component.name}
-      </h2>
+      <h2 className="text-l my-2 px-3 py-3 font-bold">{component.name}</h2>
       <Section title="Info">
-        <div className="grid grid-cols-[min-content_1fr] gap-3 text-xs bg-gray-100">
+        <div className="grid grid-cols-[min-content_1fr] gap-3 bg-gray-100 text-xs">
           <div className="font-bold">ID:</div>
-          <div>
+          <div className="flex items-center gap-1">
             {component.id} <CopyToClipboardButton text={component.id} />
           </div>
           <div className="font-bold">Template</div>

package/src/editor/ConfirmationDialog.tsx

@@ -11,7 +11,7 @@ export type ConfirmationProps = {
   header?: React.ReactNode;
   acceptLabel?: string;
   rejectLabel?: string;
-  icon?: string;
+  icon?: React.ReactNode;
   accept: () => void;
   reject?: () => void;
   showCancel?: boolean;

package/src/editor/ContextMenu.tsx

@@ -1,11 +1,16 @@
-import { MenuItem, MenuItemCommandEvent } from "primereact/menuitem";
-
 import { EditContextType } from "./client/editContext";
 import { forwardRef, useImperativeHandle, useRef, useState } from "react";
-import { ContextMenu } from "primereact/contextmenu";
 
 import { FieldDescriptor } from "../types";
 import { Component, FieldButton } from "./pageModel";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "../components/ui/context-menu";
+import { MenuItem } from "../config/types";
 
 // export function getFieldContextMenu(
 //   field: Field,
@@ -64,11 +69,11 @@ export function showComponentContextMenu(
   components: Component[],
   editContext: EditContextType,
   field?: FieldDescriptor,
-  fieldButtons?: FieldButton[]
+  fieldButtons?: FieldButton[],
 ) {
   const componentCommandMenuItems = getComponentMenuItems(
     editContext,
-    components
+    components,
   );
 
   const menuItems = componentCommandMenuItems;
@@ -76,28 +81,29 @@ export function showComponentContextMenu(
   if (!editContext.readonly && field && fieldButtons?.length) {
     if (menuItems.length)
       menuItems.push({
+        id: "separator",
         separator: true,
       });
 
     fieldButtons.forEach((button) => {
       menuItems.push({
+        id: button.id,
         label: button.label,
-        command: () => {
+        command: async () => {
           editContext!.triggerFieldAction(field, button);
         },
-        icon: button.icon ? "pi " + button.icon : undefined,
+        icon: button.icon ? <img src={button.icon} width={16} /> : undefined,
       });
     });
   }
 
   return (e: any) => {
-    if (!e.shiftKey && !e.altKey) {      
-      if(menuItems.length) {
-
-//        editContext.select([component.id]);
+    if (!e.shiftKey && !e.altKey) {
+      if (menuItems.length) {
+        //        editContext.select([component.id]);
         editContext!.showContextMenu(e, menuItems);
       }
-      
+
       return true;
     }
     return false;
@@ -115,7 +121,8 @@ export const EditContextMenu = forwardRef<
   EditContextMenuRef,
   EditContextMenuProps
 >((props, ref) => {
-  const cm = useRef<ContextMenu>(null);
+  const canvasRef = useRef<HTMLSpanElement>(null);
+
   const [menuItems, setMenuItems] = useState<MenuItem[]>([]);
   if (!props) return;
   useImperativeHandle(ref, () => ({
@@ -123,30 +130,72 @@ export const EditContextMenu = forwardRef<
       if (!e.ctrlKey && !e.shiftKey && !e.altKey) {
         setMenuItems(items);
         e.preventDefault();
-        cm.current?.show(e);
+        triggerRightClick(canvasRef.current!, {
+          position: { x: e.clientX, y: e.clientY },
+        });
       }
     },
     close: (event: any) => {
-      cm.current?.hide(event);
+      //  cm.current?.hide(event);
     },
   }));
 
-  return <ContextMenu model={menuItems} ref={cm} />;
+  const triggerRightClick = (
+    element: HTMLSpanElement,
+    { position }: { position: any },
+  ) => {
+    const event = new MouseEvent("contextmenu", {
+      bubbles: true,
+      cancelable: true,
+      clientX: position.x,
+      clientY: position.y,
+    });
+    element.dispatchEvent(event);
+  };
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger>
+        <span id="contextmenu_canvas" ref={canvasRef}>
+          CM trigger
+        </span>
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        {menuItems.map((item, index) =>
+          item.separator ? (
+            <ContextMenuSeparator />
+          ) : (
+            <ContextMenuItem
+              key={index}
+              onClick={item.command}
+              disabled={item.disabled}
+              className="cursor-pointer"
+            >
+              {item.icon}
+              {item.label}
+            </ContextMenuItem>
+          ),
+        )}
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+  // return <ContextMenu model={menuItems} ref={cm} />;
 });
 function getComponentMenuItems(
   editContext: EditContextType,
-  components: Component[]
+  components: Component[],
 ): MenuItem[] {
   const componentCommands = editContext.getComponentCommands(components);
 
   const componentCommandMenuItems = componentCommands.map((x) => {
     return {
+      id: x.id,
       label: x.label,
       icon: x.icon,
-      command: (ev: MenuItemCommandEvent) =>
+      command: (ev: React.SyntheticEvent) =>
         editContext.executeCommand({
           command: x,
-          event: ev.originalEvent,
+          event: ev,
         }),
       disabled: editContext.isCommandDisabled({ command: x }),
     };

package/src/editor/ImageEditor.tsx

@@ -11,7 +11,7 @@ export function ImageEditor({
   field: ImageField;
   style?: React.CSSProperties;
 }) {
-  const [showMenu, setShowMenu] = useState(false);
+  const [showMenu, setShowMenu] = useState(true);
   const editContext = useEditContext();
   const dialogContext = useDialog();
 
@@ -72,7 +72,7 @@ export function ImageEditor({
           />
         )}
         {showMenu && (
-          <div className="absolute inset-0 grid grid-cols-1 items-stretch justify-center gap-1.5 bg-black/50 p-3 text-sm">
+          <div className="absolute inset-0 grid grid-cols-1 items-center justify-center gap-1.5 bg-black/50 p-3 text-sm">
             <Btn
               label={getImageSrc() ? "Change Image" : "Select Image"}
               icon="pi pi-image"

package/src/editor/ItemInfo.tsx

@@ -20,7 +20,7 @@ export function ItemInfo({ item }: { item: FullItem | null }) {
 
   return (
     <div>
-      <div className="flex items-center py-2 px-3 my-2">
+      <div className="my-2 flex items-center px-3 py-2">
         <img
           src={item.largeIcon}
           alt="Icon"
@@ -45,11 +45,11 @@ export function ItemInfo({ item }: { item: FullItem | null }) {
       <Section title="Info">
         <div className="grid grid-cols-[min-content_1fr] gap-3 text-xs">
           <div className="font-bold">ID:</div>
-          <div>
+          <div className="flex items-center gap-1">
             {item.id} <CopyToClipboardButton text={item.id} />
           </div>
           <div className="font-bold">Path:</div>
-          <div>
+          <div className="flex items-center gap-1">
             {item.path} <CopyToClipboardButton text={item.path} />
           </div>
           <div className="font-bold">Language:</div>
@@ -57,7 +57,7 @@ export function ItemInfo({ item }: { item: FullItem | null }) {
           <div className="font-bold">Version:</div>
           <div>{item.versions > 0 ? item.version : "No versions"}</div>
           <div className="font-bold">Template:</div>
-          <div>
+          <div className="flex items-center gap-1">
             <span
               className="cursor-pointer hover:underline"
               onClick={() => {

package/src/editor/MainLayout.tsx

@@ -4,11 +4,11 @@ import { EditorView } from "../config/types";
 
 import { classNames } from "primereact/utils";
 import { useEditContext } from "./client/editContext";
-import { NavigatorIcon } from "./ui/Icons";
 
 import { SidebarView } from "./sidebar/SidebarView";
 import { Splitter, SplitterPanel } from "./ui/Splitter";
 import { ViewSelector } from "./sidebar/ViewSelector";
+import { Layers } from "lucide-react";
 
 export default function MainLayout({
   view,
@@ -36,7 +36,7 @@ export default function MainLayout({
       defaultSize: 350,
       content: (
         <div
-          className="w-full h-full"
+          className="h-full w-full"
           ref={leftSidebarRef}
           style={{ wordBreak: "normal" }}
         >
@@ -80,8 +80,7 @@ export default function MainLayout({
             localStorageKey="editor.panelSizes"
             expandLabel={
               <div className="flex items-center justify-center">
-                <NavigatorIcon />
-
+                <Layers size={14} />
                 <div className="mt-3">{rightSidebarTitle} </div>
               </div>
             }

package/src/editor/Titlebar.tsx

@@ -14,7 +14,7 @@ export function Titlebar() {
         >
           <i className="pi pi-sparkles text-pink-400" />
         </a>{" "}
-        <span className="ml-2 font-mono">editor</span>
+        <span className="ml-2 font-mono">workbench</span>
       </div>
       <div>{editContext?.view.primaryControls}</div>
       <div>{editContext?.view.secondaryControls}</div>