@flozy/editor 4.0.6 → 4.0.7

package/dist/Editor/Elements/AI/PopoverAIInput.js

@@ -22,10 +22,11 @@ const scrollToAIInput = editor => {
         selectionRect = ReactEditor.toDOMRange(editor, getNextLine(editor).at).getBoundingClientRect();
       }
       const wrapperTop = slateWrapper.getBoundingClientRect().top;
-      const cursorViewPortPosition = selectionRect.top - wrapperTop;
+      const cursorViewPortPosition = selectionRect.bottom - wrapperTop; // here the slatewrapper is the viewport, not the whole screen. We are finding the position of the cursor/selection relative to the slate wrapper, that why we are subracting the slate wrapper top with selection bottom
+
       if (cursorViewPortPosition > 80) {
         // scroll to top of the slateWrapper
-        slateWrapper.scrollBy(0, selectionRect.bottom - wrapperTop - 80);
+        slateWrapper.scrollBy(0, cursorViewPortPosition - 80);
       }
     }, 200);
   } catch (err) {

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

@@ -18,6 +18,7 @@ import { onPasteRnDNode } from "../../helper";
 import focusOnNewItem from "../../helper/RnD/focusOnNewItem";
 import { appHeaderNode } from "../../utils/insertAppHeader";
 import { FORM_NODE } from "../../utils/form";
+import { DEFAULT_TABLE_NODE } from "../../utils/table";
 import itemOptions from "./Options/sectionItemOptions";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -158,7 +159,7 @@ const FreeGrid = props => {
           marginTop: 0,
           top: 0,
           width: 170,
-          height: 80
+          height: 30
         }], {
           at: [...insertAt]
         });
@@ -189,14 +190,16 @@ const FreeGrid = props => {
               top: 12,
               right: 12,
               bottom: 12
-            }
+            },
+            textAlign: "center",
+            label: "Get Started"
           }],
           gridArea: "3 / 1 / 4 / 2",
           left: 50,
           marginTop: 0,
           top: 0,
-          width: 170,
-          height: 80
+          width: 143,
+          height: 50
         }], {
           at: [...insertAt]
         });
@@ -237,6 +240,18 @@ const FreeGrid = props => {
           at: [...insertAt]
         });
         break;
+      case "addTable":
+        Transforms.insertNodes(editor, [{
+          ...insertFreeGridItem("table", {
+            ...DEFAULT_TABLE_NODE()
+          }, {
+            height: 130,
+            width: 400
+          })
+        }], {
+          at: [...insertAt]
+        });
+        break;
       case "addBox":
         Transforms.insertNodes(editor, [{
           ...insertFreeGridItem("box", {
@@ -254,7 +269,7 @@ const FreeGrid = props => {
           ...insertFreeGridItem("form", {
             ...FORM_NODE()
           }, {
-            height: 100,
+            height: 92,
             width: 400
           })
         }], {

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

@@ -24,7 +24,11 @@ const AddElement = props => {
       }), /*#__PURE__*/_jsx(ListItemButton, {
         className: "item-wrapper",
         onClick: handleClick("addVideo"),
-        children: "Video"
+        children: "Embed or Video"
+      }), /*#__PURE__*/_jsx(ListItemButton, {
+        className: "item-wrapper",
+        onClick: handleClick("addTable"),
+        children: "Table"
       }), /*#__PURE__*/_jsx(ListItemButton, {
         className: "item-wrapper",
         onClick: handleClick("addBox"),

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

@@ -4,6 +4,7 @@ const buttonOptions = ["settings", "link", "saveAsTemplate", "close"];
 const imageOptions = ["settings", "link", "saveAsTemplate", "close"];
 const boxOptions = ["settings", "link", "saveAsTemplate", "close"];
 const appHeaderOptions = ["settings", "saveAsTemplate", "close"];
+const tableOptions = ["drag", "edit", "settings", "saveAsTemplate", "close"];
 const sectionOptions = ["addElement", "settings", "moveUp", "moveDown", "saveAsTemplate", "more"];
 const formOptions = ["drag", "edit", "settings", "addFormField", "workFlow", "saveAsTemplate", "close"];
 const itemOptions = {
@@ -14,6 +15,7 @@ const itemOptions = {
   box: boxOptions,
   appHeader: appHeaderOptions,
   form: formOptions,
-  section: sectionOptions
+  section: sectionOptions,
+  table: tableOptions
 };
 export default itemOptions;

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

@@ -150,6 +150,9 @@ const useFreeGridStyles = ({
         },
 
         "& .fgi_type_form": {
+          "& .form-wrapper": {
+            padding: "0px !important"
+          },
           "& legend": {
             paddingLeft: "16px",
             paddingTop: "16px",
@@ -170,6 +173,21 @@ const useFreeGridStyles = ({
             }
           }
         },
+        "& .fgi_type_table": {
+          "& .tableToolBar": {
+            right: "0px",
+            left: "auto",
+            top: "-34px",
+            display: "flex",
+            flexDirection: "row-reverse",
+            "& .toolbtn.settings": {
+              display: "none"
+            },
+            "& .toolbtn.remove": {
+              display: "none"
+            }
+          }
+        },
         /** element toolbar hide */
         "& .element-toolbar": {
           display: "none"

package/dist/Editor/Elements/Table/Table.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Transforms } from "slate";
 import { useSelected, useSlateStatic } from "slate-react";
-import { Box, IconButton, Tooltip, Table as TableComp, TableBody, Popper, Typography } from "@mui/material";
+import { Box, IconButton, Tooltip, Table as TableComp, TableBody } from "@mui/material";
 import AlignHorizontalLeftIcon from "@mui/icons-material/AlignHorizontalLeft";
 import AlignHorizontalRightIcon from "@mui/icons-material/AlignHorizontalRight";
 import AlignVerticalTopIcon from "@mui/icons-material/AlignVerticalTop";
@@ -15,7 +15,6 @@ import { TableUtil } from "../../utils/table";
 import TablePopup from "./TablePopup";
 import { useEditorSelection } from "../../hooks/useMouseMove";
 import TableStyles from "./Styles";
-import useClickOutside from "../../hooks/useClickOutside";
 import "./table.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -150,7 +149,7 @@ const Table = props => {
           title: text,
           arrow: true,
           children: /*#__PURE__*/_jsx(IconButton, {
-            className: "toolbtn",
+            className: `toolbtn ${action?.type}`,
             onClick: handleAction(action),
             children: /*#__PURE__*/_jsx(Icon, {})
           })

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

@@ -0,0 +1,77 @@
+import React from "react";
+import { Node, Transforms } from "slate";
+import { Box } from "@mui/material";
+import { StyleContent } from "../../../StyleBuilder";
+import tableStyle from "../../../StyleBuilder/tableStyle";
+import { TableUtil } from "../../../../utils/table";
+import { jsx as _jsx } from "react/jsx-runtime";
+const TableSettings = props => {
+  const {
+    editor,
+    path,
+    customProps
+  } = props;
+  const item_path = path?.split("|").map(m => parseInt(m));
+  const element_path = [...item_path, 0];
+  const element = Node.get(editor, element_path);
+  const getTableProps = () => {
+    try {
+      const firstTCell = [...element_path, 0, 0, 0, 0];
+      const firstTCellTarget = {
+        anchor: {
+          path: [...firstTCell],
+          offset: 0
+        },
+        focus: {
+          path: [...firstTCell],
+          offset: 0
+        }
+      };
+      Transforms.select(editor, firstTCellTarget);
+      const table = new TableUtil(editor);
+      const tableProps = table.getTableProps();
+      return {
+        table,
+        tableProps
+      };
+    } catch (err) {
+      return element;
+    }
+  };
+  const onChange = data => {
+    try {
+      const {
+        table,
+        tableProps
+      } = getTableProps();
+      const updateData = {
+        ...data
+      };
+      delete updateData.children;
+      delete updateData.type;
+      table.updateTableStyle(updateData, {
+        ...tableProps
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  const handleClose = () => {
+    console.log("close");
+  };
+  return /*#__PURE__*/_jsx(Box, {
+    component: "div",
+    className: "item-w",
+    children: tableStyle?.map((m, i) => {
+      return /*#__PURE__*/_jsx(StyleContent, {
+        renderTabs: tableStyle,
+        value: m.value,
+        element: getTableProps()?.tableProps?.styleProps || {},
+        onChange: onChange,
+        customProps: customProps,
+        handleClose: handleClose
+      }, `tab_${m.value}_$${i}`);
+    })
+  });
+};
+export default TableSettings;

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

@@ -5,6 +5,7 @@ import VideoSettings from "./VideoSettings";
 import BoxSettings from "./BoxSettings";
 import AppHeaderSettings from "./AppHeaderSettings";
 import FormSettings from "./FormSettings";
+import TableSettings from "./TableSettings";
 const SettingsComponents = {
   text: TextSettings,
   button: ButtonSettings,
@@ -12,6 +13,7 @@ const SettingsComponents = {
   video: VideoSettings,
   box: BoxSettings,
   appHeader: AppHeaderSettings,
-  form: FormSettings
+  form: FormSettings,
+  table: TableSettings
 };
 export default SettingsComponents;

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

@@ -2,17 +2,19 @@ export const settingsLabel = {
   text: "Text Settings",
   button: "Button Settings",
   image: "Image Settings",
-  video: "Video Settings",
+  video: "Embed or Video Settings",
   box: "Box Settings",
   appHeader: "App Header Settings",
-  form: "Form Settings"
+  form: "Form Settings",
+  table: "Table Settings"
 };
 export const ItemTypes = {
   text: "Text",
   button: "Button",
   image: "Image",
-  video: "Video",
+  video: "Embed or Video",
   box: "Box",
   appHeader: "App Header",
-  form: "Form"
+  form: "Form",
+  table: "Table"
 };

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

@@ -273,7 +273,6 @@ const RnD = props => {
   };
   const onDragStart = e => {
     e.preventDefault();
-    console.log(e?.target?.dataset);
     if (e?.target?.dataset?.path?.split(",").join("|") === sp) {
       const {
         left,

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

@@ -4,7 +4,8 @@ const sectionStyle = [{
   fields: [{
     label: "Section Name",
     key: "sectionName",
-    type: "text"
+    type: "text",
+    placeholder: "Welcome"
   }]
 }, {
   tab: "Colors",

package/dist/Editor/helper/index.js

@@ -208,7 +208,8 @@ export const onPasteRnDNode = (editor, {
         left: parsed_node?.left + 20,
         marginTop: parsed_node?.marginTop + 20,
         // to maintain unique drop location in different section also
-        gridArea: "1 / 1 / 2 / 2"
+        gridArea: "1 / 1 / 2 / 2",
+        xs_updatedOn: null
       }], {
         at: new_path
       });

package/dist/Editor/utils/freegrid.js

@@ -42,37 +42,150 @@ export const insertFreeGrid = (editor, path, extProps) => {
         children: [{
           type: "paragraph",
           children: [{
-            text: "Heading One",
-            fontSize: {
-              xs: "38px",
-              sm: "54px",
-              md: "54px",
-              lg: "54px"
+            type: "grid",
+            grid: "container",
+            children: [{
+              type: "grid-item",
+              grid: 12,
+              children: [{
+                type: "alignCenter",
+                children: [{
+                  type: "paragraph",
+                  children: [{
+                    text: "Lorem ipsum sit ",
+                    fontSize: {
+                      xs: "80px",
+                      sm: "80px",
+                      md: "80px",
+                      lg: "80px"
+                    },
+                    fontFamily: "PoppinsBold",
+                    color: "rgb(132, 141, 151)"
+                  }]
+                }]
+              }, {
+                type: "alignCenter",
+                children: [{
+                  type: "paragraph",
+                  children: [{
+                    fontSize: {
+                      xs: "80px",
+                      sm: "80px",
+                      md: "80px",
+                      lg: "80px"
+                    },
+                    fontFamily: "PoppinsBold",
+                    text: "amet.",
+                    color: "rgb(132, 141, 151)"
+                  }, {
+                    fontSize: {
+                      xs: "80px",
+                      sm: "80px",
+                      md: "80px",
+                      lg: "80px"
+                    },
+                    fontFamily: "PoppinsBold",
+                    text: " "
+                  }, {
+                    fontSize: {
+                      xs: "80px",
+                      sm: "80px",
+                      md: "80px",
+                      lg: "80px"
+                    },
+                    fontFamily: "PoppinsBold",
+                    text: "Lorem",
+                    color: "rgb(131, 96, 253)"
+                  }]
+                }]
+              }],
+              bgColor: "rgba(255, 255, 255, 0)",
+              borderColor: "rgba(204, 204, 204, 0)",
+              lockSpacing: true,
+              bannerSpacing: {
+                top: "16",
+                left: "16",
+                right: "16",
+                bottom: "16"
+              }
+            }],
+            alignment: {
+              flexDirection: "column"
             },
-            fontFamily: "PoppinsBold"
+            lockSpacing: false,
+            bannerSpacing: {
+              top: "32",
+              left: "16",
+              right: "16",
+              bottom: "16"
+            },
+            gridSize: 8
           }]
         }]
       }],
-      gridArea: "2 / 1 / 3 / 2",
-      height: 88,
+      gridArea: "1 / 1 / 2 / 2",
+      height: 323,
       width: 746,
-      left: 129,
-      marginTop: 23,
+      left: 127,
+      marginTop: 25,
       top_xs: 105.1875,
       left_xs: 22,
       marginTop_xs: 38,
       width_xs: 272,
       height_xs: 163.0078125,
       gridArea_xs: "2 / 1 / 3 / 2",
-      updated_at: 1728554109479,
-      lg_updatedOn: 1726290562773,
-      xs_updatedOn: 1728554109478
+      updated_at: 1729055084817,
+      lg_updatedOn: 1729055010519,
+      xs_updatedOn: null
+    }, {
+      type: "freegridItem",
+      childType: "button",
+      children: [{
+        type: "button",
+        children: [{
+          text: ""
+        }],
+        buttonLink: {
+          linkType: "webAddress"
+        },
+        iconPosition: "start",
+        bgColor: "#2563EB",
+        textColor: "#FFF",
+        borderRadius: {
+          topLeft: 30,
+          topRight: 30,
+          bottomLeft: 30,
+          bottomRight: 30
+        },
+        bannerSpacing: {
+          left: 12,
+          top: 12,
+          right: 12,
+          bottom: 12
+        },
+        textAlign: "center",
+        label: "Get Started"
+      }],
+      gridArea: "7 / 1 / 8 / 2",
+      left: 428,
+      marginTop: 42,
+      top: 0,
+      width: 143,
+      height: 50,
+      lg_updatedOn: 1729055084816,
+      updated_at: 1729055084817,
+      top_xs: 366,
+      left_xs: 24,
+      marginTop_xs: 12,
+      width_xs: 272,
+      height_xs: 48,
+      gridArea_xs: "8 / 1 / 9 / 2"
     }],
     height_xs: 593.0625,
-    updated_at: 1728554109479,
+    updated_at: 1729055084816,
     width: 0,
-    sectionBgColor: "rgb(222, 99, 138)",
-    xs_updatedOn: 1727921628092,
+    sectionBgColor: "rgb(255, 255, 255)",
+    xs_updatedOn: null,
     sectionName: "Home"
   }];
   const newPath = path ? path : editor?.selection?.anchor?.path;

package/dist/Editor/utils/table.js

@@ -1,6 +1,111 @@
 import { Transforms, Editor, Range, Element, Path, Node } from "slate";
 import { ReactEditor } from "slate-react";
 import { customInsertNode } from "./helper";
+export const DEFAULT_TABLE_NODE = () => ({
+  type: "table",
+  children: [{
+    type: "table-row",
+    children: [{
+      type: "table-cell",
+      children: [{
+        type: "paragraph",
+        children: [{
+          text: ""
+        }],
+        cellBgColor: "#FFFFFF"
+      }]
+    }, {
+      type: "table-cell",
+      children: [{
+        type: "paragraph",
+        children: [{
+          text: ""
+        }],
+        cellBgColor: "#FFFFFF"
+      }]
+    }, {
+      type: "table-cell",
+      children: [{
+        type: "paragraph",
+        children: [{
+          text: ""
+        }],
+        cellBgColor: "#FFFFFF"
+      }]
+    }]
+  }, {
+    type: "table-row",
+    children: [{
+      type: "table-cell",
+      children: [{
+        type: "paragraph",
+        children: [{
+          text: ""
+        }],
+        cellBgColor: "#FFFFFF"
+      }]
+    }, {
+      type: "table-cell",
+      children: [{
+        type: "paragraph",
+        children: [{
+          text: ""
+        }],
+        cellBgColor: "#FFFFFF"
+      }]
+    }, {
+      type: "table-cell",
+      children: [{
+        type: "paragraph",
+        children: [{
+          text: ""
+        }],
+        cellBgColor: "#FFFFFF"
+      }],
+      size: {
+        widthInPercent: 100,
+        height: 100,
+        width: 365.3307291666667
+      }
+    }]
+  }, {
+    type: "table-row",
+    children: [{
+      type: "table-cell",
+      children: [{
+        type: "paragraph",
+        children: [{
+          text: ""
+        }],
+        cellBgColor: "#FFFFFF"
+      }]
+    }, {
+      type: "table-cell",
+      children: [{
+        type: "paragraph",
+        children: [{
+          text: ""
+        }],
+        cellBgColor: "#FFFFFF"
+      }]
+    }, {
+      type: "table-cell",
+      children: [{
+        type: "paragraph",
+        children: [{
+          text: ""
+        }],
+        cellBgColor: "#FFFFFF"
+      }],
+      size: {
+        height: 300,
+        widthInPercent: 100
+      }
+    }]
+  }],
+  rows: 3,
+  columns: 3
+});
 const prefixKey = (obj, pk = "") => {
   return Object.keys(obj).reduce((a, b) => {
     a[`${pk}${b}`] = obj[b];

package/package.json

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