@flozy/editor 1.5.8 → 1.6.0

package/dist/Editor/Elements/Form/FormElements/FormText.js

@@ -12,7 +12,8 @@ const FormText = props => {
     borderWidth,
     borderColor,
     textColor,
-    bgColor
+    bgColor,
+    ...rest
   } = fieldProps;
   const {
     left,
@@ -36,7 +37,7 @@ const FormText = props => {
     },
     contentEditable: false,
     children: /*#__PURE__*/_jsx("input", {
-      ...fieldProps,
+      ...rest,
       onChange: onChange,
       style: {
         width: "100%",

package/dist/Editor/Elements/Form/FormElements/FormTextArea.js

@@ -12,7 +12,8 @@ const FormTextArea = props => {
     borderWidth,
     borderColor,
     textColor,
-    bgColor
+    bgColor,
+    ...rest
   } = fieldProps;
   const {
     left,
@@ -36,7 +37,7 @@ const FormTextArea = props => {
     },
     contentEditable: false,
     children: /*#__PURE__*/_jsx("textarea", {
-      ...fieldProps,
+      ...rest,
       onChange: onChange,
       style: {
         width: "100%",

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

@@ -1,15 +1,19 @@
+/* eslint-disable no-unused-vars */
 import React, { useState, useEffect } from "react";
 import { Transforms, Path, Node } from "slate";
 import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
 import { gridItem } from "../../utils/gridItem";
 import GridPopup from "./GridPopup";
 import { IconButton, Tooltip } from "@mui/material";
-// import CompressIcon from "@mui/icons-material/Compress";
 import { insertGrid } from "../../utils/grid";
-import useDragAndDrop from "../../common/useDragAndDrop";
+// import useDragAndDrop from "../../common/useDragAndDrop";
 import useResize from "../../utils/customHooks/useResize";
 import { GridAddGridIcon, GridAddSectionIcon, GridSettingsIcon } from "../../common/iconslist";
+import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
+import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
+import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Grid = props => {
   const {
@@ -29,7 +33,7 @@ const Grid = props => {
     bgColor,
     alignment,
     backgroundImage,
-    size: elSize,
+    // size: elSize,
     fgColor,
     borderWidth,
     borderColor,
@@ -53,17 +57,14 @@ const Grid = props => {
     bottomLeft,
     bottomRight
   } = borderRadius || {};
-  const {
-    height: elHeight
-  } = elSize || {};
+  // const { height: elHeight } = elSize || {};
   const editor = useSlateStatic();
   const selected = useSelected();
   // const [selected, setSelected] = useState(false);
   const path = ReactEditor.findPath(editor, element);
   const [parentDOM, setParentDOM] = useState(null);
-
   // resize
-  const [size, onMouseDown, resizing, onLoad] = useResize({
+  const [size,, resizing, onLoad] = useResize({
     parentDOM,
     size: element?.size,
     isGrid: true
@@ -154,49 +155,115 @@ const Grid = props => {
       console.log(err);
     }
   };
-  const onDrop = dropElement => {
+  const onMoveSection = direction => e => {
     try {
-      Transforms.insertNodes(editor, JSON.parse(dropElement), {
-        at: path,
-        select: true
-      });
+      e.preventDefault();
+      e.stopPropagation();
+      if (direction) {
+        let moveTo = direction === "up" ? path[0] - 1 : path[0] + 1;
+        if (moveTo < 0) {
+          moveTo = 0;
+        } else if (moveTo > editor.children.length - 1) {
+          moveTo = editor.children.length - 1;
+        }
+        Transforms.moveNodes(editor, {
+          at: [path[0]],
+          to: [moveTo]
+        });
+      }
     } catch (err) {
       console.log(err);
     }
   };
-  const onDragEnd = () => {
+  const onNewLine = direction => () => {
     try {
-      const currentDelpath = ReactEditor.findPath(editor, element);
-      if (currentDelpath) {
-        Transforms.removeNodes(editor, {
-          at: currentDelpath
+      if (direction) {
+        let moveTo = direction === "up" ? path[0] - 1 : path[0] + 1;
+        let lastLine = false;
+        if (moveTo < 0) {
+          moveTo = 0;
+        } else if (moveTo > editor.children.length - 1) {
+          moveTo = editor.children.length;
+          lastLine = true;
+        }
+        Transforms.insertNodes(editor, {
+          type: "paragraph",
+          children: [{
+            text: ""
+          }]
+        }, {
+          at: [moveTo]
         });
+        if (lastLine) {
+          Transforms.move(editor, {
+            at: [moveTo]
+          });
+        }
       }
     } catch (err) {
       console.log(err);
     }
   };
-  const grid_drag_id = `grid_drag_${path.join("_")}`;
-  const [dndElements, isDragging, isActiveDrag] = useDragAndDrop({
-    editor,
-    id: grid_drag_id,
-    selected,
-    path,
-    element,
-    onDragEnd,
-    onDrop
-  });
 
-  // const onMouseOver = (e) => {
-  //   e.stopPropagation();
-  //   setSelected(true);
+  // const onDrop = (dropElement) => {
+  //   try {
+  //     Transforms.insertNodes(editor, JSON.parse(dropElement), {
+  //       at: path,
+  //       select: true,
+  //     });
+  //   } catch (err) {
+  //     console.log(err);
+  //   }
   // };
 
-  // const onMouseLeave = (e) => {
-  //   e.stopPropagation();
-  //   setSelected(false);
+  // const onDragEnd = () => {
+  //   try {
+  //     const currentDelpath = ReactEditor.findPath(editor, element);
+  //     if (currentDelpath) {
+  //       Transforms.removeNodes(editor, { at: currentDelpath });
+  //     }
+  //   } catch (err) {
+  //     console.log(err);
+  //   }
   // };
 
+  // const grid_drag_id = `grid_drag_${path.join("_")}`;
+
+  // const [dndElements, isDragging, isActiveDrag] = useDragAndDrop({
+  //   editor,
+  //   id: grid_drag_id,
+  //   selected,
+  //   path,
+  //   element,
+  //   onDragEnd,
+  //   onDrop,
+  // });
+
+  const NewLineButtons = () => {
+    return !readOnly && selected && path.length === 2 ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "element-selector-ctrl tc",
+        children: /*#__PURE__*/_jsx(Tooltip, {
+          title: "Add Space above",
+          arrow: true,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            onClick: onNewLine("up"),
+            children: /*#__PURE__*/_jsx(KeyboardReturnIcon, {})
+          })
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: "element-selector-ctrl bc",
+        children: /*#__PURE__*/_jsx(Tooltip, {
+          title: "Add Space below",
+          arrow: true,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            onClick: onNewLine("down"),
+            children: /*#__PURE__*/_jsx(KeyboardReturnIcon, {})
+          })
+        })
+      })]
+    }) : null;
+  };
   const GridToolBar = () => {
     return selected ? /*#__PURE__*/_jsxs("div", {
       className: "grid-container-toolbar",
@@ -222,7 +289,23 @@ const Grid = props => {
           onClick: onAddSection(null, true),
           children: /*#__PURE__*/_jsx(GridAddSectionIcon, {})
         })
-      })]
+      }), path.length === 2 ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Tooltip, {
+          title: "Move Up",
+          arrow: true,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            onClick: onMoveSection("up"),
+            children: /*#__PURE__*/_jsx(ArrowUpwardIcon, {})
+          })
+        }), /*#__PURE__*/_jsx(Tooltip, {
+          title: "Move Down",
+          arrow: true,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            onClick: onMoveSection("down"),
+            children: /*#__PURE__*/_jsx(ArrowDownwardIcon, {})
+          })
+        })]
+      }) : null]
     }) : null;
   };
   const sectionId = id ? {
@@ -232,7 +315,7 @@ const Grid = props => {
     backgroundImage: `url(${backgroundImage})`
   } : {};
   return /*#__PURE__*/_jsxs("div", {
-    className: `grid-container ${grid} has-hover element-root ${isDragging ? "dragging" : ""} ${isActiveDrag ? "active_drag" : ""}`,
+    className: `grid-container ${grid} has-hover element-root`,
     ...attributes,
     ...sectionId,
     style: {
@@ -243,10 +326,7 @@ const Grid = props => {
       borderWidth: borderWidth || "1px",
       borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
       borderStyle: borderStyle || "solid"
-    }
-    // onMouseOver={onMouseOver}
-    // onMouseLeave={onMouseLeave}
-    ,
+    },
     children: [fgColor && /*#__PURE__*/_jsx("div", {
       style: {
         position: "absolute",
@@ -290,11 +370,16 @@ const Grid = props => {
         alignItems: vertical || "start",
         justifyContent: horizantal || "start",
         flexDirection: flexDirection || "row",
-        width: "100%",
-        height: resizing ? `${size?.height}px` : elHeight ? `${elHeight}px` : "fit-content"
+        width: "100%"
+        // height cause overlap issues TBD
+        // height: resizing
+        //   ? `${size?.height}px`
+        //   : elHeight
+        //   ? `${elHeight}px`
+        //   : "fit-content",
       },
       children: children
-    })]
+    }), /*#__PURE__*/_jsx(NewLineButtons, {})]
   });
 };
 export default Grid;

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

@@ -1,6 +1,7 @@
+/* eslint-disable no-unused-vars */
 import React, { useState } from "react";
 import { Transforms } from "slate";
-import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
+import { useSlateStatic, ReactEditor } from "slate-react";
 import GridItemPopup from "./GridItemPopup";
 import { IconButton, Tooltip, Box } from "@mui/material";
 import { GridSettingsIcon } from "../../common/iconslist";
@@ -79,7 +80,6 @@ const GridItem = props => {
     const updateData = {
       ...data
     };
-    console.log(updateData);
     delete updateData.children;
     Transforms.setNodes(editor, {
       ...updateData

package/dist/Editor/Elements/InlineIcon/InlineIcon.js

@@ -29,7 +29,6 @@ const InlineIcon = props => {
     bottomRight
   } = borderRadius || {};
   const BtnIcon = fIcons["Check"];
-  console.log(icon);
   return /*#__PURE__*/_jsxs("button", {
     ...attributes,
     className: "editor-icon-text",

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

@@ -2,12 +2,14 @@ import React from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PageSettings = props => {
   const {
-    attributes
+    attributes,
+    children
   } = props;
   return /*#__PURE__*/_jsx("div", {
     ...attributes,
     className: "page-settings",
-    contentEditable: false
+    contentEditable: false,
+    children: children
   });
 };
 export default PageSettings;

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

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

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

@@ -10,7 +10,7 @@ const PageSettingsPopup = props => {
     customProps
   } = props;
   return /*#__PURE__*/_jsx(StyleBuilder, {
-    title: "Grid",
+    title: "Page Settings",
     type: "pageSettingsStyle",
     element: element,
     onSave: onSave,

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

@@ -8,10 +8,8 @@ const Autocomplete = ({
   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 });
   };

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

@@ -0,0 +1,63 @@
+import React from "react";
+import { MenuItem, Tooltip, IconButton, Menu } from "@mui/material";
+import { addMarkData } from "../../utils/SlateUtilityFunctions.js";
+import { fontFamilyMap } from "../../utils/font";
+import Icon from "../../common/Icon";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const FontFamilyDropdown = ({
+  editor,
+  format,
+  options
+}) => {
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open = Boolean(anchorEl);
+  const handleClick = event => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  return /*#__PURE__*/_jsxs(Tooltip, {
+    title: format,
+    arrow: true,
+    style: {
+      textTransform: 'capitalize'
+    },
+    children: [/*#__PURE__*/_jsx(IconButton, {
+      "aria-label": "more",
+      id: "long-button",
+      "aria-controls": open ? 'long-menu' : undefined,
+      "aria-expanded": open ? 'true' : undefined,
+      "aria-haspopup": "true",
+      onClick: handleClick,
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: format
+      })
+    }), /*#__PURE__*/_jsx(Menu, {
+      id: "long-menu",
+      MenuListProps: {
+        'aria-labelledby': 'long-button'
+      },
+      anchorEl: anchorEl,
+      open: open,
+      onClose: handleClose,
+      children: options.map((item, index) => /*#__PURE__*/_jsx(MenuItem, {
+        value: item.value,
+        style: {
+          fontFamily: fontFamilyMap[item.value],
+          fontSize: 15
+        },
+        onClick: () => {
+          addMarkData(editor, {
+            format,
+            value: item.value
+          });
+          handleClose();
+        },
+        children: item.text
+      }, index))
+    })]
+  });
+};
+export default FontFamilyDropdown;

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

@@ -0,0 +1,112 @@
+import React, { useEffect, useRef, useState } from 'react';
+import Button from '../../common/Button';
+import Icon from '../../common/Icon';
+import { activeMark, addMarkData, isBlockActive } from '../../utils/SlateUtilityFunctions';
+import usePopup from '../../utils/customHooks/usePopup';
+import { sizeMap } from '../../utils/font';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const FontSize = ({
+  editor,
+  format
+}) => {
+  const urlInputRef = useRef();
+  let activeValue = activeMark(editor, format);
+  const [active, setActive] = useState(false);
+  const [fontSize, setFontSize] = useState(16);
+  const [showInput, setShowInput] = usePopup(urlInputRef);
+  useEffect(() => {
+    setFontSize(activeValue === 'normal' ? 16 : getSizeVal(activeValue));
+  }, [activeValue]);
+  const getSizeVal = value => {
+    try {
+      const size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
+      return parseInt(size);
+    } catch (err) {
+      return "";
+    }
+  };
+  const handleButtonClick = e => {
+    e.preventDefault();
+    if (!active) {
+      let activeValue = activeMark(editor, format);
+      let defaultValue = activeValue ? sizeMap[activeValue] ? getSizeVal(sizeMap[activeValue]) : +activeValue : 16;
+      setFontSize(defaultValue);
+    } else {
+      setFontSize(16);
+    }
+    setShowInput(prev => !prev);
+    setActive(!active);
+  };
+  const onInputChange = e => {
+    if (e.target.value) {
+      setFontSize(e.target.value);
+      addMarkData(editor, {
+        format,
+        value: e.target.value
+      });
+    }
+  };
+  const changeWithButton = value => {
+    setFontSize(value);
+    addMarkData(editor, {
+      format,
+      value: value
+    });
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    ref: urlInputRef,
+    className: "popup-wrapper",
+    children: [/*#__PURE__*/_jsx(Button, {
+      className: `${isBlockActive(editor, format) && "btnActive"}`,
+      active: isBlockActive(editor, format),
+      style: {
+        border: showInput ? '1px solid lightgray' : '',
+        borderBottom: 'none'
+      },
+      format: format,
+      onClick: handleButtonClick,
+      children: /*#__PURE__*/_jsx(Icon, {
+        className: "fontsize",
+        icon: format
+      })
+    }), showInput && /*#__PURE__*/_jsxs("div", {
+      className: "fontSizeWrapper popup imagePopup",
+      style: {
+        display: 'flex',
+        justifyContent: 'center',
+        maxWidth: '120px'
+      },
+      children: [/*#__PURE__*/_jsx("span", {
+        className: "controls",
+        onClick: () => {
+          if (activeValue && activeValue > 1) {
+            changeWithButton(+fontSize - 1);
+          }
+        },
+        children: "-"
+      }), /*#__PURE__*/_jsx("input", {
+        value: fontSize,
+        type: "text",
+        style: {
+          border: 'unset',
+          outline: 'unset',
+          marginBottom: 'unset',
+          maxWidth: '36px',
+          overflow: 'hidden'
+        },
+        onChange: onInputChange,
+        disabled: !activeValue && activeValue !== 0
+      }), /*#__PURE__*/_jsx("span", {
+        className: "controls",
+        onClick: () => {
+          if (activeValue || activeValue === 0) {
+            changeWithButton(+fontSize + 1);
+          }
+        },
+        children: "+"
+      })]
+    })]
+  });
+};
+export default FontSize;

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

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

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { Grid, Typography } from "@mui/material";
-import toolbarGroups from "../toolbarGroups";
 import { Dropdown, MarkButton, TextSize, BlockButton } from "../FormatTools";
+import { toolbarGroups } from "../toolbarGroups";
 import ColorPicker from "../../Elements/Color Picker/ColorPicker";
 import { activeMark } from "../../utils/SlateUtilityFunctions";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -133,7 +133,7 @@ const TextFormat = props => {
           editor: editor,
           showHex: true,
           rounded: true
-        })
+        }, "11_cc")
       })]
     }), /*#__PURE__*/_jsxs(Grid, {
       item: true,
@@ -158,7 +158,7 @@ const TextFormat = props => {
           editor: editor,
           showHex: true,
           rounded: true
-        })
+        }, "12_cc")
       })]
     })]
   });