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

package/dist/cjs/editor/EditorClient.js

@@ -20,61 +20,36 @@ const react_uuid_1 = __importDefault(require("react-uuid"));
 const api_1 = require("primereact/api");
 const menubar_1 = require("primereact/menubar");
 const progressspinner_1 = require("primereact/progressspinner");
-const tabview_1 = require("primereact/tabview");
 const toast_1 = require("primereact/toast");
 const splitter_1 = require("primereact/splitter");
 const blockui_1 = require("primereact/blockui");
 const confirmdialog_1 = require("primereact/confirmdialog");
-const sidebar_1 = require("primereact/sidebar");
 const __1 = require("..");
 const navigation_1 = require("next/navigation");
-const FieldList_1 = require("./FieldList");
-const GraphQL_1 = require("./GraphQL");
 const ComponentTree_1 = require("./ComponentTree");
-const ComponentInfo_1 = require("./ComponentInfo");
 const LanguageSelector_1 = require("./LanguageSelector");
 const componentTreeHelper_1 = require("./componentTreeHelper");
 const ComponentPalette_1 = require("./ComponentPalette");
-const DictionaryEditor_1 = require("./DictionaryEditor");
 const AiTerminal_1 = require("./AiTerminal");
 const EditHistory_1 = require("./EditHistory");
-const Debug_1 = require("./Debug");
-const PageInfo_1 = require("./PageInfo");
 const VersionSelector_1 = require("./VersionSelector");
 const editService_1 = require("./editService");
 require("../../editor.css");
-require("../../primereact/resources/primereact.min.css");
 require("../../primeicons/primeicons.css");
-require("../../primereact/resources/themes/lara-light-indigo/theme.css");
-// Hook
-function useEventListener(eventName, handler, element) {
-    // Create a ref that stores handler
-    const savedHandler = (0, react_1.useRef)();
-    // Update ref.current value if handler changes.
-    // This allows our effect below to always get latest handler ...
-    // ... without us needing to pass it in effect deps array ...
-    // ... and potentially cause effect to re-run every render.
-    (0, react_1.useEffect)(() => {
-        savedHandler.current = handler;
-    }, [handler]);
-    (0, react_1.useEffect)(() => {
-        // Make sure element supports addEventListener
-        // On
-        const isSupported = element && element.addEventListener;
-        if (!isSupported)
-            return;
-        // Create event listener that calls handler function stored in ref
-        const eventListener = (event) => savedHandler.current(event);
-        // Add event listener
-        element.addEventListener(eventName, eventListener);
-        // Remove event listener on cleanup
-        return () => {
-            element.removeEventListener(eventName, eventListener);
-        };
-    }, [eventName, element] // Re-run if eventName or element changes
-    );
-}
-function EditorClient({ content, dictionaryObject, edit, children, }) {
+//import "../../primereact/resources/themes/lara-light-indigo/theme.css";
+require("../../primereact/resources/themes/md-light-indigo/theme.css");
+const MediaSelector_1 = require("./MediaSelector");
+const componentCommands_1 = require("./componentCommands");
+const contentService_1 = require("./contentService");
+const ConfirmationDialog_1 = __importDefault(require("./ConfirmationDialog"));
+const SidebarTabs_1 = __importDefault(require("./SidebarTabs"));
+const MainLayout_1 = __importDefault(require("./MainLayout"));
+const button_1 = require("primereact/button");
+const Utils_1 = require("./Utils");
+const utils_1 = require("primereact/utils");
+const ContentTree_1 = __importDefault(require("./ContentTree"));
+const Workbox_1 = __importDefault(require("./Workbox"));
+function EditorClient({ page, dictionaryObject, edit, site, children, }) {
     const router = (0, navigation_1.useRouter)();
     const pathname = (0, navigation_1.usePathname)();
     const searchParams = (0, navigation_1.useSearchParams)();
@@ -86,35 +61,115 @@ function EditorClient({ content, dictionaryObject, edit, children, }) {
     const [unresolvedDictionaryKeys, setUnresolvedDictionaryKeys] = (0, react_1.useState)([]);
     const [editData, setEditData] = (0, react_1.useState)(edit);
     const [refreshCompletedFlag, setRefreshCompletedFlag] = (0, react_1.useState)(false);
+    const [refreshing, setRefreshing] = (0, react_1.useState)(false);
     const [updateContentEditingFields, setUpdateContentEditingFields] = (0, react_1.useState)(false);
-    const [page, setPageData] = (0, react_1.useState)(null);
     const [uiBlocked, setUiBlocked] = (0, react_1.useState)(false);
-    const [componentsPaletteVisible, setComponentsPaletteVisible] = (0, react_1.useState)(false);
     const [dragObject, setDragObject] = (0, react_1.useState)();
-    const [hidePalette, setHidePalette] = (0, react_1.useState)(false);
     const [refreshTimer, setRefreshTimer] = (0, react_1.useState)();
+    const [mediaResolver, setMediaResolver] = (0, react_1.useState)();
+    const [mediaSelectorVisible, setMediaSelectorVisible] = (0, react_1.useState)(false);
+    const [selectedMediaIdPath, setSelectedMediaIdPath] = (0, react_1.useState)("");
+    const [scrollIntoView, setScrollIntoView] = (0, react_1.useState)();
+    const [nextSelection, setNextSelection] = (0, react_1.useState)();
+    const editorContainerRef = (0, react_1.useRef)(null);
+    const confirmationDialogRef = (0, react_1.useRef)(null);
+    const [showRightSidebar, setShowRightSidebar] = (0, Utils_1.useLocalStorage)("alpaca-headless-editor-show-right-sidebar", false);
+    const [showTabsCenter, setShowTabsCenter] = (0, react_1.useState)(false);
+    const [item, setItem] = (0, react_1.useState)();
+    const [focusedField, setFocusedField] = (0, react_1.useState)();
+    const [device, setDevice] = (0, react_1.useState)("desktop");
+    const [zoom, setZoom] = (0, react_1.useState)(1);
+    const [scroll, setScroll] = (0, react_1.useState)(0);
+    const [fullscreen, setFullscreen] = (0, react_1.useState)(false);
+    const [showFullscreenHint, setShowFullscreenHint] = (0, react_1.useState)(false);
     const sessionId = searchParams.get("session");
     if (!sessionId)
         return;
+    const hasUnsavedChanges = () => edit.operations.filter((op) => !op.isCommitted).length;
+    function ensureSavedBeforeLeaving(callback, title) {
+        var _a;
+        if (!hasUnsavedChanges()) {
+            callback();
+            return;
+        }
+        (_a = confirmationDialogRef.current) === null || _a === void 0 ? void 0 : _a.confirm({
+            message: "You have unsaved changes.",
+            header: title || "Close document",
+            icon: "pi pi-exclamation-triangle",
+            acceptLabel: "Save changes",
+            rejectLabel: "Discard changes",
+            showCancel: true,
+            accept: () => saveAndRefresh(callback),
+            reject: () => {
+                callback();
+            },
+        });
+    }
+    function loadUrl(url) {
+        setRefreshing(true);
+        router.push(url, { scroll: false });
+    }
+    function createAndSwitchToNewVersion() {
+        ensureSavedBeforeLeaving(() => __awaiter(this, void 0, void 0, function* () {
+            yield (0, editService_1.createVersion)(getPageItemDescriptor(), sessionId);
+            const current = new URLSearchParams(Array.from(searchParams.entries()));
+            current.delete("version");
+            current.set("session", (0, react_uuid_1.default)());
+            const newUrl = `${pathname}?${current.toString()}`;
+            router.push(newUrl, { scroll: false });
+        }), "Create version");
+    }
     function switchLanguage(language) {
-        const current = new URLSearchParams(Array.from(searchParams.entries()));
-        current.set("language", language);
-        const newUrl = `${pathname}?${current.toString()}`;
-        router.replace(newUrl, { scroll: false });
+        ensureSavedBeforeLeaving(() => __awaiter(this, void 0, void 0, function* () {
+            const current = new URLSearchParams(Array.from(searchParams.entries()));
+            current.set("language", language);
+            current.delete("version");
+            current.set("session", (0, react_uuid_1.default)());
+            const newUrl = `${pathname}?${current.toString()}`;
+            loadUrl(newUrl);
+        }));
     }
     function switchVersion(version) {
-        const current = new URLSearchParams(Array.from(searchParams.entries()));
-        current.set("version", version.toString());
-        const newUrl = `${pathname}?${current.toString()}`;
-        router.replace(newUrl, { scroll: false });
+        ensureSavedBeforeLeaving(() => __awaiter(this, void 0, void 0, function* () {
+            const current = new URLSearchParams(Array.from(searchParams.entries()));
+            current.set("version", version.toString());
+            current.set("session", (0, react_uuid_1.default)());
+            const newUrl = `${pathname}?${current.toString()}`;
+            loadUrl(newUrl);
+        }));
+    }
+    function navigateToPage(pageId) {
+        ensureSavedBeforeLeaving(() => __awaiter(this, void 0, void 0, function* () {
+            const current = new URLSearchParams(Array.from(searchParams.entries()));
+            current.set("itemid", pageId);
+            current.delete("version");
+            current.set("session", (0, react_uuid_1.default)());
+            const newUrl = `${pathname}?${current.toString()}`;
+            setNextSelection([]);
+            setItem(undefined);
+            loadUrl(newUrl);
+        }));
+    }
+    function loadItem(itemToLoad) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const isNewItem = itemToLoad.id != (item === null || item === void 0 ? void 0 : item.id) ||
+                itemToLoad.language != (item === null || item === void 0 ? void 0 : item.language) ||
+                itemToLoad.version != (item === null || item === void 0 ? void 0 : item.version);
+            const isPageItem = itemToLoad.id == page.id && itemToLoad.language == page.language;
+            if (isNewItem && !isPageItem) {
+                const result = yield (0, contentService_1.getItem)(page, itemToLoad, sessionId);
+                setItem(result);
+            }
+        });
     }
     function handleErrorResult(result) {
+        var _a;
         if (result.type === "error") {
             showErrorToast(result);
             return true;
         }
         if (result.type === "unauthenticated") {
-            (0, confirmdialog_1.confirmDialog)({
+            (_a = confirmationDialogRef.current) === null || _a === void 0 ? void 0 : _a.confirm({
                 header: "Not logged in",
                 message: "You are not logged in anymore. Proceed to login page?",
                 accept: () => {
@@ -131,6 +186,7 @@ function EditorClient({ content, dictionaryObject, edit, children, }) {
     }, [selection]);
     (0, react_1.useEffect)(() => {
         const sync = () => __awaiter(this, void 0, void 0, function* () {
+            var _a;
             if (currentEditOperation) {
                 const result = yield (0, editService_1.executeEditOperation)(currentEditOperation, sessionId);
                 if (handleErrorResult(result))
@@ -140,12 +196,20 @@ function EditorClient({ content, dictionaryObject, edit, children, }) {
                         result.id) {
                     edit.operations = edit.operations.filter((x) => !x.undone);
                     edit.operations.push(result);
-                    setEditData(Object.assign({}, edit));
                 }
-                if (result.type === "add-component" ||
+                else {
+                    const lastOp = edit.operations.findLast((x) => x);
+                    if (lastOp === null || lastOp === void 0 ? void 0 : lastOp.isCommitted) {
+                        lastOp.isCommitted = false;
+                    }
+                }
+                setEditData(Object.assign({}, edit));
+                if (result.type == "move-component" ||
+                    result.type === "add-component" ||
                     result.type === "link-component") {
-                    console.log("CURRENT: " + JSON.stringify(result));
-                    setSelection([result.componentId]);
+                    setNextSelection([(_a = result.component) === null || _a === void 0 ? void 0 : _a.id]);
+                    requestRefresh("immediate");
+                    return;
                 }
                 if (!currentEditOperation.noRefresh)
                     requestRefresh(currentEditOperation.refreshAfterQuietPeriod
@@ -155,12 +219,66 @@ function EditorClient({ content, dictionaryObject, edit, children, }) {
         });
         sync();
     }, [currentEditOperation]);
+    const ensureLock = (field) => __awaiter(this, void 0, void 0, function* () {
+        if (!field || !field.item)
+            return;
+        if (!field.hasLock) {
+            lockItemAndRefresh(field.item);
+        }
+    });
+    const lockItemAndRefresh = (item) => __awaiter(this, void 0, void 0, function* () {
+        yield (0, editService_1.lockItem)(item);
+        requestRefresh("immediate");
+    });
+    const executeWorkflowCommandAndRefresh = (item, commandId) => __awaiter(this, void 0, void 0, function* () {
+        yield (0, editService_1.executeWorkflowCommand)(item, commandId, "");
+        requestRefresh("immediate");
+    });
+    (0, react_1.useEffect)(() => {
+        if (focusedField === null || focusedField === void 0 ? void 0 : focusedField.item) {
+            if (!getComponentById(focusedField.item.id))
+                loadItem(focusedField.item);
+            ensureLock(focusedField);
+        }
+    }, [focusedField]);
+    const addParentComponentReferencesToPlaceholders = (component) => {
+        component.placeholders.forEach((p) => {
+            p.parentComponent = component;
+        });
+    };
+    (0, react_1.useEffect)(() => {
+        var _a;
+        setRefreshCompletedFlag(!refreshCompletedFlag);
+        if (nextSelection) {
+            setSelection(nextSelection);
+            setNextSelection(undefined);
+        }
+        setLiveUpdatingFields([]);
+        page === null || page === void 0 ? void 0 : page.placeholders.forEach((p) => {
+            p.components.forEach((c) => {
+                addParentComponentReferencesToPlaceholders(c);
+            });
+        });
+        if ((page === null || page === void 0 ? void 0 : page.versions.length) === 0) {
+            (_a = confirmationDialogRef.current) === null || _a === void 0 ? void 0 : _a.confirm({
+                message: "This page has no version in language " +
+                    (page === null || page === void 0 ? void 0 : page.language) +
+                    ". Do you want to create a new version?",
+                header: "Create Version?",
+                icon: "pi pi-exclamation-triangle",
+                acceptLabel: "Yes, create version",
+                rejectLabel: "No",
+                accept: () => createAndSwitchToNewVersion(),
+            });
+        }
+        setRefreshing(false);
+    }, [page]);
     const requestRefresh = (mode) => {
         if (mode === "immediate") {
             console.log("Immediate refresh requested");
             clearTimeout(refreshTimer);
+            setRefreshing(true);
             router.refresh();
-            setRefreshCompletedFlag(!refreshCompletedFlag);
             setRefreshTimer(undefined);
             return;
         }
@@ -172,9 +290,9 @@ function EditorClient({ content, dictionaryObject, edit, children, }) {
             setRefreshTimer(setTimeout(() => {
                 console.log("refreshing");
                 router.refresh();
-                setRefreshCompletedFlag(!refreshCompletedFlag);
+                setRefreshing(true);
                 setRefreshTimer(undefined);
-            }, mode === "waitForQuietPeriod" ? 2000 : 1000));
+            }, mode === "waitForQuietPeriod" ? 2000 : 700));
         }
     };
     const saveAndRefresh = (callback) => __awaiter(this, void 0, void 0, function* () {
@@ -188,7 +306,9 @@ function EditorClient({ content, dictionaryObject, edit, children, }) {
             setUiBlocked(false);
             return;
         }
+        setCurrentEditOperation(undefined);
         router.refresh();
+        setRefreshing(true);
         //setEditOperations([]);
         setUiBlocked(false);
         toast.current.show({
@@ -200,19 +320,10 @@ function EditorClient({ content, dictionaryObject, edit, children, }) {
         if (callback)
             callback();
     });
-    // function ensureSaved(callback: () => void) {
-    //   if (!edit.operations.length) {
-    //     callback();
-    //     return;
-    //   }
-    //   confirmDialog({
-    //     message: "Save changes?",
-    //     header: "Save changes?",
-    //     icon: "pi pi-exclamation-triangle",
-    //     accept: () => saveAndRefresh(callback),
-    //     reject: callback,
-    //   });
-    // }
+    (0, react_1.useEffect)(() => {
+        if (fullscreen)
+            setShowFullscreenHint(true);
+    }, [fullscreen]);
     function handleKeyDown(event) {
         return __awaiter(this, void 0, void 0, function* () {
             if (event.ctrlKey && event.key === "s") {
@@ -227,14 +338,16 @@ function EditorClient({ content, dictionaryObject, edit, children, }) {
                 event.preventDefault();
                 yield redo();
             }
+            if (event.ctrlKey && event.key === "F11") {
+                event.preventDefault();
+                console.log("toggle fullscreen");
+                setFullscreen(!fullscreen);
+            }
         });
     }
     if (typeof window !== "undefined")
-        useEventListener("keydown", handleKeyDown, window);
+        (0, Utils_1.useEventListenerExt)("keydown", handleKeyDown, window);
     const toast = (0, react_1.useRef)();
-    (0, react_1.useEffect)(() => {
-        setPageData(content);
-    }, [content]);
     (0, react_1.useEffect)(() => {
         setEditData(edit);
     }, [edit]);
@@ -249,6 +362,7 @@ function EditorClient({ content, dictionaryObject, edit, children, }) {
             let result = yield (0, editService_1.executeRedo)(sessionId);
             if (result.type === "success") {
                 router.refresh();
+                setRefreshing(true);
                 return true;
             }
             else {
@@ -265,12 +379,13 @@ function EditorClient({ content, dictionaryObject, edit, children, }) {
             life: 3000,
         });
     }
-    function undo() {
+    function undo(numOperations) {
         return __awaiter(this, void 0, void 0, function* () {
             setUpdateContentEditingFields(!updateContentEditingFields);
-            let result = yield (0, editService_1.executeUndo)(sessionId);
+            let result = yield (0, editService_1.executeUndo)(sessionId, numOperations);
             if (result.type === "success") {
                 router.refresh();
+                setRefreshing(true);
                 return true;
             }
             else {
@@ -279,206 +394,360 @@ function EditorClient({ content, dictionaryObject, edit, children, }) {
             }
         });
     }
+    const getLiveFieldIfExists = (field) => {
+        const existingField = liveUpdatingFields.find((f) => {
+            var _a, _b, _c, _d, _e, _f;
+            return f.id === field.id &&
+                ((_a = f.item) === null || _a === void 0 ? void 0 : _a.language) === ((_b = field.item) === null || _b === void 0 ? void 0 : _b.language) &&
+                ((_c = f.item) === null || _c === void 0 ? void 0 : _c.version) === ((_d = field.item) === null || _d === void 0 ? void 0 : _d.version) &&
+                ((_e = f.item) === null || _e === void 0 ? void 0 : _e.id) === ((_f = field.item) === null || _f === void 0 ? void 0 : _f.id);
+        });
+        if (existingField)
+            return existingField;
+        return null;
+    };
     const getLiveField = (field) => {
-        const existingField = liveUpdatingFields.find((f) => f.id === field.id &&
-            f.language === field.language &&
-            f.version === field.version &&
-            f.itemId === field.itemId);
+        const existingField = liveUpdatingFields.find((f) => {
+            var _a, _b, _c, _d, _e, _f;
+            return f.id === field.id &&
+                ((_a = f.item) === null || _a === void 0 ? void 0 : _a.language) === ((_b = field.item) === null || _b === void 0 ? void 0 : _b.language) &&
+                ((_c = f.item) === null || _c === void 0 ? void 0 : _c.version) === ((_d = field.item) === null || _d === void 0 ? void 0 : _d.version) &&
+                ((_e = f.item) === null || _e === void 0 ? void 0 : _e.id) === ((_f = field.item) === null || _f === void 0 ? void 0 : _f.id);
+        });
         if (existingField)
             return existingField;
-        setLiveUpdatingFields([...liveUpdatingFields, field]);
+        liveUpdatingFields.push(field);
         return field;
     };
-    const selectedComponent = selection.length === 1 && page ? getComponentById(selection[0]) : null;
-    const editField = (field, value, noRefresh = true) => {
-        var _a;
+    const editField = ({ field, value, rawValue, refresh = "immediate", }) => {
+        var _a, _b;
         if (!page)
             return;
-        const component = (0, componentTreeHelper_1.findComponent)(field.itemId, page.placeholders);
+        const component = (0, componentTreeHelper_1.findComponent)(field.item.id, page.placeholders);
         let op = editService_1.currentOperation;
         if (!op ||
             op.type !== "edit-field" ||
-            op.itemId !== field.itemId ||
+            op.itemId !== ((_a = field.item) === null || _a === void 0 ? void 0 : _a.id) ||
             op.fieldId !== field.id ||
-            op.language !== field.language ||
-            op.version !== field.version) {
+            op.language !== field.item.language ||
+            op.version !== field.item.version ||
+            op.isCommitted) {
             op = {
                 type: "edit-field",
-                itemId: field.itemId,
+                itemId: field.item.id,
                 fieldId: field.id,
-                version: field.version,
-                language: field.language,
+                version: field.item.version,
+                language: field.item.language,
                 fieldName: field.name,
-                itemName: field.itemId == page.id ? "Page" : (_a = component === null || component === void 0 ? void 0 : component.name) !== null && _a !== void 0 ? _a : "<unknown>",
-                pageItemId: page.id,
-                pageItemLanguage: page.language,
-                pageItemVersion: page.version,
+                itemName: field.item.id == page.id ? "Page" : (_b = component === null || component === void 0 ? void 0 : component.name) !== null && _b !== void 0 ? _b : "<unknown>",
+                pageItem: getPageItemDescriptor(),
                 date: new Date(),
                 id: (0, react_uuid_1.default)(),
             };
         }
         op.date = new Date();
-        op.noRefresh = noRefresh;
-        op.refreshAfterQuietPeriod = !noRefresh;
-        op.value = value;
-        getLiveField(field).value = value;
-        function getField(fields, id) {
-            return Object.values(fields).find((f) => f.id === id);
-        }
-        if (component) {
-            const f = getField(component.fields, field.id);
-            if (f && f.value != value) {
-                f.value = value;
-            }
-        }
-        else {
-            const f = getField(page.fields, field.id);
-            if (f && f.value != value)
-                f.value = value;
+        op.noRefresh = refresh === "none" || refresh === "immediate";
+        op.refreshAfterQuietPeriod = refresh === "waitForQuietPeriod";
+        op.value = rawValue !== null && rawValue !== void 0 ? rawValue : value;
+        op.isCommitted = false;
+        const firstEditInheritedComponent = (component === null || component === void 0 ? void 0 : component.isInheritedFromMasterLanguage) && op.language != page.language;
+        if (firstEditInheritedComponent)
+            op.language = page.language;
+        if (value || value === "") {
+            const liveField = getLiveField(field);
+            liveField.value = value;
+            liveField.rawValue = op.value;
         }
         (0, editService_1.setCurrentOperation)(op);
         setCurrentEditOperation(Object.assign({}, op));
+        if (refresh == "immediate" || firstEditInheritedComponent)
+            requestRefresh("immediate");
     };
-    const menuItems = [
-        {
-            label: "Save",
-            icon: "pi pi-fw pi-save text-red",
-            command: () => saveAndRefresh(),
+    const selectMedia = (0, react_1.useCallback)(({ selectedIdPath }) => {
+        setSelectedMediaIdPath(selectedIdPath);
+        setMediaSelectorVisible(true);
+        return new Promise((resolve) => {
+            setMediaResolver(() => resolve);
+        });
+    }, []);
+    const onMediaSelect = (0, react_1.useCallback)((mediaUrl) => {
+        mediaResolver === null || mediaResolver === void 0 ? void 0 : mediaResolver(mediaUrl);
+        setMediaSelectorVisible(false);
+        setMediaResolver(undefined);
+    }, [mediaResolver]);
+    function getPageItemDescriptor() {
+        return {
+            id: page.id,
+            language: page.language,
+            version: page.version,
+        };
+    }
+    const editContext = {
+        sessionId: sessionId,
+        editorContainerRef,
+        selection,
+        setSelection,
+        selectedForInsertion,
+        setSelectedForInsertion,
+        editField,
+        getComponentById,
+        dragObject,
+        dictionary,
+        setDictionary,
+        requestRefresh,
+        refreshCompletedFlag,
+        unresolvedDictionaryKeys,
+        setUnresolvedDictionaryKeys,
+        updateContentEditingFields,
+        getLiveField,
+        getLiveFieldIfExists,
+        selectMedia,
+        showToast: () => { },
+        scrollIntoView,
+        setScrollIntoView,
+        focusedField,
+        setFocusedField,
+        zoom,
+        fullscreen,
+        undo,
+        getPictureFieldValue: (field, rawValue) => __awaiter(this, void 0, void 0, function* () {
+            return (0, editService_1.getPictureValue)(field, rawValue, site, sessionId);
+        }),
+        // removeComponents: deleteComponents,
+        // removeSelectedComponents: deleteSelectedComponents,
+        getComponentCommands: (components) => {
+            return (0, componentCommands_1.getComponentCommands)(components, editContext);
         },
-        {
-            label: "Insert",
-            icon: "pi pi-fw pi-sitemap",
-            command: () => setComponentsPaletteVisible(true),
+        dragStart: (dragObject) => {
+            //      console.log("dragging " + JSON.stringify(dragObject));
+            setDragObject(dragObject);
         },
-    ];
-    const spinner = (0, jsx_runtime_1.jsx)(progressspinner_1.ProgressSpinner, {});
-    const endContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(LanguageSelector_1.LanguageSelector, { page: page, onLanguageSelected: (language) => {
-                    if (!language)
-                        return;
-                    //ensureSaved(() => switchLanguage(language));
-                    switchLanguage(language);
-                } }), (0, jsx_runtime_1.jsx)(VersionSelector_1.VersionSelector, { page: page, onVersionSelected: (version) => {
-                    switchVersion(version);
-                } })] }));
-    return ((0, jsx_runtime_1.jsxs)(__1.EditContextProvider, { value: {
-            sessionId: sessionId,
-            selection,
-            setSelection,
-            selectedForInsertion,
-            setSelectedForInsertion,
-            editField,
-            getComponentById,
-            dragObject,
-            dictionary,
-            setDictionary,
-            requestRefresh,
-            refreshCompletedFlag,
-            unresolvedDictionaryKeys,
-            setUnresolvedDictionaryKeys,
-            updateContentEditingFields,
-            getLiveField,
-            showToast: () => { },
-            removeComponent: (componentId, callback) => {
-                (0, confirmdialog_1.confirmDialog)({
-                    message: "Are you sure you want to remove this component?",
-                    header: "Remove component",
-                    icon: "pi pi-exclamation-triangle",
-                    accept: () => {
-                        var _a;
-                        const op = {
-                            type: "remove-component",
-                            date: new Date(),
-                            id: (0, react_uuid_1.default)(),
-                            pageItemId: page.id,
-                            pageItemLanguage: page.language,
-                            pageItemVersion: page.version,
-                            componentId,
-                            componentName: (_a = getComponentById(componentId)) === null || _a === void 0 ? void 0 : _a.name,
-                        };
-                        setCurrentEditOperation(op);
-                        callback(true);
+        droppedInPlaceholder: (placeholderKey, index) => __awaiter(this, void 0, void 0, function* () {
+            if (!dragObject)
+                return;
+            console.log(dragObject.templateId + " dropped in " + placeholderKey + " " + index);
+            // console.log(JSON.stringify(page));
+            const placeholderKeyComponents = placeholderKey.split("_");
+            const parentId = placeholderKeyComponents.length === 1
+                ? null
+                : placeholderKeyComponents[0];
+            if (parentId)
+                setSelection([parentId]);
+            const placeholderName = placeholderKeyComponents.length === 1
+                ? placeholderKeyComponents[0]
+                : placeholderKeyComponents[1];
+            let op;
+            if (dragObject.type == "template") {
+                op = {
+                    type: "add-component",
+                    pageItem: getPageItemDescriptor(),
+                    parent: parentId && {
+                        id: parentId,
+                        language: page.language,
+                        version: page.version,
                     },
-                });
-            },
-            openComponentPalette: () => setComponentsPaletteVisible(true),
-            dragStart: (dragObject) => {
-                console.log("dragging " + JSON.stringify(dragObject));
-                setDragObject(dragObject);
-            },
-            droppedInPlaceholder: (placeholderKey, index) => __awaiter(this, void 0, void 0, function* () {
-                if (!dragObject)
-                    return;
-                console.log(dragObject.templateId +
-                    " dropped in " +
-                    placeholderKey +
-                    " " +
-                    index);
-                // console.log(JSON.stringify(page));
-                const placeholderKeyComponents = placeholderKey.split("_");
-                const parentId = placeholderKeyComponents.length === 1
-                    ? null
-                    : placeholderKeyComponents[0];
-                const placeholderName = placeholderKeyComponents.length === 1
-                    ? placeholderKeyComponents[0]
-                    : placeholderKeyComponents[1];
-                let op;
-                if (dragObject.type == "template") {
+                    placeholderName: placeholderName,
+                    placeholderIndex: index,
+                    templateId: dragObject === null || dragObject === void 0 ? void 0 : dragObject.templateId,
+                    date: new Date(),
+                    id: (0, react_uuid_1.default)(),
+                };
+            }
+            if (dragObject.type == "component" ||
+                (dragObject.type == "link-component" && dragObject.component)) {
+                const parentComponent = parentId ? getComponentById(parentId) : null;
+                if (dragObject.type == "link-component") {
                     op = {
-                        type: "add-component",
-                        pageItemId: page.id,
-                        pageItemLanguage: page.language,
-                        pageItemVersion: page.version,
-                        parentItemId: parentId,
+                        type: "link-component",
+                        pageItem: getPageItemDescriptor(),
+                        parent: parentId && {
+                            id: parentId,
+                            language: page.language,
+                            version: page.version,
+                            name: parentComponent === null || parentComponent === void 0 ? void 0 : parentComponent.name,
+                        },
                         placeholderName: placeholderName,
                         placeholderIndex: index,
-                        templateId: dragObject === null || dragObject === void 0 ? void 0 : dragObject.templateId,
                         date: new Date(),
                         id: (0, react_uuid_1.default)(),
+                        linkedComponentItem: dragObject.component,
                     };
                 }
-                if (dragObject.type == "component" ||
-                    (dragObject.type == "link-component" && dragObject.componentId)) {
+                else {
                     op = {
-                        type: dragObject.type == "link-component"
-                            ? "link-component"
-                            : "move-component",
-                        pageItemId: page.id,
-                        pageItemLanguage: page.language,
-                        pageItemVersion: page.version,
-                        parentItemId: parentId,
+                        type: "move-component",
+                        pageItem: getPageItemDescriptor(),
+                        parent: parentId && {
+                            id: parentId,
+                            language: page.language,
+                            version: page.version,
+                            name: parentComponent === null || parentComponent === void 0 ? void 0 : parentComponent.name,
+                        },
                         placeholderName: placeholderName,
                         placeholderIndex: index,
-                        componentId: dragObject.componentId,
+                        component: dragObject.component,
                         date: new Date(),
                         id: (0, react_uuid_1.default)(),
                     };
                 }
-                //const newOps = [...editOperations, op];
-                //setEditOperations();
-                // await sendEditOperationsToServer(newOps as EditOperation[]);
-                // router.refresh();
-                //setEditOperations(newOps);
-                if (op)
-                    setCurrentEditOperation(op);
-                setDragObject(undefined);
-            }),
-        }, children: [(0, jsx_runtime_1.jsx)(toast_1.Toast, { ref: toast }), (0, jsx_runtime_1.jsxs)(api_1.PrimeReactProvider, { children: [(0, jsx_runtime_1.jsx)(confirmdialog_1.ConfirmDialog, {}), (0, jsx_runtime_1.jsx)(sidebar_1.Sidebar, { style: { width: "40%" }, visible: componentsPaletteVisible, position: "right", onHide: () => setComponentsPaletteVisible(false), header: "Insert component", pt: {
-                            mask: {
-                                onDragOver: () => setHidePalette(true),
-                                style: {
-                                    left: hidePalette || !componentsPaletteVisible ? "100vw" : 0,
-                                },
-                            },
-                        }, children: page && ((0, jsx_runtime_1.jsx)(ComponentPalette_1.ComponentPalette, { page: page, selection: selection, dragStart: (dragObject) => {
-                                //console.log("dragging " + JSON.stringify(dragObject));
-                                setDragObject(dragObject);
-                            }, dragEnd: () => {
-                                setDragObject(undefined);
-                                if (hidePalette) {
-                                    setComponentsPaletteVisible(false);
-                                    setHidePalette(false);
-                                }
-                                setSelectedForInsertion("");
-                            } })) }), (0, jsx_runtime_1.jsxs)(blockui_1.BlockUI, { blocked: uiBlocked, template: spinner, children: [(0, jsx_runtime_1.jsx)(menubar_1.Menubar, { model: menuItems, end: endContent }), (0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 30, 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: 30, className: "a-overflow-hidden a-relative", children: (0, jsx_runtime_1.jsx)("div", { className: "a-inset-0 a-absolute a-overflow-y-auto", children: (0, jsx_runtime_1.jsx)(ComponentTree_1.ComponentTree, { page: page, selection: selection }) }) }), (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", scrollable: true, children: [selectedComponent && ((0, jsx_runtime_1.jsxs)(tabview_1.TabPanel, { header: "Fields", children: [(0, jsx_runtime_1.jsx)(ComponentInfo_1.ComponentInfo, { component: selectedComponent }), (0, jsx_runtime_1.jsx)(FieldList_1.FieldList, { fields: selectedComponent.fields })] })), selectedComponent && ((0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "GraphQL", style: { height: "100%" }, children: (0, jsx_runtime_1.jsx)(GraphQL_1.GraphQL, { component: selectedComponent }) })), (0, jsx_runtime_1.jsxs)(tabview_1.TabPanel, { header: "Page", children: [page && (0, jsx_runtime_1.jsx)(PageInfo_1.PageInfo, { page: page }), page && (0, jsx_runtime_1.jsx)(FieldList_1.FieldList, { fields: page.fields })] }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Dictionary", children: (0, jsx_runtime_1.jsx)(DictionaryEditor_1.DictionaryEditor, { dictionary: dictionary }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Debug", children: (0, jsx_runtime_1.jsx)(Debug_1.Debug, { component: selectedComponent, page: page }) })] }) })] }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 55, className: "alpaca-overflow-scroll alpaca-editor-content", children: (0, jsx_runtime_1.jsx)("div", { onDragEndCapture: () => setDragObject(undefined), className: "alpaca-editor-container", children: children }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 15, children: (0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { layout: "vertical", className: "alpaca-editor", children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "overflow-hidden a-relative", children: (0, jsx_runtime_1.jsx)(EditHistory_1.EditHistory, { operations: editData === null || editData === void 0 ? void 0 : editData.operations }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "overflow-hidden a-relative", children: (0, jsx_runtime_1.jsx)(AiTerminal_1.AiTerminal, { selection: selection, requestRefresh: requestRefresh }) })] }) })] })] })] })] }));
+            }
+            //const newOps = [...editOperations, op];
+            //setEditOperations();
+            // await sendEditOperationsToServer(newOps as EditOperation[]);
+            // router.refresh();
+            //setEditOperations(newOps);
+            if (op)
+                setCurrentEditOperation(op);
+            setDragObject(undefined);
+        }),
+        executeEditOperation: (op) => {
+            setCurrentEditOperation(op);
+        },
+        page,
+        scroll,
+    };
+    const selectedComponents = selection
+        .map((x) => getComponentById(x))
+        .filter((x) => x);
+    const selectedComponent = selectedComponents.length === 1 ? selectedComponents[0] : null;
+    const componentCommands = (0, componentCommands_1.getComponentCommands)(selectedComponents, editContext);
+    const insertingPlaceholderKeys = [editContext.selectedForInsertion]
+        .map((x) => editContext.getComponentById(x))
+        .filter((x) => x)
+        .reduce((a, x) => a.concat(x.placeholders.map((y) => y.key)), []);
+    const selectedPlaceholderKeys = [
+        //...selection.filter((x) => x.indexOf("_") > 0),
+        ...insertingPlaceholderKeys,
+    ];
+    const currentInsertOptions = collectInsertOptions(page, selectedPlaceholderKeys);
+    function collectInsertOptions(page, placeholderKeys) {
+        const insertOptionsMap = new Map();
+        function traverse(placeholders) {
+            for (const placeholder of placeholders) {
+                if (placeholder.insertOptions &&
+                    (placeholderKeys.length === 0 ||
+                        placeholderKeys.includes(placeholder.key))) {
+                    for (const option of placeholder.insertOptions) {
+                        insertOptionsMap.set(option.id, option);
+                    }
+                }
+                for (const component of placeholder.components) {
+                    traverse(component.placeholders);
+                }
+            }
+        }
+        traverse(page.placeholders);
+        // Convert the map back into an array of objects
+        const insertOptionsArray = Array.from(insertOptionsMap.values());
+        insertOptionsArray.sort((a, b) => a.name.localeCompare(b.name));
+        return insertOptionsArray;
+    }
+    const componentCommandMenuItems = componentCommands.map((x) => {
+        return {
+            label: x.label,
+            icon: x.icon,
+            command: () => x.execute(),
+            disabled: x.disabled,
+        };
+    });
+    const menuItems = [
+        {
+            label: "Save",
+            icon: "pi pi-fw pi-save text-red",
+            command: () => saveAndRefresh(),
+            disabled: !hasUnsavedChanges(),
+        },
+        {
+            label: "Undo",
+            icon: "pi pi-fw pi-undo",
+            command: () => undo(),
+            disabled: !editData.operations.filter((x) => !x.undone).length,
+        },
+        {
+            label: "Redo",
+            icon: "pi pi-fw pi-refresh",
+            command: () => redo(),
+            disabled: !editData.operations.filter((x) => x.undone).length,
+        },
+        {
+            label: "Selection",
+            icon: "pi pi-fw pi-bars",
+            items: componentCommandMenuItems,
+        },
+        {
+            label: "Create Version",
+            icon: "pi pi-fw pi-plus",
+            command: () => createAndSwitchToNewVersion(),
+        },
+        { separator: true },
+        {
+            label: "Preview",
+            icon: "pi pi-fw pi-external-link",
+            command: () => {
+                if (page)
+                    window.open(page.previewUrl + "&session=" + sessionId, "_blank");
+            },
+        },
+        { label: "Publish", icon: "pi pi-fw pi-upload" },
+        { separator: true },
+    ];
+    const spinner = (0, jsx_runtime_1.jsx)(progressspinner_1.ProgressSpinner, {});
+    const endContent = ((0, jsx_runtime_1.jsxs)("div", { className: "a-flex a-gap-3 a-items-center", children: [(0, jsx_runtime_1.jsx)(LanguageSelector_1.LanguageSelector, { page: page, onLanguageSelected: (language) => {
+                    if (!language)
+                        return;
+                    //ensureSaved(() => switchLanguage(language));
+                    switchLanguage(language);
+                } }), (0, jsx_runtime_1.jsx)(VersionSelector_1.VersionSelector, { page: page, onVersionSelected: (version) => {
+                    switchVersion(version);
+                } }), (0, jsx_runtime_1.jsx)(button_1.Button, { size: "small", icon: "pi pi-arrows-h", onClick: () => setShowTabsCenter(!showTabsCenter) }), (0, jsx_runtime_1.jsx)(button_1.Button, { size: "small", icon: showRightSidebar ? "pi pi-chevron-right " : "pi pi-chevron-left", onClick: () => setShowRightSidebar(!showRightSidebar) }), (0, jsx_runtime_1.jsx)("i", { className: (0, utils_1.classNames)("pi pi-cog a-flex a-items-center a-text-xl a-m-2", refreshing ? "pi-spin" : "") })] }));
+    const sidebarTabs = ((0, jsx_runtime_1.jsx)(SidebarTabs_1.default, { selectedComponent: selectedComponent, page: page, dictionary: dictionary, item: item }));
+    const renderedPage = ((0, jsx_runtime_1.jsxs)("div", { onDragEndCapture: () => setDragObject(undefined), className: "a-flex a-flex-col a-w-full a-h-full a-items-center a-bg-gray-100", ref: editorContainerRef, children: [(0, jsx_runtime_1.jsxs)("div", { className: "a-flex a-gap-1 a-bg-gray-50 a-w-full a-border-b a-items-center a-justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "a-flex a-p-1.5  a-items-center", children: [(0, jsx_runtime_1.jsx)("i", { className: "pi pi-search-plus a-p-2 a-cursor-pointer", onClick: () => {
+                                    if (zoom < 50)
+                                        setZoom(zoom * 1.2);
+                                } }), (0, jsx_runtime_1.jsx)("i", { className: "pi pi-search-minus a-p-2 a-cursor-pointer", onClick: () => {
+                                    if (zoom > 0.1)
+                                        setZoom(zoom / 1.2);
+                                } }), (0, jsx_runtime_1.jsx)("div", { className: "a-cursor-pointer a-text-xs a-p-1", onClick: () => {
+                                    setZoom(0.5);
+                                }, children: "50%" }), (0, jsx_runtime_1.jsx)("div", { className: "a-cursor-pointer a-text-xs a-p-1", onClick: () => {
+                                    setZoom(1);
+                                }, children: "1:1" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "a-flex a-p-1.5  a-items-center", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, utils_1.classNames)(device === "desktop" ? "a-bg-gray-100" : "", "pi pi-desktop a-p-2 a-cursor-pointer"), onClick: () => {
+                                    setDevice("desktop");
+                                } }), (0, jsx_runtime_1.jsx)("i", { className: (0, utils_1.classNames)(device === "mobile" ? "a-bg-gray-100" : "", "pi pi-tablet a-p-2 a-cursor-pointer"), onClick: () => {
+                                    setDevice("mobile");
+                                } }), (0, jsx_runtime_1.jsx)("i", { className: "pi pi-external-link a-p-2 a-cursor-pointer", onClick: () => setFullscreen(true) })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "a-flex-1 a-relative a-h-full a-bg-white", style: { width: device == "desktop" ? "100%" : "640px" }, children: (0, jsx_runtime_1.jsx)("div", { className: "alpaca-editor-container a-absolute a-inset-0 a-overflow-auto", style: { zoom: zoom }, onScroll: (e) => {
+                        setScroll(e.currentTarget.scrollTop);
+                    }, children: children }) })] }));
+    return ((0, jsx_runtime_1.jsx)(__1.EditContextProvider, { value: editContext, children: fullscreen ? ((0, jsx_runtime_1.jsxs)("div", { onMouseMoveCapture: () => setTimeout(() => setShowFullscreenHint(false), 600), children: [children, showFullscreenHint && ((0, jsx_runtime_1.jsx)("div", { className: "a-fixed a-left-1/2 a-top-3 a-transform \r\n            -a-translate-x-1/2 a-p-12 a-bg-gray-200", children: "Press Ctrl + F11 to exit fullscreen mode" }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(toast_1.Toast, { ref: toast }), (0, jsx_runtime_1.jsxs)(api_1.PrimeReactProvider, { children: [(0, jsx_runtime_1.jsx)(ConfirmationDialog_1.default, { ref: confirmationDialogRef }), (0, jsx_runtime_1.jsx)(confirmdialog_1.ConfirmDialog, {}), (0, jsx_runtime_1.jsxs)(blockui_1.BlockUI, { blocked: uiBlocked, template: spinner, children: [(0, jsx_runtime_1.jsx)(menubar_1.Menubar, { model: menuItems, end: endContent, className: "a-p-1 a-text-sm" }), (0, jsx_runtime_1.jsx)(MainLayout_1.default, { content: showTabsCenter ? sidebarTabs : renderedPage, rightSidebar: showRightSidebar && ((0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { layout: "vertical", className: "alpaca-editor a-h-full", children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "a-overflow-hidden a-relative", children: (0, jsx_runtime_1.jsx)(EditHistory_1.EditHistory, { operations: edit.operations }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "a-h-full a-flex a-flex-col", children: (0, jsx_runtime_1.jsx)(Workbox_1.default, { workbox: page.workbox, lockItem: lockItemAndRefresh, executeWorkflowCommand: executeWorkflowCommandAndRefresh }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "a-overflow-hidden a-relative", children: (0, jsx_runtime_1.jsx)(AiTerminal_1.AiTerminal, { selection: selection }) })] })), leftSidebar: (0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { layout: "vertical", className: "a-h-full", children: [(0, jsx_runtime_1.jsxs)(splitter_1.SplitterPanel, { size: 20, className: "a-h-full a-flex a-flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: "a-p-3 a-bg-gray-50 a-text-gray-600 a-text-sm a-border-b-2", children: "Content" }), (0, jsx_runtime_1.jsx)("div", { className: "a-overflow-hidden a-relative a-flex-1", children: (0, jsx_runtime_1.jsx)("div", { className: "a-inset-0 a-absolute a-overflow-y-auto", children: (0, jsx_runtime_1.jsx)(ContentTree_1.default, { rootItemId: "{11111111-1111-1111-1111-111111111111}", expandIdPath: page.idPath, className: "a-p-1", selectionMode: "single", selectedItemIds: [page.id], secondarySelectedItemId: item === null || item === void 0 ? void 0 : item.id, onSelectionChange: (selection) => {
+                                                                    const selectedItem = selection;
+                                                                    if (selectedItem.hasLayout)
+                                                                        navigateToPage(selectedItem.id);
+                                                                    else
+                                                                        loadItem({
+                                                                            id: selectedItem.id,
+                                                                            language: selectedItem.language,
+                                                                            version: selectedItem.version,
+                                                                        });
+                                                                }, isDraggable: (x) => (currentInsertOptions === null || currentInsertOptions === void 0 ? void 0 : currentInsertOptions.find((insertOption) => {
+                                                                    var _a;
+                                                                    return insertOption.id == x.templateId ||
+                                                                        ((_a = insertOption.compatibleTemplates) === null || _a === void 0 ? void 0 : _a.find((compatibleTemplate) => compatibleTemplate == x.templateId)) !== undefined;
+                                                                })) !== undefined, dragStart: (itemNode) => {
+                                                                    setDragObject({
+                                                                        type: "link-component",
+                                                                        templateId: itemNode.templateId,
+                                                                        component: {
+                                                                            id: itemNode.id,
+                                                                            language: itemNode.language,
+                                                                            version: itemNode.version,
+                                                                        },
+                                                                    });
+                                                                } }) }) })] }), (0, jsx_runtime_1.jsxs)(splitter_1.SplitterPanel, { size: 15, className: "a-h-full a-flex a-flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: "a-p-3 a-bg-gray-50 a-text-gray-600 a-text-sm a-border-b-2", children: "Page Components" }), (0, jsx_runtime_1.jsx)("div", { className: "a-overflow-hidden a-relative a-flex-1", children: (0, jsx_runtime_1.jsx)("div", { className: "a-inset-0 a-absolute a-overflow-y-auto", children: (0, jsx_runtime_1.jsx)(ComponentTree_1.ComponentTree, { page: page, selection: selection }) }) })] }), (0, jsx_runtime_1.jsxs)(splitter_1.SplitterPanel, { size: 15, className: "a-h-full a-flex a-flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: "a-p-3 a-bg-gray-50 a-text-gray-600 a-text-sm a-border-b-2", children: "New Component" }), (0, jsx_runtime_1.jsx)("div", { className: "a-overflow-hidden a-relative a-flex-1", children: (0, jsx_runtime_1.jsx)("div", { className: "a-inset-0 a-absolute a-overflow-y-auto", children: (0, jsx_runtime_1.jsx)(ComponentPalette_1.ComponentPalette, { insertOptions: currentInsertOptions, dragStart: (dragObject) => {
+                                                                    //console.log("dragging " + JSON.stringify(dragObject));
+                                                                    setDragObject(dragObject);
+                                                                }, dragEnd: () => {
+                                                                    setDragObject(undefined);
+                                                                    setSelectedForInsertion("");
+                                                                } }) }) })] }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 50, className: "a-overflow-hidden a-relative", children: !showTabsCenter ? sidebarTabs : renderedPage })] }) })] }), (0, jsx_runtime_1.jsx)(MediaSelector_1.MediaSelector, { visible: mediaSelectorVisible, onHide: () => setMediaSelectorVisible(false), onMediaSelected: onMediaSelect, selectedIdPath: selectedMediaIdPath })] })] })) }));
 }
 exports.EditorClient = EditorClient;