@flozy/editor 1.1.2 → 1.1.4

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

@@ -0,0 +1,181 @@
+import React, { useState } from "react";
+import { Transforms, Editor, Element } from "slate";
+import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
+import { IconButton } from "@mui/material";
+import AlignHorizontalLeftIcon from "@mui/icons-material/AlignHorizontalLeft";
+import AlignHorizontalRightIcon from "@mui/icons-material/AlignHorizontalRight";
+import AlignVerticalTopIcon from "@mui/icons-material/AlignVerticalTop";
+import AlignVerticalBottomIcon from "@mui/icons-material/AlignVerticalBottom";
+import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
+import SettingsIcon from "@mui/icons-material/Settings";
+import DeleteCellIcon from "./DeleteCellIcon";
+import DeleteRowIcon from "./DeleteRowIcon";
+import { TableUtil } from "../../utils/table";
+import TablePopup from "./TablePopup";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const TABLE_MENUS = [{
+  Icon: AlignHorizontalRightIcon,
+  text: "Insert Columns to the Right",
+  action: {
+    type: "insertColumn",
+    position: "after"
+  }
+}, {
+  Icon: AlignHorizontalLeftIcon,
+  text: "Insert Columns to the Left",
+  action: {
+    type: "insertColumn",
+    position: "at"
+  }
+}, {
+  Icon: AlignVerticalTopIcon,
+  text: "Insert Row Above",
+  action: {
+    type: "insertRow",
+    positon: "at"
+  }
+}, {
+  Icon: AlignVerticalBottomIcon,
+  text: "Insert Row Below",
+  action: {
+    type: "insertRow",
+    position: "after"
+  }
+}, {
+  Icon: DeleteRowIcon,
+  text: "Delete Row",
+  action: {
+    type: "deleteRow"
+  }
+}, {
+  Icon: DeleteCellIcon,
+  text: "Delete Column",
+  action: {
+    type: "deleteColumn"
+  }
+}, {
+  Icon: SettingsIcon,
+  text: "Settings",
+  action: {
+    type: "settings"
+  }
+}, {
+  Icon: DeleteForeverIcon,
+  text: "Remove Table",
+  action: {
+    type: "remove"
+  }
+}];
+const TableCell = props => {
+  const {
+    element,
+    attributes,
+    children,
+    customProps
+  } = props;
+  const [openSetttings, setOpenSettings] = useState(false);
+  const {
+    bgColor,
+    borderColor
+  } = element;
+  const editor = useSlateStatic();
+  const selected = useSelected();
+  const table = new TableUtil(editor);
+  const tableProps = table.getTableProps();
+  const path = ReactEditor.findPath(editor, element);
+  const [tableNode] = Editor.nodes(editor, {
+    at: path,
+    match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
+  });
+  const [rowNode] = Editor.nodes(editor, {
+    at: path,
+    match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-row"
+  });
+  const [parentProps] = tableNode || [{}];
+  const [rowProps] = rowNode || [{}];
+  const handleInsert = ({
+    type,
+    position
+  }) => () => {
+    Transforms.select(editor, editor.selection);
+    switch (type) {
+      case "insertRow":
+        table.insertRow(position);
+        break;
+      case "insertColumn":
+        table.insertColumn(position);
+        break;
+      case "deleteRow":
+        table.deleteRow();
+        break;
+      case "deleteColumn":
+        table.deleteColumn();
+        break;
+      case "remove":
+        table.removeTable();
+        break;
+      case "settings":
+        if (tableProps) {
+          onSettings(true);
+        }
+        break;
+      default:
+        return;
+    }
+  };
+  const ToolBar = () => {
+    return selected ? /*#__PURE__*/_jsx("div", {
+      contentEditable: false,
+      style: {
+        position: "absolute",
+        top: "-40px",
+        left: 0,
+        backgroundColor: "#CCC"
+      },
+      children: TABLE_MENUS.map(({
+        Icon,
+        text,
+        action
+      }) => {
+        return /*#__PURE__*/_jsx(IconButton, {
+          title: text,
+          onClick: handleInsert(action),
+          children: /*#__PURE__*/_jsx(Icon, {})
+        }, text);
+      })
+    }) : null;
+  };
+  const onSettings = () => {
+    setOpenSettings(true);
+  };
+  const onSave = data => {
+    const updateData = {
+      ...data
+    };
+    delete updateData.children;
+    delete updateData.type;
+    table.updateTableStyle(updateData, {
+      ...tableProps
+    });
+    onClose();
+  };
+  const onClose = () => {
+    setOpenSettings(false);
+  };
+  return /*#__PURE__*/_jsxs("td", {
+    ...element.attr,
+    ...attributes,
+    style: {
+      backgroundColor: bgColor,
+      border: `3px solid ${borderColor || rowProps?.borderColor || parentProps?.borderColor}`
+    },
+    children: [/*#__PURE__*/_jsx(ToolBar, {}), children, openSetttings ? /*#__PURE__*/_jsx(TablePopup, {
+      element: tableProps?.styleProps || {},
+      onSave: onSave,
+      onClose: onClose,
+      customProps: customProps
+    }) : null]
+  });
+};
+export default TableCell;

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

@@ -0,0 +1,22 @@
+import React from "react";
+import StyleBuilder from "../../common/StyleBuilder";
+import tableStyle from "../../common/StyleBuilder/tableStyle";
+import { jsx as _jsx } from "react/jsx-runtime";
+const TablePopup = props => {
+  const {
+    element,
+    onSave,
+    onClose,
+    customProps
+  } = props;
+  return /*#__PURE__*/_jsx(StyleBuilder, {
+    title: "Table",
+    type: "gridStyle",
+    element: element,
+    onSave: onSave,
+    onClose: onClose,
+    renderTabs: tableStyle,
+    customProps: customProps
+  });
+};
+export default TablePopup;

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

@@ -0,0 +1,31 @@
+import React from "react";
+import { Editor, Element } from "slate";
+import { useSlateStatic, ReactEditor } from "slate-react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const TableRow = props => {
+  const {
+    attributes,
+    children,
+    element
+  } = props;
+  const {
+    bgColor,
+    borderColor
+  } = element;
+  const editor = useSlateStatic();
+  const path = ReactEditor.findPath(editor, element);
+  const [tableNode] = Editor.nodes(editor, {
+    at: path,
+    match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
+  });
+  const [tableProps] = tableNode || [{}];
+  return /*#__PURE__*/_jsx("tr", {
+    ...attributes,
+    style: {
+      backgroundColor: bgColor,
+      border: `1px solid ${borderColor || tableProps?.borderColor}`
+    },
+    children: children
+  });
+};
+export default TableRow;

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

@@ -14,18 +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");
@@ -79,6 +82,7 @@ const Toolbar = props => {
     const value = activeMark(editor, format);
     return /*#__PURE__*/_jsx(Select, {
       value: value,
+      className: "editor-dd",
       onChange: e => changeMarkData(e, format),
       style: {
         fontFamily: fontFamilyMap[value],
@@ -106,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":
@@ -129,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, {
@@ -169,13 +174,23 @@ const Toolbar = props => {
             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

@@ -105,15 +105,6 @@ const toolbarGroups = [[{
   id: 23,
   type: "table"
 }], [{
-  id: 25,
-  type: "id"
-}, {
-  id: 26,
-  type: "equation"
-}, {
-  id: 27,
-  type: "codeToText"
-}, {
   id: 28,
   type: "grid"
 }, {
@@ -125,5 +116,14 @@ const toolbarGroups = [[{
 }, {
   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;