@flozy/editor 1.3.7 → 1.4.1

package/dist/Editor/Elements/Grid/GridItem.js

@@ -3,7 +3,6 @@ import { Transforms } from "slate";
 import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
 import GridItemPopup from "./GridItemPopup";
 import { IconButton, Tooltip } from "@mui/material";
-import DeleteIcon from "@mui/icons-material/Delete";
 import SettingsIcon from "@mui/icons-material/Settings";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -32,35 +31,29 @@ const GridItem = props => {
   } = bannerSpacing || {};
   const {
     vertical,
-    horizantal
+    horizantal,
+    flexDirection
   } = alignment || {};
   const editor = useSlateStatic();
   const selected = useSelected();
   const itemWidth = (grid || 6) / 12 * 100;
   const path = ReactEditor.findPath(editor, element);
   const GridItemToolbar = () => {
-    return selected ? /*#__PURE__*/_jsxs("div", {
+    return selected ? /*#__PURE__*/_jsx("div", {
       contentEditable: false,
       className: "grid-item-toolbar",
       style: {
         top: "0px"
       },
-      children: [/*#__PURE__*/_jsx(Tooltip, {
-        title: "Grid Settings",
+      children: /*#__PURE__*/_jsx(Tooltip, {
+        title: "Grid Item Settings",
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
           size: "small",
           onClick: onSettings,
           children: /*#__PURE__*/_jsx(SettingsIcon, {})
         })
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Delete Grid",
-        arrow: true,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: onDelete,
-          children: /*#__PURE__*/_jsx(DeleteIcon, {})
-        })
-      })]
+      })
     }) : null;
   };
   const onSettings = () => {
@@ -70,6 +63,7 @@ const GridItem = props => {
     const updateData = {
       ...data
     };
+    console.log(updateData);
     delete updateData.children;
     Transforms.setNodes(editor, {
       ...updateData
@@ -93,7 +87,7 @@ const GridItem = props => {
     ...attributes,
     style: {
       display: "flex",
-      flexDirection: "column",
+      flexDirection: flexDirection || "column",
       backgroundColor: bgColor,
       alignItems: horizantal,
       justifyContent: vertical,
@@ -105,20 +99,23 @@ const GridItem = props => {
       contentEditable: false,
       children: /*#__PURE__*/_jsx(GridItemToolbar, {})
     }), /*#__PURE__*/_jsx("div", {
+      className: "gi-inner-cw",
       style: {
         display: "flex",
-        flexDirection: "column",
+        flexDirection: flexDirection || "column",
         width: "100%",
         paddingLeft: `${left}px`,
         paddingRight: `${right}px`,
         paddingTop: `${top}px`,
-        paddingBottom: `${bottom}px`
+        paddingBottom: `${bottom}px`,
+        justifyContent: vertical
       },
       children: children
     }), openSetttings ? /*#__PURE__*/_jsx(GridItemPopup, {
       element: element,
       onSave: onSave,
-      onClose: onClose
+      onClose: onClose,
+      onDelete: onDelete
     }) : null]
   });
 };

package/dist/Editor/Elements/Grid/GridItemPopup.js

@@ -6,7 +6,8 @@ const GridItemPopup = props => {
   const {
     element,
     onSave,
-    onClose
+    onClose,
+    onDelete
   } = props;
   return /*#__PURE__*/_jsx(StyleBuilder, {
     title: "Grid Item",
@@ -14,7 +15,8 @@ const GridItemPopup = props => {
     element: element,
     onSave: onSave,
     onClose: onClose,
-    renderTabs: gridItemStyle
+    renderTabs: gridItemStyle,
+    onDelete: onDelete
   });
 };
 export default GridItemPopup;

package/dist/Editor/Elements/Grid/GridPopup.js

@@ -7,6 +7,7 @@ const GridPopup = props => {
     element,
     onSave,
     onClose,
+    onDelete,
     customProps
   } = props;
   return /*#__PURE__*/_jsx(StyleBuilder, {
@@ -16,7 +17,8 @@ const GridPopup = props => {
     onSave: onSave,
     onClose: onClose,
     renderTabs: gridStyle,
-    customProps: customProps
+    customProps: customProps,
+    onDelete: onDelete
   });
 };
 export default GridPopup;

package/dist/Editor/Elements/Grid/templates/default_grid.js

@@ -0,0 +1,144 @@
+const default_grid = {
+  type: "grid",
+  grid: "container",
+  children: [{
+    type: "grid-item",
+    grid: 12,
+    children: [{
+      type: "alignCenter",
+      children: [{
+        type: "paragraph",
+        children: [{
+          text: "Ship Sites with Style.",
+          fontSize: "huge",
+          fontFamily: "PoppinsBold"
+        }]
+      }]
+    }],
+    bgColor: "rgba(255, 255, 255, 0)",
+    lockSpacing: true,
+    bannerSpacing: {
+      top: "16",
+      left: "16",
+      right: "16",
+      bottom: "16"
+    },
+    alignment: {
+      horizantal: "center"
+    }
+  }, {
+    type: "grid-item",
+    grid: 12,
+    children: [{
+      type: "alignCenter",
+      children: [{
+        type: "paragraph",
+        children: [{
+          text: "Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu. Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj softvérom ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum."
+        }]
+      }]
+    }],
+    bgColor: "rgba(255, 255, 255, 0)",
+    lockSpacing: true,
+    bannerSpacing: {
+      top: "16",
+      left: "16",
+      right: "16",
+      bottom: "16"
+    }
+  }, {
+    type: "grid-item",
+    grid: 12,
+    children: [{
+      type: "paragraph",
+      children: [{
+        text: ""
+      }]
+    }, {
+      type: "paragraph",
+      children: [{
+        text: ""
+      }]
+    }, {
+      type: "button",
+      children: [{
+        text: "     "
+      }],
+      buttonLink: {
+        linkType: "webAddress"
+      },
+      label: "Gettings Started",
+      bgColor: "rgba(192,192,192, 1)",
+      textColor: "rgba(0,0,0,1)",
+      lockSpacing: true,
+      bannerSpacing: {
+        top: "16",
+        left: "16",
+        right: "16",
+        bottom: "16"
+      },
+      lockRadius: true,
+      borderRadius: {
+        topLeft: "12",
+        topRight: "12",
+        bottomLeft: "12",
+        bottomRight: "12"
+      },
+      bgColorHover: "rgba(0, 0, 0, 1)",
+      textColorHover: "rgba(255, 255, 255, 1)",
+      borderColor: "rgba(175, 51, 242, 0)"
+    }, {
+      type: "button",
+      children: [{
+        text: ""
+      }],
+      buttonLink: {
+        linkType: "webAddress"
+      },
+      label: "Learn More",
+      bgColor: "rgba(192,192,192, 1)",
+      textColor: "rgba(0,0,0,1)",
+      lockSpacing: false,
+      bannerSpacing: {
+        top: "16",
+        left: "32",
+        right: "32",
+        bottom: "16"
+      },
+      lockRadius: true,
+      borderRadius: {
+        topLeft: "12",
+        topRight: "12",
+        bottomLeft: "12",
+        bottomRight: "12"
+      },
+      borderColor: "rgba(175, 51, 242, 0)",
+      bgColorHover: "rgba(0,0,0,1)",
+      textColorHover: "rgba(255,255,255, 1)"
+    }],
+    bgColor: "rgba(255, 255, 255, 0)",
+    alignment: {
+      flexDirection: "row",
+      vertical: "center",
+      horizantal: "center"
+    },
+    lockSpacing: true,
+    bannerSpacing: {
+      top: "16",
+      left: "16",
+      right: "16",
+      bottom: "16"
+    }
+  }],
+  alignment: {
+    flexDirection: "column"
+  },
+  lockSpacing: true,
+  bannerSpacing: {
+    top: "16",
+    left: "16",
+    right: "16",
+    bottom: "16"
+  }
+};
+export default JSON.stringify(default_grid);

package/dist/Editor/Elements/PageSettings/PageSettingsButton.js

@@ -54,6 +54,7 @@ const PageSettingsButton = props => {
       ...data
     };
     delete updateData.children;
+    console.log(openSetttings);
     if (openSetttings?.path) {
       Transforms.setNodes(editor, {
         pageProps: {
@@ -63,6 +64,7 @@ const PageSettingsButton = props => {
         at: openSetttings?.path
       });
     } else {
+      console.log(editor.children.length);
       Transforms.insertNodes(editor, [{
         type: "page-settings",
         pageProps: {
@@ -71,7 +73,9 @@ const PageSettingsButton = props => {
         children: [{
           text: ""
         }]
-      }]);
+      }], {
+        at: [editor.children.length]
+      });
     }
     onClose();
   };

package/dist/Editor/Toolbar/FormatTools/Autocomplete.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { Autocomplete, TextField } from "@mui/material";
+import { activeMark } from "../../utils/SlateUtilityFunctions.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const SelectFreeSolo = ({
+  editor,
+  format,
+  options
+}) => {
+  const value = activeMark(editor, format);
+  console.log(options);
+  const changeMarkData = (event, format) => {
+    event.preventDefault();
+    console.log(event.target.value, format);
+    // const value = event.target.value;
+    // addMarkData(editor, { format, value });
+  };
+
+  return /*#__PURE__*/_jsx(Autocomplete, {
+    size: "small",
+    style: {},
+    value: value?.value,
+    className: "editor-dd",
+    onChange: e => changeMarkData(e, format),
+    getOptionLabel: option => option.text,
+    options: options,
+    freeSolo: true,
+    renderInput: params => /*#__PURE__*/_jsx(TextField, {
+      ...params
+    })
+  });
+};
+export default SelectFreeSolo;

package/dist/Editor/Toolbar/FormatTools/Text.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { TextField } from "@mui/material";
+import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
+import { sizeMap } from "../../utils/font.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Text = ({
+  editor,
+  format,
+  options,
+  style = {}
+}) => {
+  const value = activeMark(editor, format);
+  const changeMarkData = (event, format) => {
+    event.preventDefault();
+    const value = event.target.value;
+    addMarkData(editor, {
+      format,
+      value
+    });
+  };
+  return /*#__PURE__*/_jsx(TextField, {
+    size: "small",
+    style: style,
+    value: sizeMap[value],
+    className: "editor-text",
+    onChange: e => changeMarkData(e, format)
+  });
+};
+export default Text;

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

@@ -1,4 +1,6 @@
 import BlockButton from "./BlockButton";
 import Dropdown from "./Dropdown";
 import MarkButton from "./MarkButton";
-export { BlockButton, Dropdown, MarkButton };
+import Autocomplete from "./Autocomplete";
+import Text from "./Text";
+export { BlockButton, Dropdown, MarkButton, Autocomplete, Text };

package/dist/Editor/Toolbar/Toolbar.js

@@ -20,8 +20,10 @@ import ButtonToolIcon from "../Elements/Button/ButtonToolIcon";
 import PageSettingsButton from "../Elements/PageSettings/PageSettingsButton";
 import CarouselButton from "../Elements/Carousel/CarouselButton";
 import AppHeaderButton from "../Elements/AppHeader/AppHeaderButton";
-import "./styles.css";
 import FormButton from "../Elements/Form/FormButton.js";
+import Text from "./FormatTools/Text";
+import ChipTextButton from "../Elements/ChipText/ChipTextButton";
+import "./styles.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Toolbar = props => {
@@ -65,6 +67,14 @@ const Toolbar = props => {
               ...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"),
@@ -128,14 +138,11 @@ const Toolbar = props => {
             return /*#__PURE__*/_jsx(CarouselButton, {
               editor: editor
             }, element.id);
-          // case "chip-text":
-          //   return (
-          //     <ChipTextButton
-          //       key={element.id}
-          //       editor={editor}
-          //       customProps={customProps}
-          //     />
-          //   );
+          case "chip-text":
+            return /*#__PURE__*/_jsx(ChipTextButton, {
+              editor: editor,
+              customProps: customProps
+            }, element.id);
           // case "drawer":
           //   return (
           //     <DrawerMenuButton

package/dist/Editor/assets/fonts/poppins/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Poppins Project Authors (https://github.com/itfoundry/Poppins)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

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

@@ -1,7 +1,14 @@
+import { fontOptions } from "../../utils/font";
+import { jsx as _jsx } from "react/jsx-runtime";
 const appHeaderStyle = [{
   tab: "Logo",
   value: "appLogo",
   fields: [{
+    label: "App Title",
+    key: "appTitle",
+    type: "text",
+    placeholder: "Leave Empty, If only Logo"
+  }, {
     label: "App Logo URL",
     key: "appLogo",
     type: "text"
@@ -11,12 +18,26 @@ const appHeaderStyle = [{
     type: "backgroundImage"
   }]
 }, {
-  tab: "Title",
-  value: "appTitle",
+  tab: "General",
+  value: "general",
   fields: [{
-    label: "App Title",
-    key: "appTitle",
-    type: "text"
+    label: "Menu Font Size",
+    key: "fontSize",
+    type: "text",
+    placeholder: "16px"
+  }, {
+    label: "Menu Font Family",
+    key: "fontFamily",
+    type: "textOptions",
+    options: fontOptions,
+    renderOption: option => {
+      return /*#__PURE__*/_jsx("span", {
+        style: {
+          fontFamily: option.value
+        },
+        children: option.text
+      });
+    }
   }]
 }, {
   tab: "Menus",
@@ -59,5 +80,22 @@ const appHeaderStyle = [{
     key: "borderColor",
     type: "color"
   }]
+}, {
+  tab: "Hover Colors",
+  value: "hoverColors",
+  fields: [{
+    label: "Text",
+    key: "textColorHover",
+    type: "color",
+    needPreview: true
+  }, {
+    label: "Background",
+    key: "bgColorHover",
+    type: "color"
+  }, {
+    label: "Border",
+    key: "borderColorHover",
+    type: "color"
+  }]
 }];
 export default appHeaderStyle;