@flozy/editor 10.5.1 → 10.5.3

package/dist/Editor/Elements/Search/SearchAttachment.js

@@ -1,5 +1,10 @@
-import React from "react";
-import { Box, Card, CardMedia, CardContent, Typography } from "@mui/material";
+import React, { useEffect, useState } from "react";
+import Box from "@mui/material/Box";
+import Card from "@mui/material/Card";
+import CardMedia from "@mui/material/CardMedia";
+import CardContent from "@mui/material/CardContent";
+import Typography from "@mui/material/Typography";
+import Skeleton from "@mui/material/Skeleton";
 import Icon from "../../common/Icon";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -15,13 +20,26 @@ const SearchAttachment = props => {
     metadata
   } = customProps;
   const {
-    title,
-    type
+    type,
+    id
   } = element;
   const {
     theme
   } = useEditorContext();
+  const [title, setTitle] = useState("");
+  const [showSkeleton, setShowSkeleton] = useState(false);
   const label = Boolean(title?.trim()) ? title : 'Untitled';
+  useEffect(() => {
+    const fetchTitle = async id => {
+      setShowSkeleton(true);
+      const title = await customProps?.services('getDocTitle', id);
+      setTitle(title?.data);
+      setShowSkeleton(false);
+    };
+    if (id) {
+      fetchTitle(id);
+    }
+  }, []);
   const handleClick = () => {
     if (metadata && metadata?.actionHandler) {
       metadata?.actionHandler(type, element);
@@ -38,15 +56,15 @@ const SearchAttachment = props => {
     children: /*#__PURE__*/_jsxs(Card, {
       sx: {
         display: "flex",
-        justifyContent: "flex-start",
-        alignItems: "flex-end",
+        justifyContent: showSkeleton ? "center" : "flex-start",
+        alignItems: showSkeleton ? "center" : "flex-end",
         width: "fit-content",
         maxWidth: '250px',
         padding: "0px 10px",
         boxShadow: "none",
         border: `1px solid ${theme?.palette?.primary?.slashBrainBorder} !important`,
         borderRadius: "7px !important",
-        background: `${theme?.palette?.containers?.slashBrainCardBg} !important`,
+        background: showSkeleton ? `${theme?.palette?.editor?.menuOptionHoverBackground} !important` : `${theme?.palette?.containers?.slashBrainCardBg} !important`,
         cursor: 'pointer',
         margin: '4px 0px',
         lineHeight: 1.43,
@@ -76,7 +94,12 @@ const SearchAttachment = props => {
             width: "unset !important"
           }
         },
-        children: /*#__PURE__*/_jsx(Icon, {
+        children: showSkeleton ? /*#__PURE__*/_jsx(Skeleton, {
+          variant: "circular",
+          width: 14,
+          height: 14,
+          animation: "wave"
+        }) : /*#__PURE__*/_jsx(Icon, {
           icon: "docsIcon"
         })
       }), /*#__PURE__*/_jsx(CardContent, {
@@ -94,7 +117,15 @@ const SearchAttachment = props => {
             width: "unset !important"
           }
         },
-        children: /*#__PURE__*/_jsxs(Typography, {
+        children: showSkeleton ? /*#__PURE__*/_jsx(Skeleton, {
+          variant: "text",
+          width: 140,
+          height: 20,
+          animation: "wave",
+          sx: {
+            borderRadius: "4px"
+          }
+        }) : /*#__PURE__*/_jsxs(Typography, {
           sx: {
             fontWeight: "500",
             background: theme?.palette?.text?.slashBrainText,

package/dist/Editor/Elements/Search/SearchButton.js

@@ -30,6 +30,7 @@ const SearchButton = /*#__PURE__*/forwardRef((props, ref) => {
   const [skip, setSkip] = useState(0);
   const [search, setSearch] = useState("");
   const [isLoading, setIsLoading] = useState(false);
+  const [total, setTotal] = useState(0);
   const [debouncedSearch] = useDebounce(search, 300);
   const limit = 20;
   const observer = useRef();
@@ -63,24 +64,24 @@ const SearchButton = /*#__PURE__*/forwardRef((props, ref) => {
     }
   };
   useEffect(() => {
-    getDocs({
-      debouncedSearch,
-      skip,
-      limit,
-      current_doc_id: currentId
-    });
+    getDocs();
   }, [skip, debouncedSearch]);
   const getDocs = async () => {
+    if (isLoading) return;
+    if (total > 0 && mapData?.length >= total) return;
     setIsLoading(true);
     try {
       if (otherProps?.services) {
         const result = await otherProps?.services("getDocs", {
           skip,
           limit,
-          search,
+          search: debouncedSearch,
           current_doc_id: currentId
         });
-        setMapData(prev => skip === 0 ? result.data : [...prev, ...result.data]);
+        const docs = result?.data?.docs || [];
+        const totalCount = result?.data?.total || 0;
+        setMapData(prev => skip === 0 ? docs : [...prev, ...docs]);
+        setTotal(totalCount);
       }
     } catch (error) {
       console.error("Error fetching documents:", error);

package/dist/Editor/Elements/Search/SearchList.js

@@ -259,7 +259,7 @@ const SearchAndDocList = ({
         xs: 12,
         children: /*#__PURE__*/_jsx(Typography, {
           sx: {
-            display: mapData?.length === 0 ? 'flex' : 'none',
+            display: mapData?.length === 0 && !isLoading ? 'flex' : 'none',
             alignItems: "center",
             justifyContent: "center",
             color: theme?.palette?.text?.secondary,
@@ -269,15 +269,17 @@ const SearchAndDocList = ({
           },
           children: "No docs"
         })
-      }), isLoading && /*#__PURE__*/_jsx(Grid, {
+      }), /*#__PURE__*/_jsx(Grid, {
         item: true,
+        xs: 12,
         sx: {
-          display: "flex",
+          display: isLoading ? 'flex' : 'none',
+          alignItems: "center",
           justifyContent: "center",
-          alignItems: 'center',
-          minHeight: '400px',
-          padding: '0px 16px 8px',
-          position: 'absolute'
+          color: theme?.palette?.text?.secondary,
+          fontSize: '12px',
+          padding: '20px',
+          fontWeight: 700
         },
         children: /*#__PURE__*/_jsx(CircularProgress, {})
       })]

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

@@ -5,6 +5,7 @@ import { Box } from "@mui/material";
 import { isTextSelected } from "../../utils/helper";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import SimpleTextStyle from "./style";
+import { getBreakpointLineSpacing, getDevice } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -29,8 +30,12 @@ const SimpleText = props => {
   } = customProps;
   // const { element: pageSt } = getPageSettings(editor) || {};
   // const { pageColor } = pageSt?.pageProps || {};
+  const breakpoint = getDevice(window.innerWidth);
+  const lineH = element?.children[0]?.lineHeight;
+  const lineHeight = getBreakpointLineSpacing(lineH, breakpoint);
   const classes = SimpleTextStyle({
-    pageColor: "#FFFFFF"
+    pageColor: "#FFFFFF",
+    lineHeight
   });
   const selected = useSelected();
   const path = ReactEditor.findPath(editor, element);

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useMemo } from "react";
-import { Editor, Path, Transforms } from "slate";
+import { Editor, Path, Range, Transforms } from "slate";
 import { Box } from "@mui/material";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import useTableResize from "../../utils/customHooks/useTableResize";
@@ -132,8 +132,12 @@ const TableCell = props => {
   const isFirstRow = row === 0;
   const isFirstColumn = column === 0;
   const [hoverRow, hoverCol] = hoverPath ? hoverPath.slice(-2) : [];
-  const showColDrag = isFirstRow && hoverCol === column && !resizing && !readOnly && !hideTools.includes("drag");
-  const showRowDrag = isFirstColumn && hoverRow === row && !resizing && !readOnly && !hideTools.includes("drag");
+  const {
+    selection
+  } = editor;
+  const isHavingSelection = selection && !Range.isCollapsed(selection);
+  const showColDrag = isFirstRow && hoverCol === column && !resizing && !readOnly && !hideTools.includes("drag") && !isHavingSelection;
+  const showRowDrag = isFirstColumn && hoverRow === row && !resizing && !readOnly && !hideTools.includes("drag") && !isHavingSelection;
   const [parentProps] = tableNode || [{}];
   const [rowProps] = rowNode || [{}];
   const tableDOM = table.getDOMNode(path, true);

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

@@ -14,8 +14,9 @@ import SelectSuperSubscript from "./MiniTextFormat/SelectSuperSubscript";
 import { ColorResetIcon, TextDefaultStyleIcon } from "../../common/iconListV2";
 import FontFamilyAutocomplete from "../FormatTools/FontFamilyAutocomplete";
 import { useEditorContext } from "../../hooks/useMouseMove";
-// import LineSpacing from "../../common/StyleBuilder/fieldTypes/lineSpacing";
-// import { getPageSettings } from "../../utils/pageSettings";
+import LineSpacing from "../../common/StyleBuilder/fieldTypes/lineSpacing";
+import { getPageSettings } from "../../utils/pageSettings";
+import { getDevice } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const allTools = toolbarGroups.flat();
@@ -36,15 +37,15 @@ const TextFormat = props => {
   const {
     translation
   } = customProps;
-
-  // const { element: pageSt } = getPageSettings(editor) || {};
-  // const pageSettingLine = pageSt?.pageProps?.lineHeight;
+  const {
+    element: pageSt
+  } = getPageSettings(editor) || {};
+  const pageSettingLine = pageSt?.pageProps?.lineHeight;
   const {
     fontFamilies,
     theme
   } = useEditorContext();
-  // const { activeBreakPoint } = useEditorContext();
-  // const breakpoint = activeBreakPoint === "" ? "lg" : activeBreakPoint;
+  const breakpoint = getDevice(window.innerWidth);
   const fontWeight = allTools.find(f => f.format === "fontWeight");
   const fontStyle = allTools.filter(f => f.type === "mark" && f.format !== "strikethrough" && f.format !== "superscript" && f.format !== "subscript");
   const fontAlign = allTools.filter(f => f.format?.indexOf("align") >= 0);
@@ -61,12 +62,8 @@ const TextFormat = props => {
     color: "",
     bgColor: ""
   };
-
-  // let lineSpacingValue = activeMark(editor, "lineHeight");
-  // lineSpacingValue =
-  //   lineSpacingValue?.[breakpoint] !== undefined
-  //     ? lineSpacingValue
-  //     : pageSettingLine;
+  let lineSpacingValue = activeMark(editor, "lineHeight");
+  lineSpacingValue = lineSpacingValue?.[breakpoint] !== undefined ? lineSpacingValue : pageSettingLine;
   const handleColorPicker = type => e => {
     setType(type);
     setAnchorEl(e.currentTarget);
@@ -107,11 +104,13 @@ const TextFormat = props => {
       value
     });
   };
-
-  // const handleLineSpacing = (data) => {
-  //   const [[format, value]] = Object.entries(data);
-  //   addMarkData(editor, { format, value });
-  // };
+  const handleLineSpacing = data => {
+    const [[format, value]] = Object.entries(data);
+    addMarkData(editor, {
+      format,
+      value
+    });
+  };
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
     sx: classes.textFormatWrapper,
@@ -386,6 +385,32 @@ const TextFormat = props => {
       xs: 12,
       sx: classes.dividerGrid,
       children: /*#__PURE__*/_jsx(Divider, {})
+    }), /*#__PURE__*/_jsxs(Grid, {
+      item: true,
+      xs: 12,
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "body1",
+        color: "primary",
+        sx: classes.typoLabel,
+        children: "Line Spacing"
+      }), /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        xs: 12,
+        className: "typo-icons",
+        sx: classes.evenSpace,
+        children: /*#__PURE__*/_jsx(LineSpacing, {
+          value: lineSpacingValue,
+          onChange: handleLineSpacing,
+          data: {
+            key: 'lineHeight'
+          }
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      sx: classes.dividerGrid,
+      children: /*#__PURE__*/_jsx(Divider, {})
     }), /*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,

package/dist/Editor/assets/svg/ClearAllRounded.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const ClearAllIcon = () => /*#__PURE__*/_jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "20",
+  height: "20",
+  viewBox: "0 0 20 20",
+  children: [/*#__PURE__*/_jsx("rect", {
+    x: "4",
+    y: "5",
+    width: "12",
+    height: "2",
+    rx: "1",
+    fill: "currentColor"
+  }), /*#__PURE__*/_jsx("rect", {
+    x: "4",
+    y: "9",
+    width: "10",
+    height: "2",
+    rx: "1",
+    fill: "currentColor"
+  }), /*#__PURE__*/_jsx("rect", {
+    x: "4",
+    y: "13",
+    width: "12",
+    height: "2",
+    rx: "1",
+    fill: "currentColor"
+  })]
+});
+export default ClearAllIcon;

package/dist/Editor/assets/svg/ResetIconNew.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const ResetIconNew = () => {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "17",
+    height: "17",
+    viewBox: "0 0 17 17",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("circle", {
+      cx: "8.10105",
+      cy: "8.10234",
+      r: "8",
+      transform: "rotate(-89.2717 8.10105 8.10234)",
+      fill: "#2563EB",
+      fillOpacity: "0.16"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M12.7169 8.22222V8.22222C12.7168 8.2323 12.7289 8.23752 12.7361 8.2305L13.3823 7.6035C13.6597 7.33434 14.0843 7.33974 14.3547 7.61586C14.6252 7.89199 14.6198 8.31458 14.3424 8.58375L12.6992 10.1595C12.3035 10.5389 11.6762 10.5291 11.2926 10.1375L9.71318 8.5249C9.57796 8.38683 9.51173 8.20874 9.51381 8.04516C9.51606 7.86794 9.58679 7.69159 9.72531 7.57064C10.0027 7.30148 10.4273 7.30688 10.6977 7.583L11.3182 8.21649C11.3288 8.22729 11.3471 8.21993 11.3473 8.20481V8.20481C11.374 6.10545 9.67017 4.36586 7.56099 4.33905C5.45182 4.31224 3.70429 6.00795 3.6776 8.10731C3.65091 10.2067 5.35477 11.9463 7.46394 11.9731C7.84743 11.9779 8.14493 12.2817 8.14007 12.6634C8.13522 13.0451 7.8301 13.3412 7.44661 13.3363C4.57046 13.2997 2.27161 10.9527 2.30801 8.0899C2.3444 5.22714 4.70217 2.93927 7.57832 2.97583C10.4408 3.01222 12.7533 5.35946 12.7169 8.22222Z",
+      fill: "#2563EB"
+    })]
+  });
+};
+export default ResetIconNew;

package/dist/Editor/assets/svg/SettingsIcon.js

@@ -7,6 +7,7 @@ const SettingsIcon = props => {
     viewBox: "0 0 18 18",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
+    className: "settingsIcon",
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M9 11.25C10.2426 11.25 11.25 10.2426 11.25 9C11.25 7.75736 10.2426 6.75 9 6.75C7.75736 6.75 6.75 7.75736 6.75 9C6.75 10.2426 7.75736 11.25 9 11.25Z",

package/dist/Editor/common/Icon.js

@@ -45,6 +45,7 @@ import TrashIcon from "../assets/svg/TrashCanIcon";
 import DataTableIcon from "../assets/svg/DataTableIcon";
 import ChervDown from "../assets/svg/ChervDown";
 import ChervUp from "../assets/svg/ChervUp";
+import ResetIconNew from "../assets/svg/ResetIconNew";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const iconList = {
@@ -329,7 +330,8 @@ const iconList = {
       stroke: "#64748B",
       color: "#64748B"
     }
-  })
+  }),
+  resetIconNew: /*#__PURE__*/_jsx(ResetIconNew, {})
 };
 export const icons = {
   ...iconList

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

@@ -1,7 +1,8 @@
-import { Autocomplete, Checkbox, FormControlLabel, MenuItem, TextField, Typography, createFilterOptions } from "@mui/material";
+import { Autocomplete, Checkbox, FormControlLabel, IconButton, MenuItem, TextField, Typography, createFilterOptions } from "@mui/material";
 import { useEffect, useMemo, useState } from "react";
 import { useSlate } from "slate-react";
 import Select from "../Select";
+import { CheckedBoxCheckIcon } from "../iconListV2";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -31,11 +32,19 @@ const OpenInNewTab = props => {
     className: "ccheckbox-primary",
     control: /*#__PURE__*/_jsx(Checkbox, {
       checked: openInNewTab,
-      onChange: onNewTabChange
+      onChange: onNewTabChange,
+      className: "checkBox",
+      checkedIcon: /*#__PURE__*/_jsx(IconButton, {
+        className: "checkedIcon",
+        children: /*#__PURE__*/_jsx(CheckedBoxCheckIcon, {})
+      }),
+      icon: /*#__PURE__*/_jsx(IconButton, {
+        className: "unCheckedIcon"
+      })
     }),
     label: /*#__PURE__*/_jsx(Typography, {
       variant: "body2",
-      children: translation("Open in new tab")
+      children: "Open in new tab"
     })
   }) : null;
 };
@@ -47,6 +56,11 @@ export const TextInput = props => {
       ...props,
       onChange: e => {
         props.onChange(e.target.value);
+      },
+      sx: {
+        "&::placeholder": {
+          color: "gray"
+        }
       }
     }), /*#__PURE__*/_jsx(OpenInNewTab, {
       ...props
@@ -58,7 +72,8 @@ export const SelectPage = props => {
     value,
     onChange,
     services,
-    translation
+    translation,
+    classes
   } = props;
   const [pages, setPages] = useState([]);
   const editor = useSlate();
@@ -116,7 +131,8 @@ export const SelectPage = props => {
       setValue: val => onChange(val?.value || ""),
       placeholder: translation("Select Page"),
       options: pages,
-      disabled: isCurrentPage
+      disabled: isCurrentPage,
+      classes: classes
     }), /*#__PURE__*/_jsx(FreeSoloCreateOption, {
       label: section?.label,
       setValue: val => {
@@ -130,7 +146,8 @@ export const SelectPage = props => {
       options: page?.sections?.map(p => ({
         label: p,
         value: p
-      }))
+      })),
+      classes: classes
     }), isCurrentPage ? null : /*#__PURE__*/_jsx(OpenInNewTab, {
       ...props
     })]
@@ -144,6 +161,7 @@ export const Trigger = props => {
   return /*#__PURE__*/_jsx(Typography, {
     variant: "subtitle1",
     gutterBottom: true,
+    className: "trigger-text",
     children: `${translation("Choosing this will trigger the")} ${translation(nav.type)} ${translation("step")}`
   });
 };
@@ -194,7 +212,8 @@ export function FreeSoloCreateOption({
   setValue,
   options = [],
   placeholder = "",
-  disabled = false
+  disabled = false,
+  classes
 }) {
   return /*#__PURE__*/_jsx(Autocomplete, {
     freeSolo: true,
@@ -260,6 +279,13 @@ export function FreeSoloCreateOption({
     sx: {
       marginTop: "10px"
     },
-    disabled: disabled
+    disabled: disabled,
+    slotProps: {
+      popper: {
+        sx: {
+          ...classes.customAutoComplete
+        }
+      }
+    }
   });
 }