@flozy/editor 4.0.2 → 4.0.4

package/dist/Editor/utils/helper.js

@@ -3,6 +3,7 @@ import { ReactEditor } from "slate-react";
 import insertNewLine from "./insertNewLine";
 import { getDevice } from "../helper/theme";
 export const windowVar = {};
+let ST_TIMEOUT = null;
 export const formatDate = (date, format = "MM/DD/YYYY") => {
   if (!date) return "";
   var d = new Date(date),
@@ -246,8 +247,7 @@ export const handleLinkType = (url, linkType, readOnly, openInNewTab, onClick =
         props.target = "_blank";
       }
       break;
-    case "nextTrigger":
-    case "prevTrigger":
+    case "actionTrigger":
       if (!readOnly) {
         props.component = "button";
         props.onClick = () => {};
@@ -379,34 +379,6 @@ export const decodeString = str => {
     console.log(err);
   }
 };
-export const getContrastColor = color => {
-  let r, g, b;
-
-  // Check if the color is in hex format
-  if (color.startsWith("#")) {
-    r = parseInt(color.substring(1, 3), 16);
-    g = parseInt(color.substring(3, 5), 16);
-    b = parseInt(color.substring(5, 7), 16);
-  }
-  // Check if the color is in RGB/RGBA format
-  else if (color.startsWith("rgb")) {
-    const rgbValues = color.replace(/^rgba?\(|\s+|\)$/g, "") // Remove the rgb/rgba and spaces
-    .split(","); // Split the values into an array
-
-    r = parseInt(rgbValues[0]);
-    g = parseInt(rgbValues[1]);
-    b = parseInt(rgbValues[2]);
-  } else {
-    // If the format is not recognized, default to black text
-    return "#000000";
-  }
-
-  // Calculate relative luminance
-  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-
-  // Return black for light colors, white for dark colors
-  return luminance > 0.5 ? "#000000" : "#FFFFFF";
-};
 export const onDeleteKey = (event, {
   editor
 }) => {
@@ -427,4 +399,46 @@ export const onDeleteKey = (event, {
   } catch (err) {
     console.log(err);
   }
+};
+export const selectText = (editor, {
+  path,
+  cursorOnly
+}, timeout = 10) => {
+  try {
+    clearTimeout(ST_TIMEOUT);
+    ST_TIMEOUT = setTimeout(() => {
+      ReactEditor.focus(editor);
+      const range = Editor.range(editor, path);
+      const textNode = Node.get(editor, path);
+      if (!cursorOnly) {
+        Transforms.select(editor, range);
+      }
+      if (cursorOnly && textNode) {
+        const textLength = Node.string(textNode).length;
+        editor.selection = {
+          anchor: {
+            path: path,
+            offset: textLength
+          },
+          focus: {
+            path: path,
+            offset: textLength
+          }
+        };
+      }
+      ReactEditor.focus(editor);
+    }, timeout);
+  } catch (err) {
+    console.log(err);
+  }
+};
+export const isFreeGridFragment = fragments => {
+  const types = ["freegrid", "freegridItem", "freegridBox"];
+  const node = fragments[0] || fragments;
+  const fType = types.includes(node.children[0]?.type) || types.includes(node.type);
+  if (fType) {
+    return true;
+  } else {
+    return false;
+  }
 };

package/dist/Editor/utils/insertAppHeader.js

@@ -1,4 +1,48 @@
 import { Editor, Transforms, Path, Range, Element } from "slate";
+export const appHeaderNode = ({
+  menus
+}) => {
+  return {
+    type: "app-header",
+    appTitle: "Logo",
+    appLogo: "none",
+    menus: menus || [{
+      type: "menu",
+      url: "home",
+      target: "",
+      text: "Home",
+      linkType: "page"
+    }, {
+      type: "menu",
+      url: "wireframe2",
+      target: "",
+      text: "Wireframe",
+      linkType: "page"
+    }, {
+      type: "menu",
+      url: "https://www.google.com",
+      target: "",
+      text: "Work",
+      linkType: "webAddress"
+    }, {
+      type: "menu",
+      url: "https://www.google.com",
+      target: "",
+      text: "Contact",
+      linkType: "webAddress"
+    }],
+    menuStyle: "stacked",
+    children: [{
+      text: " "
+    }],
+    logoFontSize: "32px",
+    titleFontFamily: "PoppinsBold",
+    bgColor: "rgb(255, 255, 255, 0)",
+    borderColor: "rgba(255, 255, 255, 0)",
+    textColor: "rgb(0, 0, 0)",
+    cellBgColor: "#FFFFFF"
+  };
+};
 export const createAppHeaderNode = ({
   menus
 }) => ({
@@ -7,46 +51,9 @@ export const createAppHeaderNode = ({
   children: [{
     type: "grid-item",
     grid: 12,
-    children: [{
-      type: "app-header",
-      appTitle: "Logo",
-      appLogo: "none",
-      menus: menus || [{
-        type: "menu",
-        url: "home",
-        target: "",
-        text: "Home",
-        linkType: "page"
-      }, {
-        type: "menu",
-        url: "wireframe2",
-        target: "",
-        text: "Wireframe",
-        linkType: "page"
-      }, {
-        type: "menu",
-        url: "https://www.google.com",
-        target: "",
-        text: "Work",
-        linkType: "webAddress"
-      }, {
-        type: "menu",
-        url: "https://www.google.com",
-        target: "",
-        text: "Contact",
-        linkType: "webAddress"
-      }],
-      menuStyle: "stacked",
-      children: [{
-        text: " "
-      }],
-      logoFontSize: "32px",
-      titleFontFamily: "PoppinsBold",
-      bgColor: "rgb(255, 255, 255, 0)",
-      borderColor: "rgba(255, 255, 255, 0)",
-      textColor: "rgb(0, 0, 0)",
-      cellBgColor: "#FFFFFF"
-    }],
+    children: [...appHeaderNode({
+      menus
+    })],
     bgColor: "rgba(255, 255, 255, 0)",
     lockSpacing: true,
     bannerSpacing: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "4.0.2",
+  "version": "4.0.4",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -36,6 +36,7 @@
     "react-gcolor-picker": "^1.3.1",
     "react-icons": "^4.10.1",
     "react-katex": "^3.0.1",
+    "react-rnd": "^10.4.11",
     "react-scripts": "5.0.1",
     "react-signature-canvas": "^1.0.6",
     "react-slick": "^0.29.0",
@@ -57,6 +58,7 @@
   },
   "scripts": {
     "prepare": "husky install .husky",
+    "analyze": "source-map-explorer build/static/js/*.js",
     "lint": "./node_modules/.bin/eslint --ignore-path .gitignore .",
     "start": "craco start",
     "build": "NODE_OPTIONS='--max_old_space_size=4096' craco build",
@@ -65,7 +67,7 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "NODE_OPTIONS='--max_old_space_size=4096' storybook build",
     "publish:npm": "rm -rf dist && mkdir dist &&  babel src/components -d dist --copy-files",
-    "publish:local": "rm -rf /Users/agenciflow08/Documents/flozyapp/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agenciflow08/Documents/flozyapp/client/node_modules/@flozy/editor/dist --copy-files"
+    "publish:local": "rm -rf /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist --copy-files"
   },
   "eslintConfig": {
     "extends": [
@@ -113,6 +115,7 @@
     "babel-plugin-named-exports-order": "^0.0.2",
     "eslint-plugin-storybook": "^0.6.13",
     "prop-types": "^15.8.1",
+    "source-map-explorer": "^2.5.3",
     "storybook": "^7.4.0",
     "webpack": "^5.88.2"
   },

package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js

@@ -1,438 +0,0 @@
-import { Button, Grid, IconButton, Popover, TextField, Tooltip, Typography } from "@mui/material";
-import { useEditorContext } from "../../hooks/useMouseMove";
-import { fontFamilyMap, fontOptions } from "../../utils/font";
-import FormatClearIcon from "@mui/icons-material/FormatClear";
-import usePopupStyles from "../PopupTool/PopupToolStyle";
-import { TextMinusIcon, TextPlusIcon } from "../../common/iconslist";
-import { BREAKPOINTS_DEVICES, getBreakPointsValue, getVariableValue } from "../../helper/theme";
-import useWindowResize from "../../hooks/useWindowResize";
-import { toolbarGroups } from "../toolbarGroups";
-import Icon from "../../common/Icon";
-import { useMemo, useState } from "react";
-import CommonButton from "../../common/Button";
-import CustomSelect from "../../common/CustomSelect";
-import ColorButtons from "../../Elements/Color Picker/ColorButtons";
-import FormatColorResetIcon from "@mui/icons-material/FormatColorReset";
-import ColorPickerStyles from "../../Elements/Color Picker/Styles";
-import colorWheel from "../../Elements/Color Picker/colorWheel.png";
-import CustomColorPicker from "../../common/CustomColorPicker";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-function getFontStyleProps(settings = {}, format) {
-  const {
-    fontWeight,
-    fontStyle
-  } = settings;
-  let isActive;
-  let onClick;
-  switch (format) {
-    case "bold":
-      isActive = fontWeight === "bold" || fontWeight === "700";
-      onClick = () => {
-        return {
-          fontWeight: isActive ? "normal" : "bold"
-        };
-      };
-      break;
-    case "italic":
-      isActive = fontStyle === "italic";
-      onClick = () => {
-        return {
-          fontStyle: isActive ? "unset" : "italic"
-        };
-      };
-      break;
-
-    // case "underline":
-    //   isActive = textDecoration.includes("underline");
-    //   onClick = () => {
-    //     let otherTextDecoration = textDecoration?.includes("line-through")
-    //       ? "line-through"
-    //       : "";
-
-    //     otherTextDecoration += isActive ? "" : " underline";
-
-    //     return { textDecoration: otherTextDecoration };
-    //   };
-    //   break;
-    // case "strikethrough":
-    //   isActive = textDecoration.includes("line-through");
-    //   onClick = () => {
-    //     let otherTextDecoration = textDecoration?.includes("underline")
-    //       ? "underline"
-    //       : "";
-
-    //     otherTextDecoration += isActive ? "" : " line-through";
-
-    //     return { textDecoration: otherTextDecoration };
-    //   };
-    //   break;
-
-    default:
-      isActive = false;
-      onClick = () => {};
-      break;
-  }
-  return {
-    isActive,
-    onClick
-  };
-}
-const allTools = toolbarGroups.flat();
-function ThemeTextFormat(props) {
-  const {
-    settings,
-    updateSettings,
-    onSaveTextSettings,
-    onClose
-  } = props;
-  const {
-    theme
-  } = useEditorContext();
-  const classes = usePopupStyles(theme);
-  const pickerStyles = ColorPickerStyles(theme);
-  const fontStyle = allTools.filter(f => f.type === "mark" && f.themeEnabled);
-  const fontWeight = allTools.find(f => f.format === "fontWeight");
-  const fontFamilyVal = useMemo(() => {
-    const {
-      fontFamily = ""
-    } = settings;
-    let font = fontFamily.startsWith("var") ? getVariableValue(fontFamily) : fontFamily;
-    return fontOptions?.find(f => f.text === font)?.value;
-  }, [settings, fontOptions]);
-  const fontWeightVal = useMemo(() => {
-    const {
-      options
-    } = fontWeight || {};
-    const selected = options?.find(o => o.value === settings?.fontWeight || o.numVal === settings?.fontWeight);
-    return selected?.value;
-  }, [settings?.fontWeight]);
-  return /*#__PURE__*/_jsxs(Grid, {
-    container: true,
-    sx: classes.textFormatWrapper,
-    children: [/*#__PURE__*/_jsxs(Grid, {
-      item: true,
-      xs: 12,
-      children: [/*#__PURE__*/_jsxs(Grid, {
-        container: true,
-        justifyContent: "space-between",
-        alignItems: "center",
-        children: [/*#__PURE__*/_jsx(Grid, {
-          item: true,
-          children: /*#__PURE__*/_jsx(Typography, {
-            variant: "body1",
-            color: "primary",
-            sx: classes.typoLabel,
-            children: "Font Family"
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          item: true,
-          children: /*#__PURE__*/_jsx(Button, {
-            sx: classes.defaultBtn,
-            startIcon: /*#__PURE__*/_jsx(FormatClearIcon, {}),
-            onClick: () => updateSettings({
-              fontFamily: Object.values(fontFamilyMap)[0]
-            }),
-            children: "Default"
-          })
-        })]
-      }), /*#__PURE__*/_jsx(Grid, {
-        item: true,
-        xs: 12,
-        sx: classes.textFormatField,
-        children: /*#__PURE__*/_jsx(CustomSelect, {
-          options: fontOptions,
-          classes: classes,
-          onChange: e => {
-            const fontFamily = fontOptions.find(f => f.value === e.target.value)?.text;
-            updateSettings({
-              fontFamily
-            });
-          },
-          value: fontFamilyVal || fontOptions[0].value
-        })
-      })]
-    }), /*#__PURE__*/_jsxs(Grid, {
-      container: true,
-      spacing: 2,
-      children: [/*#__PURE__*/_jsxs(Grid, {
-        item: true,
-        xs: 6,
-        children: [/*#__PURE__*/_jsx(Typography, {
-          variant: "body1",
-          color: "primary",
-          sx: classes.typoLabel,
-          children: "Font Weight"
-        }), /*#__PURE__*/_jsx(Grid, {
-          item: true,
-          xs: 12,
-          sx: classes.textFormatField,
-          children: /*#__PURE__*/_jsx(CustomSelect, {
-            options: fontWeight?.options || [],
-            classes: classes,
-            onChange: e => {
-              updateSettings({
-                fontWeight: e.target.value
-              });
-            },
-            value: fontWeightVal
-          })
-        })]
-      }), /*#__PURE__*/_jsxs(Grid, {
-        item: true,
-        xs: 6,
-        children: [/*#__PURE__*/_jsx(Typography, {
-          variant: "body1",
-          color: "primary",
-          sx: classes.typoLabel,
-          children: "Font Size"
-        }), /*#__PURE__*/_jsx(Grid, {
-          item: true,
-          xs: 12,
-          sx: classes.textFormatCG,
-          children: /*#__PURE__*/_jsx(TextSize, {
-            classes: classes,
-            value: settings?.fontSize || 16,
-            onChange: fontSize => updateSettings({
-              fontSize
-            }),
-            fullWidth: true
-          })
-        })]
-      })]
-    }), /*#__PURE__*/_jsxs(Grid, {
-      item: true,
-      xs: 12,
-      sx: classes.textFormatField,
-      style: {
-        marginTop: "14px"
-      },
-      children: [/*#__PURE__*/_jsxs(Grid, {
-        container: true,
-        justifyContent: "space-between",
-        alignItems: "center",
-        children: [/*#__PURE__*/_jsx(Grid, {
-          item: true,
-          children: /*#__PURE__*/_jsx(Typography, {
-            variant: "body1",
-            color: "primary",
-            sx: classes.typoLabel,
-            children: "Text Color"
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          item: true,
-          children: /*#__PURE__*/_jsx(Button, {
-            sx: classes.defaultBtn,
-            startIcon: /*#__PURE__*/_jsx(FormatColorResetIcon, {}),
-            onClick: () => updateSettings({
-              color: "#ddd"
-            }),
-            children: "Default"
-          })
-        })]
-      }), /*#__PURE__*/_jsx(Grid, {
-        sx: classes.textFormatColorWrpr,
-        children: /*#__PURE__*/_jsx(ColorPicker, {
-          classes: classes,
-          pickerStyles: pickerStyles,
-          onChange: color => updateSettings({
-            color
-          }),
-          color: settings?.color,
-          disableEditTheme: true
-        })
-      })]
-    }), /*#__PURE__*/_jsxs(Grid, {
-      item: true,
-      xs: 12,
-      children: [/*#__PURE__*/_jsx(Typography, {
-        variant: "body1",
-        color: "primary",
-        sx: classes.typoLabel,
-        children: "Typography"
-      }), /*#__PURE__*/_jsx(Grid, {
-        item: true,
-        xs: 12,
-        className: "typo-icons",
-        sx: classes.evenSpace,
-        children: fontStyle?.map((m, i) => {
-          const {
-            isActive,
-            onClick
-          } = getFontStyleProps(settings, m.format) || {};
-          return /*#__PURE__*/_jsx(CommonButton, {
-            active: isActive,
-            onClick: () => {
-              const style = onClick();
-              updateSettings(style);
-            },
-            children: /*#__PURE__*/_jsx(Icon, {
-              icon: m.format
-            })
-          }, i);
-        })
-      })]
-    }), /*#__PURE__*/_jsx(Grid, {
-      item: true,
-      xs: 12,
-      sx: {
-        mt: 2
-      },
-      children: /*#__PURE__*/_jsxs("div", {
-        style: {
-          display: "flex",
-          justifyContent: "end",
-          margin: "8px",
-          position: "absolute",
-          bottom: 0,
-          right: 0
-        },
-        children: [/*#__PURE__*/_jsx(Button, {
-          onClick: onClose,
-          className: "secondaryBtn",
-          children: "Cancel"
-        }), /*#__PURE__*/_jsx(Button, {
-          onClick: onSaveTextSettings,
-          className: "primaryBtn",
-          children: "Save"
-        })]
-      })
-    })]
-  });
-}
-export default ThemeTextFormat;
-function TextSize(props) {
-  const {
-    classes,
-    value: val,
-    onChange,
-    fullWidth
-  } = props;
-  const [size] = useWindowResize();
-  const value = getBreakPointsValue(val, size?.device);
-  const updateMarkData = newVal => {
-    let upData = {
-      ...getBreakPointsValue(val),
-      [size?.device]: `${newVal}px`
-    };
-
-    // if desktop update to all other devices
-    // to avoid default normal size
-    if (size?.device === "lg") {
-      upData = BREAKPOINTS_DEVICES.reduce((a, b) => {
-        a[b] = `${newVal}px`;
-        return a;
-      }, {});
-    }
-    onChange(upData);
-  };
-  const onChangeSize = e => {
-    let inc = parseInt(e.target.value) || 8;
-    inc = inc > 200 ? 200 : inc;
-    updateMarkData(inc || 8);
-  };
-  const getSizeVal = () => {
-    try {
-      return parseInt(value);
-    } catch (err) {
-      return "";
-    }
-  };
-  const combinedOldVal = getSizeVal();
-  const onIncreaseSize = () => {
-    let inc = (combinedOldVal || 0) + 1;
-    inc = inc > 200 ? 200 : inc;
-    updateMarkData(inc);
-  };
-  const onDecreaseSize = () => {
-    const newVal = combinedOldVal - 1 < 0 ? 0 : combinedOldVal - 1;
-    updateMarkData(newVal);
-  };
-  return /*#__PURE__*/_jsx(TextField, {
-    sx: classes?.textSize,
-    value: combinedOldVal,
-    onChange: onChangeSize,
-    size: "small",
-    inputProps: {
-      style: {
-        width: fullWidth ? "100%" : "30px",
-        textAlign: "center",
-        height: "19px",
-        fontSize: "14px"
-      }
-    },
-    fullWidth: fullWidth,
-    InputProps: {
-      style: {
-        borderRadius: "8px"
-      },
-      endAdornment: /*#__PURE__*/_jsxs("div", {
-        className: "textFontArrows",
-        children: [/*#__PURE__*/_jsx(IconButton, {
-          onClick: onIncreaseSize,
-          size: "small",
-          children: /*#__PURE__*/_jsx(TextPlusIcon, {})
-        }), /*#__PURE__*/_jsx(IconButton, {
-          onClick: onDecreaseSize,
-          size: "small",
-          children: /*#__PURE__*/_jsx(TextMinusIcon, {})
-        })]
-      })
-    }
-  });
-}
-function ColorPicker(props) {
-  const {
-    classes,
-    pickerStyles,
-    onChange,
-    color,
-    disableEditTheme
-  } = props;
-  const [anchorEl, setAnchorEl] = useState(null);
-  const open = Boolean(anchorEl);
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Tooltip, {
-      title: "",
-      arrow: true,
-      children: /*#__PURE__*/_jsx(IconButton, {
-        sx: pickerStyles.colorPickerIcon,
-        onClick: e => {
-          setAnchorEl(e.currentTarget);
-        },
-        children: /*#__PURE__*/_jsx("img", {
-          src: colorWheel,
-          alt: "color wheel"
-        })
-      })
-    }), /*#__PURE__*/_jsx(ColorButtons, {
-      classes: pickerStyles,
-      onSelect: onChange,
-      activeColor: color,
-      disableEditTheme: disableEditTheme
-    }), /*#__PURE__*/_jsx(Popover, {
-      open: open,
-      anchorEl: anchorEl,
-      onClose: handleClose,
-      anchorOrigin: {
-        vertical: "top",
-        horizontal: "center"
-      },
-      transformOrigin: {
-        vertical: "bottom",
-        horizontal: "top"
-      },
-      sx: classes.colorPickerPopup,
-      children: /*#__PURE__*/_jsx(CustomColorPicker, {
-        gradient: true,
-        onChange: onChange,
-        color: color,
-        disableEditTheme: disableEditTheme
-      })
-    })]
-  });
-}