@alpaca-headless/alpaca-headless-nextjs 1.0.128 → 1.0.246

package/dist/esm/editor/EditorClientHost.js

@@ -0,0 +1,15 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import dynamic from "next/dynamic";
+import { configuration } from "./config/config";
+const EditorClient = dynamic(() => import("./EditorClient").then((dnd) => dnd.EditorClient), { ssr: false });
+export function EditorClientHost({ content, dictionaryObject, children, edit, clientBuilder, }) {
+    const ClientBuilder = clientBuilder;
+    const buildClient = (configuration) => {
+        return (_jsx(EditorClient, { page: content, dictionaryObject: dictionaryObject, editData: edit, configuration: configuration, children: _jsx(_Fragment, { children: children }) }));
+    };
+    if (!ClientBuilder)
+        return buildClient(configuration);
+    else
+        return (_jsx(ClientBuilder, { configuration: configuration, buildClient: buildClient }));
+}

package/dist/esm/editor/EditorWarning.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "primereact/utils";
+export function EditorWarning({ title, severity = "warning", children, }) {
+    const background = severity === "info"
+        ? "a-bg-blue-100"
+        : severity === "error"
+            ? "a-bg-red-100"
+            : "a-bg-yellow-100";
+    return (_jsxs("div", { className: classNames(background, "a-p-2 a-text-sm a-text-gray-500 a-border-b a-border-yellow-300"), children: [_jsx("div", { className: "a-font-bold", children: title }), _jsx("div", { className: "a-text-xs", children: children })] }));
+}

package/dist/esm/editor/EditorWarnings.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { useEditContext } from "./editContext";
+export function EditorWarnings({ item: Item, }) {
+    var context = useEditContext();
+    if (!context)
+        return;
+    return (_jsx("div", { children: context.configuration.editorWarnings.map((x, i) => React.createElement(x, {
+            item: Item,
+            key: "warning" + i,
+            editContext: context,
+        })) }));
+}

package/dist/esm/editor/FieldEditorPopup.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { OverlayPanel } from "primereact/overlaypanel";
+import { forwardRef, useImperativeHandle, useRef, useState, } from "react";
+import { FieldList } from "./FieldList";
+export const FieldEditorPopup = forwardRef((_, ref) => {
+    const overlayRef = useRef(null);
+    const [fields, setFields] = useState();
+    const [sections, setSections] = useState([]);
+    useImperativeHandle(ref, () => ({
+        show: (fields, sections, ev) => {
+            var _a;
+            setFields(fields);
+            setSections(sections);
+            (_a = overlayRef.current) === null || _a === void 0 ? void 0 : _a.toggle(ev);
+        },
+        close: () => {
+            var _a;
+            (_a = overlayRef.current) === null || _a === void 0 ? void 0 : _a.hide();
+        },
+    }));
+    return (_jsx(OverlayPanel, { ref: overlayRef, children: _jsxs("div", { className: "a-w-96 a-h-96 a-flex a-flex-col a-gap-2 a-overflow-auto", onClick: (ev) => ev.stopPropagation(), children: [_jsx("div", { className: "a-flex a-justify-end", children: _jsx("i", { className: "pi pi-times a-cursor-pointer", onClick: () => { var _a; return (_a = overlayRef === null || overlayRef === void 0 ? void 0 : overlayRef.current) === null || _a === void 0 ? void 0 : _a.hide(); } }) }), fields && (_jsx(FieldList, { fields: fields, sections: sections, validators: [] }))] }) }));
+});

package/dist/esm/editor/FieldList.js

@@ -0,0 +1,48 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import FieldListField from "./FieldListField";
+import { Section } from "./ui/Section";
+import { useEditContext } from "./editContext";
+export function FieldList({ fields, sections, validators, filter, simplified, }) {
+    const editContext = useEditContext();
+    const [liveFields, setLiveFields] = useState();
+    if (!editContext)
+        return;
+    if (!fields)
+        return;
+    let fieldsArray = Array.isArray(fields)
+        ? fields
+        : Object.values(fields);
+    if (filter)
+        fieldsArray = fieldsArray.filter(filter);
+    useEffect(() => {
+        if (!editContext)
+            return;
+        setLiveFields(fieldsArray.map((x) => x._editor.type === "rich text" || x._editor.type === "text"
+            ? editContext.getLiveField(x)
+            : x));
+    }, [fields]);
+    if (!liveFields)
+        return _jsx(_Fragment, {});
+    const sectionsGrouping = liveFields.reduce((acc, value) => {
+        var _a, _b, _c;
+        // Group initialization
+        if (!acc[((_a = value._editor) === null || _a === void 0 ? void 0 : _a.section) || "Default"]) {
+            acc[((_b = value._editor) === null || _b === void 0 ? void 0 : _b.section) || "Default"] = [];
+        }
+        // Grouping
+        acc[((_c = value._editor) === null || _c === void 0 ? void 0 : _c.section) || "Default"].push(value);
+        return acc;
+    }, {});
+    const sectionList = Object.values(sectionsGrouping);
+    sectionList.sort((a, b) => a[0]._editor.sectionSortOrder - b[0]._editor.sectionSortOrder);
+    function getSectionFields(fields) {
+        fields.sort((a, b) => a.sortOrder - b.sortOrder);
+        return fields.map((field) => (_jsx(FieldListField, { field: field, simplified: simplified, validators: validators.filter((x) => x.fieldId === field.id) }, field.id)));
+    }
+    return (_jsx("div", { className: "a-h-fill-available", children: sectionList
+            .map((x) => { var _a; return (_a = x[0]._editor) === null || _a === void 0 ? void 0 : _a.section; })
+            .filter((x) => !sections || sections.includes(x))
+            .map((section) => simplified ? (getSectionFields(sectionsGrouping[section])) : (_jsx(Section, { title: section, children: getSectionFields(sectionsGrouping[section]) }, section))) }));
+}

package/dist/esm/editor/FieldListField.js

@@ -0,0 +1,137 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Tooltip } from "primereact/tooltip";
+import { useEditContext } from ".";
+import { useEffect, useRef, useState } from "react";
+import { WizardIcon } from "./ui/Icons";
+import { OverlayPanel } from "primereact/overlaypanel";
+import { loadFallbackChain } from "./services/editService";
+export default function FieldListField({ field, validators, simplified, title, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const editContext = useEditContext();
+    if (!editContext)
+        return;
+    const ref = useRef(null);
+    const fieldItem = field._editor.descriptor.item;
+    const isFocusedField = ((_a = editContext === null || editContext === void 0 ? void 0 : editContext.focusedField) === null || _a === void 0 ? void 0 : _a.fieldId) === field.id &&
+        editContext.focusedField.item.id === fieldItem.id &&
+        editContext.focusedField.item.language === fieldItem.language;
+    const [showRawValue, setShowRawValue] = useState(false);
+    const generatorsOverlay = useRef(null);
+    const [fallbackChain, setFallbackChain] = useState();
+    const [showFallback, setShowFallback] = useState(false);
+    useEffect(() => {
+        var _a;
+        if (ref.current && isFocusedField) {
+            ref.current.scrollIntoView({
+                behavior: "smooth",
+                block: "center",
+                inline: "center",
+            });
+            if ((_a = liveField._editor) === null || _a === void 0 ? void 0 : _a.isFallback) {
+                loadFallback();
+            }
+        }
+    }, [editContext.focusedField]);
+    function loadFallback() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const chain = yield loadFallbackChain(field._editor.descriptor);
+            const liveChain = chain.map((x) => editContext.getLiveField(x));
+            setFallbackChain(liveChain);
+        });
+    }
+    useEffect(() => {
+        if (ref.current && isFocusedField) {
+            ref.current.scrollIntoView({
+                behavior: "smooth",
+                block: "center",
+                inline: "center",
+            });
+        }
+    }, [editContext.focusedField]);
+    const liveField = editContext.getLiveField(field);
+    useEffect(() => {
+        var _a;
+        if ((_a = liveField._editor) === null || _a === void 0 ? void 0 : _a.isFallback) {
+            editContext.requestRefresh("waitForQuietPeriod");
+        }
+    }, [fallbackChain === null || fallbackChain === void 0 ? void 0 : fallbackChain.map((x) => x.value).join("")]);
+    function editButtonClicked(x) {
+        return __awaiter(this, void 0, void 0, function* () {
+            editContext === null || editContext === void 0 ? void 0 : editContext.triggerFieldAction(field, x);
+        });
+    }
+    let classNames = "[&:not(:first-child)]:a-mt-5 a-flex a-items-stretch";
+    if (isFocusedField)
+        classNames += " a-focused-field ";
+    let validationBarClassNames = undefined;
+    if (validators.find((x) => x.result > 1))
+        validationBarClassNames = " a-pl-2 a-border-l-4 a-border-red-500";
+    const executingAction = editContext.activeFieldActions.find((x) => {
+        var _a, _b, _c, _d, _e, _f;
+        return x.field.id == field.id &&
+            ((_b = (_a = x.field._editor) === null || _a === void 0 ? void 0 : _a.descriptor.item) === null || _b === void 0 ? void 0 : _b.id) == fieldItem.id &&
+            ((_d = (_c = x.field._editor) === null || _c === void 0 ? void 0 : _c.descriptor.item) === null || _d === void 0 ? void 0 : _d.language) == fieldItem.language &&
+            ((_f = (_e = x.field._editor) === null || _e === void 0 ? void 0 : _e.descriptor.item) === null || _f === void 0 ? void 0 : _f.version) == fieldItem.version;
+    });
+    if ((executingAction === null || executingAction === void 0 ? void 0 : executingAction.state) == "running")
+        classNames += " a-executing-action ";
+    const isLocked = (((_b = liveField._editor) === null || _b === void 0 ? void 0 : _b.lockedBy) &&
+        ((_d = (_c = liveField._editor) === null || _c === void 0 ? void 0 : _c.lockedBy) === null || _d === void 0 ? void 0 : _d.sessionId) != editContext.sessionId) ||
+        false;
+    const isReadOnly = !((_e = field._editor) === null || _e === void 0 ? void 0 : _e.canWrite) || isLocked;
+    const renderButtons = () => {
+        var _a, _b, _c, _d;
+        if (((_b = (_a = field._editor) === null || _a === void 0 ? void 0 : _a.buttons) === null || _b === void 0 ? void 0 : _b.length) || 0 > 0)
+            return (_jsxs(_Fragment, { children: [(!executingAction || executingAction.state !== "running") && (_jsx("div", { className: "a-w-4 a-h-4 a-ml-auto a-cursor-pointer", onClick: (e) => {
+                            var _a;
+                            (_a = generatorsOverlay.current) === null || _a === void 0 ? void 0 : _a.toggle(e);
+                            e.preventDefault();
+                            e.stopPropagation();
+                        }, children: _jsx(WizardIcon, {}) })), executingAction && executingAction.state === "running" && (_jsxs("div", { className: "a-ml-auto a-text-xs", children: [_jsx("i", { className: "pi pi-spin pi-spinner a-text-xs a-flex a-items-center" }), " ", executingAction === null || executingAction === void 0 ? void 0 : executingAction.actionButton.label] })), _jsx(OverlayPanel, { ref: generatorsOverlay, className: "a-p-1", children: (_d = (_c = field._editor) === null || _c === void 0 ? void 0 : _c.buttons) === null || _d === void 0 ? void 0 : _d.map((x) => (_jsxs("button", { className: "a-text-xs a-p-1 a-block hover:a-text-gray-400", onClick: () => {
+                                var _a;
+                                editButtonClicked(x);
+                                (_a = generatorsOverlay.current) === null || _a === void 0 ? void 0 : _a.hide();
+                            }, children: [x.icon && _jsx("i", { className: x.icon + " a-mr-2 a-text-xs" }), x.label] }, x.id))) })] }));
+        return null;
+    };
+    return (_jsxs("div", { ref: ref, className: classNames, onClick: () => {
+            var _a;
+            editContext.setFocusedField((_a = field._editor) === null || _a === void 0 ? void 0 : _a.descriptor, true);
+        }, children: [validationBarClassNames && (_jsxs(_Fragment, { children: [_jsx("div", { className: validationBarClassNames, id: "validation_" + field.id }), _jsx(Tooltip, { target: "#validation_" + field.id, children: validators
+                            .filter((x) => x.result > 1)
+                            .map((x) => (_jsx("div", { children: x.message }, x.validator))) })] })), _jsxs("div", { className: "a-flex-1", children: [_jsxs("div", { className: "a-flex a-justify-between", children: [_jsx("label", { className: "a-font-bold a-block a-mb-1 a-text-sm", children: title || ((_f = field._editor) === null || _f === void 0 ? void 0 : _f.name) }), _jsxs("div", { className: "a-flex a-gap-2", children: [renderButtons(), isLocked && (_jsxs("div", { className: "a-text-xs a-bg-pink-400 a-text-white a-p-1", children: ["locked by ", (_h = (_g = liveField._editor) === null || _g === void 0 ? void 0 : _g.lockedBy) === null || _h === void 0 ? void 0 : _h.user.name] }))] })] }), isFocusedField && (_jsxs("div", { className: "a-flex a-gap-3 a-gap-y-1 a-flex-wrap", children: [!((_j = field._editor) === null || _j === void 0 ? void 0 : _j.isFallback) &&
+                                ((_k = liveField._editor) === null || _k === void 0 ? void 0 : _k.rawValue) !== null ? (_jsxs("button", { className: "a-text-xs a-p-0 ", onClick: () => {
+                                    editContext === null || editContext === void 0 ? void 0 : editContext.editField({ field: field, rawValue: null });
+                                }, children: ["Reset", " "] })) : (_jsxs("button", { className: "a-text-xs a-p-0", onClick: () => setShowFallback(!showFallback), children: [_jsx("i", { className: "a-text-xs pi " +
+                                            (showFallback ? "pi-check-square" : "pi-stop") }), " ", "Fallback"] })), !simplified && (_jsxs("button", { className: "a-text-xs a-p-0", onClick: () => {
+                                    setShowRawValue(!showRawValue);
+                                }, children: [_jsx("i", { className: "a-text-xs pi " +
+                                            (showRawValue ? "pi-check-square" : "pi-stop") }), " ", "Raw"] }))] })), (executingAction === null || executingAction === void 0 ? void 0 : executingAction.message) && (_jsx("div", { className: "a-text-xs a-p-0 a-mt-1 a-mb-1", children: executingAction === null || executingAction === void 0 ? void 0 : executingAction.message })), _jsx("div", { className: "a-text-xs a-p-0 a-mt-1", children: getFieldEditor(liveField, showRawValue, isReadOnly, editContext.configuration) }), liveField._editor.isFallback && isFocusedField && showFallback && (_jsxs("div", { children: [_jsx("div", { className: "a-text-center a-relative a-top-3.5", children: _jsx("i", { className: "pi pi-arrow-up a-text-xl a-font-bold  a-text-blue-300 a-fallback-arrow-animation" }) }), fallbackChain &&
+                                fallbackChain.map((x, i) => {
+                                    var _a, _b;
+                                    return (_jsx("div", { className: "a-ml-3", children: _jsx(FieldListField, { field: x, validators: validators, simplified: true, title: _jsxs("div", { className: "a-text-xs", children: [(_a = x._editor) === null || _a === void 0 ? void 0 : _a.name, " (", x._editor.descriptor.item.language, ")", x._editor.descriptor.item.id !=
+                                                        ((_b = liveField._editor) === null || _b === void 0 ? void 0 : _b.descriptor.item.id) && (_jsxs("span", { className: "a-text-gray-400", children: ["- Item: ", x._editor.descriptor.item.id] }))] }) }, i) }));
+                                })] }))] })] }, field.id +
+        "_" +
+        fieldItem.id +
+        "_" +
+        fieldItem.language +
+        "_" +
+        fieldItem.version));
+}
+function getFieldEditor(field, showRawValue, isReadOnly, configuration) {
+    let fieldType = showRawValue ? "raw" : field._editor.type;
+    var typeConfig = configuration.fieldTypes[fieldType];
+    if (!typeConfig)
+        typeConfig = configuration.fieldTypes["single-line text"];
+    return _jsx(typeConfig.editor, { field: field, readOnly: isReadOnly });
+}

package/dist/{cjs → esm}/editor/FloatingToolbar.js

@@ -1,19 +1,17 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-function FloatingToolbar({ children, onPin, height, width, }) {
-    const [position, setPosition] = (0, react_1.useState)({ x: 0, y: 95 });
-    const [size, setSize] = (0, react_1.useState)({ width: 400, height: 70 });
-    const [dragging, setDragging] = (0, react_1.useState)(false);
-    const [resizing, setResizing] = (0, react_1.useState)(false);
-    const [offset, setOffset] = (0, react_1.useState)({ x: 0, y: 0 });
-    const [hidden, setHidden] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+export default function FloatingToolbar({ children, onPin, height, width, }) {
+    const [position, setPosition] = useState({ x: 0, y: 95 });
+    const [size, setSize] = useState({ width: 400, height: 70 });
+    const [dragging, setDragging] = useState(false);
+    const [resizing, setResizing] = useState(false);
+    const [offset, setOffset] = useState({ x: 0, y: 0 });
+    const [hidden, setHidden] = useState(false);
+    useEffect(() => {
         console.log("WIDTH: ", width, "Height: ", height);
         setSize({ width: width || 400, height: height || 70 });
     }, []);
-    const handleMouseDown = (0, react_1.useCallback)((e) => {
+    const handleMouseDown = useCallback((e) => {
         // Start dragging and calculate the offset from the mouse to the sidebar top-left corner
         setDragging(true);
         setOffset({
@@ -21,7 +19,7 @@ function FloatingToolbar({ children, onPin, height, width, }) {
             y: e.clientY - position.y,
         });
     }, [position]);
-    const handleMouseMove = (0, react_1.useCallback)((e) => {
+    const handleMouseMove = useCallback((e) => {
         if (dragging) {
             // Update the position state based on mouse movement, adjusted by the initial offset
             setPosition({
@@ -30,11 +28,11 @@ function FloatingToolbar({ children, onPin, height, width, }) {
             });
         }
     }, [dragging, offset]);
-    const handleMouseUp = (0, react_1.useCallback)(() => {
+    const handleMouseUp = useCallback(() => {
         // Stop dragging
         setDragging(false);
     }, []);
-    const handleResizeMouseDown = (0, react_1.useCallback)((e) => {
+    const handleResizeMouseDown = useCallback((e) => {
         e.preventDefault();
         setResizing(true);
         setOffset({
@@ -42,7 +40,7 @@ function FloatingToolbar({ children, onPin, height, width, }) {
             y: e.clientY,
         });
     }, []);
-    const handleResizeMouseMove = (0, react_1.useCallback)((e) => {
+    const handleResizeMouseMove = useCallback((e) => {
         if (resizing) {
             const newWidth = size.width + (e.clientX - offset.x);
             const newHeight = size.height + (e.clientY - offset.y);
@@ -56,10 +54,10 @@ function FloatingToolbar({ children, onPin, height, width, }) {
             });
         }
     }, [resizing, offset, size]);
-    const handleResizeMouseUp = (0, react_1.useCallback)(() => {
+    const handleResizeMouseUp = useCallback(() => {
         setResizing(false);
     }, []);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (resizing) {
             document.addEventListener("mousemove", handleResizeMouseMove);
             document.addEventListener("mouseup", handleResizeMouseUp);
@@ -70,7 +68,7 @@ function FloatingToolbar({ children, onPin, height, width, }) {
         };
     }, [resizing, handleResizeMouseMove, handleResizeMouseUp]);
     // Add event listeners to the document when the sidebar is being dragged
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (dragging) {
             document.addEventListener("mousemove", handleMouseMove);
             document.addEventListener("mouseup", handleMouseUp);
@@ -81,12 +79,11 @@ function FloatingToolbar({ children, onPin, height, width, }) {
             document.removeEventListener("mouseup", handleMouseUp);
         };
     }, [dragging, handleMouseMove, handleMouseUp]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "a-border a-border-gray-200 a-drop-shadow a-z-10 a-flex a-flex-col", onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, style: {
+    return (_jsxs("div", { className: "a-border a-border-gray-200 a-drop-shadow a-z-10 a-flex a-flex-col", onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, style: {
             left: `${position.x}px`,
             top: `${position.y}px`,
             position: "absolute", // Use 'fixed' or 'absolute' depending on your layout needs
             height: `${hidden ? 30 : size.height}px`,
             width: `${size.width}px`,
-        }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "a-bg-gray-100 a-w-full a-flex a-justify-between a-items-between a-p-2 a-text-sm", style: { cursor: "move", userSelect: "none" }, onMouseDown: handleMouseDown, children: ["Toolbar", (0, jsx_runtime_1.jsxs)("div", { className: "a-flex a-gap-2", children: [hidden && ((0, jsx_runtime_1.jsx)("div", { className: "a-border-2 a-border-gray-800 a-w-4 a-h-4 a-cusor-pointer", onClick: () => setHidden(false) })), !hidden && ((0, jsx_runtime_1.jsx)("div", { className: "a-border-b-2 a-border-gray-800 a-w-4 a-h-4 a-cusor-pointer", onClick: () => setHidden(true) })), onPin && ((0, jsx_runtime_1.jsx)("i", { className: "pi pi-arrow-down-left a-cursor-pointer", onClick: onPin }))] })] }), (0, jsx_runtime_1.jsx)("div", { className: "a-flex-1", children: !hidden && children }), (0, jsx_runtime_1.jsx)("div", { className: "a-h-4 a-bg-gray-100" }), (0, jsx_runtime_1.jsx)("div", { className: "a-cursor-nwse-resize a-w-4 a-h-4 a-absolute -a-bottom-1 -a-right-2 a-text-gray-500", onMouseDown: handleResizeMouseDown, children: (0, jsx_runtime_1.jsx)("i", { className: "pi pi-sort-down -a-rotate-45 a-w-4 a-h-4" }) })] }));
+        }, children: [_jsxs("div", { className: "a-bg-gray-100 a-w-full a-flex a-justify-between a-items-between a-p-2 a-text-sm", style: { cursor: "move", userSelect: "none" }, onMouseDown: handleMouseDown, children: ["Toolbar", _jsxs("div", { className: "a-flex a-gap-2", children: [hidden && (_jsx("div", { className: "a-border-2 a-border-gray-800 a-w-4 a-h-4 a-cusor-pointer", onClick: () => setHidden(false) })), !hidden && (_jsx("div", { className: "a-border-b-2 a-border-gray-800 a-w-4 a-h-4 a-cusor-pointer", onClick: () => setHidden(true) })), onPin && (_jsx("i", { className: "pi pi-arrow-down-left a-cursor-pointer", onClick: onPin }))] })] }), _jsx("div", { className: "a-flex-1", children: !hidden && children }), _jsx("div", { className: "a-h-4 a-bg-gray-100" }), _jsx("div", { className: "a-cursor-nwse-resize a-w-4 a-h-4 a-absolute -a-bottom-1 -a-right-2 a-text-gray-500", onMouseDown: handleResizeMouseDown, children: _jsx("i", { className: "pi pi-sort-down -a-rotate-45 a-w-4 a-h-4" }) })] }));
 }
-exports.default = FloatingToolbar;

package/dist/esm/editor/ItemInfo.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { CopyToClipboardButton } from "./ui/CopyToClipboardButton";
+import { Section } from "./ui/Section";
+export function ItemInfo({ item }) {
+    var _a, _b, _c, _d, _e;
+    if (!(item === null || item === void 0 ? void 0 : item.fields))
+        return;
+    function formatRow(label, value) {
+        return (_jsxs(_Fragment, { children: [_jsx("div", { className: "a-font-bold", children: label }), _jsx("div", { children: value })] }));
+    }
+    return (_jsxs("div", { children: [_jsx("h2", { className: "a-py-3 a-px-3 a-text-l a-font-bold a-my-2", children: item.name }), _jsx(Section, { title: "Info", children: _jsxs("div", { className: "a-grid a-grid-cols-[min-content_1fr] a-gap-3 a-text-xs", children: [_jsx("div", { className: "a-font-bold", children: "ID:" }), _jsxs("div", { children: [item.id, " ", _jsx(CopyToClipboardButton, { text: item.id })] }), _jsx("div", { className: "a-font-bold", children: "Path:" }), _jsx("div", { children: (_a = item._editor) === null || _a === void 0 ? void 0 : _a.path }), _jsx("div", { className: "a-font-bold", children: "Language:" }), _jsx("div", { children: item.language }), _jsx("div", { className: "a-font-bold", children: "Version:" }), _jsx("div", { children: item.version }), _jsx("div", { className: "a-font-bold", children: "Template:" }), _jsxs("div", { children: [item.templateName, " (", item.templateId, " ", _jsx(CopyToClipboardButton, { text: item.templateId }), ")"] }), ((_b = item._editor) === null || _b === void 0 ? void 0 : _b.masterLanguages) &&
+                            formatRow("Master languages", (_c = item._editor) === null || _c === void 0 ? void 0 : _c.masterLanguages.join(", ")), ((_d = item._editor) === null || _d === void 0 ? void 0 : _d.translations) && (_jsxs("div", { className: "a-text-xs", children: ["Languages: ", (_e = item._editor.translations) === null || _e === void 0 ? void 0 : _e.join(", ")] }))] }) })] }));
+}

package/dist/esm/editor/ItemNameDialog.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog } from "primereact/dialog";
+import { InputText } from "primereact/inputtext";
+import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+import DialogButtons from "./DialogButtons";
+import { Button } from "primereact/button";
+const ItemNameDialog = forwardRef((_props, ref) => {
+    const [visible, setVisible] = useState(false);
+    const [props, setProps] = useState();
+    const [name, setName] = useState("");
+    useEffect(() => {
+        setName((props === null || props === void 0 ? void 0 : props.name) || "");
+    }, [props]);
+    useImperativeHandle(ref, () => ({
+        show: (props) => {
+            setVisible(true);
+            setProps(props);
+        },
+    }));
+    const isValidName = name.trim().length > 0;
+    const handleOk = () => {
+        setVisible(false);
+        props === null || props === void 0 ? void 0 : props.accept(name);
+    };
+    return (_jsxs(Dialog, { visible: visible, onHide: () => {
+            setVisible(false);
+        }, header: "Choose item name", children: [_jsx("div", { className: "a-pt-3", children: _jsx(InputText, { autoFocus: true, value: name, onChange: (e) => setName(e.target.value), onKeyDown: (ev) => {
+                        if (ev.key === "Enter" && isValidName)
+                            handleOk();
+                    } }) }), _jsxs(DialogButtons, { children: [_jsx(Button, { onClick: handleOk, label: "Ok", disabled: !isValidName }), _jsx(Button, { onClick: () => setVisible(false), label: "Cancel" })] })] }));
+});
+export default ItemNameDialog;

package/dist/esm/editor/LinkEditorDialog.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog } from "primereact/dialog";
+import { TabPanel, TabView } from "primereact/tabview";
+import ContentTree from "./ContentTree";
+import { InputText } from "primereact/inputtext";
+import { useEffect, useState } from "react";
+import { Dropdown } from "primereact/dropdown";
+import { Divider } from "primereact/divider";
+import { Button } from "primereact/button";
+export function LinkEditorDialog({ linkValue, onCancel, onOk, }) {
+    const [url, setUrl] = useState();
+    const [targetWindow, setTargetWindow] = useState();
+    const [customTarget, setCustomTarget] = useState();
+    const [queryString, setQueryString] = useState();
+    const [activeTabIndex, setActiveTabIndex] = useState();
+    const [selectedItemId, setSelectedItemId] = useState("");
+    useEffect(() => {
+        setUrl(linkValue.url);
+        setTargetWindow(linkValue.target);
+        if (linkValue.type == "external")
+            setActiveTabIndex(1);
+        else
+            setActiveTabIndex(0);
+        if (linkValue.target && linkValue.target != "_blank") {
+            setTargetWindow("custom");
+            setCustomTarget(linkValue.target);
+        }
+        if (linkValue.itemId)
+            setSelectedItemId(linkValue.itemId);
+        if (linkValue.queryString)
+            setQueryString(linkValue.queryString);
+    }, [linkValue]);
+    const targetWindows = [
+        { name: "Active browser", code: "" },
+        { name: "New browser", code: "_blank" },
+        { name: "Custom", code: "custom" },
+    ];
+    function getTargetWindow() {
+        if (targetWindow == "custom")
+            return customTarget;
+        return targetWindow;
+    }
+    return (_jsx(Dialog, { style: { width: "50%", height: "50%" }, onHide: onCancel, header: "Select link target", visible: true, children: _jsxs("div", { className: "a-flex a-flex-col a-h-full", children: [_jsxs(TabView, { onTabChange: (e) => setActiveTabIndex(e.index), activeIndex: activeTabIndex, className: "a-flex-1 a-mb-3", pt: { panelContainer: { className: "a-h-full" } }, children: [_jsx(TabPanel, { header: "Internal", className: "a-relative a-h-[calc(100%-25px)] a-p-0 ", children: _jsx("div", { className: "a-overflow-auto a-absolute a-inset-0", children: _jsx(ContentTree, { className: "a-h-full", expandIdPath: linkValue.targetItemLongId ||
+                                        "0DE95AE4-41AB-4D01-9EB0-67441B7C2450", selectedItemIds: [selectedItemId], selectionMode: "single", rootItemId: "0DE95AE4-41AB-4D01-9EB0-67441B7C2450", onSelectionChange: (selection) => {
+                                        setSelectedItemId(selection.id);
+                                    } }) }) }), _jsxs(TabPanel, { header: "External", children: [_jsx("label", { className: "a-block a-text-sm", children: "Url:" }), _jsx(InputText, { value: url || "", onChange: (e) => {
+                                        setUrl(e.target.value);
+                                    }, className: "a-w-full a-text-sm" })] })] }), _jsx(Divider, {}), _jsx("label", { className: "a-text-sm", children: "QueryString" }), _jsx(InputText, { value: queryString, onChange: (e) => setQueryString(e.target.value), className: "a-text-sm" }), _jsx("label", { className: "a-text-sm", children: "Window" }), _jsx(Dropdown, { options: targetWindows, optionLabel: "name", optionValue: "code", value: targetWindow, onChange: (e) => setTargetWindow(e.value), className: "a-text-sm" }), targetWindow === "custom" && (_jsxs("div", { className: "a-m-2", children: [_jsx("label", { className: "a-block a-text-sm", children: "Custom:" }), _jsx(InputText, { value: customTarget || "", onChange: (e) => {
+                                setCustomTarget(e.target.value);
+                            }, className: "a-text-sm" })] })), _jsx(Divider, {}), _jsxs("div", { className: "a-flex a-justify-end a-gap-3 a-mt-3", children: [_jsx(Button, { onClick: () => {
+                                console.log(activeTabIndex);
+                                onOk({
+                                    url,
+                                    target: getTargetWindow(),
+                                    customTarget: customTarget,
+                                    itemId: selectedItemId,
+                                    queryString: queryString,
+                                    type: activeTabIndex === 1 ? "external" : "internal",
+                                });
+                            }, children: "Select" }), _jsx(Button, { onClick: onCancel, children: "Cancel" })] })] }) }));
+}

package/dist/esm/editor/MainLayout.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Splitter, SplitterPanel } from "primereact/splitter";
+import { useState } from "react";
+import FloatingToolbar from "./FloatingToolbar";
+import React from "react";
+export default function MainLayout({ leftSidebar, content, rightSidebar, }) {
+    var _a, _b;
+    const panels = [];
+    const [floatingLeftSidebar, setFloatingLeftSidebar] = useState(false);
+    const leftSidebarRef = React.useRef(null);
+    if (leftSidebar && !floatingLeftSidebar)
+        panels.push(_jsx(SplitterPanel, { size: 15, className: "a-overflow-hidden a-relative", children: _jsx("div", { className: "a-w-full a-h-full", ref: leftSidebarRef, children: leftSidebar }) }, "left"));
+    panels.push(_jsx(SplitterPanel, { size: 60, className: "alpaca-editor-content a-relative ", children: content }, "center"));
+    if (rightSidebar)
+        panels.push(_jsx(SplitterPanel, { size: 15, children: rightSidebar }, "right"));
+    return (_jsxs(_Fragment, { children: [_jsx(Splitter, { className: "a-border-none", children: panels }, (leftSidebar ? "left" : "no-left") +
+                (rightSidebar ? "right" : "no-right")), leftSidebar && floatingLeftSidebar && (_jsx(FloatingToolbar, { onPin: () => setFloatingLeftSidebar(false), height: (((_a = leftSidebarRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) || 300) - 70, width: ((_b = leftSidebarRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) || 300, children: leftSidebar }))] }));
+}

package/dist/esm/editor/MediaSelector.js

@@ -0,0 +1,85 @@
+"use client";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ContentTree from "./ContentTree";
+import { Splitter, SplitterPanel } from "primereact/splitter";
+import { useEffect, useState } from "react";
+import { getChildren } from "./services/contentService";
+import { useEditContext } from "./editContext";
+import { Button } from "primereact/button";
+import { Dialog } from "primereact/dialog";
+import { FileUpload } from "primereact/fileupload";
+import { classNames } from "primereact/utils";
+import DialogButtons from "./DialogButtons";
+export const MediaSelector = ({ visible, onHide, onMediaSelected, selectedIdPath, }) => {
+    const [selectedFolderId, setSelectedFolderId] = useState();
+    const [images, setImages] = useState();
+    const [selectedImage, setSelectedImage] = useState();
+    const [selectedImageId, setSelectedImageId] = useState();
+    const selection = selectedFolderId ? [selectedFolderId] : [];
+    const editContext = useEditContext();
+    useEffect(() => {
+        if (selectedIdPath) {
+            const path = selectedIdPath.split("/");
+            if (path.length > 1) {
+                setSelectedFolderId(path[path.length - 2]);
+                setSelectedImageId(path[path.length - 1].toLowerCase().substring(1, 37));
+            }
+        }
+    }, [selectedIdPath, visible]);
+    useEffect(() => {
+        loadThumbnailsAndSelectImage();
+    }, [selectedFolderId]);
+    function loadThumbnailsAndSelectImage() {
+        return __awaiter(this, void 0, void 0, function* () {
+            setSelectedImage(undefined);
+            setImages([]);
+            const images = yield loadThumbnails(selectedFolderId);
+            if (selectedImageId)
+                setSelectedImage(images === null || images === void 0 ? void 0 : images.find((x) => x.id === selectedImageId));
+        });
+    }
+    function loadThumbnails(selectedFolderId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!selectedFolderId)
+                setImages([]);
+            else {
+                const children = yield getChildren(selectedFolderId, editContext.sessionId, [
+                    "C97BA923-8009-4858-BDD5-D8BE5FCCECF7",
+                    "F1828A2C-7E5D-4BBD-98CA-320474871548",
+                ], false);
+                setImages(children);
+                return children;
+            }
+        });
+    }
+    return (_jsx(Dialog, { style: { width: "80%", height: "80%" }, visible: visible, onHide: onHide, header: "Select image", children: _jsxs("div", { className: "a-flex a-flex-col a-h-full", children: [_jsxs(Splitter, { className: "a-flex-1 a-border-0", children: [_jsx(SplitterPanel, { size: 35, className: "alpaca-overflow-scroll", children: _jsxs(Splitter, { layout: "vertical", children: [_jsx(SplitterPanel, { size: 70, className: "a-relative", children: _jsx("div", { className: "a-absolute a-inset-0 a-overflow-auto a-p-2", children: _jsx(ContentTree, { rootItemId: "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1", selectionMode: "single", selectedItemIds: selection, templateIds: ["FE5DD826-48C6-436D-B87A-7C4210C7413B"], expandIdPath: selectedIdPath !== null && selectedIdPath !== void 0 ? selectedIdPath : "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1", onSelectionChange: (selection) => {
+                                                    const selectedNode = selection;
+                                                    if (selectedNode)
+                                                        setSelectedFolderId(selectedNode.id);
+                                                    else
+                                                        setSelectedFolderId(undefined);
+                                                } }) }) }), _jsx(SplitterPanel, { className: "a-flex a-justify-center a-align-center", children: _jsx("div", { className: "a-p-3 a-m-2 a-border a-w-full a-flex a-justify-center a-align-center", children: _jsx("img", { src: selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.previewUrl, className: "a-object-contain", fetchPriority: "high" }) }) })] }) }), _jsx(SplitterPanel, { className: "a-relative", children: _jsx("div", { className: "a-flex a-flex-wrap a-content-start a-items-start a-gap-2 a-absolute a-inset-0 a-overflow-auto a-p-2", children: images === null || images === void 0 ? void 0 : images.map((t) => {
+                                    return (_jsxs("div", { className: classNames((selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.id) == t.id ? "a-shadow-md" : "", "a-w-24 a-flex a-flex-col a-justify-between hover:a-shadow-md a-cursor-pointer a-p-1"), onDoubleClick: () => {
+                                            onMediaSelected(t.id);
+                                            onHide();
+                                        }, onClick: () => setSelectedImage(t), children: [_jsx("div", { className: "a-h-24 a-w-24 a-flex a-justify-center a-items-center", children: _jsx("img", { src: t.imageUrl }) }), _jsx("div", { className: "a-text-xs a-break-all", children: t.name })] }, t.id));
+                                }) }) })] }), _jsxs(DialogButtons, { children: [_jsx(FileUpload, { mode: "basic", 
+                            // disabled={electedFolderId}
+                            auto: true, chooseLabel: "Upload", accept: "image/*", url: "/alpaca/headless/editor/upload?folder=" + selection[0], onUpload: ({ xhr }) => __awaiter(void 0, void 0, void 0, function* () {
+                                const response = JSON.parse(xhr.responseText);
+                                const thumbs = yield loadThumbnails(selectedFolderId);
+                                setSelectedImage(thumbs === null || thumbs === void 0 ? void 0 : thumbs.find((x) => x.id === response.id));
+                            }) }), _jsx(Button, { disabled: !selectedImage, onClick: () => {
+                                onMediaSelected(selectedImage.id);
+                                onHide();
+                            }, children: "Select" }), _jsx(Button, { onClick: () => onHide(), children: "Cancel" })] })] }) }));
+};