@flozy/editor 1.1.1 → 1.1.4

package/dist/Editor/Elements/Table/TableSelector.js

@@ -1,9 +1,9 @@
-import React, { useEffect, useRef, useState } from 'react';
-import Icon from '../../common/Icon';
-import usePopup from '../../utils/customHooks/usePopup';
-import { Transforms } from 'slate';
-import { TableUtil } from '../../utils/table.js';
-import './TableSelector.css';
+import React, { useRef, useState } from "react";
+import { Grid, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, TextField } from "@mui/material";
+import Icon from "../../common/Icon";
+import { Transforms } from "slate";
+import { TableUtil } from "../../utils/table.js";
+import "./TableSelector.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const TableSelector = ({
@@ -11,91 +11,85 @@ const TableSelector = ({
 }) => {
   const tableOptionsRef = useRef();
   const [selection, setSelection] = useState();
-  const [showOptions, setShowOptions] = usePopup(tableOptionsRef);
+  const [showOptions, setShowOptions] = useState(false);
   const [tableData, setTableData] = useState({
-    row: 0,
-    column: 0
+    row: 2,
+    column: 2
   });
-  const [tableInput, setTableInput] = useState(Array.from({
-    length: 6
-  }, () => Array.from({
-    length: 6
-  }, (v, i) => ({
-    bg: 'lightGray',
-    column: i
-  }))));
-  useEffect(() => {
-    const newTable = Array.from({
-      length: 6
-    }, (obj, row) => Array.from({
-      length: 6
-    }, (v, col) => ({
-      bg: row + 1 <= tableData.row && col + 1 <= tableData.column ? 'orange' : 'lightgray',
-      column: col
-    })));
-    setTableInput(newTable);
-  }, [tableData]);
-  useEffect(() => {
-    if (!showOptions) {
-      setTableData({
-        row: 0,
-        column: 0
-      });
-    }
-  }, [showOptions]);
   const table = new TableUtil(editor);
   const handleButtonClick = () => {
     setSelection(editor.selection);
-    setShowOptions(prev => !prev);
+    setShowOptions(true);
   };
   const handleInsert = () => {
     selection && Transforms.select(editor, selection);
+    table.insertTable(tableData.row, tableData.column);
+    setShowOptions(false);
+  };
+  const handleChange = e => {
     setTableData({
-      row: -1,
-      column: -1
+      ...tableData,
+      [e.target.name]: e.target.value
     });
-    table.insertTable(tableData.row, tableData.column);
+  };
+  const onCancel = () => {
     setShowOptions(false);
   };
   return /*#__PURE__*/_jsxs("div", {
     ref: tableOptionsRef,
-    className: "popup-wrapper",
-    children: [/*#__PURE__*/_jsx("button", {
+    className: "popup-wrapper1",
+    children: [/*#__PURE__*/_jsx(IconButton, {
       style: {
-        border: showOptions ? '1px solid lightgray' : 'none'
+        border: showOptions ? "1px solid lightgray" : "none"
       },
       title: "table",
       onClick: handleButtonClick,
       children: /*#__PURE__*/_jsx(Icon, {
         icon: "table"
       })
-    }), showOptions && /*#__PURE__*/_jsxs("div", {
-      className: "popup",
-      children: [/*#__PURE__*/_jsx("span", {
-        style: {
-          fontSize: '0.85em'
-        },
-        children: /*#__PURE__*/_jsx("i", {
-          children: `Insert a ${tableData.row >= 1 ? `${tableData.row} x ${tableData.column}` : ''} table`
+    }), showOptions ? /*#__PURE__*/_jsxs(Dialog, {
+      open: showOptions,
+      children: [/*#__PURE__*/_jsx(DialogTitle, {
+        children: "Table"
+      }), /*#__PURE__*/_jsx(DialogContent, {
+        children: /*#__PURE__*/_jsxs(Grid, {
+          container: true,
+          padding: 3,
+          spacing: 2,
+          children: [/*#__PURE__*/_jsx(Grid, {
+            item: true,
+            xs: 12,
+            children: /*#__PURE__*/_jsx(TextField, {
+              fullWidth: true,
+              name: "row",
+              value: tableData?.row,
+              onChange: handleChange,
+              label: "No.of Rows",
+              placeholder: "No.of Rows"
+            })
+          }), /*#__PURE__*/_jsx(Grid, {
+            item: true,
+            xs: 12,
+            children: /*#__PURE__*/_jsx(TextField, {
+              fullWidth: true,
+              name: "column",
+              value: tableData?.column,
+              onChange: handleChange,
+              label: "No.of Columns",
+              placeholder: "No.of Columns"
+            })
+          })]
         })
-      }), /*#__PURE__*/_jsx("div", {
-        className: "table-input",
-        children: tableInput.map((grp, row) => grp.map(({
-          column,
-          bg
-        }, col) => /*#__PURE__*/_jsx("div", {
-          onClick: () => handleInsert(),
-          onMouseOver: () => setTableData({
-            row: row + 1,
-            column: column + 1
-          }),
-          className: "table-unit",
-          style: {
-            border: `1px solid ${bg}`
-          }
-        }, row + col)))
+      }), /*#__PURE__*/_jsxs(DialogActions, {
+        children: [/*#__PURE__*/_jsx(Button, {
+          onClick: onCancel,
+          children: "Cancel"
+        }), /*#__PURE__*/_jsx(Button, {
+          onClick: handleInsert,
+          children: "Save"
+        })]
       })]
-    })]
+    }) : null]
   });
 };
 export default TableSelector;

package/dist/Editor/Toolbar/Toolbar.js

@@ -1,8 +1,10 @@
 import React, { useEffect, useState } from "react";
+import { Select, MenuItem } from "@mui/material";
 import { useSlate } from "slate-react";
 import Button from "../common/Button";
 import Icon from "../common/Icon";
 import { toggleBlock, toggleMark, isMarkActive, addMarkData, isBlockActive, activeMark } from "../utils/SlateUtilityFunctions.js";
+import { fontFamilyMap } from "../utils/font";
 import useFormat from "../utils/customHooks/useFormat.js";
 import defaultToolbarGroups from "./toolbarGroups.js";
 import "./styles.css";
@@ -12,16 +14,21 @@ import Embed from "../Elements/Embed/Embed";
 import TableSelector from "../Elements/Table/TableSelector";
 import EquationButton from "../Elements/Equation/EquationButton";
 import Id from "../Elements/ID/Id";
-import TableContextMenu from "../Elements/TableContextMenu/TableContextMenu";
 import CodeToTextButton from "../Elements/CodeToText/CodeToTextButton";
 import HtmlContextMenu from "../Elements/CodeToText/HtmlContextMenu";
 import GridButton from "../Elements/Grid/GridButton";
 import NewLineButton from "../Elements/NewLine/NewLineButton";
+import AccordionButton from "../Elements/Accordion/AccordionButton";
+import SignatureButton from "../Elements/Signature/SignatureButton";
+import ButtonToolIcon from "../Elements/Button/ButtonToolIcon";
+import PageSettingsButton from "../Elements/PageSettings/PageSettingsButton";
+import CarouselButton from "../Elements/Carousel/CarouselButton";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Toolbar = props => {
   const {
-    handleCodeToText
+    handleCodeToText,
+    customProps
   } = props;
   const editor = useSlate();
   const isTable = useFormat(editor, "table");
@@ -72,10 +79,21 @@ const Toolbar = props => {
     format,
     options
   }) => {
-    return /*#__PURE__*/_jsx("select", {
-      value: activeMark(editor, format),
+    const value = activeMark(editor, format);
+    return /*#__PURE__*/_jsx(Select, {
+      value: value,
+      className: "editor-dd",
       onChange: e => changeMarkData(e, format),
-      children: options.map((item, index) => /*#__PURE__*/_jsx("option", {
+      style: {
+        fontFamily: fontFamilyMap[value],
+        width: "200px",
+        height: "40px",
+        overflow: "hidden"
+      },
+      children: options.map((item, index) => /*#__PURE__*/_jsx(MenuItem, {
+        style: {
+          fontFamily: item.text
+        },
         value: item.value,
         children: item.text
       }, index))
@@ -92,7 +110,7 @@ const Toolbar = props => {
   return /*#__PURE__*/_jsxs("div", {
     className: "toolbar",
     children: [toolbarGroups.map((group, index) => /*#__PURE__*/_jsx("span", {
-      className: "toolbar-grp",
+      className: "toolbar-grp1",
       children: group.map((element, gi) => {
         switch (element.type) {
           case "block":
@@ -115,7 +133,8 @@ const Toolbar = props => {
           case "embed":
             return /*#__PURE__*/_jsx(Embed, {
               format: element.format,
-              editor: editor
+              editor: editor,
+              customProps: customProps
             }, element.id);
           case "color-picker":
             return /*#__PURE__*/_jsx(ColorPicker, {
@@ -147,13 +166,31 @@ const Toolbar = props => {
             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
+            }, element.id);
+          case "carousel":
+            return /*#__PURE__*/_jsx(CarouselButton, {
+              editor: editor
+            }, element.id);
           default:
             return null;
         }
       })
-    }, index)), /*#__PURE__*/_jsx(TableContextMenu, {
-      editor: editor
-    }), /*#__PURE__*/_jsx(HtmlContextMenu, {
+    }, index)), /*#__PURE__*/_jsx(HtmlContextMenu, {
       editor: editor,
       handleCodeToText: handleCodeToText
     })]

package/dist/Editor/Toolbar/styles.css

@@ -1,28 +1,37 @@
-.toolbar{
-    border-radius: 10px;
-background: #ffffff;
-box-shadow:  -8px 8px 13px #ededed,
-             8px -8px 13px #ffffff;
+.toolbar {
+    background: #ffffff;
     margin:4px 0;
     display:flex;
     flex-wrap:wrap;
     align-items:center;
-    padding: 15px 10px;
+    padding: 12px 0px;
     row-gap: 15px;
     position: -webkit-sticky;
-  position: sticky;
-  top: 0;
-  z-index: 2;
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    margin-bottom: 12px;
+    border-bottom: 2px solid #CCC;
 }
-.toolbar-grp>*{
+.toolbar-grp1>*{
     margin-right: 10px;
     cursor: pointer;
 }
-.toolbar-grp{
+.toolbar-grp1{
     margin:0 10px;
+    display: flex;
+    align-items: center;
 }
 select{
     height: 30px;
     border: none;
     width: 6.9rem;
 }
+
+.toolbar .editor-dd {
+    width: 200px !important;
+}
+
+.toolbar .MuiIconButton-root {
+
+}

package/dist/Editor/Toolbar/toolbarGroups.js

@@ -1,17 +1,9 @@
+import { fontOptions } from "../utils/font";
 const toolbarGroups = [[{
   id: 1,
   format: "fontFamily",
   type: "dropdown",
-  options: [{
-    text: "Sans Serif",
-    value: "sans"
-  }, {
-    text: "Serif",
-    value: "serif"
-  }, {
-    text: "MonoSpace",
-    value: "monospace"
-  }]
+  options: fontOptions
 }, {
   id: 2,
   format: "fontSize",
@@ -113,19 +105,25 @@ const toolbarGroups = [[{
   id: 23,
   type: "table"
 }], [{
-  id: 25,
-  type: "id"
-}, {
-  id: 26,
-  type: "equation"
-}, {
-  id: 27,
-  type: "codeToText"
-}, {
   id: 28,
   type: "grid"
 }, {
   id: 29,
   type: "newLine"
+}, {
+  id: 30,
+  type: "accordion"
+}, {
+  id: 31,
+  type: "signature"
+}, {
+  id: 32,
+  type: "button"
+}, {
+  id: 33,
+  type: "page-settings"
+}, {
+  id: 34,
+  type: "carousel"
 }]];
 export default toolbarGroups;

package/dist/Editor/common/Button.js

@@ -1,4 +1,5 @@
-import React from 'react';
+import React from "react";
+import { IconButton } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
 const Button = props => {
   const {
@@ -7,15 +8,10 @@ const Button = props => {
     active,
     ...rest
   } = props;
-  return /*#__PURE__*/_jsx("button", {
-    className: active ? 'btnActive' : '',
+  return /*#__PURE__*/_jsx(IconButton, {
+    className: active ? "btnActive" : "",
     title: format,
     ...rest,
-    style: {
-      width: '30px',
-      height: '20px',
-      margin: '0 2px'
-    },
     children: children
   });
 };

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

@@ -0,0 +1,23 @@
+const accordionTitleBtnStyle = [{
+  tab: "Colors",
+  value: "colors",
+  fields: [{
+    label: "Text",
+    key: "textColor",
+    type: "color",
+    needPreview: true
+  }, {
+    label: "Button",
+    key: "btnBg",
+    type: "color"
+  }, {
+    label: "Background",
+    key: "bgColor",
+    type: "color"
+  }, {
+    label: "Border",
+    key: "borderColor",
+    type: "color"
+  }]
+}];
+export default accordionTitleBtnStyle;

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

@@ -0,0 +1,35 @@
+const accordionTitleStyle = [{
+  tab: "Banner Spacing",
+  value: "bannerSpacing",
+  fields: [{
+    label: "Banner Spacing",
+    key: "bannerSpacing",
+    type: "bannerSpacing"
+  }]
+}, {
+  tab: "Border Radius",
+  value: "borderRadius",
+  fields: [{
+    label: "Border Radius",
+    key: "borderRadius",
+    type: "borderRadius"
+  }]
+}, {
+  tab: "Colors",
+  value: "colors",
+  fields: [{
+    label: "Text",
+    key: "textColor",
+    type: "color",
+    needPreview: true
+  }, {
+    label: "Background",
+    key: "bgColor",
+    type: "color"
+  }, {
+    label: "Border",
+    key: "borderColor",
+    type: "color"
+  }]
+}];
+export default accordionTitleStyle;

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

@@ -0,0 +1,47 @@
+const buttonStyle = [{
+  tab: "Content",
+  value: "content",
+  fields: [{
+    label: "Button Text",
+    key: "label",
+    type: "text"
+  }, {
+    label: "Button URL",
+    type: "text",
+    key: "url"
+  }]
+}, {
+  tab: "Banner Spacing",
+  value: "bannerSpacing",
+  fields: [{
+    label: "Banner Spacing",
+    key: "bannerSpacing",
+    type: "bannerSpacing"
+  }]
+}, {
+  tab: "Border Radius",
+  value: "borderRadius",
+  fields: [{
+    label: "Border Radius",
+    key: "borderRadius",
+    type: "borderRadius"
+  }]
+}, {
+  tab: "Colors",
+  value: "colors",
+  fields: [{
+    label: "Text",
+    key: "textColor",
+    type: "color",
+    needPreview: true
+  }, {
+    label: "Background",
+    key: "bgColor",
+    type: "color"
+  }, {
+    label: "Border",
+    key: "borderColor",
+    type: "color"
+  }]
+}];
+export default buttonStyle;

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

@@ -0,0 +1,63 @@
+const embedImageStyle = [{
+  tab: "Image Texts",
+  value: "imageTexts",
+  fields: [{
+    label: "Image Texts",
+    key: "imageTexts",
+    type: "imageTexts"
+  }]
+}, {
+  tab: "Banner Spacing",
+  value: "bannerSpacing",
+  fields: [{
+    label: "Banner Spacing",
+    key: "bannerSpacing",
+    type: "bannerSpacing"
+  }]
+}, {
+  tab: "Position",
+  value: "position",
+  fields: [{
+    label: "Set Postion (Vertical & Horizantal)",
+    key: "alignment",
+    type: "alignment"
+  }]
+}, {
+  tab: "Colors",
+  value: "colors",
+  fields: [{
+    label: "Text",
+    key: "textColor",
+    type: "color",
+    needPreview: true
+  }, {
+    label: "Background",
+    key: "bgColor",
+    type: "color"
+  }, {
+    label: "Border",
+    key: "borderColor",
+    type: "color"
+  }]
+}, {
+  tab: "URL",
+  value: "url",
+  fields: [{
+    label: "URL",
+    key: "url",
+    type: "text"
+  }, {
+    label: "File",
+    key: "url",
+    type: "backgroundImage"
+  }]
+}, {
+  tab: "Size",
+  value: "elementSize",
+  fields: [{
+    label: "Element Size",
+    key: "size",
+    type: "elementSize"
+  }]
+}];
+export default embedImageStyle;

package/dist/Editor/common/StyleBuilder/fieldTypes/alignment.js

@@ -0,0 +1,88 @@
+import React from "react";
+import { Grid, Radio, RadioGroup, FormControl, FormLabel, FormControlLabel } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Alignment = props => {
+  const {
+    value,
+    data,
+    onChange
+  } = props;
+  const {
+    key
+  } = data;
+  const handleChange = e => {
+    onChange({
+      [key]: {
+        ...value,
+        [e.target.name]: e.target.value
+      }
+    });
+  };
+  return /*#__PURE__*/_jsxs(Grid, {
+    container: true,
+    padding: 3,
+    style: {
+      paddingTop: "12px"
+    },
+    spacing: 1,
+    children: [/*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      children: /*#__PURE__*/_jsxs(FormControl, {
+        children: [/*#__PURE__*/_jsx(FormLabel, {
+          id: "demo-row-radio-buttons-group-label",
+          children: "Horizantal Position"
+        }), /*#__PURE__*/_jsxs(RadioGroup, {
+          row: true,
+          "aria-labelledby": "demo-row-radio-buttons-group-label",
+          name: "horizantal",
+          value: value?.horizantal || "start",
+          onChange: handleChange,
+          children: [/*#__PURE__*/_jsx(FormControlLabel, {
+            value: "start",
+            control: /*#__PURE__*/_jsx(Radio, {}),
+            label: "Left"
+          }), /*#__PURE__*/_jsx(FormControlLabel, {
+            value: "center",
+            control: /*#__PURE__*/_jsx(Radio, {}),
+            label: "Center"
+          }), /*#__PURE__*/_jsx(FormControlLabel, {
+            value: "end",
+            control: /*#__PURE__*/_jsx(Radio, {}),
+            label: "Right"
+          })]
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      children: /*#__PURE__*/_jsxs(FormControl, {
+        children: [/*#__PURE__*/_jsx(FormLabel, {
+          id: "demo-row-radio-buttons-group-label",
+          children: "Vertical Position"
+        }), /*#__PURE__*/_jsxs(RadioGroup, {
+          row: true,
+          "aria-labelledby": "demo-row-radio-buttons-group-label",
+          name: "vertical",
+          value: value?.vertical || "start",
+          onChange: handleChange,
+          children: [/*#__PURE__*/_jsx(FormControlLabel, {
+            value: "start",
+            control: /*#__PURE__*/_jsx(Radio, {}),
+            label: "Top"
+          }), /*#__PURE__*/_jsx(FormControlLabel, {
+            value: "center",
+            control: /*#__PURE__*/_jsx(Radio, {}),
+            label: "Middle"
+          }), /*#__PURE__*/_jsx(FormControlLabel, {
+            value: "end",
+            control: /*#__PURE__*/_jsx(Radio, {}),
+            label: "Bottom"
+          })]
+        })]
+      })
+    })]
+  });
+};
+export default Alignment;