@alpaca-editor/core 1.0.0

package/src/editor/FloatingToolbar.tsx

@@ -0,0 +1,163 @@
+import { ReactNode, useCallback, useEffect, useState } from "react";
+
+export default function FloatingToolbar({
+  children,
+  onPin,
+  height,
+  width,
+}: {
+  children: ReactNode;
+  onPin?: () => void;
+  height?: number;
+  width?: number;
+}) {
+  const [position, setPosition] = useState({ x: 0, y: 95 });
+  const [size, setSize] = useState({ width: 400, height: 70 });
+  const [dragging, setDragging] = useState(false);
+  const [resizing, setResizing] = useState(false);
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+  const [hidden, setHidden] = useState(false);
+
+  useEffect(() => {
+    console.log("WIDTH: ", width, "Height: ", height);
+    setSize({ width: width || 400, height: height || 70 });
+  }, []);
+
+  const handleMouseDown = useCallback(
+    (e: any) => {
+      // Start dragging and calculate the offset from the mouse to the sidebar top-left corner
+      setDragging(true);
+      setOffset({
+        x: e.clientX - position.x,
+        y: e.clientY - position.y,
+      });
+    },
+    [position]
+  );
+
+  const handleMouseMove = useCallback(
+    (e: any) => {
+      if (dragging) {
+        // Update the position state based on mouse movement, adjusted by the initial offset
+        setPosition({
+          x: e.clientX - offset.x,
+          y: e.clientY - offset.y,
+        });
+      }
+    },
+    [dragging, offset]
+  );
+
+  const handleMouseUp = useCallback(() => {
+    // Stop dragging
+    setDragging(false);
+  }, []);
+
+  const handleResizeMouseDown = useCallback((e: any) => {
+    e.preventDefault();
+    setResizing(true);
+    setOffset({
+      x: e.clientX,
+      y: e.clientY,
+    });
+  }, []);
+
+  const handleResizeMouseMove = useCallback(
+    (e: any) => {
+      if (resizing) {
+        const newWidth = size.width + (e.clientX - offset.x);
+        const newHeight = size.height + (e.clientY - offset.y);
+        setSize({
+          width: newWidth > 200 ? newWidth : 200, // Minimum width
+          height: newHeight > 100 ? newHeight : 100, // Minimum height
+        });
+        setOffset({
+          x: e.clientX,
+          y: e.clientY,
+        });
+      }
+    },
+    [resizing, offset, size]
+  );
+
+  const handleResizeMouseUp = useCallback(() => {
+    setResizing(false);
+  }, []);
+
+  useEffect(() => {
+    if (resizing) {
+      document.addEventListener("mousemove", handleResizeMouseMove);
+      document.addEventListener("mouseup", handleResizeMouseUp);
+    }
+
+    return () => {
+      document.removeEventListener("mousemove", handleResizeMouseMove);
+      document.removeEventListener("mouseup", handleResizeMouseUp);
+    };
+  }, [resizing, handleResizeMouseMove, handleResizeMouseUp]);
+
+  // Add event listeners to the document when the sidebar is being dragged
+  useEffect(() => {
+    if (dragging) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    }
+
+    // Cleanup the document event listeners when the component unmounts or dragging stops
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [dragging, handleMouseMove, handleMouseUp]);
+
+  return (
+    <div
+      className="border border-gray-200 drop-shadow z-10 flex flex-col"
+      onMouseMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
+      style={{
+        left: `${position.x}px`,
+        top: `${position.y}px`,
+        position: "absolute", // Use 'fixed' or 'absolute' depending on your layout needs
+        height: `${hidden ? 30 : size.height}px`,
+        width: `${size.width}px`,
+      }}
+    >
+      <div
+        className="bg-gray-100 w-full flex justify-between items-between p-2 text-sm"
+        style={{ cursor: "move", userSelect: "none" }}
+        onMouseDown={handleMouseDown}
+      >
+        Toolbar
+        <div className="flex gap-2">
+          {hidden && (
+            <div
+              className="border-2 border-gray-800 w-4 h-4 cusor-pointer"
+              onClick={() => setHidden(false)}
+            ></div>
+          )}
+          {!hidden && (
+            <div
+              className="border-b-2 border-gray-800 w-4 h-4 cusor-pointer"
+              onClick={() => setHidden(true)}
+            ></div>
+          )}
+          {onPin && (
+            <i
+              className="pi pi-arrow-down-left cursor-pointer"
+              onClick={onPin}
+            ></i>
+          )}
+        </div>
+      </div>
+      <div className="flex-1">{!hidden && children}</div>
+      <div className="h-4 bg-gray-100"></div>
+      <div
+        className="cursor-nwse-resize w-4 h-4 absolute -bottom-1 -right-2 text-gray-500"
+        onMouseDown={handleResizeMouseDown}
+      >
+        <i className="pi pi-sort-down -rotate-45 w-4 h-4" />
+      </div>
+    </div>
+  );
+}

package/src/editor/ImageEditor.tsx

@@ -0,0 +1,129 @@
+import { MouseEventHandler, useCallback, useState } from "react";
+import { useEditContext } from "./client/editContext";
+import { ImageField } from "./fieldTypes";
+import { useDialog } from "./client/DialogContext";
+import { ClientFieldButton } from "../config/types";
+
+export function ImageEditor({
+  field,
+  style,
+}: {
+  field: ImageField;
+  style?: React.CSSProperties;
+}) {
+  const [showMenu, setShowMenu] = useState(false);
+  const editContext = useEditContext();
+  const dialogContext = useDialog();
+
+  if (!field || !editContext) return null;
+
+  const imageSelected = useCallback(
+    async (imageId: string) => {
+      editContext.operations.editField({
+        field: field.descriptor,
+        rawValue: '<image mediaid="{' + imageId + '}" />',
+        refresh: "immediate",
+      });
+    },
+    [field]
+  );
+
+  async function selectMedia() {
+    const selectedImageId = await editContext?.selectMedia({
+      selectedIdPath: field.value?.src || "",
+      mode: "images",
+    });
+    if (selectedImageId) imageSelected(selectedImageId);
+  }
+
+  const getImageSrc = () => {
+    if (!field.value) {
+      if (!field.rawValue) return null;
+
+      const parser = new DOMParser();
+      const xmlDoc = parser.parseFromString(field.rawValue, "text/xml");
+      const imageElement = xmlDoc.documentElement;
+      return imageElement.getAttribute("src");
+    }
+    return field.value.src;
+  };
+
+  const getImageAlt = () => {
+    console.log(`GetImageAlt: ${JSON.stringify(field.value)}`);
+    if (!field.value) return "";
+
+    // Standard image
+    return field.value.alt;
+  };
+
+  return (
+    <>
+      <div
+        className="absolute inset-0 flex items-center justify-center"
+        onMouseEnter={() => setShowMenu(true)}
+        onMouseLeave={() => setShowMenu(false)}
+        style={style}
+        data-testid="select-media"
+      >
+        {getImageSrc() && (
+          <img
+            src={getImageSrc()!}
+            alt={getImageAlt()}
+            className="max-h-full max-w-full object-contain"
+          />
+        )}
+        {showMenu && (
+          <div className="p-3 grid grid-cols-1 gap-1.5 items-stretch justify-center text-sm absolute inset-0 bg-black/50">
+            <Btn
+              label={getImageSrc() ? "Change Image" : "Select Image"}
+              icon="pi pi-image"
+              onClick={() => selectMedia()}
+              testId="select-media-button"
+              className="min-w-[80px]"
+            />
+            {editContext?.configuration?.fieldTypes["image"]?.buttons?.map(
+              (button: ClientFieldButton) => (
+                <Btn
+                  key={button.id}
+                  label={button.label}
+                  icon={button.icon}
+                  onClick={() =>
+                    button?.clientAction?.({
+                      field,
+                      editContext,
+                      dialogContext,
+                    })
+                  }
+                />
+              )
+            )}
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
+
+function Btn({
+  label,
+  icon,
+  onClick,
+  testId,
+  className,
+}: {
+  label: string;
+  icon?: string;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  testId?: string;
+  className?: string;
+}) {
+  return (
+    <button
+      className={`btn bg-gray-500 text-white p-1.5 rounded-lg opacity-70 border border-gray-200 hover:opacity-85 gap-1.5 flex items-center ${className}`}
+      onClick={onClick}
+      data-testid={testId}
+    >
+      <i className={icon} /> {label}
+    </button>
+  );
+}

package/src/editor/InsertMenu.tsx

@@ -0,0 +1,332 @@
+import { ItemCommand } from "./commands/itemCommands";
+import { ItemTreeNodeData } from "./services/contentService";
+import { useEditContext } from "../client-components";
+import { useRef, useState, useEffect } from "react";
+import { FullItem } from "./pageModel";
+import { InputText } from "primereact/inputtext";
+import { ScrollingContentTree } from "./ScrollingContentTree";
+import { SimpleTabs, Tab } from "./ui/SimpleTabs";
+import ItemSearch, { ResultItem } from "./ui/ItemSearch";
+import { templatesRootItemId } from "../config/config";
+import { Wizard } from "../page-wizard/PageWizard";
+
+export const InsertMenuTemplate = ({
+  insertOptions,
+  item,
+  commandCallback,
+}: {
+  insertOptions: ItemTreeNodeData[];
+  item: FullItem;
+  commandCallback?: (command: ItemCommand, result: any) => void;
+}) => {
+  const editContext = useEditContext();
+  const opRef = useRef<HTMLDivElement>(null);
+  const [filter, setFilter] = useState("");
+  const filterRef = useRef<HTMLInputElement>(null);
+  const [activeTab, setActiveTab] = useState(() => {
+    const stored = localStorage.getItem("editor.defaultInsertTab");
+    return stored ? parseInt(stored) : 0;
+  });
+  useEffect(() => {
+    localStorage.setItem("editor.defaultInsertTab", activeTab.toString());
+  }, [activeTab]);
+
+  const [recentTemplates, setRecentTemplates] = useState<string[]>([]);
+
+  const [recentItems, setRecentItems] = useState<FullItem[]>([]);
+  const [hoveredItem, setHoveredItem] = useState<ResultItem>();
+  const [wizards, setWizards] = useState<Wizard[]>([]);
+
+  const hideTimeoutRef = useRef<NodeJS.Timeout>(undefined);
+
+  useEffect(() => {
+    const loadRecentItems = async () => {
+      const items = await editContext?.itemsRepository.getItems(
+        recentTemplates.map((id) => ({
+          id,
+          version: 0,
+          language: "en",
+        }))
+      );
+
+      if (items) setRecentItems(items);
+    };
+    loadRecentItems();
+  }, [recentTemplates]);
+
+  useEffect(() => {
+    const stored = localStorage.getItem("editor.recentTemplates");
+    if (stored) {
+      const parsed = JSON.parse(stored);
+      setRecentTemplates(parsed);
+    }
+  }, [insertOptions]);
+
+  useEffect(() => {
+    const loadWizards = async () => {
+      const wizards = await editContext?.configuration.pageWizard.getWizards(
+        item.descriptor
+      );
+      setWizards(wizards ?? []);
+    };
+    loadWizards();
+  }, [item]);
+
+  const getCommand = (x: { id: string }) => {
+    return async (triggerEvent: any) => {
+      const stored = localStorage.getItem("editor.recentTemplates");
+      const recentIds = stored ? JSON.parse(stored) : [];
+
+      const updatedIds = [
+        x.id,
+        ...recentIds.filter((id: string) => id !== x.id),
+      ].slice(0, 10);
+
+      localStorage.setItem(
+        "editor.recentTemplates",
+        JSON.stringify(updatedIds)
+      );
+
+      setRecentTemplates(updatedIds);
+
+      const result = await editContext?.executeCommand({
+        command: editContext.configuration.commands.insertItem,
+        data: { items: [item], templateId: x.id },
+        event: triggerEvent,
+      });
+      if (commandCallback)
+        commandCallback(
+          editContext?.configuration.commands.insertItem as ItemCommand,
+          result
+        );
+    };
+  };
+
+  const options =
+    insertOptions.length === 0
+      ? undefined
+      : insertOptions.map((x) => ({
+          label: x.name,
+          id: x.id,
+          icon: (
+            <img
+              className="p-menuitem-icon"
+              src={x.icon}
+              style={{ height: "16px" }}
+              width="16"
+              height="16"
+              onDragStart={(e) => e.preventDefault()}
+            ></img>
+          ),
+          command: getCommand(x),
+        }));
+
+  const tabs: Tab[] = [
+    {
+      label: "Options",
+      content: (
+        <div className="flex flex-col gap-2 h-full">
+          <InputText
+            ref={filterRef}
+            className="w-full"
+            placeholder="Filter"
+            onChange={(e) => setFilter(e.target.value)}
+          />
+          <div className="flex-1 relative">
+            <div className="absolute inset-0 overflow-auto">
+              {options
+                ?.filter(
+                  (x) =>
+                    x.label.toLowerCase().indexOf(filter.toLowerCase()) > -1
+                )
+                .map((option: any) => (
+                  <div
+                    key={option.id}
+                    className="flex items-center p-1 cursor-pointer hover:bg-gray-100 gap-2 text-xs"
+                    onClick={(ev) => {
+                      ev.stopPropagation();
+                      ev.preventDefault();
+                      option.command(ev);
+                    }}
+                  >
+                    {option.icon}
+                    <span className="flex-1">
+                      {option.label
+                        .split(new RegExp(`(${filter})`, "i"))
+                        .map((part: string, i: number) =>
+                          part.toLowerCase() === filter.toLowerCase() ? (
+                            <u className="font-bold" key={i}>
+                              {part}
+                            </u>
+                          ) : (
+                            part
+                          )
+                        )}
+                    </span>
+                  </div>
+                ))}
+            </div>
+          </div>
+        </div>
+      ),
+      id: "options",
+    },
+    {
+      label: "Recent",
+      content: (
+        <div className="flex flex-col h-full">
+          {recentItems.length === 0 ? (
+            <div className="text-sm text-gray-500 p-2">
+              No recent templates
+            </div>
+          ) : (
+            recentItems.map((template) => (
+              <div
+                key={template.id}
+                className="flex items-center p-1 cursor-pointer hover:bg-gray-100 gap-2 text-xs"
+                onClick={(ev) => {
+                  ev.stopPropagation();
+                  ev.preventDefault();
+                  getCommand(template)(ev);
+                }}
+              >
+                <img
+                  className="p-menuitem-icon"
+                  src={template.icon}
+                  style={{ height: "16px" }}
+                  width="16"
+                  height="16"
+                  onDragStart={(e) => e.preventDefault()}
+                />
+                <span className="flex-1">{template.name}</span>
+              </div>
+            ))
+          )}
+        </div>
+      ),
+      id: "recent",
+    },
+    {
+      label: "From Template",
+      content: (
+        <div className=" h-full w-full flex flex-col gap-2">
+          <ItemSearch
+            setHoveredItem={setHoveredItem}
+            rootItemIds={[templatesRootItemId]}
+            itemSelected={(item) => {
+              getCommand(item)(null);
+            }}
+          />
+          <div className="flex-2 relative">
+            <div className="overflow-auto absolute inset-0">
+              <ScrollingContentTree
+                selectedItemId={hoveredItem?.id ?? item?.id}
+                rootItemId={templatesRootItemId}
+                onSelectionChange={(
+                  node: ItemTreeNodeData | ItemTreeNodeData[]
+                ) => {
+                  if (Array.isArray(node) && node[0]) {
+                    node = node[0];
+                  }
+                  if (!node) return;
+                  getCommand(node as ItemTreeNodeData)(null);
+                }}
+              />
+            </div>
+          </div>
+        </div>
+      ),
+      id: "fromTemplate",
+    },
+  ];
+
+  if (wizards.length > 0) {
+    tabs.push({
+      label: "Wizards",
+      content: (
+        <div>
+          {wizards.map((wizard) => (
+            <div
+              key={wizard.id}
+              className="flex items-center p-1 cursor-pointer hover:bg-gray-100 gap-2 text-xs"
+              onClick={(ev) => {
+                ev.stopPropagation();
+                ev.preventDefault();
+                editContext?.executeCommand({
+                  command:
+                    editContext?.configuration.pageWizard.startWizardCommand,
+                  data: { wizard, item: item.descriptor },
+                  event: ev,
+                });
+              }}
+            >
+              <img
+                className="p-menuitem-icon"
+                src={wizard.icon}
+                style={{ height: "16px" }}
+                width="16"
+                height="16"
+                onDragStart={(e) => e.preventDefault()}
+              />
+              <span className="flex-1">{wizard.name}</span>
+            </div>
+          ))}
+        </div>
+      ),
+      id: "wizards",
+    });
+  }
+
+  return (
+    <div
+      className="p-2"
+      style={{ display: "flex", alignItems: "center", cursor: "pointer" }}
+      onMouseEnter={() => {
+        if (hideTimeoutRef.current) {
+          clearTimeout(hideTimeoutRef.current);
+        }
+        opRef.current && (opRef.current.style.display = "block");
+        filterRef.current && filterRef.current.focus();
+      }}
+      onMouseLeave={() => {
+        hideTimeoutRef.current = setTimeout(() => {
+          opRef.current && (opRef.current.style.display = "none");
+        }, 200);
+      }}
+      onClick={(ev) => {
+        ev.stopPropagation();
+        ev.preventDefault();
+      }}
+    >
+      <i className="mr-2 pi pi-plus"></i>
+      <span className="p-menuitem-text">Insert</span>
+      {/* The OverlayPanel will appear on hover or click. */}
+      <div
+        ref={opRef}
+        className="absolute bg-white shadow-lg rounded-md z-50 p-2"
+        onKeyDownCapture={(ev) => {
+          ev.stopPropagation();
+        }}
+        onKeyUpCapture={(ev) => {
+          ev.stopPropagation();
+        }}
+        style={{
+          display: opRef.current ? "block" : "none",
+          top: "-50px",
+          left: "100%",
+          minWidth: "450px",
+          minHeight: "380px",
+          border: "1px solid #ddd",
+        }}
+      >
+        <div className="absolute inset-4 flex flex-col">
+          <SimpleTabs
+            tabs={tabs}
+            setActiveTab={setActiveTab}
+            activeTab={activeTab}
+          ></SimpleTabs>
+        </div>
+      </div>
+    </div>
+  );
+};