@flozy/editor 1.7.4 → 1.7.6

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

@@ -8,23 +8,10 @@ const gridStyle = [{
     type: "text",
     placeholder: "Id should be unique for the page..."
   }]
-}, {
-  tab: "Size",
-  value: "gridSize",
-  fields: [{
-    label: "Grid Size",
-    key: "gridSize",
-    type: "gridSize"
-  }]
 }, {
   tab: "Colors",
   value: "colors",
   fields: [{
-    label: "Text Color",
-    key: "textColor",
-    type: "color",
-    needPreview: false
-  }, {
     label: "Background Color",
     key: "bgColor",
     type: "color"
@@ -37,14 +24,6 @@ const gridStyle = [{
     key: "borderColor",
     type: "color"
   }]
-}, {
-  tab: "Position",
-  value: "position",
-  fields: [{
-    label: "Set Postion (Vertical & Horizantal)",
-    key: "alignment",
-    type: "alignment"
-  }]
 }, {
   tab: "Background",
   value: "backgroundImage",
@@ -57,11 +36,19 @@ const gridStyle = [{
     key: "backgroundImage",
     type: "backgroundImage"
   }]
+}, {
+  tab: "Position",
+  value: "position",
+  fields: [{
+    label: "Set Postion (Vertical & Horizantal)",
+    key: "alignment",
+    type: "alignment"
+  }]
 }, {
   tab: "Padding",
   value: "bannerSpacing",
   fields: [{
-    label: "Padding",
+    label: "Banner Spacing",
     key: "bannerSpacing",
     type: "bannerSpacing"
   }]
@@ -76,11 +63,13 @@ const gridStyle = [{
     label: "Border Width",
     key: "borderWidth",
     type: "text",
-    placeholder: "1px"
+    placeholder: "1px",
+    width: 6
   }, {
     label: "Border Style",
     key: "borderStyle",
     type: "textOptions",
+    width: 6,
     options: [{
       text: "Solid",
       value: "solid"
@@ -93,13 +82,18 @@ const gridStyle = [{
     }],
     renderOption: option => {
       return /*#__PURE__*/_jsx("span", {
-        style: {
-          fontFamily: option.value
-        },
         children: option.text
       });
     }
   }]
+}, {
+  tab: "Size",
+  value: "gridSize",
+  fields: [{
+    label: "Grid Size",
+    key: "gridSize",
+    type: "gridSize"
+  }]
 }, {
   tab: "Save As Template",
   value: "saveAsTemplate",

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

@@ -1,10 +1,5 @@
 import React, { useEffect, useState } from "react";
-import {
-// Dialog,
-DialogTitle, DialogContent, DialogActions, Button,
-// Tabs,
-// Tab,
-Grid, IconButton, Typography, Drawer } from "@mui/material";
+import { DialogTitle, DialogContent, DialogActions, Button, Grid, IconButton, Typography, Drawer } from "@mui/material";
 import FieldMap from "./fieldTypes";
 import CloseIcon from "@mui/icons-material/Close";
 import commonStyle from "../../commonStyle";
@@ -29,51 +24,20 @@ const StyleContent = props => {
   return /*#__PURE__*/_jsx(Grid, {
     container: true,
     spacing: 2,
-    children: /*#__PURE__*/_jsx(Grid, {
-      item: true,
-      xs: 12,
-      style: {
-        marginTop: "12px"
-      },
-      children: [...fields].map((m, i) => {
-        const FieldComponent = FieldMap[m.type];
-        return FieldComponent ? /*#__PURE__*/_jsx(FieldComponent, {
-          data: m,
-          value: element[m.key],
-          onChange: onChange,
-          elementProps: element,
-          customProps: customProps,
-          handleClose: handleClose
-        }, `ei_stt_tab_${value}_${m.key}_${i}`) : null;
-      })
+    className: "sidebar-wrpr-eds",
+    children: [...fields].map((m, i) => {
+      const FieldComponent = FieldMap[m.type];
+      return FieldComponent ? /*#__PURE__*/_jsx(FieldComponent, {
+        data: m,
+        value: element[m.key],
+        onChange: onChange,
+        elementProps: element,
+        customProps: customProps,
+        handleClose: handleClose
+      }, `ei_stt_tab_${value}_${m.key}_${i}`) : null;
     })
   }, value);
 };
-
-// const StyleTabs = (props) => {
-//   const { value, handleChange, renderTabs } = props;
-//   return (
-//     <Tabs
-//       value={value}
-//       onChange={handleChange}
-//       variant="scrollable"
-//       scrollButtons="auto"
-//       aria-label="scrollable auto tabs example"
-//       className="editorTabs"
-//     >
-//       {renderTabs.map((m, i) => {
-//         return (
-//           <Tab
-//             key={`editor-stt-tab-${m.value}`}
-//             value={m.value}
-//             label={m.tab}
-//           />
-//         );
-//       })}
-//     </Tabs>
-//   );
-// };
-
 const StyleBuilder = props => {
   const {
     title,
@@ -83,10 +47,8 @@ const StyleBuilder = props => {
     onClose,
     onDelete,
     customProps
-    // className,
   } = props;
   const [elementProps, setElementProps] = useState(element);
-  // const [tab, setTab] = useState(renderTabs[0]?.value);
   const [tab] = useState(renderTabs[0]?.value);
   const tabVal = renderTabs?.find(f => f.value === tab);
   const {
@@ -104,11 +66,6 @@ const StyleBuilder = props => {
       }
     };
   }, []);
-
-  // const handleChange = (e, newValue) => {
-  //   setTab(newValue);
-  // };
-
   const onElementPropsChange = data => {
     setElementProps({
       ...elementProps,
@@ -160,9 +117,8 @@ const StyleBuilder = props => {
         })
       }), /*#__PURE__*/_jsx(DialogContent, {
         sx: {
-          p: 2,
-          maxHeight: `${window.innerHeight - 125}px`
-          // padding: "16px",
+          maxHeight: `${window.innerHeight - 125}px`,
+          padding: "8px"
         },
         children: renderTabs.map((m, i) => {
           return /*#__PURE__*/_jsx(StyleContent, {

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

@@ -34,5 +34,21 @@ const gridStyle = [{
     key: "sectionBorderRadius",
     type: "borderRadius"
   }]
+}, {
+  tab: "Position",
+  value: "position",
+  fields: [{
+    label: "Set Postion (Vertical & Horizantal)",
+    key: "sectionAlignment",
+    type: "alignment"
+  }]
+}, {
+  tab: "Size",
+  value: "gridSize",
+  fields: [{
+    label: "Grid Size",
+    key: "sectionGridSize",
+    type: "gridSize"
+  }]
 }];
 export default gridStyle;

package/dist/Editor/common/Uploader.js

@@ -9,14 +9,10 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const Uploader = props => {
   const {
     value,
-    data,
     onUploaded,
     customProps
   } = props;
   const classes = UploadStyles();
-  const {
-    key
-  } = data;
   const [base64, setBase64] = useState(value?.url);
   const [uploading, setUploading] = useState(false);
   const handleChange = async e => {

package/dist/Editor/helper/index.js

@@ -1,5 +1,8 @@
 import html2canvas from "html2canvas";
 import { rectIntersection, closestCenter } from "@dnd-kit/core";
+import { getQueryStrings } from "../utils/SlateUtilityFunctions";
+import { Node } from "slate";
+const HIDE_PLACHOLDERS = ["grid", "grid-item", "table"];
 export const getThumbnailImage = async (dom, options = {}) => {
   try {
     const canvas = await html2canvas(dom, options);
@@ -20,4 +23,63 @@ export function customCollisionDetectionAlgorithm(args) {
 
   // If there are no collisions with the pointer, return rectangle intersections
   return [];
-}
+}
+function componentToHex(c) {
+  var hex = Number(c).toString(16);
+  return hex.length === 1 ? "0" + hex : hex;
+}
+function rgbToHex(rgb) {
+  return "#" + rgb.match(/\d+/g).map(componentToHex).join("");
+}
+export function invertColor(hex) {
+  try {
+    if (hex?.indexOf("#") === -1) {
+      hex = rgbToHex(hex);
+    }
+    if (hex.indexOf("#") === 0) {
+      hex = hex.slice(1);
+    }
+    // convert 3-digit hex to 6-digits.
+    if (hex.length === 3) {
+      hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+    }
+    if (hex.length !== 6) {
+      // throw new Error("Invalid HEX color.");
+    }
+    // invert color components
+    var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),
+      g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),
+      b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16);
+    // pad each with zeros and return
+    return "#" + padZero(r) + padZero(g) + padZero(b) + "80";
+  } catch (err) {
+    console.log(err);
+    return "#FFF";
+  }
+}
+function padZero(str, len) {
+  len = len || 2;
+  var zeros = new Array(len).join("0");
+  return (zeros + str).slice(-len);
+}
+export function getEmbedURL(element) {
+  let refUrl = element.href ? element.href : element.url;
+  refUrl = refUrl ? refUrl.includes("http") ? refUrl : `//${refUrl}` : "Link";
+  let embedUrl = refUrl;
+  if (embedUrl.includes("youtube")) embedUrl = getQueryStrings(embedUrl);
+  if (embedUrl.includes("youtu.be")) embedUrl = getQueryStrings(embedUrl);
+  if (embedUrl.includes("loom")) embedUrl = embedUrl.replace(/\/share\//, "/embed/");
+  if (embedUrl.includes("vimeo")) embedUrl = embedUrl.replace(/\/vimeo.com\//, "/player.vimeo.com/video/");
+  if (embedUrl.includes("dailymotion") && embedUrl.includes("video")) embedUrl = embedUrl.replace(/www.dailymotion.com\//, "www.dailymotion.com/embed/");
+  if (embedUrl.includes("dai.ly")) embedUrl = embedUrl.replace(/dai.ly\//, "www.dailymotion.com/embed/video/");
+  return embedUrl;
+}
+export const isEmptyTextNode = element => {
+  try {
+    const showPlaceholder = element?.children?.filter(f => HIDE_PLACHOLDERS.indexOf(f.type) > -1).length === 0;
+    return Node.string(element)?.length === 0 && showPlaceholder;
+  } catch (err) {
+    console.log(err);
+    return false;
+  }
+};

package/dist/Editor/utils/Decorators/index.js

@@ -0,0 +1,5 @@
+import link from "./link";
+const decorators = d => {
+  return [...link(d)];
+};
+export default decorators;

package/dist/Editor/utils/Decorators/link.js

@@ -0,0 +1,26 @@
+const findUrlsInText = text => {
+  const urlRegex =
+  // eslint-disable-next-line no-useless-escape
+  /(?:(?:https?|ftp|file):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#\/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[A-Z0-9+&@#\/%=~_|$])/gim;
+  const matches = text.match(urlRegex);
+  return matches ? matches.map(m => [m.trim(), text.indexOf(m.trim())]) : [];
+};
+const link = ([node, path]) => {
+  const nodeText = node.text;
+  if (!nodeText) return [];
+  const urls = findUrlsInText(nodeText);
+  return urls.map(([url, index]) => {
+    return {
+      anchor: {
+        path,
+        offset: index
+      },
+      focus: {
+        path,
+        offset: index + url.length
+      },
+      decoration: "link"
+    };
+  });
+};
+export default link;

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -32,9 +32,14 @@ import InlineIcon from "../Elements/InlineIcon/InlineIcon";
 import EmbedLink from "../Elements/Embed/link";
 import SimpleText from "../Elements/SimpleText";
 import CheckList from "../Elements/List/CheckList";
+import { isEmptyTextNode } from "../helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 const alignment = ["alignLeft", "alignRight", "alignCenter"];
 const list_types = ["orderedList", "unorderedList"];
+const LIST_FORMAT_TYPE = {
+  orderedList: "list-item",
+  unorderedList: "list-item"
+};
 export const toggleBlock = (editor, format, selection = true, attr = {}) => {
   const isActive = isBlockActive(editor, format);
   const isList = list_types.includes(format);
@@ -68,7 +73,7 @@ export const toggleBlock = (editor, format, selection = true, attr = {}) => {
     Transforms.insertText(editor, "");
   }
   Transforms.setNodes(editor, {
-    type: isActive ? "paragraph" : isList ? "list-item" : format,
+    type: isActive ? "paragraph" : isList ? LIST_FORMAT_TYPE[format] : format,
     ...attr
   });
   if (isList && !isActive) {
@@ -181,9 +186,9 @@ export const getMarked = (leaf, children) => {
   }
   if (leaf.color) {
     const textStyles = leaf?.color?.indexOf("gradient") >= 0 ? {
-      background: leaf.color,
-      "-webkit-background-clip": "text",
-      "-webkit-text-fill-color": "transparent"
+      background: leaf?.color?.concat("text"),
+      WebkitBackgroundClip: "text",
+      WebkitTextFillColor: "transparent"
     } : {
       color: leaf.color
     };
@@ -228,6 +233,17 @@ export const getMarked = (leaf, children) => {
       children: children
     });
   }
+  if (leaf.decoration === "link") {
+    children = /*#__PURE__*/_jsx("a", {
+      style: {
+        cursor: "pointer"
+      },
+      rel: "noreferrer",
+      target: "_blank",
+      href: leaf.text,
+      children: children
+    });
+  }
   return children;
 };
 export const getBlock = props => {
@@ -236,23 +252,30 @@ export const getBlock = props => {
     children
   } = props;
   const attributes = props.attributes ?? {};
+  const isEmpty = isEmptyTextNode(element);
   switch (element.type) {
     case "headingOne":
       return /*#__PURE__*/_jsx("h1", {
         ...attributes,
         ...element.attr,
+        className: `content-editable ${isEmpty ? "empty" : ""}`,
+        placeholder: "Heading 1",
         children: children
       });
     case "headingTwo":
       return /*#__PURE__*/_jsx("h2", {
         ...attributes,
         ...element.attr,
+        className: `content-editable ${isEmpty ? "empty" : ""}`,
+        placeholder: "Heading 2",
         children: children
       });
     case "headingThree":
       return /*#__PURE__*/_jsx("h3", {
         ...attributes,
         ...element.attr,
+        className: `content-editable ${isEmpty ? "empty" : ""}`,
+        placeholder: "Heading 3",
         children: children
       });
     case "blockquote":
@@ -306,6 +329,8 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx("li", {
         ...attributes,
         ...element.attr,
+        className: `content-editable ${isEmpty ? "empty" : ""}`,
+        placeholder: "List",
         children: children
       });
     case "orderedList":
@@ -319,9 +344,10 @@ export const getBlock = props => {
         ...attributes,
         children: children
       });
-    case "checkList":
+    case "check-list-item":
       return /*#__PURE__*/_jsx(CheckList, {
-        ...props
+        ...props,
+        isEmpty: isEmpty
       });
     case "link":
       return /*#__PURE__*/_jsx(Link, {
@@ -373,7 +399,8 @@ export const getBlock = props => {
       });
     case "grid-item":
       return /*#__PURE__*/_jsx(GridItem, {
-        ...props
+        ...props,
+        isEmpty: isEmpty
       });
     case "accordion":
       return /*#__PURE__*/_jsx(Accordion, {
@@ -445,7 +472,8 @@ export const getBlock = props => {
       });
     default:
       return /*#__PURE__*/_jsx(SimpleText, {
-        ...props
+        ...props,
+        isEmpty: isEmpty
       });
   }
 };

package/dist/Editor/utils/accordion.js

@@ -1,6 +1,6 @@
 import { Transforms } from "slate";
 import insertNewLine from "./insertNewLine";
-export const insertAccordion = editor => {
+export const insertAccordion = (editor, path) => {
   try {
     const accordion = {
       type: "accordion",
@@ -22,9 +22,22 @@ export const insertAccordion = editor => {
         }]
       }]
     };
-    Transforms.insertNodes(editor, accordion);
-    Transforms.move(editor, {
-      at: editor.selection.anchor.path
+    const props = path ? {
+      at: path,
+      select: true
+    } : {
+      select: true
+    };
+    Transforms.insertNodes(editor, accordion, props);
+    const curPath = [...editor?.selection?.anchor?.path];
+    const upPath = [...curPath];
+    // get title index
+    const summaryIndex = upPath.length - 3;
+    upPath[summaryIndex] = upPath[summaryIndex] === 0 ? 0 : upPath[summaryIndex] - 1;
+    // select accordion title by default
+    Transforms.select(editor, {
+      path: upPath,
+      offset: 0
     });
     insertNewLine(editor);
   } catch (err) {

package/dist/Editor/utils/button.js

@@ -8,7 +8,21 @@ export const insertButton = editor => {
     buttonLink: {
       linkType: "webAddress"
     },
-    iconPosition: "start"
+    iconPosition: "start",
+    bgColor: "#2563EB",
+    textColor: "#FFF",
+    borderRadius: {
+      topLeft: 8,
+      topRight: 8,
+      bottomLeft: 8,
+      bottomRight: 8
+    },
+    bannerSpacing: {
+      left: 16,
+      top: 8,
+      right: 16,
+      bottom: 8
+    }
   };
   Transforms.insertNodes(editor, button);
   Transforms.move(editor);

package/dist/Editor/utils/customHooks/useElement.js

@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+import { Editor, Element } from "slate";
+
+// This hook returns if the node in the current selection matches the format passed to it.
+const useElement = (editor, format) => {
+  const [isElement, setIsElement] = useState(false);
+  const matchFormat = n => {
+    if (format) {
+      return format.indexOf(n.type) > -1;
+    } else {
+      return true;
+    }
+  };
+  useEffect(() => {
+    if (editor.selection) {
+      // It matches at the editor.selection location by default, so if null handle it seperately.
+      const [node] = Editor.nodes(editor, {
+        match: n => !Editor.isEditor(n) && Element.isElement(n) && matchFormat(n)
+      });
+      setIsElement(node);
+    } else {
+      setIsElement(null);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor.selection]);
+  return isElement;
+};
+export default useElement;

package/dist/Editor/utils/embed.js

@@ -1,7 +1,7 @@
 import { Transforms } from "slate";
 import insertNewLine from "./insertNewLine";
 export const insertDefaultEmbed = (editor, type, defaultURL = "") => {
-  const url = defaultURL ? defaultURL : type === "image" ? "https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" : "https://www.youtube.com/embed/a_feKqxjY-4?si=da6PxCxKEUYqadRn";
+  const url = defaultURL ? defaultURL : type === "image" ? "" : "";
   insertEmbed(editor, {
     url,
     images: []
@@ -29,13 +29,7 @@ export const createEmbedNode = (type, {
 });
 export const insertEmbed = (editor, embedData, format) => {
   try {
-    const {
-      url,
-      images
-    } = embedData;
-    if (!url && images.length === 0) return;
     const embed = createEmbedNode(format, embedData);
-    console.log(embed);
     Transforms.insertNodes(editor, embed, {
       at: editor.selection.anchor.path
     });