@flozy/editor 10.5.1 → 10.5.3

package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js

@@ -25,13 +25,11 @@ const pageSettingsStyle = [{
     label: "Padding",
     key: "bannerSpacing",
     type: "bannerSpacing"
-  }
-  // {
-  //   label: "Line Spacing",
-  //   key: "lineHeight",
-  //   type: "lineSpacing",
-  // },
-  ]
+  }, {
+    label: "Line Spacing",
+    key: "lineHeight",
+    type: "lineSpacing"
+  }]
 }, {
   tab: "Max Width",
   value: "maxWidth",

package/dist/Editor/common/iconListV2.js

@@ -1236,27 +1236,37 @@ export function ToggleFullScreenIcon() {
 }
 export function CodeElementIcon() {
   return /*#__PURE__*/_jsxs("svg", {
-    width: "12",
-    height: "9",
-    viewBox: "0 0 12 9",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     className: "commonSvgStyle",
     children: [/*#__PURE__*/_jsx("path", {
-      d: "M6.83331 1L4.83331 8",
+      d: "M8 10L6 12L8 14",
       stroke: "#64748B",
+      strokeWidth: "1.5",
       strokeMiterlimit: "10",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }), /*#__PURE__*/_jsx("path", {
-      d: "M8.83331 2.32983L10.6666 4.32983L8.83331 6.32983",
+      d: "M16 10L18 12L16 14",
       stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
       strokeMiterlimit: "10",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }), /*#__PURE__*/_jsx("path", {
-      d: "M2.83333 2.32983L1 4.32983L2.83333 6.32983",
+      d: "M13 9.66992L11 14.33",
       stroke: "#64748B",
+      strokeWidth: "1.5",
       strokeMiterlimit: "10",
       strokeLinecap: "round",
       strokeLinejoin: "round"
@@ -1431,4 +1441,89 @@ export function SectionDragIcon() {
       fill: "#94A3B8"
     })]
   });
+}
+export function PenIcon() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "17",
+    height: "17",
+    viewBox: "0 0 17 17",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "commonSvgStyle",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M9.74898 3.14435L3.93357 9.29977C3.71398 9.53352 3.50148 9.99393 3.45898 10.3127L3.1969 12.6077C3.10482 13.4364 3.69982 14.0031 4.52148 13.8614L6.80232 13.4719C7.12107 13.4152 7.56732 13.1814 7.7869 12.9406L13.6023 6.78518C14.6081 5.72268 15.0615 4.51143 13.4961 3.03102C11.9377 1.56477 10.7548 2.08185 9.74898 3.14435Z",
+      stroke: "#64748B",
+      strokeWidth: "1.2",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M8.77734 4.17188C9.08193 6.12688 10.6686 7.62146 12.6378 7.81979",
+      stroke: "#64748B",
+      strokeWidth: "1.2",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+}
+export function SaveTemplIcon() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "18",
+    height: "18",
+    viewBox: "0 0 18 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "commonSvgStyle",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M9 1.5V6.75L10.5 5.25",
+      stroke: "#64748B",
+      strokeWidth: "1.2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M9 6.75L7.5 5.25",
+      stroke: "#64748B",
+      strokeWidth: "1.2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M1.48438 9.75H4.79187C5.07687 9.75 5.33188 9.9075 5.45938 10.1625L6.33687 11.9175C6.59187 12.4275 7.10938 12.75 7.67938 12.75H10.3269C10.8969 12.75 11.4144 12.4275 11.6694 11.9175L12.5469 10.1625C12.6744 9.9075 12.9369 9.75 13.2144 9.75H16.4844",
+      stroke: "#64748B",
+      strokeWidth: "1.2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M5.25 3.09766C2.595 3.48766 1.5 5.04766 1.5 8.25016V11.2502C1.5 15.0002 3 16.5002 6.75 16.5002H11.25C15 16.5002 16.5 15.0002 16.5 11.2502V8.25016C16.5 5.04766 15.405 3.48766 12.75 3.09766",
+      stroke: "#64748B",
+      strokeWidth: "1.2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+}
+export function UploadIconCloud() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "commonSvgStyle uploadIcon",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M6.00065 14.6673H4.66732C2.00065 14.6673 1.33398 14.0007 1.33398 11.334V4.66732C1.33398 2.00065 2.00065 1.33398 4.66732 1.33398H5.66732C6.66732 1.33398 6.88733 1.62733 7.26733 2.13399L8.26733 3.46733C8.52067 3.80066 8.66732 4.00065 9.33398 4.00065H11.334C14.0007 4.00065 14.6673 4.66732 14.6673 7.33398V8.66732",
+      stroke: "#64748B",
+      strokeWidth: "1.2",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M9.17305 12.2136C7.60638 12.3269 7.60638 14.5936 9.17305 14.7069H12.8797C13.3264 14.7069 13.7664 14.5402 14.093 14.2402C15.193 13.2802 14.6064 11.3602 13.1597 11.1802C12.6397 8.05358 8.11973 9.24024 9.18639 12.2202",
+      stroke: "#64748B",
+      strokeWidth: "1.2",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
 }

package/dist/Editor/common/iconslist.js

@@ -1273,6 +1273,7 @@ export const GridSettingsIcon = props => /*#__PURE__*/_jsxs("svg", {
   height: "22",
   viewBox: "0 0 22 22",
   fill: "none",
+  className: "commonSvgStyle",
   children: [/*#__PURE__*/_jsx("path", {
     d: "M11 13.75C12.5188 13.75 13.75 12.5188 13.75 11C13.75 9.48122 12.5188 8.25 11 8.25C9.48122 8.25 8.25 9.48122 8.25 11C8.25 12.5188 9.48122 13.75 11 13.75Z",
     stroke: "#64748B",
@@ -1341,6 +1342,7 @@ export const GridAddSectionIcon = props => /*#__PURE__*/_jsxs("svg", {
   height: "20",
   viewBox: "0 0 20 20",
   fill: "none",
+  className: "addIconCircle",
   children: [/*#__PURE__*/_jsx("path", {
     d: "M10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1C5.02944 1 1 5.02944 1 10C1 14.9706 5.02944 19 10 19Z",
     stroke: "#64748B",
@@ -1786,6 +1788,7 @@ export const Text = props => /*#__PURE__*/_jsxs("svg", {
   viewBox: "0 0 15 14",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
+  className: "commonSvgStyle",
   children: [/*#__PURE__*/_jsx("path", {
     d: "M2.5 4.1825V3.12083C2.5 2.45 3.0425 1.91333 3.7075 1.91333H12.1775C12.8483 1.91333 13.385 2.45583 13.385 3.12083V4.1825",
     stroke: props?.stroke || "#000",

package/dist/Editor/commonStyle.js

@@ -132,7 +132,7 @@ const useCommonStyle = theme => ({
           background: theme?.palette?.editor?.inputFieldBgColor,
           border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
           borderRadius: "10px",
-          width: "46px !important",
+          width: "52px !important",
           marginLeft: "10px",
           height: '36px !important'
         },
@@ -596,6 +596,75 @@ const useCommonStyle = theme => ({
         stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
       }
     }
+  },
+  formStyles: {
+    "& input": {
+      background: theme?.palette?.editor?.inputFieldBgColor,
+      borderColor: theme?.palette?.editor?.inputFieldBorder,
+      height: "44px",
+      fontSize: "14px",
+      color: theme?.palette?.editor?.textColor
+    },
+    "& .form-btn-wrpr": {
+      "& button": {
+        fontWeight: 500,
+        height: "44px"
+      }
+    }
+  },
+  formMenuStyle: {
+    "& .MuiPaper-root": {
+      background: "transparent",
+      boxShadow: "none"
+    },
+    "& .MuiList-root": {
+      padding: "2px 0px 0px 16px"
+    },
+    "& .MuiButtonBase-root": {
+      padding: "2px"
+    },
+    "& li": {
+      marginLeft: "5px",
+      "&:hover": {
+        background: "transparent"
+      },
+      "& button": {
+        height: "28px",
+        width: "28px",
+        borderRadius: "50%",
+        background: theme?.palette?.editor?.signatureFontBtnBg,
+        border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
+        boxShadow: "0px 0px 4px 0px #00000024",
+        "&:hover": {
+          background: theme?.palette?.editor?.signatureFontBtnBg
+        },
+        "& svg": {
+          height: "20px",
+          width: "20px"
+        },
+        "& .uploadIcon": {
+          height: "17px",
+          width: "17px"
+        },
+        "& .commonSvgStyle path": {
+          stroke: theme?.palette?.editor?.closeButtonSvgStroke
+        }
+      }
+    }
+  },
+  fieldBtnSettings: {
+    "& .MuiButtonBase-root": {
+      height: "28px",
+      width: "28px",
+      padding: "4px",
+      "& svg": {
+        width: "20px",
+        height: "20px",
+        "& path": {
+          stroke: theme?.palette?.editor?.closeButtonSvgStroke
+        }
+      }
+    }
   }
 });
 export default useCommonStyle;

package/dist/Editor/hooks/useMouseMove.js

@@ -36,7 +36,6 @@ export const EditorProvider = ({
     path: null
   });
   const [fontFamilies, setFontFamilies] = useState(defaultFontFamilies);
-  const [activeBreakPoint, setActiveBreakPoint] = useState("");
   useEffect(() => {
     window.updateSelectedItem = d => {
       setSelectedElement(d);
@@ -99,10 +98,8 @@ export const EditorProvider = ({
     setOpenAI,
     updateDragging,
     fontFamilies,
-    setFontFamilies,
-    activeBreakPoint,
-    setActiveBreakPoint
-  }), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop, activeBreakPoint]);
+    setFontFamilies
+  }), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop]);
   return /*#__PURE__*/_jsx(EditorContext.Provider, {
     value: otherValues,
     children: children

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -34,7 +34,7 @@ import SimpleText from "../Elements/SimpleText";
 import CheckList from "../Elements/List/CheckList";
 import { getTextColor, isEmptyTextNode } from "../helper";
 import Attachments from "../Elements/Attachments/Attachments";
-import { getBreakPointsValue, groupByBreakpoint } from "../helper/theme";
+import { getBreakpointLineSpacing, getBreakPointsValue, getDevice, groupByBreakpoint } from "../helper/theme";
 import Variables from "../Elements/Variables/Variable";
 import insertNewLine from "./insertNewLine";
 import Divider from "../Elements/Divider/Divider";
@@ -181,6 +181,9 @@ export const activeMark = (editor, format) => {
 };
 export const getMarked = (leaf, children, theme) => {
   const className = leaf?.doublequote ? "doublequote" : "";
+  const lineH = leaf?.lineHeight;
+  const breakpoint = getDevice(window.innerWidth);
+  const lineHeight = getBreakpointLineSpacing(lineH, breakpoint);
   if (leaf.highlight) {
     children = /*#__PURE__*/_jsx("span", {
       style: {
@@ -229,7 +232,7 @@ export const getMarked = (leaf, children, theme) => {
     });
   }
   // cover under single span
-  if (leaf.color || leaf.bgColor || leaf.fontSize || leaf.fontFamily || leaf.fontWeight || className) {
+  if (leaf.color || leaf.bgColor || leaf.fontSize || leaf.fontFamily || leaf.fontWeight || lineHeight || className) {
     const family = leaf?.fontFamily;
     const textStyles = getTextColor(leaf?.color);
     children = /*#__PURE__*/_jsx("span", {
@@ -297,6 +300,9 @@ export const getBlock = props => {
   const {
     translation
   } = customProps;
+  const breakpoint = getDevice(window.innerWidth);
+  const lineH = element?.children[0]?.lineHeight;
+  const selectedLineHeight = getBreakpointLineSpacing(lineH, breakpoint);
   switch (element.type) {
     case "headingOne":
       return /*#__PURE__*/_jsxs("h1", {
@@ -371,7 +377,7 @@ export const getBlock = props => {
           margin: `${element?.bgColor ? "16px" : "0px"} 0px`,
           width: element?.bgColor ? "calc(100% - 16px)" : "100%",
           borderWidth: element?.color ? "0px 0px 0px 3px" : "0px",
-          lineHeight: 1.43
+          lineHeight: `${selectedLineHeight} !important`
         },
         children: children
       });
@@ -425,15 +431,13 @@ export const getBlock = props => {
         className: `content-editable ${isEmpty ? "empty" : ""}`,
         placeholder: translation("List"),
         style: {
-          color: firstChildren?.color
+          color: firstChildren?.color,
+          lineHeight: `${selectedLineHeight}`
         },
         children: children
       });
     case "orderedList":
       return /*#__PURE__*/_jsx("ol", {
-        style: {
-          lineHeight: 1.43
-        },
         className: "listItemMargin",
         type: "1",
         ...attributes,
@@ -441,9 +445,6 @@ export const getBlock = props => {
       });
     case "unorderedList":
       return /*#__PURE__*/_jsx("ul", {
-        style: {
-          lineHeight: 1.43
-        },
         className: "listItemMargin",
         ...attributes,
         children: children
@@ -451,6 +452,7 @@ export const getBlock = props => {
     case "check-list-item":
       return /*#__PURE__*/_jsx(CheckList, {
         ...props,
+        selectedLineHeight: selectedLineHeight,
         isEmpty: isEmpty
       });
     case "link":

package/dist/Editor/utils/form.js

@@ -12,10 +12,10 @@ export const FORM_NODE = () => {
     },
     buttonProps: {
       bannerSpacing: {
-        left: 12,
-        right: 12,
-        top: 12,
-        bottom: 12
+        left: 24,
+        right: 24,
+        top: 4,
+        bottom: 4
       }
     },
     workflow: [],

package/dist/Editor/utils/formfield.js

@@ -22,8 +22,14 @@ export const formField = data => {
     },
     fontFamily: data?.fontFamily ? data?.fontFamily : "",
     textSize: data?.textSize ? data?.textSize : "",
-    textColor: data?.textColor ? data?.textColor : "",
-    fontWeight: data?.fontWeight ? data?.fontWeight : "500"
+    textColor: data?.textColor && `${data?.textColor} !important`,
+    fontWeight: data?.fontWeight ? data?.fontWeight : "500",
+    borderRadius: {
+      topLeft: 8,
+      topRight: 8,
+      bottomLeft: 8,
+      bottomRight: 8
+    }
   };
 };
 export const insertGridItem = editor => {

package/dist/Editor/utils/helper.js

@@ -863,4 +863,80 @@ export const getCurrentNodeText = editor => {
   } catch (error) {
     console.log("Error:", error);
   }
+};
+const handleCopiedList = (el, domRange) => {
+  // Ensure you're working with an Element, not a Text node
+  const startEl = domRange.startContainer.nodeType === Node.ELEMENT_NODE ? domRange.startContainer : domRange.startContainer.parentElement;
+  const liEl = startEl?.closest("li");
+  let listType = "";
+  if (liEl) {
+    const listEl = liEl.closest("ul, ol");
+    if (listEl) {
+      listType = listEl.tagName === "OL" ? "OL" : "UL";
+    }
+  }
+  const parent = el.parentElement;
+  if (listType === "OL") {
+    const index = Array.from(parent.children).indexOf(el) + 1;
+    el.insertAdjacentText("afterbegin", `${index}. `);
+  } else {
+    el.insertAdjacentText("afterbegin", "- ");
+  }
+};
+const getCopiedTextFormat = domRange => {
+  const contents = domRange.cloneContents();
+  const div = document.createElement("div");
+  div.appendChild(contents);
+
+  // Replace <br> with newlines
+  div.querySelectorAll("br").forEach(br => br.replaceWith("\n"));
+  const BLOCK_TAGS = ["DIV", "P", "LI", "H1", "H2", "H3", "H4", "H5", "H6"];
+  div.querySelectorAll(BLOCK_TAGS.join(",")).forEach(el => {
+    if (el.tagName === "LI") {
+      handleCopiedList(el, domRange);
+    }
+    el.insertAdjacentText("beforeend", "\n");
+  });
+  let text = div.textContent || "";
+  text = text
+  // Remove spaces or tabs that appear just before a newline
+  // e.g., "text   \n" → "text\n"
+  .replace(/[ \t]+\n/g, "\n")
+
+  // Collapse multiple consecutive newlines into a single newline
+  // e.g., "\n\n\n" → "\n"
+  .replace(/\n{2,}/g, "\n")
+
+  // Remove leading and trailing whitespace from the final text
+  .trim();
+  return text;
+};
+const getCopiedHTMLFormat = domRange => {
+  const htmlContents = domRange.cloneContents();
+  const container = document.createElement("div");
+  container.appendChild(htmlContents);
+  const html = container.innerHTML;
+  return html;
+};
+const getCopiedSlateFormat = editor => {
+  // Get Slate fragment
+  const fragment = JSON.stringify(Editor.fragment(editor, editor.selection));
+  const encodedFragment = window.btoa(encodeURIComponent(fragment));
+  return encodedFragment;
+};
+export const handleCopy = (event, editor) => {
+  const {
+    selection
+  } = editor;
+  if (!selection || Range.isCollapsed(selection)) return;
+  event.preventDefault();
+  const domRange = ReactEditor.toDOMRange(editor, selection);
+  const text = getCopiedTextFormat(domRange);
+  const html = getCopiedHTMLFormat(domRange);
+  const encodedFragment = getCopiedSlateFormat(editor);
+
+  // Set all formats manually
+  event.clipboardData?.setData("text/html", html);
+  event.clipboardData?.setData("text/plain", text);
+  event.clipboardData?.setData("application/x-slate-fragment", encodedFragment);
 };

package/package.json

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