@flozy/editor 3.4.9 → 3.5.1

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/Elements/Form/FormElements/FormNumbers.js

@@ -31,7 +31,11 @@ const FormNumbers = props => {
       component: "input",
       ...rest,
       type: "number",
+      inputProps: {
+        min: 0
+      },
       onChange: onChange,
+      onWheel: e => e.target.blur(),
       sx: {
         width: "100%",
         border: `1px solid ${borderColor || "#FFF"}`,
@@ -46,9 +50,17 @@ const FormNumbers = props => {
         },
         borderStyle: borderStyle || "solid",
         color: textColor || "#000",
-        background: bgColor || "transparent"
+        background: bgColor || "transparent",
+        '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
+          '-webkit-appearance': 'none',
+          margin: 0
+        },
+        '&[type=number]': {
+          '-moz-appearance': 'textfield' // Hide spin buttons for Firefox
+        }
       }
     })
   });
 };
+
 export default FormNumbers;

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/package.json

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