@flozy/editor 4.8.0 → 4.8.1

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

@@ -1,38 +1,187 @@
-import { fontOptions } from "../../utils/font";
+import { fontOptions, fontWeightOptions } from "../../utils/font";
 import Icon from "../Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
-const formStyle = [{
-  tab: "General",
-  value: "general",
+export const formStyle = [{
+  tab: "Form Settings",
+  value: "FormSetting",
+  hasChildrenTabs: true,
   fields: [{
-    label: "Form Name",
-    key: "formName",
-    type: "text"
+    tab: "General",
+    value: "general",
+    fields: [{
+      label: "Form Name",
+      key: "formName",
+      type: "text"
+    }, {
+      label: "Send Form to Email",
+      key: "email",
+      type: "text",
+      placeholder: "Enter Email to send the response..."
+    }, {
+      label: "Save Response",
+      key: "saveResponse",
+      type: "selectBox",
+      placeholder: "Save Response"
+    }]
   }, {
-    label: "Send Form to Email",
-    key: "email",
-    type: "text",
-    placeholder: "Enter Email to send the response..."
+    tab: "Form Title",
+    value: "formTitle",
+    fields: [{
+      label: "Title",
+      key: "formTitle",
+      type: "text"
+    }, {
+      label: "Font Family",
+      key: "fontFamily",
+      type: "textOptions",
+      hideMetaDataOptions: true,
+      options: fontOptions,
+      webFont: true,
+      width: 7,
+      renderOption: option => {
+        return /*#__PURE__*/_jsx("span", {
+          style: {
+            fontFamily: option.value
+          },
+          children: option.text
+        });
+      }
+    }, {
+      label: "Font Size",
+      key: "textSize",
+      type: "fontSize",
+      width: 5,
+      placeholder: "16px"
+    }, {
+      label: "Text Align",
+      key: "textAlign",
+      type: "textAlign",
+      placeholder: "16px or 1em"
+    }]
+  }, {
+    tab: "Banner Spacing",
+    value: "bannerSpacing",
+    fields: [{
+      label: "Banner Spacing",
+      key: "bannerSpacing",
+      type: "bannerSpacing"
+    }]
+  }, {
+    tab: "Border",
+    value: "border",
+    fields: [{
+      label: "Border Radius",
+      key: "borderRadius",
+      type: "borderRadius"
+    }, {
+      label: "Border Width",
+      key: "borderWidth",
+      type: "text",
+      placeholder: "1px"
+    }, {
+      label: "Border Style",
+      key: "borderStyle",
+      type: "textOptions",
+      hideMetaDataOptions: true,
+      options: [{
+        text: "Solid",
+        value: "solid"
+      }, {
+        text: "Dotted",
+        value: "dotted"
+      }, {
+        text: "Dashed",
+        value: "dashed"
+      }],
+      renderOption: option => {
+        return /*#__PURE__*/_jsx("span", {
+          children: option.text
+        });
+      }
+    }]
+  }, {
+    tab: "Colors",
+    value: "colors",
+    fields: [{
+      label: "Text Color",
+      key: "textColor",
+      type: "color",
+      needPreview: true
+    }, {
+      label: "Background Color",
+      key: "bgColor",
+      type: "color"
+    }, {
+      label: "Border Color",
+      key: "borderColor",
+      type: "color"
+    }]
+  }, {
+    tab: "Position",
+    value: "position",
+    fields: [{
+      label: "Set Postion (Vertical & Horizantal)",
+      key: "alignment",
+      type: "alignment"
+    }]
+  }, {
+    tab: "Background",
+    value: "backgroundImage",
+    fields: [{
+      label: "URL",
+      key: "backgroundImage",
+      type: "text"
+    }, {
+      label: "Background Image",
+      key: "backgroundImage",
+      type: "backgroundImage"
+    }]
+  }, {
+    tab: "Add to Boards",
+    value: "metadatamapping",
+    fields: [{
+      label: "Add response to contacts board",
+      key: "metadatamapping",
+      type: "metadatamapping",
+      compType: "card",
+      content: "By default, form responses are added as separate cards on the default contact board.",
+      value: "mappingToContactBoard",
+      infoIcon: /*#__PURE__*/_jsx(Icon, {
+        icon: "info"
+      })
+    }, {
+      label: "Create a separate board",
+      key: "metadatamapping",
+      type: "metadatamapping",
+      compType: "card",
+      content: "By default, form responses are added as separate cards on a new board (Contact Us).",
+      value: "mappingToSeparateBoard",
+      infoIcon: /*#__PURE__*/_jsx(Icon, {
+        icon: "info"
+      })
+    }]
   }, {
-    label: "Save Response",
-    key: "saveResponse",
-    type: "selectBox",
-    placeholder: "Save Response"
+    tab: "Save As Template",
+    value: "saveAsTemplate",
+    needActions: false,
+    hideOnFGS: true,
+    fields: [{
+      label: "Template Image",
+      key: "saveAsTemplate",
+      type: "saveAsTemplate"
+    }]
   }]
 }, {
-  tab: "Form Title",
-  value: "formTitle",
+  tab: "Field Settings",
+  value: "FieldSetting",
+  hasChildrenTabs: false,
   fields: [{
-    label: "Title",
-    key: "formTitle",
-    type: "text"
-  }, {
     label: "Font Family",
-    key: "fontFamily",
+    key: "fieldFontFamily",
     type: "textOptions",
+    hideMetaDataOptions: true,
     options: fontOptions,
     webFont: true,
-    width: 7,
     renderOption: option => {
       return /*#__PURE__*/_jsx("span", {
         style: {
@@ -41,42 +190,52 @@ const formStyle = [{
         children: option.text
       });
     }
+  }, {
+    label: "Font Weight",
+    key: "fieldFontWeight",
+    type: "textOptions",
+    width: 5,
+    options: fontWeightOptions,
+    hideMetaDataOptions: true,
+    renderOption: option => {
+      return /*#__PURE__*/_jsx("span", {
+        style: {
+          fontWeight: option.value
+        },
+        children: option.text
+      });
+    }
   }, {
     label: "Font Size",
-    key: "textSize",
+    key: "fieldTextSize",
     type: "fontSize",
     width: 5,
     placeholder: "16px"
   }, {
-    label: "Text Align",
-    key: "textAlign",
-    type: "textAlign",
-    placeholder: "16px or 1em"
-  }]
-}, {
-  tab: "Banner Spacing",
-  value: "bannerSpacing",
-  fields: [{
-    label: "Banner Spacing",
-    key: "bannerSpacing",
-    type: "bannerSpacing"
-  }]
-}, {
-  tab: "Border",
-  value: "border",
-  fields: [{
-    label: "Border Radius",
-    key: "borderRadius",
-    type: "borderRadius"
+    label: "Text Color",
+    key: "fieldTextColor",
+    type: "color",
+    needPreview: true
+  }, {
+    label: "Background Color",
+    key: "fieldBgColor",
+    type: "color"
+  }, {
+    label: "Border Color",
+    key: "fieldBorderColor",
+    type: "color"
   }, {
     label: "Border Width",
-    key: "borderWidth",
+    key: "fieldBorderWidth",
     type: "text",
+    width: 5,
     placeholder: "1px"
   }, {
     label: "Border Style",
-    key: "borderStyle",
+    key: "fieldBorderStyle",
     type: "textOptions",
+    hideMetaDataOptions: true,
+    width: 5,
     options: [{
       text: "Solid",
       value: "solid"
@@ -93,76 +252,4 @@ const formStyle = [{
       });
     }
   }]
-}, {
-  tab: "Colors",
-  value: "colors",
-  fields: [{
-    label: "Text Color",
-    key: "textColor",
-    type: "color",
-    needPreview: true
-  }, {
-    label: "Background Color",
-    key: "bgColor",
-    type: "color"
-  }, {
-    label: "Border Color",
-    key: "borderColor",
-    type: "color"
-  }]
-}, {
-  tab: "Position",
-  value: "position",
-  fields: [{
-    label: "Set Postion (Vertical & Horizantal)",
-    key: "alignment",
-    type: "alignment"
-  }]
-}, {
-  tab: "Background",
-  value: "backgroundImage",
-  fields: [{
-    label: "URL",
-    key: "backgroundImage",
-    type: "text"
-  }, {
-    label: "Background Image",
-    key: "backgroundImage",
-    type: "backgroundImage"
-  }]
-}, {
-  tab: "Add to Boards",
-  value: "metadatamapping",
-  fields: [{
-    label: "Add response to contacts board",
-    key: "metadatamapping",
-    type: "metadatamapping",
-    compType: "card",
-    content: "By default, form responses are added as separate cards on the default contact board.",
-    value: "mappingToContactBoard",
-    infoIcon: /*#__PURE__*/_jsx(Icon, {
-      icon: "info"
-    })
-  }, {
-    label: "Create a separate board",
-    key: "metadatamapping",
-    type: "metadatamapping",
-    compType: "card",
-    content: "By default, form responses are added as separate cards on a new board (Contact Us).",
-    value: "mappingToSeparateBoard",
-    infoIcon: /*#__PURE__*/_jsx(Icon, {
-      icon: "info"
-    })
-  }]
-}, {
-  tab: "Save As Template",
-  value: "saveAsTemplate",
-  needActions: false,
-  hideOnFGS: true,
-  fields: [{
-    label: "Template Image",
-    key: "saveAsTemplate",
-    type: "saveAsTemplate"
-  }]
-}];
-export default formStyle;
+}];

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

@@ -79,6 +79,11 @@ const gridItemStyle = [{
     label: "Width Size",
     key: "grid",
     type: "gridSize"
+  }, {
+    label: "Force Full Width on Mobile",
+    key: "forceFullWidth",
+    type: "selectBox",
+    placeholder: "Force Full Width on Mobile"
   }, {
     label: "Height",
     key: "cellGHeight",

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

@@ -1,12 +1,31 @@
 import React, { useEffect, useState } from "react";
-import { DialogTitle, DialogContent, DialogActions, Button, Grid, IconButton, Typography, Drawer, SwipeableDrawer } from "@mui/material";
+import { DialogTitle, DialogContent, DialogActions, Button, Grid, IconButton, Typography, Drawer, SwipeableDrawer, Accordion, AccordionSummary, AccordionDetails, createTheme } from "@mui/material";
 import FieldMap from "./fieldTypes";
 import CloseIcon from "@mui/icons-material/Close";
 import useCommonStyle from "../../commonStyle";
 import { useEditorContext } from "../../hooks/useMouseMove";
+import { ThemeProvider } from "@mui/material/styles";
+import { ExpandMoreOutlined, Height } from "@mui/icons-material";
 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 muiTheme = createTheme({
+  components: {
+    MuiAccordion: {
+      styleOverrides: {
+        root: {
+          padding: "0px",
+          "&.Mui-expanded": {
+            margin: "0"
+          }
+        }
+      },
+      defaultProps: {
+        elevation: 0
+      }
+    }
+  }
+});
 export const StyleContent = props => {
   const {
     value,
@@ -73,6 +92,9 @@ const StyleBuilder = props => {
   } = tabVal || {
     needActions: true
   };
+  const {
+    hideTools
+  } = customProps || {};
   useEffect(() => {
     if (customProps?.onDrawerOpen) {
       customProps?.onDrawerOpen(true);
@@ -140,17 +162,108 @@ const StyleBuilder = props => {
       }), /*#__PURE__*/_jsx(DialogContent, {
         sx: {
           maxHeight: isMobile ? `500px` : `${window.innerHeight - 125}px`,
-          padding: "8px"
+          padding: "0px"
         },
         children: renderTabs.map((m, i) => {
-          return /*#__PURE__*/_jsx(StyleContent, {
-            renderTabs: renderTabs,
-            value: m.value,
-            element: elementProps,
-            onChange: onElementPropsChange,
-            customProps: customProps,
-            handleClose: handleClose
-          }, `tab_${m.value}_$${i}`);
+          if (m?.hasChildrenTabs) {
+            return /*#__PURE__*/_jsx(ThemeProvider, {
+              theme: muiTheme,
+              children: /*#__PURE__*/_jsxs(Accordion, {
+                defaultExpanded: true,
+                children: [/*#__PURE__*/_jsx(AccordionSummary, {
+                  expandIcon: /*#__PURE__*/_jsx(ExpandMoreOutlined, {}),
+                  sx: {
+                    padding: "0px"
+                  },
+                  children: /*#__PURE__*/_jsx(Typography, {
+                    variant: "h3",
+                    className: "settingsHeader",
+                    color: "primary",
+                    style: {
+                      fontSize: "14px !important",
+                      fontWeight: "400"
+                    },
+                    children: m?.tab
+                  })
+                }), /*#__PURE__*/_jsx(AccordionDetails, {
+                  sx: {
+                    padding: "5px"
+                  },
+                  children: m?.fields.filter(f => (hideTools || []).indexOf(f.value) === -1).map((field, index) => {
+                    return /*#__PURE__*/_jsx(ThemeProvider, {
+                      theme: muiTheme,
+                      children: /*#__PURE__*/_jsxs(Accordion, {
+                        defaultExpanded: true,
+                        children: [/*#__PURE__*/_jsx(AccordionSummary, {
+                          expandIcon: /*#__PURE__*/_jsx(ExpandMoreOutlined, {}),
+                          sx: {
+                            padding: "0px"
+                          },
+                          children: /*#__PURE__*/_jsx(Typography, {
+                            variant: "h3",
+                            className: "settingsHeader",
+                            color: "primary",
+                            style: {
+                              fontSize: "14px !important",
+                              fontWeight: "400"
+                            },
+                            children: field?.tab
+                          })
+                        }), /*#__PURE__*/_jsx(AccordionDetails, {
+                          sx: {
+                            padding: "0px"
+                          },
+                          children: /*#__PURE__*/_jsx(StyleContent, {
+                            renderTabs: [field],
+                            value: field.value,
+                            element: elementProps,
+                            onChange: onElementPropsChange,
+                            customProps: customProps,
+                            handleClose: handleClose
+                          }, `tab_${field.value}_${index}`)
+                        })]
+                      }, `accordion_${index}`)
+                    }, index);
+                  })
+                })]
+              }, `accordion_${i}`)
+            }, i);
+          } else {
+            return /*#__PURE__*/_jsx(ThemeProvider, {
+              theme: muiTheme,
+              children: /*#__PURE__*/_jsxs(Accordion, {
+                defaultExpanded: true,
+                children: [/*#__PURE__*/_jsx(AccordionSummary, {
+                  expandIcon: /*#__PURE__*/_jsx(ExpandMoreOutlined, {}),
+                  sx: {
+                    padding: "0px"
+                  },
+                  children: /*#__PURE__*/_jsx(Typography, {
+                    variant: "h3",
+                    className: "settingsHeader",
+                    color: "primary",
+                    style: {
+                      fontSize: "14px !important",
+                      fontWeight: "400"
+                    },
+                    children: m?.tab
+                  })
+                }), /*#__PURE__*/_jsx(AccordionDetails, {
+                  sx: {
+                    padding: "0px"
+                  },
+                  children: /*#__PURE__*/_jsx(StyleContent, {
+                    renderTabs: renderTabs,
+                    value: m.value,
+                    element: elementProps,
+                    onChange: onElementPropsChange,
+                    customProps: customProps,
+                    handleClose: handleClose
+                  }, `tab_${m.value}_$${i}`)
+                })]
+              }, `accordion_${i}`)
+            }, i);
+          }
         })
       }), needActions ? /*#__PURE__*/_jsxs(DialogActions, {
         sx: {

package/dist/Editor/plugins/withCustomDeleteBackward.js

@@ -14,6 +14,19 @@ const withCustomDeleteBackward = editor => {
       selection
     } = editor;
     if (selection) {
+      // get the current node
+      const [freeGridItemNode] = Editor.nodes(editor, {
+        match: n => n.type === "freegridItem" // Adjust based on your list item type
+      });
+
+      // if it is freegrid
+      if (freeGridItemNode && freeGridItemNode[0]) {
+        const hasText = Node.string(freeGridItemNode[0]);
+        if (!hasText) {
+          return;
+        }
+      }
+
       // Check if current node is a list item and is the last one
       const [node] = Editor.nodes(editor, {
         match: n => n.type === "list-item" // Adjust based on your list item type

package/dist/Editor/utils/Decorators/highlightSelection.js

@@ -0,0 +1,22 @@
+import { Editor, Range, Text } from "slate";
+const highlightSelection = ([node, path], editor = {}) => {
+  if (Text.isText(node) && editor?.selection) {
+    const intersection = Range.intersection(editor.selection, Editor.range(editor, path));
+    if (!intersection) {
+      return [];
+    }
+
+    // Avoid applying highlight if the range only includes line breaks
+    const rangeText = Editor.string(editor, intersection);
+    if (!rangeText.trim()) {
+      return [];
+    }
+    const range = {
+      highlight: true,
+      ...intersection
+    };
+    return [range];
+  }
+  return [];
+};
+export default highlightSelection;

package/dist/Editor/utils/Decorators/index.js

@@ -1,5 +1,6 @@
+import highlightSelection from "./highlightSelection";
 import link from "./link";
-const decorators = d => {
-  return [...link(d)];
+const decorators = (d, editor) => {
+  return [...link(d, editor), ...highlightSelection(d, editor)];
 };
 export default decorators;

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -242,6 +242,15 @@ export const getMarked = (leaf, children, theme) => {
       })
     });
   }
+  if (leaf.highlight) {
+    children = /*#__PURE__*/_jsx("span", {
+      style: {
+        background: "#EAEBFE",
+        color: "inherit"
+      },
+      children: children
+    });
+  }
   if (leaf.decoration === "link") {
     children = /*#__PURE__*/_jsx("a", {
       style: {

package/dist/Editor/utils/font.js

@@ -60,7 +60,14 @@ export const signedTextFonts = Object.keys(fontFamilyMap).slice(-12).map(m => {
   };
 });
 export const headingMap = {
-  "headingOne": "32px",
-  "headingTwo": "24px",
-  "headingThree": "19px"
-};
+  headingOne: "32px",
+  headingTwo: "24px",
+  headingThree: "19px"
+};
+export const fontWeightOptions = [{
+  text: "Bold",
+  value: "500"
+}, {
+  text: "Bolder",
+  value: "600"
+}];

package/dist/Editor/utils/formfield.js

@@ -1,5 +1,5 @@
 import { Transforms } from "slate";
-export const formField = () => {
+export const formField = data => {
   return {
     type: "form-field",
     grid: 6,
@@ -12,14 +12,18 @@ export const formField = () => {
       text: ""
     }],
     field_type: "text",
-    bgColor: "rgba(255, 255, 255, 1)",
-    borderColor: "#ccc",
+    bgColor: data?.bgColor ? data?.bgColor : "rgba(255, 255, 255, 1)",
+    borderColor: data?.borderColor ? data?.borderColor : "#ccc",
     bannerSpacing: {
       left: 16,
       right: 16,
       top: 16,
       bottom: 16
-    }
+    },
+    fontFamily: data?.fontFamily ? data?.fontFamily : "",
+    textSize: data?.textSize ? data?.textSize : "",
+    textColor: data?.textColor ? data?.textColor : "",
+    fontWeight: data?.fontWeight ? data?.fontWeight : "500"
   };
 };
 export const insertGridItem = editor => {

package/dist/Editor/utils/helper.js

@@ -64,7 +64,7 @@ export const getBorderColor = (color, borderWidth = 3) => {
 export const absoluteLink = url => {
   try {
     if (url?.indexOf("://") === -1) {
-      return `//${url}`;
+      return `/${url}`;
     }
     return url;
   } catch (err) {
@@ -496,7 +496,7 @@ export const isFreeGrid = (nodes, types = ["freegrid", "freegridItem", "freegrid
     }
     return false;
   } catch (err) {
-    console.log('isFreeGrid error:', err);
+    console.log("isFreeGrid error:", err);
     return false;
   }
 };

package/package.json

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