@alpaca-editor/core 1.0.3938 → 1.0.3941

package/src/editor/sidebar/Performance.tsx

@@ -1,53 +0,0 @@
-import { useEditContext } from "../client/editContext";
-import { SimpleTable } from "../ui/SimpleTable";
-
-export function Performance() {
-  const context = useEditContext();
-  if (!context?.timings) return null;
-
-  const values = Object.keys(context.timings).map((key) => ({
-    key,
-    value: Math.round(context.timings[key]!),
-  }));
-
-  const columns = [
-    {
-      body: (entry: any) => {
-        if (
-          /[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}/.test(
-            entry.key
-          )
-        ) {
-          const ids = entry.key
-            .split("_")
-            .filter((part: string) =>
-              /[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}/.test(
-                part
-              )
-            );
-          return (
-            <div
-              className="cursor-pointer"
-              onClick={() => context.select(ids)}
-            >
-              {entry.key}
-            </div>
-          );
-        }
-
-        return entry.key;
-      },
-      header: "Metric",
-    },
-    {
-      body: (entry: any) => entry.value,
-      header: "Time (ms)",
-    },
-  ];
-
-  return (
-    <div className="overflow-x-auto">
-      <SimpleTable items={values} columns={columns} />
-    </div>
-  );
-}

package/src/editor/sidebar/Sessions.tsx

@@ -1,35 +0,0 @@
-import { useEditContext } from "../client/editContext";
-import { EditSession } from "../../types";
-import { SimpleTable } from "../ui/SimpleTable";
-
-export function Sessions() {
-  var editContext = useEditContext();
-  if (!editContext) return null;
-  const sessions = editContext?.activeSessions;
-  const columns = [
-    { body: (session: EditSession) => session.user?.name, header: "User" },
-    {
-      body: (session: EditSession) => (
-        <a
-          href="#"
-          onClick={() => {
-            if (session.item) editContext?.loadItem(session.item);
-          }}
-        >
-          {session.item?.name}
-        </a>
-      ),
-      header: "Page",
-    },
-    {
-      body: (session: EditSession) => session.item?.language,
-      header: "Language",
-    },
-    {
-      body: (session: EditSession) => session.item?.version,
-      header: "Version",
-    },
-  ];
-
-  return <SimpleTable items={sessions} columns={columns} />;
-}

package/src/editor/sidebar/Sidebar.tsx

@@ -1,20 +0,0 @@
-import { useEditContext } from "../client/editContext";
-
-import { SidebarView } from "./SidebarView";
-
-export function Sidebar() {
-  var editContext = useEditContext();
-  if (!editContext) return null;
-
-  const view = editContext.view;
-
-  if (!view || !view.leftSidebar) return null;
-
-  return (
-    <SidebarView
-      sidebar={view.leftSidebar}
-      editContext={editContext}
-      active={true}
-    />
-  );
-}

package/src/editor/sidebar/SidebarView.tsx

@@ -1,152 +0,0 @@
-import "allotment/dist/style.css";
-import { Allotment, AllotmentHandle } from "allotment";
-
-import { useEffect, useRef, useState } from "react";
-import { EditContextType } from "../client/editContext";
-import { classNames } from "primereact/utils";
-import { Sidebar } from "../../config/types";
-
-export function SidebarView({
-  sidebar,
-  editContext,
-  active,
-}: {
-  sidebar: Sidebar;
-  editContext: EditContextType;
-  active: boolean;
-}) {
-  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 = 40;
-  const toggle = (panelIndex: number) => {
-    const newSize = panelsExpanded[panelIndex]
-      ? panelHeaderSize
-      : (preferredSizes || sizes)[panelIndex];
-
-    if (newSize) resizePanel(panelIndex, newSize);
-
-    setPanelsExpanded((x) => {
-      const newState = [...x];
-      newState[panelIndex] = !newState[panelIndex];
-      return newState;
-    });
-  };
-
-  const resolvedPanels = sidebar.panels.map((x) => {
-    if (typeof x === "function") {
-      return x(editContext!);
-    }
-    return x;
-  });
-
-  useEffect(() => {
-    setPanelsExpanded(sidebar.panels.map(() => true));
-    setPreferredSizes(() => resolvedPanels.map((x) => x.initialSize));
-  }, [sidebar]);
-
-  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(
-          "justify relative flex cursor-pointer items-center bg-gray-50 p-2.5 text-xs text-gray-500 uppercase",
-          panelsExpanded[index] ? "border-b border-gray-200" : "",
-        )}
-        onClick={() => toggle(index)}
-      >
-        {panel.icon &&
-          (typeof panel.icon === "string" ? (
-            <i className={classNames(panel.icon, "pi mr-1.5")}></i>
-          ) : (
-            <div className="mr-2 h-4 w-4">{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 = resolvedPanels.map((x) => x.initialSize);
-
-  return (
-    <div className={!active ? "hidden h-full" : "h-full"}>
-      <Allotment
-        vertical={true}
-        snap={true}
-        className={!active ? "hidden h-full" : "h-full"}
-        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);
-        }}
-      >
-        {resolvedPanels.map((panel, index) => (
-          <Allotment.Pane
-            key={index}
-            //  preferredSize={(preferredSizes || initalSizes)[index] + "%"}
-            maxSize={
-              panelsExpanded.length <= index || panelsExpanded[index]
-                ? 10000
-                : panelHeaderSize
-            }
-          >
-            <div className="flex h-full flex-col">
-              {getHeader(panel, index)}
-              {panelsExpanded[index] && (
-                <div className="relative flex-1 overflow-hidden">
-                  <div
-                    className={classNames(
-                      "absolute inset-0",
-                      panel.noOverflow ? "" : "overflow-y-auto",
-                    )}
-                  >
-                    {panel.content}
-                  </div>
-                </div>
-              )}
-            </div>
-          </Allotment.Pane>
-        ))}
-      </Allotment>
-    </div>
-  );
-}

package/src/editor/sidebar/Translations.tsx

@@ -1,295 +0,0 @@
-import { Button } from "primereact/button";
-import { useEditContext } from "../client/editContext";
-import { Language } from "../pageModel";
-import { SimpleTable } from "../ui/SimpleTable";
-import {
-  getTranslationStatus,
-  getTranslationProviders,
-  requestTranslation,
-} from "../services/translationService";
-import { useEffect, useState } from "react";
-import { TranslationStatus } from "../../config/types";
-
-import { ProgressBar } from "primereact/progressbar";
-import { Checkbox } from "primereact/checkbox";
-import { confirmCreateVersion } from "../utils/itemutils";
-import { Dropdown } from "primereact/dropdown";
-
-export function Translation() {
-  const editContext = useEditContext();
-  const [translationStatus, setTranslationStatus] = useState<
-    TranslationStatus[] | null
-  >(null);
-  const [translationProviders, setTranslationProviders] = useState<
-    string[] | null
-  >(null);
-
-  const [translationProvider, setTranslationProvider] = useState<string | null>(
-    localStorage.getItem("editor.translationProvider") || null,
-  );
-
-  if (!editContext) return null;
-
-  useEffect(() => {
-    if (translationProvider) {
-      localStorage.setItem("editor.translationProvider", translationProvider);
-    }
-  }, [translationProvider]);
-
-  const languages = editContext?.itemLanguages || [];
-
-  type TranslationProgress = {
-    progress: number;
-    message: string;
-  };
-
-  const [translationProgress, setTranslationProgress] = useState<
-    Map<string, TranslationProgress>
-  >(new Map());
-
-  const item = editContext.contentEditorItem;
-  const [checkedLanguages, setCheckedLanguages] = useState<string[]>([]);
-
-  const selectLanguage = (language: Language) => {
-    if (!item) return;
-    if (!language.versions) {
-      confirmCreateVersion(editContext, language);
-      return;
-    }
-
-    editContext.loadItem({
-      ...item.descriptor,
-      language: language.languageCode,
-      version: 0,
-    });
-  };
-
-  const languageName = (language: Language) => {
-    return (
-      <div
-        key={language.languageCode}
-        className="flex items-center gap-2"
-        onClick={() => selectLanguage(language)}
-      >
-        <img src={language.icon} className="h-5" /> {language.name}
-      </div>
-    );
-  };
-
-  const translate = async (languageCode: string) => {
-    if (!item) return;
-
-    const status = translationStatus?.find(
-      (x) => x.targetLanguage === languageCode,
-    );
-
-    if (!status) return;
-
-    if (status.sourceLanguage === languageCode) return;
-
-    setTranslationProgress((p) => {
-      p.set(languageCode, { progress: 0, message: "" });
-      return new Map(p);
-    });
-    await requestTranslation({
-      itemId: item.descriptor.id,
-      targetLanguage: languageCode,
-      sourceLanguage: status.sourceLanguage,
-      sessionId: editContext.sessionId,
-      provider: translationProvider || "",
-      metadata: ""
-    });
-    loadTranslationStatus();
-  };
-
-  const loadTranslationStatus = async () => {
-    if (!item) return;
-    const status = await getTranslationStatus(item.descriptor.id);
-    setTranslationStatus(status.data || []);
-  };
-
-  const loadTranslationProviders = async () => {
-    const providers = await getTranslationProviders();
-    setTranslationProviders(providers.data || []);
-    if (!translationProvider) {
-      setTranslationProvider(providers.data?.[0] || null);
-    }
-  };
-
-  const createVersions = async () => {
-    if (!item) return;
-    checkedLanguages.forEach((language) => {
-      editContext.operations.createVersion({
-        id: item.descriptor.id,
-        language: language,
-        version: 0,
-      });
-    });
-  };
-
-  useEffect(() => {
-    loadTranslationStatus();
-    setTranslationProgress(new Map());
-  }, [editContext.currentItemDescriptor?.id]);
-
-  useEffect(() => {
-    loadTranslationProviders();
-  }, []);
-
-  useEffect(() => {
-    const removeSocketMessageListener = editContext.addSocketMessageListener(
-      (message) => {
-        if (
-          message.type === "translation-started" ||
-          message.type === "translation-finished" ||
-          message.type === "translation-error"
-        ) {
-          if (message.payload.itemId === item?.descriptor.id) {
-            loadTranslationStatus();
-          }
-        }
-
-        if (message.type === "translation-progress") {
-          if (message.payload.itemId === item?.descriptor.id) {
-            setTranslationProgress((p) => {
-              p.set(message.payload.language, message.payload);
-              return new Map(p);
-            });
-          }
-        }
-      },
-    );
-    return removeSocketMessageListener;
-  }, [editContext, setTranslationProgress]);
-
-  const languageData = languages.map((x) => ({
-    ...x,
-    translationStatus: translationStatus?.find(
-      (y) => y.targetLanguage === x.languageCode,
-    ),
-    translationProgress: translationProgress.get(x.languageCode),
-  }));
-
-  languageData.sort((a, b) => {
-    // Sort languages with 0 versions to bottom
-    if (a.versions === 0 && b.versions > 0) return 1;
-    if (b.versions === 0 && a.versions > 0) return -1;
-
-    // Sort by name for languages that both have versions or both don't
-    return a.name.localeCompare(b.name);
-  });
-
-
-
-  return (
-    <div className="flex h-full flex-col gap-2">
-      <div className="flex w-full flex-wrap items-center justify-end gap-2 bg-gray-50 p-3">
-        <Dropdown
-          options={translationProviders || []}
-          onChange={(e) => setTranslationProvider(e.value)}
-          value={translationProvider}
-        />
-        {item && (
-          <Button
-            size="small"
-            icon="pi pi-sparkles"
-            onClick={() => {
-              // Create a copy of the data outside of any hooks
-              const commandData = {
-                items: [item],
-                targetLanguages: [...checkedLanguages],
-                translationProvider: translationProvider || "",
-                translationStatus: translationStatus ? [...translationStatus] : [],
-              };
-              
-              // Execute the command with the prepared data
-              editContext.executeCommand({
-                command: editContext.configuration.commands.localizeItem,
-                data: commandData,
-              });
-              
-              // Clear selection after command execution
-              setCheckedLanguages([]);
-            }}
-            disabled={checkedLanguages.length === 0}
-            label="Translate"
-          />
-        )}
-        <Button
-          size="small"
-          icon="pi pi-plus"
-          onClick={() => {
-            createVersions();
-            setCheckedLanguages([]);
-          }}
-          disabled={checkedLanguages.length === 0}
-          label="Create Versions"
-        />
-      </div>
-      <div className="relative flex-1">
-        <div className="absolute inset-0 overflow-y-auto">
-          <SimpleTable
-            columns={[
-              {
-                header: "",
-                body: (x) => (
-                  <div onClick={(e) => e.stopPropagation()}>
-                    <Checkbox
-                      checked={checkedLanguages.includes(x.languageCode)}
-                      onChange={(ev) => {
-                        setCheckedLanguages(
-                          ev.checked
-                            ? [...checkedLanguages, x.languageCode]
-                            : checkedLanguages.filter(
-                                (y) => y !== x.languageCode,
-                              ),
-                        );
-                      }}
-                    />
-                  </div>
-                ),
-              },
-              { header: "Language", body: languageName },
-              { header: "Ver.", body: (x) => x.versions.toString() },
-              {
-                header: "Src",
-                body: (x) => x.translationStatus?.sourceLanguage,
-              },
-              {
-                header: "Status",
-                body: (x) => (
-                  <div className="flex items-center gap-2">
-                    {x.translationStatus?.status === "In Progress" && (
-                      <div className="relative w-full">
-                        <ProgressBar
-                          style={{ height: "20px" }}
-                          value={(x.translationProgress?.progress || 0) * 100}
-                          showValue={false}
-                        />
-                        <div className="absolute inset-0 flex items-center justify-center text-white">
-                          {x.translationProgress?.message}
-                        </div>
-                      </div>
-                    )}
-                    {x.translationStatus?.status !== "In Progress" && (
-                      <div title={x.translationStatus?.message}>
-                        {x.translationStatus?.status || "Not started"}
-                      </div>
-                    )}
-                  </div>
-                ),
-              },
-            ]}
-            items={languageData}
-            onRowClick={(data) => selectLanguage(data.item)}
-            rowClassName={(item) =>
-              item.languageCode == editContext.currentItemDescriptor?.language
-                ? "bg-neutral-100"
-                : ""
-            }
-          />
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/editor/sidebar/Validation.tsx

@@ -1,102 +0,0 @@
-import { ProgressSpinner } from "primereact/progressspinner";
-import { SingleValidatorResult } from "../../types";
-import { useEditContext } from "../client/editContext";
-import { SimpleTable } from "../ui/SimpleTable";
-
-type SingleResult = SingleValidatorResult & {
-  language: string;
-  version: number;
-};
-
-export function Validation() {
-  const editContext = useEditContext();
-  const validationResults = editContext?.validationResult?.flatMap((x) =>
-    x.results.map((y) => ({
-      ...y,
-      language: x.item.language,
-      version: x.item.version,
-    }))
-  );
-
-  if (!validationResults) return null;
-
-  const nameBodyTemplate = (validationResult: SingleResult) => {
-    const id =
-      validationResult.itemId +
-      validationResult.language +
-      validationResult.version;
-    return (
-      <div className="flex gap-2 items-center">
-        <span
-          className={`name-tooltip-${id} break-all`}
-          style={{ position: "relative" }}
-        >
-          {validationResult.itemName}{" "}
-          <span className="text-gray-500">
-            ({validationResult.language}, {validationResult.itemName})
-          </span>
-        </span>
-      </div>
-    );
-  };
-
-  const validationTemplate = (validationResult: SingleResult) => {
-    return <div>{validationResult.message}</div>;
-  };
-
-  const columns = [
-    { body: nameBodyTemplate, header: "Item" },
-    {
-      body: validationTemplate,
-      align: "center",
-      header: <i className="pi pi-check" />,
-    },
-  ];
-
-  if (validationResults.length === 0) {
-    return (
-      <div className="text-gray-600 text-sm text-center p-4">
-        No validation results
-      </div>
-    );
-  }
-
-  return (
-    <div>
-      {editContext?.validating && (
-        <div className="text-center p-3">
-          <ProgressSpinner style={{ width: "20px", height: "20px" }} />
-        </div>
-      )}
-      {!editContext?.validating && (
-        <SimpleTable
-          items={validationResults}
-          columns={columns}
-          onRowClick={async (data) => {
-            const itemDescriptor = {
-              id: data.item.itemId,
-              language: data.item.language,
-              version: data.item.version,
-            };
-            const item = await editContext?.itemsRepository.getItem(
-              itemDescriptor
-            );
-            if (!item || !editContext) return;
-            editContext.setCenterPanelView(
-              editContext.configuration.editor.views.find(
-                (x) => x.name === "content-editor"
-              )?.defaultCenterPanelView
-            );
-            editContext.setFocusedField(
-              {
-                item: itemDescriptor,
-                fieldId: data.item.fieldId,
-              },
-              true
-            );
-          }}
-        ></SimpleTable>
-      )}
-    </div>
-  );
-}