@flozy/editor 3.6.1 → 3.6.3

package/dist/Editor/Elements/AppHeader/AppHeader.js

@@ -146,19 +146,21 @@ function AppHeader(props) {
         src: appLogo
       }) : appTitle
     }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(List, {
-      children: menus.map((item, i) => /*#__PURE__*/_jsx(ListItem, {
-        disablePadding: true,
-        children: /*#__PURE__*/_jsx(ListItemButton, {
-          component: "a",
-          href: item.url,
-          sx: {
-            textAlign: "center"
-          },
-          children: /*#__PURE__*/_jsx(ListItemText, {
-            primary: item.text
+      children: menus.map((item, i) => {
+        const buttonProps = handleLinkType(item.url, item.linkType, true, item.target === "_blank");
+        return /*#__PURE__*/_jsx(ListItem, {
+          disablePadding: true,
+          children: /*#__PURE__*/_jsx(ListItemButton, {
+            ...buttonProps,
+            sx: {
+              textAlign: "center"
+            },
+            children: /*#__PURE__*/_jsx(ListItemText, {
+              primary: item.text
+            })
           })
-        })
-      }, `${item.text}_${i}`))
+        }, `${item.text}_${i}`);
+      })
     })]
   });
   const container = window !== undefined ? () => window().document.body : undefined;

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

@@ -2,8 +2,7 @@ import React, { useState } from "react";
 import { Transforms } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
 import { IconButton, Tooltip, Box } from "@mui/material";
-// import * as fIcons from "@mui/icons-material";
-import MUIIcon from "../../common/StyleBuilder/fieldTypes/loadIcon";
+import * as fIcons from "@mui/icons-material";
 import SettingsIcon from "@mui/icons-material/Settings";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import LinkIcon from "@mui/icons-material/Link";
@@ -64,7 +63,7 @@ const EditorButton = props => {
   };
   const isTrigger = linkType === "actionTrigger";
   const refURl = isTrigger ? buttonLink?.url : url;
-  const BtnIcon = buttonIcon ? buttonIcon : null;
+  const BtnIcon = buttonIcon ? fIcons[buttonIcon] : null;
   windowVar.lastButtonProps = element;
   const handleTrigger = async () => {
     if (metadata?.buttonLink?.handler) {
@@ -81,7 +80,6 @@ const EditorButton = props => {
     }
   };
   const buttonProps = handleLinkType(refURl, linkType, readOnly, openInNewTab, handleTrigger);
-  console.log(openInNewTab);
   const onMenuClick = val => () => {
     switch (val) {
       case "edit":
@@ -133,7 +131,6 @@ const EditorButton = props => {
             color: "rgba(0, 0, 0, 0.54)"
           },
           ...btnProps,
-          target: openInNewTab ? "_blank" : "_self",
           children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
         })
       })]
@@ -215,14 +212,12 @@ const EditorButton = props => {
             }
           },
           ...buttonProps,
-          children: [BtnIcon && iconPosition === "start" && /*#__PURE__*/_jsx(MUIIcon, {
-            iconName: buttonIcon,
+          children: [BtnIcon && iconPosition === "start" && /*#__PURE__*/_jsx(BtnIcon, {
             style: {
               paddingLeft: "4px",
               paddingRight: "4px"
             }
-          }), label || "My Button", BtnIcon && iconPosition === "end" && /*#__PURE__*/_jsx(MUIIcon, {
-            iconName: buttonIcon,
+          }), label || "My Button", BtnIcon && iconPosition === "end" && /*#__PURE__*/_jsx(BtnIcon, {
             style: {
               paddingLeft: "4px",
               paddingRight: "4px"

package/dist/Editor/Elements/ChipText/ChipText.js

@@ -1,10 +1,10 @@
 import React, { useState } from "react";
 import { Transforms } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
+import * as fIcons from "@mui/icons-material";
 import { Box } from "@mui/material";
 import ChipTextPopup from "./ChipTextPopup";
 import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
-import MUIIcon from "../../common/StyleBuilder/fieldTypes/loadIcon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const ChipText = props => {
@@ -26,6 +26,7 @@ const ChipText = props => {
     buttonIcon,
     textSize
   } = element;
+  const BtnIcon = buttonIcon ? fIcons[buttonIcon] : fIcons["Check"];
   const [openSetttings, setOpenSettings] = useState(false);
   const editor = useSlateStatic();
   const path = ReactEditor.findPath(editor, element);
@@ -81,8 +82,7 @@ const ChipText = props => {
       background: bgColor || "#CCC",
       color: textColor
     },
-    children: [/*#__PURE__*/_jsx(MUIIcon, {
-      iconName: buttonIcon || "Check",
+    children: [/*#__PURE__*/_jsx(BtnIcon, {
       style: {
         fontSize: textSize || "16px",
         lineHeight: textSize || "16px",

package/dist/Editor/Elements/Emoji/EmojiButton.js

@@ -2,10 +2,10 @@ import React, { useState, forwardRef, useImperativeHandle } from "react";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { Paper, Popover } from "@mui/material";
 import data from "@emoji-mart/data";
+import Picker from "@emoji-mart/react";
 import { insertEmoji } from "../../utils/emoji";
 import ToolbarIcon from "../../common/ToolbarIcon";
 import Icon from "../../common/Icon";
-import EmojiPicker from "./EmojiPicker";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -61,7 +61,7 @@ const EmojiButton = /*#__PURE__*/forwardRef((props, ref) => {
       },
       onClose: handleClose,
       children: /*#__PURE__*/_jsx(Paper, {
-        children: /*#__PURE__*/_jsx(EmojiPicker, {
+        children: /*#__PURE__*/_jsx(Picker, {
           data: data,
           onEmojiSelect: onEmojiSelect
         })

package/dist/Editor/Elements/Emoji/EmojiPicker.js

@@ -1,16 +0,0 @@
-import data from "@emoji-mart/data";
-import Picker from "@emoji-mart/react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-const EmojiPicker = props => {
-  const {
-    onEmojiSelect
-  } = props;
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx(Picker, {
-      data: data,
-      onEmojiSelect: onEmojiSelect
-    })
-  });
-};
-export default EmojiPicker;

package/dist/Editor/Elements/InlineIcon/InlineIcon.js

@@ -1,6 +1,6 @@
 import React from "react";
+import * as fIcons from "@mui/icons-material";
 import { Box } from "@mui/material";
-import Check from "@mui/icons-material/Check";
 import { getBreakPointsValue } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -23,6 +23,7 @@ const InlineIcon = props => {
     right,
     bottom
   } = bannerSpacing || {};
+  const BtnIcon = fIcons["Check"];
   return /*#__PURE__*/_jsxs(Box, {
     ...attributes,
     className: "editor-icon-text",
@@ -41,7 +42,7 @@ const InlineIcon = props => {
       background: bgColor || "#CCC",
       color: textColor
     },
-    children: [/*#__PURE__*/_jsx(Check, {}), /*#__PURE__*/_jsx("div", {
+    children: [/*#__PURE__*/_jsx(BtnIcon, {}), /*#__PURE__*/_jsx("div", {
       contentEditable: true,
       children: children
     })]

package/dist/Editor/Elements/List/CheckList.js

@@ -11,9 +11,7 @@ const CheckList = ({
   attributes,
   children,
   element,
-  isEmpty,
-  className,
-  style
+  isEmpty
 }) => {
   const editor = useSlateStatic();
   const readOnly = useReadOnly();
@@ -32,14 +30,12 @@ const CheckList = ({
   const nestedCheckList = element?.children?.length && element.children[0].type === "check-list-item";
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs("div", {
-      className: className || "",
       ...attributes,
       style: {
         textAlign: element.alignment || "left",
         display: "flex",
         justifyContent: "center",
-        alignItems: "center",
-        ...(style || {})
+        alignItems: "center"
       },
       children: [/*#__PURE__*/_jsxs("div", {
         contentEditable: false,

package/dist/Editor/Styles/EditorStyles.js

@@ -188,7 +188,6 @@ const editorStyles = ({
       }
     },
     "& .checkbox-edit": {
-      alignSelf: "flex-start",
       "& .MuiFormControlLabel-root": {
         marginRight: "0px"
       },
@@ -213,7 +212,7 @@ const editorStyles = ({
         "& svg": {
           width: "17px",
           height: "18px",
-          marginTop: "-1px"
+          marginTop: '-1px'
         }
       }
     },
@@ -274,7 +273,7 @@ const editorStyles = ({
   },
   cardsTypo: {
     color: theme?.palette?.editor?.textColor,
-    fontSize: "14px !important"
+    fontSize: '14px !important'
   }
 });
 export default editorStyles;

package/dist/Editor/common/LinkSettings/NavComponents.js

@@ -1,8 +1,24 @@
 import { Autocomplete, Checkbox, FormControlLabel, MenuItem, Select, TextField, Typography, createFilterOptions } from "@mui/material";
 import { useEffect, useMemo, useState } from "react";
+import { useSlate } from "slate-react";
 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 sectionTypes = ["grid"];
+const loopChildren = (children = [], sections) => {
+  if (!children?.length) {
+    return sections;
+  }
+  for (let child of children) {
+    if (sectionTypes.includes(child?.type)) {
+      if (child.id) {
+        sections.push(child.id);
+      }
+    }
+    sections = loopChildren(child.children, sections);
+  }
+  return sections;
+};
 const OpenInNewTab = props => {
   const {
     nav,
@@ -42,21 +58,35 @@ export const SelectPage = props => {
     services
   } = props;
   const [pages, setPages] = useState([]);
+  const editor = useSlate();
   const getPages = async () => {
     const result = await services("getPages", {});
-    const refactor = result?.data?.map(r => {
-      const {
-        title,
-        url_name,
-        ...rest
-      } = r;
-      return {
-        label: url_name,
-        value: url_name,
-        ...rest
+    if (result?.data?.length) {
+      const refactor = result?.data?.map(r => {
+        const {
+          title,
+          url_name,
+          ...rest
+        } = r;
+        return {
+          label: url_name,
+          value: url_name,
+          ...rest
+        };
+      });
+      setPages(refactor);
+    } else {
+      const currentPage = {
+        label: "Current Page",
+        value: "_currentPage",
+        is_current_page: 1,
+        sections: loopChildren(editor.children, [])
       };
-    });
-    setPages(refactor);
+      setPages([currentPage]);
+      if (!value) {
+        onChange(currentPage.value);
+      }
+    }
   };
   useEffect(() => {
     getPages();
@@ -76,12 +106,14 @@ export const SelectPage = props => {
     }
     return [];
   }, [value, pages]);
+  const isCurrentPage = page?.value === "_currentPage";
   return /*#__PURE__*/_jsxs("div", {
     children: [/*#__PURE__*/_jsx(FreeSoloCreateOption, {
       label: page?.label,
-      setValue: val => onChange(val?.value),
+      setValue: val => onChange(val?.value || ""),
       placeholder: "Select Page",
-      options: pages
+      options: pages,
+      disabled: isCurrentPage
     }), /*#__PURE__*/_jsx(FreeSoloCreateOption, {
       label: section?.label,
       setValue: val => {
@@ -96,7 +128,7 @@ export const SelectPage = props => {
         label: p,
         value: p
       }))
-    }), /*#__PURE__*/_jsx(OpenInNewTab, {
+    }), isCurrentPage ? null : /*#__PURE__*/_jsx(OpenInNewTab, {
       ...props
     })]
   });
@@ -149,7 +181,8 @@ export function FreeSoloCreateOption({
   label,
   setValue,
   options = [],
-  placeholder = ""
+  placeholder = "",
+  disabled = false
 }) {
   return /*#__PURE__*/_jsx(Autocomplete, {
     freeSolo: true,
@@ -164,7 +197,7 @@ export function FreeSoloCreateOption({
       children: option.label
     }),
     onChange: (event, newValue) => {
-      if (typeof newValue === 'string') {
+      if (typeof newValue === "string") {
         setValue({
           value: newValue
         });
@@ -189,7 +222,7 @@ export function FreeSoloCreateOption({
       } = params;
       // Suggest the creation of a new value
       const isExisting = options.some(option => inputValue === option.label);
-      if (inputValue !== '' && !isExisting) {
+      if (inputValue !== "" && !isExisting) {
         filtered.push({
           inputValue,
           label: `Add "${inputValue}"`
@@ -202,7 +235,7 @@ export function FreeSoloCreateOption({
     handleHomeEndKeys: true,
     getOptionLabel: option => {
       // Value selected with enter, right from the input
-      if (typeof option === 'string') {
+      if (typeof option === "string") {
         return option;
       }
       // Add "xxx" option created dynamically
@@ -214,6 +247,7 @@ export function FreeSoloCreateOption({
     },
     sx: {
       marginTop: "10px"
-    }
+    },
+    disabled: disabled
   });
 }

package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js

@@ -1,10 +1,29 @@
 import React, { useState } from "react";
 import { Grid, IconButton, TextField, Tooltip } from "@mui/material";
-import MUIIcon from "./loadIcon";
-import MUIFilledIcons from "./mui_filled_icons";
+import * as fIcons from "@mui/icons-material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+const MUIIcons = Object.keys(fIcons).reduce((a, b) => {
+  if (b.indexOf("Outlined") > -1) {
+    a.outlined.push(b);
+  } else if (b.indexOf("Rounded") > -1) {
+    a.rounded.push(b);
+  } else if (b.indexOf("Sharp") > -1) {
+    a.sharp.push(b);
+  } else if (b.indexOf("TwoTone") > -1) {
+    a.tt.push(b);
+  } else {
+    a.filled.push(b);
+  }
+  return a;
+}, {
+  filled: [],
+  outlined: [],
+  rounded: [],
+  tt: [],
+  sharp: []
+});
 const Icons = props => {
   const {
     value,
@@ -15,7 +34,7 @@ const Icons = props => {
     key
   } = data;
   const [val, setVal] = useState("");
-  const [list, setList] = useState(MUIFilledIcons.slice(0, 90));
+  const [list, setList] = useState(MUIIcons.filled.slice(0, 90));
   const onSelectIcon = ico => () => {
     onChange({
       [key]: ico
@@ -25,11 +44,11 @@ const Icons = props => {
     const keyVal = e.target.value?.toLowerCase();
     setVal(keyVal);
     if (keyVal) {
-      setList(MUIFilledIcons.filter(f => {
+      setList(MUIIcons.filled.filter(f => {
         return f.toLowerCase().indexOf(keyVal) > -1;
       }).slice(0, 90));
     } else {
-      setList(MUIFilledIcons.slice(0, 90));
+      setList(MUIIcons.filled.slice(0, 90));
     }
   };
   const onRemoveIcon = () => {
@@ -37,7 +56,7 @@ const Icons = props => {
       [key]: null
     });
   };
-  const SelectedIcon = value ? value : null;
+  const SelectedIcon = value ? fIcons[value] : null;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Grid, {
       item: true,
@@ -73,9 +92,7 @@ const Icons = props => {
             arrow: true,
             children: /*#__PURE__*/_jsx(IconButton, {
               onClick: onRemoveIcon,
-              children: /*#__PURE__*/_jsx(MUIIcon, {
-                iconName: value
-              })
+              children: /*#__PURE__*/_jsx(SelectedIcon, {})
             })
           }) : ""
         })]
@@ -90,14 +107,13 @@ const Icons = props => {
         paddingTop: "5px"
       },
       children: list.map(m => {
+        const Ico = fIcons[m];
         return /*#__PURE__*/_jsx(Tooltip, {
           title: m,
           arrow: true,
           children: /*#__PURE__*/_jsx(IconButton, {
             onClick: onSelectIcon(m),
-            children: /*#__PURE__*/_jsx(MUIIcon, {
-              iconName: m
-            })
+            children: /*#__PURE__*/_jsx(Ico, {})
           })
         }, `mui_ico_${m}`);
       })

package/dist/Editor/utils/helper.js

@@ -208,7 +208,13 @@ export const hasVerticalScrollbar = (element = {}) => {
   return element.scrollHeight > element.clientHeight;
 };
 const isHomePage = page => {
-  return page === "home" || page === "iframe.html" || !page;
+  return page === "home" || page === "iframe.html" || page === "_currentPage" || !page;
+};
+const getScrollElement = () => {
+  const slateWrapper = document.getElementById("slate-wrapper-scroll-container");
+  const isSlateWrapperScroll = hasVerticalScrollbar(slateWrapper);
+  const scrollFrom = isSlateWrapperScroll ? slateWrapper : window;
+  return scrollFrom;
 };
 export const handleLinkType = (url, linkType, readOnly, openInNewTab, onClick = () => {}) => {
   const props = {};
@@ -239,16 +245,33 @@ export const handleLinkType = (url, linkType, readOnly, openInNewTab, onClick =
       }
       break;
     case "page":
-      props.component = "a";
-      const [page, section] = url?.split("#") || [];
+      const [page = "", section] = url?.split("#") || [];
       const sec = section ? `#${section}` : "";
-      const currentUserPage = getCurrentUserPage();
-      props.href = isHomePage(page) ? `./${currentUserPage}${sec}` : `./${url}`;
-      if (openInNewTab) {
-        if (isCurrentPage(page)) {
-          // temp fix, if user is presented in current page, open in new tab option is restricted, we will scroll to the element in current page
-        } else {
-          props.target = "_blank";
+      if (page === "_currentPage") {
+        props.component = "button";
+        props.onClick = () => {
+          const scrollFrom = getScrollElement();
+          if (sec) {
+            const element = document.getElementById(section);
+            if (element) {
+              const topPosition = element.getBoundingClientRect().top + scrollFrom.scrollTop;
+              scrollFrom.scrollTo({
+                top: topPosition,
+                behavior: "smooth"
+              });
+            }
+          }
+        };
+      } else {
+        props.component = "a";
+        const currentUserPage = getCurrentUserPage();
+        props.href = isCurrentPage(page) ? `./${currentUserPage}${sec}` : `./${url}`;
+        if (openInNewTab) {
+          if (isCurrentPage(page)) {
+            // temp fix, if user is presented in current page, open in new tab option is restricted, we will scroll to the element in current page
+          } else {
+            props.target = "_blank";
+          }
         }
       }
       break;

package/dist/Editor/utils/serializeToHTML.js

@@ -1,34 +1,22 @@
 import { renderToString } from "react-dom/server";
-import { getBlock } from "./chatEditor/SlateUtilityFunctions";
+import { getBlock } from "./SlateUtilityFunctions";
 const serializeToHTML = nodes => {
   try {
-    const htmlString = nodes.map(node => {
-      // Render function for each node
-      const renderNode = node => {
+    const htmlString = nodes.map(n => {
+      if (n) {
         const props = {
-          element: node,
-          children: node.children?.map(child => {
-            // Render each child node
-            if (child.text !== undefined) {
-              // For text nodes, return the text
-              return child.text;
-            }
-            // For other nodes, render them recursively
-            return renderNode(child);
-          }) || []
+          element: n,
+          children: n?.children
         };
-        return getBlock(props);
-      };
-
-      // Render root node to HTML string
-      const reactElement = renderNode(node);
-      return renderToString(reactElement);
-    }).join(''); // Combine all HTML strings
-
-    return htmlString;
+        const reactString = renderToString(getBlock(props));
+        return reactString;
+      } else {
+        return "";
+      }
+    });
+    console.log(htmlString);
   } catch (err) {
-    console.error('Error serializing to HTML:', err);
-    return '';
+    console.log(err);
   }
 };
 export default serializeToHTML;

package/dist/index.js

@@ -2,11 +2,7 @@ import Collaborative from "./Editor/CollaborativeEditor";
 import CommonEditor from "./Editor/CommonEditor";
 import Mini from "./Editor/MiniEditor";
 import EditorInFrame from "./Editor/IframeEditor";
-import Chat from "./Editor/ChatEditor";
-import Emoji from "./Editor/Elements/Emoji/EmojiPicker";
 export const Editor = CommonEditor;
 export const MiniEditor = Mini;
 export const CollaborativeEditor = Collaborative;
-export const IframeEditor = EditorInFrame;
-export const ChatEditor = Chat;
-export const EmojiPicker = Emoji;
+export const IframeEditor = EditorInFrame;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "3.6.1",
+  "version": "3.6.3",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -58,11 +58,11 @@
     "prepare": "husky install .husky",
     "lint": "./node_modules/.bin/eslint --ignore-path .gitignore .",
     "start": "craco start",
-    "build": "NODE_OPTIONS='--max_old_space_size=4096' craco build",
+    "build": "craco build",
     "test": "craco test --passWithNoTests",
     "eject": "react-scripts eject",
-    "storybook": "NODE_OPTIONS='--max_old_space_size=4096' storybook dev -p 6006",
-    "build-storybook": "NODE_OPTIONS='--max_old_space_size=4096' storybook build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "publish:npm": "rm -rf dist && mkdir dist &&  babel src/components -d dist --copy-files",
     "publish:local": "rm -rf /Users/agenciflow08/Documents/flozy/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agenciflow08/Documents/flozy/client/node_modules/@flozy/editor/dist --copy-files"
   },