@alpaca-editor/core 1.0.3941 → 1.0.3943

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,128 @@
+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(true);
+  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 = () => {
+    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="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"
+              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 flex items-center gap-1.5 rounded-lg border border-gray-200 bg-gray-500 p-1.5 text-white opacity-70 hover:opacity-85 ${className}`}
+      onClick={onClick}
+      data-testid={testId}
+    >
+      <i className={icon} /> {label}
+    </button>
+  );
+}

package/src/editor/ItemInfo.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { useEditContext } from "./client/editContext";
+import { FullItem } from "./pageModel";
+import { CopyToClipboardButton } from "./ui/CopyToClipboardButton";
+import { Section } from "./ui/Section";
+
+export function ItemInfo({ item }: { item: FullItem | null }) {
+  if (!item?.fields) return;
+  const editContext = useEditContext();
+
+  function formatRow(label: string, value: string) {
+    return (
+      <>
+        <div className="font-bold">{label}</div>
+        <div>{value}</div>
+      </>
+    );
+  }
+
+  return (
+    <div>
+      <div className="my-2 flex items-center px-3 py-2">
+        <img
+          src={item.largeIcon}
+          alt="Icon"
+          className="mr-2"
+          style={{ height: "32px", width: "32px" }}
+        />
+        <h2 className="text-l font-bold">
+          {item.name}
+          <button
+            className="ml-2"
+            onClick={() => {
+              editContext?.executeCommand({
+                command: editContext.configuration.commands.renameItem,
+                data: { items: [item] },
+              });
+            }}
+          >
+            <i className="pi pi-pencil" />
+          </button>
+        </h2>
+      </div>
+      <Section title="Info">
+        <div className="grid grid-cols-[min-content_1fr] gap-3 text-xs">
+          <div className="font-bold">ID:</div>
+          <div className="flex items-center gap-1">
+            {item.id} <CopyToClipboardButton text={item.id} />
+          </div>
+          <div className="font-bold">Path:</div>
+          <div className="flex items-center gap-1">
+            {item.path} <CopyToClipboardButton text={item.path} />
+          </div>
+          <div className="font-bold">Language:</div>
+          <div>{item.language}</div>
+          <div className="font-bold">Version:</div>
+          <div>{item.versions > 0 ? item.version : "No versions"}</div>
+          <div className="font-bold">Template:</div>
+          <div className="flex items-center gap-1">
+            <span
+              className="cursor-pointer hover:underline"
+              onClick={() => {
+                editContext?.loadItem({
+                  id: item.templateId,
+                  language: "en",
+                  version: 0,
+                });
+                editContext?.switchView("content-editor");
+              }}
+            >
+              {" "}
+              {item.templateName} ({item.templateId}{" "}
+            </span>
+            <CopyToClipboardButton text={item.templateId} />)
+          </div>
+
+          {item.masterLanguages &&
+            formatRow("Master languages", item.masterLanguages.join(", "))}
+          {item.translations && (
+            <>
+              <div className="font-bold">Languages</div>
+              <div>{item.translations?.join(", ")}</div>
+            </>
+          )}
+        </div>
+      </Section>
+    </div>
+  );
+}

package/src/editor/LinkEditorDialog.tsx

@@ -0,0 +1,196 @@
+import { Dialog } from "primereact/dialog";
+
+import { InputText } from "primereact/inputtext";
+import { useEffect, useState } from "react";
+import { Dropdown } from "primereact/dropdown";
+import { Divider } from "primereact/divider";
+import { Button } from "primereact/button";
+
+import { Splitter, SplitterPanel } from "primereact/splitter";
+import ItemSearch, { ResultItem } from "./ui/ItemSearch";
+import { SimpleTabs } from "./ui/SimpleTabs";
+import { ScrollingContentTree } from "./ScrollingContentTree";
+import { useEditContext } from "./client/editContext";
+
+export type Link = {
+  url?: string;
+  itemId?: string;
+  queryString?: string;
+  target?: string;
+  customTarget?: string;
+  type: string;
+  targetItemLongId?: string;
+  targetItemName?: string;
+};
+
+export function LinkEditorDialog({
+  linkValue,
+  onCancel,
+  onOk,
+}: {
+  linkValue: Link;
+  onOk: (link: Link) => void;
+  onCancel: () => void;
+}) {
+  const [url, setUrl] = useState<string>();
+  const [targetWindow, setTargetWindow] = useState<string>();
+  const [customTarget, setCustomTarget] = useState<string>();
+  const [queryString, setQueryString] = useState<string>();
+  const [activeTabIndex, setActiveTabIndex] = useState<number>(0);
+  const [selectedItemId, setSelectedItemId] = useState<string>("");
+  const [hoveredItemId, setHoveredItemId] = useState<string>();
+  const editContext = useEditContext();
+
+  useEffect(() => {
+    setUrl(linkValue.url);
+    setTargetWindow(linkValue.target);
+
+    if (linkValue.type == "external") setActiveTabIndex(1);
+    else setActiveTabIndex(0);
+
+    if (linkValue.target && linkValue.target != "_blank") {
+      setTargetWindow("custom");
+      setCustomTarget(linkValue.target);
+    }
+
+    if (linkValue.itemId) setSelectedItemId(linkValue.itemId);
+    if (linkValue.queryString) setQueryString(linkValue.queryString);
+  }, [linkValue]);
+
+  const targetWindows = [
+    { name: "Active browser", code: "" },
+    { name: "New browser", code: "_blank" },
+    { name: "Custom", code: "custom" },
+  ];
+
+  function getTargetWindow() {
+    if (targetWindow == "custom") return customTarget;
+    return targetWindow;
+  }
+
+  if (!editContext) return null;
+
+  const tabs = [
+    {
+      id: "internal",
+      label: "Internal",
+      content: (
+        <Splitter className="mt-4 flex-1">
+          <SplitterPanel className="relative h-full">
+            <div className="absolute inset-0 overflow-auto">
+              <ScrollingContentTree
+                selectedItemId={hoveredItemId || selectedItemId}
+                onSelectionChange={(selection) => {
+                  setSelectedItemId(selection[0]?.id || "");
+                }}
+              />
+            </div>
+          </SplitterPanel>
+          <SplitterPanel>
+            <div className="relative ml-2 h-full w-full">
+              <div className="absolute inset-0 overflow-auto">
+                <ItemSearch
+                  itemSelected={(item) => {
+                    setSelectedItemId(item.id);
+                  }}
+                  setHoveredItem={(item) =>
+                    ((item?: ResultItem) => {
+                      if (!item) return;
+                      setHoveredItemId(item.id);
+                    })(item as ResultItem)
+                  }
+                />
+              </div>
+            </div>
+          </SplitterPanel>
+        </Splitter>
+      ),
+    },
+    {
+      id: "external",
+      label: "External",
+      content: (
+        <div className="flex-1">
+          {" "}
+          <label className="mt-4 block text-sm">Url:</label>
+          <InputText
+            value={url || ""}
+            onChange={(e) => {
+              setUrl(e.target.value);
+            }}
+            className="w-full text-sm"
+          />
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <Dialog
+      style={{ width: "60%", height: "70%" }}
+      onHide={onCancel}
+      header={"Select link target"}
+      visible={true}
+      onShow={() => {
+        // Trigger a resize event to recalculate TabView layout
+        window.dispatchEvent(new Event("resize"));
+      }}
+    >
+      <div className="flex h-full flex-col p-4">
+        {linkValue && (
+          <SimpleTabs
+            tabs={tabs}
+            activeTab={activeTabIndex}
+            setActiveTab={setActiveTabIndex}
+          />
+        )}
+        <Divider />
+        <label className="text-xs">QueryString</label>
+        <InputText
+          value={queryString}
+          onChange={(e) => setQueryString(e.target.value)}
+          className="text-sm"
+        />
+        <label className="mt-4 text-xs">Window</label>
+        <Dropdown
+          options={targetWindows}
+          optionLabel="name"
+          optionValue="code"
+          value={targetWindow}
+          onChange={(e) => setTargetWindow(e.value)}
+          className="text-sm"
+        ></Dropdown>
+        {targetWindow === "custom" && (
+          <div className="m-2">
+            <label className="block text-xs">Custom:</label>
+            <InputText
+              value={customTarget || ""}
+              onChange={(e) => {
+                setCustomTarget(e.target.value);
+              }}
+              className="text-sm"
+            />
+          </div>
+        )}
+        <Divider />
+        <div className="flex justify-end gap-3">
+          <Button
+            onClick={() => {
+              onOk({
+                url,
+                target: getTargetWindow(),
+                customTarget: customTarget,
+                itemId: selectedItemId,
+                queryString: queryString,
+                type: activeTabIndex === 1 ? "external" : "internal",
+              });
+            }}
+          >
+            Select
+          </Button>
+          <Button onClick={onCancel}>Cancel</Button>
+        </div>
+      </div>
+    </Dialog>
+  );
+}

package/src/editor/MainLayout.tsx

@@ -0,0 +1,95 @@
+import { ReactNode } from "react";
+import { EditorView } from "../config/types";
+import { classNames } from "primereact/utils";
+import { useEditContext } from "./client/editContext";
+import { SidebarView } from "./sidebar/SidebarView";
+import { Splitter, SplitterPanel } from "./ui/Splitter";
+import { ViewSelector } from "./sidebar/ViewSelector";
+import { Layers } from "lucide-react";
+import { MobileLayout } from "./MobileLayout";
+
+export type MainLayoutProps = {
+  rightSidebar?: ReactNode;
+  rightSidebarTitle?: string;
+  view: EditorView;
+  centerPanelView: ReactNode;
+  className?: string;
+};
+
+export default function MainLayout(props: MainLayoutProps) {
+  const panels: SplitterPanel[] = [];
+  const editContext = useEditContext();
+
+  if (!editContext) return null;
+
+  if (editContext.isMobile) {
+    return <MobileLayout {...props} />;
+  }
+
+  // Keep all left sidebars mounted to preserve their state when switching views
+  const viewsWithLeftSidebar = editContext.configuration.editor.views.filter(
+    (v) => v.leftSidebar,
+  );
+
+  if (viewsWithLeftSidebar.length > 0) {
+    panels.push({
+      name: "leftSidebar",
+      defaultSize: props.view.leftSidebar ? 350 : 0,
+      hidden: !props.view.leftSidebar,
+      content: (
+        <div className="relative h-full w-full" style={{ wordBreak: "normal" }}>
+          {viewsWithLeftSidebar.map((v) => (
+            <SidebarView
+              key={v.name}
+              sidebar={v.leftSidebar!}
+              editContext={editContext}
+              active={props.view.name === v.name && !!v.leftSidebar}
+            />
+          ))}
+        </div>
+      ),
+    });
+  }
+  panels.push({
+    name: "center",
+    defaultSize: "auto",
+    content: props.centerPanelView,
+  });
+
+  if (props.rightSidebar) {
+    panels.push({
+      name: "rightSidebar",
+      defaultSize: 250,
+      content: props.rightSidebar,
+      collapsible: true,
+    });
+  }
+
+  let className = props.className;
+
+  if (!editContext?.configuration.editor.embedded) {
+    className = classNames("fixed inset-0", props.className);
+  }
+
+  return (
+    <div className={classNames("flex flex-col select-none", className)}>
+      {editContext?.configuration.editor.titlebar}
+      <div className="flex flex-1">
+        {!props.view.hideViewSelector && <ViewSelector />}
+        <div className="flex-1">
+          <Splitter
+            localStorageKey="editor.panelSizes"
+            expandLabel={
+              <div className="flex items-center justify-center">
+                <Layers size={14} />
+                <div className="mt-3">{props.rightSidebarTitle} </div>
+              </div>
+            }
+            panels={panels}
+          />
+        </div>
+      </div>
+      {/* sidebars already rendered above; no hidden cache needed */}
+    </div>
+  );
+}