@flozy/editor 4.2.4 → 4.2.6

package/dist/Editor/Elements/Embed/Embed.css

@@ -1,5 +1,5 @@
 .embed {
-  width: fit-content;
+  /* width: fit-content; */
   position: relative;
   margin: 0px;
 }

package/dist/Editor/Elements/FreeGrid/FreeGrid.js

@@ -466,7 +466,7 @@ const FreeGrid = props => {
       sx: {
         ...classes.root,
         ...freegridSX,
-        background: sectionBgColor,
+        background: sectionBgColor || "rgba(255,255,255,1)",
         backgroundImage: sectionBackgroundImage ? `url('${sectionBackgroundImage}')` : "",
         backgroundSize: "cover"
       },

package/dist/Editor/Elements/FreeGrid/styles.js

@@ -8,7 +8,6 @@ const useFreeGridStyles = ({
       gridTemplateColumns: "var(--cols)",
       gridTemplateRows: "var(--rows)",
       gridGap: "0px",
-      backgroundColor: "#FFF",
       padding: "0px",
       height: "100%",
       position: "static",
@@ -40,6 +39,17 @@ const useFreeGridStyles = ({
         "&.enable-1, &.enable-2": {
           "&.type_text": {
             // height: "fit-content !important",
+            // for dark theme
+            // pages needs no color
+            "&.no-color": {
+              backgroundColor: "auto",
+              color: "auto",
+              "& .signed-btn": {
+                "& img": {
+                  backgroundColor: "auto"
+                }
+              }
+            }
           }
         },
         "&.enable-1:before, &.enable-2:before": {
@@ -158,6 +168,11 @@ const useFreeGridStyles = ({
         },
 
         "& .fgi_type_form": {
+          "& .form-field": {
+            "& input": {
+              caretColor: "auto !important"
+            }
+          },
           "& .form-wrapper": {
             padding: "0px !important"
           },

package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js

@@ -152,9 +152,15 @@ function SelectTypography({
     toggleBlock(editor, format);
     if (option.type === "block") {
       // reset old font size
+      let updatedValue = !selectedBlock ? {} : {
+        xs: "16px",
+        sm: "16px",
+        md: "16px",
+        lg: "16px"
+      };
       addMarkData(editor, {
         format: "fontSize",
-        value: {}
+        value: updatedValue
       });
     } else if (option.type === "mark") {
       const size = sizeMap[option.value] || "";

package/dist/Editor/Toolbar/PopupTool/TextFormat.js

@@ -133,6 +133,7 @@ const TextFormat = props => {
     }), /*#__PURE__*/_jsxs(Grid, {
       container: true,
       spacing: 2,
+      className: "fw-dd",
       children: [/*#__PURE__*/_jsxs(Grid, {
         item: true,
         xs: 6,

package/dist/Editor/common/Icon.js

@@ -231,7 +231,9 @@ const iconList = {
       fill: "#64748B"
     }
   }),
-  text: /*#__PURE__*/_jsx(Text, {}),
+  text: /*#__PURE__*/_jsx(Text, {
+    stroke: "#64748B"
+  }),
   textArea: /*#__PURE__*/_jsx(TextAreaIcon, {}),
   phone: /*#__PURE__*/_jsx(Phone, {}),
   briefCase: /*#__PURE__*/_jsx(BriefCase, {}),

package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js

@@ -13,13 +13,15 @@ const LinkIcon = () => {
       stroke: "#000000",
       strokeWidth: "1.5",
       strokeLinecap: "round",
-      strokeLinejoin: "round"
+      strokeLinejoin: "round",
+      className: "strokePath"
     }), /*#__PURE__*/_jsx("path", {
       d: "M7.8418 10.1582C8.45613 10.7723 9.28918 11.1173 10.1578 11.1173C11.0264 11.1173 11.8595 10.7723 12.4738 10.1582L14.7905 7.84222C15.4049 7.22788 15.75 6.39466 15.75 5.52585C15.75 4.65704 15.4049 3.82381 14.7905 3.20947C14.1762 2.59513 13.343 2.25 12.4742 2.25C11.6054 2.25 10.7721 2.59513 10.1578 3.20947L8.9998 4.36747",
       stroke: "#000000",
       strokeWidth: "1.5",
       strokeLinecap: "round",
-      strokeLinejoin: "round"
+      strokeLinejoin: "round",
+      className: "strokePath"
     })]
   });
 };

package/dist/Editor/common/RnD/ElementOptions/index.js

@@ -15,9 +15,12 @@ const ElementOptions = props => {
     actions,
     actionsMap,
     optionsProps,
-    selectedAction
+    selectedAction,
+    theme
   } = props;
-  const classes = useElementOptionsStyle();
+  const classes = useElementOptionsStyle({
+    theme
+  });
   const [menu, setMenu] = useState({});
   const openMenu = Boolean(menu.anchorEl);
   const {
@@ -80,6 +83,7 @@ const ElementOptions = props => {
         children: actions.map(renderAction)
       })
     }), open && MenuComp ? /*#__PURE__*/_jsx(OptionsPopup, {
+      theme: theme,
       open: openMenu,
       ...menu,
       handleClose: handleClose,

package/dist/Editor/common/RnD/ElementOptions/styles.js

@@ -1,4 +1,6 @@
-const useElementOptionsStyle = () => ({
+const useElementOptionsStyle = ({
+  theme
+}) => ({
   root: {
     zIndex: 1200,
     "& .papper-root": {
@@ -10,30 +12,36 @@ const useElementOptionsStyle = () => ({
       fontSize: "10px",
       textTransform: "none",
       marginRight: "6px",
-      background: "#FFF",
+      background: theme?.palette?.editor?.background,
       boxShadow: "1px 1px 3px rgba(0,0,0,0.3)",
       "&.active,&:hover ": {
-        color: "#FFF",
+        color: theme?.palette?.editor?.textColor,
         background: "#1976d2"
       }
     },
     "& .MuiIconButton-root": {
       padding: "4px",
-      color: "#000",
-      background: "#FFF",
+      color: theme?.palette?.editor?.textColor,
+      background: theme?.palette?.editor?.background,
       borderRadius: "50%",
       marginRight: "6px",
       boxShadow: "1px 1px 3px rgba(0,0,0,0.3)",
       border: "1px solid transparent",
+      "& .strokePath": {
+        stroke: theme?.palette?.editor?.textColor
+      },
       "& svg": {
         width: "16px",
         height: "16px"
       },
       "&.active,&:hover ": {
         color: "#2563EB",
-        background: "#FFF",
+        background: theme?.palette?.editor?.background,
         border: "1px solid #2563EB",
-        boxShadow: "1px 1px 3px #2563EB"
+        boxShadow: "1px 1px 3px #2563EB",
+        "& .strokePath": {
+          stroke: "#2563EB"
+        }
       }
     }
   }

package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js

@@ -13,6 +13,7 @@ const ButtonSettings = props => {
   const item_path = path?.split("|").map(m => parseInt(m));
   const element_path = [...item_path, 0];
   const element = Node.get(editor, element_path);
+  const styleMaps = buttonStyle?.filter(f => !f?.hideOnFGS);
   const onChange = data => {
     const updated_props = {
       ...element,
@@ -32,9 +33,9 @@ const ButtonSettings = props => {
   return /*#__PURE__*/_jsx(Box, {
     component: "div",
     className: "item-w",
-    children: buttonStyle?.map((m, i) => {
+    children: styleMaps?.map((m, i) => {
       return /*#__PURE__*/_jsx(StyleContent, {
-        renderTabs: buttonStyle,
+        renderTabs: styleMaps,
         value: m.value,
         element: element,
         onChange: onChange,

package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js

@@ -14,6 +14,7 @@ const FormSettings = props => {
   const item_path = path?.split("|").map(m => parseInt(m));
   const element_path = [...item_path];
   const element = Node.get(editor, element_path);
+  const styleMaps = formStyle?.filter(f => !f?.hideOnFGS);
   const onChange = data => {
     const currentPath = ReactEditor.findPath(editor, element);
     const updateData = {
@@ -32,9 +33,9 @@ const FormSettings = props => {
   return /*#__PURE__*/_jsx(Box, {
     component: "div",
     className: "item-w",
-    children: formStyle?.map((m, i) => {
+    children: styleMaps?.map((m, i) => {
       return /*#__PURE__*/_jsx(StyleContent, {
-        renderTabs: formStyle,
+        renderTabs: styleMaps,
         value: m.value,
         element: element,
         customElement: element?.children?.[0] || null,

package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js

@@ -13,7 +13,6 @@ const TextSettings = props => {
   const item_path = path.split("|").map(m => parseInt(m));
   const element_path = [...item_path, 0];
   const classes = usePopupStyle(theme);
-  console.log(theme);
   useEffect(() => {
     try {
       ReactEditor.focus(editor);

package/dist/Editor/common/RnD/ElementSettings/index.js

@@ -4,9 +4,10 @@ import OtherSettings from "./OtherSettings";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ElementSettings = props => {
   const {
-    currentAction
+    currentAction,
+    theme
   } = props;
-  const classes = useElementSettingsStyle();
+  const classes = useElementSettingsStyle(theme);
   const Settings = OtherSettings[currentAction];
   return Settings ? /*#__PURE__*/_jsx(Settings, {
     classes: classes,

package/dist/Editor/common/RnD/ElementSettings/styles.js

@@ -1,14 +1,23 @@
 const useElementSettingsStyle = theme => ({
   root: {
     zIndex: 1200,
-    background: "#FFF",
+    background: theme?.palette?.editor?.background,
     borderRadius: "10px",
     overflow: "hidden",
     boxShadow: "0px 0px 12px 4px #00000014",
     padding: "10px 16px",
     "& .papper-root": {
       width: "312px",
-      boxShadow: "none"
+      boxShadow: "none",
+      background: theme?.palette?.editor?.background,
+      "& .MuiInputBase-root": {
+        color: theme?.palette?.editor?.textColor
+      }
+    },
+    "& .fw-dd": {
+      "& input": {
+        padding: "7px !important"
+      }
     },
     ".MuiDivider-root": {
       background: "#DCE4EC"
@@ -17,7 +26,8 @@ const useElementSettingsStyle = theme => ({
       borderRadius: "4px",
       width: "26px",
       height: "26px",
-      background: "#F8FAFC",
+      background: theme?.palette?.editor?.background,
+      color: theme?.palette?.editor?.textColor,
       padding: "7px"
     },
     ".MuiAccordionSummary-root": {
@@ -47,7 +57,29 @@ const useElementSettingsStyle = theme => ({
     "& .item-w": {
       maxHeight: "300px",
       overflowX: "hidden",
-      overflowY: "auto"
+      overflowY: "auto",
+      background: theme?.palette?.editor?.background,
+      "& .MuiTypography-root, .MuiInputBase-root, input": {
+        color: theme?.palette?.editor?.textColor
+      },
+      "& .MuiInputBase-root, input": {
+        border: `1px solid ${theme?.palette?.editor?.borderColor}`
+      },
+      "& .borderInput": {
+        background: theme?.palette?.editor?.background,
+        color: theme?.palette?.editor?.textColor
+      },
+      "& .MuiCheckbox-root": {
+        "& svg": {
+          fill: theme?.palette?.editor?.textColor
+        }
+      },
+      "& .fillPath": {
+        fill: theme?.palette?.editor?.textColor
+      },
+      "& .MuiIconButton-root": {
+        color: theme?.palette?.editor?.textColor
+      }
     },
     "& .item-wrapper": {
       fontFamily: "sans-serif",
@@ -62,6 +94,7 @@ const useElementSettingsStyle = theme => ({
         fontWeight: "bold",
         justifyContent: "space-between",
         alignItems: "center",
+        color: theme?.palette?.editor?.textColor,
         "& .MuiIconButton-root": {
           padding: "4px",
           "& svg": {

package/dist/Editor/common/RnD/OptionsPopup/index.js

@@ -6,7 +6,12 @@ import useOptionsPopupStyle from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const OptionsPopup = props => {
-  const classes = useOptionsPopupStyle();
+  const {
+    theme
+  } = props;
+  const classes = useOptionsPopupStyle({
+    theme
+  });
   const {
     title,
     children,

package/dist/Editor/common/RnD/OptionsPopup/style.js

@@ -1,7 +1,9 @@
-const useOptionsPopupStyle = () => ({
+const useOptionsPopupStyle = ({
+  theme
+}) => ({
   root: {
     zIndex: 1200,
-    background: "#FFF",
+    background: theme?.palette?.editor?.background,
     borderRadius: "7px",
     overflow: "hidden",
     boxShadow: "1px 1px 3px rgba(0,0,0,0.3)",
@@ -9,8 +11,24 @@ const useOptionsPopupStyle = () => ({
     "& .papper-root": {
       width: "270px",
       boxShadow: "none",
-      border: "1px solid rgba(228, 232, 235, 1)",
-      borderRadius: "7px"
+      border: `1px solid ${theme?.palette?.editor?.borderColor}`,
+      borderRadius: "7px",
+      background: theme?.palette?.editor?.background,
+      "& .MuiTypography-root, .MuiInputBase-root, input": {
+        color: theme?.palette?.editor?.textColor
+      },
+      "& .MuiInputBase-root, input": {
+        border: `1px solid ${theme?.palette?.editor?.borderColor}`
+      },
+      "& .borderInput": {
+        background: theme?.palette?.editor?.background,
+        color: theme?.palette?.editor?.textColor
+      },
+      "& .MuiCheckbox-root": {
+        "& svg": {
+          fill: theme?.palette?.editor?.textColor
+        }
+      }
     },
     "& .item-list-wrpr": {
       paddingTop: "0px",
@@ -18,6 +36,7 @@ const useOptionsPopupStyle = () => ({
       padding: "12px 12px",
       "& .MuiListItemButton-root": {
         borderRadius: "7px",
+        color: theme?.palette?.editor?.textColor,
         "&:hover": {
           color: "#000",
           background: "rgba(233, 243, 254, 1)"
@@ -36,6 +55,7 @@ const useOptionsPopupStyle = () => ({
         justifyContent: "space-between",
         alignItems: "center",
         position: "relative",
+        color: theme?.palette?.editor?.textColor,
         "&:after": {
           position: "absolute",
           width: "100%",
@@ -46,6 +66,7 @@ const useOptionsPopupStyle = () => ({
         },
         "& .MuiIconButton-root": {
           padding: "4px",
+          color: theme?.palette?.editor?.textColor,
           "& svg": {
             width: "16px",
             height: "16px"

package/dist/Editor/common/RnD/index.js

@@ -525,7 +525,8 @@ const RnD = props => {
       actionsMap: actionsMap,
       optionsProps: optionsProps,
       selectedAction: currentAction,
-      path: str_path
+      path: str_path,
+      theme: theme
     }) : null, /*#__PURE__*/_jsx(ElementSettings, {
       open: Boolean(currentAction),
       currentAction: currentAction,

package/dist/Editor/common/Section/index.js

@@ -62,6 +62,7 @@ const Section = props => {
     return !readOnly && !showTool ? /*#__PURE__*/_jsx(Box, {
       component: "div",
       className: `element-toolbar no-border-button hr section-tw sectionIcon`,
+      contentEditable: false,
       style: fromPopper ? {
         position: "unset",
         marginLeft: "28px",

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

@@ -150,6 +150,7 @@ const buttonStyle = [{
   tab: "Save As Template",
   value: "saveAsTemplate",
   needActions: false,
+  hideOnFGS: true,
   fields: [{
     label: "Template Image",
     key: "saveAsTemplate",

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

@@ -66,6 +66,7 @@ const FontSize = props => {
       style: {
         marginBottom: "16px"
       },
+      className: "fw-dd",
       children: /*#__PURE__*/_jsx(TextField, {
         value: combinedOldVal,
         onChange: handleChange,

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

@@ -158,6 +158,7 @@ const formStyle = [{
   tab: "Save As Template",
   value: "saveAsTemplate",
   needActions: false,
+  hideOnFGS: true,
   fields: [{
     label: "Template Image",
     key: "saveAsTemplate",

package/dist/Editor/common/iconslist.js

@@ -1779,19 +1779,19 @@ export const Text = props => /*#__PURE__*/_jsxs("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   children: [/*#__PURE__*/_jsx("path", {
     d: "M2.5 4.1825V3.12083C2.5 2.45 3.0425 1.91333 3.7075 1.91333H12.1775C12.8483 1.91333 13.385 2.45583 13.385 3.12083V4.1825",
-    stroke: "#000",
+    stroke: props?.stroke || "#000",
     strokeWidth: "1.5",
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }), /*#__PURE__*/_jsx("path", {
     d: "M7.94531 12.0866V2.39746",
-    stroke: "#000",
+    stroke: props?.stroke || "#000",
     strokeWidth: "1.5",
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }), /*#__PURE__*/_jsx("path", {
     d: "M5.64844 12.0867H10.2451",
-    stroke: "#000",
+    stroke: props?.stroke || "#000",
     strokeWidth: "1.5",
     strokeLinecap: "round",
     strokeLinejoin: "round"

package/dist/Editor/plugins/withHTML.js

@@ -144,6 +144,9 @@ const withHtml = editor => {
       const parsed = new DOMParser().parseFromString(html, "text/html");
       const isGoogleSheet = parsed.body.querySelector("google-sheets-html-origin");
       if (isGoogleSheet) {
+        if (editor.isChatEditor) {
+          return;
+        }
         const table = parsed.body.querySelector("table");
         const colGrp = table.querySelector("colgroup");
         if (colGrp) {
@@ -157,7 +160,7 @@ const withHtml = editor => {
       const formattedFragment = formatFragment[eltype] ? formatFragment[eltype](fragment) : fragment;
       let is_img_table = false;
       formattedFragment.map(f => {
-        if (f.type === 'image' || f.type === 'table') {
+        if (f.type === 'image' || f?.type?.includes('table')) {
           is_img_table = true;
         }
       });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "4.2.4",
+  "version": "4.2.6",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -68,7 +68,7 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "NODE_OPTIONS='--max_old_space_size=4096' 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/flozyapp/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agenciflow08/Documents/flozyapp/client/node_modules/@flozy/editor/dist --copy-files"
   },
   "eslintConfig": {
     "extends": [