@flozy/editor 4.3.8 → 4.4.0

package/dist/Editor/ChatEditor.js

@@ -46,8 +46,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const [deboundedValue] = useDebounce(value, 500);
   const editor = useMemo(() => {
     return withCommon(createEditor(), {
-      needLayout,
-      isChatEditor: true
+      needLayout
     });
   }, []);
   const isReadOnly = readOnly === "readonly";
@@ -249,16 +248,6 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
       restVal
     });
   };
-  const handlePaste = event => {
-    const items = event.clipboardData.items;
-    for (let i = 0; i < items.length; i++) {
-      if (items[i].type.startsWith("image/")) {
-        event.preventDefault(); // Prevent the default paste behavior
-        return; // Exit early to keep the editor empty
-      }
-    }
-  };
-
   return /*#__PURE__*/_jsx(EditorProvider, {
     theme: theme,
     editor: editor,
@@ -278,8 +267,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
         placeholder: "Start typing ...",
         spellCheck: true,
         onBlur: handleBlur,
-        onKeyDown: onKeyDown,
-        onPaste: handlePaste
+        onKeyDown: onKeyDown
       }), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {
         ref: mentionsRef,
         mentions: mentions,

package/dist/Editor/CommonEditor.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-unused-vars */
 import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } from "react";
 import PropTypes from "prop-types";
-import { createEditor, Transforms, Range } from "slate";
+import { createEditor, Transforms } from "slate";
 import { Slate, Editable, ReactEditor } from "slate-react";
 import { useDebounce, useDebouncedCallback } from "use-debounce";
 import { getMarked, getBlock } from "./utils/SlateUtilityFunctions";
@@ -10,7 +10,7 @@ import { draftToSlate } from "./utils/draftToSlate";
 import useMentions from "./hooks/useMentions";
 import MentionsPopup from "./common/MentionsPopup";
 import { RemoteCursorOverlay } from "./RemoteCursorOverlay/Overlay";
-import { mentionsEvent, commands, indentation, escapeEvent, enterEvent } from "./utils/events";
+import { mentionsEvent, commands, indentation, escapeEvent, enterEvent, upDownArrowKeyEvents } from "./utils/events";
 import withCommon from "./hooks/withCommon";
 import DialogWrapper from "./DialogWrapper";
 import { serializeToText } from "./utils/serializeToText";
@@ -33,10 +33,10 @@ import PopoverAIInput from "./Elements/AI/PopoverAIInput";
 import RnDCopy from "./common/RnD/RnDCopy";
 import SwitchViewport from "./common/RnD/SwitchViewport/SwitchViewport";
 import { onInsertFragment } from "./utils/RnD/RnDCtrlCmds";
-import FontLoader from "./common/FontLoader/FontLoader";
 import "./font.css";
 import "./Editor.css";
 import "animate.css";
+import FontLoader from "./common/FontLoader/FontLoader";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Item = /*#__PURE__*/forwardRef(({
@@ -365,20 +365,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       });
     } else if (event.key === "Enter") {
       enterEvent(event, editor, customProps?.isMobile);
-    } else if (event.key === 'Backspace') {
-      const {
-        selection
-      } = editor;
-      event.preventDefault();
-      if (selection) {
-        if (!Range.isCollapsed(selection)) {
-          editor.deleteFragment();
-        } else {
-          editor.deleteBackward({
-            unit: 'character'
-          });
-        }
-      }
+    } else if (event.key === "ArrowUp" && otherProps?.tagName !== 'Pages') {
+      upDownArrowKeyEvents(event, editor);
+    } else if (event.key === "ArrowDown" && otherProps?.tagName !== 'Pages') {
+      upDownArrowKeyEvents(event, editor);
     }
   }, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
   const Overlay = collaborativeEditor && !isReadOnly ? RemoteCursorOverlay : React.Fragment;
@@ -443,22 +433,19 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
         const selection = window?.getSelection();
         if (selection && selection.rangeCount > 0) {
           const cursorPosition = selection.getRangeAt(0)?.getBoundingClientRect();
-          const containerRect = container?.getBoundingClientRect();
-          const containerBottom = containerRect?.bottom;
+          const containerBottom = container?.getBoundingClientRect()?.bottom;
           if (cursorPosition && cursorPosition.bottom > containerBottom - 250) {
-            // Calculate dynamic scroll based on remaining space
-            const scrollAmount = Math.min(200, cursorPosition.bottom - containerBottom + 250);
             container?.scrollBy({
-              top: scrollAmount,
+              top: 200,
               behavior: "smooth"
             });
           }
         } else {
-          console.warn('No valid selection range found');
+          console.warn("No valid selection range found");
         }
       }
     } catch (err) {
-      console.log('handleCursorScroll', err);
+      console.log("handleCursorScroll", err);
     }
   };
   return /*#__PURE__*/_jsx(EditorProvider, {

package/dist/Editor/Editor.css

@@ -244,6 +244,13 @@ blockquote {
   width: 17px !important;
 }
 
+.react-datepicker__input-container input {
+    height: 40px !important;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    width: 100%;
+}
+
 .close-popupbtn {
   border-radius: 4px !important;
   width: 24px;
@@ -884,7 +891,6 @@ blockquote {
 /* For Firefox */
 .removeScroll {
     -moz-appearance: textfield;
-    appearance: none;
 }
 
 .borderInput:focus-visible {

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

@@ -1,6 +1,5 @@
 const Styles = theme => ({
   aiContainer: {
-    background: "#FCFAFF",
     background: theme?.palette?.editor?.aiInputBackground,
     border: "1px solid #8360FD",
     borderRadius: "6px",

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

@@ -10,10 +10,14 @@ import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../.
 import { handleLinkType, windowVar } from "../../utils/helper";
 import LinkSettings from "../../common/LinkSettings";
 import Icon from "../../common/Icon";
+import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const EditorButton = props => {
   const theme = useTheme();
+  const {
+    theme: appTheme
+  } = useEditorContext();
   const {
     attributes,
     element,
@@ -140,8 +144,8 @@ const EditorButton = props => {
           sx: {
             display: "inline-flex",
             color: "rgba(0, 0, 0, 0.54)",
-            borderRadius: '50% !important',
-            border: 'none !important'
+            borderRadius: "50% !important",
+            border: "none !important"
           },
           ...btnProps,
           children: /*#__PURE__*/_jsx(Icon, {
@@ -212,7 +216,7 @@ const EditorButton = props => {
           },
           "& svg": {
             "& path": {
-              stroke: theme.palette.text.primary
+              stroke: appTheme.palette.text.primary
             }
           },
           "& button": {
@@ -277,7 +281,7 @@ const EditorButton = props => {
             right: "-42px",
             stroke: "#fff",
             "& path": {
-              fill: openMoreOptions ? theme.palette.text.blueText : ""
+              fill: openMoreOptions ? appTheme.palette.text.blueText : ""
             }
           },
           onClick: handleMoreBtn,

package/dist/Editor/Elements/Embed/Embed.css

@@ -1,5 +1,5 @@
 .embed {
-  /* width: fit-content; */
+  width: fit-content;
   position: relative;
   margin: 0px;
 }

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

@@ -94,7 +94,8 @@ const ImageContent = props => {
     onTouchEnd: onTouchEnd // for mobile
     ,
     "data-path": path.join(","),
-    draggable: false
+    draggable: false,
+    contentEditable: false
   });
 };
 const Image = props => {

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect } from "react";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { Node, Transforms } from "slate";
 import { IconButton, Tooltip, Box, useTheme } from "@mui/material";
@@ -220,6 +220,7 @@ const Video = ({
       alignContent: vertical
     },
     ...element.attr,
+    contentEditable: false,
     children: [openSetttings ? /*#__PURE__*/_jsx(EmbedPopup, {
       element: element,
       onSave: onSave,

package/dist/Editor/Elements/Form/Form.js

@@ -401,7 +401,6 @@ const Form = props => {
               component: "button",
               onClick: onSubmitClick,
               disabled: loading,
-              contentEditable: false,
               sx: {
                 background: buttonProps?.bgColor || "rgb(30, 75, 122)",
                 borderWidth: "1px",

package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js

@@ -71,11 +71,11 @@ const FormWorkflow = props => {
         children: [/*#__PURE__*/_jsx(Grid, {
           item: true,
           sx: classes.radioBtn,
-          children: /*#__PURE__*/_jsxs(RadioGroup, {
+          children: /*#__PURE__*/_jsx(RadioGroup, {
             name: "set timing",
             value: schedule,
             defaultValue: 1,
-            children: [/*#__PURE__*/_jsx(FormControlLabel, {
+            children: /*#__PURE__*/_jsx(FormControlLabel, {
               value: "immediately",
               label: "Immediately",
               onChange: () => {
@@ -84,16 +84,7 @@ const FormWorkflow = props => {
               control: /*#__PURE__*/_jsx(Radio, {
                 size: "small"
               })
-            }), /*#__PURE__*/_jsx(FormControlLabel, {
-              value: "after",
-              label: "After",
-              onChange: () => {
-                setSchedule("after");
-              },
-              control: /*#__PURE__*/_jsx(Radio, {
-                size: "small"
-              })
-            })]
+            })
           })
         }), schedule === "after" && /*#__PURE__*/_jsx(Grid, {
           item: true,

package/dist/Editor/Elements/Mentions/Mentions.js

@@ -14,10 +14,9 @@ const Mentions = ({
     verticalAlign: "baseline",
     display: "inline-block",
     borderRadius: "4px",
-    backgroundColor: "#2563EB",
+    backgroundColor: "#eee",
     fontSize: "0.9em",
-    boxShadow: selected && focused ? "0 0 0 2px #B4D5FF" : "none",
-    color: "#FFF"
+    boxShadow: selected && focused ? "0 0 0 2px #B4D5FF" : "none"
   };
   // See if our empty text child has any styling marks applied and apply those
   if (element.children[0].bold) {

package/dist/Editor/Elements/SimpleText/index.js

@@ -6,6 +6,7 @@ import { isTextSelected } from "../../utils/helper";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import SimpleTextStyle from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 const SimpleText = props => {
@@ -47,9 +48,9 @@ const SimpleText = props => {
     sx: classes.root,
     key: `para_${path.join("|")}`
   }, children, openAI ? null : /*#__PURE__*/_jsx("span", {
+    contentEditable: false,
     className: "placeholder-simple-text",
-    children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? opacity && selected ? /*#__PURE__*/_jsxs("span", {
-      className: "placeholder-simple-text-default",
+    children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? opacity && selected ? /*#__PURE__*/_jsxs(_Fragment, {
       children: ["Type ", /*#__PURE__*/_jsx("span", {
         style: {
           backgroundColor: '#F2F6FA',

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

@@ -23,7 +23,7 @@ const TableRow = props => {
   return /*#__PURE__*/_jsx("tr", {
     ...attributes,
     style: {
-      background: bgColor,
+      backgroundColor: bgColor,
       border: rowBorderColor ? `1px solid ${rowBorderColor}` : ""
     },
     children: children

package/dist/Editor/Styles/EditorStyles.js

@@ -215,7 +215,7 @@ const editorStyles = ({
     },
     "& .content-editable.empty": {
       "&:after": {
-        color: placeHolderColor
+        color: theme.palette.type === "dark" ? "#99A5B6" : placeHolderColor
       }
     },
     "& .checkbox-edit": {

package/dist/Editor/Toolbar/Mini/MiniToolbar.js

@@ -123,8 +123,7 @@ const MiniToolbar = props => {
         label,
         icon: Icon
       }) => {
-        const isDisabled = popupType === type || type === "undo" ? !canUndo : type === "redo" ? !canRedo : false; // for textFormat type
-
+        const isDisabled = popupType === type || type === "undo" ? !canUndo : type === "redo" ? !canRedo : false;
         return /*#__PURE__*/_jsx(Tooltip, {
           arrow: true,
           title: label,

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

@@ -1,22 +1,28 @@
 import React from "react";
-import { Box, Card, CardMedia, Grid } from "@mui/material";
-
-// const Select = (props) => {
-//     const { classes, data, onSelectTemplate } = props;
-//     return (
-//         <Box
-//             className="template-card-action"
-//             component={"div"}
-//             sx={classes.templateCardBtnGrp}
-//             style={{ padding: 0, background: "transparent"}}
-//         >
-//             <Button className="blueBtn" onClick={onSelectTemplate(data)}>
-//                 Select
-//             </Button>
-//         </Box>
-//     );
-// };
+import { Box, Button, Card, CardMedia, Grid } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Select = props => {
+  const {
+    classes,
+    data,
+    onSelectTemplate
+  } = props;
+  return /*#__PURE__*/_jsx(Box, {
+    className: "template-card-action",
+    component: "div",
+    sx: classes.templateCardBtnGrp,
+    style: {
+      padding: 0,
+      background: "transparent"
+    },
+    children: /*#__PURE__*/_jsx(Button, {
+      className: "blueBtn",
+      onClick: onSelectTemplate(data),
+      children: "Select"
+    })
+  });
+};
 const ButtonTemplateCard = props => {
   const {
     classes,
@@ -28,19 +34,19 @@ const ButtonTemplateCard = props => {
     xs: 3,
     children: /*#__PURE__*/_jsx(Card, {
       sx: classes.paperOverrides,
-      children: /*#__PURE__*/_jsx(Box, {
+      children: /*#__PURE__*/_jsxs(Box, {
         sx: classes.buttonCardMediaWrpr,
-        onClick: onSelectTemplate(m),
-        children: /*#__PURE__*/_jsx("div", {
-          className: "img-wrapper",
-          children: /*#__PURE__*/_jsx(CardMedia, {
-            className: `template-card-media`,
-            component: "div",
-            image: m?.thumbnail,
-            alt: m?.title,
-            sx: classes.buttonCardMedia
-          })
-        })
+        children: [/*#__PURE__*/_jsx(CardMedia, {
+          className: `template-card-media`,
+          component: "div",
+          image: m?.thumbnail,
+          alt: m?.title,
+          sx: classes.buttonCardMedia
+        }), /*#__PURE__*/_jsx(Select, {
+          classes: classes,
+          onSelectTemplate: onSelectTemplate,
+          data: m
+        })]
       })
     })
   }, `template_${m.id}`);

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

@@ -1,22 +1,27 @@
 import React from "react";
-import { Box, Card, CardMedia, Grid } from "@mui/material";
-
-// const Select = (props) => {
-//     const { classes, data, onSelectTemplate } = props;
-//     return (
-//         <Box
-//             className="template-card-action"
-//             component={"div"}
-//             sx={classes.templateCardBtnGrp}
-//             style={{background: "transparent"}}
-//         >
-//             <Button className="blueBtn" onClick={onSelectTemplate(data)}>
-//                 Select
-//             </Button>
-//         </Box>
-//     );
-// };
+import { Box, Button, Card, CardMedia, Grid } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Select = props => {
+  const {
+    classes,
+    data,
+    onSelectTemplate
+  } = props;
+  return /*#__PURE__*/_jsx(Box, {
+    className: "template-card-action",
+    component: "div",
+    sx: classes.templateCardBtnGrp,
+    style: {
+      background: "transparent"
+    },
+    children: /*#__PURE__*/_jsx(Button, {
+      className: "blueBtn",
+      onClick: onSelectTemplate(data),
+      children: "Select"
+    })
+  });
+};
 const FullViewCard = props => {
   const {
     classes,
@@ -30,19 +35,19 @@ const FullViewCard = props => {
     children: /*#__PURE__*/_jsx(Card, {
       sx: classes.paperOverrides,
       className: "paperOverrides",
-      children: /*#__PURE__*/_jsx(Box, {
-        sx: classes.fullViewCardMediaWrpr,
-        onClick: onSelectTemplate(m),
-        children: /*#__PURE__*/_jsx("div", {
-          className: "img-wrapper",
-          children: /*#__PURE__*/_jsx(CardMedia, {
-            component: "div",
-            image: m?.thumbnail,
-            alt: m?.title,
-            sx: classes.fullViewCardMedia,
-            className: height
-          })
-        })
+      children: /*#__PURE__*/_jsxs(Box, {
+        sx: classes.buttonCardMediaWrpr,
+        children: [/*#__PURE__*/_jsx(CardMedia, {
+          component: "div",
+          image: m?.thumbnail,
+          alt: m?.title,
+          sx: classes.fullViewCardMedia,
+          className: height
+        }), /*#__PURE__*/_jsx(Select, {
+          classes: classes,
+          onSelectTemplate: onSelectTemplate,
+          data: m
+        })]
       })
     })
   }, `template_${m.id}`);

package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js

@@ -13,7 +13,6 @@ import PopperHeader from "../PopperHeader";
 import MiniColorPicker from "./MiniColorPicker";
 import SelectAlignment from "./SelectAlignment";
 import SelectFontSize from "./SelectFontSize";
-// import InfinityAITool from "./InfinityAITool";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_COLOR = {
@@ -28,7 +27,6 @@ const MiniTextFormat = props => {
     classes,
     editor,
     closeMainPopup
-    // customProps
   } = props;
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);

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

@@ -3,9 +3,10 @@ const usePopupStyle = theme => ({
     boxShadow: "1px 2px 15px 0px #2563EB40",
     zIndex: 1300,
     marginBottom: "12px !important",
-    border: "1px solid #D8DDE1",
     borderRadius: "6px",
+    border: "1px solid #D8DDE1",
     maxWidth: "100%",
+    // maxHeight: "40px",
     "&.fullscreen": {
       marginBottom: "0px !important",
       "& .papper-wrpr": {
@@ -481,10 +482,9 @@ const usePopupStyle = theme => ({
     }
   },
   fullViewCardMedia: {
-    margin: "5px 0px",
     width: "100%",
     backgroundPosition: "left top",
-    backgroundSize: "100%, auto",
+    backgroundSize: "100% auto",
     zIndex: 1,
     position: "relative",
     "&.fullscreen": {
@@ -499,10 +499,9 @@ const usePopupStyle = theme => ({
     }
   },
   buttonCardMedia: {
-    margin: "5px 0px",
     width: "100%",
-    height: "40px",
-    backgroundPosition: "center",
+    height: "48px",
+    backgroundPosition: "left top",
     backgroundSize: "contain",
     zIndex: 1,
     position: "relative",
@@ -511,25 +510,26 @@ const usePopupStyle = theme => ({
     }
   },
   buttonCardMediaWrpr: {
-    padding: "5px",
     position: "relative",
     margin: "8px",
-    height: "50px",
-    "& .img-wrapper": {
-      "&:hover": {
-        padding: "0px 2px 0px 2px",
-        backgroundColor: "#E9F3FE",
-        border: "1px solid #2563EB40",
-        borderRadius: "5px",
-        // height: "100%",
-        margin: "0px"
-        // "& .template-card-action": {
-        //   display: "flex",
-        // },
+    marginBottom: "0px",
+    "&:hover": {
+      "& .template-card-action": {
+        display: "flex"
       }
+    },
+    "& .img-loader-wrapper": {
+      position: "absolute",
+      width: "12px",
+      height: "12px",
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
+      margin: "auto",
+      zIndex: 0
     }
   },
-
   paperOverrides: {
     "&.MuiPaper-root": {
       background: "transparent",
@@ -587,13 +587,12 @@ const usePopupStyle = theme => ({
   },
   customSelectPopoverWrapper: {
     "& .MuiPopover-paper": {
+      maxHeight: "140px",
       // minWidth: "130px",
       border: "1px solid #E4E8EB",
-      maxHeight: "140px",
       background: `${theme?.palette?.editor?.background} !important`,
-      // overflowY: "hidden",
-      padding: "6px 12px 6px 0px",
       overflowY: "scroll",
+      padding: "6px 12px 6px 0px",
       "@media only screen and (max-width: 600px)": {
         marginTop: "-40px"
       }
@@ -643,21 +642,6 @@ const usePopupStyle = theme => ({
     "& fieldset": {
       border: "none !important"
     }
-  },
-  fullViewCardMediaWrpr: {
-    padding: "5px",
-    position: "relative",
-    margin: "8px",
-    height: "140px",
-    "& .img-wrapper": {
-      "&:hover": {
-        padding: "0px 2px 0px 2px",
-        backgroundColor: "#E9F3FE",
-        border: "1px solid #2563EB40",
-        borderRadius: "5px",
-        margin: "0px"
-      }
-    }
   }
 });
 export default usePopupStyle;

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

@@ -27,7 +27,6 @@ const TextFormat = props => {
     onClose,
     closeMainPopup
   } = props;
-  console.log("PROPS:", props);
   const [anchorEl, setAnchorEl] = useState(null);
   const [type, setType] = useState(null);
   const open = Boolean(anchorEl);

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

@@ -80,16 +80,16 @@ const PopupTool = props => {
       updateAnchorEl();
     }
   }, [selection]);
-  const handleClose = () => {
-    setAnchorEl(null);
-    setOpen(false);
-    setPopupType("");
-  };
   useEffect(() => {
     if (selectedElement?.enable === 1) {
       setAnchorEl(null);
     }
   }, [selection, selectedElement?.path, selectedElement?.enable]);
+  const handleClose = () => {
+    setAnchorEl(null);
+    setOpen(false);
+    setPopupType("");
+  };
   return open && !openAI ? /*#__PURE__*/_jsx(ClickAwayListener, {
     onClickAway: e => {
       // close the mini toolbar, if user clicks outside the editor (in Flozy app.)

package/dist/Editor/common/FontLoader/FontLoader.js

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 import WebFont from "webfontloader";
 import { useEditorContext } from "../../hooks/useMouseMove";
-const defaultFonts = ['PoppinsRegular', 'PoppinsBold', 'Helvetica', 'Georgia', 'Times New Roman', 'Monaco', 'Courier New', 'Qwitcher Grypen', 'EB Garamond', 'Anton', 'DM Serif Text', 'Libre Baskerville', 'Montserrat', 'Open Sans', 'Public Sans', 'Raleway', 'Space Mono', 'Bulgarian Garamond', 'Impact', 'Redacted Script', 'Great Vibes', 'Zeyada', 'Allura', 'Pinyon Script', 'Herr Von Muellerhoff', 'Dawning of a New Day', 'Coming Soon', 'Dancing Script', 'Engagement', 'Gaegu', 'Ingrid Darling', 'Kite One', 'La Belle Aurore', 'Mea Culpa', 'Meddon', 'Merriweather', 'The Girl Next Door'];
+const defaultFonts = ["PoppinsRegular", "PoppinsBold", "Helvetica", "Georgia", "Times New Roman", "Monaco", "Courier New", "Qwitcher Grypen", "EB Garamond", "Anton", "DM Serif Text", "Libre Baskerville", "Montserrat", "Open Sans", "Public Sans", "Raleway", "Space Mono", "Bulgarian Garamond", "Impact", "Redacted Script", "Great Vibes", "Zeyada", "Allura", "Pinyon Script", "Herr Von Muellerhoff", "Dawning of a New Day", "Coming Soon", "Dancing Script", "Engagement", "Gaegu", "Ingrid Darling", "Kite One", "La Belle Aurore", "Mea Culpa", "Meddon", "Merriweather", "The Girl Next Door"];
 const FontLoader = props => {
   const {
     otherProps,
@@ -15,7 +15,7 @@ const FontLoader = props => {
     let retryCount = 0;
     function loadNextBatch() {
       if (currentIndex >= families?.length) {
-        console.log('All fonts have been loaded');
+        console.log("All fonts have been loaded");
         return;
       }
       const batch = families?.slice(currentIndex, currentIndex + batchSize);
@@ -68,13 +68,13 @@ const FontLoader = props => {
       });
     } else {
       function correctFontArray(fontString) {
-        let fontsArray = fontString.split(',');
+        let fontsArray = fontString.split(",");
         let cleanedFontsArray = [...new Set(fontsArray.map(font => font.trim()))];
         return cleanedFontsArray;
       }
       function sanitizeFontFamily(fontFamily) {
         const correctedFonts = correctFontArray(fontFamily);
-        return correctedFonts.join(', ');
+        return correctedFonts.join(", ");
       }
       const elements = Array.from(document?.querySelectorAll("*"));
       const fontSet = new Set();
@@ -83,8 +83,8 @@ const FontLoader = props => {
         fontSet.add(sanitizeFontFamily(computedStyles?.fontFamily));
       });
       let families = Array.from(fontSet);
-      families = correctFontArray(families.join(', '));
-      families = families.map(font => font.replace(/\"/g, ''));
+      families = correctFontArray(families.join(", "));
+      families = families.map(font => font.replace(/\"/g, ""));
       loadFontsInBatches(families);
     }
   }, []);

package/dist/Editor/common/Icon.js

@@ -224,7 +224,6 @@ const iconList = {
       fill: "#64748B"
     }
   }),
-  calenderNewIcon: /*#__PURE__*/_jsx(CalendlyIcon, {}),
   freegrid: /*#__PURE__*/_jsx(CiGrid32, {
     size: 20,
     style: {
@@ -234,6 +233,7 @@ const iconList = {
   text: /*#__PURE__*/_jsx(Text, {
     stroke: "#64748B"
   }),
+  calenderNewIcon: /*#__PURE__*/_jsx(CalendlyIcon, {}),
   textArea: /*#__PURE__*/_jsx(TextAreaIcon, {}),
   phone: /*#__PURE__*/_jsx(Phone, {}),
   briefCase: /*#__PURE__*/_jsx(BriefCase, {}),

package/dist/Editor/common/RnD/ElementSettings/OtherSettings/SaveAsTemplate.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { Node } from "slate";
 import { Dialog, DialogContent, DialogTitle, IconButton } from "@mui/material";
 import SaveAsTemplate from "../../../StyleBuilder/fieldTypes/saveAsTemplate";
 import { CloseIcon } from "../../../iconslist";

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

@@ -155,6 +155,7 @@ const RnD = props => {
       switch (e.detail) {
         case 1:
           if (!enable) {
+            // focusSelection(editor, { path });
             setSelectedElement({
               path: str_path,
               enable: 1,
@@ -162,7 +163,6 @@ const RnD = props => {
               anchorEl: rndRef?.current
             });
           }
-          // ReactEditor.focus(editor);
           break;
         case 2:
           focusSelection(editor, {
@@ -270,7 +270,9 @@ const RnD = props => {
         dragOver: null
       }, null);
     }
+    // focusSelection(editor, { path: updated_at });
   };
+
   const onDragStart = e => {
     e.preventDefault();
     if (e?.target?.dataset?.path?.split(",").join("|") === sp) {
@@ -312,7 +314,6 @@ const RnD = props => {
   const onDrag = (e, d) => {
     e.preventDefault();
     const lines = getClosestDraggable(e.clientX, e.clientY, `.freegrid-section_${parentSectionPath} .freegrid-container .freegrid-item.inactive-drag`.replace(/\|/g, "\\|"), ".freegrid-item.active-drag:not(.exclude-virtual)");
-    console.log(lines);
     setAbsPosition({
       ...absPosition,
       "--zIndex": 2000

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

@@ -104,6 +104,13 @@ const Section = props => {
   };
   const isFreeGrid = element?.children?.find(f => f.type === "freegrid");
   const needHover = element?.children?.find(f => f.type === "grid" && !list_types.includes(element.type)) ? "needHover" : "";
+  let tempProps = {};
+  if (element?.type === "temp") {
+    tempProps = {
+      "--left": `${element?.left}px`,
+      "--top": `${element?.top}px`
+    };
+  }
   const sectionBgImage = sectionBackgroundImage && sectionBackgroundImage !== "none" ? {
     backgroundImage: `url(${sectionBackgroundImage})`
   } : {};
@@ -122,7 +129,10 @@ const Section = props => {
   }, theme);
   return path.length === 1 && !isFreeGrid ? /*#__PURE__*/_jsxs(Box, {
     component: "div",
-    className: `ed-section-wrapper ${readOnly ? "" : "hselect"} ${needHover}`,
+    className: `ed-section-wrapper ${readOnly ? "" : "hselect"} ${needHover} is-${element?.type}`,
+    style: {
+      ...tempProps
+    },
     sx: {
       ...classes.root,
       background: sectionBgColor,

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

@@ -52,6 +52,20 @@ const SectionStyle = theme => ({
       [theme.breakpoints.between("xs", "md")]: {
         maxWidth: `320px !important`
       }
+    },
+    "&.is-temp": {
+      position: "fixed",
+      background: "red",
+      padding: "12px",
+      width: "10px",
+      height: "10px",
+      // left: 0,
+      // top: 0,
+      margin: "auto",
+      left: "var(--left)",
+      top: "var(--top)",
+      zIndex: 1000,
+      pointerEvents: "none"
     }
   }
 });

package/dist/Editor/common/Shorthands/mentions.js

@@ -3,6 +3,6 @@ const mentions = props => {
     CHARACTERS,
     search
   } = props;
-  return CHARACTERS.filter(c => c?.name?.toLowerCase()?.startsWith(search?.toLowerCase())).slice(0, 10);
+  return CHARACTERS.filter(c => c.name.toLowerCase().startsWith(search?.toLowerCase())).slice(0, 10);
 };
 export default mentions;

package/dist/Editor/helper/RnD/focusNode.js

@@ -0,0 +1,70 @@
+import { Editor, Transforms } from "slate";
+import { ReactEditor } from "slate-react";
+const TEMP_NODE_ID = "temp-focus-node";
+const ensureTemporaryFocusNode = (editor, selectedDOM) => {
+  // Check if the temporary focus node already exists
+  const {
+    left,
+    top
+  } = selectedDOM?.getBoundingClientRect();
+  const [tempNodeEntry] = Editor.nodes(editor, {
+    at: [],
+    match: n => n.temp === TEMP_NODE_ID
+  });
+  if (!tempNodeEntry) {
+    // If not, insert the temporary focus node at the start of the editor
+    Transforms.insertNodes(editor, {
+      type: "temp",
+      temp: TEMP_NODE_ID,
+      children: [{
+        text: ""
+      }],
+      left,
+      top
+    }, {
+      at: [editor.children.length]
+    });
+  } else {
+    Transforms.setNodes(editor, {
+      type: "temp",
+      temp: TEMP_NODE_ID,
+      children: [{
+        text: ""
+      }],
+      left,
+      top
+    }, {
+      at: tempNodeEntry[1]
+    });
+  }
+};
+export const focusUsingTemporaryNode = (editor, selectedDOM) => {
+  // de-select and select
+  Transforms.deselect(editor);
+
+  // Ensure the temporary node exists
+  ensureTemporaryFocusNode(editor, selectedDOM);
+
+  // Select the temporary node without causing scroll
+  const [tempNodeEntry] = Editor.nodes(editor, {
+    at: [],
+    match: n => n.temp === TEMP_NODE_ID
+  });
+  if (tempNodeEntry) {
+    const [, path] = tempNodeEntry;
+    Transforms.select(editor, path); // Move selection to the temp node
+  }
+
+  ReactEditor.focus(editor);
+};
+export const cleanupTemporaryFocusNode = editor => {
+  // Remove the temporary focus node if it exists
+  for (const [node, path] of Editor.nodes(editor, {
+    at: [],
+    match: n => n.temp === TEMP_NODE_ID
+  })) {
+    Transforms.removeNodes(editor, {
+      at: path
+    });
+  }
+};

package/dist/Editor/helper/index.js

@@ -4,6 +4,7 @@ import html2canvas from "html2canvas";
 import { rectIntersection, closestCenter } from "@dnd-kit/core";
 import { getQueryStrings } from "../utils/SlateUtilityFunctions";
 import { Node } from "slate";
+// import { focusUsingTemporaryNode } from "./RnD/focusNode";
 const HIDE_PLACHOLDERS = ["grid", "grid-item", "table"];
 const PREVIEW_IMAGE_HIDE_CLASS = ["grid-container-toolbar", "grid-item-toolbar", "element-toolbar", "mini-tool-wrpr-ei", "element-selector", "element-selector-ctrl"];
 const RND_ITEMS = ["freegridItem", "freegridBox"];
@@ -254,8 +255,9 @@ export const focusSelection = (editor, {
     const selectedDOM = ReactEditor.toDOMNode(editor, selectedNode);
     selectedDOM.scrollIntoView({
       behavior: "smooth",
-      block: "center"
+      block: "nearest"
     });
+    // focusUsingTemporaryNode(editor, selectedDOM);
   } catch (err) {
     console.log(err);
   }
@@ -302,7 +304,7 @@ export const getTextColor = (color = "") => {
     WebkitTextFillColor: "transparent !important",
     color: "transparent !important",
     caretColor: "black",
-    '& span': {
+    "& span": {
       color: "transparent !important"
     }
   } : {

package/dist/Editor/hooks/useMentions.js

@@ -13,7 +13,7 @@ const getStartEnd = ({
     // Get start and end, modify it as we move along.
     let [start, end] = Range.edges(selection);
 
-    // Move backwards to find the start of the word
+    // Move backwards
     while (true) {
       const before = Editor.before(editor, start, {
         unit: "character"
@@ -22,15 +22,16 @@ const getStartEnd = ({
         anchor: before,
         focus: start
       });
-      if (before) {
-        if (wordBefore.trim() === "") {
-          break;
-        } else if (SHORTHAND_CMDS.indexOf(wordBefore) < 0) {
-          start = before;
-        } else {
-          start = before;
+      if (before && wordBefore && SHORTHAND_CMDS.indexOf(wordBefore) < 0) {
+        start = before;
+        if (start.offset === 0) {
+          // Means we've wrapped to beginning of another block
           break;
         }
+      } else if (SHORTHAND_CMDS.indexOf(wordBefore) >= 0) {
+        // reached the character end
+        start = before;
+        break;
       } else {
         break;
       }
@@ -40,38 +41,11 @@ const getStartEnd = ({
       focus: end
     };
     const word = Editor.string(editor, wordRange);
-    const firstChar = word[0];
-
-    // Handle the commands
-    if (firstChar === '@') {
-      // Only trigger @ if preceded by a space
-      const isPrecededBySpace = Editor.string(editor, {
-        anchor: {
-          path: start.path,
-          offset: start.offset - 1
-        },
-        focus: start
-      }).trim() === "";
-      if (isPrecededBySpace) {
-        return {
-          word,
-          search: word.substring(1),
-          target: wordRange,
-          type: TYPES[firstChar]
-        };
-      }
-    } else if (firstChar === '/') {
-      return {
-        word,
-        search: word.substring(1),
-        target: wordRange,
-        type: TYPES[firstChar]
-      };
-    }
     return {
-      word: "",
-      wordRange: null,
-      type: null
+      word,
+      search: word?.substring(1, word.length),
+      target: wordRange,
+      type: TYPES[word[0]]
     };
   } catch (err) {
     return {

package/dist/Editor/hooks/withCommon.js

@@ -9,12 +9,7 @@ import withLayout from "../plugins/withLayout";
 import withHtml from "../plugins/withHTML";
 import withErrorHandling from "./withErrorHandling";
 import withCustomDeleteBackward from "../plugins/withCustomDeleteBackward";
-const withCommon = (props, {
-  needLayout = false,
-  isChatEditor = false
-}) => {
-  const editor = needLayout ? withErrorHandling(withHtml(withEquation(withLayout(withHistory(withEmbeds(withTables(withLinks(withMentions(withCustomDeleteBackward(withReact(props))))))))))) : withErrorHandling(withHtml(withEquation(withHistory(withEmbeds(withTables(withLinks(withMentions(withCustomDeleteBackward(withReact(props))))))))));
-  editor.isChatEditor = isChatEditor;
-  return editor;
+const withCommon = (props, rest = {}) => {
+  return rest.needLayout ? withErrorHandling(withHtml(withEquation(withLayout(withHistory(withEmbeds(withTables(withLinks(withMentions(withCustomDeleteBackward(withReact(props))))))))))) : withErrorHandling(withHtml(withEquation(withHistory(withEmbeds(withTables(withLinks(withMentions(withCustomDeleteBackward(withReact(props))))))))));
 };
 export default withCommon;

package/dist/Editor/plugins/withHTML.js

@@ -114,23 +114,6 @@ const withHtml = editor => {
         const defaultInsert = loopChildren(decoded, true);
         if (defaultInsert) {
           insertData(data);
-          // } else if (editor.isChatEditor) {
-          //   // Only convert table to paragraphs if in chat editor mode
-          //   const paragraphs = decoded.map(row =>
-          //     row.children.map(cell =>
-          //       cell.children.map(paragraph =>
-          //         paragraph.children.map(textNode => textNode.text).join('')
-          //       ).join(' ')
-          //     ).join(' ')
-          //   ).join('\n'); // Joining with a newline for separate paragraphs
-
-          //   // Insert text as paragraphs
-          //   const textNodes = paragraphs.split('\n').map(text => ({
-          //     type: 'paragraph',
-          //     children: [{ text }]
-          //   }));
-
-          //   Transforms.insertNodes(editor, textNodes);
         } else {
           // do not paste table, grid inside table cell
           // only plain text for internal paste
@@ -144,9 +127,6 @@ const withHtml = editor => {
       const parsed = new DOMParser().parseFromString(html, "text/html");
       const isGoogleSheet = parsed.body.querySelector("google-sheets-html-origin");
       if (isGoogleSheet) {
-        if (editor.isChatEditor) {
-          return;
-        }
         const table = parsed.body.querySelector("table");
         const colGrp = table.querySelector("colgroup");
         if (colGrp) {
@@ -158,15 +138,6 @@ const withHtml = editor => {
       }
       const fragment = deserialize(parsed.body);
       const formattedFragment = formatFragment[eltype] ? formatFragment[eltype](fragment) : fragment;
-      let is_img_table = false;
-      formattedFragment.map(f => {
-        if (f.type === 'image' || f?.type?.includes('table')) {
-          is_img_table = true;
-        }
-      });
-      if (editor.isChatEditor && is_img_table) {
-        return;
-      }
       handleInsert(editor, () => Transforms.insertFragment(editor, formattedFragment), formattedFragment);
       return;
     } else {

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -529,6 +529,15 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx(Code, {
         ...props
       });
+    // RnD Focus Node
+    case "temp":
+      return /*#__PURE__*/_jsx("span", {
+        ...attributes,
+        ...element.attr,
+        contentEditable: false,
+        className: "temp-focus-node",
+        children: children
+      });
     default:
       return /*#__PURE__*/_jsx(SimpleText, {
         ...props,

package/dist/Editor/utils/chatEditor/SlateUtilityFunctions.js

@@ -1,6 +1,9 @@
 import { Editor, Transforms, Element as SlateElement } from "slate";
 import { Box } from "@mui/material";
 import { fontFamilyMap, sizeMap } from "../font";
+import Table from "../../Elements/Table/Table";
+import TableRow from "../../Elements/Table/TableRow";
+import TableCell from "../../Elements/Table/TableCell";
 import Mentions from "../../Elements/Mentions/Mentions";
 import CheckList from "../../Elements/List/CheckList";
 import { isEmptyTextNode } from "../../helper";
@@ -337,11 +340,31 @@ export const getBlock = props => {
         ...props,
         isEmpty: isEmpty
       });
+    case "table":
+      return /*#__PURE__*/_jsx(Table, {
+        ...props
+      });
+    case "table-head":
+      return /*#__PURE__*/_jsx("thead", {
+        children: children
+      });
+    case "table-body":
+      return /*#__PURE__*/_jsx("tbody", {
+        children: children
+      });
+    case "table-row":
+      return /*#__PURE__*/_jsx(TableRow, {
+        ...props
+      });
+    case "table-cell":
+      return /*#__PURE__*/_jsx(TableCell, {
+        ...props
+      });
     case "mention":
       return /*#__PURE__*/_jsx(Mentions, {
         ...props
       });
     default:
-      return null;
+      return;
   }
 };

package/dist/Editor/utils/events.js

@@ -285,4 +285,40 @@ export const enterEvent = (e, editor, isMobile) => {
   } catch (err) {
     console.log(err);
   }
+};
+export const upDownArrowKeyEvents = (e, editor) => {
+  try {
+    const {
+      selection
+    } = editor;
+    if (!selection || Range.isCollapsed(selection)) {
+      return;
+    }
+    const parentPath = selection.anchor.path.slice(0, -1);
+    const nextNodePath = [...parentPath];
+    const index = parentPath[parentPath.length - 1];
+    const parentNode = Editor.parent(editor, parentPath);
+    if (parentNode.children[index + 1]) {
+      nextNodePath[parentPath.length - 1] += 1;
+    } else {
+      return;
+    }
+    Transforms.move(editor, {
+      distance: 0,
+      unit: 'offset',
+      reverse: false
+    });
+    Transforms.select(editor, {
+      anchor: {
+        path: nextNodePath,
+        offset: 0
+      },
+      focus: {
+        path: nextNodePath,
+        offset: 0
+      }
+    });
+  } catch (err) {
+    console.log(err);
+  }
 };

package/package.json

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