@flozy/editor 4.9.7 → 4.9.8

package/dist/Editor/Editor.css

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

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

@@ -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";
@@ -47,7 +47,7 @@ const GridItemToolbar = props => {
     className: "grid-item-toolbar",
     style: {
       top: "-34px",
-      left: "-4px",
+      left: "calc(100% - 68px)",
       display: "flex",
       flexDirection: "row"
     },
@@ -130,6 +130,7 @@ const GridItem = props => {
   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 +147,7 @@ const GridItem = props => {
     } catch (err) {
       console.log(err);
     }
-  }, [columnRef?.current, minWidth]);
+  }, [columnRef?.current, minWidth, childCount]);
   useEffect(() => {
     if (isDone || isRightCol) {
       initDoms();
@@ -164,7 +165,7 @@ const GridItem = props => {
     if (resizing) {
       updateColumnWidth({
         left: size?.width / parentDOM?.gridWidth * 100
-      });
+      }, path);
     }
   }, [resizing, size]);
   const initDoms = () => {

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/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/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/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.8",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"