@alpaca-editor/core 1.0.0

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="flex items-center py-2 px-3 my-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>
+            {item.id} <CopyToClipboardButton text={item.id} />
+          </div>
+          <div className="font-bold">Path:</div>
+          <div>
+            {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>
+            <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,192 @@
+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 { ItemTreeNodeData } from "./services/contentService";
+import { Splitter, SplitterPanel } from "primereact/splitter";
+import ItemSearch, { ResultItem } from "./ui/ItemSearch";
+import { SimpleTabs } from "./ui/SimpleTabs";
+import { ScrollingContentTree } from "./ScrollingContentTree";
+
+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>();
+
+  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;
+  }
+
+  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,94 @@
+import { ReactNode, useRef } from "react";
+import React from "react";
+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";
+
+export default function MainLayout({
+  view,
+  centerPanelView,
+  rightSidebar,
+  rightSidebarTitle,
+  className,
+}: {
+  rightSidebar?: ReactNode;
+  rightSidebarTitle?: string;
+  view: EditorView;
+  centerPanelView: ReactNode;
+  className?: string;
+}) {
+  const panels: SplitterPanel[] = [];
+  const editContext = useEditContext();
+  const mainLayoutDivRef = useRef<HTMLDivElement>(null);
+  const leftSidebarRef = React.useRef<HTMLDivElement>(null);
+
+  if (!editContext) return null;
+
+  if (view.leftSidebar)
+    panels.push({
+      name: "leftSidebar",
+      defaultSize: 350,
+      content: (
+        <div
+          className="w-full h-full"
+          ref={leftSidebarRef}
+          style={{ wordBreak: "normal" }}
+        >
+          <SidebarView
+            sidebar={view.leftSidebar}
+            editContext={editContext}
+            active={true}
+          />
+        </div>
+      ),
+    });
+  panels.push({
+    name: "center",
+    defaultSize: "auto",
+    content: centerPanelView,
+  });
+
+  if (rightSidebar) {
+    panels.push({
+      name: "rightSidebar",
+      defaultSize: 250,
+      content: rightSidebar,
+      collapsible: true,
+    });
+  }
+
+  if (!editContext?.configuration.editor.embedded) {
+    className = classNames("fixed inset-0", className);
+  }
+
+  return (
+    <div
+      className={classNames("flex flex-col select-none", className)}
+      ref={mainLayoutDivRef}
+    >
+      {editContext?.configuration.editor.titlebar}
+      <div className="flex flex-1">
+        {!view.hideViewSelector && <ViewSelector />}
+        <div className="flex-1">
+          <Splitter
+            localStorageKey="editor.panelSizes"
+            expandLabel={
+              <div className="flex items-center justify-center">
+                <NavigatorIcon />
+
+                <div className="mt-3">{rightSidebarTitle} </div>
+              </div>
+            }
+            panels={panels}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/editor/NewEditorClient.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { EditorConfiguration } from "../config/types";
+
+export function NewEditorClient(props: {
+  className?: string;
+  configuration: EditorConfiguration;
+}) {
+  console.log(props);
+  return <div>Hello</div>;
+}