@flozy/editor 5.1.2 → 5.1.4

package/dist/Editor/utils/table.js

@@ -1,6 +1,6 @@
 import { Transforms, Editor, Range, Element, Path, Node } from "slate";
 import { ReactEditor } from "slate-react";
-import { customInsertNode, getNode } from "./helper";
+import { customInsertNode } from "./helper";
 export const DEFAULT_TABLE_NODE = () => ({
   type: "table",
   children: [{
@@ -13,10 +13,7 @@ export const DEFAULT_TABLE_NODE = () => ({
           text: ""
         }],
         cellBgColor: "#FFFFFF"
-      }],
-      size: {
-        width: 120
-      }
+      }]
     }, {
       type: "table-cell",
       children: [{
@@ -25,10 +22,7 @@ export const DEFAULT_TABLE_NODE = () => ({
           text: ""
         }],
         cellBgColor: "#FFFFFF"
-      }],
-      size: {
-        width: 120
-      }
+      }]
     }, {
       type: "table-cell",
       children: [{
@@ -37,10 +31,7 @@ export const DEFAULT_TABLE_NODE = () => ({
           text: ""
         }],
         cellBgColor: "#FFFFFF"
-      }],
-      size: {
-        width: 120
-      }
+      }]
     }]
   }, {
     type: "table-row",
@@ -52,10 +43,7 @@ export const DEFAULT_TABLE_NODE = () => ({
           text: ""
         }],
         cellBgColor: "#FFFFFF"
-      }],
-      size: {
-        width: 120
-      }
+      }]
     }, {
       type: "table-cell",
       children: [{
@@ -64,10 +52,7 @@ export const DEFAULT_TABLE_NODE = () => ({
           text: ""
         }],
         cellBgColor: "#FFFFFF"
-      }],
-      size: {
-        width: 120
-      }
+      }]
     }, {
       type: "table-cell",
       children: [{
@@ -78,7 +63,9 @@ export const DEFAULT_TABLE_NODE = () => ({
         cellBgColor: "#FFFFFF"
       }],
       size: {
-        width: 120
+        widthInPercent: 100,
+        height: 100,
+        width: 365.3307291666667
       }
     }]
   }, {
@@ -91,10 +78,7 @@ export const DEFAULT_TABLE_NODE = () => ({
           text: ""
         }],
         cellBgColor: "#FFFFFF"
-      }],
-      size: {
-        width: 120
-      }
+      }]
     }, {
       type: "table-cell",
       children: [{
@@ -103,10 +87,7 @@ export const DEFAULT_TABLE_NODE = () => ({
           text: ""
         }],
         cellBgColor: "#FFFFFF"
-      }],
-      size: {
-        width: 120
-      }
+      }]
     }, {
       type: "table-cell",
       children: [{
@@ -117,14 +98,14 @@ export const DEFAULT_TABLE_NODE = () => ({
         cellBgColor: "#FFFFFF"
       }],
       size: {
-        width: 120
+        height: 300,
+        widthInPercent: 100
       }
     }]
   }],
   rows: 3,
   columns: 3
 });
-const isFreeGridTable = n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "freegridItem" && n.childType === "table";
 const prefixKey = (obj, pk = "") => {
   return Object.keys(obj).reduce((a, b) => {
     a[`${pk}${b}`] = obj[b];
@@ -163,49 +144,12 @@ export class TableUtil {
     customInsertNode(this.editor, newTable);
   };
   removeTable = () => {
-    const [freeGridItem] = Editor.nodes(this.editor, {
-      match: isFreeGridTable
+    Transforms.removeNodes(this.editor, {
+      match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
+      // mode:'highest'
     });
-    if (freeGridItem) {
-      Transforms.removeNodes(this.editor, {
-        match: isFreeGridTable
-      });
-    } else {
-      Transforms.removeNodes(this.editor, {
-        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
-      });
-    }
-  };
-  duplicateTable = () => {
-    const {
-      selection
-    } = this.editor;
-    if (!!selection && Range.isCollapsed(selection)) {
-      const [freeGridItem] = Editor.nodes(this.editor, {
-        match: isFreeGridTable
-      });
-      let clone;
-      let path;
-      if (freeGridItem) {
-        const [freeGridNode, freeGridPath] = freeGridItem;
-        clone = freeGridNode;
-        path = freeGridPath;
-      } else {
-        const [[tableNode, tablePath]] = Editor.nodes(this.editor, {
-          match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
-        });
-        clone = tableNode;
-        path = tablePath;
-      }
-      const nextPath = Path.next(path);
-      if (clone) {
-        const clonedNode = JSON.parse(JSON.stringify(clone));
-        Transforms.insertNodes(this.editor, clonedNode, {
-          at: nextPath
-        });
-      }
-    }
   };
+
   getDOMNode = path => {
     try {
       const [tableNode] = Editor.nodes(this.editor, {
@@ -242,12 +186,9 @@ export class TableUtil {
         const [[table, tablePath]] = Editor.nodes(this.editor, {
           match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
         });
-        const [currentRowData, currentRow] = tableNode;
-        const isDuplicate = action === "duplicate";
-        const isInsertNext = action === "after" || isDuplicate;
-        const path = isInsertNext ? Path.next(currentRow) : currentRow;
-        const insertData = isDuplicate ? JSON.parse(JSON.stringify(currentRowData)) : createRowOnInsertAbove(currentRowData, currentRow, this.editor);
-        Transforms.insertNodes(this.editor, insertData, {
+        const [, currentRow] = tableNode;
+        const path = action === "after" ? Path.next(currentRow) : currentRow;
+        Transforms.insertNodes(this.editor, createRow(Array(table.columns).fill("")), {
           at: path
         });
         Transforms.setNodes(this.editor, {
@@ -258,23 +199,6 @@ export class TableUtil {
       }
     }
   };
-  clearRow = () => {
-    const {
-      selection
-    } = this.editor;
-    if (!!selection && Range.isCollapsed(selection)) {
-      const [tableRow] = Editor.nodes(this.editor, {
-        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-row"
-      });
-      if (tableRow) {
-        const [tableRowNode, tableRowPath] = tableRow;
-        tableRowNode?.children?.forEach((cell, index) => {
-          const currentCellPath = [...tableRowPath, index];
-          clearCellText(this.editor, currentCellPath);
-        });
-      }
-    }
-  };
   deleteRow = () => {
     try {
       const {
@@ -335,58 +259,6 @@ export class TableUtil {
       }
     }
   };
-  duplicateColumn = () => {
-    const {
-      selection
-    } = this.editor;
-    if (!!selection && Range.isCollapsed(selection)) {
-      const [tableNode] = Editor.nodes(this.editor, {
-        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-cell"
-      });
-      if (tableNode) {
-        const [[table, tablePath]] = Editor.nodes(this.editor, {
-          match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
-        });
-        const [, currentCell] = tableNode;
-        const currentCellPath = currentCell;
-        const insertNextCellPath = Path.next(currentCell);
-        for (let row = 0; row < table.rows; row++) {
-          currentCellPath[currentCellPath.length - 2] = row;
-          insertNextCellPath[insertNextCellPath?.length - 2] = row;
-          const cellNode = getNode(this.editor, currentCellPath);
-          Transforms.insertNodes(this.editor, JSON.parse(JSON.stringify(cellNode)), {
-            at: insertNextCellPath
-          });
-        }
-        Transforms.setNodes(this.editor, {
-          columns: table.columns + 1
-        }, {
-          at: tablePath
-        });
-      }
-    }
-  };
-  clearColumn = () => {
-    const {
-      selection
-    } = this.editor;
-    if (!!selection && Range.isCollapsed(selection)) {
-      const [tableNode] = Editor.nodes(this.editor, {
-        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-cell"
-      });
-      if (tableNode) {
-        const [[table]] = Editor.nodes(this.editor, {
-          match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
-        });
-        const [, currentCell] = tableNode;
-        const currentCellPath = currentCell;
-        for (let row = 0; row < table.rows; row++) {
-          currentCellPath[currentCellPath.length - 2] = row;
-          clearCellText(this.editor, currentCellPath);
-        }
-      }
-    }
-  };
   deleteColumn = () => {
     try {
       const {
@@ -454,7 +326,6 @@ export class TableUtil {
         }, {
           at: currentCellPath
         });
-        applyColumnStyle(this.editor, currentCellPath, currentTablePath, cellProps, tableProps?.rows);
 
         // cell bg entire
         if (cellProps?.entireBgColor || tableProps?.borderColor || rowProps?.borderColor) {
@@ -492,14 +363,6 @@ export class TableUtil {
       console.log(err);
     }
   };
-  resizeTableCell = (styleProps, path) => {
-    const cellProps = parseByPrefixKey(styleProps, "col.");
-    Transforms.setNodes(this.editor, {
-      ...cellProps
-    }, {
-      at: path
-    });
-  };
   getTableProps = () => {
     const {
       selection
@@ -622,14 +485,14 @@ export class TableUtil {
     }
   };
 }
-const createRow = (cellText, other) => {
-  const newRow = Array.from(cellText, value => createTableCell(value, other));
+const createRow = cellText => {
+  const newRow = Array.from(cellText, value => createTableCell(value));
   return {
     type: "table-row",
     children: newRow
   };
 };
-export const createTableCell = (text, other = {}) => {
+export const createTableCell = text => {
   return {
     type: "table-cell",
     children: [{
@@ -637,35 +500,7 @@ export const createTableCell = (text, other = {}) => {
       children: [{
         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
+    }]
   };
 };
 
@@ -714,43 +549,4 @@ const createTableNode = (cellText, rows, columns) => {
     columns
   };
   return tableNode;
-};
-const columnStyleKeys = ["entireBgColor", "entireBorderColor", "entireTextColor", "entireFontFamily", "entireFontWeight", "entireTextSize"];
-const applyColumnStyle = (editor, currentCellPath, currentTablePath, cellProps, rows) => {
-  const colStyle = columnStyleKeys.reduce((acc, key) => {
-    const style = cellProps[key];
-    if (style) {
-      acc[key] = style;
-    }
-    return acc;
-  }, {});
-  for (let r = 0; r < rows; r++) {
-    const cellPosition = currentCellPath[currentCellPath?.length - 1]; // cell position on each row as per selected column cell
-
-    Transforms.setNodes(editor, colStyle, {
-      at: [...currentTablePath, r, cellPosition]
-    });
-  }
-};
-export const clearCellText = (editor, currentCellPath) => {
-  try {
-    const existingCellNode = getNode(editor, currentCellPath);
-    Transforms.removeNodes(editor, {
-      at: currentCellPath
-    });
-    Transforms.insertNodes(editor, {
-      ...(existingCellNode || {}),
-      children: [{
-        type: "paragraph",
-        children: [{
-          text: ""
-        }],
-        cellBgColor: "#FFFFFF"
-      }]
-    }, {
-      at: currentCellPath
-    });
-  } catch (err) {
-    console.log(err);
-  }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "5.1.2",
+  "version": "5.1.4",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"

package/dist/Editor/Elements/DataView/DataView.js

@@ -1,101 +0,0 @@
-import React from "react";
-import { Node, Path, Transforms } from "slate";
-import { ReactEditor, useSlateStatic } from "slate-react";
-import { Box, useTheme } from "@mui/material";
-import { DataViewProvider } from "./Providers/DataViewProvider";
-import useDataViewStyles from "./styles";
-import LayoutView from "./Layouts";
-import FilterView from "./Layouts/FilterView";
-import { insertLineBreakAtEndOfPath } from "../../utils/helper";
-import { useEditorContext } from "../../hooks/useMouseMove";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const DataView = props => {
-  const {
-    theme: appTheme
-  } = useEditorContext();
-  const theme = useTheme();
-  const editor = useSlateStatic();
-  const {
-    attributes,
-    children,
-    element,
-    customProps,
-    title
-  } = props;
-  const {
-    CHARACTERS,
-    readOnly
-  } = customProps || {};
-  const {
-    properties,
-    layouts,
-    rows
-  } = element;
-  const classes = useDataViewStyles(theme, appTheme);
-  const path = ReactEditor.findPath(editor, element);
-  const onDuplicate = () => {
-    try {
-      const newPath = ReactEditor.findPath(editor, element);
-      const dataViewNode = Node.get(editor, newPath);
-      const cloneNode = JSON.parse(JSON.stringify(dataViewNode));
-      const toPath = Path.next(Path.parent(newPath));
-      Transforms.insertNodes(editor, [{
-        type: "paragraph",
-        children: [{
-          ...cloneNode
-        }]
-      }], {
-        at: toPath
-      });
-    } catch (err) {
-      console.log(err);
-    }
-  };
-  const onDelete = () => {
-    try {
-      const newPath = ReactEditor.findPath(editor, element);
-      Transforms.removeNodes(editor, {
-        at: newPath
-      });
-    } catch (err) {
-      console.log(err);
-    }
-  };
-  const onEnter = () => {
-    try {
-      const newPath = ReactEditor.findPath(editor, element);
-      const toPath = Path.previous(Path.parent(newPath));
-      insertLineBreakAtEndOfPath(editor, toPath);
-    } catch (err) {
-      console.log(err);
-    }
-  };
-  return /*#__PURE__*/_jsx(Box, {
-    ...attributes,
-    className: "fe-dataview",
-    sx: classes.root,
-    children: /*#__PURE__*/_jsxs(DataViewProvider, {
-      initialData: {
-        properties,
-        layouts,
-        rows,
-        users: CHARACTERS,
-        tableTitle: title
-      },
-      path: path,
-      editor: editor,
-      children: [/*#__PURE__*/_jsx(FilterView, {
-        classes: classes,
-        onEnter: onEnter,
-        onDelete: onDelete,
-        onDuplicate: onDuplicate,
-        readOnly: readOnly
-      }), /*#__PURE__*/_jsx(LayoutView, {
-        readOnly: readOnly,
-        children: children
-      })]
-    })
-  });
-};
-export default DataView;

package/dist/Editor/Elements/DataView/DataViewButton.js

@@ -1,23 +0,0 @@
-import React from "react";
-import ToolbarIcon from "../../common/ToolbarIcon";
-import Icon from "../../common/Icon";
-import { insertDataView } from "../../utils/dataView";
-import { jsx as _jsx } from "react/jsx-runtime";
-const DataViewButton = props => {
-  const {
-    editor,
-    icoBtnType
-  } = props;
-  const onClick = () => {
-    insertDataView(editor);
-  };
-  return /*#__PURE__*/_jsx(ToolbarIcon, {
-    title: "Dynamic Table",
-    onClick: onClick,
-    icon: /*#__PURE__*/_jsx(Icon, {
-      icon: "dataView"
-    }),
-    icoBtnType: icoBtnType
-  });
-};
-export default DataViewButton;

package/dist/Editor/Elements/DataView/Layouts/ColumnView.js

@@ -1,59 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import { Box, Checkbox, Popper } from "@mui/material";
-import DataTypes from "./DataTypes";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const ColumnView = props => {
-  const {
-    needAnchor,
-    rowIndex,
-    row,
-    property,
-    onSelect,
-    selected,
-    readOnly
-  } = props;
-  const DataType = DataTypes[property?.type] || DataTypes["text"];
-  const anchorRef = useRef(null);
-  const [anchorEl, setAnchorEl] = useState(null);
-  const open = Boolean(anchorEl);
-  useEffect(() => {
-    if (anchorRef?.current) {
-      setAnchorEl(anchorRef?.current);
-    }
-  }, [anchorRef?.current]);
-  const handleSelect = id => e => {
-    onSelect(id, e.target.checked);
-  };
-  return /*#__PURE__*/_jsxs(Box, {
-    component: "td",
-    ref: anchorRef,
-    children: [/*#__PURE__*/_jsx(DataType, {
-      options: property?.options,
-      property: property?.key,
-      value: row[property?.key] || "",
-      rowIndex: rowIndex,
-      label: property?.label,
-      readOnly: readOnly
-    }), needAnchor && !readOnly ? /*#__PURE__*/_jsx(Popper, {
-      sx: {
-        zIndex: 1000
-      },
-      open: open,
-      anchorEl: anchorEl,
-      placement: "left",
-      container: anchorRef?.current,
-      className: `tv-tr-pop ${selected ? "active" : ""}`,
-      children: /*#__PURE__*/_jsx(Checkbox, {
-        onClick: handleSelect(row?.id),
-        size: "small",
-        className: "tv-ck-box",
-        sx: {
-          mr: 0
-        },
-        checked: selected
-      })
-    }) : null]
-  });
-};
-export default ColumnView;

package/dist/Editor/Elements/DataView/Layouts/DataTypes/CheckType.js

@@ -1,30 +0,0 @@
-import React from "react";
-import { useDataView } from "../../Providers/DataViewProvider";
-import Checkbox from "@mui/material/Checkbox";
-import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
-import CheckCircleIcon from "@mui/icons-material/CheckCircle";
-import { jsx as _jsx } from "react/jsx-runtime";
-const CheckType = props => {
-  const {
-    rowIndex,
-    property,
-    value,
-    readOnly
-  } = props;
-  const {
-    onChange
-  } = useDataView();
-  const handleChange = e => {
-    onChange(rowIndex, {
-      [property]: e?.target?.checked
-    });
-  };
-  return /*#__PURE__*/_jsx(Checkbox, {
-    checked: value,
-    icon: /*#__PURE__*/_jsx(CheckCircleOutlineIcon, {}),
-    checkedIcon: /*#__PURE__*/_jsx(CheckCircleIcon, {}),
-    onChange: handleChange,
-    disabled: readOnly
-  }, rowIndex);
-};
-export default CheckType;