@flozy/editor 1.6.6 → 1.6.7

package/dist/Editor/Styles/EditorStyles.js

@@ -9,6 +9,7 @@ const editorStyles = ({
     justifyContent: "center"
   },
   slateWrapper: {
+    paddingTop: "0px",
     height: `${window.innerHeight - padHeight}px`,
     width: "100%",
     overflowY: "auto",
@@ -17,7 +18,6 @@ const editorStyles = ({
     flexDirection: "column",
     alignItems: "center",
     "& .max-content": {
-      maxWidth: "1280px",
       width: "100%",
       display: "flex",
       flex: 1,
@@ -30,7 +30,7 @@ const editorStyles = ({
       flex: 1
     },
     "& .editor-wrapper": {
-      maxWidth: "90%",
+      maxWidth: "1440px",
       height: "100%",
       backgroundColor: "#FFF",
       overflow: "visible"

package/dist/Editor/Toolbar/Mini/Styles.js

@@ -5,16 +5,18 @@ const miniToolbarStyles = () => ({
     justifyContent: "center",
     alignItems: "center",
     position: "absolute",
-    bottom: "-25px",
+    bottom: "-15px",
     left: 0,
     right: 0,
     margin: "auto",
     border: "1px solid #D8DDE1",
     borderRadius: "22px",
-    width: "200px",
+    width: "fit-content",
     height: "37px",
     zIndex: 1000,
     background: "#FFF",
+    boxShadow: "1px 2px 15px rgba(37, 99, 235, 0.25)",
+    padding: "0px 8px",
     "& button": {
       "& svg": {
         stroke: "#64748B"

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

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Button, ButtonGroup, Grid, Popover, Typography } from "@mui/material";
+import { Button, ButtonGroup, Grid, Typography } from "@mui/material";
 import WidthFullIcon from "@mui/icons-material/WidthFull";
 import WidthNormalIcon from "@mui/icons-material/WidthNormal";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";

package/dist/Editor/Toolbar/Toolbar.js

@@ -167,7 +167,8 @@ export const RenderToolbarIcon = props => {
       case "app-header":
         return /*#__PURE__*/_jsx(AppHeaderButton, {
           editor: editor,
-          customProps: customProps
+          customProps: customProps,
+          icoBtnType: icoBtnType
         }, element.id);
       case "form":
         return /*#__PURE__*/_jsx(FormButton, {

package/dist/Editor/Toolbar/toolbarGroups.js

@@ -210,7 +210,8 @@ export const toolbarGroups = [[{
 }, {
   id: 37,
   format: "appHeader",
-  type: "app-header"
+  type: "app-header",
+  group: "elements"
 }, {
   id: 38,
   format: "form",

package/dist/Editor/common/Icon.js

@@ -7,7 +7,7 @@ import { AiFillEdit, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutline
 import { SiLatex } from "react-icons/si";
 import { RiDeleteColumn, RiDeleteRow } from "react-icons/ri";
 import { IoIosImage, IoIosLink, IoMdArrowDroprightCircle, IoMdArrowDropdownCircle } 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 { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal } from "./iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 const iconList = {
   fontFamily: /*#__PURE__*/_jsx(FontFamilyIcon, {
@@ -77,7 +77,7 @@ const iconList = {
     fill: "#64748B"
   }),
   // link: <MdInsertLink size={20} />,
-  link: /*#__PURE__*/_jsx(IoIosLink, {
+  link: /*#__PURE__*/_jsx(LinkIcon, {
     size: 20
   }),
   // image: <MdImage size={20} />,
@@ -181,7 +181,9 @@ const iconList = {
   }),
   accordionArrowDown: /*#__PURE__*/_jsx(IoMdArrowDropdownCircle, {
     size: 20
-  })
+  }),
+  appHeader: /*#__PURE__*/_jsx(AppHeader, {}),
+  moreHorizantal: /*#__PURE__*/_jsx(MoreHorizontal, {})
 };
 const Icon = props => {
   const {

package/dist/Editor/common/ImageSelector/ImageSelector.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { Button, Grid, Tab, Tabs, Dialog, DialogContent, DialogActions, DialogTitle, Typography } from "@mui/material";
 import Upload from "./Options/Upload";
 import ChooseAssets from "./Options/ChooseAssets";

package/dist/Editor/common/MentionsPopup/Styles.js

@@ -3,9 +3,10 @@ const usePopupStyles = () => ({
     position: "absolute",
     zIndex: 1000,
     background: "white",
-    borderRadius: "0px",
+    borderRadius: "10px",
     padding: "0px",
-    boxShadow: "0 4px 10px rgba(0,0,0,.2)"
+    boxShadow: "0 4px 10px rgba(0,0,0,.2)",
+    overflow: "hidden"
   },
   papper: {
     boxShadow: "none",
@@ -13,7 +14,8 @@ const usePopupStyles = () => ({
     height: "300px",
     overflow: "auto",
     padding: "8px",
-    margin: "0px"
+    margin: "0px",
+    borderRadius: "10px"
   },
   groupHeader: {
     padding: "10px 8px",
@@ -26,6 +28,7 @@ const usePopupStyles = () => ({
     padding: "4px",
     cursor: "pointer",
     background: "transparent",
+    borderRadius: "10px",
     "&.active": {
       background: "rgba(55, 53, 47, 0.08)"
     },

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

@@ -28,6 +28,35 @@ const gridItemStyle = [{
     key: "borderColorHover",
     type: "color"
   }]
+}, {
+  tab: "Animation",
+  value: "animation",
+  fields: [{
+    label: "Choose Animation",
+    key: "animation",
+    type: "textOptions",
+    options: [{
+      text: "No Animation",
+      value: "No Animation"
+    }, {
+      text: "Fade In",
+      value: "animate__animated animate__fadeIn"
+    }, {
+      text: "Zoom In",
+      value: "animate__animated animate__zoomIn"
+    }, {
+      text: "Bounce In Left",
+      value: "animate__animated animate__bounceInLeft"
+    }],
+    renderOption: option => {
+      return /*#__PURE__*/_jsx("span", {
+        style: {
+          fontFamily: option.value
+        },
+        children: option.text
+      });
+    }
+  }]
 }, {
   tab: "Position",
   value: "position",

package/dist/Editor/common/iconslist.js

@@ -1451,4 +1451,70 @@ export const FileUploadIcon = () => {
       strokeLinejoin: "round"
     })]
   });
-};
+};
+export const RestRight = () => /*#__PURE__*/_jsxs("svg", {
+  width: "20",
+  height: "16",
+  viewBox: "0 0 22 23",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M13.6474 5.31C12.8499 5.07167 11.9699 4.91583 10.9983 4.91583C6.60745 4.91583 3.05078 8.4725 3.05078 12.8633C3.05078 17.2633 6.60745 20.82 10.9983 20.82C15.3891 20.82 18.9458 17.2633 18.9458 12.8725C18.9458 11.2408 18.4508 9.71917 17.6074 8.45417",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M14.7859 5.53L12.1367 2.48666",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M14.7845 5.53L11.6953 7.785",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })]
+});
+export const MoreHorizontal = ({
+  width = "22",
+  height = "22"
+}) => /*#__PURE__*/_jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: width,
+  height: height,
+  viewBox: "0 0 22 22",
+  fill: "none",
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M4.58333 9.16797C3.575 9.16797 2.75 9.99297 2.75 11.0013C2.75 12.0096 3.575 12.8346 4.58333 12.8346C5.59167 12.8346 6.41667 12.0096 6.41667 11.0013C6.41667 9.99297 5.59167 9.16797 4.58333 9.16797Z",
+    fill: "#64748B"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M17.4168 9.16797C16.4085 9.16797 15.5835 9.99297 15.5835 11.0013C15.5835 12.0096 16.4085 12.8346 17.4168 12.8346C18.4252 12.8346 19.2502 12.0096 19.2502 11.0013C19.2502 9.99297 18.4252 9.16797 17.4168 9.16797Z",
+    fill: "#64748B"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M10.9998 9.16797C9.9915 9.16797 9.1665 9.99297 9.1665 11.0013C9.1665 12.0096 9.9915 12.8346 10.9998 12.8346C12.0082 12.8346 12.8332 12.0096 12.8332 11.0013C12.8332 9.99297 12.0082 9.16797 10.9998 9.16797Z",
+    fill: "#64748B"
+  })]
+});
+export const PlusIcon = props => /*#__PURE__*/_jsxs("svg", {
+  width: "12",
+  height: "12",
+  viewBox: "0 0 12 12",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M6 1.33331V10.6666",
+    stroke: "#2563EB",
+    strokeWidth: "1.4",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M1.33203 6H10.6654",
+    stroke: "#2563EB",
+    strokeWidth: "1.4",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })]
+});

package/dist/Editor/hooks/useMentions.js

@@ -5,10 +5,6 @@ const TYPES = {
   "@": "mentions",
   "/": "elements"
 };
-const SHORTHAND_MATCHES = {
-  mentions: new RegExp(/^@(\w+)$/),
-  elements: new RegExp(/^\/(\w+)$/)
-};
 const getStartEnd = ({
   selection,
   editor
@@ -59,28 +55,6 @@ const getStartEnd = ({
     };
   }
 };
-const getRegexCategories = beforeText => {
-  try {
-    if (beforeText) {
-      if (beforeText.match(SHORTHAND_MATCHES.mentions)) {
-        return {
-          type: "mentions",
-          beforeMatch: beforeText.match(SHORTHAND_MATCHES.mentions)
-        };
-      } else if (beforeText.match(SHORTHAND_MATCHES.elements)) {
-        return {
-          type: "elements",
-          beforeMatch: beforeText.match(SHORTHAND_MATCHES.elements)
-        };
-      }
-    } else {
-      return null;
-    }
-  } catch (err) {
-    console.log(err);
-    return null;
-  }
-};
 const useMentions = props => {
   const {
     editor,

package/dist/Editor/utils/embed.js

@@ -28,14 +28,18 @@ export const createEmbedNode = (type, {
   }
 });
 export const insertEmbed = (editor, embedData, format) => {
-  const {
-    url,
-    images
-  } = embedData;
-  if (!url && images.length === 0) return;
-  const embed = createEmbedNode(format, embedData);
-  Transforms.insertNodes(editor, embed, {
-    at: editor.selection.anchor.path
-  });
-  insertNewLine(editor);
+  try {
+    const {
+      url,
+      images
+    } = embedData;
+    if (!url && images.length === 0) return;
+    const embed = createEmbedNode(format, embedData);
+    Transforms.insertNodes(editor, embed, {
+      at: editor.selection.anchor.path
+    });
+    insertNewLine(editor);
+  } catch (err) {
+    console.log(err);
+  }
 };

package/dist/Editor/utils/emoji.js

@@ -1,6 +1,5 @@
 import { Transforms } from "slate";
 export const insertEmoji = (editor, emoji, position) => {
-  console.log(editor.selection);
   Transforms.insertText(editor, emoji, {
     at: position,
     select: true

package/dist/Editor/utils/form.js

@@ -17,6 +17,7 @@ export const insertForm = (editor, item) => {
         bottom: 12
       }
     },
+    workflow: [],
     children: [{
       ...formField()
     }]

package/dist/Editor/utils/insertAppHeader.js

@@ -2,19 +2,73 @@ import { Editor, Transforms, Path, Range, Element } from "slate";
 export const createAppHeaderNode = ({
   menus
 }) => ({
-  type: "app-header",
-  appTitle: "Title",
-  appLogo: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/1200px-Netflix_2015_logo.svg.png",
-  menus: !menus ? [{
-    type: "menu",
-    url: "https://www.google.com",
-    target: "_blank",
-    text: "Google"
-  }] : menus,
-  menuStyle: "stacked",
+  type: "grid",
+  grid: "container",
   children: [{
-    text: ""
-  }]
+    type: "grid-item",
+    grid: 12,
+    children: [{
+      type: "app-header",
+      appTitle: "Logo",
+      appLogo: "none",
+      menus: menus || [{
+        type: "menu",
+        url: "/",
+        target: "_blank",
+        text: "Home"
+      }, {
+        type: "menu",
+        url: "/wireframe2",
+        target: "_blank",
+        text: "Wireframe"
+      }, {
+        type: "menu",
+        url: "https://www.google.com",
+        target: "_blank",
+        text: "Work"
+      }, {
+        type: "menu",
+        url: "https://www.google.com",
+        target: "_blank",
+        text: "Contact"
+      }],
+      menuStyle: "stacked",
+      children: [{
+        text: " "
+      }],
+      logoFontSize: "32px",
+      titleFontFamily: "PoppinsBold",
+      bgColor: "rgb(255, 255, 255, 0)",
+      borderColor: "rgba(255, 255, 255, 0)",
+      textColor: "rgb(0, 0, 0)",
+      cellBgColor: "#FFFFFF"
+    }],
+    bgColor: "rgba(255, 255, 255, 0)",
+    lockSpacing: true,
+    bannerSpacing: {
+      top: "8",
+      left: "8",
+      right: "8",
+      bottom: "8"
+    },
+    alignment: {
+      horizantal: "center"
+    }
+  }],
+  alignment: {
+    flexDirection: "column"
+  },
+  lockSpacing: true,
+  bannerSpacing: {
+    top: "8",
+    left: "8",
+    right: "8",
+    bottom: "8"
+  },
+  size: {
+    widthInPercent: 100
+  },
+  bgColor: "rgba(255, 255, 255, 1)"
 });
 export const insertAppHeader = (editor, props) => {
   try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "1.6.6",
+  "version": "1.6.7",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -22,6 +22,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "animate.css": "^4.1.1",
     "emoji-mart": "^5.5.2",
     "html2canvas": "^1.4.1",
     "husky": "^8.0.3",