@flozy/editor 5.0.4 → 5.0.6

package/dist/Editor/CommonEditor.js

@@ -298,10 +298,12 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     hideTools: updatedHideTools || []
   }) : [];
   const handleEditorChange = newValue => {
-    if (JSON.stringify(newValue) !== JSON.stringify(debouncedValue?.current)) {
-      debounced(newValue);
-      if (!isInteracted) {
-        setIsInteracted(true);
+    if (!readOnly) {
+      if (JSON.stringify(newValue) !== JSON.stringify(debouncedValue?.current)) {
+        debounced(newValue);
+        if (!isInteracted) {
+          setIsInteracted(true);
+        }
       }
     }
   };

package/dist/Editor/Editor.css

@@ -397,7 +397,7 @@ blockquote {
 .signature-tab2 {
   /* display: flex; */
   align-items: center;
-  border-width: 0px, 0px, 0px, 0px;
+  border-width: 1px;
   border-style: solid;
   border-color: #2563EB66;
   justify-content: center;
@@ -1261,3 +1261,21 @@ blockquote {
 .hideScroll::-webkit-scrollbar-thumb:hover {
   background: none !important;
 }
+
+.custom-scroll::-webkit-scrollbar {
+  height: .6rem; 
+}
+
+.custom-scroll::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 5px;
+  cursor: pointer; 
+}
+
+.custom-scroll::-webkit-scrollbar-track {
+  background: #f1f1f1; 
+}
+
+.custom-scroll:hover::-webkit-scrollbar-thumb {
+  background: #A7AEC1; 
+}

package/dist/Editor/Elements/Button/EditorButton.js

@@ -1,7 +1,7 @@
-import React, { useState } from "react";
+import React, { useState, useRef } from "react";
 import { Transforms } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
-import { IconButton, Tooltip, Box, useTheme } from "@mui/material";
+import { IconButton, Tooltip, Box, useTheme, Popper } from "@mui/material";
 import MUIIcon from "../../common/StyleBuilder/fieldTypes/loadIcon";
 import ButtonPopup from "./ButtonPopup";
 import { actionButtonRedirect } from "../../service/actionTrigger";
@@ -12,12 +12,14 @@ import LinkSettings from "../../common/LinkSettings";
 import Icon from "../../common/Icon";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const EditorButton = props => {
   const theme = useTheme();
   const {
     theme: appTheme
   } = useEditorContext();
+  const buttonRef = useRef(null);
   const {
     attributes,
     element,
@@ -111,48 +113,60 @@ const EditorButton = props => {
   const Toolbar = () => {
     const btnProps = handleLinkType(refURl, linkType, true, openInNewTab, handleTrigger);
     const hideOpenLink = linkType === "page" || !linkType;
-    return !readOnly ? /*#__PURE__*/_jsxs("div", {
-      className: "element-toolbar hr",
-      style: {
-        width: "max-content",
-        top: "-33px",
-        alignItems: "center",
-        cursor: "pointer"
+    return !readOnly && openMoreOptions ? /*#__PURE__*/_jsx(Popper, {
+      anchorEl: buttonRef?.current,
+      placement: "top-end",
+      open: openMoreOptions,
+      sx: {
+        zIndex: 1000
       },
-      children: [/*#__PURE__*/_jsx(Tooltip, {
-        title: "Settings",
-        arrow: true,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: onMenuClick("edit"),
-          children: /*#__PURE__*/_jsx(Icon, {
-            icon: "pagesSettings"
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "element-toolbar hr",
+        style: {
+          width: "max-content",
+          top: "-35px",
+          alignItems: "center",
+          cursor: "pointer",
+          display: "flex",
+          alignContent: "center",
+          justifyContent: "center"
+        },
+        children: [/*#__PURE__*/_jsx(Tooltip, {
+          title: "Settings",
+          arrow: true,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            onClick: onMenuClick("edit"),
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: "pagesSettings"
+            })
           })
-        })
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Nav Settings",
-        arrow: true,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: onMenuClick("nav"),
-          children: /*#__PURE__*/_jsx(Icon, {
-            icon: "link"
+        }), /*#__PURE__*/_jsx(Tooltip, {
+          title: "Nav Settings",
+          arrow: true,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            onClick: onMenuClick("nav"),
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: "link"
+            })
           })
-        })
-      }), hideOpenLink ? null : /*#__PURE__*/_jsx(Tooltip, {
-        title: "Open Link",
-        arrow: true,
-        children: /*#__PURE__*/_jsx(Box, {
-          sx: {
-            display: "inline-flex",
-            color: "rgba(0, 0, 0, 0.54)",
-            borderRadius: "50% !important",
-            border: "none !important"
-          },
-          ...btnProps,
-          children: /*#__PURE__*/_jsx(Icon, {
-            icon: "openLinkIcon"
+        }), hideOpenLink ? null : /*#__PURE__*/_jsx(_Fragment, {
+          children: /*#__PURE__*/_jsx(Tooltip, {
+            title: "Open Link",
+            arrow: true,
+            children: /*#__PURE__*/_jsx(Box, {
+              sx: {
+                display: "inline-flex",
+                color: "rgba(0, 0, 0, 0.54)",
+                marginBottom: "0px !important"
+              },
+              ...btnProps,
+              children: /*#__PURE__*/_jsx(Icon, {
+                icon: "openLinkIcon"
+              })
+            })
           })
-        })
-      })]
+        })]
+      })
     }) : null;
   };
   const onSave = data => {
@@ -232,6 +246,7 @@ const EditorButton = props => {
           display: "inline-block"
         },
         children: [/*#__PURE__*/_jsxs(Box, {
+          ref: buttonRef,
           className: `btn textAlign-${tAlign}`,
           sx: {
             textDecoration: "none",
@@ -274,19 +289,22 @@ const EditorButton = props => {
             },
             props: customProps
           })]
-        }), !readOnly && /*#__PURE__*/_jsx(IconButton, {
-          className: `moreBtnShow ${isMobile || openMoreOptions ? "activeBtnShow" : ""}`,
-          sx: {
-            position: "absolute",
-            right: "-42px",
-            stroke: "#fff",
-            "& path": {
-              fill: openMoreOptions ? appTheme.palette.text.blueText : ""
-            }
-          },
-          onClick: handleMoreBtn,
-          children: /*#__PURE__*/_jsx(Icon, {
-            icon: "moreVertical"
+        }), !readOnly && buttonRef?.current && /*#__PURE__*/_jsx(Popper, {
+          anchorEl: buttonRef?.current,
+          open: true,
+          placement: "right",
+          container: buttonRef?.current,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            className: `moreBtnShow ${isMobile || openMoreOptions ? "activeBtnShow" : ""}`,
+            sx: {
+              "& path": {
+                fill: openMoreOptions ? appTheme.palette.text.blueText : ""
+              }
+            },
+            onClick: handleMoreBtn,
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: "moreVertical"
+            })
           })
         }), !readOnly && isTrigger ? /*#__PURE__*/_jsx(IconButton, {
           className: "workflow-icon-btn",

package/dist/Editor/Elements/Color Picker/ColorButtons.js

@@ -109,11 +109,13 @@ const ColorButtons = props => {
     forMiniTool,
     openColorTool,
     onClose,
-    onColorPickerClick
+    onColorPickerClick,
+    defaultColors = []
   } = props;
   const [row1, ...restRows] = ColorChunks([]);
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
+  const firstRow = defaultColors || row1;
   const handleMore = e => {
     setAnchorEl(e.currentTarget);
   };
@@ -131,7 +133,7 @@ const ColorButtons = props => {
     sx: classes.colorButtons,
     children: [forMiniTool ? null : /*#__PURE__*/_jsx(Box, {
       className: "buttonsWrpr first",
-      children: [row1].map((m, i) => {
+      children: [firstRow].map((m, i) => {
         return /*#__PURE__*/_jsx(SingleColorButton, {
           id: `p1_${id}`,
           crs: m,

package/dist/Editor/Elements/DataView/DataView.js

@@ -0,0 +1,101 @@
+import React from "react";
+import { Node, Path, Transforms } from "slate";
+import { ReactEditor, useSlateStatic } from "slate-react";
+import { Box, useTheme } from "@mui/material";
+import { DataViewProvider } from "./Providers/DataViewProvider";
+import useDataViewStyles from "./styles";
+import LayoutView from "./Layouts";
+import FilterView from "./Layouts/FilterView";
+import { insertLineBreakAtEndOfPath } from "../../utils/helper";
+import { useEditorContext } from "../../hooks/useMouseMove";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const DataView = props => {
+  const {
+    theme: appTheme
+  } = useEditorContext();
+  const theme = useTheme();
+  const editor = useSlateStatic();
+  const {
+    attributes,
+    children,
+    element,
+    customProps,
+    title
+  } = props;
+  const {
+    CHARACTERS,
+    readOnly
+  } = customProps || {};
+  const {
+    properties,
+    layouts,
+    rows
+  } = element;
+  const classes = useDataViewStyles(theme, appTheme);
+  const path = ReactEditor.findPath(editor, element);
+  const onDuplicate = () => {
+    try {
+      const newPath = ReactEditor.findPath(editor, element);
+      const dataViewNode = Node.get(editor, newPath);
+      const cloneNode = JSON.parse(JSON.stringify(dataViewNode));
+      const toPath = Path.next(Path.parent(newPath));
+      Transforms.insertNodes(editor, [{
+        type: "paragraph",
+        children: [{
+          ...cloneNode
+        }]
+      }], {
+        at: toPath
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  const onDelete = () => {
+    try {
+      const newPath = ReactEditor.findPath(editor, element);
+      Transforms.removeNodes(editor, {
+        at: newPath
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  const onEnter = () => {
+    try {
+      const newPath = ReactEditor.findPath(editor, element);
+      const toPath = Path.previous(Path.parent(newPath));
+      insertLineBreakAtEndOfPath(editor, toPath);
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  return /*#__PURE__*/_jsx(Box, {
+    ...attributes,
+    className: "fe-dataview",
+    sx: classes.root,
+    children: /*#__PURE__*/_jsxs(DataViewProvider, {
+      initialData: {
+        properties,
+        layouts,
+        rows,
+        users: CHARACTERS,
+        tableTitle: title
+      },
+      path: path,
+      editor: editor,
+      children: [/*#__PURE__*/_jsx(FilterView, {
+        classes: classes,
+        onEnter: onEnter,
+        onDelete: onDelete,
+        onDuplicate: onDuplicate,
+        readOnly: readOnly
+      }), /*#__PURE__*/_jsx(LayoutView, {
+        readOnly: readOnly,
+        children: children
+      })]
+    })
+  });
+};
+export default DataView;

package/dist/Editor/Elements/DataView/DataViewButton.js

@@ -0,0 +1,23 @@
+import React from "react";
+import ToolbarIcon from "../../common/ToolbarIcon";
+import Icon from "../../common/Icon";
+import { insertDataView } from "../../utils/dataView";
+import { jsx as _jsx } from "react/jsx-runtime";
+const DataViewButton = props => {
+  const {
+    editor,
+    icoBtnType
+  } = props;
+  const onClick = () => {
+    insertDataView(editor);
+  };
+  return /*#__PURE__*/_jsx(ToolbarIcon, {
+    title: "Dynamic Table",
+    onClick: onClick,
+    icon: /*#__PURE__*/_jsx(Icon, {
+      icon: "dataView"
+    }),
+    icoBtnType: icoBtnType
+  });
+};
+export default DataViewButton;

package/dist/Editor/Elements/DataView/Layouts/ColumnView.js

@@ -0,0 +1,59 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Box, Checkbox, Popper } from "@mui/material";
+import DataTypes from "./DataTypes";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const ColumnView = props => {
+  const {
+    needAnchor,
+    rowIndex,
+    row,
+    property,
+    onSelect,
+    selected,
+    readOnly
+  } = props;
+  const DataType = DataTypes[property?.type] || DataTypes["text"];
+  const anchorRef = useRef(null);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  useEffect(() => {
+    if (anchorRef?.current) {
+      setAnchorEl(anchorRef?.current);
+    }
+  }, [anchorRef?.current]);
+  const handleSelect = id => e => {
+    onSelect(id, e.target.checked);
+  };
+  return /*#__PURE__*/_jsxs(Box, {
+    component: "td",
+    ref: anchorRef,
+    children: [/*#__PURE__*/_jsx(DataType, {
+      options: property?.options,
+      property: property?.key,
+      value: row[property?.key] || "",
+      rowIndex: rowIndex,
+      label: property?.label,
+      readOnly: readOnly
+    }), needAnchor && !readOnly ? /*#__PURE__*/_jsx(Popper, {
+      sx: {
+        zIndex: 1000
+      },
+      open: open,
+      anchorEl: anchorEl,
+      placement: "left",
+      container: anchorRef?.current,
+      className: `tv-tr-pop ${selected ? "active" : ""}`,
+      children: /*#__PURE__*/_jsx(Checkbox, {
+        onClick: handleSelect(row?.id),
+        size: "small",
+        className: "tv-ck-box",
+        sx: {
+          mr: 0
+        },
+        checked: selected
+      })
+    }) : null]
+  });
+};
+export default ColumnView;

package/dist/Editor/Elements/DataView/Layouts/DataTypes/CheckType.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { useDataView } from "../../Providers/DataViewProvider";
+import Checkbox from "@mui/material/Checkbox";
+import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import { jsx as _jsx } from "react/jsx-runtime";
+const CheckType = props => {
+  const {
+    rowIndex,
+    property,
+    value,
+    readOnly
+  } = props;
+  const {
+    onChange
+  } = useDataView();
+  const handleChange = e => {
+    onChange(rowIndex, {
+      [property]: e?.target?.checked
+    });
+  };
+  return /*#__PURE__*/_jsx(Checkbox, {
+    checked: value,
+    icon: /*#__PURE__*/_jsx(CheckCircleOutlineIcon, {}),
+    checkedIcon: /*#__PURE__*/_jsx(CheckCircleIcon, {}),
+    onChange: handleChange,
+    disabled: readOnly
+  }, rowIndex);
+};
+export default CheckType;

package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/Select.js

@@ -0,0 +1,128 @@
+import React from "react";
+import TextField from "@mui/material/TextField";
+import Autocomplete from "@mui/material/Autocomplete";
+import { Box, Chip } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+const filter = (opt, params, selectedOpt) => {
+  const selectedVals = selectedOpt?.map(m => m?.value);
+  const fv = opt?.filter(f => !selectedVals.includes(f.value));
+  if (params?.inputValue) {
+    fv.filter(f => f?.value?.toLowerCase().indexOf(params?.inputValue?.toLowerCase()) >= 0);
+  }
+  return fv;
+};
+export default function Select(props) {
+  const {
+    value,
+    onChange,
+    options,
+    multiple = false,
+    limitTags = 2,
+    placeholder = "",
+    disabled = false
+  } = props;
+  return /*#__PURE__*/_jsx(Autocomplete, {
+    disabled: disabled,
+    className: "tv-ac-field",
+    multiple: true,
+    limitTags: limitTags,
+    placeholder: placeholder,
+    value: value || "",
+    onChange: (event, newValue) => {
+      const fv = [];
+      newValue?.forEach(m => {
+        if (multiple) {
+          fv.push({
+            value: m.inputValue || m.value
+          });
+        } else {
+          fv[0] = {
+            value: m.inputValue || m.value
+          };
+        }
+      });
+      onChange(fv);
+    },
+    filterOptions: (options, params) => {
+      const filtered = filter(options, params, value);
+
+      // const { inputValue } = params;
+      // Suggest the creation of a new value
+      // const isExisting = options.some(
+      //   (option) => inputValue?.toLowerCase() === option.value?.toLowerCase()
+      // );
+      // no need of new val now
+      // if (inputValue !== "" && !isExisting) {
+      //   filtered.push({
+      //     inputValue,
+      //     value: `Add "${inputValue}"`,
+      //   });
+      // }
+
+      return filtered;
+    },
+    selectOnFocus: true,
+    clearOnBlur: true,
+    handleHomeEndKeys: true,
+    options: options || [],
+    getOptionLabel: option => {
+      // Value selected with enter, right from the input
+      if (typeof option === "string") {
+        return option;
+      }
+      // Add "xxx" option created dynamically
+      if (option.inputValue) {
+        return option.inputValue;
+      }
+      // Regular option
+      return option.value || "";
+    },
+    renderTags: (value, getTagProps) => {
+      return /*#__PURE__*/_jsx(Box, {
+        className: "tv-ms-tag-wrpr",
+        children: value?.map((option, index) => {
+          const {
+            key,
+            ...tagProps
+          } = getTagProps({
+            index
+          }) || {};
+          return option?.value ? /*#__PURE__*/_jsx(Chip, {
+            variant: "outlined",
+            label: option?.label || option?.value,
+            ...tagProps,
+            sx: {
+              background: option?.color || "#CCC",
+              border: "none"
+            }
+          }, key) : null;
+        })
+      });
+    },
+    renderOption: (props, option) => {
+      const {
+        key,
+        ...optionProps
+      } = props;
+      return /*#__PURE__*/_jsx("li", {
+        ...optionProps,
+        children: /*#__PURE__*/_jsx(Chip, {
+          label: option.label || option.value || "",
+          sx: {
+            backgroundColor: option.color || "#CCC"
+          }
+        })
+      }, key);
+    },
+    freeSolo: true,
+    size: "small",
+    fullWidth: true,
+    renderInput: params => {
+      return /*#__PURE__*/_jsx(TextField, {
+        size: "small",
+        ...params,
+        placeholder: placeholder
+      });
+    }
+  });
+}

package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/SimpleSelect.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { MenuItem, Select } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+const SimpleSelect = props => {
+  const {
+    value,
+    options,
+    handleChange,
+    disabled = false
+  } = props;
+  return /*#__PURE__*/_jsx(Select, {
+    disabled: disabled,
+    value: value,
+    onChange: handleChange,
+    fullWidth: true,
+    size: "small",
+    children: options?.map((m, i) => {
+      return /*#__PURE__*/_jsx(MenuItem, {
+        value: m.key,
+        children: m.label
+      }, i);
+    })
+  });
+};
+export default SimpleSelect;

package/dist/Editor/Elements/DataView/Layouts/DataTypes/DateType.js

@@ -0,0 +1,26 @@
+import React from "react";
+import DatePicker from "react-datepicker";
+import { useDataView } from "../../Providers/DataViewProvider";
+import { jsx as _jsx } from "react/jsx-runtime";
+const DateType = props => {
+  const {
+    rowIndex,
+    property,
+    value,
+    readOnly
+  } = props;
+  const {
+    onChange
+  } = useDataView();
+  const handleChange = date => {
+    onChange(rowIndex, {
+      [property]: date
+    });
+  };
+  return /*#__PURE__*/_jsx(DatePicker, {
+    disabled: readOnly,
+    selected: value ? new Date(value) : "",
+    onChange: handleChange
+  });
+};
+export default DateType;

package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { useDataView } from "../../Providers/DataViewProvider";
+import Select from "./Components/Select";
+import { jsx as _jsx } from "react/jsx-runtime";
+const MultiSelectType = props => {
+  const {
+    rowIndex,
+    property,
+    value,
+    options,
+    label = "",
+    readOnly
+  } = props;
+  const {
+    onChange
+  } = useDataView();
+  const coloredValues = [...(value || [])]?.map(m => {
+    return {
+      ...m,
+      color: options?.find(f => f.value === m.value)?.color || "#FFF"
+    };
+  });
+  const handleChange = data => {
+    onChange(rowIndex, {
+      [property]: data?.filter(f => f?.value)
+    });
+  };
+  return /*#__PURE__*/_jsx(Select, {
+    value: coloredValues,
+    onChange: handleChange,
+    options: options,
+    multiple: true,
+    limitTags: 2,
+    placeholder: label,
+    disabled: readOnly
+  });
+};
+export default MultiSelectType;