@alpaca-editor/core 1.0.3942 → 1.0.3943

package/src/editor/ui/StackedPanels.tsx

@@ -0,0 +1,134 @@
+import "allotment/dist/style.css";
+import { Allotment, AllotmentHandle } from "allotment";
+
+import { useEffect, useRef, useState } from "react";
+
+import { classNames } from "primereact/utils";
+import { Panel } from "../../config/types";
+
+export function StackedPanels({ panels }: { panels: Panel[] }) {
+  const splitter = useRef<AllotmentHandle>(null);
+
+  const [sizes, setSizes] = useState<number[]>([]);
+  const [preferredSizes, setPreferredSizes] = useState<number[] | undefined>(
+    undefined
+  );
+  const [panelsExpanded, setPanelsExpanded] = useState<boolean[]>([]);
+  const [sizeToSet, setSizeToSet] = useState<number[] | undefined>();
+
+  const panelHeaderSize = 30;
+  const toggle = (panelIndex: number) => {
+    const newSize = panelsExpanded[panelIndex]
+      ? panelHeaderSize
+      : (preferredSizes || sizes)[panelIndex];
+
+    resizePanel(panelIndex, newSize);
+
+    setPanelsExpanded((x) => {
+      const newState = [...x];
+      newState[panelIndex] = !newState[panelIndex];
+      return newState;
+    });
+  };
+
+  useEffect(() => {
+    setPanelsExpanded(panels.map(() => true));
+    setPreferredSizes(() => panels.map((x) => x.initialSize));
+  }, [panels]);
+
+  const resizePanel = (panelIndex: number, newSize: number) => {
+    const totalSize = sizes.reduce((a, b) => a + b, 0);
+    const totalOther = totalSize - sizes[panelIndex];
+    const tmpSizes = [...sizes];
+    tmpSizes[panelIndex] = newSize;
+    const percentages = tmpSizes.map((x) => x / totalOther);
+    percentages[panelIndex] = 0;
+    const remaining = totalSize - newSize;
+    const newSizes = percentages.map((x) => x * remaining);
+    newSizes[panelIndex] = newSize;
+    setSizes(newSizes);
+
+    setSizeToSet(newSizes);
+  };
+
+  useEffect(() => {
+    if (sizeToSet) splitter.current?.resize(sizeToSet);
+  }, [sizeToSet]);
+
+  const getHeader = (panel: any, index: number) => {
+    if (panel.header) return panel.header({ panel, index });
+
+    return (
+      <div
+        className={classNames(
+          "p-1.5 bg-gray-50 uppercase text-gray-500 text-xs flex justify items-center cursor-pointer",
+          panelsExpanded[index] ? "border-b" : ""
+        )}
+        onClick={() => toggle(index)}
+      >
+        {panel.icon &&
+          (typeof panel.icon === "string" ? (
+            <i className={classNames(panel.icon, "pi mr-1.5")}></i>
+          ) : (
+            <div className="w-4 h-4 mr-1.5">{panel.icon}</div>
+          ))}
+        <div className="mr-auto">{panel.title}</div>
+        <i
+          className={classNames(
+            panelsExpanded[index] ? "pi-chevron-up" : "pi-chevron-down",
+            "pi  text-sm"
+          )}
+        ></i>
+      </div>
+    );
+  };
+
+  const initalSizes = panels.map((x) => x.initialSize);
+
+  return (
+    <Allotment
+      vertical={true}
+      snap={true}
+      ref={splitter}
+      defaultSizes={initalSizes}
+      onChange={(s) => {
+        if (sizes.join(",") != s.join(",")) setSizes(s);
+
+        const newPreferred = [...(preferredSizes || s)];
+        s.forEach((x, i) => {
+          if (x > panelHeaderSize) newPreferred[i] = x;
+        });
+
+        setPreferredSizes(newPreferred);
+      }}
+    >
+      {panels.map((panel, index) => (
+        <Allotment.Pane
+          key={index}
+          //  preferredSize={(preferredSizes || initalSizes)[index] + "%"}
+          maxSize={
+            panelsExpanded.length <= index || panelsExpanded[index]
+              ? 10000
+              : panelHeaderSize
+          }
+        >
+          <div className="flex flex-col h-full">
+            {getHeader(panel, index)}
+            {panelsExpanded[index] && (
+              <div className="overflow-hidden relative flex-1">
+                <div
+                  className={classNames(
+                    "inset-0 absolute",
+                    panel.noOverflow ? "" : "overflow-y-auto"
+                  )}
+                >
+                  {panel.content}
+                </div>
+              </div>
+            )}
+          </div>
+        </Allotment.Pane>
+      ))}
+    </Allotment>
+  );
+}

package/src/editor/ui/Toolbar.tsx

@@ -0,0 +1,7 @@
+export function Toolbar({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="bg-gray-50 flex gap-1 p-0.5 border-b items-center">
+      {children}
+    </div>
+  );
+}

package/src/editor/utils/id-helper.ts

@@ -0,0 +1,3 @@
+export function cleanId(id?: string) {
+  if (id) return id.replace(/[^a-zA-Z0-9_-]/g, "").toLowerCase();
+}

package/src/editor/utils/insertOptions.ts

@@ -0,0 +1,69 @@
+import { InsertOption } from "../../types";
+import { EditContextType } from "../client/editContext";
+import { getComponentById } from "../componentTreeHelper";
+import { Page, Placeholder } from "../pageModel";
+
+export function getInsertOptionsForCurrentSelection(
+  editContext: EditContextType
+): InsertOption[] {
+  const page = editContext.page;
+
+  if (!page) return [];
+
+  const insertingPlaceholderKeys = [editContext.selectedForInsertion]
+    .map((x) => getComponentById(x, editContext.page!))
+    .filter((x) => x)
+    .reduce(
+      (a, x) => a.concat(x!.placeholders?.map((y: Placeholder) => y.key) || []),
+      [] as string[]
+    );
+
+  const selectedPlaceholderKeys = [
+    //...selection.filter((x) => x.indexOf("_") > 0),
+    ...insertingPlaceholderKeys,
+  ];
+
+  function collectInsertOptions(
+    page: Page,
+    placeholderKeys: string[]
+  ): InsertOption[] {
+    const insertOptionsMap: Map<string, InsertOption> = new Map();
+
+    function traverse(placeholders: Placeholder[]) {
+      for (const placeholder of placeholders) {
+        if (
+          placeholder &&
+          (placeholderKeys.length === 0 ||
+            placeholderKeys.includes(placeholder.key))
+        ) {
+          for (const option of placeholder.insertOptions) {
+            insertOptionsMap.set(option.typeId, option);
+          }
+        }
+        for (const component of placeholder.components) {
+          if (component.placeholders) traverse(component.placeholders);
+        }
+      }
+    }
+
+    traverse(page.rootComponent.placeholders);
+
+    // Convert the map back into an array of objects
+    const insertOptionsArray: InsertOption[] = Array.from(
+      insertOptionsMap.values()
+    );
+
+    insertOptionsArray.sort((a, b) => a.name.localeCompare(b.name));
+
+    return insertOptionsArray;
+  }
+
+  const currentInsertOptions = page
+    ? collectInsertOptions(page, selectedPlaceholderKeys)
+    : [];
+
+
+ // console.log(currentInsertOptions, selectedPlaceholderKeys, page);  
+
+  return currentInsertOptions;
+}

package/src/editor/utils/itemutils.ts

@@ -0,0 +1,29 @@
+import { getCreateAndSwitchToNewVersionCommand } from "../commands/createVersionCommand";
+import { Language } from "../pageModel";
+import { EditContextType } from "../client/editContext";
+
+export const confirmCreateVersion = (
+  editContext: EditContextType,
+  language: Language
+) => {
+    editContext.confirm({
+        message:
+          "This page has no version in language " +
+          language.name +
+          " (" +
+          language.languageCode +
+          "). Do you want to create a new version?",
+        header: "Create Language Version?",
+        icon: "pi pi-exclamation-triangle",
+    acceptLabel: "Yes, create version",
+    rejectLabel: "No",
+    accept: async () => {
+      await editContext?.executeCommand({
+        command: getCreateAndSwitchToNewVersionCommand({
+          language: language.languageCode,
+        }),
+      });
+      },
+    },
+  );
+};

package/src/editor/utils/useMemoDebug.ts

@@ -0,0 +1,28 @@
+import { useMemo, useRef } from "react";
+
+// Generic type for the return value of the memoized factory
+export function useMemoWithDebug<T>(factory: () => T, dependencies: any[]): T {
+  const previousDependenciesRef = useRef<any[]>([]);
+
+  const hasChanged = dependencies.some((dep, index) => {
+    return dep !== previousDependenciesRef.current[index];
+  });
+
+  if (hasChanged) {
+    dependencies.forEach((dep, index) => {
+      if (dep !== previousDependenciesRef.current[index]) {
+        console.log(
+          `Dependency at index ${index} changed:`,
+          "\nPrevious:",
+          previousDependenciesRef.current[index],
+          "\nCurrent:",
+          dep
+        );
+      }
+    });
+  }
+
+  previousDependenciesRef.current = dependencies;
+
+  return useMemo(factory, dependencies);
+}