@alpaca-editor/core 1.0.3762-mono

package/dist/editor/InsertMenu.js

@@ -0,0 +1,164 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InsertMenuTemplate = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const client_components_1 = require("../client-components");
+const react_1 = require("react");
+const inputtext_1 = require("primereact/inputtext");
+const ScrollingContentTree_1 = require("./ScrollingContentTree");
+const SimpleTabs_1 = require("./ui/SimpleTabs");
+const ItemSearch_1 = __importDefault(require("./ui/ItemSearch"));
+const config_1 = require("../config/config");
+const InsertMenuTemplate = ({ insertOptions, item, commandCallback, }) => {
+    const editContext = (0, client_components_1.useEditContext)();
+    const opRef = (0, react_1.useRef)(null);
+    const [filter, setFilter] = (0, react_1.useState)("");
+    const filterRef = (0, react_1.useRef)(null);
+    const [activeTab, setActiveTab] = (0, react_1.useState)(() => {
+        const stored = localStorage.getItem("editor.defaultInsertTab");
+        return stored ? parseInt(stored) : 0;
+    });
+    (0, react_1.useEffect)(() => {
+        localStorage.setItem("editor.defaultInsertTab", activeTab.toString());
+    }, [activeTab]);
+    const [recentTemplates, setRecentTemplates] = (0, react_1.useState)([]);
+    const [recentItems, setRecentItems] = (0, react_1.useState)([]);
+    const [hoveredItem, setHoveredItem] = (0, react_1.useState)();
+    const [wizards, setWizards] = (0, react_1.useState)([]);
+    const hideTimeoutRef = (0, react_1.useRef)(undefined);
+    (0, react_1.useEffect)(() => {
+        const loadRecentItems = async () => {
+            const items = await editContext?.itemsRepository.getItems(recentTemplates.map((id) => ({
+                id,
+                version: 0,
+                language: "en",
+            })));
+            if (items)
+                setRecentItems(items);
+        };
+        loadRecentItems();
+    }, [recentTemplates]);
+    (0, react_1.useEffect)(() => {
+        const stored = localStorage.getItem("editor.recentTemplates");
+        if (stored) {
+            const parsed = JSON.parse(stored);
+            setRecentTemplates(parsed);
+        }
+    }, [insertOptions]);
+    (0, react_1.useEffect)(() => {
+        const loadWizards = async () => {
+            const wizards = await editContext?.configuration.pageWizard.getWizards(item.descriptor);
+            setWizards(wizards ?? []);
+        };
+        loadWizards();
+    }, [item]);
+    const getCommand = (x) => {
+        return async (triggerEvent) => {
+            const stored = localStorage.getItem("editor.recentTemplates");
+            const recentIds = stored ? JSON.parse(stored) : [];
+            const updatedIds = [
+                x.id,
+                ...recentIds.filter((id) => id !== x.id),
+            ].slice(0, 10);
+            localStorage.setItem("editor.recentTemplates", JSON.stringify(updatedIds));
+            setRecentTemplates(updatedIds);
+            const result = await editContext?.executeCommand({
+                command: editContext.configuration.commands.insertItem,
+                data: { items: [item], templateId: x.id },
+                event: triggerEvent,
+            });
+            if (commandCallback)
+                commandCallback(editContext?.configuration.commands.insertItem, result);
+        };
+    };
+    const options = insertOptions.length === 0
+        ? undefined
+        : insertOptions.map((x) => ({
+            label: x.name,
+            id: x.id,
+            icon: ((0, jsx_runtime_1.jsx)("img", { className: "p-menuitem-icon", src: x.icon, style: { height: "16px" }, width: "16", height: "16", onDragStart: (e) => e.preventDefault() })),
+            command: getCommand(x),
+        }));
+    const tabs = [
+        {
+            label: "Options",
+            content: ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2 h-full", children: [(0, jsx_runtime_1.jsx)(inputtext_1.InputText, { ref: filterRef, className: "w-full", placeholder: "Filter", onChange: (e) => setFilter(e.target.value) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 relative", children: (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 overflow-auto", children: options
+                                ?.filter((x) => x.label.toLowerCase().indexOf(filter.toLowerCase()) > -1)
+                                .map((option) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center p-1 cursor-pointer hover:bg-gray-100 gap-2 text-xs", onClick: (ev) => {
+                                    ev.stopPropagation();
+                                    ev.preventDefault();
+                                    option.command(ev);
+                                }, children: [option.icon, (0, jsx_runtime_1.jsx)("span", { className: "flex-1", children: option.label
+                                            .split(new RegExp(`(${filter})`, "i"))
+                                            .map((part, i) => part.toLowerCase() === filter.toLowerCase() ? ((0, jsx_runtime_1.jsx)("u", { className: "font-bold", children: part }, i)) : (part)) })] }, option.id))) }) })] })),
+            id: "options",
+        },
+        {
+            label: "Recent",
+            content: ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col h-full", children: recentItems.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "text-sm text-gray-500 p-2", children: "No recent templates" })) : (recentItems.map((template) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center p-1 cursor-pointer hover:bg-gray-100 gap-2 text-xs", onClick: (ev) => {
+                        ev.stopPropagation();
+                        ev.preventDefault();
+                        getCommand(template)(ev);
+                    }, children: [(0, jsx_runtime_1.jsx)("img", { className: "p-menuitem-icon", src: template.icon, style: { height: "16px" }, width: "16", height: "16", onDragStart: (e) => e.preventDefault() }), (0, jsx_runtime_1.jsx)("span", { className: "flex-1", children: template.name })] }, template.id)))) })),
+            id: "recent",
+        },
+        {
+            label: "From Template",
+            content: ((0, jsx_runtime_1.jsxs)("div", { className: " h-full w-full flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)(ItemSearch_1.default, { setHoveredItem: setHoveredItem, rootItemIds: [config_1.templatesRootItemId], itemSelected: (item) => {
+                            getCommand(item)(null);
+                        } }), (0, jsx_runtime_1.jsx)("div", { className: "flex-2 relative", children: (0, jsx_runtime_1.jsx)("div", { className: "overflow-auto absolute inset-0", children: (0, jsx_runtime_1.jsx)(ScrollingContentTree_1.ScrollingContentTree, { selectedItemId: hoveredItem?.id ?? item?.id, rootItemId: config_1.templatesRootItemId, onSelectionChange: (node) => {
+                                    if (Array.isArray(node) && node[0]) {
+                                        node = node[0];
+                                    }
+                                    if (!node)
+                                        return;
+                                    getCommand(node)(null);
+                                } }) }) })] })),
+            id: "fromTemplate",
+        },
+    ];
+    if (wizards.length > 0) {
+        tabs.push({
+            label: "Wizards",
+            content: ((0, jsx_runtime_1.jsx)("div", { children: wizards.map((wizard) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center p-1 cursor-pointer hover:bg-gray-100 gap-2 text-xs", onClick: (ev) => {
+                        ev.stopPropagation();
+                        ev.preventDefault();
+                        editContext?.executeCommand({
+                            command: editContext?.configuration.pageWizard.startWizardCommand,
+                            data: { wizard, item: item.descriptor },
+                            event: ev,
+                        });
+                    }, children: [(0, jsx_runtime_1.jsx)("img", { className: "p-menuitem-icon", src: wizard.icon, style: { height: "16px" }, width: "16", height: "16", onDragStart: (e) => e.preventDefault() }), (0, jsx_runtime_1.jsx)("span", { className: "flex-1", children: wizard.name })] }, wizard.id))) })),
+            id: "wizards",
+        });
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "p-2", style: { display: "flex", alignItems: "center", cursor: "pointer" }, onMouseEnter: () => {
+            if (hideTimeoutRef.current) {
+                clearTimeout(hideTimeoutRef.current);
+            }
+            opRef.current && (opRef.current.style.display = "block");
+            filterRef.current && filterRef.current.focus();
+        }, onMouseLeave: () => {
+            hideTimeoutRef.current = setTimeout(() => {
+                opRef.current && (opRef.current.style.display = "none");
+            }, 200);
+        }, onClick: (ev) => {
+            ev.stopPropagation();
+            ev.preventDefault();
+        }, children: [(0, jsx_runtime_1.jsx)("i", { className: "mr-2 pi pi-plus" }), (0, jsx_runtime_1.jsx)("span", { className: "p-menuitem-text", children: "Insert" }), (0, jsx_runtime_1.jsx)("div", { ref: opRef, className: "absolute bg-white shadow-lg rounded-md z-50 p-2", onKeyDownCapture: (ev) => {
+                    ev.stopPropagation();
+                }, onKeyUpCapture: (ev) => {
+                    ev.stopPropagation();
+                }, style: {
+                    display: opRef.current ? "block" : "none",
+                    top: "-50px",
+                    left: "100%",
+                    minWidth: "450px",
+                    minHeight: "380px",
+                    border: "1px solid #ddd",
+                }, children: (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-4 flex flex-col", children: (0, jsx_runtime_1.jsx)(SimpleTabs_1.SimpleTabs, { tabs: tabs, setActiveTab: setActiveTab, activeTab: activeTab }) }) })] }));
+};
+exports.InsertMenuTemplate = InsertMenuTemplate;

package/dist/editor/ItemInfo.js

@@ -0,0 +1,30 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemInfo = ItemInfo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editContext_1 = require("./client/editContext");
+const CopyToClipboardButton_1 = require("./ui/CopyToClipboardButton");
+const Section_1 = require("./ui/Section");
+function ItemInfo({ item }) {
+    if (!item?.fields)
+        return;
+    const editContext = (0, editContext_1.useEditContext)();
+    function formatRow(label, value) {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "font-bold", children: label }), (0, jsx_runtime_1.jsx)("div", { children: value })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center py-2 px-3 my-2", children: [(0, jsx_runtime_1.jsx)("img", { src: item.largeIcon, alt: "Icon", className: "mr-2", style: { height: "32px", width: "32px" } }), (0, jsx_runtime_1.jsxs)("h2", { className: "text-l font-bold", children: [item.name, (0, jsx_runtime_1.jsx)("button", { className: "ml-2", onClick: () => {
+                                    editContext?.executeCommand({
+                                        command: editContext.configuration.commands.renameItem,
+                                        data: { items: [item] },
+                                    });
+                                }, children: (0, jsx_runtime_1.jsx)("i", { className: "pi pi-pencil" }) })] })] }), (0, jsx_runtime_1.jsx)(Section_1.Section, { title: "Info", children: (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-[min-content_1fr] gap-3 text-xs", children: [(0, jsx_runtime_1.jsx)("div", { className: "font-bold", children: "ID:" }), (0, jsx_runtime_1.jsxs)("div", { children: [item.id, " ", (0, jsx_runtime_1.jsx)(CopyToClipboardButton_1.CopyToClipboardButton, { text: item.id })] }), (0, jsx_runtime_1.jsx)("div", { className: "font-bold", children: "Path:" }), (0, jsx_runtime_1.jsxs)("div", { children: [item.path, " ", (0, jsx_runtime_1.jsx)(CopyToClipboardButton_1.CopyToClipboardButton, { text: item.path })] }), (0, jsx_runtime_1.jsx)("div", { className: "font-bold", children: "Language:" }), (0, jsx_runtime_1.jsx)("div", { children: item.language }), (0, jsx_runtime_1.jsx)("div", { className: "font-bold", children: "Version:" }), (0, jsx_runtime_1.jsx)("div", { children: item.versions > 0 ? item.version : "No versions" }), (0, jsx_runtime_1.jsx)("div", { className: "font-bold", children: "Template:" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("span", { className: "cursor-pointer hover:underline", onClick: () => {
+                                        editContext?.loadItem({
+                                            id: item.templateId,
+                                            language: "en",
+                                            version: 0,
+                                        });
+                                        editContext?.switchView("content-editor");
+                                    }, children: [" ", item.templateName, " (", item.templateId, " "] }), (0, jsx_runtime_1.jsx)(CopyToClipboardButton_1.CopyToClipboardButton, { text: item.templateId }), ")"] }), item.masterLanguages &&
+                            formatRow("Master languages", item.masterLanguages.join(", ")), item.translations && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "font-bold", children: "Languages" }), (0, jsx_runtime_1.jsx)("div", { children: item.translations?.join(", ") })] }))] }) })] }));
+}

package/dist/editor/LinkEditorDialog.js

@@ -0,0 +1,89 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkEditorDialog = LinkEditorDialog;
+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 dropdown_1 = require("primereact/dropdown");
+const divider_1 = require("primereact/divider");
+const button_1 = require("primereact/button");
+const splitter_1 = require("primereact/splitter");
+const ItemSearch_1 = __importDefault(require("./ui/ItemSearch"));
+const SimpleTabs_1 = require("./ui/SimpleTabs");
+const ScrollingContentTree_1 = require("./ScrollingContentTree");
+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)(0);
+    const [selectedItemId, setSelectedItemId] = (0, react_1.useState)("");
+    const [hoveredItemId, setHoveredItemId] = (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;
+    }
+    const tabs = [
+        {
+            id: "internal",
+            label: "Internal",
+            content: ((0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { className: "mt-4 flex-1", children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "relative h-full", children: (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 overflow-auto", children: (0, jsx_runtime_1.jsx)(ScrollingContentTree_1.ScrollingContentTree, { selectedItemId: hoveredItemId || selectedItemId, onSelectionChange: (selection) => {
+                                    setSelectedItemId(selection[0]?.id || "");
+                                } }) }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { children: (0, jsx_runtime_1.jsx)("div", { className: "relative ml-2 h-full w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 overflow-auto", children: (0, jsx_runtime_1.jsx)(ItemSearch_1.default, { itemSelected: (item) => {
+                                        setSelectedItemId(item.id);
+                                    }, setHoveredItem: (item) => ((item) => {
+                                        if (!item)
+                                            return;
+                                        setHoveredItemId(item.id);
+                                    })(item) }) }) }) })] })),
+        },
+        {
+            id: "external",
+            label: "External",
+            content: ((0, jsx_runtime_1.jsxs)("div", { className: "flex-1", children: [" ", (0, jsx_runtime_1.jsx)("label", { className: "mt-4 block text-sm", children: "Url:" }), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: url || "", onChange: (e) => {
+                            setUrl(e.target.value);
+                        }, className: "w-full text-sm" })] })),
+        },
+    ];
+    return ((0, jsx_runtime_1.jsx)(dialog_1.Dialog, { style: { width: "60%", height: "70%" }, onHide: onCancel, header: "Select link target", visible: true, onShow: () => {
+            // Trigger a resize event to recalculate TabView layout
+            window.dispatchEvent(new Event("resize"));
+        }, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex h-full flex-col p-4", children: [linkValue && ((0, jsx_runtime_1.jsx)(SimpleTabs_1.SimpleTabs, { tabs: tabs, activeTab: activeTabIndex, setActiveTab: setActiveTabIndex })), (0, jsx_runtime_1.jsx)(divider_1.Divider, {}), (0, jsx_runtime_1.jsx)("label", { className: "text-xs", children: "QueryString" }), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: queryString, onChange: (e) => setQueryString(e.target.value), className: "text-sm" }), (0, jsx_runtime_1.jsx)("label", { className: "mt-4 text-xs", children: "Window" }), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { options: targetWindows, optionLabel: "name", optionValue: "code", value: targetWindow, onChange: (e) => setTargetWindow(e.value), className: "text-sm" }), targetWindow === "custom" && ((0, jsx_runtime_1.jsxs)("div", { className: "m-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "block text-xs", children: "Custom:" }), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: customTarget || "", onChange: (e) => {
+                                setCustomTarget(e.target.value);
+                            }, className: "text-sm" })] })), (0, jsx_runtime_1.jsx)(divider_1.Divider, {}), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-end gap-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" })] })] }) }));
+}

package/dist/editor/MainLayout.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = MainLayout;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = __importDefault(require("react"));
+const utils_1 = require("primereact/utils");
+const editContext_1 = require("./client/editContext");
+const Icons_1 = require("./ui/Icons");
+const SidebarView_1 = require("./sidebar/SidebarView");
+const Splitter_1 = require("./ui/Splitter");
+const ViewSelector_1 = require("./sidebar/ViewSelector");
+function MainLayout({ view, centerPanelView, rightSidebar, rightSidebarTitle, className, }) {
+    const panels = [];
+    const editContext = (0, editContext_1.useEditContext)();
+    const mainLayoutDivRef = (0, react_1.useRef)(null);
+    const leftSidebarRef = react_2.default.useRef(null);
+    if (!editContext)
+        return null;
+    if (view.leftSidebar)
+        panels.push({
+            name: "leftSidebar",
+            defaultSize: 350,
+            content: ((0, jsx_runtime_1.jsx)("div", { className: "w-full h-full", ref: leftSidebarRef, style: { wordBreak: "normal" }, children: (0, jsx_runtime_1.jsx)(SidebarView_1.SidebarView, { sidebar: view.leftSidebar, editContext: editContext, active: true }) })),
+        });
+    panels.push({
+        name: "center",
+        defaultSize: "auto",
+        content: centerPanelView,
+    });
+    if (rightSidebar) {
+        panels.push({
+            name: "rightSidebar",
+            defaultSize: 250,
+            content: rightSidebar,
+            collapsible: true,
+        });
+    }
+    if (!editContext?.configuration.editor.embedded) {
+        className = (0, utils_1.classNames)("fixed inset-0", className);
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.classNames)("flex flex-col select-none", className), ref: mainLayoutDivRef, children: [editContext?.configuration.editor.titlebar, (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-1", children: [!view.hideViewSelector && (0, jsx_runtime_1.jsx)(ViewSelector_1.ViewSelector, {}), (0, jsx_runtime_1.jsx)("div", { className: "flex-1", children: (0, jsx_runtime_1.jsx)(Splitter_1.Splitter, { localStorageKey: "editor.panelSizes", expandLabel: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center", children: [(0, jsx_runtime_1.jsx)(Icons_1.NavigatorIcon, {}), (0, jsx_runtime_1.jsxs)("div", { className: "mt-3", children: [rightSidebarTitle, " "] })] }), panels: panels }) })] })] }));
+}

package/dist/editor/NewEditorClient.js

@@ -0,0 +1,9 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewEditorClient = NewEditorClient;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function NewEditorClient(props) {
+    console.log(props);
+    return (0, jsx_runtime_1.jsx)("div", { children: "Hello" });
+}