@flozy/editor 1.9.1 → 1.9.2

package/dist/Editor/Editor.css

@@ -1,3 +1,11 @@
+.editor-wrapper {
+  font-family: "Inter", sans-serif;
+  color: #0f172a;
+  line-height: 1.43;
+  font-weight: 400;
+  letter-spacing: 0.01071em;
+}
+
 .editor-t-wrapper {
   font-family: "PoppinsRegular", "Helvetica", "Arial", sans-serif;
   position: relative;

package/dist/Editor/Elements/Divider/Divider.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Divider = props => {
+  const {
+    attributes,
+    children
+  } = props;
+  return /*#__PURE__*/_jsxs("div", {
+    ...attributes,
+    className: "dividerComponent",
+    contentEditable: "false",
+    style: {
+      userSelect: "none"
+    },
+    children: [/*#__PURE__*/_jsx("hr", {
+      contentEditable: "false",
+      className: "editorDivider",
+      style: {
+        userSelect: "none"
+      }
+    }), /*#__PURE__*/_jsx("span", {
+      style: {
+        display: "none"
+      },
+      children: children
+    })]
+  });
+};
+export default Divider;

package/dist/Editor/Elements/Divider/DividerButton.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { insertDivider } from "../../utils/divider";
+import ToolbarIcon from "../../common/ToolbarIcon";
+import Icon from "../../common/Icon";
+import { jsx as _jsx } from "react/jsx-runtime";
+const DividerButton = props => {
+  const {
+    editor,
+    icoBtnType
+  } = props;
+  const handleClick = () => {
+    insertDivider(editor);
+  };
+  return /*#__PURE__*/_jsx(ToolbarIcon, {
+    title: "Divider",
+    onClick: handleClick,
+    icon: /*#__PURE__*/_jsx(Icon, {
+      icon: "divider"
+    }),
+    icoBtnType: icoBtnType
+  });
+};
+export default DividerButton;

package/dist/Editor/Elements/Embed/Embed.css

@@ -6,7 +6,7 @@
 
 .embed img {
   width: 100%;
-  height: 100%
+  height: auto
 }
 .embed iframe {
   width: 100%;
@@ -83,3 +83,8 @@
 .link-embed-wrapper-hover-container:hover .link-embed-wrapper {
   padding-top: 24px;
 }
+
+.editorDivider {
+  border-width: 1px 0 0;
+  border-color: rgba(55, 53, 47, .1607843137254902);
+}

package/dist/Editor/Elements/Embed/Image.js

@@ -25,7 +25,8 @@ const Image = ({
     bgColor,
     borderColor,
     borderRadius,
-    boxShadow
+    boxShadow,
+    width: oldWidth
   } = element;
   const {
     readOnly
@@ -39,14 +40,26 @@ const Image = ({
   const {
     vertical,
     horizantal
-  } = alignment || {};
+  } = typeof alignment === "object" ? alignment : {
+    horizantal: alignment,
+    vertical: "center"
+  };
   const editor = useSlateStatic();
   const [parentDOM, setParentDOM] = useState(null);
   const [openSetttings, setOpenSettings] = useState(false);
   const path = ReactEditor.findPath(editor, element);
+  const getSize = () => {
+    if (element?.size === undefined) {
+      return {
+        widthInPercent: parseInt(oldWidth)
+      };
+    } else {
+      return element?.size || {};
+    }
+  };
   const [size, onMouseDown, resizing, onLoad] = useResize({
     parentDOM,
-    size: element?.size,
+    size: getSize(),
     onChange: uSize => {
       Transforms.setNodes(editor, {
         size: uSize
@@ -65,7 +78,7 @@ const Image = ({
     if (editor && ele && ele[1] !== undefined) {
       const dom = ReactEditor.toDOMNode(editor, element);
       setParentDOM(dom);
-      onLoad(element?.size || {});
+      onLoad(getSize());
     }
   }, []);
   const handleImageClick = () => {

package/dist/Editor/Styles/EditorStyles.js

@@ -97,7 +97,6 @@ const editorStyles = ({
       justifyContent: "center",
       alignItems: "center",
       position: "relative",
-      padding: "0px 12px",
       "&:hover": {
         "& .ed-section-inner": {
           "& .element-toolbar.ss": {

package/dist/Editor/Toolbar/Toolbar.js

@@ -29,6 +29,7 @@ import "./styles.css";
 import TopBannerButton from "../Elements/TopBanner/TopBannerButton.js";
 import AttachmentsButton from "../Elements/Attachments/AttachmentsButton";
 import ColorboxButton from "../Elements/Colorbox/ColorboxButton.js";
+import DividerButton from "../Elements/Divider/DividerButton.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export const RenderToolbarIcon = props => {
@@ -199,6 +200,12 @@ export const RenderToolbarIcon = props => {
           customProps: customProps,
           icoBtnType: icoBtnType
         }, element.id);
+      case "divider":
+        return /*#__PURE__*/_jsx(DividerButton, {
+          editor: editor,
+          customProps: customProps,
+          icoBtnType: icoBtnType
+        }, element.id);
       default:
         return null;
     }

package/dist/Editor/Toolbar/toolbarGroups.js

@@ -180,6 +180,11 @@ export const toolbarGroups = [[{
   id: 42,
   type: "table",
   group: "elements"
+}, {
+  id: 48,
+  format: "divider",
+  type: "divider",
+  group: "elements"
 }], [{
   id: 28,
   format: "grid",

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, IoMdArrowDroprightCircle, IoMdArrowDropdownCircle } from "react-icons/io";
-import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal, UploadImage, DocsUpload, LeftArrow, RightArrow, CheckListButton, CheckListButtonActive, ExcelIcon, CsvIcon } from "./iconslist";
+import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal, UploadImage, DocsUpload, LeftArrow, RightArrow, CheckListButton, CheckListButtonActive, ExcelIcon, CsvIcon, DividerIcon } from "./iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const iconList = {
@@ -195,7 +195,8 @@ const iconList = {
   checkListButton: /*#__PURE__*/_jsx(CheckListButton, {}),
   checkListButtonActive: /*#__PURE__*/_jsx(CheckListButtonActive, {}),
   excelIcon: /*#__PURE__*/_jsx(ExcelIcon, {}),
-  csvIcon: /*#__PURE__*/_jsx(CsvIcon, {})
+  csvIcon: /*#__PURE__*/_jsx(CsvIcon, {}),
+  divider: /*#__PURE__*/_jsx(DividerIcon, {})
 };
 const Icon = props => {
   const {

package/dist/Editor/common/Shorthands/elements.js

@@ -9,6 +9,8 @@ import { toggleBlock } from "../../utils/SlateUtilityFunctions";
 import { TableUtil } from "../../utils/table";
 import Icon from "../Icon";
 import EmojiButton from "../../Elements/Emoji/EmojiButton";
+import DividerButton from "../../Elements/Divider/DividerButton";
+import { insertDivider } from "../../utils/divider";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ELEMENTS_LIST = [{
   name: "Heading 1",
@@ -134,6 +136,17 @@ const ELEMENTS_LIST = [{
     const table = new TableUtil(editor);
     table.insertTable(3, 3);
   }
+}, {
+  name: "Divider",
+  group: "Elements",
+  desc: "",
+  type: "divider",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "divider"
+  }),
+  onInsert: editor => {
+    insertDivider(editor);
+  }
 }, {
   name: "Grid",
   group: "Elements",

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -38,6 +38,7 @@ import Attachments from "../Elements/Attachments/Attachments";
 import { getBreakPointsValue } from "../helper/theme";
 import Variables from "../Elements/Variables/Variable";
 import insertNewLine from "./insertNewLine";
+import Divider from "../Elements/Divider/Divider";
 import { jsx as _jsx } from "react/jsx-runtime";
 const alignment = ["alignLeft", "alignRight", "alignCenter"];
 const list_types = ["orderedList", "unorderedList"];
@@ -507,6 +508,10 @@ export const getBlock = props => {
         },
         children: children
       });
+    case "divider":
+      return /*#__PURE__*/_jsx(Divider, {
+        ...props
+      });
     default:
       return /*#__PURE__*/_jsx(SimpleText, {
         ...props,

package/dist/Editor/utils/divider.js

@@ -0,0 +1,12 @@
+import { Transforms } from "slate";
+import insertNewLine from "./insertNewLine";
+export const insertDivider = editor => {
+  const divider = {
+    type: "divider",
+    children: [{
+      text: ""
+    }]
+  };
+  Transforms.insertNodes(editor, divider);
+  insertNewLine(editor);
+};

package/package.json

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