"use strict";
exports.id = 2378;
exports.ids = [2378];
exports.modules = {

/***/ 2378:
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {


// EXPORTS
__webpack_require__.d(__webpack_exports__, {
  "Z": () => (/* binding */ CreatePageContent)
});

// EXTERNAL MODULE: external "react/jsx-runtime"
var jsx_runtime_ = __webpack_require__(997);
// EXTERNAL MODULE: external "react"
var external_react_ = __webpack_require__(6689);
var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
// EXTERNAL MODULE: ./components/form/FormInput.jsx + 2 modules
var FormInput = __webpack_require__(7901);
// EXTERNAL MODULE: ./components/general/LoadingBlock.jsx
var LoadingBlock = __webpack_require__(5264);
// EXTERNAL MODULE: external "@tinymce/tinymce-react"
var tinymce_react_ = __webpack_require__(6451);
// EXTERNAL MODULE: ./components/general/ui/ButtonGroup.jsx
var ButtonGroup = __webpack_require__(5449);
// EXTERNAL MODULE: external "@mui/icons-material/ViewTimelineTwoTone"
var ViewTimelineTwoTone_ = __webpack_require__(5139);
var ViewTimelineTwoTone_default = /*#__PURE__*/__webpack_require__.n(ViewTimelineTwoTone_);
// EXTERNAL MODULE: external "@mui/icons-material/StyleTwoTone"
var StyleTwoTone_ = __webpack_require__(723);
var StyleTwoTone_default = /*#__PURE__*/__webpack_require__.n(StyleTwoTone_);
// EXTERNAL MODULE: external "@mui/icons-material/DifferenceTwoTone"
var DifferenceTwoTone_ = __webpack_require__(930);
var DifferenceTwoTone_default = /*#__PURE__*/__webpack_require__.n(DifferenceTwoTone_);
// EXTERNAL MODULE: external "@mui/icons-material/Close"
var Close_ = __webpack_require__(4173);
var Close_default = /*#__PURE__*/__webpack_require__.n(Close_);
// EXTERNAL MODULE: external "@mui/material"
var material_ = __webpack_require__(5692);
;// CONCATENATED MODULE: ./components/su/components/RichText/ElementStyleModalContent.jsx
// @ts-check
/**
 * ==============================================================================
 * Imports
 * ==============================================================================
 */ 



//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
/**
 * ==============================================================================
 * Main Component { Functional }
 * ==============================================================================
 * @param {object} props - Server props
 * @param {HTMLElement|null} props.targetElement
 * @param {React.Dispatch<React.SetStateAction<boolean>>} props.setOpenStyleModal
 */ function ElementStyleModalContent({ targetElement , setOpenStyleModal ,  }) {
    /**
     * Get Contexts
     *
     * @abstract { React.useContext }
     */ ////////////////////////////////////////////////
    ////////////////////////////////////////////////
    ////////////////////////////////////////////////
    /**
     * Javascript Variables
     *
     * @abstract Non hook variables and functions
     */ if (!targetElement) {
        return null;
    }
    ////////////////////////////////////////////////
    ////////////////////////////////////////////////
    ////////////////////////////////////////////////
    /**
     * React Hooks
     *
     * @abstract { useState, useEffect, useRef, etc ... }
     */ ////////////////////////////////////////////////
    ////////////////////////////////////////////////
    ////////////////////////////////////////////////
    /**
     * Function Return
     *
     * @description Main Function Return
     */ return /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
        className: "flex flex-col items-stretch p-6 max-w-lg",
        children: [
            /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
                className: "w-full justify-between",
                children: [
                    /*#__PURE__*/ jsx_runtime_.jsx("span", {
                        className: "text-xl",
                        children: "Element Style"
                    }),
                    /*#__PURE__*/ jsx_runtime_.jsx("button", {
                        className: "w-10 h-10 plain-text",
                        onClick: ()=>{
                            setOpenStyleModal(false);
                        },
                        children: /*#__PURE__*/ jsx_runtime_.jsx((Close_default()), {})
                    })
                ]
            }),
            /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
                className: "items-stretch p-2 bg-slate-100 rounded add-css-block",
                children: [
                    /*#__PURE__*/ jsx_runtime_.jsx("input", {
                        type: "text",
                        placeholder: "CSS key"
                    }),
                    /*#__PURE__*/ jsx_runtime_.jsx("input", {
                        type: "text",
                        placeholder: "CSS Value",
                        onKeyDownCapture: (e)=>{
                            /** @type {HTMLInputElement} */ // @ts-ignore
                            const inputEl = e.target;
                            if (e.key?.match(/enter/i)) {
                                const firstChild = inputEl.closest(".add-css-block")?.children[0];
                                const secondChild = inputEl.closest(".add-css-block")?.children[1];
                                // @ts-ignore
                                const key = firstChild?.value;
                                // @ts-ignore
                                const value = secondChild?.value;
                                if (!key?.match(/./) || !value?.match(/./)) return;
                                targetElement.style[key] = value;
                            }
                        }
                    }),
                    /*#__PURE__*/ jsx_runtime_.jsx("button", {
                        onClick: (e)=>{
                            /** @type {HTMLButtonElement} */ // @ts-ignore
                            const buttonEl = e.target;
                            const firstChild = buttonEl.closest(".add-css-block")?.children[0];
                            const secondChild = buttonEl.closest(".add-css-block")?.children[1];
                            // @ts-ignore
                            const key = firstChild?.value;
                            // @ts-ignore
                            const value = secondChild?.value;
                            if (!key?.match(/./) || !value?.match(/./)) return;
                            targetElement.style[key] = value;
                        },
                        children: "Add"
                    })
                ]
            }),
            /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
                className: "flex-wrap",
                children: [
                    /*#__PURE__*/ jsx_runtime_.jsx("button", {
                        onClick: (e)=>{
                            const active = targetElement.removeAttribute("style");
                        },
                        className: "secondary grow",
                        children: "Reset"
                    }),
                    /*#__PURE__*/ jsx_runtime_.jsx("button", {
                        onClick: (e)=>{
                            targetElement.style.display = "flex";
                            targetElement.style.alignItems = "center";
                            targetElement.style.gap = "10px";
                        },
                        className: "outlined black grow",
                        children: "Flex"
                    }),
                    /*#__PURE__*/ jsx_runtime_.jsx("button", {
                        onClick: (e)=>{
                            targetElement.style.backgroundColor = "rgb(241 245 249)";
                        },
                        className: "outlined black grow",
                        children: "BG-Slate-100"
                    }),
                    /*#__PURE__*/ jsx_runtime_.jsx("button", {
                        onClick: (e)=>{
                            targetElement.style.backgroundColor = "#F6F4F8";
                        },
                        className: "outlined black grow",
                        children: "BG-Main-light"
                    }),
                    /*#__PURE__*/ jsx_runtime_.jsx("button", {
                        onClick: (e)=>{
                            targetElement.style.padding = "10px";
                        },
                        className: "outlined black grow",
                        children: "Padding-10px"
                    }),
                    /*#__PURE__*/ jsx_runtime_.jsx("button", {
                        onClick: (e)=>{
                            targetElement.style.padding = "10px 20px";
                        },
                        className: "outlined black grow",
                        children: "Padding-10px-20px"
                    }),
                    /*#__PURE__*/ jsx_runtime_.jsx("button", {
                        onClick: (e)=>{
                            targetElement.style.borderRadius = "5px";
                        },
                        className: "outlined black grow",
                        children: "Border-Radius-5px"
                    }),
                    /*#__PURE__*/ jsx_runtime_.jsx("button", {
                        onClick: (e)=>{
                            targetElement.style.border = "1px solid rgb(241 245 249)";
                        },
                        className: "outlined black grow",
                        children: "Border-Slate-100"
                    }),
                    /*#__PURE__*/ jsx_runtime_.jsx("button", {
                        onClick: (e)=>{
                            targetElement.style.border = "1px solid rgb(226 232 240)";
                        },
                        className: "outlined black grow",
                        children: "Border-Slate-200"
                    }),
                    /*#__PURE__*/ jsx_runtime_.jsx("button", {
                        onClick: (e)=>{
                            targetElement.style.border = "1px solid rgb(203 213 225)";
                        },
                        className: "outlined black grow",
                        children: "Border-Slate-300"
                    })
                ]
            }),
            /*#__PURE__*/ jsx_runtime_.jsx("span", {
                className: "font-semibold text-xl mt-4",
                children: "Add class Name"
            }),
            /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
                className: "items-stretch p-2 bg-slate-100 rounded add-class-name-block",
                children: [
                    /*#__PURE__*/ jsx_runtime_.jsx("input", {
                        type: "text",
                        placeholder: "Class Name",
                        onKeyDownCapture: (e)=>{
                            /** @type {HTMLInputElement} */ // @ts-ignore
                            const inputEl = e.target;
                            const firstChild = inputEl.closest(".add-class-name-block")?.children[0];
                            if (e.key?.match(/enter/i)) {
                                // @ts-ignore
                                const className = firstChild?.value;
                                if (!className?.match(/./)) return;
                                targetElement.classList.add(className);
                            }
                        }
                    }),
                    /*#__PURE__*/ jsx_runtime_.jsx("button", {
                        onClick: (e)=>{
                            /** @type {HTMLButtonElement} */ // @ts-ignore
                            const buttonEl = e.target;
                            const firstChild = buttonEl.closest(".add-class-name-block")?.children[0];
                            // @ts-ignore
                            const className = firstChild?.value;
                            if (!className?.match(/./)) return;
                            targetElement.classList.add(className);
                        },
                        children: "Add"
                    }),
                    /*#__PURE__*/ jsx_runtime_.jsx("button", {
                        onClick: (e)=>{
                            /** @type {HTMLButtonElement} */ // @ts-ignore
                            const buttonEl = e.target;
                            const firstChild = buttonEl.closest(".add-class-name-block")?.children[0];
                            // @ts-ignore
                            const className = firstChild?.value;
                            if (!className?.match(/./)) return;
                            targetElement.classList.remove(className);
                        },
                        className: "outlined",
                        children: "Remove"
                    })
                ]
            }),
            targetElement?.nodeName?.match(/^a$/i) ? /*#__PURE__*/ (0,jsx_runtime_.jsxs)((external_react_default()).Fragment, {
                children: [
                    /*#__PURE__*/ jsx_runtime_.jsx("span", {
                        className: "font-semibold text-xl mt-4",
                        children: "Add URL"
                    }),
                    /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
                        className: "items-stretch p-2 bg-slate-100 rounded href-block",
                        children: [
                            /*#__PURE__*/ jsx_runtime_.jsx("input", {
                                type: "text",
                                placeholder: "Class Name",
                                onKeyDownCapture: (e)=>{
                                    /** @type {HTMLInputElement} */ // @ts-ignore
                                    const inputEl = e.target;
                                    const firstChild = inputEl.closest(".href-block")?.children[0];
                                    if (e.key?.match(/enter/i)) {
                                        // @ts-ignore
                                        const url = firstChild?.value;
                                        if (!url?.match(/./)) return;
                                        // @ts-ignore
                                        targetElement.href = url;
                                    }
                                },
                                // @ts-ignore
                                defaultValue: targetElement?.href
                            }),
                            /*#__PURE__*/ jsx_runtime_.jsx("button", {
                                onClick: (e)=>{
                                    /** @type {HTMLInputElement} */ // @ts-ignore
                                    const buttonEl = e.target;
                                    const firstChild = buttonEl.closest(".href-block")?.children[0];
                                    // @ts-ignore
                                    const url = firstChild?.value;
                                    if (!url?.match(/./)) return;
                                    // @ts-ignore
                                    targetElement.href = url;
                                },
                                children: "Add"
                            })
                        ]
                    })
                ]
            }) : /*#__PURE__*/ jsx_runtime_.jsx((external_react_default()).Fragment, {})
        ]
    });
////////////////////////////////////////////////
////////////////////////////////////////////////
////////////////////////////////////////////////
} //////////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////////

;// CONCATENATED MODULE: ./components/su/components/RichText/fns.js
// @ts-check
/**
 * Imports: Handle imports
 */ /**
 * Duplicate Node Function
 * ==============================================================================
 * @description Description
 *
 * @param {object} params - An object containing the function parameters.
 * @param {import("tinymce").Editor} params.editor
 * @param {HTMLElement|null} params.targetElement
 * @param {React.Dispatch<React.SetStateAction<HTMLElement | Node>>} params.setTargetElement
 */ function duplicateNode({ editor , targetElement , setTargetElement  }) {
    /**
     * Initialize variables
     */ const editorWindow = editor.getWin();
    // const currentSelectionTextNode = editorWindow.getSelection();
    // const currentSelectionTextNode = targetElement;
    if (!targetElement) return;
    ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Handle function logic
     */ // const TARGET_ELEMENT = currentSelectionTextNode.anchorNode.parentElement;
    // const TARGET_ELEMENT = targetElement;
    /** @type {HTMLElement} */ // @ts-ignore
    const newNode = targetElement.cloneNode(true);
    if (newNode.nodeName.match(/html|document|body/i)) return;
    targetElement.insertAdjacentElement("afterend", newNode);
    targetElement.classList.remove("target-node");
    setTargetElement(newNode);
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
}
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
/**
 * Duplicate Node Function
 * ==============================================================================
 * @description Description
 *
 * @param {object} params - An object containing the function parameters.
 * @param {import("tinymce").Editor} params.editor
 * @param {HTMLElement|null} params.targetElement
 * @param {React.Dispatch<React.SetStateAction<HTMLElement | Node>>} params.setTargetElement
 */ function selectParent({ editor , targetElement , setTargetElement  }) {
    /**
     * Initialize variables
     */ const editorWindow = editor.getWin();
    // const currentNode = editorWindow.getSelection()?.anchorNode.parentElement;
    const currentNode = targetElement;
    if (!currentNode) return;
    if (currentNode.nodeName.match(/html|document|body/i)) {
        return;
    }
    ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Handle function logic
     */ /** @type {HTMLElement | null} */ // @ts-ignore
    let parentNode = currentNode.parentElement;
    if (!parentNode) {
        setTargetElement(currentNode);
        targetNode({
            editor: editor,
            node: currentNode,
            setTargetElement
        });
    }
    if (parentNode?.nodeName.match(/html|document|body/i)) {
        setTargetElement(currentNode);
        targetNode({
            editor: editor,
            node: currentNode,
            setTargetElement
        });
    } else if (parentNode) {
        setTargetElement(parentNode);
        targetNode({
            editor: editor,
            node: parentNode,
            setTargetElement
        });
    }
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
}
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
/**
 * Duplicate Node Function
 * ==============================================================================
 * @description Description
 *
 * @param {object} params - An object containing the function parameters.
 * @param {import("tinymce").Editor} params.editor
 * @param {HTMLElement|null} params.targetElement
 * @param {React.Dispatch<React.SetStateAction<HTMLElement | Node>>} params.setTargetElement
 */ function selectChild({ editor , targetElement , setTargetElement  }) {
    /**
     * Initialize variables
     */ const editorWindow = editor.getWin();
    // const currentNode = editorWindow.getSelection()?.anchorNode.parentElement;
    const currentNode = targetElement;
    if (!currentNode) return;
    ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Handle function logic
     */ /** @type {HTMLElement | null} */ // @ts-ignore
    const childNode = currentNode.children[0];
    if (!childNode) {
        setTargetElement(currentNode);
        targetNode({
            editor: editor,
            node: currentNode,
            setTargetElement
        });
    } else {
        setTargetElement(childNode);
        targetNode({
            editor: editor,
            node: childNode,
            setTargetElement
        });
    }
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
}
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
/**
 * Duplicate Node Function
 * ==============================================================================
 * @description Description
 *
 * @param {object} params - An object containing the function parameters.
 * @param {HTMLElement|null} params.targetElement
 * @param {boolean} [params.back]
 */ function moveElement({ targetElement , back  }) {
    /**
     * Initialize variables
     */ if (!targetElement) return;
    const next = targetElement.nextElementSibling;
    const prev = targetElement.previousElementSibling;
    ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Handle function logic
     */ if (!back && next) {
        next.after(targetElement);
    } else if (back && prev) {
        prev.before(targetElement);
    }
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
}
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
/**
 * Duplicate Node Function
 * ==============================================================================
 * @description Description
 *
 * @param {object} params - An object containing the function parameters.
 * @param {import("tinymce").Editor} params.editor
 * @param {HTMLElement|null} params.targetElement
 * @param {React.Dispatch<React.SetStateAction<HTMLElement | Node>>} params.setTargetElement
 */ function selectNext({ editor , targetElement , setTargetElement  }) {
    /**
     * Initialize variables
     */ const currentNode = targetElement;
    if (!currentNode) return;
    ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Handle function logic
     */ /** @type {HTMLElement | null} */ // @ts-ignore
    const nextNode = currentNode.nextElementSibling;
    if (!nextNode) {
        setTargetElement(currentNode);
        targetNode({
            editor: editor,
            node: currentNode,
            setTargetElement
        });
    } else {
        setTargetElement(nextNode);
        targetNode({
            editor: editor,
            node: nextNode,
            setTargetElement
        });
    }
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
}
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
/**
 * Duplicate Node Function
 * ==============================================================================
 * @description Description
 *
 * @param {object} params - An object containing the function parameters.
 * @param {import("tinymce").Editor} params.editor
 * @param {HTMLElement|null} params.targetElement
 * @param {React.Dispatch<React.SetStateAction<HTMLElement | Node>>} params.setTargetElement
 */ function selectPrevious({ editor , targetElement , setTargetElement  }) {
    /**
     * Initialize variables
     */ const currentNode = targetElement;
    if (!currentNode) return;
    ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Handle function logic
     */ /** @type {HTMLElement | null} */ // @ts-ignore
    const previousNode = currentNode.previousElementSibling;
    if (!previousNode) {
        setTargetElement(currentNode);
        targetNode({
            editor: editor,
            node: currentNode,
            setTargetElement
        });
    } else {
        setTargetElement(previousNode);
        targetNode({
            editor: editor,
            node: previousNode,
            setTargetElement
        });
    }
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
}
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
/**
 * Duplicate Node Function
 * ==============================================================================
 * @description Description
 *
 * @param {object} params - An object containing the function parameters.
 * @param {import("tinymce").Editor} params.editor
 * @param {HTMLElement|null} [params.node]
 * @param {React.Dispatch<React.SetStateAction<HTMLElement | Node>>} [params.setTargetElement]
 */ function targetNode({ editor , node , setTargetElement  }) {
    /**
     * Initialize variables
     */ const editorDocument = editor.getDoc();
    editorDocument.querySelectorAll(".target-node").forEach((elt)=>{
        elt.classList.remove("target-node");
    });
    const editorWindow = editor.getWin();
    const currentNode = editorWindow.getSelection()?.anchorNode?.parentElement;
    const targetElement = node ? node : currentNode ? currentNode : null;
    if (!targetElement) return;
    targetElement?.classList?.add("target-node");
    if (setTargetElement) setTargetElement(targetElement);
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
}

// EXTERNAL MODULE: external "@mui/icons-material/HighlightAltTwoTone"
var HighlightAltTwoTone_ = __webpack_require__(328);
var HighlightAltTwoTone_default = /*#__PURE__*/__webpack_require__.n(HighlightAltTwoTone_);
// EXTERNAL MODULE: external "@mui/icons-material/AdsClickTwoTone"
var AdsClickTwoTone_ = __webpack_require__(371);
var AdsClickTwoTone_default = /*#__PURE__*/__webpack_require__.n(AdsClickTwoTone_);
// EXTERNAL MODULE: external "@mui/icons-material/DoDisturbAltTwoTone"
var DoDisturbAltTwoTone_ = __webpack_require__(9361);
var DoDisturbAltTwoTone_default = /*#__PURE__*/__webpack_require__.n(DoDisturbAltTwoTone_);
// EXTERNAL MODULE: ./functions/frontend/fetchApi.js
var fetchApi = __webpack_require__(6729);
;// CONCATENATED MODULE: ./components/su/components/RichText/HTMLSnippetsModalContent.jsx
// @ts-check
/**
 * ==============================================================================
 * Imports
 * ==============================================================================
 */ 






//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
/**
 * ==============================================================================
 * Main Component { Functional }
 * ==============================================================================
 * @param {object} props - Server props
 * @param {HTMLElement?} props.targetElement
 * @param {React.Dispatch<React.SetStateAction<HTMLElement | Node>>} props.setTargetElement
 * @param {import("tinymce").Editor} props.editor
 * @param {React.Dispatch<React.SetStateAction<boolean>>} props.setOpenSnippetsModal
 */ function HTMLSnippetsModalContent({ targetElement , setTargetElement , editor , setOpenSnippetsModal ,  }) {
    /**
     * Get Contexts
     *
     * @abstract { React.useContext }
     */ ////////////////////////////////////////////////
    ////////////////////////////////////////////////
    ////////////////////////////////////////////////
    /**
     * Javascript Variables
     *
     * @abstract Non hook variables and functions
     */ ////////////////////////////////////////////////
    ////////////////////////////////////////////////
    ////////////////////////////////////////////////
    /**
     * React Hooks
     *
     * @abstract { useState, useEffect, useRef, etc ... }
     */ const [loading, setLoading] = external_react_default().useState(true);
    const [snippets, setSnippets] = external_react_default().useState([]);
    external_react_default().useEffect(()=>{
        (0,fetchApi/* default */.Z)("/api/admin/docs/get-snippets", {
            method: "post",
            body: {}
        }).then((res)=>{
            if (res.success) {
                setSnippets(res.result);
                setLoading(false);
            }
        });
    }, []);
    ////////////////////////////////////////////////
    ////////////////////////////////////////////////
    ////////////////////////////////////////////////
    /**
     * Function Return
     *
     * @description Main Function Return
     */ return /*#__PURE__*/ (0,jsx_runtime_.jsxs)(material_.Paper, {
        className: "m-auto p-6 flex flex-col max-w-xl w-full max-h-[90vh] overflow-y-auto relative",
        children: [
            /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
                className: "w-full justify-between",
                children: [
                    /*#__PURE__*/ jsx_runtime_.jsx("span", {
                        className: "text-xl",
                        children: "Snippets"
                    }),
                    /*#__PURE__*/ jsx_runtime_.jsx("button", {
                        className: "w-10 h-10 plain-text",
                        onClick: ()=>{
                            setOpenSnippetsModal(false);
                        },
                        children: /*#__PURE__*/ jsx_runtime_.jsx((Close_default()), {})
                    })
                ]
            }),
            /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
                className: "flex-wrap relative w-full min-h-[100px] items-start",
                children: [
                    loading && /*#__PURE__*/ jsx_runtime_.jsx(LoadingBlock/* default */.Z, {}),
                    snippets && Array.isArray(snippets) && snippets[0] && snippets.map((snippet, index)=>{
                        return /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
                            className: "flex flex-col w-full items-start p-4 border border-slate-200 border-solid rounded cursor-pointer hover:shadow-lg transition-all hover:bg-slate-100",
                            onClick: (e)=>{
                                if (targetElement) {
                                    // const parser = new DOMParser();
                                    // const parsedNode = parser.parseFromString(Object.values(snippet)[0], "text/html");
                                    // const newElement = parsedNode.body.firstChild
                                    const newElement = document.createElement("div");
                                    newElement.innerHTML = Object.values(snippet)[0];
                                    /** @type {any} */ const targetNewElement = newElement.firstChild;
                                    if (targetNewElement) {
                                        targetElement.appendChild(targetNewElement);
                                        targetNode({
                                            editor: editor,
                                            node: targetNewElement,
                                            setTargetElement: setTargetElement
                                        });
                                    }
                                    setOpenSnippetsModal(false);
                                } else {
                                    editor.insertContent(Object.values(snippet)[0], {});
                                    setOpenSnippetsModal(false);
                                }
                            },
                            children: [
                                /*#__PURE__*/ jsx_runtime_.jsx("span", {
                                    className: "font-semibold text-lg",
                                    children: Object.keys(snippet)[0]
                                }),
                                /*#__PURE__*/ jsx_runtime_.jsx("div", {
                                    className: "w-full block border border-slate-300 border-solid rounded-sm",
                                    dangerouslySetInnerHTML: {
                                        __html: Object.values(snippet)[0]
                                    }
                                })
                            ]
                        }, index);
                    })
                ]
            })
        ]
    });
////////////////////////////////////////////////
////////////////////////////////////////////////
////////////////////////////////////////////////
} //////////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////////

// EXTERNAL MODULE: external "@mui/icons-material/SkipNextTwoTone"
var SkipNextTwoTone_ = __webpack_require__(282);
var SkipNextTwoTone_default = /*#__PURE__*/__webpack_require__.n(SkipNextTwoTone_);
// EXTERNAL MODULE: external "@mui/icons-material/SkipPreviousTwoTone"
var SkipPreviousTwoTone_ = __webpack_require__(3729);
var SkipPreviousTwoTone_default = /*#__PURE__*/__webpack_require__.n(SkipPreviousTwoTone_);
// EXTERNAL MODULE: external "@mui/icons-material/DeleteTwoTone"
var DeleteTwoTone_ = __webpack_require__(6502);
var DeleteTwoTone_default = /*#__PURE__*/__webpack_require__.n(DeleteTwoTone_);
// EXTERNAL MODULE: external "@mui/icons-material/TextRotateVerticalTwoTone"
var TextRotateVerticalTwoTone_ = __webpack_require__(4864);
var TextRotateVerticalTwoTone_default = /*#__PURE__*/__webpack_require__.n(TextRotateVerticalTwoTone_);
// EXTERNAL MODULE: external "@mui/icons-material/TextRotateUpTwoTone"
var TextRotateUpTwoTone_ = __webpack_require__(1358);
var TextRotateUpTwoTone_default = /*#__PURE__*/__webpack_require__.n(TextRotateUpTwoTone_);
;// CONCATENATED MODULE: ./components/su/components/RichText/RichTextExtensionBlock.jsx
// @ts-check
/**
 * ==============================================================================
 * Imports
 * ==============================================================================
 */ 


















//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
/**
 * ==============================================================================
 * Main Component { Functional }
 * ==============================================================================
 * @param {object} props - Server props
 * @param {React.MutableRefObject<import("tinymce").Editor>} props.editorRef
 */ function RichTextExtensionBlock({ editorRef  }) {
    /**
     * Get Contexts
     *
     * @abstract { React.useContext }
     */ ////////////////////////////////////////////////
    ////////////////////////////////////////////////
    ////////////////////////////////////////////////
    /**
     * Javascript Variables
     *
     * @abstract Non hook variables and functions
     */ ////////////////////////////////////////////////
    ////////////////////////////////////////////////
    ////////////////////////////////////////////////
    /**
     * React Hooks
     *
     * @abstract { useState, useEffect, useRef, etc ... }
     */ /** @type {[targetElement:HTMLElement | null, setTargetElement: React.Dispatch<React.SetStateAction<HTMLElement | Node>>]} */ // @ts-ignore
    const [targetElement, setTargetElement] = external_react_default().useState(null);
    const [openStyleModal, setOpenStyleModal] = external_react_default().useState(false);
    const [openSnippetsModal, setOpenSnippetsModal] = external_react_default().useState(false);
    ////////////////////////////////////////////////
    ////////////////////////////////////////////////
    ////////////////////////////////////////////////
    /**
     * Function Return
     *
     * @description Main Function Return
     */ return /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
        className: "absolute top-[60px] z-50 -left-[38px] w-[40px] flex flex-col items-end",
        style: {
            boxShadow: "0 0 40px rgba(15, 23, 42, 0.2)"
        },
        children: [
            /*#__PURE__*/ (0,jsx_runtime_.jsxs)(ButtonGroup/* default */.Z, {
                column: true,
                className: "gap-[1px]",
                children: [
                    /*#__PURE__*/ jsx_runtime_.jsx("div", {
                        onClick: ()=>{
                            targetNode({
                                editor: editorRef.current,
                                setTargetElement
                            });
                        },
                        style: {
                            width: "40px",
                            height: "40px"
                        },
                        className: "button secondary",
                        children: /*#__PURE__*/ jsx_runtime_.jsx((AdsClickTwoTone_default()), {})
                    }),
                    /*#__PURE__*/ jsx_runtime_.jsx("div", {
                        onClick: ()=>{
                            moveElement({
                                targetElement: targetElement,
                                back: true
                            });
                        },
                        style: {
                            width: "40px",
                            height: "40px"
                        },
                        className: "button dark",
                        children: /*#__PURE__*/ jsx_runtime_.jsx((TextRotateUpTwoTone_default()), {})
                    }),
                    /*#__PURE__*/ jsx_runtime_.jsx("div", {
                        onClick: ()=>{
                            moveElement({
                                targetElement: targetElement
                            });
                        },
                        style: {
                            width: "40px",
                            height: "40px"
                        },
                        className: "button dark",
                        children: /*#__PURE__*/ jsx_runtime_.jsx((TextRotateVerticalTwoTone_default()), {})
                    }),
                    /*#__PURE__*/ jsx_runtime_.jsx("div", {
                        onClick: ()=>{
                            setOpenSnippetsModal(true);
                        },
                        style: {
                            width: "40px",
                            height: "40px"
                        },
                        className: "button",
                        children: /*#__PURE__*/ jsx_runtime_.jsx((ViewTimelineTwoTone_default()), {})
                    }),
                    /*#__PURE__*/ jsx_runtime_.jsx("div", {
                        onClick: ()=>{
                            setOpenStyleModal(true);
                        },
                        style: {
                            width: "40px",
                            height: "40px"
                        },
                        className: "button",
                        children: /*#__PURE__*/ jsx_runtime_.jsx((StyleTwoTone_default()), {})
                    }),
                    /*#__PURE__*/ jsx_runtime_.jsx("div", {
                        onClick: ()=>{
                            duplicateNode({
                                editor: editorRef.current,
                                targetElement,
                                setTargetElement
                            });
                        },
                        style: {
                            width: "40px",
                            height: "40px"
                        },
                        className: "button",
                        children: /*#__PURE__*/ jsx_runtime_.jsx((DifferenceTwoTone_default()), {})
                    }),
                    /*#__PURE__*/ jsx_runtime_.jsx("div", {
                        onClick: ()=>{
                            selectParent({
                                editor: editorRef.current,
                                targetElement,
                                setTargetElement
                            });
                        },
                        style: {
                            width: "40px",
                            height: "40px"
                        },
                        className: "button",
                        children: /*#__PURE__*/ jsx_runtime_.jsx((HighlightAltTwoTone_default()), {})
                    }),
                    /*#__PURE__*/ jsx_runtime_.jsx("div", {
                        onClick: ()=>{
                            selectChild({
                                editor: editorRef.current,
                                targetElement,
                                setTargetElement
                            });
                        },
                        style: {
                            width: "40px",
                            height: "40px"
                        },
                        className: "button",
                        children: /*#__PURE__*/ jsx_runtime_.jsx((HighlightAltTwoTone_default()), {
                            className: "rotate-180"
                        })
                    }),
                    /*#__PURE__*/ jsx_runtime_.jsx("div", {
                        onClick: ()=>{
                            selectPrevious({
                                editor: editorRef.current,
                                targetElement,
                                setTargetElement
                            });
                        },
                        style: {
                            width: "40px",
                            height: "40px"
                        },
                        className: "button",
                        children: /*#__PURE__*/ jsx_runtime_.jsx((SkipPreviousTwoTone_default()), {})
                    }),
                    /*#__PURE__*/ jsx_runtime_.jsx("div", {
                        onClick: ()=>{
                            selectNext({
                                editor: editorRef.current,
                                targetElement,
                                setTargetElement
                            });
                        },
                        style: {
                            width: "40px",
                            height: "40px"
                        },
                        className: "button",
                        children: /*#__PURE__*/ jsx_runtime_.jsx((SkipNextTwoTone_default()), {})
                    }),
                    /*#__PURE__*/ jsx_runtime_.jsx("div", {
                        onClick: ()=>{
                            if (targetElement) {
                                // @ts-ignore
                                const parentElement = targetElement.parentNode;
                                parentElement.removeChild(targetElement);
                                targetNode({
                                    editor: editorRef.current,
                                    node: parentElement,
                                    setTargetElement
                                });
                            }
                        },
                        style: {
                            width: "40px",
                            height: "40px"
                        },
                        className: "button bg-red-500",
                        children: /*#__PURE__*/ jsx_runtime_.jsx((DeleteTwoTone_default()), {})
                    }),
                    /*#__PURE__*/ jsx_runtime_.jsx("div", {
                        onClick: ()=>{
                            const editorDocument = editorRef.current.getDoc();
                            editorDocument.querySelectorAll(".target-node").forEach((elt)=>{
                                elt.classList.remove("target-node");
                            });
                            // @ts-ignore
                            setTargetElement(null);
                        },
                        style: {
                            width: "40px",
                            height: "40px"
                        },
                        className: "button white",
                        children: /*#__PURE__*/ jsx_runtime_.jsx((DoDisturbAltTwoTone_default()), {
                            className: "rotate-180"
                        })
                    })
                ]
            }),
            /*#__PURE__*/ jsx_runtime_.jsx(material_.Drawer, {
                open: openStyleModal,
                onClose: ()=>{
                    setOpenStyleModal(false);
                },
                anchor: "right",
                children: /*#__PURE__*/ jsx_runtime_.jsx(ElementStyleModalContent, {
                    targetElement: targetElement,
                    setOpenStyleModal: setOpenStyleModal
                })
            }),
            /*#__PURE__*/ jsx_runtime_.jsx(material_.Modal, {
                open: openSnippetsModal,
                onClose: ()=>{
                    setOpenSnippetsModal(false);
                },
                children: /*#__PURE__*/ jsx_runtime_.jsx(HTMLSnippetsModalContent, {
                    targetElement: targetElement,
                    setTargetElement: setTargetElement,
                    editor: editorRef.current,
                    setOpenSnippetsModal: setOpenSnippetsModal
                })
            })
        ]
    });
////////////////////////////////////////////////
////////////////////////////////////////////////
////////////////////////////////////////////////
} //////////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////////

;// CONCATENATED MODULE: ./components/su/components/RichText/DocsRichTextBlock.jsx
// @ts-check
/**
 * ==============================================================================
 * Imports
 * ==============================================================================
 */ 



//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
/**
 * Main Component { Functional }
 * ==============================================================================
 * @param {object} props - Server props
 * @param {import("@/package-shared/types").UserType} [props.user]
 * @param {any} [props.blockObject]
 * @param {string} [props.placeholder]
 * @param {React.MutableRefObject<any>} [props.editorRef]
 * @param {number} [props.height]
 * @param {boolean} [props.extend]
 */ function DocsRichTextBlock({ user , blockObject , placeholder , editorRef , height , extend ,  }) {
    /**
     * Get Contexts
     *
     * @abstract { React.useContext }
     */ ////////////////////////////////////////////////
    ////////////////////////////////////////////////
    ////////////////////////////////////////////////
    /**
     * Javascript Variables
     *
     * @abstract Non hook variables and functions
     */ ////////////////////////////////////////////////
    ////////////////////////////////////////////////
    ////////////////////////////////////////////////
    /**
     * React Hooks
     *
     * @abstract { useState, useEffect, useRef, etc ... }
     */ const [loading, setLoading] = external_react_default().useState(false);
    ////////////////////////////////////////////////
    ////////////////////////////////////////////////
    ////////////////////////////////////////////////
    /**
     * Function Return
     *
     * @description Main Function Return
     */ return /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
        className: "relative",
        children: [
            /*#__PURE__*/ jsx_runtime_.jsx(tinymce_react_.Editor, {
                tinymceScriptSrc: "/tinymce/tinymce.min.js",
                onInit: (evt, editor)=>{
                    if (extend) {
                        const editorBody = editor.getBody();
                        editorBody.style.padding = "40px";
                        editorBody.className = "RTE-DOCS";
                    }
                    if (editorRef) {
                        editorRef.current = editor;
                    }
                },
                initialValue: blockObject && blockObject["content"] ? blockObject["content"] : "",
                init: {
                    height: height ? height : 400,
                    width: "100%",
                    relative_urls: false,
                    remove_script_host: false,
                    menubar: false,
                    plugins: extend ? [
                        "advlist",
                        "autolink",
                        "lists",
                        "link",
                        "image",
                        "charmap",
                        "anchor",
                        "searchreplace",
                        "visualblocks",
                        "code",
                        "fullscreen",
                        "insertdatetime",
                        "media",
                        "table",
                        "preview",
                        "help",
                        "wordcount",
                        "codesample", 
                    ] : [
                        "link"
                    ],
                    toolbar: extend ? "undo redo | blocks | " + "bold italic forecolor | codesample link image | alignleft aligncenter " + "alignright alignjustify | bullist numlist outdent indent | " + "removeformat" : "undo redo | blocks | link",
                    content_style: "body { font-family:Helvetica,Arial,sans-serif; font-size:18px }",
                    placeholder: placeholder ? placeholder : "Type something ...",
                    content_css: extend ? "/styles/tiny.css" : undefined,
                    statusbar: extend ? true : false
                }
            }),
            extend && editorRef && /*#__PURE__*/ jsx_runtime_.jsx(RichTextExtensionBlock, {
                editorRef: editorRef
            })
        ]
    });
////////////////////////////////////////////////
////////////////////////////////////////////////
////////////////////////////////////////////////
} //////////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////////

// EXTERNAL MODULE: ./components/general/BackButton.jsx
var BackButton = __webpack_require__(1781);
// EXTERNAL MODULE: ./components/form/FormSelect.jsx
var FormSelect = __webpack_require__(4114);
// EXTERNAL MODULE: ./components/general/Breadcrumbs.jsx
var Breadcrumbs = __webpack_require__(424);
;// CONCATENATED MODULE: ./components/su/docs/CreatePageContent.jsx
// @ts-check
/**
 * ==============================================================================
 * Imports
 * ==============================================================================
 */ 








/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** @type {any} */ let timeout;
/**
 * Main Component { Functional }
 * ==============================================================================
 * @param {Object} props - Server props
 * @param {any} [props.data] - Page content available
 * @param {import("@/package-shared/types").UserType} props.user
 */ function CreatePageContent({ data , user  }) {
    /**
     * Get Contexts
     *
     * @abstract { React.useContext }
     */ ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Javascript Variables
     *
     * @abstract Non hook variables and functions
     */ const isUpdate = data?.title ? true : false;
    ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * React Hooks
     *
     * @abstract { useState, useEffect, useRef, etc ... }
     */ const [loading, setLoading] = external_react_default().useState(false);
    const [pageLevel, setPageLevel] = external_react_default().useState(data?.level);
    const [pageOrder, setPageOrder] = external_react_default().useState(data?.page_order);
    /** @type {[ targetParentPage: any, setTargetParentPage: React.Dispatch<React.SetStateAction<any>> ]} */ // @ts-ignore
    const [parentPages, setParentPages] = external_react_default().useState(null);
    /** @type {[ targetParentPage: any, setTargetParentPage: React.Dispatch<React.SetStateAction<any>> ]} */ // @ts-ignore
    const [targetParentPage, setTargetParentPage] = external_react_default().useState(null);
    /** @type {React.MutableRefObject<import("tinymce").Editor|undefined>} */ const descEditorRef = external_react_default().useRef();
    /** @type {React.MutableRefObject<import("tinymce").Editor|undefined>} */ const contentEditorRef = external_react_default().useRef();
    external_react_default().useEffect(()=>{
        if (parseInt(pageLevel) > 1) {
            window.clearTimeout(timeout);
            timeout = window.setTimeout(()=>{
                (0,fetchApi/* default */.Z)("/api/admin/docs/grab-parent-pages", {
                    method: "post",
                    body: {
                        pagesLevel: parseInt(pageLevel) - 1,
                        currentPageId: data?.id
                    }
                }).then((res)=>{
                    if (res.success && res.result && Array.isArray(res.result) && res.result[0]) {
                        setParentPages(res.result);
                        if (data.parent_id) {
                            const targetFilterPage = res.result.filter((/** @type {any} */ pg)=>pg.id == data.parent_id);
                            if (targetFilterPage[0]) {
                                setTargetParentPage(targetFilterPage[0]);
                            } else {
                                setTargetParentPage(res.result[0]);
                            }
                        } else {
                            setTargetParentPage(res.result[0]);
                        }
                    }
                });
            }, 500);
        } else {
            setParentPages(null);
            setTargetParentPage(null);
        }
    }, [
        pageLevel
    ]);
    ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Function Return
     *
     * @abstract Main Function Return
     */ return /*#__PURE__*/ jsx_runtime_.jsx((external_react_default()).Fragment, {
        children: /*#__PURE__*/ (0,jsx_runtime_.jsxs)("section", {
            className: "items-start justify-start p-6",
            children: [
                /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
                    className: "mb-1",
                    children: [
                        /*#__PURE__*/ jsx_runtime_.jsx(BackButton/* default */.Z, {}),
                        /*#__PURE__*/ jsx_runtime_.jsx("h2", {
                            className: "text-xl m-0",
                            children: isUpdate ? "Update page" : "Create a new Docs Page"
                        })
                    ]
                }),
                /*#__PURE__*/ jsx_runtime_.jsx("div", {
                    className: "mb-4",
                    children: /*#__PURE__*/ jsx_runtime_.jsx(Breadcrumbs/* default */.Z, {
                        user: user
                    })
                }),
                /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
                    className: "paper flex-col items-stretch gap-10 w-full relative",
                    children: [
                        loading && /*#__PURE__*/ jsx_runtime_.jsx(LoadingBlock/* default */.Z, {}),
                        /*#__PURE__*/ (0,jsx_runtime_.jsxs)("form", {
                            onSubmit: (e)=>{
                                e.preventDefault();
                                setLoading(true);
                                /** @type {HTMLFormElement} */ // @ts-ignore
                                const formEl = e.target;
                                /** @type {HTMLInputElement} */ // @ts-ignore
                                const titleInputEl = formEl["title"];
                                const editorDocument = contentEditorRef.current?.getDoc();
                                const descEditorDocument = descEditorRef.current?.getDoc();
                                editorDocument?.querySelectorAll(".target-node").forEach((tnode)=>tnode.classList.remove("target-node"));
                                /**
                             * ### Update URL
                             * @param {HTMLAnchorElement} anchor
                             */ function updateUrl(anchor) {
                                    const url = anchor.href;
                                    if (url?.match(/\~/)) {
                                        anchor.href = url.replace(/.*?\~\//, "/");
                                    }
                                    if (url?.match(/\.\.\//)) {
                                        anchor.href = url.replace(/.*?\.\.\//, "/");
                                    }
                                }
                                editorDocument?.querySelectorAll("a").forEach((anchor)=>{
                                    updateUrl(anchor);
                                });
                                descEditorDocument?.querySelectorAll("a").forEach((anchor)=>{
                                    updateUrl(anchor);
                                });
                                const description = descEditorRef.current?.getContent();
                                const content = contentEditorRef.current?.getBody().innerHTML;
                                const inner_text = contentEditorRef.current?.getBody().innerText;
                                const title = titleInputEl.value;
                                /** @type {any} */ let fetchObject = {
                                    title,
                                    description,
                                    content,
                                    text_content: inner_text,
                                    level: pageLevel,
                                    page_order: pageOrder
                                };
                                if (isUpdate) {
                                    fetchObject.id = data.id;
                                }
                                if (targetParentPage?.id) {
                                    fetchObject.parent_id = targetParentPage.id;
                                }
                                (0,fetchApi/* default */.Z)(`/api/admin/docs/${isUpdate ? "update-page" : "add-page"}`, {
                                    method: "post",
                                    body: fetchObject
                                }).then((res)=>{
                                    if (res.success) {
                                        // window.location.pathname = `/su/docs`;
                                        window.location.reload();
                                    } else {
                                        alert("Operation Failed!");
                                        setTimeout(()=>{
                                            setLoading(false);
                                        }, 1000);
                                    }
                                });
                            },
                            className: "flex flex-col gap-4 w-full",
                            children: [
                                /*#__PURE__*/ jsx_runtime_.jsx(FormInput/* default */.Z, {
                                    placeholder: "Enter a title",
                                    fontSize: "30px",
                                    name: "title",
                                    defaultValue: isUpdate ? data.title : null
                                }),
                                /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
                                    className: "card no-hover",
                                    children: [
                                        /*#__PURE__*/ jsx_runtime_.jsx(FormInput/* default */.Z, {
                                            numberText: true,
                                            placeholder: "Level",
                                            defaultValue: isUpdate ? pageLevel : "1",
                                            maxWidth: "140px",
                                            minValue: 1,
                                            maxValue: 4,
                                            step: 1,
                                            name: "page-level",
                                            title: "Page Level",
                                            setValue: setPageLevel
                                        }),
                                        /*#__PURE__*/ jsx_runtime_.jsx(FormInput/* default */.Z, {
                                            numberText: true,
                                            placeholder: "Level",
                                            defaultValue: isUpdate ? pageOrder : "1",
                                            maxWidth: "140px",
                                            minValue: 1,
                                            step: 1,
                                            name: "page-order",
                                            title: "Page Order",
                                            setValue: setPageOrder
                                        }),
                                        parentPages && Array.isArray(parentPages) && /*#__PURE__*/ jsx_runtime_.jsx(FormSelect/* default */.Z, {
                                            selectOptions: parentPages.map((pageObject)=>{
                                                return {
                                                    title: pageObject.title,
                                                    payload: pageObject.id,
                                                    default: targetParentPage?.id == pageObject.id
                                                };
                                            }),
                                            title: "Parent Page",
                                            required: true,
                                            onChangeHandler: (e)=>{
                                                const targetPage = parentPages.filter((pg)=>pg.id == e.target.value);
                                                if (targetPage[0]) {
                                                    setTargetParentPage(targetPage[0]);
                                                } else {
                                                    window.alert("No Matching parent page!");
                                                }
                                            }
                                        })
                                    ]
                                }),
                                /*#__PURE__*/ jsx_runtime_.jsx(DocsRichTextBlock, {
                                    placeholder: "Describe this page briefly",
                                    editorRef: descEditorRef,
                                    blockObject: isUpdate ? {
                                        content: data.description
                                    } : null,
                                    height: 200
                                }),
                                /*#__PURE__*/ jsx_runtime_.jsx(DocsRichTextBlock, {
                                    placeholder: "Page Content",
                                    editorRef: contentEditorRef,
                                    blockObject: isUpdate ? {
                                        content: data.content
                                    } : null,
                                    height: 600,
                                    extend: true
                                }),
                                /*#__PURE__*/ jsx_runtime_.jsx("button", {
                                    type: "submit",
                                    children: isUpdate ? "Update Page" : "Add Page"
                                })
                            ]
                        })
                    ]
                })
            ]
        })
    });
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
} /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */ 


/***/ })

};
;