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

package/dist/cjs/editor/EditorClientHost.js

@@ -31,7 +31,7 @@ exports.EditorClientHost = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const dynamic_1 = __importDefault(require("next/dynamic"));
 const EditorClient = (0, dynamic_1.default)(() => Promise.resolve().then(() => __importStar(require("./EditorClient"))).then((dnd) => dnd.EditorClient), { ssr: false });
-function EditorClientHost({ content, dictionaryObject, children, edit, }) {
-    return ((0, jsx_runtime_1.jsx)(EditorClient, { content: content, dictionaryObject: dictionaryObject, edit: edit, children: children }));
+function EditorClientHost({ content, dictionaryObject, children, site, edit, }) {
+    return ((0, jsx_runtime_1.jsx)(EditorClient, { page: content, site: site, dictionaryObject: dictionaryObject, edit: edit, children: children }));
 }
 exports.EditorClientHost = EditorClientHost;

package/dist/cjs/editor/FieldList.js

@@ -1,21 +1,35 @@
 "use strict";
 "use client";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FieldList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const __1 = require("..");
-const inputtext_1 = require("primereact/inputtext");
-const checkbox_1 = require("primereact/checkbox");
-const SingleLineText_1 = require("./fieldTypes/SingleLineText");
-const RichTextEditor_1 = require("./fieldTypes/RichTextEditor");
+const react_1 = require("react");
+const FieldListField_1 = __importDefault(require("./FieldListField"));
+const Section_1 = require("./ui/Section");
 function FieldList({ fields }) {
     const editContext = (0, __1.useEditContext)();
+    const [liveFields, setLiveFields] = (0, react_1.useState)();
     if (!editContext)
-        if (!fields)
+        return;
+    if (!fields)
+        return;
+    const fieldsArray = Array.isArray(fields)
+        ? fields
+        : Object.values(fields);
+    (0, react_1.useEffect)(() => {
+        if (!editContext)
             return;
-    if (!Array.isArray(fields))
-        fields = Object.values(fields);
-    const sections = fields.reduce((acc, value) => {
+        setLiveFields(fieldsArray.map((x) => x.type === "rich text" || x.type === "text"
+            ? editContext.getLiveField(x)
+            : x));
+    }, [fields]);
+    if (!liveFields)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    const sections = liveFields.reduce((acc, value) => {
         // Group initialization
         if (!acc[value.section || "Default"]) {
             acc[value.section || "Default"] = [];
@@ -25,40 +39,13 @@ function FieldList({ fields }) {
         return acc;
     }, {});
     const sectionList = Object.values(sections);
-    sectionList.sort((a, b) => b[0].sortOrder - a[0].sortOrder);
-    return ((0, jsx_runtime_1.jsx)("div", { className: "a-p-1", children: Object.keys(sections).map((section) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "alpaca-fields-section-headline", children: section }), getSectionFields(sections[section], editContext)] }, section))) }));
-}
-exports.FieldList = FieldList;
-function getSectionFields(fields, editContext) {
-    return fields
-        .map((field) => editContext.getLiveField(field))
-        .map((field) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "alpaca-field-label", children: field.name }), !field.containsFallbackValue ? ((0, jsx_runtime_1.jsx)("button", { className: "a-text-xs a-p-0 a-m-1", children: "Reset " })) : ((0, jsx_runtime_1.jsx)("button", { children: "Fallback" })), (0, jsx_runtime_1.jsx)("div", { children: getFieldEditor(field) })] }, field.id)));
-}
-function getFieldEditor(field) {
-    switch (field.type) {
-        case "checkbox":
-            return checkbox(field);
-        case "picture":
-            return picture(field);
-        case "image":
-            return image(field);
-        case "rich text":
-            return (0, jsx_runtime_1.jsx)(RichTextEditor_1.RichTextEditor, { field: field });
-        default:
-            return (0, jsx_runtime_1.jsx)(SingleLineText_1.SingleLineText, { field: field });
+    sectionList.sort((a, b) => a[0].sectionSortOrder - b[0].sectionSortOrder);
+    function getSectionFields(fields) {
+        fields.sort((a, b) => a.sortOrder - b.sortOrder);
+        return fields.map((field) => ((0, jsx_runtime_1.jsx)(FieldListField_1.default, { field: field }, field.id)));
     }
+    return ((0, jsx_runtime_1.jsx)("div", { className: "a-bg-gray-100  a-h-fill-available", children: sectionList
+            .map((x) => x[0].section)
+            .map((section) => ((0, jsx_runtime_1.jsx)(Section_1.Section, { title: section, children: getSectionFields(sections[section]) }, section))) }));
 }
-function checkbox(field) {
-    return (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: field.value === "1" });
-}
-// function singleLineText(field: Field) {
-//   return <InputText value={field.value as string} />;
-// }
-function picture(field) {
-    var _a, _b;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("label", { className: "alpaca-minor-label", children: "Alt" }), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: (_b = (_a = field.value) === null || _a === void 0 ? void 0 : _a.alt) !== null && _b !== void 0 ? _b : "" })] }));
-}
-function image(field) {
-    var _a, _b;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("label", { className: "alpaca-minor-label", children: "Alt" }), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: (_b = (_a = field.value) === null || _a === void 0 ? void 0 : _a.altText) !== null && _b !== void 0 ? _b : "" })] }));
-}
+exports.FieldList = FieldList;

package/dist/cjs/editor/FieldListField.js

@@ -0,0 +1,75 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const inputtext_1 = require("primereact/inputtext");
+const __1 = require("..");
+const CheckboxEditor_1 = require("./fieldTypes/CheckboxEditor");
+const react_1 = require("react");
+const RichTextEditor_1 = require("./fieldTypes/RichTextEditor");
+const LinkFieldEditor_1 = require("./fieldTypes/LinkFieldEditor");
+const PictureFieldEditor_1 = require("./fieldTypes/PictureFieldEditor");
+const InternalLinkFieldEditor_1 = require("./fieldTypes/InternalLinkFieldEditor");
+const TreeListEditor_1 = __importDefault(require("./fieldTypes/TreeListEditor"));
+const SingleLineText_1 = require("./fieldTypes/SingleLineText");
+const MultiLineText_1 = require("./fieldTypes/MultiLineText");
+function FieldListField({ field }) {
+    var _a;
+    const editContext = (0, __1.useEditContext)();
+    if (!editContext)
+        return;
+    const ref = (0, react_1.useRef)(null);
+    const isFocusedField = ((_a = editContext === null || editContext === void 0 ? void 0 : editContext.focusedField) === null || _a === void 0 ? void 0 : _a.id) === field.id &&
+        editContext.focusedField.item.id === field.item.id &&
+        editContext.focusedField.item.language === field.item.language;
+    (0, react_1.useEffect)(() => {
+        if (ref.current && isFocusedField) {
+            ref.current.scrollIntoView({
+                behavior: "smooth",
+                block: "center",
+                inline: "center",
+            });
+        }
+    }, [editContext.focusedField]);
+    const liveField = editContext.getLiveField(field);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: isFocusedField ? "a-focused-field" : "", children: [(0, jsx_runtime_1.jsx)("label", { className: "a-font-bold a-block a-mt-5 a-mb-1 a-text-sm", children: field.name }), (0, jsx_runtime_1.jsxs)("div", { className: "a-flex a-gap-2", children: [!field.isFallback && liveField.rawValue !== null ? ((0, jsx_runtime_1.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", " "] })) : ((0, jsx_runtime_1.jsx)("button", { className: "a-text-xs a-p-0", children: "Fallback" })), (0, jsx_runtime_1.jsx)("button", { className: "a-text-xs a-p-0", onClick: () => {
+                            console.log(liveField);
+                        }, children: "Debug" })] }), (0, jsx_runtime_1.jsx)("div", { className: "a-text-xs a-p-0 a-mt-1", children: getFieldEditor(liveField) })] }, field.id +
+        "_" +
+        field.item.id +
+        "_" +
+        field.item.language +
+        "_" +
+        field.item.version));
+}
+exports.default = FieldListField;
+function getFieldEditor(field) {
+    switch (field.type) {
+        case "multi-line text":
+            return (0, jsx_runtime_1.jsx)(MultiLineText_1.MultiLineText, { field: field });
+        case "checkbox":
+            return (0, jsx_runtime_1.jsx)(CheckboxEditor_1.CheckboxEditor, { field: field });
+        case "image":
+            return image(field);
+        case "rich text":
+            return (0, jsx_runtime_1.jsx)(RichTextEditor_1.RichTextEditor, { field: field });
+        case "general link":
+            return (0, jsx_runtime_1.jsx)(LinkFieldEditor_1.LinkFieldEditor, { field: field });
+        case "picture":
+            return (0, jsx_runtime_1.jsx)(PictureFieldEditor_1.PictureFieldEditor, { field: field });
+        case "enhanced internal link":
+            return (0, jsx_runtime_1.jsx)(InternalLinkFieldEditor_1.InternalLinkFieldEditor, { field: field });
+        case "enhanced treelist":
+            return (0, jsx_runtime_1.jsx)(TreeListEditor_1.default, { field: field });
+        default:
+            return (0, jsx_runtime_1.jsx)(SingleLineText_1.SingleLineText, { field: field });
+    }
+}
+function image(field) {
+    var _a, _b;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("label", { className: "alpaca-minor-label", children: "Alt" }), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: (_b = (_a = field.value) === null || _a === void 0 ? void 0 : _a.altText) !== null && _b !== void 0 ? _b : "" })] }));
+}

package/dist/cjs/editor/FloatingToolbar.js

@@ -0,0 +1,92 @@
+"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)(() => {
+        console.log("WIDTH: ", width, "Height: ", height);
+        setSize({ width: width || 400, height: height || 70 });
+    }, []);
+    const handleMouseDown = (0, react_1.useCallback)((e) => {
+        // Start dragging and calculate the offset from the mouse to the sidebar top-left corner
+        setDragging(true);
+        setOffset({
+            x: e.clientX - position.x,
+            y: e.clientY - position.y,
+        });
+    }, [position]);
+    const handleMouseMove = (0, react_1.useCallback)((e) => {
+        if (dragging) {
+            // Update the position state based on mouse movement, adjusted by the initial offset
+            setPosition({
+                x: e.clientX - offset.x,
+                y: e.clientY - offset.y,
+            });
+        }
+    }, [dragging, offset]);
+    const handleMouseUp = (0, react_1.useCallback)(() => {
+        // Stop dragging
+        setDragging(false);
+    }, []);
+    const handleResizeMouseDown = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        setResizing(true);
+        setOffset({
+            x: e.clientX,
+            y: e.clientY,
+        });
+    }, []);
+    const handleResizeMouseMove = (0, react_1.useCallback)((e) => {
+        if (resizing) {
+            const newWidth = size.width + (e.clientX - offset.x);
+            const newHeight = size.height + (e.clientY - offset.y);
+            setSize({
+                width: newWidth > 200 ? newWidth : 200, // Minimum width
+                height: newHeight > 100 ? newHeight : 100, // Minimum height
+            });
+            setOffset({
+                x: e.clientX,
+                y: e.clientY,
+            });
+        }
+    }, [resizing, offset, size]);
+    const handleResizeMouseUp = (0, react_1.useCallback)(() => {
+        setResizing(false);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (resizing) {
+            document.addEventListener("mousemove", handleResizeMouseMove);
+            document.addEventListener("mouseup", handleResizeMouseUp);
+        }
+        return () => {
+            document.removeEventListener("mousemove", handleResizeMouseMove);
+            document.removeEventListener("mouseup", handleResizeMouseUp);
+        };
+    }, [resizing, handleResizeMouseMove, handleResizeMouseUp]);
+    // Add event listeners to the document when the sidebar is being dragged
+    (0, react_1.useEffect)(() => {
+        if (dragging) {
+            document.addEventListener("mousemove", handleMouseMove);
+            document.addEventListener("mouseup", handleMouseUp);
+        }
+        // Cleanup the document event listeners when the component unmounts or dragging stops
+        return () => {
+            document.removeEventListener("mousemove", handleMouseMove);
+            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: {
+            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" }) })] }));
+}
+exports.default = FloatingToolbar;

package/dist/cjs/editor/GraphQL.js

@@ -56,7 +56,7 @@ function GraphQL({ component }) {
     const fieldsjsonValues = findFields(component.graphql);
     function renderItem(fields) {
         const first = fields[0];
-        return ((0, jsx_runtime_1.jsxs)("div", { children: ["Item: ", first.path, " ", first.id, " ", first.language, " ", first.version, (0, jsx_runtime_1.jsx)(FieldList_1.FieldList, { fields: fields })] }, first.path + first.id + first.language + first.version));
+        return ((0, jsx_runtime_1.jsxs)("div", { children: ["Item: ", first.path, " ", first.id, " ", first.item.language, " ", first.item.version, (0, jsx_runtime_1.jsx)(FieldList_1.FieldList, { fields: fields })] }, first.path + first.id + first.item.language + first.item.version));
     }
     function refresh() {
         var _a, _b;
@@ -70,9 +70,7 @@ function GraphQL({ component }) {
         }
         const field = {
             name: "_GraphQL",
-            itemId: component === null || component === void 0 ? void 0 : component.id,
-            language: language,
-            version: version,
+            item: { id: component === null || component === void 0 ? void 0 : component.id, language: language, version: version },
             path: "graphql",
             id: "3622F861-ECA9-45D7-8DA7-2CDA35235002",
             value: query,
@@ -80,10 +78,10 @@ function GraphQL({ component }) {
         };
         const prettyQuery = (0, graphql_formatter_1.format)(query);
         setQuery(prettyQuery);
-        editContext === null || editContext === void 0 ? void 0 : editContext.editField(field, prettyQuery, false);
+        editContext === null || editContext === void 0 ? void 0 : editContext.editField({ field, value: prettyQuery });
         setShowSpinner(true);
         editContext === null || editContext === void 0 ? void 0 : editContext.requestRefresh("immediate");
     }
-    return ((0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { layout: "vertical", style: { height: "100%" }, children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 50, className: "a-relative", children: (0, jsx_runtime_1.jsxs)("div", { className: "a-absolute a-inset-0 a-flex", children: [(0, jsx_runtime_1.jsx)(inputtextarea_1.InputTextarea, { value: query, onChange: (e) => setQuery(e.target.value), className: "a-flex-1", style: { height: "100%" } }), (0, jsx_runtime_1.jsx)(button_1.Button, { icon: "pi pi-refresh" + (showSpinner ? " pi-spin" : ""), onClick: refresh, disabled: showSpinner })] }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "alpaca-editor-tabs", children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, { className: "a-inset-0 a-absolute", children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Data", style: { height: "100%" }, className: "a-relative", children: (0, jsx_runtime_1.jsx)("div", { className: "a-m-1", children: Object.values(fieldsjsonValues).map((x) => renderItem(x)) }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "JSON", className: "a-relative", style: { height: "100%" }, children: (0, jsx_runtime_1.jsx)("div", { className: "a-inset-0 a-absolute a-overflow-y-auto", children: (0, jsx_runtime_1.jsx)(react_json_pretty_1.default, { data: component.graphql }) }) })] }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { layout: "vertical", style: { height: "100%" }, children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 50, className: "a-relative", children: (0, jsx_runtime_1.jsxs)("div", { className: "a-absolute a-inset-0 a-flex", children: [(0, jsx_runtime_1.jsx)(inputtextarea_1.InputTextarea, { value: query, onChange: (e) => setQuery(e.target.value), className: "a-flex-1", style: { height: "100%" } }), (0, jsx_runtime_1.jsx)(button_1.Button, { icon: "pi pi-refresh" + (showSpinner ? " pi-spin" : ""), onClick: refresh, disabled: showSpinner })] }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "a-relative", children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, { className: "a-inset-0 a-absolute", children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Data", style: { height: "100%" }, className: "a-relative", children: (0, jsx_runtime_1.jsx)("div", { className: "a-m-1", children: Object.values(fieldsjsonValues).map((x) => renderItem(x)) }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "JSON", className: "a-relative", style: { height: "100%" }, children: (0, jsx_runtime_1.jsx)("div", { className: "a-inset-0 a-absolute a-overflow-y-auto", children: (0, jsx_runtime_1.jsx)(react_json_pretty_1.default, { data: component.graphql }) }) })] }) })] }));
 }
 exports.GraphQL = GraphQL;

package/dist/cjs/editor/ItemEditor.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const FieldList_1 = require("./FieldList");
+const ItemInfo_1 = require("./ItemInfo");
+function ItemEditor({ item }) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ItemInfo_1.ItemInfo, { item: item }), (0, jsx_runtime_1.jsx)(FieldList_1.FieldList, { fields: item.fields })] }));
+}
+exports.default = ItemEditor;

package/dist/cjs/editor/ItemInfo.js

@@ -0,0 +1,17 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemInfo = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Section_1 = require("./ui/Section");
+function ItemInfo({ item }) {
+    var _a;
+    if (!(item === null || item === void 0 ? void 0 : item.fields))
+        return;
+    function formatRow(label, value) {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "a-font-bold", children: label }), (0, jsx_runtime_1.jsx)("div", { children: value })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { className: "a-py-5 a-px-3 a-text-xl a-font-bold a-my-2", children: item.name }), (0, jsx_runtime_1.jsx)(Section_1.Section, { title: "Info", children: (0, jsx_runtime_1.jsxs)("div", { className: "a-grid a-grid-cols-[min-content_1fr] a-gap-3 a-text-xs a-p-2 a-bg-gray-100", children: [(0, jsx_runtime_1.jsx)("div", { className: "a-font-bold", children: "ID:" }), (0, jsx_runtime_1.jsx)("div", { children: item.id }), (0, jsx_runtime_1.jsx)("div", { className: "a-font-bold", children: "Path:" }), (0, jsx_runtime_1.jsx)("div", { children: item.path }), (0, jsx_runtime_1.jsx)("div", { className: "a-font-bold", children: "Language:" }), (0, jsx_runtime_1.jsx)("div", { children: item.language }), (0, jsx_runtime_1.jsx)("div", { className: "a-font-bold", children: "Version:" }), (0, jsx_runtime_1.jsx)("div", { children: item.version }), formatRow("Template", item.templateName + " (" + item.templateId + ")"), item.masterLanguages &&
+                            formatRow("Master languages", item.masterLanguages.join(", ")), item.translations && ((0, jsx_runtime_1.jsxs)("div", { className: "a-text-xs", children: ["Languages: ", (_a = item.translations) === null || _a === void 0 ? void 0 : _a.join(", ")] }))] }) })] }));
+}
+exports.ItemInfo = ItemInfo;

package/dist/cjs/editor/ItemNameDialog.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dialog_1 = require("primereact/dialog");
+const inputtext_1 = require("primereact/inputtext");
+const react_1 = require("react");
+const DialogButtons_1 = __importDefault(require("./DialogButtons"));
+const button_1 = require("primereact/button");
+const ItemNameDialog = (0, react_1.forwardRef)((_props, ref) => {
+    const [visible, setVisible] = (0, react_1.useState)(false);
+    const [props, setProps] = (0, react_1.useState)();
+    const [name, setName] = (0, react_1.useState)("");
+    (0, react_1.useEffect)(() => {
+        setName((props === null || props === void 0 ? void 0 : props.name) || "");
+    }, [props]);
+    (0, react_1.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 ((0, jsx_runtime_1.jsxs)(dialog_1.Dialog, { visible: visible, onHide: () => {
+            setVisible(false);
+        }, header: "Choose item name", children: [(0, jsx_runtime_1.jsx)("div", { className: "a-pt-3", children: (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { autoFocus: true, value: name, onChange: (e) => setName(e.target.value), onKeyDown: (ev) => {
+                        if (ev.key === "Enter" && isValidName)
+                            handleOk();
+                    } }) }), (0, jsx_runtime_1.jsxs)(DialogButtons_1.default, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleOk, label: "Ok", disabled: !isValidName }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => setVisible(false), label: "Cancel" })] })] }));
+});
+exports.default = ItemNameDialog;

package/dist/cjs/editor/LanguageSelector.js

@@ -16,6 +16,6 @@ function LanguageSelector({ page, onLanguageSelected, }) {
     const countryOptionTemplate = (option) => {
         return ((0, jsx_runtime_1.jsxs)("div", { children: [option.name, " (", option.versions, ")"] }));
     };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: page.language, onChange: (e) => onLanguageSelected(e.value), options: page.languages, optionValue: "languageCode", optionLabel: "name", placeholder: "Select a language", filter: true, valueTemplate: selectedCountryTemplate, itemTemplate: countryOptionTemplate }) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "a-text-sm", value: page.language, onChange: (e) => onLanguageSelected(e.value), options: page.languages, optionValue: "languageCode", optionLabel: "name", placeholder: "Select a language", filter: true, valueTemplate: selectedCountryTemplate, itemTemplate: countryOptionTemplate }) }));
 }
 exports.LanguageSelector = LanguageSelector;

package/dist/cjs/editor/LinkEditorDialog.js

@@ -0,0 +1,67 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkEditorDialog = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dialog_1 = require("primereact/dialog");
+const tabview_1 = require("primereact/tabview");
+const ContentTree_1 = __importDefault(require("./ContentTree"));
+const inputtext_1 = require("primereact/inputtext");
+const react_1 = require("react");
+const dropdown_1 = require("primereact/dropdown");
+const divider_1 = require("primereact/divider");
+const button_1 = require("primereact/button");
+function LinkEditorDialog({ linkValue, onCancel, onOk, }) {
+    const [url, setUrl] = (0, react_1.useState)();
+    const [targetWindow, setTargetWindow] = (0, react_1.useState)();
+    const [customTarget, setCustomTarget] = (0, react_1.useState)();
+    const [queryString, setQueryString] = (0, react_1.useState)();
+    const [activeTabIndex, setActiveTabIndex] = (0, react_1.useState)();
+    const [selectedItemId, setSelectedItemId] = (0, react_1.useState)("");
+    (0, react_1.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 ((0, jsx_runtime_1.jsx)(dialog_1.Dialog, { style: { width: "50%", height: "50%" }, onHide: onCancel, header: "Select link target", visible: true, children: (0, jsx_runtime_1.jsxs)("div", { className: "a-flex a-flex-col a-h-full", children: [(0, jsx_runtime_1.jsxs)(tabview_1.TabView, { activeIndex: activeTabIndex, className: "a-flex-1 a-mb-3", pt: { panelContainer: { className: "a-h-full" } }, children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Internal", className: "a-relative a-h-[calc(100%-25px)] a-p-0 ", children: (0, jsx_runtime_1.jsx)("div", { className: "a-overflow-auto a-absolute a-inset-0", children: (0, jsx_runtime_1.jsx)(ContentTree_1.default, { 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);
+                                    } }) }) }), (0, jsx_runtime_1.jsxs)(tabview_1.TabPanel, { header: "External", children: [(0, jsx_runtime_1.jsx)("label", { className: "a-block", children: "Url:" }), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: url || "", onChange: (e) => {
+                                        setUrl(e.target.value);
+                                    }, className: "a-w-full" })] })] }), (0, jsx_runtime_1.jsx)(divider_1.Divider, {}), (0, jsx_runtime_1.jsx)("label", { children: "QueryString" }), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: queryString, onChange: (e) => setQueryString(e.target.value) }), (0, jsx_runtime_1.jsx)("label", { children: "Window" }), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { options: targetWindows, optionLabel: "name", optionValue: "code", value: targetWindow, onChange: (e) => setTargetWindow(e.value) }), targetWindow === "custom" && ((0, jsx_runtime_1.jsxs)("div", { className: "a-m-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "a-block", children: "Custom:" }), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: customTarget || "", onChange: (e) => {
+                                setCustomTarget(e.target.value);
+                            } })] })), (0, jsx_runtime_1.jsx)(divider_1.Divider, {}), (0, jsx_runtime_1.jsxs)("div", { className: "a-flex a-justify-end a-gap-3 a-mt-3", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => {
+                                onOk({
+                                    url,
+                                    target: getTargetWindow(),
+                                    customTarget: customTarget,
+                                    itemId: selectedItemId,
+                                    queryString: queryString,
+                                    type: activeTabIndex === 1 ? "external" : "internal",
+                                });
+                            }, children: "Select" }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: onCancel, children: "Cancel" })] })] }) }));
+}
+exports.LinkEditorDialog = LinkEditorDialog;

package/dist/cjs/editor/MainLayout.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const splitter_1 = require("primereact/splitter");
+const react_1 = require("react");
+const FloatingToolbar_1 = __importDefault(require("./FloatingToolbar"));
+const react_2 = __importDefault(require("react"));
+function MainLayout({ leftSidebar, content, rightSidebar, }) {
+    var _a, _b;
+    const panels = [];
+    const [floatingLeftSidebar, setFloatingLeftSidebar] = (0, react_1.useState)(false);
+    const leftSidebarRef = react_2.default.useRef(null);
+    if (leftSidebar && !floatingLeftSidebar)
+        panels.push((0, jsx_runtime_1.jsxs)(splitter_1.SplitterPanel, { size: 15, className: "a-overflow-hidden a-relative", children: [(0, jsx_runtime_1.jsx)("div", { className: "a-absolute a-top-3 a-right-3 a-cursor-pointer", children: (0, jsx_runtime_1.jsx)("i", { className: "pi pi-arrow-up-right", onClick: () => setFloatingLeftSidebar(true) }) }), (0, jsx_runtime_1.jsx)("div", { className: "a-w-full a-h-full", ref: leftSidebarRef, children: leftSidebar })] }, "left"));
+    panels.push((0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 60, className: "alpaca-editor-content a-relative ", children: content }, "center"));
+    if (rightSidebar)
+        panels.push((0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 15, children: rightSidebar }, "right"));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(splitter_1.Splitter, { className: "a-border-none", children: panels }, (leftSidebar ? "left" : "no-left") +
+                (rightSidebar ? "right" : "no-right")), leftSidebar && floatingLeftSidebar && ((0, jsx_runtime_1.jsx)(FloatingToolbar_1.default, { 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 }))] }));
+}
+exports.default = MainLayout;

package/dist/cjs/editor/MediaSelector.js

@@ -1,4 +1,5 @@
 "use strict";
+"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) {
@@ -22,15 +23,36 @@ const editContext_1 = require("./editContext");
 const button_1 = require("primereact/button");
 const dialog_1 = require("primereact/dialog");
 const fileupload_1 = require("primereact/fileupload");
-const MediaSelector = ({ visible, onHide, onMediaSelected, }) => {
+const utils_1 = require("primereact/utils");
+const DialogButtons_1 = __importDefault(require("./DialogButtons"));
+const MediaSelector = ({ visible, onHide, onMediaSelected, selectedIdPath, }) => {
     const [selectedFolderId, setSelectedFolderId] = (0, react_1.useState)();
     const [images, setImages] = (0, react_1.useState)();
     const [selectedImage, setSelectedImage] = (0, react_1.useState)();
+    const [selectedImageId, setSelectedImageId] = (0, react_1.useState)();
     const selection = selectedFolderId ? [selectedFolderId] : [];
     const editContext = (0, editContext_1.useEditContext)();
     (0, react_1.useEffect)(() => {
-        loadThumbnails(selectedFolderId);
+        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]);
+    (0, react_1.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)
@@ -39,23 +61,26 @@ const MediaSelector = ({ visible, onHide, onMediaSelected, }) => {
                 const children = yield (0, contentService_1.getChildren)(selectedFolderId, editContext.sessionId, [
                     "C97BA923-8009-4858-BDD5-D8BE5FCCECF7",
                     "F1828A2C-7E5D-4BBD-98CA-320474871548",
-                ]);
+                ], false);
                 setImages(children);
                 return children;
             }
         });
     }
-    return ((0, jsx_runtime_1.jsx)(dialog_1.Dialog, { style: { width: "80%", height: "80%" }, visible: visible, onHide: onHide, children: (0, jsx_runtime_1.jsxs)("div", { className: "a-flex a-flex-col a-h-full", children: [(0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { className: "a-flex-1 a-border-0", children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 35, className: "alpaca-overflow-scroll", children: (0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { layout: "vertical", children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 70, className: "a-relative", children: (0, jsx_runtime_1.jsx)("div", { className: "a-absolute a-inset-0 a-overflow-auto", children: (0, jsx_runtime_1.jsx)(ContentTree_1.default, { rootItemId: "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1", selectionMode: "single", selectedItemIds: selection, templateIds: ["FE5DD826-48C6-436D-B87A-7C4210C7413B"], expandIdPath: "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1", onSelectionChange: (selection) => {
-                                                    if (selection.length)
-                                                        setSelectedFolderId(selection[0]);
+    return ((0, jsx_runtime_1.jsx)(dialog_1.Dialog, { style: { width: "80%", height: "80%" }, visible: visible, onHide: onHide, header: "Select image", children: (0, jsx_runtime_1.jsxs)("div", { className: "a-flex a-flex-col a-h-full", children: [(0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { className: "a-flex-1 a-border-0", children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 35, className: "alpaca-overflow-scroll", children: (0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { layout: "vertical", children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 70, className: "a-relative", children: (0, jsx_runtime_1.jsx)("div", { className: "a-absolute a-inset-0 a-overflow-auto a-p-2", children: (0, jsx_runtime_1.jsx)(ContentTree_1.default, { 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);
-                                                } }) }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "a-flex a-justify-center a-align-center", children: (0, jsx_runtime_1.jsx)("img", { src: selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.previewUrl }) })] }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "a-relative", children: (0, jsx_runtime_1.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", children: images === null || images === void 0 ? void 0 : images.map((t) => {
-                                    return ((0, jsx_runtime_1.jsxs)("div", { className: "a-w-24 a-flex a-flex-col a-justify-between hover:a-shadow-md a-cursor-pointer a-p-1", onDoubleClick: () => {
+                                                } }) }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "a-flex a-justify-center a-align-center", children: (0, jsx_runtime_1.jsx)("div", { className: "a-p-3 a-m-2 a-border a-w-full a-flex a-justify-center a-align-center", children: (0, jsx_runtime_1.jsx)("img", { src: selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.previewUrl, className: "a-object-contain" }) }) })] }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "a-relative", children: (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.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: [(0, jsx_runtime_1.jsx)("img", { src: t.imageUrl, className: "a-w-24 a-h-24" }), (0, jsx_runtime_1.jsx)("div", { className: "a-text-xs a-break-all", children: t.name })] }, t.id));
-                                }) }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "a-flex a-justify-end a-gap-3 a-mt-3", children: [(0, jsx_runtime_1.jsx)(fileupload_1.FileUpload, { mode: "basic", disabled: !selectedFolderId, auto: true, chooseLabel: "Upload", accept: "image/*", url: "/alpaca/headless/editor/upload?folder=" + selection[0], onUpload: ({ xhr }) => __awaiter(void 0, void 0, void 0, function* () {
+                                        }, onClick: () => setSelectedImage(t), children: [(0, jsx_runtime_1.jsx)("div", { className: "a-h-24 a-w-24 a-flex a-justify-center a-items-center", children: (0, jsx_runtime_1.jsx)("img", { src: t.imageUrl }) }), (0, jsx_runtime_1.jsx)("div", { className: "a-text-xs a-break-all", children: t.name })] }, t.id));
+                                }) }) })] }), (0, jsx_runtime_1.jsxs)(DialogButtons_1.default, { children: [(0, jsx_runtime_1.jsx)(fileupload_1.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));