@alpaca-editor/core 1.0.3762-mono

package/dist/editor/client/operations.js

@@ -0,0 +1,398 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOperationsContext = getOperationsContext;
+const react_uuid_1 = __importDefault(require("react-uuid"));
+const editService_1 = require("../services/editService");
+const react_1 = require("react");
+const helpers_1 = require("./helpers");
+const use_debounce_1 = require("use-debounce");
+function getOperationsContext(state, ui) {
+    const [editOperationExecuted, setEditOperationExecuted] = (0, react_1.useState)();
+    const [executingEditOperations, setExecutingEditOperations] = (0, react_1.useState)([]);
+    const lastOp = (0, react_1.useRef)(undefined);
+    const undoing = (0, react_1.useRef)(false);
+    const stateRef = (0, react_1.useRef)(state);
+    (0, react_1.useEffect)(() => {
+        stateRef.current = state;
+    }, [state]);
+    const executeOp = async (op, options = {
+        refresh: "immediate",
+    }) => {
+        console.log("Executing op", op);
+        setExecutingEditOperations((ops) => (ops ? [...ops, op] : [op]));
+        const result = await (0, editService_1.executeEditOperation)(op, state.sessionId);
+        console.log("Result", result);
+        handleResult(result, options);
+        await state.refreshHistory(op.mainItem);
+        //state.addToEditHistory(result.data as EditOperation);
+        setEditOperationExecuted(result.data);
+        setExecutingEditOperations((ops) => ops ? ops.filter((x) => x.id !== op.id) : []);
+        return result.data;
+    };
+    const duplicateComponents = (0, react_1.useCallback)(({ componentIds }) => {
+        const op = {
+            type: "duplicate-components",
+            mainItem: state.page?.item.descriptor,
+            sourceComponentIds: componentIds,
+            date: new Date().toISOString(),
+            id: (0, react_uuid_1.default)(),
+            description: "Duplicate components",
+        };
+        executeOp(op);
+    }, [state.page]);
+    const addComponent = async (componentTypeId, placeholderKey, index) => {
+        const page = stateRef.current.page;
+        console.log("  component A", componentTypeId, placeholderKey, index, "PAGE ", page);
+        if (!page) {
+            return;
+        }
+        const op = {
+            type: "add-component",
+            mainItem: page.item.descriptor,
+            // parent: parentId
+            //   ? {
+            //       id: parentId,
+            //       language: page.item.language,
+            //       version: page.item.version,
+            //     }
+            //   : undefined,
+            placeholderKey,
+            placeholderIndex: index,
+            componentTypeId,
+            date: new Date().toISOString(),
+            id: (0, react_uuid_1.default)(),
+            description: "Add component",
+        };
+        const result = await executeOp(op);
+        return result;
+    };
+    const handleResult = (result, options) => {
+        if ((0, helpers_1.handleErrorResult)(result, ui, state))
+            return;
+        const executedOps = Array.isArray(result.data)
+            ? result.data
+            : [result.data];
+        for (const executedOp of executedOps) {
+            if (executedOp &&
+                (executedOp.type === "move-component" ||
+                    executedOp.type === "add-component" ||
+                    executedOp.type === "link-component" ||
+                    executedOp.type === "duplicate-components")) {
+                if (executedOp.focus) {
+                    state.setSelection([executedOp.focus]);
+                }
+            }
+            ui.onOperationExecuted(executedOp);
+        }
+        if (options.refresh !== "none") {
+            state.requestRefresh(options.refresh === "immediate" ? "immediate" : "waitForQuietPeriod");
+        }
+    };
+    const ensureLock = (0, react_1.useCallback)(async (field) => {
+        if (!field || !field.item)
+            return false;
+        if (state.lockedField?.fieldId === field.fieldId &&
+            state.lockedField?.item.id === field.item.id &&
+            state.lockedField?.item.language === field.item.language &&
+            state.lockedField?.item.version === field.item.version)
+            return true;
+        const result = await (0, editService_1.lockField)(field.item, field.fieldId, state.sessionId);
+        if (result.type == "error") {
+            console.log("error locking field", result);
+        }
+        //handleErrorResult(result, ui, state);
+        if (result.type == "success" && result.data.success) {
+            state.setLockedField(field);
+            return true;
+        }
+        return false;
+    }, [state, ui]);
+    const lockItemsAndRefresh = (0, react_1.useCallback)(async (items) => {
+        const item = items[0];
+        if (!item)
+            return;
+        await (0, editService_1.lockItems)(items);
+        if (item.id == state.contentEditorItem?.id) {
+            await state.loadItem(item);
+        }
+        else
+            state.requestRefresh("immediate");
+    }, [state]);
+    const unlockItemsAndRefresh = (0, react_1.useCallback)(async (items) => {
+        const item = items[0];
+        if (!item)
+            return;
+        await (0, editService_1.unlockItems)(items);
+        if (item.id == state.contentEditorItem?.id) {
+            await state.loadItem(item);
+        }
+        else
+            state.requestRefresh("immediate");
+    }, [state]);
+    const executeWorkflowCommandAndRefresh = (0, react_1.useCallback)(async (item, commandId) => {
+        const result = await (0, editService_1.executeWorkflowCommand)(item, commandId, "");
+        if (result.type === "success") {
+            if (!result.data.succeeded) {
+                const errorMessage = {
+                    summary: "Workflow command failed",
+                    details: result.data.message,
+                };
+                ui.showErrorToast(errorMessage);
+            }
+            state.requestRefresh("immediate");
+        }
+    }, [state]);
+    const renameItem = (0, react_1.useCallback)(async (item, newName) => {
+        await executeOp({
+            type: "rename-item",
+            mainItem: state.page?.item.descriptor || item,
+            date: new Date().toISOString(),
+            id: (0, react_uuid_1.default)(),
+            item,
+            newName,
+            description: "Rename item",
+        });
+        state.requestRefresh("immediate");
+        state.itemsRepository.refreshItems([item]);
+    }, [state.itemsRepository, executeOp]);
+    const lastEditField = (0, react_1.useRef)(undefined);
+    const editField = (0, react_1.useCallback)(async ({ field, value, rawValue, refresh = "immediate", }) => {
+        state.itemsRepository.updateFieldValue(field, state.user ?? { name: "unknown", ai: false }, true, value, rawValue);
+        if (refresh === "immediate" || refresh === "none") {
+            return editFieldImmediate({ field, value, rawValue, refresh });
+        }
+        if (lastEditField.current?.fieldId !== field.fieldId ||
+            lastEditField.current?.item?.id !== field.item?.id ||
+            lastEditField.current?.item?.language !== field.item?.language ||
+            lastEditField.current?.item?.version !== field.item?.version) {
+            executeEditFieldDebounced.flush();
+        }
+        lastEditField.current = field;
+        return executeEditFieldDebounced({ field, value, rawValue, refresh });
+    }, [state.itemsRepository]);
+    const editFieldImmediate = (0, react_1.useCallback)(async ({ field, value, rawValue, refresh = "immediate", }) => {
+        state.itemsRepository.updateFieldValue(field, state.user ?? { name: "unknown", ai: false }, true, value, rawValue);
+        const val = rawValue !== undefined ? rawValue : value;
+        if (val === undefined)
+            return;
+        const op = await getEditOP(field, rawValue, value);
+        if (op) {
+            await executeOp(op, { refresh });
+            await state.itemsRepository.refreshItems([field.item]);
+            state.itemsRepository.onFieldSaved(field, val);
+        }
+    }, [state.itemsRepository, executeOp]);
+    const executeEditFieldDebounced = (0, use_debounce_1.useDebouncedCallback)(editFieldImmediate, state.configuration.debounceFieldEditsInterval * 2, { trailing: true });
+    async function getEditOP(field, rawValue, value) {
+        const item = await state.itemsRepository.getItem(field.item);
+        if (!item)
+            return;
+        const fieldItem = await state.itemsRepository.getItem({
+            id: field.fieldId,
+            language: "en",
+            version: 0,
+        });
+        if (!fieldItem) {
+            console.log("Could not fetch field item " + field.fieldId);
+            return;
+        }
+        let op = lastOp.current;
+        if (!op ||
+            op.undone ||
+            op.type !== "edit-field" ||
+            !op.item ||
+            op.item.id !== item.id ||
+            op.fieldId !== field.fieldId ||
+            op.item.language !== item.language ||
+            op.item.version !== item.version) {
+            op = {
+                type: "edit-field",
+                item: {
+                    id: item.id,
+                    version: item.version,
+                    language: item.language,
+                    name: item.name,
+                },
+                fieldId: field.fieldId,
+                fieldName: fieldItem.name,
+                date: new Date().toISOString(),
+                id: (0, react_uuid_1.default)(),
+                description: "Edit " + item.name,
+                focus: item.id + ":" + field.fieldId,
+                canUndo: true,
+                mainItem: state.page?.item.descriptor || item.descriptor,
+            };
+        }
+        op.date = new Date().toISOString();
+        op.value = rawValue ?? value;
+        const firstEditInheritedComponent = item.isInheritedFromMasterLanguage &&
+            op.item.language != state.page?.item.language;
+        if (firstEditInheritedComponent)
+            op.item.language = state.page.item.language;
+        lastOp.current = op;
+        return op;
+    }
+    const undo = (0, react_1.useCallback)(async (numberOfOperations) => {
+        if (undoing.current) {
+            return false;
+        }
+        undoing.current = true;
+        try {
+            const item = state.contentEditorItem?.descriptor;
+            if (!item)
+                return false;
+            const ops = state.editHistory
+                .filter((x) => x.canUndo && x.sessionId === state.sessionId)
+                .slice(0, numberOfOperations || 1);
+            if (!ops.length)
+                return false;
+            // Mark operations as undone
+            ops.forEach((x) => {
+                x.undone = true;
+                x.canUndo = false;
+            });
+            const result = await (0, editService_1.executeUndo)(state.sessionId, ops.map((x) => x.id));
+            handleResult(result, { refresh: "immediate" });
+            if (result.type === "success") {
+                const itemsToRefresh = result.data
+                    .map((x) => {
+                    if (x.type === "edit-field")
+                        return x.item;
+                    if (x.type === "add-component")
+                        return {
+                            id: x.componentId,
+                            language: x.mainItem.language,
+                            version: x.mainItem.version,
+                        };
+                    return undefined;
+                })
+                    .filter((x) => x != null);
+                await state.itemsRepository.refreshItems(itemsToRefresh);
+                await state.refreshHistory(item);
+                return true;
+            }
+            else {
+                ui.showErrorToast(result);
+                return false;
+            }
+        }
+        finally {
+            // Always reset the flag
+            undoing.current = false;
+            console.log("undoing flag reset");
+        }
+    }, [state, ui, undoing]);
+    const redo = (0, react_1.useCallback)(async () => {
+        if (undoing.current)
+            return false;
+        undoing.current = true;
+        try {
+            const item = state.contentEditorItem?.descriptor;
+            if (!item)
+                return false;
+            // Clone the array to avoid mutating the original state
+            const op = [...state.editHistory]
+                .reverse()
+                .find((x) => x.canRedo && x.sessionId === state.sessionId);
+            if (!op)
+                return false;
+            op.canRedo = false;
+            op.undone = false;
+            const result = await (0, editService_1.executeRedo)(state.sessionId, op.id);
+            handleResult(result, { refresh: "immediate" });
+            if (result.type === "success") {
+                const itemsToRefresh = result.data
+                    .map((x) => {
+                    if (x.type === "edit-field")
+                        return x.item;
+                    if (x.type === "add-component")
+                        return {
+                            id: x.componentId,
+                            language: x.mainItem.language,
+                            version: x.mainItem.version,
+                        };
+                    return undefined;
+                })
+                    .filter((x) => x != null);
+                await state.itemsRepository.refreshItems(itemsToRefresh);
+                await state.refreshHistory(item);
+                return true;
+            }
+            else {
+                ui.showErrorToast(result);
+                return false;
+            }
+        }
+        finally {
+            // Always reset the flag
+            undoing.current = false;
+        }
+    }, [state, ui, undoing]);
+    const deleteItems = (0, react_1.useCallback)(async (items) => {
+        const itemsToDelete = await state.itemsRepository.getItems(items);
+        await (0, editService_1.executeDeleteItems)(items);
+        state.itemsRepository.onItemsDeleted(itemsToDelete.map((x) => ({
+            item: x.descriptor,
+            parentId: x.parentId,
+        })));
+        state.requestRefresh("immediate");
+    }, [state.itemsRepository]);
+    const moveItems = (0, react_1.useCallback)(async (items, target, index) => {
+        await (0, editService_1.executeMoveItems)(items, target, index);
+    }, [state.itemsRepository]);
+    const createItem = (0, react_1.useCallback)(async (parent, templateId, name) => {
+        const result = await (0, editService_1.executeCreateItem)(parent, templateId, name);
+        if ((0, helpers_1.handleErrorResult)(result, ui, state))
+            return;
+        state.itemsRepository.refreshItems([parent]);
+        return result.data;
+    }, [state.itemsRepository]);
+    const createVersion = (0, react_1.useCallback)(async (item) => {
+        await (0, editService_1.createVersion)(item, state.sessionId);
+    }, [state]);
+    const ops = (0, react_1.useMemo)(() => ({
+        addComponent,
+        ensureLock,
+        lockItems: lockItemsAndRefresh,
+        unlockItems: unlockItemsAndRefresh,
+        executeWorkflowCommand: executeWorkflowCommandAndRefresh,
+        editField,
+        undo,
+        redo,
+        executeEditOperation: executeOp,
+        renameItem,
+        deleteItems,
+        createItem,
+        createVersion,
+        duplicateComponents,
+        undoing: undoing.current,
+        moveItems,
+    }), [
+        addComponent,
+        ensureLock,
+        lockItemsAndRefresh,
+        unlockItemsAndRefresh,
+        executeWorkflowCommandAndRefresh,
+        editField,
+        undo,
+        redo,
+        executeOp,
+        renameItem,
+        deleteItems,
+        createItem,
+        createVersion,
+        duplicateComponents,
+        undoing.current,
+        moveItems,
+    ]);
+    return (0, react_1.useMemo)(() => ({
+        ops,
+        context: {
+            editOperationExecuted,
+            executingEditOperations,
+        },
+    }), [executingEditOperations, editOperationExecuted, ops, undoing]);
+}

package/dist/editor/client/pageModelBuilder.js

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePageModel = usePageModel;
+const react_1 = require("react");
+const editService_1 = require("../services/editService");
+function usePageModel(itemsRepository, pageItemDescriptor) {
+    const [page, setPage] = (0, react_1.useState)();
+    const [pageSkeleton, setPageSkeleton] = (0, react_1.useState)();
+    const [insertOptions, setInsertOptions] = (0, react_1.useState)([]);
+    (0, react_1.useEffect)(() => {
+        setPage(undefined);
+        setPageSkeleton(undefined);
+    }, [pageItemDescriptor]);
+    (0, react_1.useEffect)(() => {
+        const loadInsertOptions = async () => {
+            if (!pageSkeleton)
+                return;
+            const collectPlaceholderKeys = (skeleton) => {
+                const keys = [];
+                const collectFromComponent = (component) => {
+                    component.placeholders.forEach(placeholder => {
+                        keys.push(placeholder.key);
+                        placeholder.components.forEach(c => collectFromComponent(c));
+                    });
+                };
+                collectFromComponent(skeleton.rootComponent);
+                return keys;
+            };
+            const placeholderKeys = collectPlaceholderKeys(pageSkeleton);
+            const options = await (0, editService_1.loadPlaceholderInsertOptions)(pageSkeleton.item, placeholderKeys);
+            setInsertOptions(options);
+        };
+        loadInsertOptions();
+    }, [pageSkeleton]);
+    const updatePageModel = async () => {
+        if (!itemsRepository)
+            return;
+        //const start = performance.now();
+        const itemsToFetch = [];
+        if (!pageSkeleton) {
+            setPage(undefined);
+            return;
+        }
+        itemsToFetch.push(pageSkeleton.item);
+        const collectItems = (component) => {
+            if (component.datasourceItem)
+                itemsToFetch.push({
+                    id: component.datasourceItem.id,
+                    language: component.datasourceItem.language,
+                    version: component.datasourceItem.version,
+                });
+            component.placeholders
+                .flatMap((x) => x.components)
+                .forEach((c) => collectItems(c));
+            component.items.forEach((i) => itemsToFetch.push(i));
+        };
+        collectItems(pageSkeleton.rootComponent);
+        const fullItems = await itemsRepository.getItems(itemsToFetch);
+        const getItem = (descriptor) => fullItems.find((x) => x.id === descriptor.id &&
+            x.language === descriptor.language &&
+            x.version === descriptor.version);
+        const pageItem = await itemsRepository.getItem(pageSkeleton.item);
+        if (!pageItem) {
+            setPage(undefined);
+            return;
+        }
+        const buildModel = (skeleton, parentPlaceholder) => {
+            const datasourceItemTemp = skeleton.datasourceItem
+                ? getItem(skeleton.datasourceItem)
+                : undefined;
+            const datasourceItem = skeleton.datasourceItem && datasourceItemTemp
+                ? { ...skeleton.datasourceItem, ...datasourceItemTemp }
+                : undefined;
+            let name = skeleton.name || datasourceItem?.name || skeleton.type || "unknown";
+            const mapItem = (x) => {
+                const item = getItem(x);
+                if (!item)
+                    return null;
+                return { ...x, ...item };
+            };
+            const items = skeleton.items.map(mapItem).filter((x) => x !== null);
+            const placeholders = [];
+            const component = {
+                ...skeleton,
+                name,
+                datasourceItem,
+                items,
+                placeholders,
+                isShared: skeleton.id !== skeleton.datasourceItem?.id,
+                parentPlaceholder
+            };
+            component.placeholders = skeleton.placeholders.map((x) => {
+                const insOpts = insertOptions.find((y) => y.key === x.key)?.insertOptions ?? [];
+                const placeholder = {
+                    ...x,
+                    components: [],
+                    canSynchronize: false,
+                    parentComponent: component,
+                    insertOptions: insOpts,
+                };
+                placeholder.components = x.components
+                    .map((y) => buildModel(y, placeholder))
+                    .filter((x) => x !== undefined);
+                return placeholder;
+            });
+            return component;
+        };
+        const rootComponent = buildModel(pageSkeleton.rootComponent);
+        if (!rootComponent) {
+            setPage(undefined);
+            return;
+        }
+        const page = {
+            item: pageItem,
+            rootComponent,
+            //    revision: itemsRepository.revision,
+            editRevision: pageSkeleton.editRevision,
+        };
+        //console.log("Page model updated", performance.now() - start);
+        setPage(page);
+    };
+    (0, react_1.useEffect)(() => {
+        updatePageModel();
+    }, [pageSkeleton, itemsRepository, insertOptions]);
+    return {
+        setPageSkeleton,
+        page,
+    };
+}

package/dist/editor/commands/commands.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });