@flozy/editor 3.3.7 → 3.3.9

package/dist/Editor/CommonEditor.js

@@ -468,7 +468,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                     toolbarOptions: toolbarOptions,
                     theme: theme
                   }) : null, /*#__PURE__*/_jsx(PopoverAIInput, {
-                    otherProps: otherProps
+                    otherProps: otherProps || {}
                   }), footer && (fullScreen || readOnly) && /*#__PURE__*/_jsx(Typography, {
                     sx: {
                       color: "rgb(100, 116, 139)",

package/dist/Editor/Elements/Form/Form.js

@@ -26,7 +26,7 @@ const Form = props => {
     readOnly,
     site_id,
     page_id,
-    onFormSubmit
+    onFormSubmit = () => {}
   } = customProps;
   const {
     buttonProps,
@@ -78,6 +78,8 @@ const Form = props => {
     if (event) {
       event.preventDefault();
     }
+    let headerHtml = document?.getElementsByClassName('app-logo');
+    headerHtml = headerHtml[0]?.outerHTML;
     if ((readOnly || test) && formEle && formEle?.current) {
       const formData = new FormData(formEle?.current);
       setLoading(true);
@@ -96,7 +98,8 @@ const Form = props => {
           meta_data.push({
             [isMetaKey?.element_metadatakey]: pair[1],
             type: "board",
-            metadatamapping: element?.metadatamapping
+            metadatamapping: element?.metadatamapping,
+            headerHtml: headerHtml
           });
         }
         const fieldData = getFieldProps("name", pair[0]);
@@ -124,15 +127,13 @@ const Form = props => {
             rules: rule?.length > 0 && rule
           });
         }
-        // response = {
-        //   ...response,
-        //   [pair[0]]: pair[1],
-        // };
         const placeholder = fieldData?.name === pair[0] ? fieldData?.placeholder : "";
         response?.push({
+          fieldKey: pair[0],
           [pair[0]]: pair[1],
           placeholder: placeholder,
-          form_name: formName
+          form_name: formName,
+          headerHtml: headerHtml
         });
       }
       let params = {

package/dist/Editor/Elements/SimpleText/index.js

@@ -9,7 +9,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const SimpleText = props => {
   const {
-    theme
+    theme,
+    openAI
   } = useEditorContext() || {};
   const editor = useSlateStatic();
   const {
@@ -42,7 +43,7 @@ const SimpleText = props => {
     ...attributes,
     className: `simple-text`,
     sx: classes.root,
-    children: [children, /*#__PURE__*/_jsx("span", {
+    children: [children, openAI ? null : /*#__PURE__*/_jsx("span", {
       className: "placeholder-simple-text",
       children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? opacity && selected ? "Type / to browse elements" : "" : ""
     })]

package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js

@@ -3,6 +3,7 @@ import { Button, Grid, Radio, RadioGroup, TextField, FormControl, FormLabel, For
 import DeleteIcon from "@mui/icons-material/Delete";
 import Settings from "@mui/icons-material/Settings";
 import LinkSettings from "../../LinkSettings";
+import { getLinkType } from "../../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const MenusArray = props => {
@@ -182,7 +183,7 @@ const MenusArray = props => {
         });
         setOpenNav(false);
       },
-      navType: selectedMenu?.linkType,
+      navType: getLinkType(selectedMenu?.linkType, selectedMenu?.url),
       navValue: selectedMenu?.url,
       openInNewTab: selectedMenu?.target === "_blank",
       customProps: customProps

package/dist/Editor/common/StyleBuilder/formStyle.js

@@ -133,7 +133,7 @@ const formStyle = [{
   tab: "Add to Boards",
   value: "metadatamapping",
   fields: [{
-    label: "Add each response to contacts board",
+    label: "Add response to contacts board",
     key: "metadatamapping",
     type: "metadatamapping",
     compType: "card",

package/dist/Editor/theme/ThemeList.js

@@ -0,0 +1,181 @@
+import { MenuItem, Select, useTheme } from "@mui/material";
+import { fontOptions } from "../utils/font";
+import { toolbarGroups } from "../Toolbar/toolbarGroups";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const themes = [{
+  label: "Theme 1",
+  colors: ["#c90c1f", "#ff5d05"]
+}, {
+  label: "Theme 2",
+  colors: ["#4c0be3", "#43f7ee"]
+}, {
+  label: "Theme 3",
+  colors: ["#22f20f", "#fff705"]
+}];
+const allTools = toolbarGroups.flat();
+function ThemeList(props) {
+  const {
+    selectedTheme,
+    setSelectedTheme
+  } = props;
+  const fontWeight = allTools.find(f => f.format === "fontWeight");
+  const fontStyles = [{
+    text: "Bold",
+    value: "bold",
+    styleField: "fontWeight"
+  }, {
+    text: "Italic",
+    value: "italic",
+    styleField: "fontStyle"
+  }
+  // {
+  //   text: "Underline",
+  //   value: "underline",
+  //   styleField: "textDecoration",
+  // },
+  // {
+  //   text: "Line through",
+  //   value: "line-through",
+  //   styleField: "textDecoration",
+  // },
+  ];
+
+  const theme = useTheme();
+  const colorVars = theme?.vars?.colors || {};
+  const handleTypographyTheme = (key, value, elementType) => {
+    setSelectedTheme(prev => {
+      const newValue = {
+        ...prev,
+        typography: {
+          ...(prev.typography || {}),
+          [elementType]: {
+            ...(prev?.typography?.[elementType] || {}),
+            [key]: value
+          }
+        }
+      };
+      if (!value) {
+        delete newValue?.typography?.[elementType]?.[key];
+      }
+      return newValue;
+    });
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    children: [themes.map((theme, i) => {
+      return /*#__PURE__*/_jsxs("button", {
+        style: {
+          margin: "10px"
+        },
+        onClick: () => setSelectedTheme(prev => ({
+          ...prev,
+          colors: theme.colors
+        })),
+        children: [theme.label, /*#__PURE__*/_jsx("div", {
+          children: theme.colors.map((c, j) => {
+            return /*#__PURE__*/_jsx("div", {
+              style: {
+                width: "20px",
+                height: "20px",
+                background: c,
+                margin: "10px"
+              }
+            }, j);
+          })
+        })]
+      }, i);
+    }), /*#__PURE__*/_jsxs("div", {
+      children: ["Heading 1 Font Family", /*#__PURE__*/_jsx(Select
+      // value={""}
+      , {
+        label: "Font Family",
+        onChange: e => {
+          handleTypographyTheme("fontFamily", e.target.value, "h1");
+        },
+        children: fontOptions.map((font, i) => {
+          const {
+            text,
+            value
+          } = font;
+          return /*#__PURE__*/_jsx(MenuItem, {
+            value: value,
+            children: text
+          }, i);
+        })
+      }), "Font Weight", /*#__PURE__*/_jsx(Select
+      // value={""}
+      , {
+        label: "Font Weight",
+        onChange: e => {
+          handleTypographyTheme("fontWeight", e.target.value, "h1");
+        },
+        children: fontWeight.options.map((option, i) => {
+          const {
+            text,
+            value
+          } = option;
+          return /*#__PURE__*/_jsx(MenuItem, {
+            value: value,
+            children: text
+          }, i);
+        })
+      }), /*#__PURE__*/_jsx("input", {
+        type: "number",
+        placeholder: "font size",
+        onChange: e => {
+          handleTypographyTheme("fontSize", e.target.value, "h1");
+        }
+      }), /*#__PURE__*/_jsxs("div", {
+        children: ["Text", /*#__PURE__*/_jsx("br", {}), "Theme color", Object.values(colorVars).map((colorVar, i) => {
+          return /*#__PURE__*/_jsx("button", {
+            style: {
+              width: "20px",
+              height: "20px",
+              background: colorVar,
+              margin: "10px",
+              outline: "none"
+            },
+            onClick: () => handleTypographyTheme("color", colorVar, "h1")
+          }, i);
+        }), "normal color", /*#__PURE__*/_jsx("button", {
+          style: {
+            width: "20px",
+            height: "20px",
+            background: "#ff00e1",
+            margin: "10px",
+            outline: "none"
+          },
+          onClick: () => handleTypographyTheme("color", "#ff00e1", "h1")
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        children: ["Font styles", fontStyles.map((option, i) => {
+          const styles = selectedTheme?.typography?.h1 || {};
+          const {
+            text,
+            value,
+            styleField
+          } = option;
+          return /*#__PURE__*/_jsxs("button", {
+            onClick: () => {
+              handleTypographyTheme(styleField, styles[styleField] === value ? null : value, "h1");
+            },
+            children: [text, " ", styles[styleField] === value]
+          }, i);
+        })]
+      }), /*#__PURE__*/_jsx("input", {
+        type: "number",
+        placeholder: "Margin text Spacing",
+        onChange: e => {
+          handleTypographyTheme("letterSpacing", e.target.value, "h1");
+        }
+      }), /*#__PURE__*/_jsx("input", {
+        type: "number",
+        placeholder: "Line spacing",
+        onChange: e => {
+          handleTypographyTheme("lineHeight", e.target.value, "h1");
+        }
+      })]
+    })]
+  });
+}
+export default ThemeList;

package/dist/Editor/utils/helper.js

@@ -207,6 +207,9 @@ export const decodeAndParseBase64 = encodedString => {
 export const hasVerticalScrollbar = (element = {}) => {
   return element.scrollHeight > element.clientHeight;
 };
+const isHomePage = page => {
+  return page === "home" || page === "iframe.html" || !page;
+};
 export const handleLinkType = (url, linkType, readOnly, openInNewTab, onClick = () => {}) => {
   const props = {};
   if (!readOnly) {
@@ -214,13 +217,7 @@ export const handleLinkType = (url, linkType, readOnly, openInNewTab, onClick =
       component: "button"
     };
   }
-  if (!linkType && url) {
-    if (url?.includes("http")) {
-      linkType = "webAddress";
-    } else {
-      linkType = "page";
-    }
-  }
+  linkType = getLinkType(linkType, url);
   switch (linkType) {
     case "webAddress":
       const refUrl = url ? url.includes("http") ? url : `//${url}` : "Link";
@@ -245,10 +242,13 @@ export const handleLinkType = (url, linkType, readOnly, openInNewTab, onClick =
       props.component = "a";
       const [page, section] = url?.split("#") || [];
       const sec = section ? `#${section}` : "";
-      const isHome = page === "home" || !page;
-      props.href = isHome ? `${sec}` : `/${url}`;
+      props.href = isHomePage(page) ? `./home${sec}` : `./${url}`;
       if (openInNewTab) {
-        props.target = "_blank";
+        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
+        } else {
+          props.target = "_blank";
+        }
       }
       break;
     case "email":
@@ -304,4 +304,21 @@ export const handleLinkType = (url, linkType, readOnly, openInNewTab, onClick =
   }
   return props;
 };
+const isCurrentPage = page => {
+  const paths = window.location.pathname.split("/");
+  let currentUserPage = paths[paths?.length - 1];
+  currentUserPage = isHomePage(currentUserPage) ? "home" : currentUserPage;
+  const buttonPage = isHomePage(page) ? "home" : page;
+  return currentUserPage === buttonPage;
+};
+export const getLinkType = (linkType, url) => {
+  if (!linkType && url) {
+    if (url?.includes("http")) {
+      linkType = "webAddress";
+    } else {
+      linkType = "page";
+    }
+  }
+  return linkType;
+};
 export const allowedDomains = ["youtube.com", "lemcal.com", "facebook.com", "calendly.com"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "3.3.7",
+  "version": "3.3.9",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -64,7 +64,7 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "publish:npm": "rm -rf dist && mkdir dist &&  babel src/components -d dist --copy-files",
-    "publish:local": "rm -rf /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist --copy-files"
+    "publish:local": "rm -rf /Users/agenciflow08/Documents/flozy/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agenciflow08/Documents/flozy/client/node_modules/@flozy/editor/dist --copy-files"
   },
   "eslintConfig": {
     "extends": [