@alpaca-editor/core 1.0.0

package/src/editor/sidebar/DictionaryEditor.tsx

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

@@ -0,0 +1,134 @@
+"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]);
+
+  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

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

@@ -0,0 +1,35 @@
+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="flex-1 relative">
+          <div className="absolute inset-0 overflow-auto">
+            <MainContentTree mode="insert" />
+          </div>
+        </div>
+      ),
+      id: "existing",
+    },
+  ];
+  return (
+    <SimpleTabs
+      key="insert-tabs"
+      tabs={tabs}
+      className=" flex gap-1 justify-center items-center py-3 text-sm border-b border-gray-200"
+      activeTab={activeTab}
+      setActiveTab={(index) => setActiveTab(index)}
+    />
+  );
+}

package/src/editor/sidebar/MainContentTree.tsx

@@ -0,0 +1,95 @@
+import { 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[]>([]);
+
+  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) => {
+              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={(x) =>
+              mode === "insert" &&
+              insertOptions?.find(
+                (insertOption: InsertOption) =>
+                  insertOption.typeId == x.templateId ||
+                  insertOption.compatibleTemplates?.find(
+                    (compatibleTemplate) => compatibleTemplate == x.templateId,
+                  ) !== undefined,
+              ) !== undefined
+            }
+            renderNode={(node, defaultRenderer) => (
+              <div className="group flex w-full gap-4">
+                {defaultRenderer(node)}
+              </div>
+            )}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}