1495 lines
70 KiB
JavaScript
1495 lines
70 KiB
JavaScript
"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"
|
|
})
|
|
]
|
|
})
|
|
]
|
|
})
|
|
]
|
|
})
|
|
});
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
} /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */
|
|
|
|
|
|
/***/ })
|
|
|
|
};
|
|
; |