@flozy/editor 3.4.8 → 3.5.0

package/dist/Editor/Elements/AppHeader/AppHeader.js

@@ -247,7 +247,7 @@ function AppHeader(props) {
                   width: "auto"
                 },
                 src: appLogo
-              }) : null, "\xA0", appTitle]
+              }) : null, appTitle]
             }), /*#__PURE__*/_jsxs(Box, {
               sx: {
                 display: {

package/dist/Editor/Elements/EmbedScript/Code.js

@@ -15,6 +15,12 @@ import { allowedDomains, decodeString } from "../../utils/helper";
 // };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const getCode = (embedData, isEncoded) => {
+  if (isEncoded) {
+    return decodeString(embedData);
+  }
+  return embedData;
+};
 const Code = props => {
   const codeRef = useRef();
   const {
@@ -24,17 +30,20 @@ const Code = props => {
   } = props;
   const {
     embedData,
-    isEncoded
+    isEncoded,
+    isSanitized
   } = element;
   useEffect(() => {
     if (codeRef?.current) {
-      const clean = sanitizeHtml(isEncoded ? decodeString(embedData) : embedData, {
+      const code = getCode(embedData, isEncoded);
+      const clean = isSanitized ? code : sanitizeHtml(code, {
         allowedTags: false,
         // Allow all tags
         allowedAttributes: false,
         // Allow all attributes
-        allowedScriptDomains: allowedDomains
+        allowedScriptDomains: allowedDomains // for old code's that are already inserted without sanitization
       });
+
       const slotHtml = document.createRange().createContextualFragment(clean); // Create a 'tiny' document and parse the html string
       codeRef.current.innerHTML = ""; // Clear the container
       codeRef.current.appendChild(slotHtml);

package/dist/Editor/Elements/EmbedScript/EmbedScript.js

@@ -1,26 +1,66 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import ToolbarIcon from "../../common/ToolbarIcon";
 import Icon from "../../common/Icon";
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
+import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Tooltip } from "@mui/material";
 import { insertEmbedScript } from "../../utils/embedScript";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const EmbedScript = props => {
   const {
     editor,
-    icoBtnType
+    icoBtnType,
+    customProps
   } = props;
   const [open, setOpen] = useState(false);
   const [code, setCode] = useState("");
+  const [apiStatus, setApiStatus] = useState({
+    loading: false,
+    error: false
+  });
+  const [allowedDomains, setAllowedDomains] = useState([]);
+  const {
+    loading,
+    error
+  } = apiStatus;
+  useEffect(() => {
+    customProps.services("allowedDomains", {}).then(data => {
+      setAllowedDomains(data?.data || []);
+    }).catch(err => {
+      console.log(err);
+    });
+  }, []);
+  const updateApiStatus = update => {
+    setApiStatus(prev => ({
+      ...prev,
+      ...update
+    }));
+  };
   const handleChange = e => {
     setCode(e.target.value);
   };
   const handleClick = () => {
     setOpen(true);
   };
-  const onSubmit = () => {
-    insertEmbedScript(editor, code);
+  const onSubmit = async () => {
+    updateApiStatus({
+      loading: true
+    });
+    const result = await customProps.services("validateCode", {
+      code
+    });
+    const {
+      error,
+      sanitizedCode
+    } = result?.data || {};
+    updateApiStatus({
+      loading: false,
+      error
+    });
+    if (!error) {
+      insertEmbedScript(editor, sanitizedCode || "");
+    }
   };
   const onCancel = () => {
     setOpen(false);
@@ -37,9 +77,37 @@ const EmbedScript = props => {
       open: open,
       fullWidth: true,
       children: [/*#__PURE__*/_jsx(DialogTitle, {
-        children: "Embed Code"
-      }), /*#__PURE__*/_jsx(DialogContent, {
-        children: /*#__PURE__*/_jsx("textarea", {
+        children: /*#__PURE__*/_jsxs(Box, {
+          component: "div",
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: "6px"
+          },
+          children: ["Embed Code", allowedDomains?.length ? /*#__PURE__*/_jsx(Tooltip, {
+            title: /*#__PURE__*/_jsxs(Box, {
+              sx: {
+                textTransform: "none"
+              },
+              children: [/*#__PURE__*/_jsx("span", {
+                style: {
+                  fontWeight: "bold"
+                },
+                children: "Allowed Domains"
+              }), /*#__PURE__*/_jsx("br", {}), allowedDomains.join(", ")]
+            }),
+            children: /*#__PURE__*/_jsx(InfoOutlinedIcon, {
+              color: "gray",
+              fontSize: "14px",
+              style: {
+                fill: "#94A3B8",
+                cursor: "pointer"
+              }
+            })
+          }) : null]
+        })
+      }), /*#__PURE__*/_jsxs(DialogContent, {
+        children: [/*#__PURE__*/_jsx("textarea", {
           value: code,
           onChange: handleChange,
           style: {
@@ -49,11 +117,16 @@ const EmbedScript = props => {
             padding: "4px",
             boxSizing: "border-box"
           }
-        })
+        }), /*#__PURE__*/_jsx(Box, {
+          component: "div",
+          color: "red",
+          children: error ? "There was some error on this code." : ""
+        })]
       }), /*#__PURE__*/_jsxs(DialogActions, {
         children: [/*#__PURE__*/_jsx(Button, {
           onClick: onSubmit,
-          children: "Save"
+          disabled: loading,
+          children: loading ? "Validating" : "Save"
         }), /*#__PURE__*/_jsx(Button, {
           onClick: onCancel,
           children: "Cancel"

package/dist/Editor/Toolbar/Basic/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { useSlateStatic } from "slate-react";
-import { Box, Divider, Grid, Tooltip } from "@mui/material";
+import { Box, Divider, Grid, IconButton, Tooltip } from "@mui/material";
 import { toolbarGroups } from "../toolbarGroups";
 import { MarkButton } from "../FormatTools";
 import LinkButton from "../../Elements/Link/LinkButton";
@@ -8,6 +8,7 @@ import { addMarkData, isBlockActive } from "../../utils/SlateUtilityFunctions";
 import ColorPickerButton from "../../common/ColorPickerButton";
 import { colors } from "../../Elements/Color Picker/defaultColors";
 import VariableButton from "../../Elements/Variables/VariableButton";
+import Icon from "../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -21,10 +22,11 @@ const BasicToolbar = props => {
       variableOptions,
       fontStyleOptions,
       hideLink = false,
-      hideTextColor = false
+      hideTextColor = false,
+      hideResetIcon = true,
+      onResetClick = () => {}
     }
   } = props;
-
   // state
   const [activeColor, setActiveColor] = useState("#000000");
   const fontStyle = allTools.filter(f => f.basic || fontStyleOptions?.includes(f.format));
@@ -83,9 +85,23 @@ const BasicToolbar = props => {
         })
       }), /*#__PURE__*/_jsx(Grid, {
         item: true,
-        children: variableOptions && variableOptions.length > 0 && /*#__PURE__*/_jsx(VariableButton, {
-          placeholder: "Variables",
-          options: variableOptions
+        children: /*#__PURE__*/_jsxs(Grid, {
+          container: true,
+          children: [!hideResetIcon && /*#__PURE__*/_jsx(Grid, {
+            item: true,
+            children: /*#__PURE__*/_jsx(IconButton, {
+              onClick: onResetClick,
+              children: /*#__PURE__*/_jsx(Icon, {
+                icon: "resetIcon"
+              })
+            })
+          }), /*#__PURE__*/_jsx(Grid, {
+            item: true,
+            children: variableOptions && variableOptions.length > 0 && /*#__PURE__*/_jsx(VariableButton, {
+              placeholder: "Variables",
+              options: variableOptions
+            })
+          })]
         })
       })]
     }), /*#__PURE__*/_jsx(Divider, {})]

package/dist/Editor/common/Icon.js

@@ -7,7 +7,7 @@ import { AiFillEdit, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutline
 import { SiLatex } from "react-icons/si";
 import { RiDeleteColumn, RiDeleteRow } from "react-icons/ri";
 import { IoIosImage } from "react-icons/io";
-import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal, UploadImage, DocsUpload, LeftArrow, RightArrow, CheckListButton, CheckListButtonActive, ExcelIcon, CsvIcon, DividerIcon, CloseIcon, SearchIcon, ExpandIcon, CalendarIconNew, Text, TextAreaIcon, Phone, BriefCase, Bank, CalendarTick, DollarSquare, Checkbox, Description, RadioButtonIcon, CheckedIcon, UncheckedIcon, InfinityIcon } from "./iconslist";
+import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal, UploadImage, DocsUpload, LeftArrow, RightArrow, CheckListButton, CheckListButtonActive, ExcelIcon, CsvIcon, DividerIcon, CloseIcon, SearchIcon, ExpandIcon, CalendarIconNew, Text, TextAreaIcon, Phone, BriefCase, Bank, CalendarTick, DollarSquare, Checkbox, Description, RadioButtonIcon, CheckedIcon, UncheckedIcon, InfinityIcon, ResetIcon } from "./iconslist";
 import ArrowRightIcon from "@mui/icons-material/ArrowRight";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import EmailRoundedIcon from '@mui/icons-material/EmailRounded';
@@ -243,7 +243,8 @@ const iconList = {
   }),
   checkedIcon: /*#__PURE__*/_jsx(CheckedIcon, {}),
   uncheckedIcon: /*#__PURE__*/_jsx(UncheckedIcon, {}),
-  infinityIcon: /*#__PURE__*/_jsx(InfinityIcon, {})
+  infinityIcon: /*#__PURE__*/_jsx(InfinityIcon, {}),
+  resetIcon: /*#__PURE__*/_jsx(ResetIcon, {})
 };
 const Icon = props => {
   const {

package/dist/Editor/common/iconslist.js

@@ -2344,4 +2344,30 @@ export const InfinityIcon = () => /*#__PURE__*/_jsxs("svg", {
       })]
     })]
   })]
+});
+export const ResetIcon = () => /*#__PURE__*/_jsxs("svg", {
+  width: "22",
+  height: "23",
+  viewBox: "0 0 22 23",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M13.6514 5.61292C12.8539 5.37458 11.9739 5.21875 11.0022 5.21875C6.61135 5.21875 3.05469 8.77542 3.05469 13.1662C3.05469 17.5662 6.61135 21.1229 11.0022 21.1229C15.393 21.1229 18.9497 17.5662 18.9497 13.1754C18.9497 11.5438 18.4547 10.0221 17.6114 8.75708",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M14.782 5.8324L12.1328 2.78906",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M14.7845 5.83203L11.6953 8.08703",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })]
 });

package/dist/Editor/utils/embedScript.js

@@ -7,7 +7,9 @@ export const createEmbedScript = embedData => ({
   children: [{
     text: " "
   }],
-  isEncoded: true // to handle the old code's that already inserted
+  isEncoded: true,
+  // to handle the old code's that already inserted
+  isSanitized: true // to handle the old code's that already inserted
 });
 
 export const insertEmbedScript = (editor, embedData) => {

package/dist/Editor/utils/helper.js

@@ -242,7 +242,8 @@ export const handleLinkType = (url, linkType, readOnly, openInNewTab, onClick =
       props.component = "a";
       const [page, section] = url?.split("#") || [];
       const sec = section ? `#${section}` : "";
-      props.href = isHomePage(page) ? `./home${sec}` : `./${url}`;
+      const currentUserPage = getCurrentUserPage();
+      props.href = isHomePage(page) ? `./${currentUserPage}${sec}` : `./${url}`;
       if (openInNewTab) {
         if (isCurrentPage(page)) {
           // temp fix, if user is presented in current page, open in new tab option is restricted, we will scroll to the element in current page
@@ -304,9 +305,13 @@ export const handleLinkType = (url, linkType, readOnly, openInNewTab, onClick =
   }
   return props;
 };
-const isCurrentPage = page => {
+const getCurrentUserPage = () => {
   const paths = window.location.pathname.split("/");
   let currentUserPage = paths[paths?.length - 1];
+  return currentUserPage;
+};
+const isCurrentPage = page => {
+  let currentUserPage = getCurrentUserPage();
   currentUserPage = isHomePage(currentUserPage) ? "home" : currentUserPage;
   const buttonPage = isHomePage(page) ? "home" : page;
   return currentUserPage === buttonPage;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "3.4.8",
+  "version": "3.5.0",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"