@flozy/editor 1.6.0 → 1.6.2

package/dist/Editor/Toolbar/Toolbar.js

@@ -24,9 +24,180 @@ import FormButton from "../Elements/Form/FormButton.js";
 import Text from "./FormatTools/Text";
 import ChipTextButton from "../Elements/ChipText/ChipTextButton";
 import InlineIconButton from "../Elements/InlineIcon/InlineIconButton";
+import EmojiButton from "../Elements/Emoji/EmojiButton.js";
 import "./styles.css";
+import TopBannerButton from "../Elements/TopBanner/TopBannerButton.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+export const RenderToolbarIcon = props => {
+  const {
+    element,
+    editor,
+    customProps,
+    gi,
+    handleCodeToText,
+    icoBtnType
+  } = props;
+  const renderIcon = () => {
+    switch (element.type) {
+      case "block":
+        return /*#__PURE__*/_jsx(BlockButton, {
+          ...element,
+          editor: editor
+        }, element.id);
+      case "mark":
+        return /*#__PURE__*/_jsx(MarkButton, {
+          ...element,
+          editor: editor
+        }, element.id);
+      case "dropdown":
+        return /*#__PURE__*/_jsx(Dropdown, {
+          ...element,
+          editor: editor
+        }, element.id);
+      case "fontfamilydropdown":
+        return /*#__PURE__*/_jsx(FontFamilyDropdown, {
+          ...element,
+          editor: editor
+        }, element.id);
+      case "numberInput":
+        return /*#__PURE__*/_jsx(FontSize, {
+          editor: editor,
+          ...element
+        }, element.id);
+      case "fontSize":
+        return /*#__PURE__*/_jsx(TextSize, {
+          ...element,
+          editor: editor
+        }, element.id);
+      case "text":
+        return /*#__PURE__*/_jsx(Text, {
+          ...element,
+          editor: editor,
+          style: {
+            width: "80px"
+          }
+        }, element.id);
+      case "link":
+        return /*#__PURE__*/_jsx(LinkButton, {
+          active: isBlockActive(editor, "link"),
+          editor: editor
+        }, element.id);
+      case "embed":
+        return /*#__PURE__*/_jsx(Embed, {
+          format: element.format,
+          editor: editor,
+          customProps: customProps,
+          icoBtnType: icoBtnType,
+          lbT: element.lbT
+        }, element.id);
+      case "color-picker":
+        return /*#__PURE__*/_jsx(ColorPicker, {
+          activeMark: activeMark,
+          format: element.format,
+          editor: editor,
+          title: element.title
+        }, element.id);
+      case "table":
+        return /*#__PURE__*/_jsx(TableSelector, {
+          editor: editor,
+          icoBtnType: icoBtnType
+        }, element.id);
+      case "id":
+        return /*#__PURE__*/_jsx(Id, {
+          editor: editor
+        }, `gi_id_${gi}`);
+      case "equation":
+        return /*#__PURE__*/_jsx(EquationButton, {
+          editor: editor
+        }, `gi_equation_${gi}`);
+      case "codeToText":
+        return /*#__PURE__*/_jsx(CodeToTextButton, {
+          handleButtonClick: handleCodeToText
+        }, `gi_codeToText_${gi}`);
+      case "grid":
+        return /*#__PURE__*/_jsx(GridButton, {
+          editor: editor,
+          customProps: customProps,
+          icoBtnType: icoBtnType
+        }, element.id);
+      case "newLine":
+        return /*#__PURE__*/_jsx(NewLineButton, {
+          editor: editor,
+          icoBtnType: icoBtnType
+        }, element.id);
+      case "accordion":
+        return /*#__PURE__*/_jsx(AccordionButton, {
+          editor: editor
+        }, element.id);
+      case "signature":
+        return /*#__PURE__*/_jsx(SignatureButton, {
+          editor: editor,
+          icoBtnType: icoBtnType
+        }, element.id);
+      case "button":
+        return /*#__PURE__*/_jsx(ButtonToolIcon, {
+          editor: editor,
+          icoBtnType: icoBtnType
+        }, element.id);
+      case "page-settings":
+        return /*#__PURE__*/_jsx(PageSettingsButton, {
+          editor: editor,
+          customProps: customProps,
+          icoBtnType: icoBtnType
+        }, element.id);
+      case "carousel":
+        return /*#__PURE__*/_jsx(CarouselButton, {
+          editor: editor,
+          icoBtnType: icoBtnType
+        }, element.id);
+      case "chip-text":
+        return /*#__PURE__*/_jsx(ChipTextButton, {
+          editor: editor,
+          customProps: customProps
+        }, element.id);
+      // case "drawer":
+      //   return (
+      //     <DrawerMenuButton
+      //       key={element.id}
+      //       editor={editor}
+      //       customProps={customProps}
+      //     />
+      //   );
+      case "app-header":
+        return /*#__PURE__*/_jsx(AppHeaderButton, {
+          editor: editor,
+          customProps: customProps
+        }, element.id);
+      case "form":
+        return /*#__PURE__*/_jsx(FormButton, {
+          editor: editor,
+          customProps: customProps,
+          icoBtnType: icoBtnType
+        }, element.id);
+      case "icon-text":
+        return /*#__PURE__*/_jsx(InlineIconButton, {
+          editor: editor,
+          customProps: customProps
+        }, element.id);
+      case "emoji":
+        return /*#__PURE__*/_jsx(EmojiButton, {
+          editor: editor,
+          customProps: customProps,
+          icoBtnType: icoBtnType
+        }, element.id);
+      case "topbanner":
+        return /*#__PURE__*/_jsx(TopBannerButton, {
+          editor: editor,
+          customProps: customProps,
+          icoBtnType: icoBtnType
+        }, element.id);
+      default:
+        return null;
+    }
+  };
+  return renderIcon();
+};
 const Toolbar = props => {
   const {
     handleCodeToText,
@@ -58,140 +229,13 @@ const Toolbar = props => {
     children: [toolbarGroups.map((group, index) => /*#__PURE__*/_jsx("span", {
       className: `toolbar-grp1 ${toolbarOptions?.toolbarPosition}`,
       children: group.map((element, gi) => {
-        switch (element.type) {
-          case "block":
-            return /*#__PURE__*/_jsx(BlockButton, {
-              ...element,
-              editor: editor
-            }, element.id);
-          case "mark":
-            return /*#__PURE__*/_jsx(MarkButton, {
-              ...element,
-              editor: editor
-            }, element.id);
-          case "dropdown":
-            return /*#__PURE__*/_jsx(Dropdown, {
-              ...element,
-              editor: editor
-            }, element.id);
-          case "fontfamilydropdown":
-            return /*#__PURE__*/_jsx(FontFamilyDropdown, {
-              ...element,
-              editor: editor
-            }, element.id);
-          case "numberInput":
-            return /*#__PURE__*/_jsx(FontSize, {
-              editor: editor,
-              ...element
-            }, element.id);
-          case "fontSize":
-            return /*#__PURE__*/_jsx(TextSize, {
-              ...element,
-              editor: editor
-            }, element.id);
-          case "text":
-            return /*#__PURE__*/_jsx(Text, {
-              ...element,
-              editor: editor,
-              style: {
-                width: "80px"
-              }
-            }, element.id);
-          case "link":
-            return /*#__PURE__*/_jsx(LinkButton, {
-              active: isBlockActive(editor, "link"),
-              editor: editor
-            }, element.id);
-          case "embed":
-            return /*#__PURE__*/_jsx(Embed, {
-              format: element.format,
-              editor: editor,
-              customProps: customProps
-            }, element.id);
-          case "color-picker":
-            return /*#__PURE__*/_jsx(ColorPicker, {
-              activeMark: activeMark,
-              format: element.format,
-              editor: editor,
-              title: element.title
-            }, element.id);
-          case "table":
-            return /*#__PURE__*/_jsx(TableSelector, {
-              editor: editor
-            }, element.id);
-          case "id":
-            return /*#__PURE__*/_jsx(Id, {
-              editor: editor
-            }, `gi_id_${gi}`);
-          case "equation":
-            return /*#__PURE__*/_jsx(EquationButton, {
-              editor: editor
-            }, `gi_equation_${gi}`);
-          case "codeToText":
-            return /*#__PURE__*/_jsx(CodeToTextButton, {
-              handleButtonClick: handleCodeToText
-            }, `gi_codeToText_${gi}`);
-          case "grid":
-            return /*#__PURE__*/_jsx(GridButton, {
-              editor: editor,
-              customProps: customProps
-            }, element.id);
-          case "newLine":
-            return /*#__PURE__*/_jsx(NewLineButton, {
-              editor: editor
-            }, element.id);
-          case "accordion":
-            return /*#__PURE__*/_jsx(AccordionButton, {
-              editor: editor
-            }, element.id);
-          case "signature":
-            return /*#__PURE__*/_jsx(SignatureButton, {
-              editor: editor
-            }, element.id);
-          case "button":
-            return /*#__PURE__*/_jsx(ButtonToolIcon, {
-              editor: editor
-            }, element.id);
-          case "page-settings":
-            return /*#__PURE__*/_jsx(PageSettingsButton, {
-              editor: editor,
-              customProps: customProps
-            }, element.id);
-          case "carousel":
-            return /*#__PURE__*/_jsx(CarouselButton, {
-              editor: editor
-            }, element.id);
-          case "chip-text":
-            return /*#__PURE__*/_jsx(ChipTextButton, {
-              editor: editor,
-              customProps: customProps
-            }, element.id);
-          // case "drawer":
-          //   return (
-          //     <DrawerMenuButton
-          //       key={element.id}
-          //       editor={editor}
-          //       customProps={customProps}
-          //     />
-          //   );
-          case "app-header":
-            return /*#__PURE__*/_jsx(AppHeaderButton, {
-              editor: editor,
-              customProps: customProps
-            }, element.id);
-          case "form":
-            return /*#__PURE__*/_jsx(FormButton, {
-              editor: editor,
-              customProps: customProps
-            }, element.id);
-          case "icon-text":
-            return /*#__PURE__*/_jsx(InlineIconButton, {
-              editor: editor,
-              customProps: customProps
-            }, element.id);
-          default:
-            return null;
-        }
+        return /*#__PURE__*/_jsx(RenderToolbarIcon, {
+          editor: editor,
+          element: element,
+          gi: gi,
+          handleCodeToText: handleCodeToText,
+          customProps: customProps
+        }, `ri_${element.id}`);
       })
     }, index)), /*#__PURE__*/_jsx(HtmlContextMenu, {
       editor: editor,

package/dist/Editor/Toolbar/styles.css

@@ -130,7 +130,7 @@ select {
 }
 
 .toolbar .editor-dd {
-    width: 200px !important;
+    width: 200px;
 }
 
 .toolbar .MuiIconButton-root {}

package/dist/Editor/Toolbar/toolbarGroups.js

@@ -1,4 +1,5 @@
 import { fontOptions } from "../utils/font";
+import FormatBoldIcon from "@mui/icons-material/FormatBold";
 export const toolbarGroups = [[{
   id: 1,
   format: "fontFamily",
@@ -21,6 +22,25 @@ export const toolbarGroups = [[{
     text: "48px",
     value: "48px"
   }]
+}, {
+  id: 40,
+  format: "fontWeight",
+  type: "dropdown",
+  options: [{
+    text: "Normal",
+    value: "normal"
+  }, {
+    text: "Bold",
+    value: "bold"
+  }, {
+    text: "Bolder",
+    value: "bolder"
+  }, {
+    text: "Lighter",
+    value: "lighter"
+  }],
+  icon: FormatBoldIcon,
+  width: "100px"
 }], [{
   id: 3,
   format: "bold",
@@ -65,32 +85,44 @@ export const toolbarGroups = [[{
   id: 11,
   format: "headingOne",
   type: "block",
-  title: "H1"
+  title: "H1",
+  group: "typography"
 }, {
   id: 12,
   format: "headingTwo",
   type: "block",
-  title: "H2"
+  title: "H2",
+  group: "typography"
 }, {
   id: 13,
   format: "headingThree",
   type: "block",
-  title: "H3"
+  title: "H3",
+  group: "typography"
 }, {
   id: 14,
   format: "blockquote",
   type: "block",
-  title: "Block Quote"
+  title: "Block Quote",
+  group: "typography"
 }], [{
   id: 15,
   format: "orderedList",
   type: "block",
-  title: "Ordered List"
+  title: "Ordered List",
+  group: "list"
 }, {
   id: 16,
   format: "unorderedList",
   type: "block",
-  title: "Un-ordered List"
+  title: "Un-ordered List",
+  group: "list"
+}, {
+  id: 43,
+  format: "checkList",
+  type: "block",
+  title: "Check List",
+  group: "list"
 }], [{
   id: 17,
   format: "alignLeft",
@@ -113,63 +145,80 @@ export const toolbarGroups = [[{
 }, {
   id: 21,
   format: "image",
-  type: "embed"
+  type: "embed",
+  group: "elements"
 }, {
   id: 22,
   format: "video",
-  type: "embed"
+  type: "embed",
+  group: "elements"
+}, {
+  id: 44,
+  lbT: "embed",
+  format: "video",
+  type: "embed",
+  group: "elements"
 }, {
-  id: 23,
-  type: "table"
+  id: 45,
+  format: "topbanner",
+  type: "topbanner",
+  group: "elements"
+}, {
+  id: 42,
+  type: "table",
+  group: "elements"
 }], [{
   id: 28,
   format: "grid",
-  type: "grid"
+  type: "grid",
+  group: "elements"
+}, {
+  id: 41,
+  format: "emoji",
+  type: "emoji",
+  group: "elements"
 }, {
   id: 29,
   format: "newLine",
-  type: "newLine"
+  type: "newLine",
+  group: "elements"
 }, {
   id: 30,
   format: "accordion",
-  type: "accordion"
+  type: "accordion",
+  group: "list",
+  component: "AccordionButton"
 }, {
   id: 31,
   format: "signature",
-  type: "signature"
+  type: "signature",
+  group: "elements"
 }, {
   id: 32,
   format: "button",
-  type: "button"
-}, {
-  id: 33,
-  format: "pageSettings",
-  type: "page-settings"
+  type: "button",
+  group: "elements"
 }, {
   id: 34,
   format: "carousel",
-  type: "carousel"
+  type: "carousel",
+  group: "elements"
 }, {
   id: 35,
   format: "chipText",
   type: "chip-text"
-},
-// {
-//   id: 36,
-//   format: "drawer",
-//   type: "drawer",
-// },
-{
+}, {
   id: 37,
   format: "appHeader",
   type: "app-header"
 }, {
   id: 38,
   format: "form",
-  type: "form"
-}
-// {
-//   id: 39,
-//   type: "icon-text",
-// },
-]];
+  type: "form",
+  group: "elements"
+}, {
+  id: 33,
+  format: "pageSettings",
+  type: "page-settings",
+  group: "elements"
+}]];

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

@@ -0,0 +1,29 @@
+import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const AddElementIcon = () => {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "17",
+    height: "16",
+    viewBox: "0 0 17 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("rect", {
+      x: "1.25",
+      y: "0.75",
+      width: "14.5",
+      height: "14.5",
+      rx: "7.25",
+      strokeWidth: "1.5"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M8.50024 4.66748L8.50024 11.3341",
+      strokeWidth: "1.5",
+      strokeLinecap: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M5.16687 8.03613H11.8335",
+      strokeWidth: "1.5",
+      strokeLinecap: "round"
+    })]
+  });
+};
+export default AddElementIcon;

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

@@ -0,0 +1,29 @@
+import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const AddElementIcon = () => {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "17",
+    height: "16",
+    viewBox: "0 0 17 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M9.17334 1.94688L13.1067 3.69354C14.24 4.19354 14.24 5.02021 13.1067 5.52021L9.17334 7.26688C8.72667 7.46688 7.99334 7.46688 7.54667 7.26688L3.61334 5.52021C2.48 5.02021 2.48 4.19354 3.61334 3.69354L7.54667 1.94688C7.99334 1.74687 8.72667 1.74687 9.17334 1.94688Z",
+      strokeWidth: "1.2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M2.5 7.3335C2.5 7.8935 2.92 8.54016 3.43333 8.76683L7.96 10.7802C8.30667 10.9335 8.7 10.9335 9.04 10.7802L13.5667 8.76683C14.08 8.54016 14.5 7.8935 14.5 7.3335",
+      strokeWidth: "1.2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M2.5 10.6665C2.5 11.2865 2.86667 11.8465 3.43333 12.0998L7.96 14.1132C8.30667 14.2665 8.7 14.2665 9.04 14.1132L13.5667 12.0998C14.1333 11.8465 14.5 11.2865 14.5 10.6665",
+      strokeWidth: "1.2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+};
+export default AddElementIcon;

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

@@ -0,0 +1,29 @@
+import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const TextIcon = () => {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "15",
+    height: "14",
+    viewBox: "0 0 15 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M2.0575 4.18274V3.12107C2.0575 2.45024 2.59999 1.91357 3.265 1.91357H11.735C12.4058 1.91357 12.9425 2.45607 12.9425 3.12107V4.18274",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M7.5 12.0866V2.39746",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M5.20166 12.0864H9.79833",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+};
+export default TextIcon;

package/dist/Editor/common/Icon.js

@@ -1,10 +1,13 @@
 import React from "react";
-import { MdFormatQuote, MdFormatAlignLeft, MdFormatAlignCenter, MdFormatAlignRight, MdFormatListNumbered, MdFormatListBulleted, MdAdd, MdArrowForward } from "react-icons/md";
-import { BsTypeH1, BsTypeH2, BsTypeH3, BsCameraVideoFill } from "react-icons/bs";
-import { FaSuperscript, FaSubscript } from "react-icons/fa";
+import { MdFormatQuote, MdFormatAlignLeft, MdFormatAlignCenter, MdFormatAlignRight, MdFormatListNumbered, MdFormatListBulleted, MdAdd, MdArrowForward, MdEmojiEmotions, MdOutlinePermMedia, MdOutlineFileUpload } from "react-icons/md";
+import { BsTypeH1, BsTypeH2, BsTypeH3, BsCameraVideoFill, BsArrowBarRight, BsArrowBarLeft } from "react-icons/bs";
+import { FaSuperscript, FaSubscript, FaLink } from "react-icons/fa";
+import { FcAddRow, FcAddColumn } from "react-icons/fc";
 import { AiFillEdit, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutlineDelete, AiFillTag, AiOutlineUpload, AiOutlineArrowsAlt, AiOutlineInsertRowAbove, AiOutlineInsertRowLeft, AiFillHtml5 } from "react-icons/ai";
 import { SiLatex } from "react-icons/si";
-import { BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon } from "./iconslist";
+import { RiDeleteColumn, RiDeleteRow } from "react-icons/ri";
+import { IoIosImage, IoIosLink } from "react-icons/io";
+import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon } from "./iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 const iconList = {
   fontFamily: /*#__PURE__*/_jsx(FontFamilyIcon, {
@@ -74,7 +77,7 @@ const iconList = {
     fill: "#64748B"
   }),
   // link: <MdInsertLink size={20} />,
-  link: /*#__PURE__*/_jsx(LinkIcon, {
+  link: /*#__PURE__*/_jsx(IoIosLink, {
     size: 20
   }),
   // image: <MdImage size={20} />,
@@ -130,6 +133,46 @@ const iconList = {
   }),
   pen: /*#__PURE__*/_jsx(AiFillEdit, {
     size: 20
+  }),
+  emoji: /*#__PURE__*/_jsx(MdEmojiEmotions, {
+    size: 20
+  }),
+  grid: /*#__PURE__*/_jsx(GridIcon, {}),
+  accordion: /*#__PURE__*/_jsx(AccordionIcon, {}),
+  signature: /*#__PURE__*/_jsx(SignatureIcon, {}),
+  button: /*#__PURE__*/_jsx(ButtonIcon, {}),
+  carousel: /*#__PURE__*/_jsx(Carousal, {}),
+  form: /*#__PURE__*/_jsx(FormIcon, {}),
+  tableCellResizeLeft: /*#__PURE__*/_jsx(BsArrowBarRight, {
+    size: 20
+  }),
+  tableCellResizeRight: /*#__PURE__*/_jsx(BsArrowBarLeft, {
+    size: 20
+  }),
+  deleteColumn: /*#__PURE__*/_jsx(RiDeleteColumn, {
+    size: 20
+  }),
+  addColumn: /*#__PURE__*/_jsx(FcAddColumn, {
+    size: 20
+  }),
+  deleteRow: /*#__PURE__*/_jsx(RiDeleteRow, {
+    size: 20
+  }),
+  addRow: /*#__PURE__*/_jsx(FcAddRow, {
+    size: 20
+  }),
+  checkList: /*#__PURE__*/_jsx(CheckboxIcon, {
+    size: 20
+  }),
+  embed: /*#__PURE__*/_jsx(LinkIcon, {}),
+  topbanner: /*#__PURE__*/_jsx(IoIosImage, {
+    size: 20
+  }),
+  fileUpload: /*#__PURE__*/_jsx(MdOutlineFileUpload, {
+    size: 20
+  }),
+  media: /*#__PURE__*/_jsx(MdOutlinePermMedia, {
+    size: 20
   })
 };
 const Icon = props => {