@flozy/editor 4.9.7 → 4.9.9

package/dist/Editor/Editor.css

@@ -1260,4 +1260,3 @@ blockquote {
 .hideScroll::-webkit-scrollbar-thumb:hover {
   background: none !important;
 }
-

package/dist/Editor/Elements/Embed/Video.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { Node, Transforms } from "slate";
 import { IconButton, Tooltip, Box, useTheme } from "@mui/material";
@@ -24,6 +24,13 @@ const VideoContent = props => {
     alt,
     videoSX
   } = props;
+  const iframeRef = useRef(null);
+  useEffect(() => {
+    if (iframeRef.current) {
+      iframeRef.current.src = "about:blank"; // reloading the iframe
+      iframeRef.current.src = embedURL;
+    }
+  }, [embedURL, iframeRef.current]);
   return resizing ? /*#__PURE__*/_jsx("div", {
     style: {
       width: "100%",
@@ -37,6 +44,7 @@ const VideoContent = props => {
       icon: "videoPlayer"
     })
   }) : /*#__PURE__*/_jsx(Box, {
+    ref: iframeRef,
     component: "iframe",
     className: "embedd-iframe",
     sx: {
@@ -52,7 +60,6 @@ const VideoContent = props => {
       background: bgColor || "transparent",
       ...videoSX
     },
-    src: embedURL,
     title: alt,
     allowFullScreen: true
   });

package/dist/Editor/Elements/Grid/GridItem.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
 import React, { useEffect, useState, useRef } from "react";
-import { Button, Dialog, DialogActions, DialogContent, useTheme } from "@mui/material";
+import { Button, Dialog, DialogActions, DialogContent, useTheme, Popper } from "@mui/material";
 import { Node, Path, Transforms } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import GridItemPopup from "./GridItemPopup";
@@ -13,7 +13,7 @@ import { isEmptyNode } from "../../utils/helper";
 import { onAddGridItem } from "../../utils/gridItem";
 import useTableResize from "../../utils/customHooks/useTableResize";
 import GridStyles from "./Styles";
-import { useGrid } from "./Providers/GridProvider";
+import { useGrid, getChildCount } from "./Providers/GridProvider";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -37,27 +37,23 @@ const Resizer = ({
 };
 const GridItemToolbar = props => {
   const {
+    classes,
     selected,
     showTool,
     onSettings,
-    onAddColumn
+    onAddColumn,
+    columnRef
   } = props;
-  return selected && !showTool ? /*#__PURE__*/_jsxs("div", {
-    contentEditable: false,
-    className: "grid-item-toolbar",
-    style: {
-      top: "-34px",
-      left: "-4px",
-      display: "flex",
-      flexDirection: "row"
-    },
+  return selected && !showTool ? /*#__PURE__*/_jsxs(Popper, {
+    anchorEl: columnRef?.current,
+    open: true,
+    placement: "top-end",
+    sx: classes.popTools,
+    className: "gi-tool-pp",
     children: [/*#__PURE__*/_jsx(Tooltip, {
       title: "Column Settings",
       arrow: true,
       children: /*#__PURE__*/_jsx(IconButton, {
-        sx: {
-          marginRight: "4px"
-        },
         size: "small",
         onClick: onSettings,
         children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
@@ -66,9 +62,6 @@ const GridItemToolbar = props => {
       title: "Add Column",
       arrow: true,
       children: /*#__PURE__*/_jsx(IconButton, {
-        sx: {
-          marginRight: "4px"
-        },
         size: "small",
         onClick: onAddColumn,
         children: /*#__PURE__*/_jsx(AddIcon, {})
@@ -84,9 +77,13 @@ const GridItem = props => {
     updateColumnWidth,
     updateColNodes
   } = useGrid() || {};
+  const {
+    hoverPath,
+    theme: appTheme
+  } = useEditorContext();
   const columnRef = useRef(null);
   const theme = useTheme();
-  const classes = GridStyles(theme);
+  const classes = GridStyles(theme, appTheme);
   const {
     attributes,
     children,
@@ -123,13 +120,11 @@ const GridItem = props => {
   } = alignment || {};
   const editor = useSlateStatic();
   const path = ReactEditor.findPath(editor, element);
-  const {
-    hoverPath
-  } = useEditorContext();
   const selected = hoverPath === path.join(",");
   const [showTool] = useEditorSelection(editor);
   const [parentDOM, setParentDOM] = useState({});
   const [alert, setAlert] = useState(null);
+  const childCount = getChildCount(editor, path);
   const [size, onMouseDown, resizing, onLoad, isDone] = useTableResize({
     ...parentDOM
   });
@@ -146,7 +141,7 @@ const GridItem = props => {
     } catch (err) {
       console.log(err);
     }
-  }, [columnRef?.current, minWidth]);
+  }, [columnRef?.current, minWidth, childCount]);
   useEffect(() => {
     if (isDone || isRightCol) {
       initDoms();
@@ -164,7 +159,7 @@ const GridItem = props => {
     if (resizing) {
       updateColumnWidth({
         left: size?.width / parentDOM?.gridWidth * 100
-      });
+      }, path);
     }
   }, [resizing, size]);
   const initDoms = () => {
@@ -307,10 +302,12 @@ const GridItem = props => {
         className: "element-selector-dots br",
         children: " "
       }), /*#__PURE__*/_jsx(GridItemToolbar, {
+        classes: classes,
         selected: selected,
         showTool: showTool,
         onSettings: onSettings,
-        onAddColumn: onAddColumn
+        onAddColumn: onAddColumn,
+        columnRef: columnRef
       })]
     }), /*#__PURE__*/_jsx(Box, {
       ref: columnRef,

package/dist/Editor/Elements/Grid/Providers/GridProvider.js

@@ -24,12 +24,24 @@ const getAdjacentColumnPath = (editor, currentPath, direction = "next") => {
   }; // Return the adjacent column's path
 };
 
-const isSingleColumn = (editor, parentPath) => {
+const isSingleColumn = (editor, currentPath) => {
   try {
+    const parentPath = Path.parent(currentPath); // Get the parent grid path
     const gridNode = Node.get(editor, parentPath);
     return gridNode?.children?.length === 1;
   } catch (err) {
     console.log(err);
+    return false;
+  }
+};
+export const getChildCount = (editor, currentPath) => {
+  try {
+    const parentPath = Path.parent(currentPath); // Get the parent grid path
+    const gridNode = Node.get(editor, parentPath);
+    return gridNode?.children?.length;
+  } catch (err) {
+    console.log(err);
+    return 0;
   }
 };
 export const GridProvider = ({
@@ -69,11 +81,11 @@ export const GridProvider = ({
    *
    * @param {*} data - contains {left: calculatedWidth}
    */
-  const updateColumnWidth = data => {
+  const updateColumnWidth = (data, currentColPath) => {
     // logic to update right column width
     const right = columnWidths?.right - (data?.left - columnWidths?.left);
     const diff = right !== widths?.right;
-    if (isSingleColumn(editor, columnWidths?.parentPath) && data?.left <= 100) {
+    if (isSingleColumn(editor, currentColPath) && data?.left <= 100) {
       setWidths({
         ...data,
         right: right

package/dist/Editor/Elements/Grid/Styles.js

@@ -1,4 +1,4 @@
-const GridStyles = theme => ({
+const GridStyles = (theme, appTheme) => ({
   gridButton: {
     background: "#007FFF",
     color: "#fff",
@@ -86,6 +86,32 @@ const GridStyles = theme => ({
         }
       }
     }
+  },
+  popTools: {
+    zIndex: 1000,
+    "& button": {
+      borderRadius: "8px",
+      marginRight: "4px",
+      border: "1px solid rgba(37, 99, 235, 0.32)",
+      boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
+      background: appTheme?.palette?.editor?.background,
+      color: "#64748B",
+      "& svg": {
+        width: "16px",
+        height: "16px",
+        "& .fillStroke": {
+          stroke: "#64748B"
+        }
+      },
+      "&:hover": {
+        background: appTheme?.palette?.editor?.background,
+        border: "1px solid #2684ff",
+        color: "#2684ff",
+        "& .fillStroke": {
+          stroke: "#2684ff"
+        }
+      }
+    }
   }
 });
 export default GridStyles;

package/dist/Editor/Elements/Search/SearchList.js

@@ -113,26 +113,7 @@ const SearchAndDocList = ({
         overflowY: 'auto',
         overflowX: 'hidden',
         padding: '0px 16px 8px',
-        marginBottom: '20px',
-        scrollbarWidth: "thin",
-        scrollbarColor: `${theme?.palette?.primary?.slashBrainBorder} transparent`,
-        "&::-webkit-scrollbar": {
-          width: "3px",
-          height: "3px !important",
-          borderRadius: "10px"
-        },
-        "&::-webkit-scrollbar-thumb": {
-          backgroundColor: theme?.palette?.primary?.slashBrainBorder,
-          borderRadius: "10px",
-          width: "3px !important"
-        },
-        "&::-webkit-scrollbar-thumb:hover": {
-          backgroundColor: theme?.palette?.primary?.slashBrainBorder
-        },
-        "&::-webkit-scrollbar-track": {
-          background: "transparent",
-          borderRadius: "10px"
-        }
+        marginBottom: '20px'
       },
       children: [mapData?.map((doc, index) => {
         const title = doc?.title?.trim() === "" ? 'Untitled' : doc?.title;

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

@@ -78,7 +78,11 @@ const Table = props => {
   const {
     bgColor,
     borderColor,
-    xsHidden
+    xsHidden,
+    fontFamily,
+    fontWeight,
+    textSize,
+    textColor
   } = element;
   const editor = useSlateStatic();
   const selected = useSelected();
@@ -190,7 +194,8 @@ const Table = props => {
     editor: editor,
     otherProps: {
       dragRowBtnCls,
-      tablePath: path
+      tablePath: path,
+      openSetttings
     },
     children: [/*#__PURE__*/_jsxs("div", {
       style: {
@@ -213,7 +218,11 @@ const Table = props => {
         style: {
           background: bgColor,
           border: borderColor ? `1px solid ${borderColor}` : "",
-          width: "auto"
+          width: "auto",
+          fontFamily,
+          fontWeight,
+          fontSize: textSize,
+          color: textColor
         },
         ref: tableRef,
         children: /*#__PURE__*/_jsx(TableBody, {

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

@@ -9,7 +9,7 @@ import { getBreakPointsValue, getTRBLBreakPoints, groupByBreakpoint } from "../.
 import DragHandle from "../DnD/DragHandleButton";
 import { useEditorSelection } from "../../hooks/useMouseMove";
 import SectionStyle from "./styles";
-// import useWindowResize from "../../hooks/useWindowResize"; //commenting for ui demo if okay remove this comment before dev
+import useWindowResize from "../../hooks/useWindowResize";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -45,11 +45,8 @@ const Section = props => {
   const path = ReactEditor.findPath(editor, element);
   const anchorEl = useRef(null);
   const popperEl = useRef(null);
-
-  // const [size] = useWindowResize();
-  // const isSectionFullWidth =
-  //   sectionGridSize && sectionGridSize[size?.device] >= 12;
-
+  const [size] = useWindowResize();
+  const isSectionFullWidth = sectionGridSize && sectionGridSize[size?.device] >= 12;
   const [isHovering, setIsHovering] = useState(false);
   const onMouseEnter = () => {
     setIsHovering(true);
@@ -80,9 +77,6 @@ const Section = props => {
       children: /*#__PURE__*/_jsx(Tooltip, {
         title: "Section Settings",
         children: /*#__PURE__*/_jsx(IconButton, {
-          sx: {
-            marginBottom: '25px !important'
-          },
           onClick: onSettings,
           children: /*#__PURE__*/_jsx(TuneIcon, {})
         })
@@ -155,16 +149,11 @@ const Section = props => {
       className: "ed-section-inner",
       sx: {
         position: "relative",
-        ...edInnerSp,
-        outline: isHovering ? `1px dashed ${theme?.palette?.editor?.inputFieldBorder}` : 'none'
-        // borderRadius: '5px'
+        ...edInnerSp
       },
-
       ref: anchorEl,
-      children: [isHovering ? /*#__PURE__*/_jsx(Popper, {
-        open: isHovering
-        // open={isHovering && isSectionFullWidth}  //commenting for ui demo if okay remove this comment before dev
-        ,
+      children: [isHovering && isSectionFullWidth ? /*#__PURE__*/_jsx(Popper, {
+        open: isHovering && isSectionFullWidth,
         anchorEl: anchorEl?.current,
         placement: "top-start",
         sx: {
@@ -187,7 +176,11 @@ const Section = props => {
             fromPopper: true
           })]
         })
-      }) : /*#__PURE__*/_jsx(_Fragment, {}), children]
+      }) : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
+          ...props
+        }) : null, /*#__PURE__*/_jsx(Toolbar, {})]
+      }), children]
     }), openSetttings ? /*#__PURE__*/_jsx(SectionPopup, {
       element: {
         ...element,

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

@@ -1,65 +1,17 @@
 import { toolbarGroups } from "../../Toolbar/toolbarGroups";
 import { fontOptions } from "../../utils/font";
+import { capitalizeFirstLetter } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
-const tableStyle = [{
-  tab: "Table",
-  value: "tableSettings",
-  fields: [{
-    label: "Table Background",
-    key: "table.bgColor",
-    type: "color"
-  }, {
-    label: "Cell Border",
-    key: "table.borderColor",
-    type: "color"
-  }]
-}, {
-  tab: "Row",
-  value: "rowSettings",
-  fields: [{
-    label: "Row Background",
-    key: "row.bgColor",
-    type: "color"
-  }, {
-    label: "Row Border",
-    key: "row.borderColor",
-    type: "color"
-  }]
-}, {
-  tab: "Column",
-  value: "columnSettings",
-  fields: [{
-    label: "Entire Column Background",
-    key: "col.entireBgColor",
-    type: "color"
-  }, {
-    label: "Selected Cell Background",
-    key: "col.bgColor",
-    type: "color"
-  }, {
-    label: "Selected Cell Border Color",
-    key: "col.borderColor",
-    type: "color"
-  }]
-}, {
-  tab: "Visibility",
-  value: "visibility",
-  fields: [{
-    label: "Hide on Mobile",
-    key: "table.xsHidden",
-    type: "selectBox",
-    placeholder: "Hide on Mobile"
-  }]
-}];
-export default tableStyle;
 const allTools = toolbarGroups.flat();
 const fontWeight = allTools.find(f => f.format === "fontWeight");
-export const tableRowStyle = [{
-  tab: "Row",
-  value: "rowSettings",
-  fields: [{
+function getKey(prefix, key) {
+  const settingKey = prefix === "col" ? capitalizeFirstLetter(key) : key;
+  return `${prefix}.${settingKey}`;
+}
+function getCommonSettings(prefix) {
+  let settings = [{
     label: "Font Family",
-    key: "row.fontFamily",
+    key: "fontFamily",
     type: "textOptions",
     webFont: true,
     options: fontOptions,
@@ -73,70 +25,71 @@ export const tableRowStyle = [{
     }
   }, {
     label: "Font Weight",
-    key: "row.fontWeight",
+    key: "fontWeight",
     type: "textOptions",
     options: fontWeight?.options,
     width: 7
   }, {
     label: "Font Size",
-    key: "row.textSize",
+    key: "textSize",
     type: "fontSize",
     width: 5,
     placeholder: "16px or 1em"
   }, {
     label: "Text Color",
-    key: "row.textColor",
+    key: "textColor",
     type: "color"
   }, {
     label: "Background",
-    key: "row.bgColor",
+    key: "bgColor",
     type: "color"
   }, {
     label: "Border",
-    key: "row.borderColor",
+    key: "borderColor",
     type: "color"
-  }]
-}];
-export const tableColumnStyle = [{
-  tab: "Column",
+  }];
+
+  // modify keys based on setting type (prefix)
+  settings = settings.map(s => ({
+    ...s,
+    key: getKey(prefix, s.key)
+  }));
+  return settings;
+}
+const tableStyle = [{
+  tab: "Table",
+  value: "tableSettings",
+  fields: getCommonSettings("table")
+}, {
+  tab: "Selected cell",
   value: "columnSettings",
   fields: [{
-    label: "Font Family",
-    key: "col.entireFontFamily",
-    type: "textOptions",
-    webFont: true,
-    options: fontOptions,
-    renderOption: option => {
-      return /*#__PURE__*/_jsx("span", {
-        style: {
-          fontFamily: option.value
-        },
-        children: option.text
-      });
-    }
-  }, {
-    label: "Font Weight",
-    key: "col.entireFontWeight",
-    type: "textOptions",
-    options: fontWeight?.options,
-    width: 7
-  }, {
-    label: "Font Size",
-    key: "col.entireTextSize",
-    type: "fontSize",
-    width: 5,
-    placeholder: "16px or 1em"
-  }, {
-    label: "Entire Text Color",
-    key: "col.entireTextColor",
-    type: "color"
-  }, {
-    label: "Background",
-    key: "col.entireBgColor",
+    label: "Selected Cell Background",
+    key: "col.bgColor",
     type: "color"
   }, {
-    label: "Border",
-    key: "col.entireBorderColor",
+    label: "Selected Cell Border Color",
+    key: "col.borderColor",
     type: "color"
   }]
+}, {
+  tab: "Visibility",
+  value: "visibility",
+  fields: [{
+    label: "Hide on Mobile",
+    key: "table.xsHidden",
+    type: "selectBox",
+    placeholder: "Hide on Mobile"
+  }]
+}];
+export default tableStyle;
+export const tableRowStyle = [{
+  tab: "Row",
+  value: "rowSettings",
+  fields: getCommonSettings("row")
+}];
+export const tableColumnStyle = [{
+  tab: "Column",
+  value: "columnSettings",
+  fields: getCommonSettings("col")
 }];

package/dist/Editor/common/iconslist.js

@@ -1274,6 +1274,7 @@ export const GridSettingsIcon = props => /*#__PURE__*/_jsxs("svg", {
   children: [/*#__PURE__*/_jsx("path", {
     d: "M11 13.75C12.5188 13.75 13.75 12.5188 13.75 11C13.75 9.48122 12.5188 8.25 11 8.25C9.48122 8.25 8.25 9.48122 8.25 11C8.25 12.5188 9.48122 13.75 11 13.75Z",
     stroke: "#64748B",
+    className: "fillStroke",
     strokeWidth: "1.5",
     strokeMiterlimit: "10",
     strokeLinecap: "round",
@@ -1281,6 +1282,7 @@ export const GridSettingsIcon = props => /*#__PURE__*/_jsxs("svg", {
   }), /*#__PURE__*/_jsx("path", {
     d: "M1.8335 11.8066V10.1933C1.8335 9.23998 2.61266 8.45165 3.57516 8.45165C5.23433 8.45165 5.91266 7.27832 5.0785 5.83915C4.60183 5.01415 4.886 3.94165 5.72016 3.46498L7.306 2.55748C8.03016 2.12665 8.96516 2.38332 9.396 3.10748L9.49683 3.28165C10.3218 4.72082 11.6785 4.72082 12.5127 3.28165L12.6135 3.10748C13.0443 2.38332 13.9793 2.12665 14.7035 2.55748L16.2893 3.46498C17.1235 3.94165 17.4077 5.01415 16.931 5.83915C16.0968 7.27832 16.7752 8.45165 18.4343 8.45165C19.3877 8.45165 20.176 9.23082 20.176 10.1933V11.8066C20.176 12.76 19.3968 13.5483 18.4343 13.5483C16.7752 13.5483 16.0968 14.7216 16.931 16.1608C17.4077 16.995 17.1235 18.0583 16.2893 18.535L14.7035 19.4425C13.9793 19.8733 13.0443 19.6166 12.6135 18.8925L12.5127 18.7183C11.6877 17.2791 10.331 17.2791 9.49683 18.7183L9.396 18.8925C8.96516 19.6166 8.03016 19.8733 7.306 19.4425L5.72016 18.535C4.886 18.0583 4.60183 16.9858 5.0785 16.1608C5.91266 14.7216 5.23433 13.5483 3.57516 13.5483C2.61266 13.5483 1.8335 12.76 1.8335 11.8066Z",
     stroke: "#64748B",
+    className: "fillStroke",
     strokeWidth: "1.5",
     strokeMiterlimit: "10",
     strokeLinecap: "round",

package/dist/Editor/hooks/useTable.js

@@ -61,8 +61,11 @@ export function getDefaultTableSelection() {
 export const TableProvider = ({
   editor,
   children,
-  otherProps
+  otherProps = {}
 }) => {
+  const {
+    openSetttings
+  } = otherProps;
   const [hoverPath, setHoverPath] = useState(null);
   const [tableSelection, setTableSelection] = useState(getDefaultTableSelection());
   const [tableResizing, setTableResizing] = useState(null);
@@ -148,9 +151,10 @@ export const TableProvider = ({
     };
   }, [tableSelection, editor, tableSelection]);
   useEffect(() => {
-    // on deselect table on insert
-    Transforms.deselect(editor);
-  }, []);
+    if (!openSetttings) {
+      resetAll();
+    }
+  }, [openSetttings]);
   return /*#__PURE__*/_jsx(TableContext.Provider, {
     value: values,
     children: /*#__PURE__*/_jsx(DndContext, {

package/dist/Editor/utils/helper.js

@@ -567,4 +567,8 @@ export const isPageSettings = (event, editor) => {
     isPageSettingsNode = true;
     return isPageSettingsNode;
   }
-};
+};
+export function capitalizeFirstLetter(str) {
+  if (!str) return str;
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}

package/package.json

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