@alpaca-editor/core 1.0.3762-mono

package/dist/editor/sidebar/Debug.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Debug = Debug;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const tabview_1 = require("primereact/tabview");
+const CopyToClipboardButton_1 = require("../ui/CopyToClipboardButton");
+const react_1 = require("react");
+const componentTreeHelper_1 = require("../componentTreeHelper");
+const react_inspector_1 = require("react-inspector");
+const editContext_1 = require("../client/editContext");
+const contentService_1 = require("../services/contentService");
+function Debug({}) {
+    const [activeTab, setActiveTab] = (0, react_1.useState)(0);
+    const [pageLayout, setPageLayout] = (0, react_1.useState)(null);
+    const editContext = (0, editContext_1.useEditContext)();
+    if (!editContext)
+        return;
+    (0, react_1.useEffect)(() => {
+        const loadLayout = async () => {
+            if (!editContext.currentItemDescriptor)
+                return;
+            const layout = await (0, contentService_1.getPageJson)(editContext.currentItemDescriptor);
+            setPageLayout(layout);
+        };
+        loadLayout();
+    }, [editContext.currentItemDescriptor, editContext.itemsRepository.revision]);
+    const page = pageLayout; // editContext.page;
+    let component = null;
+    if (page) {
+        const selectedComponents = editContext.selection
+            .map((x) => (0, componentTreeHelper_1.getComponentByIdFromHeadlessLayout)(x, page))
+            .filter((x) => x);
+        component = selectedComponents.length === 1 ? selectedComponents[0] : null;
+    }
+    if (!component && !page)
+        return;
+    const replacer = function (key, value) {
+        if (key === "parentComponent" ||
+            key === "placeholderReference" ||
+            key === "_editor") {
+            return undefined;
+        }
+        return value;
+    };
+    const tabs = [];
+    const defaultNodeRenderer = ({ depth, name, data, isNonenumerable }) => {
+        if (name == "__editor" ||
+            name == "parentComponent" ||
+            name == "placeholderReference")
+            return null;
+        return depth === 0 ? ((0, jsx_runtime_1.jsx)(react_inspector_1.ObjectRootLabel, { name: name, data: data })) : ((0, jsx_runtime_1.jsx)(react_inspector_1.ObjectLabel, { name: name, data: data, isNonenumerable: isNonenumerable }));
+    };
+    if (component) {
+        tabs.push((0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Component", className: "relative h-full", children: (0, jsx_runtime_1.jsx)("div", { className: "relative h-full", children: (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 overflow-auto p-2", children: (0, jsx_runtime_1.jsx)(react_inspector_1.ObjectInspector, { data: component, nodeRenderer: defaultNodeRenderer }) }) }) }, "component"));
+    }
+    tabs.push((0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Page", className: "relative h-full", children: (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 overflow-auto p-2", children: (0, jsx_runtime_1.jsx)(react_inspector_1.ObjectInspector, { data: page, nodeRenderer: defaultNodeRenderer }) }) }, "page"));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "relative h-[calc(100%-6px)]", children: [(0, jsx_runtime_1.jsx)(tabview_1.TabView, { className: "alpaceditor-tabs h-full", onTabChange: (ev) => {
+                    setActiveTab(ev.index);
+                }, activeIndex: activeTab, children: tabs }), (0, jsx_runtime_1.jsx)("div", { className: "absolute top-2 right-1", children: (0, jsx_runtime_1.jsx)(CopyToClipboardButton_1.CopyToClipboardButton, { text: JSON.stringify(activeTab === 0 && component ? component : page, replacer, 2) }) })] }));
+}

package/dist/editor/sidebar/DictionaryEditor.js

@@ -0,0 +1,160 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DictionaryEditor = DictionaryEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const editContext_1 = require("../client/editContext");
+const contentService_1 = require("../services/contentService");
+const SimpleTable_1 = require("../ui/SimpleTable");
+const progressspinner_1 = require("primereact/progressspinner");
+const inputtext_1 = require("primereact/inputtext");
+const button_1 = require("primereact/button");
+const utils_1 = require("primereact/utils");
+const CenteredMessage_1 = require("../ui/CenteredMessage");
+const dropdown_1 = require("primereact/dropdown");
+const SimpleToolbar_1 = require("../ui/SimpleToolbar");
+function DictionaryEditor({}) {
+    const context = (0, editContext_1.useEditContext)();
+    const [dictionary, setDictionary] = (0, react_1.useState)({});
+    const [renderedDictionaryKeys, setRenderedDictionaryKeys] = (0, react_1.useState)();
+    const [unknownKeys, setUnknownKeys] = (0, react_1.useState)();
+    const [otherKeys, setOtherKeys] = (0, react_1.useState)();
+    const [validKeys, setValidKeys] = (0, react_1.useState)();
+    const [sites, setSites] = (0, react_1.useState)();
+    const [siteName, setSiteName] = (0, react_1.useState)();
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (!context?.pageView.site)
+            return;
+        setSiteName(context.pageView.site.name);
+    }, [context?.pageView.site]);
+    (0, react_1.useEffect)(() => {
+        const loadSites = async () => {
+            setLoading(true);
+            const sites = await (0, contentService_1.getSites)();
+            if (sites.data)
+                setSites(sites.data);
+            setLoading(false);
+        };
+        loadSites();
+    }, []);
+    const currentItemDescriptor = context?.currentItemDescriptor;
+    (0, react_1.useEffect)(() => {
+        if (!siteName || !currentItemDescriptor)
+            return;
+        const loadDictionary = async (site, language) => {
+            const dictionary = await (0, contentService_1.getDictionary)(site, language);
+            setDictionary(dictionary);
+        };
+        loadDictionary(siteName, currentItemDescriptor.language);
+    }, [siteName, currentItemDescriptor]);
+    (0, react_1.useEffect)(() => {
+        const findAllKeys = (component, keys) => {
+            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 = [];
+        findAllKeys(context.page.rootComponent, keys);
+        setRenderedDictionaryKeys(keys);
+    }, [context?.page]);
+    (0, react_1.useEffect)(() => {
+        if (!dictionary || !renderedDictionaryKeys) {
+            setValidKeys([]);
+            setOtherKeys([]);
+            setUnknownKeys([]);
+            return;
+        }
+        const getEntries = (keys) => {
+            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 (0, jsx_runtime_1.jsx)(CenteredMessage_1.CenteredMessage, { children: "No Site" });
+        if (loading)
+            return (0, jsx_runtime_1.jsx)(CenteredMessage_1.CenteredMessage, { children: "Loading..." });
+        if (!dictionary)
+            return (0, jsx_runtime_1.jsx)(CenteredMessage_1.CenteredMessage, { children: "No dictionary found" });
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Divider, { text: "Keys rendered on this page", className: "mt-1" }), (0, jsx_runtime_1.jsx)(DictionaryTable, { entries: validKeys, context: context }), (0, jsx_runtime_1.jsx)(Divider, { text: "\u26A0 Unknown keys", className: "mt-6" }), (0, jsx_runtime_1.jsx)(UnknownKeysTable, { entries: unknownKeys }), (0, jsx_runtime_1.jsx)(Divider, { text: "Other keys", className: "mt-6" }), (0, jsx_runtime_1.jsx)(DictionaryTable, { entries: otherKeys, context: context })] }));
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1 h-full", children: [(0, jsx_runtime_1.jsxs)(SimpleToolbar_1.SimpleToolbar, { children: ["Site:", " ", (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { options: sites?.map((s) => ({ label: s.name, value: s.name })) || [], value: siteName, onChange: (e) => setSiteName(e.value) })] }), getContent()] }));
+}
+function Divider({ text, className }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.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"), children: text }));
+}
+function DictionaryTable({ entries, context, }) {
+    const [editing, setEditing] = (0, react_1.useState)();
+    const [value, setValue] = (0, react_1.useState)("");
+    const [refresh, setRefresh] = (0, react_1.useState)(false);
+    const modifiedFieldsContext = (0, editContext_1.useModifiedFieldsContext)();
+    (0, react_1.useEffect)(() => {
+        if (refresh) {
+            setEditing(undefined);
+            setRefresh(false);
+        }
+    }, [context.refreshCompletedFlag]);
+    const textEditor = (entry) => {
+        if (entry.field)
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap gap-2 items-center", children: [(0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: value, disabled: refresh, onChange: (e) => setValue(e.target.value), autoFocus: true }), !refresh && ((0, jsx_runtime_1.jsx)(button_1.Button, { size: "small", onClick: () => {
+                            setRefresh(true);
+                            if (!entry.field)
+                                return;
+                            context?.operations.editField({
+                                field: entry.field.descriptor,
+                                value: value,
+                                refresh: "immediate",
+                            });
+                        }, children: "Apply" })), refresh && ((0, jsx_runtime_1.jsx)(progressspinner_1.ProgressSpinner, { style: { width: "20px", height: "20px" } }))] }));
+        else
+            return null;
+    };
+    const columns = [
+        { body: (entry) => entry.key, header: "Key" },
+        {
+            body: (entry) => {
+                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 ((0, jsx_runtime_1.jsxs)("div", { className: "min-w-ful cursor-pointer", onClick: () => {
+                            if (!editing) {
+                                setValue(modifiedField?.value ?? entry.translation);
+                                setEditing(entry.key);
+                            }
+                        }, children: [modifiedField?.value ?? entry.translation, " \u00A0"] }));
+            },
+            header: "Translation",
+        },
+    ];
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SimpleTable_1.SimpleTable, { items: entries, columns: columns }) }));
+}
+function UnknownKeysTable({ entries }) {
+    const columns = [{ body: (entry) => entry, header: "Key" }];
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SimpleTable_1.SimpleTable, { items: entries, columns: columns }) }));
+}

package/dist/editor/sidebar/EditHistory.js

@@ -0,0 +1,74 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditHistory = EditHistory;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("primereact/utils");
+const editContext_1 = require("../client/editContext");
+const react_1 = require("react");
+const Icons_1 = require("../ui/Icons");
+const SimpleIconButton_1 = require("../ui/SimpleIconButton");
+const undo_1 = require("../commands/undo");
+const utils_2 = require("../utils");
+const SimpleToolbar_1 = require("../ui/SimpleToolbar");
+function EditHistory() {
+    const editContext = (0, editContext_1.useEditContext)();
+    const [showOnlyMyChanges, setShowOnlyMyChanges] = (0, react_1.useState)(true);
+    const [history, setHistory] = (0, react_1.useState)([]);
+    if (!editContext)
+        return;
+    (0, react_1.useEffect)(() => {
+        let operations = showOnlyMyChanges
+            ? editContext.editHistory.filter((x) => x.sessionId === editContext.sessionId)
+            : editContext.editHistory;
+        operations = filterUndone(operations);
+        setHistory(operations);
+    }, [editContext.editHistory]);
+    const undoCommand = (0, undo_1.getUndoCommand)();
+    const redoCommand = (0, undo_1.getRedoCommand)();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0 flex flex-col", children: [(0, jsx_runtime_1.jsxs)(SimpleToolbar_1.SimpleToolbar, { children: [(0, jsx_runtime_1.jsx)(SimpleIconButton_1.SimpleIconButton, { selected: showOnlyMyChanges, onClick: () => setShowOnlyMyChanges(!showOnlyMyChanges), icon: "pi pi-user", label: "Show only my changes" }), (0, jsx_runtime_1.jsx)(SimpleIconButton_1.SimpleIconButton, { onClick: (ev) => {
+                            editContext.executeCommand({ command: undoCommand, event: ev });
+                        }, icon: undoCommand.icon, label: undoCommand.label, disabled: editContext.isCommandDisabled({ command: undoCommand }) }), (0, jsx_runtime_1.jsx)(SimpleIconButton_1.SimpleIconButton, { onClick: (ev) => {
+                            editContext.executeCommand({ command: redoCommand, event: ev });
+                        }, icon: redoCommand.icon, label: redoCommand.label, disabled: editContext.isCommandDisabled({ command: redoCommand }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-1 flex-col overflow-x-hidden overflow-y-auto text-sm", children: history.map((o, i) => singleOperation(i, o)) })] }));
+    function getDate(o) {
+        const date = new Date(o.date);
+        return (0, utils_2.formatDate)(date);
+    }
+    function singleOperation(i, o) {
+        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 ((0, jsx_runtime_1.jsxs)("div", { className: className, 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);
+                    }
+                }
+            }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-1", children: [o.user?.ai && ((0, jsx_runtime_1.jsx)(Icons_1.WizardIcon, { className: (0, utils_1.classNames)("h-4 w-4", o.undone ? "text-gray-200" : "text-gray-500") })), (0, jsx_runtime_1.jsx)("div", { children: o.description })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs", children: getDate(o) }), !showOnlyMyChanges && (0, jsx_runtime_1.jsx)("div", { className: "text-xs", children: o.user?.name })] })] }, i));
+    }
+}
+function filterUndone(operations) {
+    let allUndone = true;
+    return operations.filter((o) => {
+        if (!o.undone) {
+            allUndone = false;
+        }
+        return allUndone || !o.undone;
+    });
+}

package/dist/editor/sidebar/GraphQL.js

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GraphQL = GraphQL;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const splitter_1 = require("primereact/splitter");
+const inputtextarea_1 = require("primereact/inputtextarea");
+const button_1 = require("primereact/button");
+const react_1 = require("react");
+const editContext_1 = require("../client/editContext");
+const react_inspector_1 = require("react-inspector");
+const SimpleTabs_1 = require("../ui/SimpleTabs");
+function GraphQL() {
+    const editContext = (0, editContext_1.useEditContext)();
+    const [query, setQuery] = (0, react_1.useState)("");
+    const [showSpinner, setShowSpinner] = (0, react_1.useState)(false);
+    let item = editContext?.page?.item;
+    //const graphql = item?.graphql;
+    (0, react_1.useEffect)(() => {
+        setShowSpinner(false);
+    }, [editContext?.refreshCompletedFlag]);
+    (0, react_1.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 ((0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { layout: "vertical", style: { height: "100%" }, children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 50, className: "relative", children: (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0 flex", children: [(0, jsx_runtime_1.jsx)(inputtextarea_1.InputTextarea, { value: query, onChange: (e) => setQuery(e.target.value), className: "flex-1 text-xs", style: { height: "100%" } }), (0, jsx_runtime_1.jsx)(button_1.Button, { icon: "pi pi-refresh" + (showSpinner ? " pi-spin" : ""), 
+                            // onClick={refresh}
+                            disabled: showSpinner })] }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "relative", children: (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0", children: (0, jsx_runtime_1.jsx)(SimpleTabs_1.SimpleTabs, { tabs: [
+                            {
+                                id: "json",
+                                label: "JSON",
+                                content: ((0, jsx_runtime_1.jsx)("div", { className: "relative h-full", children: (0, jsx_runtime_1.jsx)("div", { className: "flex-1 overflow-y-auto p-2", children: (0, jsx_runtime_1.jsx)(react_inspector_1.ObjectInspector, { data: graphql, expandLevel: 3 }) }) })),
+                            },
+                        ], activeTab: 0, setActiveTab: (index) => { } }) }) })] }));
+}

package/dist/editor/sidebar/Insert.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Insert = Insert;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentPalette_1 = require("./ComponentPalette");
+const MainContentTree_1 = require("./MainContentTree");
+const SimpleTabs_1 = require("../ui/SimpleTabs");
+const react_1 = require("react");
+function Insert() {
+    const [activeTab, setActiveTab] = (0, react_1.useState)(0);
+    const tabs = [
+        {
+            label: "New Component",
+            content: (0, jsx_runtime_1.jsx)(ComponentPalette_1.ComponentPalette, {}),
+            id: "new",
+        },
+        {
+            label: "Existing Component",
+            content: ((0, jsx_runtime_1.jsx)("div", { className: "flex-1 relative", children: (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 overflow-auto", children: (0, jsx_runtime_1.jsx)(MainContentTree_1.MainContentTree, { mode: "insert" }) }) })),
+            id: "existing",
+        },
+    ];
+    return ((0, jsx_runtime_1.jsx)(SimpleTabs_1.SimpleTabs, { 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) }, "insert-tabs"));
+}

package/dist/editor/sidebar/MainContentTree.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MainContentTree = MainContentTree;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ContentTree_1 = __importDefault(require("../ContentTree"));
+const editContext_1 = require("../client/editContext");
+const insertOptions_1 = require("../utils/insertOptions");
+const ItemSearch_1 = __importDefault(require("../ui/ItemSearch"));
+function MainContentTree({ mode, rootItemId, }) {
+    const editContext = (0, editContext_1.useEditContext)();
+    const [insertOptions, setInsertOptions] = (0, react_1.useState)();
+    if (!editContext)
+        return null;
+    const page = editContext.page;
+    const selectedItem = editContext.contentEditorItem ?? page?.item;
+    const [selectedItemIds, setSelectedItemIds] = (0, react_1.useState)([]);
+    (0, react_1.useEffect)(() => {
+        if (selectedItem)
+            setSelectedItemIds([selectedItem.id]);
+    }, [selectedItem]);
+    (0, react_1.useEffect)(() => {
+        const loadInsertOptions = async () => {
+            if (!page)
+                return;
+            const options = await (0, insertOptions_1.getInsertOptionsForCurrentSelection)(editContext);
+            setInsertOptions(options);
+        };
+        loadInsertOptions();
+    }, [editContext.selection, page]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-full flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: "border-b border-gray-200 p-2", children: (0, jsx_runtime_1.jsx)(ItemSearch_1.default, { resultClassName: "px-2 py-1", itemSelected: (item) => editContext?.loadItem({
+                        id: item.id,
+                        language: item.language,
+                        version: 0,
+                    }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex-1", children: (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-1 overflow-auto", children: (0, jsx_runtime_1.jsx)(ContentTree_1.default, { 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;
+                            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.typeId == x.templateId ||
+                                insertOption.compatibleTemplates?.find((compatibleTemplate) => compatibleTemplate == x.templateId) !== undefined) !== undefined, renderNode: (node, defaultRenderer) => ((0, jsx_runtime_1.jsx)("div", { className: "group flex w-full gap-4", children: defaultRenderer(node) })) }) }) })] }));
+}

package/dist/editor/sidebar/Performance.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Performance = Performance;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editContext_1 = require("../client/editContext");
+const SimpleTable_1 = require("../ui/SimpleTable");
+function Performance() {
+    const context = (0, editContext_1.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) => {
+                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) => /[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 ((0, jsx_runtime_1.jsx)("div", { className: "cursor-pointer", onClick: () => context.select(ids), children: entry.key }));
+                }
+                return entry.key;
+            },
+            header: "Metric",
+        },
+        {
+            body: (entry) => entry.value,
+            header: "Time (ms)",
+        },
+    ];
+    return ((0, jsx_runtime_1.jsx)("div", { className: "overflow-x-auto", children: (0, jsx_runtime_1.jsx)(SimpleTable_1.SimpleTable, { items: values, columns: columns }) }));
+}

package/dist/editor/sidebar/Sessions.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sessions = Sessions;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editContext_1 = require("../client/editContext");
+const SimpleTable_1 = require("../ui/SimpleTable");
+function Sessions() {
+    var editContext = (0, editContext_1.useEditContext)();
+    if (!editContext)
+        return null;
+    const sessions = editContext?.activeSessions;
+    const columns = [
+        { body: (session) => session.user?.name, header: "User" },
+        {
+            body: (session) => ((0, jsx_runtime_1.jsx)("a", { href: "#", onClick: () => {
+                    if (session.item)
+                        editContext?.loadItem(session.item);
+                }, children: session.item?.name })),
+            header: "Page",
+        },
+        {
+            body: (session) => session.item?.language,
+            header: "Language",
+        },
+        {
+            body: (session) => session.item?.version,
+            header: "Version",
+        },
+    ];
+    return (0, jsx_runtime_1.jsx)(SimpleTable_1.SimpleTable, { items: sessions, columns: columns });
+}

package/dist/editor/sidebar/Sidebar.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sidebar = Sidebar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editContext_1 = require("../client/editContext");
+const SidebarView_1 = require("./SidebarView");
+function Sidebar() {
+    var editContext = (0, editContext_1.useEditContext)();
+    if (!editContext)
+        return null;
+    const view = editContext.view;
+    if (!view || !view.leftSidebar)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(SidebarView_1.SidebarView, { sidebar: view.leftSidebar, editContext: editContext, active: true }));
+}

package/dist/editor/sidebar/SidebarView.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarView = SidebarView;
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("allotment/dist/style.css");
+const allotment_1 = require("allotment");
+const react_1 = require("react");
+const utils_1 = require("primereact/utils");
+function SidebarView({ sidebar, editContext, active, }) {
+    const splitter = (0, react_1.useRef)(null);
+    const [sizes, setSizes] = (0, react_1.useState)([]);
+    const [preferredSizes, setPreferredSizes] = (0, react_1.useState)(undefined);
+    const [panelsExpanded, setPanelsExpanded] = (0, react_1.useState)([]);
+    const [sizeToSet, setSizeToSet] = (0, react_1.useState)();
+    const panelHeaderSize = 40;
+    const toggle = (panelIndex) => {
+        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;
+    });
+    (0, react_1.useEffect)(() => {
+        setPanelsExpanded(sidebar.panels.map(() => true));
+        setPreferredSizes(() => resolvedPanels.map((x) => x.initialSize));
+    }, [sidebar]);
+    const resizePanel = (panelIndex, newSize) => {
+        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);
+    };
+    (0, react_1.useEffect)(() => {
+        if (sizeToSet)
+            splitter.current?.resize(sizeToSet);
+    }, [sizeToSet]);
+    const getHeader = (panel, index) => {
+        if (panel.header)
+            return panel.header({ panel, index });
+        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.classNames)(" p-2.5 bg-gray-50 uppercase text-gray-500 text-xs flex justify items-center cursor-pointer relative", panelsExpanded[index] ? "border-b border-gray-200" : ""), onClick: () => toggle(index), children: [panel.icon &&
+                    (typeof panel.icon === "string" ? ((0, jsx_runtime_1.jsx)("i", { className: (0, utils_1.classNames)(panel.icon, "pi mr-1.5") })) : ((0, jsx_runtime_1.jsx)("div", { className: "w-4 h-4 mr-2", children: panel.icon }))), (0, jsx_runtime_1.jsx)("div", { className: "mr-auto", children: panel.title }), (0, jsx_runtime_1.jsx)("i", { className: (0, utils_1.classNames)(panelsExpanded[index] ? "pi-chevron-up" : "pi-chevron-down", "pi text-sm") })] }));
+    };
+    const initalSizes = resolvedPanels.map((x) => x.initialSize);
+    return ((0, jsx_runtime_1.jsx)(allotment_1.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);
+        }, children: resolvedPanels.map((panel, index) => ((0, jsx_runtime_1.jsx)(allotment_1.Allotment.Pane, { 
+            //  preferredSize={(preferredSizes || initalSizes)[index] + "%"}
+            maxSize: panelsExpanded.length <= index || panelsExpanded[index]
+                ? 10000
+                : panelHeaderSize, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col h-full", children: [getHeader(panel, index), panelsExpanded[index] && ((0, jsx_runtime_1.jsx)("div", { className: "overflow-hidden relative flex-1", children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.classNames)("inset-0 absolute", panel.noOverflow ? "" : "overflow-y-auto"), children: panel.content }) }))] }) }, index))) }));
+}