@alpaca-editor/core 1.0.0 → 1.0.3764-editor-mono

package/dist/editor/commands/componentCommands.js

@@ -0,0 +1,277 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSelectedComponentCommands = getSelectedComponentCommands;
+exports.getComponentCommands = getComponentCommands;
+const react_uuid_1 = __importDefault(require("react-uuid"));
+const componentTreeHelper_1 = require("../componentTreeHelper");
+const isPlaceholder = (x) => x.components !== undefined;
+function getSelectedComponentCommands(editContext) {
+    const selection = editContext.selection;
+    const selectedComponents = selection
+        .map((x) => (0, componentTreeHelper_1.getComponentById)(x, editContext.page))
+        .filter((x) => x);
+    const componentCommands = getComponentCommands(selectedComponents, editContext);
+    const componentCommandMenuItems = componentCommands.filter((x) => x.visibilityScopes.indexOf("menu") >= 0);
+    return componentCommandMenuItems;
+}
+function getComponentCommands(entities, editContext) {
+    const components = entities.filter((x) => x && !isPlaceholder(x));
+    const commands = [
+        getCreateCommentCommand(),
+        getInsertCommand(components, editContext),
+        getDeleteCommand(components, editContext),
+        getDuplicateCommand(components, editContext),
+        getSyncCommand(entities, editContext),
+        getAiCommand(editContext),
+        getDesignCommand(components, editContext),
+        getLinkToMasterCommand(components, editContext),
+        getInheritChildrenFromMasterCommand(components, editContext),
+    ];
+    return commands.filter((x) => x !== null);
+}
+function getInsertCommand(components, editContext) {
+    if (components.length !== 1 || isPlaceholder(components[0]))
+        return null;
+    const item = components[0];
+    if (!item)
+        return null;
+    if (!item.placeholders || item.placeholders.length === 0)
+        return null;
+    return {
+        id: "insert",
+        icon: "pi pi-plus",
+        label: "Insert component",
+        disabled: (context) => !context.editContext.page?.item.canWriteItem,
+        visibilityScopes: ["editFrame", "contextMenu"],
+        execute: async () => {
+            editContext.setSelectedForInsertion(item.id);
+        },
+    };
+}
+function getDuplicateCommand(components, editContext) {
+    if (components.length !== 1)
+        return null;
+    return {
+        id: "duplicate",
+        icon: "pi pi-copy",
+        label: "Duplicate",
+        visibilityScopes: ["contextMenu", "menu"],
+        disabled: (c) => !(c.editContext.page?.item.canWriteItem || false),
+        execute: async (context) => {
+            // if (!components[0].parentPlaceholder?.parentComponent.datasourceItem)
+            //   return;
+            editContext.operations.duplicateComponents({
+                componentIds: components.map((x) => x.id),
+            });
+            context.event?.stopPropagation();
+            context.event?.preventDefault();
+        },
+    };
+}
+function getAiCommand(editContext) {
+    return {
+        id: "ai",
+        icon: "pi pi-sparkles",
+        label: "AI",
+        disabled: () => false,
+        execute: async (context) => {
+            const event = context.event;
+            editContext.showAiPopup(event);
+            event.preventDefault();
+            event.stopPropagation();
+        },
+        visibilityScopes: ["editFrame", "contextMenu"],
+    };
+}
+function getDesignCommand(components, editContext) {
+    if (components.length !== 1 || isPlaceholder(components[0]))
+        return null;
+    const item = components[0];
+    if (!item)
+        return null;
+    if (!item.datasourceItem?.fields)
+        return null;
+    if (!Object.values(item.datasourceItem.fields).find((x) => x.section === "Design"))
+        return null;
+    return {
+        id: "design",
+        icon: "pi pi-palette",
+        label: "Design",
+        disabled: () => false,
+        execute: async (context) => {
+            editContext.showFieldEditorPopup(item.datasourceItem?.fields || [], ["Design", "Rendering"], context.event);
+        },
+        visibilityScopes: ["editFrame", "contextMenu"],
+    };
+}
+function getLinkToMasterCommand(components, editContext) {
+    if (!components.length)
+        return null;
+    if (editContext.page?.item?.masterLanguages?.length === 0)
+        return null;
+    return getCheckboxCommand(components, editContext, "componentLinkedToMasterLanguage", "Linked To Master Language");
+}
+function getCheckboxCommand(components, editContext, fieldName, label) {
+    const someLinked = components.find((x) => x.datasourceItem?.fields.find((x) => x.name === fieldName)?.rawValue ===
+        "1");
+    const allLinked = !components.find((x) => x.datasourceItem?.fields.find((x) => x.name === fieldName)?.rawValue !==
+        "1");
+    return {
+        id: fieldName,
+        icon: "pi pi-" +
+            (allLinked ? "check-square" : someLinked ? "stop-circle" : "stop"),
+        label,
+        disabled: () => false,
+        execute: async () => {
+            components.forEach((c) => {
+                const field = c.datasourceItem?.fields.find((x) => x.name === fieldName);
+                if (!field)
+                    return;
+                editContext.operations.editField({
+                    field: field.descriptor,
+                    rawValue: allLinked ? "" : "1",
+                    refresh: "immediate",
+                });
+            });
+        },
+        visibilityScopes: ["menu", "contextMenu"],
+    };
+}
+function getInheritChildrenFromMasterCommand(components, editContext) {
+    if (!components.length)
+        return null;
+    if (editContext.page?.item?.masterLanguages?.length === 0)
+        return null;
+    if (components.find((x) => !x.placeholders || x.placeholders.length === 0))
+        return null;
+    return getCheckboxCommand(components, editContext, "inheritChildrenFromMasterLanguage", "Inherit Children From Master");
+}
+function isLocked(c, editContext) {
+    if (editContext.activeSessions.find((x) => x.fieldLock?.item.id === c.id &&
+        x.fieldLock.item.language == c.datasourceItem?.language &&
+        x.fieldLock.item.version === c.datasourceItem?.version &&
+        x.sessionId !== editContext.sessionId) !== undefined) {
+        return true;
+    }
+    else
+        return (c.placeholders?.find((x) => x.components.find((child) => isLocked(child, editContext)) !==
+            undefined) !== undefined);
+}
+function getDeleteCommand(components, editContext) {
+    const applicableComponents = components.filter((c) => ((!isPlaceholder(c) && !c.layoutId) ||
+        c.layoutId === editContext.page?.item.id) &&
+        !isLocked(c, editContext) &&
+        editContext.page?.item.canWriteItem);
+    if (applicableComponents.length === 0)
+        return null;
+    return {
+        id: "delete",
+        label: "Delete",
+        icon: "pi pi-fw pi-trash",
+        execute: async (context) => deleteComponents(applicableComponents, context.editContext),
+        disabled: () => applicableComponents.length === 0 ||
+            applicableComponents.length !== components.length,
+        visibilityScopes: ["editFrame", "menu", "contextMenu"],
+    };
+}
+function canSynchronize(placeholderData) {
+    if (placeholderData.canSynchronize)
+        return true;
+    placeholderData.components.forEach((c) => {
+        if (c.placeholders?.find((x) => canSynchronize(x)))
+            return true;
+    });
+    return false;
+}
+function getSyncCommand(components, editContext) {
+    const placeholders = [];
+    for (const component of components) {
+        if (isPlaceholder(component) && canSynchronize(component)) {
+            placeholders.push({
+                item: component.parentComponent
+                    ? getItemDescriptor(component.parentComponent, editContext)
+                    : undefined,
+            });
+        }
+        else {
+            if (component.placeholders?.find((x) => canSynchronize(x))) {
+                placeholders.push({
+                    item: getItemDescriptor(component, editContext),
+                });
+            }
+        }
+    }
+    const canSync = placeholders.length > 0 ||
+        (components.length === 0 &&
+            editContext.page?.rootComponent.placeholders.find((x) => canSynchronize(x)));
+    return {
+        id: "synchronize",
+        label: "Synchronize",
+        icon: "pi pi-fw pi-sync",
+        disabled: () => !canSync,
+        visibilityScopes: ["menu", "editFrame", "contextMenu"],
+        execute: async () => {
+            const op = {
+                mainItem: editContext.page.item.descriptor,
+                type: "synchronize-components",
+                date: new Date().toISOString(),
+                delete: false,
+                id: (0, react_uuid_1.default)(),
+                placeholders: placeholders,
+                description: "Synchronize components",
+            };
+            editContext.operations.executeEditOperation(op);
+        },
+    };
+}
+function deleteComponents(components, editContext) {
+    if (!components.length)
+        return;
+    editContext.confirm({
+        showCancel: true,
+        message: (components.length > 1
+            ? "Are you sure you want to remove these components? "
+            : "Are you sure you want to remove this component? ") +
+            components.map((x) => x.name).join(", "),
+        header: components.length > 1 ? "Remove components" : "Remove component",
+        icon: "pi pi-exclamation-triangle",
+        accept: () => {
+            if (!editContext.page?.item.descriptor)
+                return;
+            console.log("Remove components", components);
+            const op = {
+                type: "remove-component",
+                date: new Date().toISOString(),
+                id: (0, react_uuid_1.default)(),
+                componentIds: components.map((x) => x.id),
+                mainItem: editContext.page.item.descriptor,
+                description: "Remove components: " + components.map((x) => x.name).join(", "),
+            };
+            editContext.operations.executeEditOperation(op);
+        },
+    });
+}
+function getCreateCommentCommand() {
+    // if (components.length !== 1 || isPlaceholder(components[0])) return null;
+    return {
+        id: "addComment",
+        label: "Add Comment",
+        icon: "pi pi-comment",
+        disabled: () => false,
+        visibilityScopes: ["contextMenu"],
+        execute: async (context) => {
+            context.editContext.addComment();
+            context.editContext.switchView("reviews");
+        },
+    };
+}
+function getItemDescriptor(component, editContext) {
+    return {
+        id: component.id,
+        language: component.datasourceItem?.language || editContext.page.item.language,
+        version: component.datasourceItem?.version || editContext.page.item.version,
+    };
+}

package/dist/editor/commands/createVersionCommand.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCreateAndSwitchToNewVersionCommand = getCreateAndSwitchToNewVersionCommand;
+const editService_1 = require("../services/editService");
+const utils_1 = require("../utils");
+function getCreateAndSwitchToNewVersionCommand({ language, }) {
+    return {
+        id: "createAndSwitchToNewVersion",
+        execute: (context) => execute(context, language),
+        label: "Add Version",
+        icon: "pi pi-fw pi-plus",
+        disabled: (context) => !context.editContext.item?.canLock,
+    };
+}
+async function execute(context, language) {
+    if (!context.editContext.item)
+        return;
+    const descriptor = (0, utils_1.getItemDescriptor)(context.editContext.item);
+    if (language)
+        descriptor.language = language;
+    await (0, editService_1.createVersion)(descriptor, context.editContext.sessionId);
+    context.editContext.loadItem({
+        ...descriptor,
+        version: 0,
+    });
+}

package/dist/editor/commands/deleteVersionCommand.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDeleteVersionCommand = getDeleteVersionCommand;
+const editService_1 = require("../services/editService");
+const utils_1 = require("../utils");
+function getDeleteVersionCommand({}) {
+    return {
+        id: "deleteVersion",
+        execute: (context) => execute(context),
+        label: "Delete Version",
+        icon: "pi pi-fw pi-times",
+        disabled: (context) => !context.editContext.item?.canLock ||
+            context.editContext.item.version === 0 ||
+            context.editContext.itemVersions.length === 0,
+    };
+}
+async function execute(context) {
+    if (!context.editContext.item)
+        return;
+    const descriptor = (0, utils_1.getItemDescriptor)(context.editContext.item);
+    let message = "Are you sure you want to delete version " +
+        context.editContext.item.version +
+        "?";
+    const sessions = context.editContext.activeSessions.filter((x) => ((x.item?.id === descriptor.id &&
+        x.item?.language === descriptor.language &&
+        x.item?.version === descriptor.version) ||
+        (x.page?.id === descriptor.id &&
+            x.page?.language === descriptor.language &&
+            x.page?.version === descriptor.version)) &&
+        x.sessionId !== context.editContext.sessionId);
+    if (sessions.length > 0) {
+        context.editContext.showMessageDialog({
+            header: "Delete Version",
+            message: "This version is currently locked by " +
+                sessions.map((x) => x.user.name).join(", ") +
+                ". You cannot delete it.",
+        });
+        return;
+    }
+    if (context.editContext.itemVersions[context.editContext.itemVersions.length - 1]?.version === context.editContext.item.version) {
+        message += " This is the latest version!";
+    }
+    context.editContext.confirm?.({
+        header: "Delete Version",
+        message,
+        showCancel: true,
+        accept: async () => {
+            await (0, editService_1.deleteVersion)(descriptor, context.editContext.sessionId);
+            context.editContext.loadItem({
+                ...descriptor,
+                version: 0,
+            });
+        },
+    });
+}

package/dist/editor/commands/itemCommands.js

@@ -0,0 +1,134 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.publishItemCommand = exports.insertItemCommand = exports.renameItemCommand = exports.deleteItemCommand = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ItemNameDialogNew_1 = require("../ui/ItemNameDialogNew");
+exports.deleteItemCommand = {
+    id: "deleteItem",
+    label: "Delete",
+    icon: "pi pi-times",
+    disabled: (context) => !context.data?.items || !context.data?.items[0]?.canLock || false,
+    execute: async (context) => {
+        const items = context.data?.items;
+        if (!items || items.length === 0)
+            return;
+        const confirmed = await new Promise((resolve) => {
+            context.editContext.confirm({
+                message: ((0, jsx_runtime_1.jsxs)("div", { children: ["Are you sure you want to delete", " ", (0, jsx_runtime_1.jsx)("em", { children: items.map((x) => x.name).join(", ") }), "? This cannot be undone."] })),
+                header: "Confirmation",
+                icon: "pi pi-exclamation-triangle",
+                accept: () => resolve(true),
+                reject: () => resolve(false),
+                showCancel: true,
+            });
+        });
+        if (confirmed) {
+            if (items.some((x) => context.editContext.contentEditorItem?.descriptor.id === x.id)) {
+                const firstItem = items[0];
+                if (firstItem) {
+                    context.editContext.loadItem({
+                        id: firstItem.parentId,
+                        language: context.editContext.contentEditorItem.language,
+                        version: 0,
+                    });
+                }
+            }
+            await context.editContext.operations.deleteItems(items.map((x) => x.descriptor));
+            return true;
+        }
+        return false;
+    },
+};
+exports.renameItemCommand = {
+    id: "renameItem",
+    label: "Rename",
+    icon: "pi pi-pencil",
+    keyBinding: "F2",
+    disabled: (context) => !context.data?.items ||
+        context.data.items.length !== 1 ||
+        !context.data.items[0]?.canLock ||
+        false,
+    execute: async (context) => {
+        const item = context.data?.items[0];
+        if (!item)
+            return;
+        const newName = await context.openDialog(ItemNameDialogNew_1.ItemNameDialog, {
+            name: item.name,
+            title: "Rename Item",
+            message: "Enter a new name for the item:",
+            parentItem: { ...item.descriptor, id: item.parentId },
+            itemId: item.id,
+        });
+        if (newName) {
+            await context.editContext.operations.renameItem(item.descriptor, newName);
+        }
+    },
+};
+exports.insertItemCommand = {
+    id: "insertItem",
+    label: "Insert Item",
+    icon: "pi pi-plus",
+    disabled: (context) => !context.data?.items || context.data.items.length !== 1 || false,
+    execute: async (context) => {
+        const parentItem = context.data?.items[0];
+        const templateId = context.data?.templateId;
+        if (!parentItem || !templateId)
+            return;
+        const templateItem = await context.editContext.itemsRepository.getItem({
+            id: templateId,
+            language: "en",
+            version: 0,
+        });
+        const templateName = templateItem?.name;
+        const name = await context.openDialog(ItemNameDialogNew_1.ItemNameDialog, {
+            title: "Create Item",
+            message: "Enter a name for the new item:",
+            name: templateName,
+            parentItem: parentItem.descriptor,
+        });
+        if (name) {
+            const result = await context.editContext.operations.createItem(parentItem.descriptor, templateId, name);
+            if (result) {
+                context.editContext.loadItem(result);
+            }
+            return result;
+        }
+    },
+};
+// export const localizeItemCommand: ItemCommand = {
+//   id: "localizeItem",
+//   label: "Localize",
+//   icon: "pi pi-globe",
+//   disabled: (context: ItemCommandContext) =>
+//     !context.data?.items || context.data.items.length === 0 || false,
+//   execute: async (context: ItemCommandContext) => {
+//     const items = context.data?.items;
+//     if (!items?.length) return;
+//     await context.openDialog<string, LocalizeItemDialogProps>(
+//       LocalizeItemDialog,
+//       {
+//         items,
+//         editContext: context.editContext,
+//       }
+//     );
+//     if (context.editContext.contentEditorItem?.descriptor)
+//       context.editContext.loadItem(
+//         context.editContext.contentEditorItem.descriptor
+//       );
+//   },
+// };
+exports.publishItemCommand = {
+    id: "publishItem",
+    label: "Publish",
+    icon: "pi pi-cloud-upload",
+    disabled: (context) => !context.data?.items ||
+        context.data.items.length !== 1 ||
+        !context.data.items[0]?.canLock ||
+        false,
+    execute: async (context) => {
+        const item = context.data?.items[0];
+        if (!item)
+            return;
+        await context.editContext.switchView("publish");
+    },
+};

package/dist/editor/commands/localizeItem/LocalizeItemDialog.js

@@ -0,0 +1,94 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LocalizeItemDialog = LocalizeItemDialog;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("primereact/button");
+const dialog_1 = require("primereact/dialog");
+const react_1 = require("react");
+const DialogButtons_1 = __importDefault(require("../../ui/DialogButtons"));
+const contentService_1 = require("../../services/contentService");
+const checkbox_1 = require("primereact/checkbox");
+const Spinner_1 = require("../../ui/Spinner");
+function LocalizeItemDialog(props) {
+    const [languageSelection, setLanguageSelection] = (0, react_1.useState)({});
+    const [languageData, setLanguageData] = (0, react_1.useState)();
+    const [isExecuting, setIsExecuting] = (0, react_1.useState)(false);
+    const [currentTask, setCurrentTask] = (0, react_1.useState)();
+    const [completedTasks, setCompletedTasks] = (0, react_1.useState)([]);
+    const [finished, setFinished] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        const itemDescriptors = props.items.map((x) => x.descriptor);
+        const loadLanguages = async () => {
+            const itemLanguages = await Promise.all(itemDescriptors.map(async (item) => {
+                const result = await (0, contentService_1.getLanguagesAndVersions)(item);
+                return result.data?.languages || [];
+            }));
+            const languageMap = new Map();
+            itemLanguages.forEach((languages, index) => {
+                languages.forEach((language) => {
+                    const languageData = languageMap.get(language.name) || {
+                        name: language.name,
+                        items: [],
+                    };
+                    if (language.versions > 0)
+                        languageData.items.push(itemDescriptors[index]);
+                    languageMap.set(language.languageCode, languageData);
+                });
+            });
+            setLanguageData(languageMap);
+        };
+        loadLanguages();
+    }, [props]);
+    async function startLocalization() {
+        setIsExecuting(true);
+        const completedTasks = [];
+        for (const item of props.items) {
+            for (const language of Object.keys(languageSelection)) {
+                if (!languageSelection[language])
+                    continue;
+                if (languageData
+                    ?.get(language)
+                    ?.items.find((x) => x.id === item.descriptor.id))
+                    continue;
+                setCurrentTask(`${item.name} - ${language}`);
+                await props.editContext.operations.createVersion({
+                    id: item.descriptor.id,
+                    language: language,
+                    version: 0,
+                });
+                completedTasks.push(`${item.name} - ${language}`);
+            }
+        }
+        setFinished(true);
+        setCompletedTasks(completedTasks);
+    }
+    const allLanguages = Array.from(languageData?.keys() || []).map((x) => ({
+        code: x,
+        name: languageData?.get(x)?.name || "",
+    }));
+    allLanguages.sort((a, b) => a.name.localeCompare(b.name));
+    const dialogContent = getContent();
+    function getContent() {
+        if (finished)
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-1 flex-col justify h-full", children: [completedTasks.length > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-lg font-bold pt-3 px-3", children: "Finished. Versions created:" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 relative", children: (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-3 flex flex-col gap-3 overflow-y-auto", children: completedTasks.map((x, index) => ((0, jsx_runtime_1.jsx)("div", { children: x }, index))) }) })] })), completedTasks.length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center h-full", children: "All items are already localized." })), (0, jsx_runtime_1.jsx)(DialogButtons_1.default, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => props.onClose?.(null), label: "Close" }) })] }));
+        if (isExecuting)
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-3 h-full", children: [(0, jsx_runtime_1.jsx)(Spinner_1.Spinner, {}), " Creating version ", currentTask] }));
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-1 flex-col justify h-full text-sm ", children: [(0, jsx_runtime_1.jsxs)("div", { className: "p-3 flex flex-col gap-2 h-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: "my-2", children: ["Select languages to localize", " ", props.items.map((x) => x.name).join(", "), ":"] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 my-1", children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: allLanguages.every((language) => languageSelection[language.code]), onChange: (e) => {
+                                        setLanguageSelection(Object.fromEntries(Array.from(languageData?.keys() || []).map((language) => [
+                                            language,
+                                            e.checked || false,
+                                        ])));
+                                    } }), " ", "All"] }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex-1", children: (0, jsx_runtime_1.jsx)("div", { className: "absolute top-0 left-0 w-full h-full overflow-y-auto", children: allLanguages.map((language) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 my-2", children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: languageSelection[language.code] || false, onChange: (e) => {
+                                                setLanguageSelection((prev) => ({
+                                                    ...prev,
+                                                    [language.code]: e.checked || false,
+                                                }));
+                                            } }), (0, jsx_runtime_1.jsx)("div", { children: language.name })] }, language.code))) }) })] }), (0, jsx_runtime_1.jsxs)(DialogButtons_1.default, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: startLocalization, label: "Start" }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => props.onClose?.(null), label: "Cancel" })] })] }));
+    }
+    return ((0, jsx_runtime_1.jsx)(dialog_1.Dialog, { visible: true, onHide: () => {
+            props.onClose?.(null);
+        }, style: { width: "75vw", height: "75vh" }, header: "Localize", children: dialogContent }));
+}

package/dist/editor/commands/undo.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getUndoCommand = getUndoCommand;
+exports.getRedoCommand = getRedoCommand;
+function getUndoCommand() {
+    return {
+        id: "undo",
+        label: "Undo",
+        icon: "pi pi-undo",
+        execute: async (context) => {
+            context.editContext.operations.undo();
+        },
+        disabled: (context) => {
+            return (context.editContext.editHistory.length === 0 ||
+                !context.editContext.editHistory.find((x) => x.sessionId === context.editContext.sessionId && x.canUndo));
+        },
+    };
+}
+function getRedoCommand() {
+    return {
+        id: "redo",
+        label: "Redo",
+        icon: "pi pi-refresh",
+        execute: async (context) => {
+            context.editContext.operations.redo();
+        },
+        disabled: (context) => {
+            return (context.editContext.editHistory.length === 0 ||
+                !context.editContext.editHistory.find((x) => x.sessionId === context.editContext.sessionId && x.canRedo));
+        },
+    };
+}

package/dist/editor/component-designer/ComponentDesigner.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentDesigner = ComponentDesigner;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentRenderingEditor_1 = require("./ComponentRenderingEditor");
+const splitter_1 = require("primereact/splitter");
+const StackedPanels_1 = require("../ui/StackedPanels");
+const PlaceholdersEditor_1 = require("./PlaceholdersEditor");
+const Icons_1 = require("../ui/Icons");
+const ComponentEditor_1 = require("./ComponentEditor");
+const react_1 = require("react");
+const editContext_1 = require("../client/editContext");
+const componentDesignerService_1 = require("../services/componentDesignerService");
+const PageViewerFrame_1 = require("../page-viewer/PageViewerFrame");
+function ComponentDesigner() {
+    const [allComponents, setAllComponents] = (0, react_1.useState)([]);
+    const context = (0, editContext_1.useEditContext)();
+    if (!context?.page)
+        return null;
+    (0, react_1.useEffect)(() => {
+        async function loadComponents() {
+            if (context?.page) {
+                const components = await (0, componentDesignerService_1.getAllComponents)(context.page.item.id);
+                setAllComponents(components);
+            }
+            else
+                setAllComponents([]);
+        }
+        loadComponents();
+    }, [context.page]);
+    const mainPanels = [
+        {
+            name: "template",
+            title: "Component",
+            initialSize: 30,
+            icon: (0, jsx_runtime_1.jsx)(Icons_1.PuzzleIcon, {}),
+            noOverflow: true,
+            content: (0, jsx_runtime_1.jsx)(ComponentEditor_1.ComponentEditor, { allComponents: allComponents }),
+        },
+        {
+            name: "placeholders",
+            title: "Placeholders",
+            icon: "pi pi-th-large",
+            initialSize: 30,
+            noOverflow: true,
+            content: (0, jsx_runtime_1.jsx)(PlaceholdersEditor_1.PlaceholdersEditor, { allComponents: allComponents }),
+        },
+        {
+            name: "rendering",
+            title: "Rendering",
+            icon: "pi pi-palette",
+            initialSize: 40,
+            content: (0, jsx_runtime_1.jsx)(ComponentRenderingEditor_1.ComponentRenderingEditor, {}),
+            noOverflow: true,
+        },
+    ];
+    return ((0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { className: "h-full", children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { children: (0, jsx_runtime_1.jsx)(StackedPanels_1.StackedPanels, { panels: mainPanels }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { children: (0, jsx_runtime_1.jsx)(PageViewerFrame_1.PageViewerFrame, { mode: "view" }) })] }));
+}