@flozy/editor 5.2.9 → 5.3.1

package/dist/Editor/CommonEditor.js

@@ -124,7 +124,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   } = otherProps || {};
   const editor = useMemo(() => {
     if (collaborativeEditor) return collaborativeEditor;
-    return withCommon(createEditor(), {
+    const editor = createEditor();
+    editor.needLayout = needLayout;
+    return withCommon(editor, {
       needLayout
     });
   }, [collaborativeEditor]);
@@ -510,7 +512,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
           children: [/*#__PURE__*/_jsx(DragAndDrop, {
             children: /*#__PURE__*/_jsxs(Overlay, {
               children: [/*#__PURE__*/_jsx(Box, {
-                className: `pc-${editorClass || ""} ${hasTopBanner() ? "has-topbanner" : ""} ${!pageColor ? "no-color" : ""} scrollable-content scrollSmooth`,
+                className: `pc-${editorClass || ""} ${hasTopBanner() ? "has-topbanner" : ""} ${!pageColor ? "no-color" : ""} scrollable-content scrollSmooth ${readOnly ? "readOnlyContainer" : ""}`,
                 sx: classes.slateWrapper,
                 id: "slate-wrapper-scroll-container",
                 ref: editorWrapper,

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

@@ -97,15 +97,15 @@ const DataView = props => {
     contentEditable: false,
     "data-title": title,
     children: /*#__PURE__*/_jsxs(DataViewProvider, {
-      initialData: {
+      data: {
         properties,
         layouts,
-        rows,
-        users: users
+        rows
       },
       path: path,
       editor: editor,
       title: title,
+      users: users,
       children: [/*#__PURE__*/_jsx(FilterView, {
         classes: classes,
         onEnter: onEnter,

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

@@ -1,10 +1,12 @@
 import React, { useEffect, useRef, useState } from "react";
-import { Box, Checkbox, Popper } from "@mui/material";
+import { Box, Checkbox, Popper, useTheme } from "@mui/material";
 import CheckBoxTwoToneIcon from "@mui/icons-material/CheckBoxTwoTone";
 import DataTypes from "./DataTypes";
+import useColumnStyles from "./colStyles";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const ColumnView = props => {
+  const theme = useTheme();
   const {
     needAnchor,
     rowIndex,
@@ -18,6 +20,7 @@ const ColumnView = props => {
   const anchorRef = useRef(null);
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
+  const classes = useColumnStyles(theme);
   useEffect(() => {
     if (anchorRef?.current) {
       setAnchorEl(anchorRef?.current);
@@ -42,14 +45,10 @@ const ColumnView = props => {
       label: property?.label,
       readOnly: readOnly
     }), needAnchor && !readOnly ? /*#__PURE__*/_jsx(Popper, {
-      sx: {
-        zIndex: 1000,
-        marginTop: "20px !important"
-      },
+      sx: classes.root,
       open: open,
       anchorEl: anchorEl,
       placement: "left",
-      container: anchorRef?.current,
       className: `tv-tr-pop ${selected ? "active" : ""}`,
       disablePortal: true,
       children: /*#__PURE__*/_jsx(Checkbox, {

package/dist/Editor/Elements/DataView/Layouts/Options/styles.js

@@ -172,7 +172,7 @@ const useOptionsStyles = (theme, appTheme) => ({
       marginBottom: "8px"
     },
     [theme?.breakpoints?.between("xs", "md")]: {
-      width: "calc(100% - 24px)"
+      width: "100%"
     }
   }
 });

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

@@ -2,7 +2,6 @@ import React from "react";
 import { Box } from "@mui/material";
 import { useDataView } from "../Providers/DataViewProvider";
 import ColumnView from "./ColumnView";
-// import Formula from "./Formula";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const RenderRow = props => {

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

@@ -0,0 +1,10 @@
+const useColumnStyles = theme => ({
+  root: {
+    zIndex: 1000,
+    marginTop: "20px !important",
+    [theme?.breakpoints?.between("xs", "md")]: {
+      left: "-32px !important"
+    }
+  }
+});
+export default useColumnStyles;

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

@@ -1,5 +1,5 @@
 import React, { createContext, useContext, useEffect, useState } from "react";
-import { Transforms } from "slate";
+import { Editor, Transforms, Node } from "slate";
 import { PROPERTY_DEFAULTS } from "../Layouts/Options/Constants";
 import multiSortRows from "../Utils/multiSortRows";
 import globalSearch from "../Utils/globalSearch";
@@ -29,10 +29,12 @@ export const DataViewProvider = ({
   ...props
 }) => {
   const {
-    initialData,
+    data: initialData,
     path,
-    editor
+    editor,
+    users: peoples
   } = props;
+  const dataViewNode = Node.get(editor, path);
   const [layouts, setLayouts] = useState(initialData?.layouts || []);
   const [seletectedLayout, setSelectedLayout] = useState({
     ...(layouts[0] || {})
@@ -44,15 +46,21 @@ export const DataViewProvider = ({
   const [rows, setRows] = useState(initialData?.rows || []);
   const [selectedRows, setSelectedRows] = useState([]);
   const [search, setSearch] = useState("");
-  let {
-    users
-  } = initialData || {};
-  users = users?.map(m => {
+  const users = peoples?.map(m => {
     return {
       value: m?.name
     };
   });
 
+  // for undo and redo
+  // minimal added for perforamnce issue avoid
+  useEffect(() => {
+    setRows(dataViewNode?.rows);
+  }, [dataViewNode?.rows?.length]);
+  useEffect(() => {
+    setProperties(dataViewNode?.properties);
+  }, [dataViewNode?.properties?.length]);
+
   // re-order when sort val changes
   useEffect(() => {
     if ((sort?.length > 0 || search) && rows?.length > 0) {

package/dist/Editor/Styles/EditorStyles.js

@@ -288,6 +288,11 @@ const editorStyles = ({
     "& ::selection": {
       color: "inherit",
       background: "#EAEBFE"
+    },
+    "&.readOnlyContainer": {
+      "& .max-content": {
+        paddingBottom: "0px !important"
+      }
     }
   },
   fullScreenWrapper: {

package/dist/Editor/common/RnD/index.js

@@ -533,7 +533,7 @@ const RnD = props => {
       children: [/*#__PURE__*/_jsx("div", {
         id: `opt_ref_${str_path}`,
         style: {
-          display: "block",
+          display: readOnly ? "none" : "block",
           position: "absolute",
           left: "-8px",
           top: "-30px",

package/dist/Editor/plugins/withHTML.js

@@ -2,7 +2,8 @@ import { Transforms, Editor, Element, Node, Path } from "slate";
 import deserialize from "../helper/deserialize";
 import { decodeAndParseBase64 } from "../utils/helper";
 const avoidDefaultInsert = ["table", "grid"];
-const LIST_TAGS = ["ol", "ul", "img", "table"];
+const NON_TEXT_TAGS = ["ol", "ul", "img", "table", "video", "a", "button", "GOOGLE-SHEETS-HTML-ORIGIN"];
+const ALLOWED_TEXT_NODES = ["paragraph", "title", "headingOne", "headingTwo", "headingThree"];
 const loopChildren = (children = [], defaultInsert) => {
   if (!children?.length) {
     return defaultInsert;
@@ -62,13 +63,18 @@ const insertAtNextNode = (editor, formattedFragment) => {
     console.log(err);
   }
 };
-const handleInsert = (editor, defaultInsert, fragment = []) => {
-  if (getCurrentElementText(editor) && fragment.some(f => f.type === "table")) {
-    insertAtNextNode(editor, fragment);
-  } else {
-    defaultInsert();
-  }
-};
+
+// const handleInsert = (editor, defaultInsert, fragment = []) => {
+//   if (
+//     getCurrentElementText(editor) &&
+//     fragment.some((f) => f.type === "table")
+//   ) {
+//     insertAtNextNode(editor, fragment);
+//   } else {
+//     defaultInsert();
+//   }
+// };
+
 const getTableCellChild = (fragment = []) => {
   const table = fragment.find(node => node.type === "table");
   const row = table?.children?.find(node => node.type === "table-row");
@@ -122,20 +128,14 @@ const withHtml = editor => {
     const html = data?.getData("text/html");
     const currentEl = getCurrentElement(editor);
     const eltype = currentEl?.type;
-    const isTitlePath = editor?.selection?.anchor?.path[0] === 0;
+    const firstNode = editor?.children?.[0];
+    const titlePath = firstNode?.type === "topbanner" ? 1 : 0;
+    const isTitlePath = editor.needLayout && editor?.selection?.anchor?.path[0] === titlePath;
     if (slateHTML && !formatFragment[eltype]) {
       const [tableCellNode] = Editor.nodes(editor, {
         match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-cell"
       });
       const decoded = decodeAndParseBase64(slateHTML);
-      if (decoded && decoded[0] && decoded[0]?.type !== "paragraph" && isTitlePath) {
-        decoded.unshift({
-          type: "title",
-          children: [{
-            text: ""
-          }]
-        });
-      }
       if (tableCellNode) {
         const tableCellChild = getTableCellChild(decoded);
         if (tableCellChild?.length) {
@@ -180,52 +180,38 @@ const withHtml = editor => {
           Transforms.insertText(editor, text);
         }
       } else {
-        handleInsert(editor, () => {
-          if (isTitlePath) {
-            Transforms.insertNodes(editor, [{
-              type: "title",
-              children: [{
-                text: ""
-              }]
-            }], {
-              at: [0]
-            });
-          }
-          insertData(data);
-        }, decoded);
+        const isTextNode = ALLOWED_TEXT_NODES.includes(decoded?.[0]?.type);
+        if (isTitlePath && !isTextNode) {
+          insertAtNextNode(editor, decoded);
+          return;
+        }
+        const currentText = getCurrentElementText(editor);
+        if (currentText && !isTextNode) {
+          insertAtNextNode(editor, decoded);
+          return;
+        }
+        insertData(data);
       }
     } else if (html) {
       const parsed = new DOMParser().parseFromString(html, "text/html");
       const rootElement = parsed.body || parsed.documentElement;
-      const isList = LIST_TAGS.includes(rootElement.firstChild.tagName.toLowerCase());
-
-      // if selection is in title add the empty paragraph
-      if (isTitlePath && isList) {
-        // Check if the first child exists and is not a paragraph
-        if (!rootElement.firstChild || rootElement.firstChild.tagName.toLowerCase() !== "p") {
-          // Create a new empty paragraph element
-          const emptyParagraph = parsed.createElement("p");
-
-          // Insert the empty paragraph at the beginning
-          if (rootElement.firstChild) {
-            rootElement.insertBefore(emptyParagraph, rootElement.firstChild);
-          } else {
-            rootElement.appendChild(emptyParagraph);
-          }
-        }
-      }
+      const isNonText = rootElement ? rootElement?.querySelector(NON_TEXT_TAGS.toString()) : false;
       const isGoogleSheet = parsed.body.querySelector("google-sheets-html-origin");
       if (isGoogleSheet) {
         if (editor.isChatEditor) {
           return;
         }
-        const table = parsed.body.querySelector("table");
+        const table = rootElement.querySelector("table");
         const colGrp = table.querySelector("colgroup");
         if (colGrp) {
           colGrp.remove();
         }
         const fragment = deserialize(table);
-        Transforms.insertFragment(editor, [fragment]);
+        if (isTitlePath) {
+          insertAtNextNode(editor, [fragment]);
+        } else {
+          Transforms.insertFragment(editor, [fragment]);
+        }
         return;
       }
       const fragment = deserialize(parsed.body);
@@ -239,7 +225,16 @@ const withHtml = editor => {
       if (editor.isChatEditor && is_img_table) {
         return;
       }
-      handleInsert(editor, () => Transforms.insertFragment(editor, formattedFragment), formattedFragment);
+      if (isTitlePath && isNonText) {
+        insertAtNextNode(editor, formattedFragment);
+        return;
+      }
+      const currentText = getCurrentElementText(editor);
+      if (currentText && isNonText) {
+        insertAtNextNode(editor, formattedFragment);
+        return;
+      }
+      Transforms.insertFragment(editor, formattedFragment);
       return;
     } else {
       insertData(data);

package/package.json

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