@alpaca-editor/core 1.0.3939 → 1.0.3942

package/src/editor/FloatingToolbar.tsx

@@ -1,163 +0,0 @@
-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

@@ -1,128 +0,0 @@
-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

@@ -1,90 +0,0 @@
-"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

@@ -1,196 +0,0 @@
-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

@@ -1,95 +0,0 @@
-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>
-  );
-}