@alpaca-editor/core 1.0.3762-mono

package/dist/editor/page-viewer/pageViewContext.js

@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePageViewContext = usePageViewContext;
+const react_1 = require("react");
+const pageModelBuilder_1 = require("../client/pageModelBuilder");
+const use_debounce_1 = require("use-debounce");
+const contentService_1 = require("../services/contentService");
+function usePageViewContext({ pageItemDescriptor, itemsRepository, configuration, }) {
+    const [device, setDevice] = (0, react_1.useState)("desktop");
+    const [zoom, setZoom] = (0, react_1.useState)(1);
+    const [scroll, setScroll] = (0, react_1.useState)(0);
+    const [fullscreen, setFullscreen] = (0, react_1.useState)(false);
+    const editorIframeRef = (0, react_1.useRef)(null);
+    const [deviceWidth, setDeviceWidth] = (0, react_1.useState)();
+    const [deviceHeight, setDeviceHeight] = (0, react_1.useState)();
+    const [lockHeight, setLockHeight] = (0, react_1.useState)(true);
+    const [rotate, setRotate] = (0, react_1.useState)(false);
+    const [viewportRect, setViewportRect] = (0, react_1.useState)({ width: 0, height: 0 });
+    const [workaround, setWorkaround] = (0, react_1.useState)(false);
+    const [site, setSite] = (0, react_1.useState)();
+    const [resolvedPageItemDescriptor, setResolvedPageItemDescriptor] = (0, react_1.useState)();
+    const [isHeadless, setIsHeadless] = (0, react_1.useState)(false);
+    const { page, setPageSkeleton } = (0, pageModelBuilder_1.usePageModel)(itemsRepository, pageItemDescriptor);
+    (0, react_1.useEffect)(() => {
+        var deviceConfig = configuration?.devices.find((x) => x.name === device);
+        let width = deviceConfig?.width;
+        let height = deviceConfig?.height;
+        if (rotate) {
+            [width, height] = [height, width];
+        }
+        if (device) {
+            setDeviceWidth(width);
+            setDeviceHeight(lockHeight ? height : undefined);
+        }
+    }, [rotate, device, lockHeight, configuration]);
+    (0, react_1.useEffect)(() => {
+        updateViewportRect();
+    }, [fullscreen, device, deviceHeight, deviceWidth]);
+    const updateViewportRectDebounced = (0, use_debounce_1.useDebouncedCallback)(() => {
+        updateViewportRect();
+    }, 100);
+    (0, react_1.useEffect)(() => {
+        const resizeObserver = new ResizeObserver(() => {
+            updateViewportRectDebounced();
+        });
+        if (editorIframeRef.current) {
+            resizeObserver.observe(editorIframeRef.current);
+        }
+        // Cleanup function
+        return () => {
+            if (editorIframeRef.current) {
+                resizeObserver.disconnect();
+            }
+        };
+    }, [editorIframeRef.current, workaround]);
+    (0, react_1.useEffect)(() => {
+        if (!pageItemDescriptor)
+            return;
+        async function resolvePage() {
+            if (!pageItemDescriptor) {
+                setSite(undefined);
+                setResolvedPageItemDescriptor(undefined);
+                setPageSkeleton(undefined);
+                return;
+            }
+            if (!itemsRepository)
+                return;
+            const item = await itemsRepository.getItem(pageItemDescriptor);
+            if (!item?.hasLayout) {
+                setSite(undefined);
+                setResolvedPageItemDescriptor(undefined);
+                setPageSkeleton(undefined);
+                return;
+            }
+            console.log("resolve page", pageItemDescriptor.id, pageItemDescriptor.language, pageItemDescriptor.version);
+            const result = await (0, contentService_1.resolvePageAndSite)(pageItemDescriptor.id, pageItemDescriptor.language, pageItemDescriptor.version);
+            if (result) {
+                setIsHeadless(result.isHeadless);
+                setSite(result.site);
+                setResolvedPageItemDescriptor(result.pageItem);
+            }
+        }
+        resolvePage();
+    }, [pageItemDescriptor]);
+    function updateViewportRect() {
+        const rect = editorIframeRef.current?.getBoundingClientRect();
+        if (rect)
+            setViewportRect({ width: rect.width, height: rect.height });
+    }
+    const pageViewContext = {
+        device,
+        setDevice,
+        deviceWidth,
+        setDeviceWidth,
+        deviceHeight,
+        setDeviceHeight,
+        lockHeight,
+        setLockHeight,
+        scroll,
+        setScroll,
+        zoom,
+        setZoom,
+        fullscreen,
+        setFullscreen,
+        editorIframeRef,
+        rotate,
+        setRotate,
+        page,
+        setPageSkeleton,
+        viewport: viewportRect,
+        pageItemDescriptor: resolvedPageItemDescriptor,
+        setWorkaround,
+        isHeadless,
+        site,
+    };
+    return pageViewContext;
+}

package/dist/editor/pageModel.js

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

package/dist/editor/picture-shared.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRenderedPictureVariant = getRenderedPictureVariant;
+exports.getBestMatchingVariant = getBestMatchingVariant;
+function getRenderedPictureVariant(params, variants) {
+    const variantName = params.variant ?? "auto";
+    const variant = variantName.toLocaleLowerCase() === "auto" && params.aspectRatio
+        ? getBestMatchingVariant(variants, params.aspectRatio)
+        : variants.find((v) => v.name.toLowerCase() == variantName.toLowerCase()) ?? variants[0];
+    return variant;
+}
+function getBestMatchingVariant(variants, aspectRatio) {
+    if (!aspectRatio)
+        return (variants.find((v) => v.name.toLowerCase() == "default") ?? variants[0]);
+    let minDistance = 1000000;
+    let bestMatch = undefined;
+    for (let i = 0; i < variants.length; i++) {
+        const variant = variants[i];
+        if (!variant.src)
+            continue;
+        const distance = Math.abs(aspectRatio - variant.aspectRatio);
+        if (distance < minDistance) {
+            minDistance = distance;
+            bestMatch = variant;
+        }
+    }
+    return bestMatch ?? variants[0];
+}

package/dist/editor/reviews/Comment.js

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Comment = Comment;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const editContext_1 = require("../client/editContext");
+const reviewsService_1 = require("../services/reviewsService");
+const button_1 = require("primereact/button");
+const utils_1 = require("../utils");
+const SimpleIconButton_1 = require("../ui/SimpleIconButton");
+const overlaypanel_1 = require("primereact/overlaypanel");
+const progressspinner_1 = require("primereact/progressspinner");
+function Comment({ comment }) {
+    const editContext = (0, editContext_1.useEditContext)();
+    const [commentText, setCommentText] = (0, react_1.useState)(comment.text);
+    const [isEditing, setIsEditing] = (0, react_1.useState)(false);
+    const [isSaving, setIsSaving] = (0, react_1.useState)(false);
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (comment.isNew)
+            setIsEditing(true);
+    }, [comment]);
+    const isSelected = comment.id === editContext?.selectedComment?.id;
+    (0, react_1.useEffect)(() => {
+        if (isSelected) {
+            if (ref.current) {
+                ref.current.scrollIntoView({ behavior: "smooth", block: "nearest" });
+            }
+        }
+    }, [isSelected]);
+    const renderContextInfo = () => {
+        const showItemName = comment.itemId && comment.mainItemId !== comment.itemId;
+        const showFieldName = comment.fieldId;
+        if (!showItemName && !showFieldName)
+            return null;
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "mt-3 flex items-center border-t pt-3", children: [showItemName && ((0, jsx_runtime_1.jsx)("div", { className: "text-2xs text-gray-500 ", children: comment.itemName })), showFieldName && showItemName && ((0, jsx_runtime_1.jsx)("div", { className: "text-2xs text-gray-500 mx-2", children: ">" })), showFieldName && ((0, jsx_runtime_1.jsx)("div", { className: "text-2xs text-gray-500 ", children: comment.fieldName }))] }));
+    };
+    const canDelete = !comment.isNew && comment.author === editContext?.user?.name;
+    const canEdit = !comment.isNew &&
+        !comment.isResolved &&
+        comment.author === editContext?.user?.name;
+    const canResolve = !comment.isNew && !editContext?.readonly;
+    const renderHeader = () => {
+        const overlayPanelRef = (0, react_1.useRef)(null);
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-start mb-3", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-900 font-bold", title: comment.author, children: comment.authorDisplayName }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-500", children: comment.created ? (0, utils_1.formatDate)(new Date(comment.created)) : "" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-gray-500", children: [!isEditing && canEdit && ((0, jsx_runtime_1.jsx)(SimpleIconButton_1.SimpleIconButton, { icon: "pi pi-pencil", label: "Edit", onClick: () => setIsEditing(true) })), canDelete && ((0, jsx_runtime_1.jsx)(SimpleIconButton_1.SimpleIconButton, { icon: "pi pi-trash", label: "Delete", onClick: (e) => {
+                                    overlayPanelRef.current?.toggle(e);
+                                } })), (0, jsx_runtime_1.jsx)(overlaypanel_1.OverlayPanel, { ref: overlayPanelRef, children: (0, jsx_runtime_1.jsx)(button_1.Button, { className: "m-2", icon: "pi pi-trash", label: "Delete", onClick: async () => {
+                                        await (0, reviewsService_1.deleteComment)(comment);
+                                    } }) }), canResolve && !comment.isResolved && ((0, jsx_runtime_1.jsx)(SimpleIconButton_1.SimpleIconButton, { icon: "pi pi-check", label: "Resolve", onClick: async () => {
+                                    await (0, reviewsService_1.resolveComment)(comment);
+                                } })), comment.isResolved && ((0, jsx_runtime_1.jsx)("i", { className: "pi pi-check text-green-500 text-xs px-1", style: { fontWeight: "bold" }, title: "Resolved by " +
+                                    comment.resolvedBy +
+                                    " (" +
+                                    (0, utils_1.formatDate)(new Date(comment.resolvedDate)) +
+                                    ")" })), canResolve && !comment.isResolved && ((0, jsx_runtime_1.jsx)(SimpleIconButton_1.SimpleIconButton, { icon: "pi pi-sparkles", label: "AI", onClick: async (event) => {
+                                    console.log("showing ai popup", comment.text);
+                                    editContext?.showAiPopup(event, {
+                                        initialPrompt: 'Please help me resolve this comment: "' +
+                                            comment.text +
+                                            '"',
+                                        hiddenSystemPrompt: "Please make suggestions how to resolve a review comment. Ask the user whether you should apply the suggested changes.",
+                                    });
+                                } }))] })] }) }));
+    };
+    return !isEditing ? ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: `bg-white rounded-lg p-3 mb-3 shadow-sm cursor-pointer hover:bg-gray-50 border-2 ${isSelected ? " border-blue-500" : "border-transparent"}`, onClick: () => {
+            editContext?.setSelectedComment(comment);
+            editContext?.setScrollIntoView(comment.itemId);
+            editContext?.select([comment.itemId]);
+            if (comment.fieldId) {
+                editContext?.setFocusedField({
+                    fieldId: comment.fieldId,
+                    item: {
+                        id: comment.itemId,
+                        language: comment.language,
+                        version: comment.version,
+                    },
+                }, false);
+            }
+        }, children: [renderHeader(), (0, jsx_runtime_1.jsx)("div", { className: "text-gray-700 text-sm whitespace-pre-wrap", children: comment.text }), renderContextInfo()] }, comment.id)) : ((0, jsx_runtime_1.jsxs)("div", { className: "bg-white rounded-lg p-3 mb-3 shadow-sm", children: [renderHeader(), (0, jsx_runtime_1.jsx)("textarea", { className: "w-full min-h-[100px] p-2 text-sm border border-gray-200 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 mt-2", placeholder: "Add a comment...", value: commentText, onChange: async (e) => {
+                    if (!editContext)
+                        return;
+                    setCommentText(e.target.value);
+                    if (editContext?.setComments) {
+                        editContext.setComments([...editContext.comments]);
+                    }
+                }, autoFocus: true }), isSaving && ((0, jsx_runtime_1.jsx)("div", { className: "flex justify-end gap-2 mt-1", children: (0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-gray-500 flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(progressspinner_1.ProgressSpinner, { className: "w-4 h-4" }), "Saving..."] }) })), !isSaving && ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-end gap-2 mt-1", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { severity: "secondary", onClick: () => {
+                            if (comment.isNew) {
+                                if (editContext?.setComments) {
+                                    editContext.setComments([
+                                        ...editContext.comments.filter((c) => c.id !== comment.id),
+                                    ]);
+                                }
+                            }
+                            else {
+                                setIsEditing(false);
+                            }
+                        }, label: "Cancel" }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "tour-submit-comment-button", onClick: async () => {
+                            comment.text = commentText;
+                            setIsSaving(true);
+                            const item = await editContext?.itemsRepository?.getItem({
+                                id: comment.itemId,
+                                language: comment.language,
+                                version: comment.version,
+                            });
+                            if (item) {
+                                comment.fieldValue = item.fields.find((f) => f.id === comment.fieldId)?.rawValue;
+                            }
+                            await (0, reviewsService_1.createOrUpdateComment)(comment);
+                            setIsSaving(false);
+                            setIsEditing(false);
+                        }, label: comment.isNew ? "Comment" : "Save" })] })), renderContextInfo()] }, "new-comment"));
+}

package/dist/editor/reviews/Comments.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Comments = Comments;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("react");
+const editContext_1 = require("../client/editContext");
+const Comment_1 = require("./Comment");
+const SimpleToolbar_1 = require("../ui/SimpleToolbar");
+const SimpleIconButton_1 = require("../ui/SimpleIconButton");
+function Comments() {
+    const editContext = (0, editContext_1.useEditContext)();
+    const [comments, setComments] = (0, react_2.useState)([]);
+    (0, react_1.useEffect)(() => {
+        const comments = editContext?.comments || [];
+        comments.sort((a, b) => a.position - b.position);
+        setComments(comments);
+    }, [editContext]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col h-full", children: [(0, jsx_runtime_1.jsxs)(SimpleToolbar_1.SimpleToolbar, { children: [(0, jsx_runtime_1.jsx)(SimpleIconButton_1.SimpleIconButton, { id: "add-comment", icon: "pi pi-plus", label: "Add Comment", onClick: () => {
+                            editContext?.addComment();
+                        } }), (0, jsx_runtime_1.jsx)(SimpleIconButton_1.SimpleIconButton, { selected: editContext?.showComments, icon: "pi pi-eye", label: "Show Comments", onClick: () => {
+                            editContext?.setShowComments((x) => !x);
+                        } })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 overflow-auto", children: (0, jsx_runtime_1.jsx)("div", { className: "p-4 bg-gray-50 border-l border-gray-200 h-fill-available", children: comments.map((comment) => ((0, jsx_runtime_1.jsx)(Comment_1.Comment, { comment: comment }, comment.id))) }) })] }));
+}

package/dist/editor/reviews/PreviewInfo.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PreviewInfo = PreviewInfo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const client_components_1 = require("../../client-components");
+const utils_1 = require("../utils");
+function PreviewInfo() {
+    const editContext = (0, client_components_1.useEditContext)();
+    if (!editContext)
+        return null;
+    const review = editContext.reviews.reviews.find((x) => x.reviewerEmail === editContext.user?.email);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-3 items-center", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-white", children: ["Welcome to your page ", (0, jsx_runtime_1.jsx)("b", { children: "preview" }), ", ", editContext.user?.displayName, "!", (0, jsx_runtime_1.jsxs)("div", { className: "text-gray-300 text-xs", children: [editContext.contentEditorItem?.path, " ", editContext.contentEditorItem?.language, " ", editContext.contentEditorItem?.version] })] }), review?.approvalDate && ((0, jsx_runtime_1.jsx)("i", { className: "pi pi-check text-green-400 text-2xl font-bold", title: "Approved " + (0, utils_1.formatDate)(new Date(review.approvalDate)) })), review?.rejectedDate && ((0, jsx_runtime_1.jsx)("i", { className: "pi pi-times text-red-400 text-2xl font-bold", title: "Rejected " + (0, utils_1.formatDate)(new Date(review.rejectedDate)) }))] }));
+}

package/dist/editor/reviews/Reviews.js

@@ -0,0 +1,165 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Reviews = Reviews;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SimpleToolbar_1 = require("../ui/SimpleToolbar");
+const react_1 = require("react");
+const SimpleTable_1 = require("../ui/SimpleTable");
+const reviewsService_1 = require("../services/reviewsService");
+const editContext_1 = require("../client/editContext");
+const checkbox_1 = require("primereact/checkbox");
+const utils_1 = require("../utils");
+const inputtext_1 = require("primereact/inputtext");
+const overlaypanel_1 = require("primereact/overlaypanel");
+const SimpleIconButton_1 = require("../ui/SimpleIconButton");
+const button_1 = require("primereact/button");
+const react_uuid_1 = __importDefault(require("react-uuid"));
+function Reviews() {
+    const [reviewData, setReviewData] = (0, react_1.useState)([]);
+    const [newReviewer, setNewReviewer] = (0, react_1.useState)({
+        email: "",
+        name: "",
+    });
+    const overlayPanelRef = (0, react_1.useRef)(null);
+    const editContext = (0, editContext_1.useEditContext)();
+    const [showErrors, setShowErrors] = (0, react_1.useState)(false);
+    const [waiting, setWaiting] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (editContext?.reviews) {
+            setReviewData(editContext.reviews.reviews.map((x) => ({
+                review: x,
+                checked: false,
+            })));
+        }
+    }, [editContext?.reviews]);
+    // Simple email validation function
+    const isValidEmail = (email) => {
+        // This regular expression is not perfect but works for basic validation
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return emailRegex.test(email);
+    };
+    const emailAlreadyExists = (email) => {
+        return reviewData.some((x) => x.review?.reviewerEmail === email);
+    };
+    const getStatus = (reviewData) => {
+        if (reviewData?.updating) {
+            return (0, jsx_runtime_1.jsx)("i", { className: "pi pi-spinner pi-spin" });
+        }
+        if (reviewData?.error) {
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("i", { className: "pi pi-times text-red-500 " }), " ", reviewData.error] }));
+        }
+        const review = reviewData?.review;
+        if (review) {
+            if (review.approvalDate) {
+                return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-row gap-1", children: [(0, jsx_runtime_1.jsx)("i", { className: "pi pi-check text-green-500 " }), "Approved ", (0, utils_1.formatDate)(new Date(review.approvalDate))] }));
+            }
+            if (review.rejectedDate) {
+                return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-row gap-1", children: [(0, jsx_runtime_1.jsx)("i", { className: "pi pi-times text-red-500 " }), "Rejected ", (0, utils_1.formatDate)(new Date(review.rejectedDate))] }));
+            }
+            if (review.invitationSentDate) {
+                return ("Invitation Sent " + (0, utils_1.formatDate)(new Date(review.invitationSentDate)));
+            }
+        }
+        return "Not yet invited";
+    };
+    const sendInvitations = () => {
+        setShowErrors(true);
+        const invalidReviewers = reviewData.filter((x) => x.checked &&
+            (!x.review?.reviewerEmail || !isValidEmail(x.review?.reviewerEmail)));
+        if (invalidReviewers.length > 0) {
+            return;
+        }
+        reviewData.forEach(async (x) => {
+            if (!editContext?.currentItemDescriptor)
+                return;
+            if (x.checked) {
+                x.updating = true;
+                setReviewData([...reviewData]);
+                const result = await (0, reviewsService_1.inviteReviewer)(x.review);
+                if (result.response.status !== 200) {
+                    x.error = "Error inviting reviewer";
+                }
+                x.updating = false;
+                x.updating = false;
+                setReviewData([...reviewData]);
+            }
+        });
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col h-full", children: [(0, jsx_runtime_1.jsxs)(SimpleToolbar_1.SimpleToolbar, { children: [(0, jsx_runtime_1.jsx)(SimpleIconButton_1.SimpleIconButton, { label: "Add Reviewer", icon: "pi pi-plus", onClick: (x) => {
+                            overlayPanelRef.current?.toggle(x);
+                            setTimeout(() => {
+                                document.getElementById("name")?.focus();
+                            }, 100);
+                        } }), (0, jsx_runtime_1.jsx)(SimpleIconButton_1.SimpleIconButton, { label: "Send Invitations", icon: "pi pi-send", disabled: !reviewData.some((x) => x.checked), onClick: sendInvitations })] }), (0, jsx_runtime_1.jsx)(overlaypanel_1.OverlayPanel, { ref: overlayPanelRef, children: (0, jsx_runtime_1.jsx)("div", { className: "p-2 text-xs flex flex-col gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "name", children: "Name" }), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { id: "name", className: "w-full", value: newReviewer?.name, onChange: (e) => {
+                                    setNewReviewer((x) => ({
+                                        ...x,
+                                        name: e.target.value,
+                                    }));
+                                }, autoFocus: true }), showErrors && !newReviewer?.name && ((0, jsx_runtime_1.jsx)("small", { style: { color: "red" }, children: "Name is required" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "email", children: "Email" }), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { id: "email", className: "w-full", value: newReviewer?.email, onChange: (e) => {
+                                            setNewReviewer((x) => ({
+                                                ...x,
+                                                email: e.target.value,
+                                            }));
+                                        } }), showErrors && !isValidEmail(newReviewer.email) && ((0, jsx_runtime_1.jsx)("small", { style: { color: "red" }, children: "Not a valid email address" })), showErrors && emailAlreadyExists(newReviewer.email) && ((0, jsx_runtime_1.jsx)("small", { style: { color: "red" }, children: "Email already exists" }))] }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Add Reviewer", disabled: waiting, icon: "pi pi-plus", onClick: async () => {
+                                    if (!editContext?.contentEditorItem)
+                                        return;
+                                    setShowErrors(true);
+                                    if (emailAlreadyExists(newReviewer.email)) {
+                                        return;
+                                    }
+                                    if (!isValidEmail(newReviewer.email) || !newReviewer.name) {
+                                        return;
+                                    }
+                                    setWaiting(true);
+                                    await (0, reviewsService_1.addReview)({
+                                        id: (0, react_uuid_1.default)(),
+                                        reviewerName: newReviewer.name,
+                                        reviewerEmail: newReviewer.email,
+                                        itemId: editContext.contentEditorItem.id,
+                                        language: editContext.contentEditorItem.language,
+                                        version: editContext.contentEditorItem.version,
+                                    });
+                                    editContext.reviews.loadReviews();
+                                    overlayPanelRef.current?.hide();
+                                    setNewReviewer({
+                                        email: "",
+                                        name: "",
+                                    });
+                                    setWaiting(false);
+                                } })] }) }) }), (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)(SimpleTable_1.SimpleTable, { columns: [
+                            {
+                                header: ((0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: reviewData.every((x) => x.checked), onChange: (e) => {
+                                        setReviewData((reviews) => reviews.map((x) => ({
+                                            ...x,
+                                            checked: e.checked ?? false,
+                                        })));
+                                    } })),
+                                body: (x) => ((0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: x.checked, onChange: (e) => {
+                                        setReviewData((reviews) => {
+                                            // It’s safer to update by index or assign an id to each reviewer.
+                                            // For brevity, we’re using the email to locate the reviewer.
+                                            const index = reviews.findIndex((y) => y.review?.reviewerEmail === x.review?.reviewerEmail);
+                                            if (index !== -1) {
+                                                reviews[index].checked = e.checked ?? false;
+                                            }
+                                            return [...reviews];
+                                        });
+                                    } })),
+                            },
+                            {
+                                header: "Name",
+                                body: (x) => x.review?.reviewerName,
+                            },
+                            {
+                                header: "Email",
+                                body: (x) => x.review?.reviewerEmail,
+                            },
+                            {
+                                header: "Status",
+                                body: (z) => getStatus(z),
+                            },
+                        ], items: reviewData }) }) })] }));
+}

package/dist/editor/reviews/reviewCommands.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rejectReviewCommand = exports.approveReviewCommand = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const reviewsService_1 = require("../services/reviewsService");
+exports.approveReviewCommand = {
+    id: "approveReview",
+    label: "Approve Page",
+    icon: (0, jsx_runtime_1.jsx)("i", { className: "pi pi-check text-green-500 mr-3" }),
+    execute: async (context) => {
+        if (!context.editContext.currentItemDescriptor) {
+            return;
+        }
+        await (0, reviewsService_1.approveReview)(context.editContext.currentItemDescriptor);
+        context.editContext.showToast({
+            summary: "Page/item approved",
+            severity: "success",
+        });
+    },
+    disabled: (context) => {
+        return !isReviewer(context);
+    },
+};
+exports.rejectReviewCommand = {
+    id: "rejectReview",
+    label: "Reject Page",
+    icon: (0, jsx_runtime_1.jsx)("i", { className: "pi pi-times text-red-500 mr-3" }),
+    execute: async (context) => {
+        if (!context.editContext.currentItemDescriptor) {
+            return;
+        }
+        await (0, reviewsService_1.rejectReview)(context.editContext.currentItemDescriptor);
+        context.editContext.showToast({
+            summary: "Page/item rejected",
+            severity: "error",
+        });
+    },
+    disabled: (context) => {
+        return !isReviewer(context);
+    },
+};
+function isReviewer(context) {
+    return (context.editContext.reviews.reviews.find((x) => x.reviewerEmail === context.editContext.user?.email) !== undefined);
+}

package/dist/editor/reviews/useReviews.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useReviews = useReviews;
+const react_1 = require("react");
+const reviewsService_1 = require("../services/reviewsService");
+const react_uuid_1 = __importDefault(require("react-uuid"));
+function useReviews({ currentItemDescriptor, addSocketMessageListener, }) {
+    const [reviews, setReviews] = (0, react_1.useState)([]);
+    const loadReviews = async () => {
+        if (!currentItemDescriptor)
+            return;
+        const reviewers = await (0, reviewsService_1.getReviewers)(currentItemDescriptor.id, currentItemDescriptor.language);
+        const reviewsResult = await (0, reviewsService_1.getReviews)(currentItemDescriptor.id, currentItemDescriptor.language, currentItemDescriptor.version);
+        const reviews = reviewsResult.data;
+        if (!reviews)
+            return;
+        reviewers.data?.forEach((reviewer) => {
+            if (!currentItemDescriptor)
+                return;
+            const existingReview = reviews.find((r) => r.reviewerEmail === reviewer.email);
+            if (!existingReview) {
+                reviews.push({
+                    id: (0, react_uuid_1.default)(),
+                    itemId: currentItemDescriptor.id,
+                    language: currentItemDescriptor.language,
+                    version: currentItemDescriptor.version,
+                    reviewerName: reviewer.name,
+                    reviewerEmail: reviewer.email,
+                });
+            }
+        });
+        setReviews(reviews);
+    };
+    (0, react_1.useEffect)(() => {
+        loadReviews();
+    }, [currentItemDescriptor]);
+    (0, react_1.useEffect)(() => {
+        return addSocketMessageListener((message) => {
+            if (message.type === "reviews-updated") {
+                loadReviews();
+            }
+        });
+    }, [currentItemDescriptor]);
+    return (0, react_1.useMemo)(() => ({ reviews, loadReviews }), [reviews]);
+}