@flozy/editor 2.1.0 → 2.1.1

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

@@ -0,0 +1,419 @@
+import React, { useState } from "react";
+import { Button, ButtonGroup, Grid, Typography } from "@mui/material";
+import FormatColorResetIcon from "@mui/icons-material/FormatColorReset";
+import WidthFullIcon from "@mui/icons-material/WidthFull";
+import WidthNormalIcon from "@mui/icons-material/WidthNormal";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import FormatClearIcon from "@mui/icons-material/FormatClear";
+import { Dropdown, MarkButton, TextSize, BlockButton, AccordionButton } from "../FormatTools";
+import { toolbarGroups } from "../toolbarGroups";
+import ColorPicker from "../../Elements/Color Picker/ColorPicker";
+import { activeMark, isBlockActive, toggleBlock, getBlockActive, upateBlockActive, addMarkData } from "../../utils/SlateUtilityFunctions";
+import LinkButton from "../../Elements/Link/LinkButton";
+import { getPageSettings, updatePageSettings } from "../../utils/pageSettings";
+import { AllColors } from "../../Elements/Color Picker/ColorButtons";
+import { fontFamilyMap } from "../../utils/font";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const allTools = toolbarGroups.flat();
+const ButtonComp = {
+  AccordionButton: AccordionButton
+};
+const MiniTextFormat = props => {
+  const {
+    classes,
+    editor
+  } = props;
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [type, setType] = useState(null);
+  const open = Boolean(anchorEl);
+  const fontFamily = allTools.find(f => f.format === "fontFamily");
+  const fontWeight = allTools.find(f => f.format === "fontWeight");
+  const fontStyle = allTools.filter(f => f.type === "mark");
+  const fontAlign = allTools.filter(f => f.format?.indexOf("align") >= 0);
+  const link = allTools.find(f => f.format?.indexOf("link") >= 0);
+  const lists = allTools.filter(f => f.group?.indexOf("list") >= 0);
+  const typo = allTools.filter(f => f.group?.indexOf("typography") >= 0);
+  const {
+    pageProps
+  } = getPageSettings(editor)?.element || {};
+  const {
+    pageWidth
+  } = pageProps;
+  const {
+    isActive: isBlockQuoteActive,
+    props: bqProps
+  } = getBlockActive(editor, "blockquote");
+  const {
+    color: bqColor,
+    bgColor: bqBgColor
+  } = bqProps || {
+    color: "",
+    bgColor: ""
+  };
+  const handlePageWidth = width => () => {
+    updatePageSettings(editor, {
+      ...(pageProps || {}),
+      pageWidth: width
+    });
+  };
+  const handleColorPicker = type => e => {
+    setType(type);
+    setAnchorEl(e.currentTarget);
+  };
+  const updateBlockQuote = attr => {
+    const upAttr = {
+      ...(bqProps || {}),
+      ...attr
+    };
+    delete upAttr.children;
+    delete upAttr.type;
+    if (isBlockQuoteActive && (upAttr.color || upAttr.bgColor)) {
+      upateBlockActive(editor, "blockquote", upAttr);
+    } else {
+      toggleBlock(editor, "blockquote", editor.selection, upAttr);
+    }
+  };
+  const onSelectColor = color => () => {
+    const attr = {
+      [type]: color
+    };
+    updateBlockQuote(attr);
+  };
+  const handleQuote = attr => () => {
+    updateBlockQuote(attr);
+  };
+  const onClosePicker = () => {
+    setAnchorEl(null);
+  };
+  const handleDefault = ({
+    format,
+    val
+  }) => () => {
+    const value = val ? val : "inherit";
+    addMarkData(editor, {
+      format,
+      value
+    });
+  };
+  return /*#__PURE__*/_jsxs(Grid, {
+    container: true,
+    sx: classes.textFormatWrapper,
+    children: [/*#__PURE__*/_jsxs(Grid, {
+      item: true,
+      xs: 12,
+      children: [/*#__PURE__*/_jsxs(Grid, {
+        container: true,
+        justifyContent: "space-between",
+        alignItems: "center",
+        children: [/*#__PURE__*/_jsx(Grid, {
+          item: true,
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "body1",
+            color: "primary",
+            sx: classes.typoLabel,
+            children: "Font Family"
+          })
+        }), /*#__PURE__*/_jsx(Grid, {
+          item: true,
+          children: /*#__PURE__*/_jsx(Button, {
+            sx: classes.defaultBtn,
+            startIcon: /*#__PURE__*/_jsx(FormatClearIcon, {}),
+            onClick: handleDefault({
+              format: "fontFamily",
+              val: Object.values(fontFamilyMap)[0]
+            }),
+            children: "Default"
+          })
+        })]
+      }), /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        xs: 12,
+        sx: classes.textFormatField,
+        children: /*#__PURE__*/_jsx(Dropdown, {
+          classes: classes,
+          ...fontFamily,
+          editor: editor
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(Grid, {
+      container: true,
+      spacing: 2,
+      children: [/*#__PURE__*/_jsxs(Grid, {
+        item: true,
+        xs: 6,
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "body1",
+          color: "primary",
+          sx: classes.typoLabel,
+          children: "Font Weight"
+        }), /*#__PURE__*/_jsx(Grid, {
+          item: true,
+          xs: 12,
+          sx: classes.textFormatField,
+          children: /*#__PURE__*/_jsx(Dropdown, {
+            classes: classes,
+            ...fontWeight,
+            editor: editor,
+            width: "100%"
+          })
+        })]
+      }), /*#__PURE__*/_jsxs(Grid, {
+        item: true,
+        xs: 6,
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "body1",
+          color: "primary",
+          sx: classes.typoLabel,
+          children: "Font Size"
+        }), /*#__PURE__*/_jsx(Grid, {
+          item: true,
+          xs: 12,
+          sx: classes.textFormatCG,
+          children: /*#__PURE__*/_jsx(TextSize, {
+            classes: classes,
+            format: "fontSize",
+            activeMark: activeMark,
+            editor: editor,
+            fullWidth: true
+          })
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(Grid, {
+      item: true,
+      xs: 12,
+      sx: classes.textFormatField,
+      children: [/*#__PURE__*/_jsxs(Grid, {
+        container: true,
+        justifyContent: "space-between",
+        alignItems: "center",
+        children: [/*#__PURE__*/_jsx(Grid, {
+          item: true,
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "body1",
+            color: "primary",
+            sx: classes.typoLabel,
+            children: "Text Color"
+          })
+        }), /*#__PURE__*/_jsx(Grid, {
+          item: true,
+          children: /*#__PURE__*/_jsx(Button, {
+            sx: classes.defaultBtn,
+            startIcon: /*#__PURE__*/_jsx(FormatColorResetIcon, {}),
+            onClick: handleDefault({
+              format: "color"
+            }),
+            children: "Default"
+          })
+        })]
+      }), /*#__PURE__*/_jsx(Grid, {
+        sx: classes.textFormatColorWrpr,
+        children: /*#__PURE__*/_jsx(ColorPicker, {
+          format: "color",
+          activeMark: activeMark,
+          editor: editor,
+          showHex: false,
+          rounded: true,
+          title: "Text Color",
+          id: "11_cc",
+          classes: classes
+        }, "11_cc")
+      })]
+    }), /*#__PURE__*/_jsxs(Grid, {
+      item: true,
+      xs: 12,
+      sx: classes.textFormatField,
+      children: [/*#__PURE__*/_jsxs(Grid, {
+        container: true,
+        justifyContent: "space-between",
+        alignItems: "center",
+        children: [/*#__PURE__*/_jsx(Grid, {
+          item: true,
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "body1",
+            color: "primary",
+            sx: classes.typoLabel,
+            children: "Text Background Color"
+          })
+        }), /*#__PURE__*/_jsx(Grid, {
+          item: true,
+          children: /*#__PURE__*/_jsx(Grid, {
+            item: true,
+            children: /*#__PURE__*/_jsx(Button, {
+              sx: classes.defaultBtn,
+              startIcon: /*#__PURE__*/_jsx(FormatColorResetIcon, {}),
+              onClick: handleDefault({
+                format: "bgColor"
+              }),
+              children: "Default"
+            })
+          })
+        })]
+      }), /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        xs: 12,
+        sx: classes.textFormatColorWrpr,
+        children: /*#__PURE__*/_jsx(ColorPicker, {
+          format: "bgColor",
+          activeMark: activeMark,
+          editor: editor,
+          showHex: false,
+          rounded: true,
+          title: "Text Background Color",
+          classes: classes,
+          id: "12_cc"
+        }, "12_cc")
+      })]
+    }), /*#__PURE__*/_jsxs(Grid, {
+      item: true,
+      xs: 6,
+      sx: classes.textFormatField,
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "body1",
+        color: "primary",
+        sx: classes.typoLabel,
+        children: "Text Alignment"
+      }), /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        xs: 12,
+        sx: classes.textFormatCG,
+        children: fontAlign?.map((m, i) => {
+          return /*#__PURE__*/_jsx(BlockButton, {
+            editor: editor,
+            ...m
+          }, `pptool_block_${i}_${m.id}`);
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(Grid, {
+      item: true,
+      xs: 6,
+      sx: classes.textFormatField,
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "body1",
+        color: "primary",
+        sx: classes.typoLabel,
+        children: "Lists"
+      }), /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        xs: 12,
+        sx: classes.textFormatCG,
+        children: lists?.map((m, i) => {
+          const Comp = ButtonComp[m?.component] || BlockButton;
+          return /*#__PURE__*/_jsx(Comp, {
+            editor: editor,
+            ...m
+          }, `pptool_block_${i}_${m.id}`);
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(Grid, {
+      item: true,
+      xs: 12,
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "body1",
+        color: "primary",
+        sx: classes.typoLabel,
+        children: "Typography"
+      }), /*#__PURE__*/_jsxs(Grid, {
+        item: true,
+        xs: 12,
+        className: "typo-icons",
+        sx: classes.evenSpace,
+        children: [typo?.map((m, i) => {
+          return /*#__PURE__*/_jsx(BlockButton, {
+            editor: editor,
+            ...m
+          }, `pptool_mark_${i}_${m.id}`);
+        }), fontStyle?.map((m, i) => {
+          return /*#__PURE__*/_jsx(MarkButton, {
+            editor: editor,
+            ...m
+          }, `pptool_mark_${i}_${m.id}`);
+        }), /*#__PURE__*/_jsx(LinkButton, {
+          active: isBlockActive(editor, link.format),
+          editor: editor
+        }, link.id)]
+      })]
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      sx: classes.evenSpace,
+      style: {
+        justifyContent: "space-between"
+      },
+      children: /*#__PURE__*/_jsx(Typography, {
+        variant: "body1",
+        color: "primary",
+        sx: classes.typoLabel,
+        children: "Decorations"
+      })
+    }), /*#__PURE__*/_jsxs(Grid, {
+      item: true,
+      xs: 12,
+      sx: classes.evenSpace,
+      style: {
+        justifyContent: "space-between"
+      },
+      className: "text-decorations-wrpr",
+      children: [/*#__PURE__*/_jsxs(ButtonGroup, {
+        sx: classes.btnGroup,
+        children: [/*#__PURE__*/_jsx(Button, {
+          className: `no-hover ${bqBgColor ? "active" : ""}`,
+          onClick: handleQuote({
+            bgColor: !bqBgColor ? "rgb(227, 236, 255)" : null
+          }),
+          style: {
+            background: bqBgColor
+          },
+          children: "Colorbox"
+        }), /*#__PURE__*/_jsx(Button, {
+          onClick: handleColorPicker("bgColor"),
+          children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
+        })]
+      }), /*#__PURE__*/_jsxs(ButtonGroup, {
+        sx: classes.btnGroup,
+        children: [/*#__PURE__*/_jsx(Button, {
+          className: `no-hover ${bqColor ? "active" : ""}`,
+          onClick: handleQuote({
+            color: !bqColor ? "rgb(47, 94, 188)" : null
+          }),
+          children: /*#__PURE__*/_jsx("span", {
+            style: {
+              borderLeft: `3px solid ${bqColor || "rgb(47, 94, 188)"}`,
+              paddingLeft: "12px"
+            },
+            children: "Quote"
+          })
+        }), /*#__PURE__*/_jsx(Button, {
+          onClick: handleColorPicker("color"),
+          children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
+        })]
+      }), /*#__PURE__*/_jsx(Button, {
+        onClick: handlePageWidth("fixed"),
+        startIcon: /*#__PURE__*/_jsx(WidthNormalIcon, {}),
+        sx: classes.pageWidthBtn,
+        className: pageWidth === "fixed" || !pageWidth ? "active" : "",
+        style: {
+          width: "45%"
+        },
+        children: "Centered"
+      }), /*#__PURE__*/_jsx(Button, {
+        sx: classes.pageWidthBtn,
+        className: pageWidth === "full" ? "active" : "",
+        onClick: handlePageWidth("full"),
+        startIcon: /*#__PURE__*/_jsx(WidthFullIcon, {}),
+        style: {
+          width: "45%"
+        },
+        children: "Full width"
+      })]
+    }), /*#__PURE__*/_jsx(AllColors, {
+      open: open,
+      anchorEl: anchorEl,
+      onClose: onClosePicker,
+      classes: classes,
+      onSelect: onSelectColor,
+      id: "all_1"
+    })]
+  });
+};
+export default MiniTextFormat;

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

@@ -9,6 +9,7 @@ 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";
 const PopupTool = props => {
@@ -92,7 +93,7 @@ const PopupTool = props => {
           title: "Text Settings",
           classes: classes,
           onClose: handleClose
-        }), /*#__PURE__*/_jsx(TextFormat, {
+        }), /*#__PURE__*/_jsx(MiniTextFormat, {
           editor: editor,
           classes: classes
         })]

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/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);