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

package/dist/esm/editor/ContextMenu.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useRef, useState } from "react";
+import { ContextMenu } from "primereact/contextmenu";
+import { getComponentById } from "./componentTreeHelper";
+export function getFieldContextMenu(field, editContext, customButtons = []) {
+    return (e) => {
+        var _a, _b, _c;
+        e.preventDefault();
+        e.stopPropagation();
+        const menuItems = getComponentMenuItems(editContext, getComponentById(field._editor.descriptor.item.id, editContext.page));
+        if (customButtons.length) {
+            if (menuItems.length)
+                menuItems.push({
+                    separator: true,
+                });
+            customButtons.forEach((button) => {
+                menuItems.push({
+                    label: button.label,
+                    command: (ev) => button.onClick(ev.originalEvent),
+                    icon: button.icon,
+                });
+            });
+        }
+        if ((_b = (_a = field._editor) === null || _a === void 0 ? void 0 : _a.buttons) === null || _b === void 0 ? void 0 : _b.length) {
+            if (menuItems.length)
+                menuItems.push({
+                    separator: true,
+                });
+            (_c = field._editor) === null || _c === void 0 ? void 0 : _c.buttons.forEach((button) => {
+                menuItems.push({
+                    label: button.label,
+                    command: () => {
+                        editContext.triggerFieldAction(field, button);
+                    },
+                    icon: button.icon ? "pi " + button.icon : undefined,
+                });
+            });
+        }
+        if (!e.ctrlKey && !e.shiftKey && !e.altKey && menuItems.length) {
+            editContext.select([field._editor.descriptor.item.id]);
+            editContext.setFocusedField(field._editor.descriptor, false);
+            editContext.showContextMenu(e, menuItems);
+        }
+    };
+}
+export function showComponentContextMenu(component, editContext) {
+    const componentCommandMenuItems = getComponentMenuItems(editContext, component);
+    const menuItems = componentCommandMenuItems;
+    return (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!e.ctrlKey && !e.shiftKey && !e.altKey && menuItems.length) {
+            editContext.select([component.id]);
+            editContext.showContextMenu(e, menuItems);
+        }
+    };
+}
+export const EditContextMenu = forwardRef((props, ref) => {
+    const cm = useRef(null);
+    const [menuItems, setMenuItems] = useState([]);
+    if (!props)
+        return;
+    useImperativeHandle(ref, () => ({
+        show: (e, items) => {
+            var _a;
+            if (!e.ctrlKey && !e.shiftKey && !e.altKey) {
+                setMenuItems(items);
+                e.preventDefault();
+                (_a = cm.current) === null || _a === void 0 ? void 0 : _a.show(e);
+            }
+        },
+        close: (event) => {
+            var _a;
+            (_a = cm.current) === null || _a === void 0 ? void 0 : _a.hide(event);
+        },
+    }));
+    return _jsx(ContextMenu, { model: menuItems, ref: cm });
+});
+function getComponentMenuItems(editContext, component) {
+    const componentCommands = editContext.getComponentCommands([component]);
+    const componentCommandMenuItems = componentCommands.map((x) => {
+        return {
+            label: x.label,
+            icon: x.icon,
+            command: (ev) => editContext.executeCommand({ command: x, event: ev.originalEvent }),
+            disabled: editContext.isCommandDisabled(x),
+        };
+    });
+    return componentCommandMenuItems;
+}

package/dist/esm/editor/DialogButtons.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function DialogButtons({ children, }) {
+    return (_jsx("div", { className: "a-flex a-justify-end a-gap-3 a-pt-6 a-border-t", children: children }));
+}

package/dist/esm/editor/DictionaryEditor.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { DataTable } from "primereact/datatable";
+import { Column } from "primereact/column";
+import { useEditContext } from ".";
+import { SingleLineText } from "./fieldTypes/SingleLineText";
+export function DictionaryEditor({}) {
+    const context = useEditContext();
+    if (!context) {
+        return;
+    }
+    const dictionary = context === null || context === void 0 ? void 0 : context.dictionary;
+    if (!dictionary)
+        return;
+    let entries = Object.keys(dictionary).map((k) => ({
+        key: k,
+        field: dictionary[k],
+        translation: dictionary[k].value,
+    }));
+    entries = [
+        ...entries,
+        ...context === null || context === void 0 ? void 0 : context.unresolvedDictionaryKeys.map((x) => ({
+            key: x,
+            field: null,
+            translation: "[undefined]",
+        })),
+    ];
+    entries.sort((a, b) => (a.key > b.key ? -1 : 1));
+    const textEditor = (options) => {
+        var _a;
+        if ((_a = options.rowData) === null || _a === void 0 ? void 0 : _a.field)
+            return _jsx(SingleLineText, { field: options.rowData.field });
+        else
+            return null;
+    };
+    return (_jsx(_Fragment, { children: _jsxs(DataTable, { value: entries, size: "small", className: "a-text-xs", children: [_jsx(Column, { field: "key", header: "Key" }), _jsx(Column, { field: "translation", header: "Translation", editor: (options) => textEditor(options) })] }) }));
+}

package/dist/esm/editor/EditFrame.js

@@ -0,0 +1,115 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { EditFrameContextProvider, useEditContext, useEditFilterChildrenContext, } from ".";
+import React from "react";
+import { showComponentContextMenu } from "./ContextMenu";
+import { ErrorBoundary } from "react-error-boundary";
+import { ErrorFallbackWithDetails } from "../components/Error";
+import { getComponentById } from "./componentTreeHelper";
+export function EditFrame({ componentId, children, index, }) {
+    var _a;
+    const editContext = useEditContext();
+    const [customButtons, setCustomButtons] = useState([]);
+    const ref = React.useRef(null);
+    if (!editContext)
+        return children;
+    const { selection } = editContext;
+    const isSelected = selection && selection.indexOf(componentId) >= 0;
+    useEffect(() => {
+        if (ref.current && editContext.scrollIntoView == componentId) {
+            ref.current.scrollIntoView({
+                behavior: "smooth",
+                block: "center",
+                inline: "center",
+            });
+        }
+    }, [editContext.scrollIntoView]);
+    const clientComponent = getComponentById(componentId, editContext.page);
+    if (!clientComponent) {
+        return children;
+    }
+    function select(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        if (clientComponent) {
+            const s = e.ctrlKey ? [...selection] : [];
+            if (s.indexOf(clientComponent.id) < 0)
+                s.push(clientComponent.id);
+            editContext === null || editContext === void 0 ? void 0 : editContext.select(s);
+        }
+    }
+    let classNames = "a-editframe";
+    let color = clientComponent._editor.linkItemId ? "orange-400" : "sky-400";
+    if (clientComponent._editor.hostingPageItem)
+        color = "purple-400";
+    if (isSelected)
+        classNames = `a-editframe a-selected a-relative`;
+    function handleDragStart(event) {
+        if (!clientComponent)
+            return;
+        event.dataTransfer.setData("alpaca", clientComponent.id);
+        setTimeout(() => {
+            editContext.dragStart({
+                type: "component",
+                templateId: clientComponent.templateId,
+                name: clientComponent.name,
+                component: {
+                    id: clientComponent.id,
+                    language: editContext.page.language,
+                    version: editContext.page.version,
+                    name: clientComponent.name,
+                },
+            });
+        }, 50);
+        event.stopPropagation();
+    }
+    const isDraggable = isSelected && !clientComponent._editor.hostingPageItem;
+    if (clientComponent._editor.isRemoved)
+        classNames += " a-removed";
+    const commands = editContext.getComponentCommands([clientComponent]);
+    const commandButtons = commands
+        .filter((x) => !x.disabled && x.visibilityScopes.indexOf("editFrame") >= 0)
+        .map((x) => ({
+        id: x.name + "_button",
+        icon: x.icon,
+        label: x.label,
+        onClick: (ev) => {
+            ev.preventDefault();
+            ev.stopPropagation();
+            x.execute(ev);
+        },
+    }));
+    let buttons = [...customButtons];
+    buttons = [...buttons, ...commandButtons];
+    var filterContext = useEditFilterChildrenContext();
+    if (filterContext &&
+        filterContext.filterChildCallback &&
+        filterContext.filterChildCallback({
+            component: clientComponent,
+            index: index,
+        }))
+        return null;
+    const menu = isSelected ? (_jsxs(_Fragment, { children: [_jsx("div", { ref: ref, className: `a-pointer-events-none a-absolute a-inset-0 a-border-2 a-border-${color} ` }), _jsxs("div", { className: `a-editframe-menu a-absolute a-top-px a-right-px a-z-1000 a-text-sm a-text-white a-opacity-50 hover:a-opacity-100 a-whitespace-nowrap a-px-3 a-flex a-items-center a-bg-${color} `, style: { zoom: 1 / editContext.pageView.zoom }, children: [_jsx("div", { draggable: isDraggable, onDragStart: handleDragStart, className: `a-p-1 ${isDraggable ? "a-cursor-move" : "a-cursor-default"} `, children: clientComponent.name }), buttons.map((b, i) => (_jsx("button", { className: "a-ml-3", onClick: b.onClick, title: b.label, children: _jsx("i", { className: b.icon }) }, i)))] })] })) : (_jsx(_Fragment, {}));
+    function getProps(props) {
+        return Object.assign(Object.assign({}, props), { className: props.className
+                ? props.className + " " + classNames
+                : classNames, onClick: select, onContextMenu: showComponentContextMenu(clientComponent, editContext) });
+    }
+    const wrappedChildren = !children ||
+        ((_a = children["$$typeof"]) === null || _a === void 0 ? void 0 : _a.toString()) !==
+            Symbol("react.element").toString() ||
+        typeof children["type"] !== "string" ? (_jsx("div", { children: children })) : (children);
+    const component = React.Children.map(wrappedChildren, (child) => {
+        if (React.isValidElement(child)) {
+            return React.cloneElement(child, getProps(child.props), _jsxs(_Fragment, { children: [child.props.children, menu] }));
+        }
+        return child;
+    });
+    return (_jsx(EditFrameContextProvider, { value: {
+            customButtons,
+            setCustomButtons,
+            componentId: clientComponent.id,
+            isSelected: isSelected,
+        }, children: _jsx(ErrorBoundary, { FallbackComponent: ErrorFallbackWithDetails, children: component }) }));
+}

package/dist/esm/editor/EditFrameWrapper.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import dynamic from "next/dynamic";
+const EditFrame = dynamic(() => import("./EditFrame").then((dnd) => dnd.EditFrame), { ssr: false });
+export function EditFrameWrapper({ componentId, children, index, }) {
+    return (_jsx(EditFrame, { componentId: componentId, children: children, index: index }));
+}

package/dist/esm/editor/Editor.js

@@ -0,0 +1,15 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { getAlpacaContext } from "../alpacaContext";
+import { EditorClientHost } from "./EditorClientHost";
+import { PreviewClientHost } from "./PreviewClientHost";
+export function Editor({ children, content, clientBuilder, }) {
+    const data = content;
+    if (data.type !== "page")
+        return;
+    if (!data._editor && !data.previewing)
+        return _jsx(_Fragment, { children: children });
+    var alpacaContext = getAlpacaContext();
+    if (data.previewing)
+        return _jsx(PreviewClientHost, { children: children });
+    return (_jsx(EditorClientHost, { content: data, dictionaryObject: alpacaContext.dictionary, edit: alpacaContext.edit, site: alpacaContext.pageContext.site.name, clientBuilder: clientBuilder, children: children }));
+}