@flozy/editor 1.5.9 → 1.6.1

package/dist/Editor/Editor.css

@@ -1,26 +1,32 @@
 .editor-t-wrapper {
   font-family: "PoppinsRegular", "Helvetica", "Arial", sans-serif;
+  position: relative;
 }
+
 .editor-t-wrapper strong,
 .editor-t-wrapper strong * {
   font-family: "PoppinsBold", "Helvetica", "Arial", sans-serif;
 }
+
 .ml-1 {
   margin-left: 10px;
 }
+
 .dflex {
   display: flex;
 }
+
 .alignCenter {
   align-items: center;
 }
+
 blockquote {
-  border-left: 2px solid #ddd;
+  border-left: 3px solid transparent;
   margin-left: 0;
   margin-right: 0;
   padding-left: 10px;
-  color: #aaa;
-  font-style: italic;
+  color: #000;
+  margin: 0px;
 }
 
 .editor-wrapper table,
@@ -28,19 +34,21 @@ blockquote {
 .editor-wrapper td {
   border: 1px solid black;
 }
+
 .editor-wrapper table {
   border-collapse: collapse;
 }
+
 .editor-wrapper .editor-wrapperbutton {
   background-color: white;
   border: none;
 }
+
 .editor-wrapper .btnActive {
   opacity: 1;
 }
 
 .editor-wrapper {
-
   background: #ffffff;
   min-height: 400px;
   height: fit-content;
@@ -52,14 +60,12 @@ blockquote {
 .editor-wrapper table {
   /* width:100%; */
 }
-.editor-wrapper td {
-  height: 50px;
-  padding: 0 5px;
-}
+
 .popup-wrapper1 {
   display: inline;
   position: relative;
 }
+
 .af-popup {
   position: fixed;
   left: 0;
@@ -75,16 +81,20 @@ blockquote {
   z-index: 999;
   width: 300px;
 }
+
 .editor-wrapper button {
   cursor: pointer;
 }
+
 .editor-wrapper code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
 .editor-wrapper html {
   scroll-behavior: smooth;
 }
+
 .editor-wrapper *:focus-visible {
   outline: none;
 }
@@ -110,11 +120,15 @@ blockquote {
 }
 
 .grid-container-toolbar {
-  right: -40px;
+  right: -32px;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  height: fit-content;
 }
 
 .grid-item-toolbar {
-  left: -40px;
+  left: 0px;
 }
 
 .element-toolbar {
@@ -124,30 +138,28 @@ blockquote {
   z-index: 1000;
 }
 
-.element-toolbar button:first-child {
-  margin-right: 2px;
-}
-
 .grid-container-toolbar button,
 .grid-item-toolbar button,
 .element-toolbar button {
   border-radius: 10px;
-border: 1px solid rgba(37, 99, 235, 0.32);
-background: #FFF;
-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
-
-  /* background-color: #2684ff; */
-  /* color: #FFFFFF; */
+  border: 1px solid rgba(37, 99, 235, 0.32);
+  background: #fff;
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
   font-size: 12px;
   margin-bottom: 2px;
-  width: 36px;
-  height: 36px;
   padding: 6px;
 }
+.element-toolbar button svg,
+.grid-container-toolbar button svg,
+.grid-item-toolbar button svg {
+  width: 16px;
+  height: 16px;
+}
+
 .grid-container-toolbar button:hover,
 .grid-item-toolbar button:hover,
 .element-toolbar button:hover {
-  background-color: #FFFFFF;
+  background-color: #ffffff;
   color: #2684ff;
   border: 1px solid #2684ff;
 }
@@ -205,21 +217,25 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
   padding: 8px 12px;
   color: #ffffff;
   font-weight: bold;
-  border-radius: 12px;
   opacity: 1;
 }
 
+.signature-btn-container button:hover {
+  background-color: #0052cc;
+}
+
 .signature-btn-grps {
   display: flex;
   justify-content: space-around;
 }
+
 .signature-btn-grps svg {
   height: 17px !important;
   width: 17px !important;
 }
 
 .close-popupbtn {
-  background-color: #F8FAFC !important;
+  background-color: #f8fafc !important;
   border-radius: 4px !important;
   width: 24px;
   height: 24px;
@@ -249,16 +265,23 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
   position: relative;
   display: flex;
 }
+
 .signature-signed-span {
   position: relative;
 }
+
 .signature-signed-wrapper .signed-btn-del {
   position: absolute;
-  right: -20px;
-  top: -20px;
+  right: 0px;
+  top: 0px;
   opacity: 1;
   z-index: 1;
+  display: none;
 }
+.signature-signed-wrapper:hover .signed-btn-del {
+  display: block;
+}
+
 .signed-btn {
   text-align: center;
   opacity: 1;
@@ -278,9 +301,11 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
   color: #0f172a;
   box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.08);
 }
+
 .typesignature-fontfamily .MuiButtonBase-root.active {
   border: 1px solid #0052cc;
 }
+
 .typesignature-input-wrapper .MuiInputAdornment-root .MuiButtonBase-root {
   background-color: #e9ebf8 !important;
   border-radius: 4px !important;
@@ -288,6 +313,7 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
   height: 24px;
   padding: 2px;
 }
+
 .typesignature-input-wrapper .MuiInputAdornment-root svg {
   width: 100%;
   height: 100%;
@@ -304,6 +330,7 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
   display: flex !important;
   align-items: center;
 }
+
 .react-datepicker__input-container input {
   height: 27px;
   border: 1px solid #ccc;
@@ -313,9 +340,11 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
 
 .brushcolorpic {
 }
+
 .sizeIcons .MuiButtonBase-root {
   opacity: 1;
 }
+
 .sizeIcons .MuiButtonBase-root.active .MuiSvgIcon-root {
   fill: #0052cc;
 }
@@ -361,13 +390,18 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
   display: flex;
   flex-direction: column;
   overflow-x: auto;
+  border: 1px solid rgba(37, 99, 235, 0.32);
 }
-.empty-carousel-wrapper > div {
+
+.empty-carousel-wrapper .carousel-item {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
-  border: 1px solid #000;
+  border-bottom: 1px solid rgba(37, 99, 235, 0.32);
+  margin: 12px;
+  padding-bottom: 24px;
 }
+
 .empty-carousel-wrapper .carousel-item-inner {
   width: 100%;
 }
@@ -392,6 +426,7 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
   border: 1px solid #2563eb !important;
   width: auto !important;
 }
+
 .MuiButton-root.secondaryBtn {
   background: #ffffff;
   border: 1px solid #2563eb !important;
@@ -404,6 +439,7 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
   color: #2563eb;
   width: auto !important;
 }
+
 .deleteBtn {
   background: #ffffff;
   border: 1px solid #d32f2f !important;
@@ -416,48 +452,61 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
   color: #d32f2f;
   width: auto !important;
 }
+
 @media (max-width: 480px) {
   body {
     padding: 0px !important;
   }
+
   .app-logo {
     justify-content: end;
   }
+
   .editor-t-wrapper {
     padding: 0px 0px !important;
   }
+
   .toolbar {
     display: flex;
     flex-wrap: nowrap;
     overflow-x: scroll;
   }
+
   .toolbar-grp1,
   .toolbar-grp1 > div {
     display: flex;
   }
+
   .grid-container > div {
     flex-direction: column !important;
   }
+
   .grid-item {
     width: 100% !important;
   }
+
   .grid-item > div {
     text-align: center;
   }
+
   .page-builder .editor-wrapper {
     max-width: 100% !important;
     margin-top: 0px !important;
     padding: 0px !important;
   }
+
   .embed {
     justify-content: center;
   }
+
   .embed img {
     object-fit: contain;
   }
+
   form .form-field {
     width: 100% !important;
   }
+
   .form-btn-wrpr {
     justify-content: center !important;
   }
@@ -481,6 +530,7 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
 .editorTabs .MuiTabScrollButton-horizontal.Mui-disabled {
   display: none;
 }
+
 .editorTabs .MuiTabs-scroller {
   border-bottom: 1px solid #8080801c;
 }
@@ -513,23 +563,78 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
   bottom: 2px;
   right: 2px;
 }
+
 .visible-on-hover {
   display: none !important;
 }
+
 .has-hover:hover .visible-on-hover {
   display: flex !important;
 }
 
-.page-builder .editor-wrapper {
-  max-width: 80%;
-  margin-top: 24px;
+.left-top-editor-wrapper,
+.left-bottom-editor-wrapper {
+  margin-top: 1%;
+  margin-left: 85px;
+  max-width: calc(100% - 85px) !important;
+}
+
+.right-top-editor-wrapper,
+.right-bottom-editor-wrapper {
+  margin-top: 1%;
+  margin-right: 85px;
+  max-width: calc(100% - 85px) !important;
+}
+
+.bottom-left-editor-wrapper,
+.bottom-right-editor-wrapper {
+  margin-top: 1%;
+}
+
+.editor-wrapper-toolbar-closed .left-top-toolbar-wrapper,
+.editor-wrapper-toolbar-closed .left-bottom-toolbar-wrapper {
+  left: 2%;
+  height: 100%;
+  width: fit-content;
+  transition: all 0.5s;
+}
+
+.editor-wrapper-toolbar-closed .right-top-toolbar-wrapper,
+.editor-wrapper-toolbar-closed .right-bottom-toolbar-wrapper {
+  right: 2% !important;
+  height: 100%;
+  width: 50px;
+  transition: all 0.5s;
+}
+
+.editor-wrapper-toolbar-closed .top-left-editor-wrapper-toolbar-closed,
+.editor-wrapper-toolbar-closed .top-right-editor-wrapper-toolbar-closed {
+  margin-top: 1% !important;
+  transition: all 0.5s;
+}
+
+.editor-wrapper-toolbar-closed .right-bottom-editor-wrapper-toolbar-closed,
+.editor-wrapper-toolbar-closed .right-top-editor-wrapper-toolbar-closed {
+  margin-top: 10px !important;
+  max-width: calc(100% - 0px) !important;
+  margin-right: 3%;
+  transition: all 0.5s;
+  width: 100%;
+}
+
+.editor-wrapper-toolbar-closed .left-bottom-editor-wrapper-toolbar-closed,
+.editor-wrapper-toolbar-closed .left-top-editor-wrapper-toolbar-closed {
+  margin-top: 10px !important;
+  max-width: calc(100% - 120px);
+  margin-left: 2%;
+  transition: all 0.5s;
 }
 
 .element-root .element-selector {
   position: absolute;
   width: calc(100%);
   height: calc(100%);
-  border: 2px solid #2563EB;
+  border: 2px solid #2563eb;
   display: none;
   pointer-events: none;
   top: 0px;
@@ -541,29 +646,61 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
   position: absolute;
   width: 10px;
   height: 10px;
-  border: 2px solid #2563EB;
-  background-color: #2563EB;
+  border: 2px solid #2563eb;
+  background-color: #2563eb;
 }
 
 .element-selector-dots.tl {
   left: -5px;
   top: -5px;
-  border: 2px solid #2563EB;
+  border: 2px solid #2563eb;
 }
+
 .element-selector-dots.tr {
   right: -5px;
   top: -5px;
-  border: 2px solid #2563EB;
+  border: 2px solid #2563eb;
 }
+
 .element-selector-dots.bl {
   left: -5px;
   bottom: -5px;
-  border: 2px solid #2563EB;
+  border: 2px solid #2563eb;
 }
+
 .element-selector-dots.br {
   right: -5px;
   bottom: -5px;
-  border: 2px solid #2563EB;
+  border: 2px solid #2563eb;
+}
+
+.element-selector-ctrl.tc {
+  position: absolute;
+  right: 0;
+  left: 0;
+  top: -15px;
+  margin: auto;
+  width: 24px;
+  height: 24px;
+}
+
+.element-selector-ctrl.bc {
+  position: absolute;
+  right: 0;
+  left: 0;
+  bottom: -15px;
+  margin: auto;
+  width: 24px;
+  height: 24px;
+}
+
+.element-selector-ctrl button,
+.element-selector-ctrl button:hover {
+  width: 24px;
+  height: 24px;
+  border: 1px solid rgba(37, 99, 235, 0.32);
+  background: #fff;
+  z-index: 100;
 }
 
 .element-selector.selected {
@@ -571,7 +708,7 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
 }
 
 .element-toolbar button {
-  margin-right: 0px;
+  margin-right: 4px;
 }
 
 .empty-carousel-wrapper .element-selector {
@@ -589,6 +726,7 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
 .drag-overlay .element-selector {
   display: none;
 }
+
 .drop-overlay {
   position: absolute;
   pointer-events: none;
@@ -597,9 +735,11 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
   background-color: transparent;
   transition: all 1s;
 }
+
 .dragging.drop-overlay {
   pointer-events: auto;
 }
+
 .drop-overlay.active {
   position: relative;
   background-color: #2684ff;
@@ -610,7 +750,7 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
 }
 
 .optionePopupHeader {
-  border-bottom: 1px solid #DCE4EC;
+  border-bottom: 1px solid #dce4ec;
 }
 
 .dialogComp .MuiInputBase-input {
@@ -619,43 +759,51 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
   font-size: 12px;
   font-weight: 500;
 }
-.dialogComp  .MuiOutlinedInput-notchedOutline {
-  border: 1px solid #ECECEC;
+
+.dialogComp .MuiOutlinedInput-notchedOutline {
+  border: 1px solid #ececec;
 }
+
 .iconRadioButton .MuiRadio-root {
   visibility: hidden;
   width: 0px;
   padding: 6px;
 }
+
 .iconRadioButton .MuiTypography-root {
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
-  justify-content: center
+  justify-content: center;
 }
 
 .iconRadioButton .MuiFormControlLabel-root.active .fillPath {
   fill: #2684ff;
 }
+
 .iconRadioButton .MuiFormControlLabel-root.active .fillStroke {
   stroke: #2684ff;
 }
+
 .iconRadioButton .Mui-checked ~ .MuiTypography-root .fillStroke {
   stroke: #2684ff;
 }
+
 .selctedBtnIcon {
-  border: 1px solid #ECECEC;
+  border: 1px solid #ececec;
   border-radius: 4px;
   height: 35px;
   width: 35px;
   display: flex;
   align-items: center;
-  justify-content: center
+  justify-content: center;
 }
+
 .borderInput {
   text-align: center;
 }
+
 .borderInput:focus-visible {
   outline: none !important;
 }
@@ -666,16 +814,20 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
   left: 50%;
   top: 50%;
 }
-.uploadImageSection  .removeImageText {
+
+.uploadImageSection .removeImageText {
   visibility: hidden;
   opacity: 0;
   transition: all 0.5s;
 }
-.uploadImageSection:hover  .removeImageText {
+
+.uploadImageSection:hover .removeImageText {
   visibility: visible;
   opacity: 1;
 }
-.uploadImageText, .removeImageText {
+
+.uploadImageText,
+.removeImageText {
   border: 2px dashed #fff;
   border-radius: 8px;
   color: #fff;
@@ -699,11 +851,20 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
   width: 12px;
   height: 12px;
 }
+
 .textFontArrows .MuiIconButton-root {
   padding: 2px;
 }
 
 .tools-drawer .MuiTypography-root {
   color: #000000;
-  font-weight: bold !important;
 }
+
+.img_upload_btn_list .btn--wrpr {
+  background-color: transparent !important;
+}
+
+/** to avoid line space **/
+.page-settings {
+  height: 0px;
+}

package/dist/Editor/Elements/Accordion/Accordion.js

@@ -3,7 +3,6 @@ import { Transforms } from "slate";
 import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
 import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
-import SettingsIcon from "@mui/icons-material/Settings";
 import AccordionBtnPopup from "./AccordionBtnPopup";
 import { IconButton, Tooltip } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";

package/dist/Editor/Elements/Accordion/AccordionButton.js

@@ -1,25 +1,26 @@
 import React from "react";
-import { IconButton, Tooltip } from "@mui/material";
 import { insertAccordion } from "../../utils/accordion";
-import { AccordionIcon } from "../../common/iconslist";
+import ToolbarIcon from "../../common/ToolbarIcon";
+import Icon from "../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 const AccordionButton = props => {
   const {
-    editor
+    editor,
+    icoBtnType
   } = props;
   const handleInsertAccordion = () => {
     insertAccordion(editor);
   };
-  return /*#__PURE__*/_jsx(Tooltip, {
+  return /*#__PURE__*/_jsx(ToolbarIcon, {
+    icon: /*#__PURE__*/_jsx(Icon, {
+      icon: "accordion"
+    }),
     title: "Accordion",
-    arrow: true,
-    children: /*#__PURE__*/_jsx(IconButton, {
-      onClick: handleInsertAccordion,
-      style: {
-        marginLeft: "0px"
-      },
-      children: /*#__PURE__*/_jsx(AccordionIcon, {})
-    })
+    onClick: handleInsertAccordion,
+    style: {
+      marginLeft: "0px"
+    },
+    icoBtnType: icoBtnType
   });
 };
 export default AccordionButton;

package/dist/Editor/Elements/Accordion/AccordionSummary.js

@@ -3,7 +3,6 @@ import { Transforms } from "slate";
 import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
 import AccordionTitlePopup from "./AccordionTitlePopup";
 import { IconButton, Tooltip } from "@mui/material";
-import SettingsIcon from "@mui/icons-material/Settings";
 import { GridSettingsIcon } from "../../common/iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";