@flozy/editor 5.0.1 → 5.0.2

package/dist/Editor/Elements/Carousel/Carousel.js

@@ -121,7 +121,7 @@ const Carousel = props => {
   };
   return /*#__PURE__*/_jsxs("div", {
     ...attributes,
-    className: "sliderBg",
+    className: `sliderBg ${edit ? "carousel_slider_edit" : ""}`,
     style: {
       backgroundColor: "transparent",
       position: "relative"
@@ -136,6 +136,7 @@ const Carousel = props => {
       style: {
         padding: "12px"
       },
+      contentEditable: false,
       children: /*#__PURE__*/_jsx(Slider, {
         ...settings,
         children: children.map((m, i) => {

package/dist/Editor/Elements/Carousel/slick.min.css

@@ -13,9 +13,9 @@
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
-  user-select: none;
   -webkit-touch-callout: none;
   -khtml-user-select: none;
+  user-select: none;
   -ms-touch-action: pan-y;
   touch-action: pan-y;
   -webkit-tap-highlight-color: transparent;

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

@@ -166,7 +166,7 @@ const TableCell = props => {
     if (!resizing && tableResizing) {
       table.resizeTableCell({
         "col.size": size
-      }, rowNode);
+      }, path);
     }
     if (resizing) {
       setTableResizing(currentPath);
@@ -205,9 +205,8 @@ const TableCell = props => {
       });
     }
   };
-  const onMouseUp = e => {
+  const onMouseUp = () => {
     if (startCellPath?.length) {
-      e.preventDefault();
       updateTableSelection({
         endCellPath: path,
         isDragging: false
@@ -232,7 +231,7 @@ const TableCell = props => {
       });
     }
   };
-  const cellId = path.toString() + "table-cell";
+  const cellId = "table-cell" + path.toString();
   const cellRef = document.getElementById(cellId);
   const contentEditable = !readOnly && isCellEditable(startCellPath, path);
   const commonTdProps = useMemo(() => {
@@ -281,7 +280,7 @@ const TableCell = props => {
   const isCellDragging = active?.id && active?.id === cellId;
   const isRowDragging = isCellDragging && currentDraggingType === "row";
   const isColDragging = isCellDragging && currentDraggingType === "col";
-  const width = size?.width || tableSize?.cellWidth;
+  const width = isHeader ? size?.width || tableSize?.cellWidth : "0px";
   const sizeProps = {
     minWidth: width,
     maxWidth: width

package/dist/Editor/Elements/TopBanner/Styles.js

@@ -1,4 +1,4 @@
-const TopBannerStyles = () => ({
+const TopBannerStyles = theme => ({
   root: {
     "&:hover": {
       "& .tb-toolbar": {
@@ -9,23 +9,29 @@ const TopBannerStyles = () => ({
   toolbar: {
     position: "absolute",
     width: "auto",
-    bottom: "8px",
-    left: 0,
+    bottom: "23px",
     right: 0,
     margin: "auto",
     display: "none",
     "& button": {
-      background: "#FFF",
-      border: "1px solid #ccc",
-      borderRadius: "6px",
-      color: "#373232",
+      background: theme?.palette?.editor?.background,
+      border: `1px solid ${theme?.palette?.editor?.popUpBorderColor}`,
+      borderRadius: "50%",
+      color: "#000",
       marginRight: "8px",
-      padding: "4px 8px",
-      textTransform: "capitalize",
-      fontSize: "14px",
+      padding: "4px",
+      boxShadow: '0px 0px 32px rgba(255, 255, 255, 0.12)',
       "&:hover": {
-        background: "#ccc",
-        color: "#373232"
+        background: theme?.palette?.editor?.background,
+        border: `1px solid ${theme?.palette?.editor?.activeColor}`,
+        "& svg": {
+          fill: theme?.palette?.editor?.activeColor
+        }
+      },
+      "& svg": {
+        width: '20px',
+        height: '20px',
+        fill: theme?.palette?.editor?.menuOptionTextColor
       }
     }
   }

package/dist/Editor/Elements/TopBanner/TopBanner.js

@@ -1,8 +1,10 @@
 import React, { useState } from "react";
-import { Box, Button } from "@mui/material";
+import { Box, IconButton } from "@mui/material";
 import { updateTopBanner, removeTopBanner } from "../../utils/topBanner";
 import ImageSelector from "../../common/ImageSelector/ImageSelector";
 import TopBannerStyles from "./Styles";
+import Icon from "../../common/Icon";
+import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -39,12 +41,16 @@ export const TopBannerToolbar = props => {
       component: "div",
       className: "tb-toolbar",
       sx: classes.toolbar,
-      children: [/*#__PURE__*/_jsx(Button, {
+      children: [/*#__PURE__*/_jsx(IconButton, {
         onClick: handleClick("change"),
-        children: "Change Image"
-      }), /*#__PURE__*/_jsx(Button, {
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: "editIcon"
+        })
+      }), /*#__PURE__*/_jsx(IconButton, {
         onClick: handleClick("remove"),
-        children: "Remove"
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: "deleteIcon"
+        })
       })]
     }), /*#__PURE__*/_jsx(ImageSelector, {
       open: open,
@@ -67,7 +73,10 @@ const TopBanner = props => {
   const {
     url
   } = element;
-  const classes = TopBannerStyles();
+  const {
+    theme
+  } = useEditorContext();
+  const classes = TopBannerStyles(theme);
   return /*#__PURE__*/_jsxs(Box, {
     component: "div",
     ...attributes,

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

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { Popper, Fade, Paper, ClickAwayListener } from "@mui/material";
-import { Editor, Range } from "slate";
+import { Editor, Range, Transforms } from "slate";
 import { ReactEditor, useSlate } from "slate-react";
 import useDrag from "../../hooks/useDrag";
 import useWindowResize from "../../hooks/useWindowResize";
@@ -8,6 +8,7 @@ import MiniTextFormat from "./MiniTextFormat";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import usePopupStyles from "../PopupTool/PopupToolStyle";
 import useEditorScroll from "../../hooks/useEditorScroll";
+import { isCarouselSelected } from "../../helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PopupTool = props => {
   const {
@@ -63,10 +64,15 @@ const PopupTool = props => {
       // for table cell selection
       // const isCellsSelected = table.isCellSelected(editor.selection);
       // if (!isCellsSelected) {
-      setOpen(true);
-      setPopupType("textFormat");
-      setIsTextSelected(true);
       // }
+      const isCarouselEdit = isCarouselSelected(editor);
+      if (isCarouselEdit) {
+        Transforms.deselect(editor);
+      } else {
+        setOpen(true);
+        setPopupType("textFormat");
+        setIsTextSelected(true);
+      }
     } else if (!anchorEl) {
       setOpen(false);
       setPopupType("");

package/dist/Editor/common/Icon.js

@@ -23,6 +23,8 @@ import OpenLinkIcon from "../assets/svg/OpenLinkIcon";
 import { BrainIcon } from "../assets/svg/BrainIcon";
 import DocsIcon from "../assets/svg/DocsIcon";
 import UserIcon from "../assets/svg/UserIcon";
+import EditIcon from "@mui/icons-material/Edit";
+import DeleteIcon from '@mui/icons-material/Delete';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const iconList = {
@@ -270,7 +272,9 @@ const iconList = {
   openLinkIcon: /*#__PURE__*/_jsx(OpenLinkIcon, {}),
   brain: /*#__PURE__*/_jsx(BrainIcon, {}),
   docsIcon: /*#__PURE__*/_jsx(DocsIcon, {}),
-  userIcon: /*#__PURE__*/_jsx(UserIcon, {})
+  userIcon: /*#__PURE__*/_jsx(UserIcon, {}),
+  editIcon: /*#__PURE__*/_jsx(EditIcon, {}),
+  deleteIcon: /*#__PURE__*/_jsx(DeleteIcon, {})
 };
 export const icons = {
   ...iconList

package/dist/Editor/helper/deserialize/index.js

@@ -14,7 +14,10 @@ const handleTableCell = (el, children) => {
   });
   return {
     type: "table-cell",
-    overwriteChild: wrapChild
+    overwriteChild: wrapChild,
+    size: {
+      width: 120
+    }
   };
 };
 const ELEMENT_TAGS = {

package/dist/Editor/helper/index.js

@@ -1,4 +1,4 @@
-import { Editor, Transforms, Path } from "slate";
+import { Editor, Transforms, Path, Element } from "slate";
 import { ReactEditor } from "slate-react";
 import html2canvas from "html2canvas";
 import { rectIntersection, closestCenter } from "@dnd-kit/core";
@@ -322,4 +322,24 @@ export const getBorderColor = (borderColor = "") => {
     borderStyle.borderColor = borderColor;
   }
   return borderStyle;
+};
+export const isCarouselSelected = editor => {
+  try {
+    if (!editor.selection) {
+      return false;
+    }
+    const [nodeEntry] = Editor.nodes(editor, {
+      match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === 'carousel'
+    });
+    if (!nodeEntry) {
+      return false;
+    }
+    const [node] = nodeEntry;
+    const carouselDom = ReactEditor.toDOMNode(editor, node);
+    const isEdit = carouselDom.classList.contains('carousel_slider_edit');
+    return !isEdit;
+  } catch (err) {
+    console.log(err);
+    return false;
+  }
 };

package/dist/Editor/hooks/useTable.js

@@ -2,11 +2,12 @@ import { ClickAwayListener } from "@mui/material";
 import { createContext, useContext, useEffect, useMemo, useState } from "react";
 import { clearCellText } from "../utils/table";
 import { Editor, Element, Transforms, Range } from "slate";
-import { DndContext, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { DndContext, DragOverlay, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
 import { encodeToBase64 } from "../utils/helper";
 import { serializeToText } from "../utils/serializeToText";
 import { createCopiedTableStructure, getRectangleBounds, tableNodeToDom } from "../Elements/Table/tableHelper";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const handleDragEnd = (dragData, editor, resetAll) => {
   const {
     active,
@@ -157,15 +158,15 @@ export const TableProvider = ({
   }, [openSetttings]);
   return /*#__PURE__*/_jsx(TableContext.Provider, {
     value: values,
-    children: /*#__PURE__*/_jsx(DndContext, {
+    children: /*#__PURE__*/_jsxs(DndContext, {
       sensors: sensors,
       onDragEnd: data => handleDragEnd(data, editor, resetAll),
-      children: /*#__PURE__*/_jsx(ClickAwayListener, {
+      children: [/*#__PURE__*/_jsx(ClickAwayListener, {
         onClickAway: () => setTableSelection(getDefaultTableSelection()),
         children: /*#__PURE__*/_jsx("div", {
           children: children
         })
-      })
+      }), /*#__PURE__*/_jsx(DragOverlay, {})]
     })
   });
 };

package/dist/Editor/utils/table.js

@@ -246,7 +246,7 @@ export class TableUtil {
         const isDuplicate = action === "duplicate";
         const isInsertNext = action === "after" || isDuplicate;
         const path = isInsertNext ? Path.next(currentRow) : currentRow;
-        const insertData = isDuplicate ? JSON.parse(JSON.stringify(currentRowData)) : createRow(Array(table.columns).fill(""));
+        const insertData = isDuplicate ? JSON.parse(JSON.stringify(currentRowData)) : createRowOnInsertAbove(currentRowData, currentRow, this.editor);
         Transforms.insertNodes(this.editor, insertData, {
           at: path
         });
@@ -492,16 +492,12 @@ export class TableUtil {
       console.log(err);
     }
   };
-  resizeTableCell = (styleProps, rowNode) => {
+  resizeTableCell = (styleProps, path) => {
     const cellProps = parseByPrefixKey(styleProps, "col.");
-    const [rowData, rowPath] = rowNode;
-    rowData?.children.forEach((_, i) => {
-      const cellPath = [...rowPath, i];
-      Transforms.setNodes(this.editor, {
-        ...cellProps
-      }, {
-        at: cellPath
-      });
+    Transforms.setNodes(this.editor, {
+      ...cellProps
+    }, {
+      at: path
     });
   };
   getTableProps = () => {
@@ -626,14 +622,14 @@ export class TableUtil {
     }
   };
 }
-const createRow = cellText => {
-  const newRow = Array.from(cellText, value => createTableCell(value));
+const createRow = (cellText, other) => {
+  const newRow = Array.from(cellText, value => createTableCell(value, other));
   return {
     type: "table-row",
     children: newRow
   };
 };
-export const createTableCell = text => {
+export const createTableCell = (text, other = {}) => {
   return {
     type: "table-cell",
     children: [{
@@ -644,7 +640,32 @@ export const createTableCell = text => {
     }],
     size: {
       width: 120
+    },
+    ...other
+  };
+};
+const createRowOnInsertAbove = (currentRow, currRowPath, editor) => {
+  const isFirstRow = currRowPath[currRowPath?.length - 1] === 0;
+  const rowChild = currentRow?.children?.map((cell, i) => {
+    let other = {};
+
+    // remove the current row's size and add it on the currently inserting cell
+    if (isFirstRow) {
+      const cellPath = [...currRowPath, i];
+      Transforms.setNodes(editor, {
+        size: null
+      }, {
+        at: cellPath
+      });
+      other = {
+        size: cell?.size
+      };
     }
+    return createTableCell("", other);
+  });
+  return {
+    type: "table-row",
+    children: rowChild
   };
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -68,7 +68,9 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "NODE_OPTIONS='--max_old_space_size=4096' storybook build",
     "publish:npm": "rm -rf dist && mkdir dist &&  babel src/components -d dist --copy-files",
-    "publish:local": "rm -rf /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist --copy-files"
+    "publish:local": "rm -rf /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist --copy-files",
+    "publish:local2": "rm -rf /Users/agmac23/Desktop/surya/sweetpsocial-2.0/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agmac23/Desktop/surya/sweetpsocial-2.0/client/node_modules/@flozy/editor/dist --copy-files",
+    "publish:local3": "rm -rf /Users/agmac23/Desktop/surya/flozy_v2.0/microservices/pages/public && cp -r /Users/agmac23/Desktop/surya/editor/build /Users/agmac23/Desktop/surya/flozy_v2.0/microservices/pages/public"
   },
   "eslintConfig": {
     "extends": [