"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>} 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>} 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>} 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>} 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>} 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>} 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>} [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>} props.setTargetElement * @param {import("tinymce").Editor} props.editor * @param {React.Dispatch>} 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} 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>]} */ // @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} [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> ]} */ // @ts-ignore const [parentPages, setParentPages] = external_react_default().useState(null); /** @type {[ targetParentPage: any, setTargetParentPage: React.Dispatch> ]} */ // @ts-ignore const [targetParentPage, setTargetParentPage] = external_react_default().useState(null); /** @type {React.MutableRefObject} */ const descEditorRef = external_react_default().useRef(); /** @type {React.MutableRefObject} */ 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" }) ] }) ] }) ] }) }); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// } /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /***/ }) }; ;