@flozy/editor 2.1.0 → 2.1.2

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

@@ -441,6 +441,79 @@ const usePopupStyle = theme => ({
       background: "transparent",
       boxShadow: "none"
     }
+  },
+  miniTextFormatWrapper: {
+    maxWidth: "100%",
+    padding: "4px 8px",
+    overflowX: "auto",
+    "& .customSelectTool": {
+      padding: "8px",
+      color: theme.palette.secondary.main,
+      gap: "4px"
+    },
+    "& .verticalLine": {
+      borderLeft: "1px solid #E0E0E0",
+      minHeight: "35px",
+      height: "100%"
+    },
+    "& .toolWrapper": {
+      display: "flex",
+      alignItems: "center",
+      "& .mr-1": {
+        marginRight: "8px"
+      },
+      "& .ml-1": {
+        marginLeft: "8px"
+      }
+    },
+    "& button": {
+      minWidth: "0px !important",
+      textTransform: "none"
+    },
+    "& .fontColorBtn": {
+      color: theme.palette.secondary.main,
+      borderRadius: "unset",
+      fontSize: "17px",
+      padding: "0px",
+      margin: "0px 8px",
+      paddingBottom: "5px",
+      lineHeight: "16px",
+      position: "relative",
+      "& .selectedColor": {
+        height: "3px",
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        width: "100%"
+      }
+    },
+    "& .textSettingsIcon": {
+      minWidth: "auto !important"
+    }
+  },
+  customSelectPopoverWrapper: {
+    "& .customSelectOptionLabel": {
+      color: "black",
+      margin: "0px",
+      width: "100%",
+      justifyContent: "start",
+      paddingRight: "20px",
+      "& :hover": {
+        background: "#F0F5FA !important"
+      },
+      "&.selected": {
+        background: "#F0F5FA !important"
+      }
+    },
+    "& .menuOptions": {
+      display: "flex",
+      alignItems: "center",
+      gap: "6px"
+    },
+    "& button": {
+      minWidth: "0px !important",
+      textTransform: "none"
+    }
   }
 });
 export default usePopupStyle;

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

@@ -8,12 +8,14 @@ import useDrag from "../../hooks/useDrag";
 import PopperHeader from "./PopperHeader";
 import { TableUtil } from "../../utils/table";
 import useWindowResize from "../../hooks/useWindowResize";
-import useEvent from "../../hooks/useKeys";
+// import MiniTextFormat from "./MiniTextFormat";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const PopupTool = props => {
   const {
-    theme
+    theme,
+    setIsTextSelected
   } = props;
   const classes = usePopupStyle(theme);
   const [anchorEl, setAnchorEl] = useState(null);
@@ -27,23 +29,19 @@ const PopupTool = props => {
   const id = open ? "popup-edit-tool" : "";
   const table = new TableUtil(editor);
   const [size] = useWindowResize();
-  const [eventKey] = useEvent();
   useEffect(() => {
     if (event === "end" && anchorEl && !open) {
       // for table cell selection
       const isCellsSelected = table.isCellSelected(editor.selection);
       if (!isCellsSelected) {
         setOpen(true);
+        setIsTextSelected(true);
       }
     } else if (!anchorEl) {
       setOpen(false);
+      setIsTextSelected(false);
     }
   }, [event, anchorEl]);
-  useEffect(() => {
-    if (eventKey) {
-      setOpen(false);
-    }
-  }, [eventKey]);
   useEffect(() => {
     if (!selection || !inFocus || Range.isCollapsed(selection) || Editor.string(editor, selection) === "") {
       setAnchorEl(null);
@@ -71,31 +69,34 @@ const PopupTool = props => {
     setAnchorEl(null);
     setOpen(false);
   };
-  return open ? /*#__PURE__*/_jsx(Popper, {
-    id: id,
-    open: open,
-    anchorEl: anchorEl,
-    transition: true,
-    placement: "auto-end",
-    sx: classes.popupWrapper,
-    className: `tools-drawer ${size?.device}`,
-    children: ({
-      TransitionProps
-    }) => /*#__PURE__*/_jsx(Fade, {
-      ...TransitionProps,
-      timeout: 350,
-      children: /*#__PURE__*/_jsxs(Paper, {
-        style: {
-          borderRadius: "10px"
-        },
-        children: [/*#__PURE__*/_jsx(PopperHeader, {
-          title: "Text Settings",
-          classes: classes,
-          onClose: handleClose
-        }), /*#__PURE__*/_jsx(TextFormat, {
-          editor: editor,
-          classes: classes
-        })]
+  return open ? /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(Popper, {
+      id: id,
+      open: open,
+      anchorEl: anchorEl,
+      transition: true,
+      placement: "auto-end",
+      sx: classes.popupWrapper,
+      className: `tools-drawer ${size?.device}`,
+      children: ({
+        TransitionProps
+      }) => /*#__PURE__*/_jsx(Fade, {
+        ...TransitionProps,
+        timeout: 350,
+        children: /*#__PURE__*/_jsxs(Paper, {
+          style: {
+            borderRadius: "10px"
+          },
+          className: size.device === "xs" ? "mobileMiniTextWrapper" : "",
+          children: [/*#__PURE__*/_jsx(PopperHeader, {
+            title: "Text Settings",
+            classes: classes,
+            onClose: handleClose
+          }), /*#__PURE__*/_jsx(TextFormat, {
+            editor: editor,
+            classes: classes
+          })]
+        })
       })
     })
   }) : null;

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const DownArrowIcon = () => {
+  return /*#__PURE__*/_jsx("svg", {
+    width: "7",
+    height: "5",
+    viewBox: "0 0 7 5",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M1 1L3.43323 3.37902L5.86646 1",
+      stroke: "#64748B",
+      strokeLinecap: "round"
+    })
+  });
+};
+export default DownArrowIcon;

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function PaintIcon() {
+  return /*#__PURE__*/_jsx("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M13.5512 6.73405L6.71385 12.8277C6.30072 13.1996 5.76365 13.3648 5.22658 13.3442C4.6895 13.3235 4.19375 13.0756 3.80127 12.6625L0.516875 8.98561C-0.226762 8.13869 -0.164793 6.83733 0.682127 6.09369L7.51946 0L13.5512 6.7547V6.73405ZM13.3859 8.01475C13.4479 8.26263 11.6095 11.1959 13.138 11.3818C14.9558 11.5883 13.324 7.76688 13.3859 8.01475ZM12.5183 6.67208L7.47814 1.03283L1.19854 6.65142L12.5183 6.69273V6.67208Z",
+      fill: "#64748B"
+    })
+  });
+}
+export default PaintIcon;

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function TextToolIcon(props = {}) {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M1.55762 4.18323V3.12156C1.55762 2.45073 2.10012 1.91406 2.76512 1.91406H11.2351C11.906 1.91406 12.4426 2.45656 12.4426 3.12156V4.18323",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M7 12.0876V2.39844",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M4.70166 12.0859H9.29833",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+}
+export default TextToolIcon;

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

@@ -7,51 +7,9 @@ import SectionPopup from "../../Elements/Grid/SectionPopup";
 import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
 import DragHandle from "../DnD/DragHandleButton";
 import { useEditorSelection } from "../../hooks/useMouseMove";
+import SectionStyle from "./styles";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const SectionStyle = () => ({
-  root: {
-    "&:hover": {
-      "& .dh-para": {
-        opacity: 1
-      },
-      "& .sectionIcon": {
-        opacity: 1
-      }
-    },
-    "& .element-toolbar": {
-      "&:hover": {
-        display: "block"
-      }
-    },
-    "& .sectionIcon": {
-      opacity: 0,
-      padding: "0px",
-      background: "transparent",
-      border: "none",
-      width: "20px",
-      height: "20px",
-      "& button": {
-        boxShadow: "none",
-        background: "transparent",
-        width: "20px",
-        height: "20px"
-      },
-      "& svg": {
-        fill: "#ccc",
-        width: "20px",
-        marginTop: '-5px'
-      },
-      "&:hover": {
-        opacity: 1,
-        background: "#eee"
-      },
-      "&.active": {
-        opacity: 1
-      }
-    }
-  }
-});
 const Section = props => {
   const classes = SectionStyle();
   const {

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

@@ -0,0 +1,44 @@
+const SectionStyle = () => ({
+  root: {
+    "&:hover": {
+      "& .dh-para": {
+        opacity: 1
+      },
+      "& .sectionIcon": {
+        opacity: 1
+      }
+    },
+    "& .element-toolbar": {
+      "&:hover": {
+        display: "block"
+      }
+    },
+    "& .sectionIcon": {
+      opacity: 0,
+      padding: "0px",
+      background: "transparent",
+      border: "none",
+      width: "20px",
+      height: "20px",
+      "& button": {
+        boxShadow: "none",
+        background: "transparent",
+        width: "20px",
+        height: "20px"
+      },
+      "& svg": {
+        fill: "#ccc",
+        width: "20px",
+        marginTop: "-5px"
+      },
+      "&:hover": {
+        opacity: 1,
+        background: "#eee"
+      },
+      "&.active": {
+        opacity: 1
+      }
+    }
+  }
+});
+export default SectionStyle;

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

@@ -39,6 +39,16 @@ const embedImageStyle = [{
       value: "RoundedLightB2",
       label: "Rounded Light B2 Frame"
     }]
+  }, {
+    label: "Add web address here",
+    key: "webAddress",
+    type: "text",
+    placeholder: "https://"
+  }, {
+    label: "Open in new tab",
+    key: "isNewTab",
+    type: "selectBox",
+    placeholder: "Open in new tab"
   }]
 }, {
   tab: "Banner Spacing",

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

@@ -31,12 +31,14 @@ const BorderRadius = props => {
       BORDER_RADIUS_KEYS.forEach(m => {
         changeAll[m] = e.target.value;
       });
+    } else {
+      changeAll = val ? val[size?.device] : {};
     }
     onChange({
       [key]: {
         ...getBreakPointsValue(val, null),
         [size?.device]: {
-          ...changeAll,
+          ...(changeAll || {}),
           [e.target.name]: e.target.value
         }
       }

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

@@ -94,11 +94,13 @@ const gridStyle = [{
 }, {
   tab: "Size",
   value: "gridSize",
-  fields: [{
-    label: "Width Size",
-    key: "gridSize",
-    type: "gridSize"
-  }, {
+  fields: [
+  // {
+  //   label: "Width Size",
+  //   key: "gridSize",
+  //   type: "gridSize",
+  // },
+  {
     label: "Wrap",
     key: "flexWrap",
     type: "textOptions",

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

@@ -85,6 +85,14 @@ const StyleBuilder = props => {
       ...data,
       field_type: data?.element
     });
+    if (data?.hasOwnProperty('name')) {
+      setElementProps({
+        ...elementProps,
+        ...data,
+        key: data?.name,
+        label: data?.name
+      });
+    }
   };
   const handleSave = () => {
     onSave(elementProps);

package/dist/Editor/helper/deserialize/index.js

@@ -53,9 +53,13 @@ const ELEMENT_TAGS = {
   "GOOGLE-SHEETS-HTML-ORIGIN": () => ({
     type: "paragraph"
   }),
-  TABLE: () => ({
-    type: "table"
-  }),
+  TABLE: (el, bodyChildren = []) => {
+    return {
+      type: "table",
+      rows: bodyChildren?.length,
+      columns: bodyChildren[0]?.children?.length
+    };
+  },
   THEAD: () => ({
     type: "table-head"
   }),
@@ -105,7 +109,8 @@ const TEXT_TAGS = {
 };
 const deserialize = el => {
   if (el.nodeType === 3) {
-    return el.textContent;
+    const match = /\r|\n/.exec(el.textContent);
+    return match ? null : el.textContent;
   } else if (el.nodeType !== 1) {
     return null;
   } else if (el.nodeName === "BR") {
@@ -115,7 +120,6 @@ const deserialize = el => {
     nodeName
   } = el;
   let parent = el;
-  console.log(nodeName);
   if (nodeName === "PRE" && el.childNodes[0] && el.childNodes[0].nodeName === "CODE") {
     parent = el.childNodes[0];
   }
@@ -129,7 +133,7 @@ const deserialize = el => {
     return jsx("fragment", {}, children);
   }
   if (ELEMENT_TAGS[nodeName]) {
-    const attrs = ELEMENT_TAGS[nodeName](el);
+    const attrs = ELEMENT_TAGS[nodeName](el, children);
     return jsx("element", attrs, children);
   }
   if (TEXT_TAGS[nodeName]) {

package/dist/Editor/plugins/withEmbeds.js

@@ -17,7 +17,6 @@ const withEmbeds = editor => {
   editor.insertBreak = (...args) => {
     const parentPath = Path.parent(editor.selection.focus.path);
     const parentNode = Node.get(editor, parentPath);
-    console.log(parentNode);
     if (editor.isVoid(parentNode)) {
       const nextPath = Path.next(parentPath);
       Transforms.insertNodes(editor, {

package/dist/Editor/plugins/withHTML.js

@@ -1,5 +1,36 @@
-import { Transforms, Editor, Element } from "slate";
+import { Transforms, Editor, Element, Node } from "slate";
 import deserialize from "../helper/deserialize";
+const getCurrentElement = editor => {
+  try {
+    if (editor.selection) {
+      return Node.parent(editor, editor?.selection?.anchor?.path);
+    } else {
+      return null;
+    }
+  } catch (err) {
+    return null;
+  }
+};
+const formatFragment = {
+  "list-item": fragment => {
+    let refactorFragment = [];
+    fragment.forEach(a => {
+      if (a.type === "orderedList") {
+        refactorFragment = [...refactorFragment, ...(a.children || [])];
+      } else {
+        a.type = "list-item";
+        refactorFragment.push(a);
+      }
+    });
+    return refactorFragment;
+  },
+  "check-list-item": fragment => {
+    return fragment.map(a => {
+      a.type = "check-list-item";
+      return a;
+    });
+  }
+};
 const withHtml = editor => {
   const {
     insertData,
@@ -15,7 +46,7 @@ const withHtml = editor => {
   editor.insertData = data => {
     const slateHTML = data?.getData("application/x-slate-fragment");
     const html = data?.getData("text/html");
-    console.log(slateHTML, "****", html);
+    const currentEl = getCurrentElement(editor);
     if (slateHTML) {
       const [tableNode] = Editor.nodes(editor, {
         match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
@@ -30,9 +61,10 @@ const withHtml = editor => {
       }
     } else if (html) {
       const parsed = new DOMParser().parseFromString(html, "text/html");
-      console.log(parsed.body);
       const fragment = deserialize(parsed.body);
-      Transforms.insertFragment(editor, fragment);
+      const eltype = currentEl?.type;
+      const formattedFragment = formatFragment[eltype] ? formatFragment[eltype](fragment) : fragment;
+      Transforms.insertFragment(editor, formattedFragment);
       return;
     } else {
       insertData(data);

package/dist/Editor/service/formSubmit.js

@@ -1,6 +1,7 @@
 export const formSubmit = async (formData, props) => {
   try {
-    const response = await fetch(`${props.PAGES_API_HOST}/form/submit`, {
+    const pageApiHost = props.PAGES_API_HOST || "api/v1";
+    const response = await fetch(`${pageApiHost}/form/submit`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json"

package/dist/Editor/utils/button.js

@@ -1,5 +1,6 @@
 import { Transforms } from "slate";
 import insertNewLine from "./insertNewLine";
+import { windowVar } from "./helper";
 export const insertButton = editor => {
   const button = {
     type: "button",
@@ -23,7 +24,8 @@ export const insertButton = editor => {
       top: 8,
       right: 16,
       bottom: 8
-    }
+    },
+    ...(windowVar.lastButtonProps || {})
   };
   Transforms.insertNodes(editor, button);
   Transforms.move(editor);

package/dist/Editor/utils/formfield.js

@@ -5,6 +5,8 @@ export const formField = () => {
     grid: 6,
     element: "text",
     name: `field_${new Date().getTime()}`,
+    key: `field_${new Date().getTime()}`,
+    label: `field_${new Date().getTime()}`,
     placeholder: "Placeholder...",
     children: [{
       text: ""

package/dist/Editor/utils/helper.js

@@ -1,4 +1,6 @@
-import { Editor, Node } from "slate";
+import { Editor, Node, Transforms } from "slate";
+import { ReactEditor } from "slate-react";
+export const windowVar = {};
 export const formatDate = (date, format = "MM/DD/YYYY") => {
   if (!date) return "";
   var d = new Date(date),
@@ -103,4 +105,41 @@ export const isEmptyNode = (editor, children, path) => {
     console.log(err);
     return "";
   }
+};
+export const outsideEditorClickLabel = "handle-outside-editor-click";
+export const handleInsertLastElement = (event, editor) => {
+  if (event.target.dataset.info !== outsideEditorClickLabel) {
+    return;
+  }
+  const lastElement = editor.children[editor.children?.length - 1];
+  const isLastElementEmpty = lastElement.type === "paragraph" && !lastElement.children[0]?.text && !lastElement.children?.some(c => c.type === "grid");
+  if (!ReactEditor.isFocused(editor)) {
+    if (isLastElementEmpty) {
+      // just focus on the last empty element
+      const path = [editor.children.length - 1, 0];
+      const move = {
+        path: path,
+        offset: 0
+      };
+      Transforms.insertNodes(editor, {
+        text: ''
+      }, {
+        at: path
+      });
+      Transforms.move(editor, move);
+      Transforms.select(editor, move);
+    } else {
+      // insert an new empty element and focus
+      Transforms.insertNodes(editor, [{
+        type: "paragraph",
+        children: [{
+          text: ""
+        }]
+      }], {
+        at: [editor.children.length],
+        select: true
+      });
+    }
+    ReactEditor.focus(editor);
+  }
 };

package/package.json

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