@alpaca-editor/core 1.0.3938 → 1.0.3941

package/src/editor/sidebar/DictionaryEditor.tsx

@@ -1,261 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import {
-  useEditContext,
-  useModifiedFieldsContext,
-} from "../client/editContext";
-import { getDictionary, getSites } from "../services/contentService";
-import { EditableDictionary, Site } from "../../types";
-import { SimpleTable } from "../ui/SimpleTable";
-import { ProgressSpinner } from "primereact/progressspinner";
-import { InputText } from "primereact/inputtext";
-import { Component, Field } from "../pageModel";
-import { Button } from "primereact/button";
-import { classNames } from "primereact/utils";
-import { CenteredMessage } from "../ui/CenteredMessage";
-import { Dropdown } from "primereact/dropdown";
-import { SimpleToolbar } from "../ui/SimpleToolbar";
-
-type DictionaryEntry = {
-  key: string;
-  field: Field | null;
-  translation: string;
-};
-
-export function DictionaryEditor({}: {}) {
-  const context = useEditContext();
-  const [dictionary, setDictionary] = useState<EditableDictionary>({});
-  const [renderedDictionaryKeys, setRenderedDictionaryKeys] =
-    useState<string[]>();
-  const [unknownKeys, setUnknownKeys] = useState<string[]>();
-  const [otherKeys, setOtherKeys] = useState<DictionaryEntry[]>();
-  const [validKeys, setValidKeys] = useState<DictionaryEntry[]>();
-  const [sites, setSites] = useState<Site[]>();
-  const [siteName, setSiteName] = useState<string>();
-  const [loading, setLoading] = useState(false);
-
-  useEffect(() => {
-    if (!context?.pageView.site) return;
-    setSiteName(context.pageView.site.name);
-  }, [context?.pageView.site]);
-
-  useEffect(() => {
-    const loadSites = async () => {
-      setLoading(true);
-      const sites = await getSites();
-      if (sites.data) setSites(sites.data);
-      setLoading(false);
-    };
-    loadSites();
-  }, []);
-
-  const currentItemDescriptor = context?.currentItemDescriptor;
-  useEffect(() => {
-    if (!siteName || !currentItemDescriptor) return;
-
-    const loadDictionary = async (site: string, language: string) => {
-      const dictionary = await getDictionary(site, language);
-      setDictionary(dictionary);
-    };
-    loadDictionary(siteName, currentItemDescriptor.language);
-  }, [siteName, currentItemDescriptor]);
-
-  useEffect(() => {
-    const findAllKeys = (component: Component, keys: string[]) => {
-      component.renderedDictionaryKeys.forEach((k) => {
-        if (!keys.includes(k)) keys.push(k);
-      });
-      component.placeholders.forEach((p) => {
-        p.components.forEach((c) => findAllKeys(c, keys));
-      });
-    };
-    if (!context?.page) return;
-    const keys: string[] = [];
-    findAllKeys(context.page.rootComponent, keys);
-    setRenderedDictionaryKeys(keys);
-  }, [context?.page]);
-
-  useEffect(() => {
-    if (!dictionary || !renderedDictionaryKeys) {
-      setValidKeys([]);
-      setOtherKeys([]);
-      setUnknownKeys([]);
-      return;
-    }
-
-    const getEntries = (keys: string[]) => {
-      const entries = Object.keys(dictionary)
-        .filter((k) => keys.includes(k))
-        .map((k) => ({
-          key: k,
-          field: dictionary[k]!,
-          translation: dictionary[k]!.value,
-        }));
-      entries.sort((a, b) => (a.key > b.key ? -1 : 1));
-      return entries;
-    };
-
-    const unknownKeys = renderedDictionaryKeys.filter((k) => !dictionary[k]);
-    unknownKeys.sort((a, b) => (a > b ? -1 : 1));
-    setUnknownKeys(unknownKeys);
-
-    setValidKeys(
-      getEntries(renderedDictionaryKeys.filter((k) => dictionary[k]))
-    );
-    setOtherKeys(
-      getEntries(
-        Object.keys(dictionary).filter(
-          (k) => !renderedDictionaryKeys.includes(k)
-        )
-      )
-    );
-  }, [renderedDictionaryKeys, dictionary]);
-
-  const getContent = () => {
-    if (!unknownKeys || !validKeys || !otherKeys) return null;
-
-    if (!siteName) return <CenteredMessage>No Site</CenteredMessage>;
-
-    if (loading) return <CenteredMessage>Loading...</CenteredMessage>;
-
-    if (!dictionary)
-      return <CenteredMessage>No dictionary found</CenteredMessage>;
-
-    return (
-      <>
-        <Divider text="Keys rendered on this page" className="mt-1" />
-        <DictionaryTable entries={validKeys} context={context} />
-        <Divider text="⚠ Unknown keys" className="mt-6" />
-        <UnknownKeysTable entries={unknownKeys} />
-        <Divider text="Other keys" className="mt-6" />
-        <DictionaryTable entries={otherKeys} context={context} />
-      </>
-    );
-  };
-
-  return (
-    <div className="flex flex-col gap-1 h-full">
-      <SimpleToolbar>
-        Site:{" "}
-        <Dropdown
-          options={sites?.map((s) => ({ label: s.name, value: s.name })) || []}
-          value={siteName}
-          onChange={(e) => setSiteName(e.value)}
-        />
-      </SimpleToolbar>
-      {getContent()}
-    </div>
-  );
-}
-
-function Divider({ text, className }: { text: string; className?: string }) {
-  return (
-    <div
-      className={classNames(
-        className,
-        "py-1 flex items-center text-sm font-bold before:flex-1 before:border-t before:border-gray-200 before:me-6     after:flex-1 after:border-t after:border-gray-200 after:ms-6"
-      )}
-    >
-      {text}
-    </div>
-  );
-}
-
-function DictionaryTable({
-  entries,
-  context,
-}: {
-  entries: DictionaryEntry[];
-  context?: any;
-}) {
-  const [editing, setEditing] = useState<string>();
-  const [value, setValue] = useState<string>("");
-  const [refresh, setRefresh] = useState(false);
-  const modifiedFieldsContext = useModifiedFieldsContext();
-  useEffect(() => {
-    if (refresh) {
-      setEditing(undefined);
-      setRefresh(false);
-    }
-  }, [context.refreshCompletedFlag]);
-
-  const textEditor = (entry: DictionaryEntry) => {
-    if (entry.field)
-      return (
-        <div className="flex flex-wrap gap-2 items-center">
-          <InputText
-            value={value}
-            disabled={refresh}
-            onChange={(e) => setValue(e.target.value)}
-            autoFocus={true}
-          />
-          {!refresh && (
-            <Button
-              size="small"
-              onClick={() => {
-                setRefresh(true);
-                if (!entry.field) return;
-                context?.operations.editField({
-                  field: entry.field.descriptor,
-                  value: value,
-                  refresh: "immediate",
-                });
-              }}
-            >
-              Apply
-            </Button>
-          )}
-          {refresh && (
-            <ProgressSpinner style={{ width: "20px", height: "20px" }} />
-          )}
-        </div>
-      );
-    else return null;
-  };
-  const columns = [
-    { body: (entry: DictionaryEntry) => entry.key, header: "Key" },
-    {
-      body: (entry: DictionaryEntry) => {
-        const modifiedField = modifiedFieldsContext?.modifiedFields.find(
-          (x) =>
-            x.fieldId === entry.field?.id &&
-            x.item.id === entry.field?.descriptor.item.id &&
-            x.item.language === entry.field?.descriptor.item.language &&
-            x.item.version === entry.field?.descriptor.item.version
-        );
-
-        if (editing === entry.key) return textEditor(entry);
-        else
-          return (
-            <div
-              className="min-w-ful cursor-pointer"
-              onClick={() => {
-                if (!editing) {
-                  setValue(modifiedField?.value ?? entry.translation);
-                  setEditing(entry.key);
-                }
-              }}
-            >
-              {modifiedField?.value ?? entry.translation} &nbsp;
-            </div>
-          );
-      },
-      header: "Translation",
-    },
-  ];
-  return (
-    <div>
-      <SimpleTable items={entries} columns={columns} />
-    </div>
-  );
-}
-
-function UnknownKeysTable({ entries }: { entries: string[] }) {
-  const columns = [{ body: (entry: string) => entry, header: "Key" }];
-  return (
-    <div>
-      <SimpleTable items={entries} columns={columns} />
-    </div>
-  );
-}

package/src/editor/sidebar/EditHistory.tsx

@@ -1,134 +0,0 @@
-"use client";
-
-import { classNames } from "primereact/utils";
-import { useEditContext } from "../client/editContext";
-import { useEffect, useState } from "react";
-import { WizardIcon } from "../ui/Icons";
-import { EditOperation } from "../../types";
-import { SimpleIconButton } from "../ui/SimpleIconButton";
-import { getRedoCommand, getUndoCommand } from "../commands/undo";
-import { formatDate } from "../utils";
-import { SimpleToolbar } from "../ui/SimpleToolbar";
-
-export function EditHistory() {
-  const editContext = useEditContext();
-  const [showOnlyMyChanges, setShowOnlyMyChanges] = useState(true);
-  const [history, setHistory] = useState<EditOperation[]>([]);
-  if (!editContext) return;
-
-  useEffect(() => {
-    let operations = showOnlyMyChanges
-      ? editContext.editHistory.filter(
-          (x) => x.sessionId === editContext.sessionId,
-        )
-      : editContext.editHistory;
-
-    operations = filterUndone(operations);
-
-    setHistory(operations);
-  }, [editContext.editHistory, showOnlyMyChanges]);
-
-  const undoCommand = getUndoCommand();
-  const redoCommand = getRedoCommand();
-
-  return (
-    <div className="absolute inset-0 flex flex-col">
-      <SimpleToolbar>
-        <SimpleIconButton
-          selected={showOnlyMyChanges}
-          onClick={() => setShowOnlyMyChanges(!showOnlyMyChanges)}
-          icon="pi pi-user"
-          label="Show only my changes"
-        />
-        <SimpleIconButton
-          onClick={(ev) => {
-            editContext.executeCommand({ command: undoCommand, event: ev });
-          }}
-          icon={undoCommand.icon}
-          label={undoCommand.label}
-          disabled={editContext.isCommandDisabled({ command: undoCommand })}
-        />
-        <SimpleIconButton
-          onClick={(ev) => {
-            editContext.executeCommand({ command: redoCommand, event: ev });
-          }}
-          icon={redoCommand.icon}
-          label={redoCommand.label}
-          disabled={editContext.isCommandDisabled({ command: redoCommand })}
-        />
-      </SimpleToolbar>
-      <div className="flex flex-1 flex-col overflow-x-hidden overflow-y-auto text-sm">
-        {history.map((o, i) => singleOperation(i, o))}
-      </div>
-    </div>
-  );
-
-  function getDate(o: EditOperation) {
-    const date = new Date(o.date);
-    return formatDate(date);
-  }
-
-  function singleOperation(i: number, o: EditOperation) {
-    let className =
-      "border-b border-gray-200 p-2 flex justify-between items-start text-xs hover:bg-gray-100";
-    if (o.undone) className = className + " text-gray-300";
-    if (o.focus) className = className + " cursor-pointer";
-
-    return (
-      <div
-        className={className}
-        key={i}
-        onClick={() => {
-          if (o.focus) {
-            const focusComponents = o.focus.split(":");
-            if (focusComponents.length > 0) {
-              editContext?.select([focusComponents[0]!]);
-            }
-            if (
-              focusComponents.length > 1 &&
-              focusComponents[1] &&
-              focusComponents[0]
-            ) {
-              editContext?.setFocusedField(
-                {
-                  item: {
-                    id: focusComponents[0],
-                    language: editContext.page!.item.language,
-                    version: editContext.page!.item.version,
-                  },
-                  fieldId: focusComponents[1]!,
-                },
-                false,
-              );
-            }
-          }
-        }}
-      >
-        <div className="flex gap-1">
-          {o.user?.ai && (
-            <WizardIcon
-              className={classNames(
-                "h-4 w-4",
-                o.undone ? "text-gray-200" : "text-gray-500",
-              )}
-            />
-          )}
-          <div>{o.description}</div>
-        </div>
-        <div>
-          <div className="text-xs">{getDate(o)}</div>
-          {!showOnlyMyChanges && <div className="text-xs">{o.user?.name}</div>}
-        </div>
-      </div>
-    );
-  }
-}
-function filterUndone(operations: EditOperation[]): EditOperation[] {
-  let allUndone = true;
-  return operations.filter((o) => {
-    if (!o.undone) {
-      allUndone = false;
-    }
-    return allUndone || !o.undone;
-  });
-}

package/src/editor/sidebar/GraphQL.tsx

@@ -1,164 +0,0 @@
-import { TabView, TabPanel } from "primereact/tabview";
-
-import { Splitter, SplitterPanel } from "primereact/splitter";
-import { InputTextarea } from "primereact/inputtextarea";
-import { Button } from "primereact/button";
-import { useEffect, useState } from "react";
-
-import { useEditContext } from "../client/editContext";
-import { ObjectInspector } from "react-inspector";
-import { SimpleTabs } from "../ui/SimpleTabs";
-
-export function GraphQL() {
-  const editContext = useEditContext();
-  const [query, setQuery] = useState("");
-  const [showSpinner, setShowSpinner] = useState(false);
-
-  let item = editContext?.page?.item;
-
-  //const graphql = item?.graphql;
-
-  useEffect(() => {
-    setShowSpinner(false);
-  }, [editContext?.refreshCompletedFlag]);
-
-  useEffect(() => {
-    const graphql_query = item?.fields.find(
-      (x) => x.name === "graphql_query",
-    )?.rawValue;
-
-    if (graphql_query) setQuery(graphql_query || "");
-  }, [item]);
-
-  // if (item) {
-  //   const selectedComponents = editContext!.selection
-  //     .map((x) => getComponentById(x, editContext!.page!))
-  //     .filter((x) => x) as Component[];
-  //   if (selectedComponents.length === 1) item = selectedComponents[0];
-  // }
-
-  // type JsonType = { [key: string]: any };
-
-  // function findFields(json: JsonType): { [key: string]: Array<JsonValueType> } {
-  //   let result: { [key: string]: Array<JsonValueType> } = {};
-
-  //   for (let key in json) {
-  //     if (typeof json[key] === "object" && json[key] !== null) {
-  //       let subResult = findFields(json[key]);
-  //       for (let subKey in subResult) {
-  //         if (result[subKey]) {
-  //           result[subKey] = result[subKey].concat(subResult[subKey]);
-  //         } else {
-  //           result[subKey] = subResult[subKey];
-  //         }
-  //       }
-  //     }
-  //     if (key === "jsonValue" && json[key]) {
-  //       let groupKey = `${json[key].itemId}_${json[key].language}_${json[key].version}`;
-  //       if (result[groupKey]) {
-  //         result[groupKey].push(json[key]);
-  //       } else {
-  //         result[groupKey] = [json[key]];
-  //       }
-  //     }
-  //   }
-  //   return result;
-  // }
-
-  //type JsonValueType = { itemId: string; language: string; version: string };
-
-  //const fieldsjsonValues = findFields(graphql);
-
-  // function renderItem(fields: Field[]) {
-  //   const first = fields[0];
-  //   const item = first.descriptor.item;
-
-  //   if (!item) return null;
-
-  //   return (
-  //     <div key={first.id + item.id + item.language + item.version}>
-  //       Item: {item.id} {first.id} {item.language} {item.version}
-  //       <FieldList
-  //         fields={fields}
-  //         validators={
-  //           editContext?.pageValidationResult?.find(
-  //             (x) =>
-  //               x.item.id === item.id &&
-  //               x.item.language === item.language &&
-  //               x.item.version === item.version
-  //           )?.results || []
-  //         }
-  //       />
-  //     </div>
-  //   );
-  // }
-
-  if (!item) return null;
-  const graphql = {};
-
-  // function refresh() {
-  //   if (!item) return;
-
-  //   const field: Field = {
-  //     _editor: {
-  //       name: "_GraphQL",
-  //       type: "jsonValue",
-  //       descriptor: {
-  //         item: item,
-  //         fieldId: "3622F861-ECA9-45D7-8DA7-2CDA35235002",
-  //       },
-  //       sourceItems: [],
-  //     },
-  //     id: "3622F861-ECA9-45D7-8DA7-2CDA35235002",
-  //     value: query,
-  //   };
-  //   const prettyQuery = format(query);
-  //   setQuery(prettyQuery);
-  //   setShowSpinner(true);
-  //   editContext?.editField({
-  //     field: field._editor!.descriptor,
-  //     value: prettyQuery,
-  //   });
-  // }
-
-  return (
-    <Splitter layout="vertical" style={{ height: "100%" }}>
-      <SplitterPanel size={50} className="relative">
-        <div className="absolute inset-0 flex">
-          <InputTextarea
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            className="flex-1 text-xs"
-            style={{ height: "100%" }}
-          />
-          <Button
-            icon={"pi pi-refresh" + (showSpinner ? " pi-spin" : "")}
-            // onClick={refresh}
-            disabled={showSpinner}
-          />
-        </div>
-      </SplitterPanel>
-      <SplitterPanel className="relative">
-        <div className="absolute inset-0">
-          <SimpleTabs
-            tabs={[
-              {
-                id: "json",
-                label: "JSON",
-                content: (
-                  <div className="relative h-full">
-                    <div className="flex-1 overflow-y-auto p-2">
-                      <ObjectInspector data={graphql} expandLevel={3} />
-                    </div>
-                  </div>
-                ),
-              },
-            ]}
-            activeTab={0}
-            setActiveTab={(index) => {}}
-          />
-        </div>
-      </SplitterPanel>
-    </Splitter>
-  );
-}

package/src/editor/sidebar/Insert.tsx

@@ -1,35 +0,0 @@
-import { ComponentPalette } from "./ComponentPalette";
-import { MainContentTree } from "./MainContentTree";
-import { SimpleTabs, Tab } from "../ui/SimpleTabs";
-import { useState } from "react";
-
-export function Insert() {
-  const [activeTab, setActiveTab] = useState(0);
-  const tabs: Tab[] = [
-    {
-      label: "New Component",
-      content: <ComponentPalette />,
-      id: "new",
-    },
-    {
-      label: "Existing Component",
-      content: (
-        <div className="relative flex-1">
-          <div className="absolute inset-0 overflow-auto">
-            <MainContentTree mode="insert" />
-          </div>
-        </div>
-      ),
-      id: "existing",
-    },
-  ];
-  return (
-    <SimpleTabs
-      key="insert-tabs"
-      tabs={tabs}
-      className="flex items-center justify-center gap-4 border-b border-gray-200 py-3 text-sm"
-      activeTab={activeTab}
-      setActiveTab={(index) => setActiveTab(index)}
-    />
-  );
-}

package/src/editor/sidebar/MainContentTree.tsx

@@ -1,102 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-import { InsertOption } from "../../types";
-import ContentTree from "../ContentTree";
-import { useEditContext } from "../client/editContext";
-import { ItemTreeNodeData } from "../services/contentService";
-import { getInsertOptionsForCurrentSelection } from "../utils/insertOptions";
-import ItemSearch from "../ui/ItemSearch";
-
-export function MainContentTree({
-  mode,
-  rootItemId,
-}: {
-  mode: "insert" | "normal" | "select-page";
-  rootItemId?: string;
-}) {
-  const editContext = useEditContext();
-  const [insertOptions, setInsertOptions] = useState<InsertOption[]>();
-  if (!editContext) return null;
-
-  const page = editContext.page;
-  const selectedItem = editContext.contentEditorItem ?? page?.item;
-  const [selectedItemIds, setSelectedItemIds] = useState<string[]>([]);
-
-  const isDraggable = useCallback(
-    (x: ItemTreeNodeData) => {
-      return (
-        mode === "insert" &&
-        insertOptions?.find(
-          (insertOption: InsertOption) =>
-            insertOption.typeId == x.templateId ||
-            insertOption.compatibleTypeIds?.find(
-              (compatibleTemplate) => compatibleTemplate == x.templateId,
-            ) !== undefined,
-        ) !== undefined
-      );
-    },
-    [mode, insertOptions],
-  );
-
-  useEffect(() => {
-    if (selectedItem) setSelectedItemIds([selectedItem.id]);
-  }, [selectedItem]);
-
-  useEffect(() => {
-    const loadInsertOptions = async () => {
-      if (!page) return;
-      const options = await getInsertOptionsForCurrentSelection(editContext);
-      setInsertOptions(options);
-    };
-    loadInsertOptions();
-  }, [editContext.selection, page]);
-  return (
-    <div className="flex h-full flex-col">
-      <div className="border-b border-gray-200 p-2">
-        <ItemSearch
-          resultClassName="px-2 py-1"
-          itemSelected={(item) =>
-            editContext?.loadItem({
-              id: item.id,
-              language: item.language,
-              version: 0,
-            })
-          }
-        />
-      </div>
-      <div className="relative flex-1">
-        <div className="absolute inset-1 overflow-auto">
-          <ContentTree
-            language={editContext.currentItemDescriptor?.language ?? "en"}
-            rootItemId={rootItemId ?? "{11111111-1111-1111-1111-111111111111}"}
-            expandIdPath={
-              selectedItem?.idPath
-                ? selectedItem?.idPath.split("/").slice(0, -1).join("/")
-                : undefined
-            }
-            className="h-full"
-            selectPagesOnly={mode === "select-page"}
-            selectionMode={mode == "insert" ? "none" : "multiple"}
-            selectedItemIds={selectedItemIds}
-            onSelectionChange={(selection) => {
-              if (mode === "insert") return;
-              const selectedItems = selection as ItemTreeNodeData[];
-              setSelectedItemIds(selectedItems.map((x) => x.id));
-              if (selectedItems.length > 0 && selectedItems[0])
-                editContext.loadItem({
-                  id: selectedItems[0].id,
-                  language: selectedItems[0].language,
-                  version: selectedItems[0].version,
-                });
-            }}
-            isDraggable={isDraggable}
-            renderNode={(node, defaultRenderer) => (
-              <div className="group flex w-full gap-4">
-                {defaultRenderer(node)}
-              </div>
-            )}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}