@flozy/editor 8.0.3 → 8.0.5

package/dist/Editor/ChatEditor.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useRef, useState, useImperativeHandle, forwardRef } from "react";
-import { Editable, Slate, ReactEditor } from "slate-react";
-import { createEditor, Transforms, Editor } from "slate";
+import { Editable, Slate, ReactEditor } from 'slate-react';
+import { createEditor, Transforms, Editor } from 'slate';
 import withCommon from "./hooks/withCommon";
 import { getBlock, getMarked, serializeMentions } from "./utils/chatEditor/SlateUtilityFunctions";
 import MiniTextFormat from "./Toolbar/PopupTool/MiniTextFormat";
@@ -35,13 +35,13 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const classes = usePopupStyle(theme);
   const convertedContent = draftToSlate({
     data: content && content?.length > 0 ? content : [{
-      type: "paragraph",
+      type: 'paragraph',
       children: [{
-        text: ""
+        text: ''
       }]
     }]
   });
-  const [value] = useState(convertedContent);
+  const [value, setValue] = useState(convertedContent);
   const debouncedValue = useRef(value);
   const debounced = useDebouncedCallback(
   // function
@@ -142,6 +142,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const mentionsRef = useRef();
   const customProps = {
     ...(otherProps || {}),
+    hideTools: ["settings", "add_column", "drag", "resize"],
     readOnly: isReadOnly,
     editorPlaceholder: "Write Something",
     page_id: 1
@@ -216,7 +217,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
         editor
       });
     } else if (event.key === "Enter" && !isMobile) {
-      const isEmpty = debouncedValue?.current.length === 1 && debouncedValue?.current[0].type === "paragraph" && debouncedValue?.current[0].children.length === 1 && debouncedValue?.current[0].children[0].text === "";
+      const isEmpty = debouncedValue?.current.length === 1 && debouncedValue?.current[0].type === 'paragraph' && debouncedValue?.current[0].children.length === 1 && debouncedValue?.current[0].children[0].text === '';
       if (isEmpty) {
         event.preventDefault();
         return;

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

@@ -16,7 +16,10 @@ const ColumnView = props => {
     selected,
     readOnly
   } = props;
-  const DataType = DataTypes[property?.type] || DataTypes["text"];
+  const {
+    type
+  } = property;
+  const DataType = DataTypes[type] || DataTypes["text"];
   const anchorRef = useRef(null);
   const [anchorEl, setAnchorEl] = useState(null);
   const [popperRefresh, setPopperRefresh] = useState(new Date().getTime());

package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/Select.js

@@ -153,11 +153,9 @@ export default function Select(props) {
         ...optionProps,
         children: /*#__PURE__*/_jsx(Chip, {
           label: option.label || option.value || "",
+          classes: classes.chipText,
           sx: {
-            background: option.color || appTheme?.palette?.editor?.tv_border1,
-            "& .MuiChip-label": {
-              paddingLeft: "12px !important"
-            }
+            background: option.color || appTheme?.palette?.editor?.tv_border1
           },
           avatar: /*#__PURE__*/_jsx(AvatarIcon, {
             option: option,
@@ -172,6 +170,7 @@ export default function Select(props) {
     fullWidth: true,
     renderInput: params => {
       return /*#__PURE__*/_jsx(TextField, {
+        fullWidth: true,
         size: "small",
         ...params,
         placeholder: placeholder

package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/styles.js

@@ -3,7 +3,7 @@ const useCompStyles = (theme, appTheme) => ({
     border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
     background: appTheme?.palette?.editor?.tv_pop_bg,
     color: appTheme?.palette?.editor?.tv_text,
-    fontSize: '14px',
+    fontSize: "14px",
     borderRadius: "8px",
     [theme?.breakpoints?.between("xs", "md")]: {},
     "& ul": {
@@ -63,6 +63,11 @@ const useCompStyles = (theme, appTheme) => ({
         }
       }
     }
+  },
+  chipText: {
+    "& .MuiChip-label": {
+      paddingLeft: "12px !important"
+    }
   }
 });
 export default useCompStyles;

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

@@ -1,7 +1,7 @@
 import React from "react";
 import DatePicker from "react-datepicker";
-import { useDataView } from "../../Providers/DataViewProvider";
 import { Grid } from "@mui/material";
+import { useDataView } from "../../Providers/DataViewProvider";
 import useCommonStyle from "../../../../commonStyle";
 import { useEditorContext } from "../../../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";

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

@@ -11,6 +11,7 @@ const useTableStyles = (theme, appTheme) => ({
     borderRadius: "7px 7px 0px 0px",
     overflow: "hidden",
     border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
+    tableLayout: "fixed",
     "& thead": {
       background: appTheme?.palette?.editor?.tv_header,
       height: "40px"
@@ -40,6 +41,11 @@ const useTableStyles = (theme, appTheme) => ({
     "& th, tr, td": {
       border: `1px solid ${appTheme?.palette?.editor?.tv_border}`
     },
+    "& th, & td": {
+      overflowX: "clip",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    },
     "& .tv-act-btn": {
       color: appTheme?.palette?.editor?.tv_text,
       textTransform: "none",
@@ -86,13 +92,18 @@ const useTableStyles = (theme, appTheme) => ({
           paddingTop: "3px",
           paddingBottom: "3px",
           paddingLeft: "3px",
-          maxWidth: "250px",
+          // maxWidth: "250px",
           overflow: "hidden",
           position: "relative",
           "& .tv-ms-tag-wrpr": {
             display: "flex",
             flexWrap: "nowrap",
-            overflow: "auto"
+            overflow: "auto",
+            minWidth: "58px",
+            "& .MuiChip-deleteIcon": {
+              minWidth: "22px",
+              minHeight: "22px"
+            }
           },
           "&.Mui-disabled": {
             "& input": {

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

@@ -60,6 +60,7 @@ const SortIcon = props => {
 };
 const THead = props => {
   const thRef = useRef(null);
+  const [headerTextWidth, setHeaderTextWidth] = useState(200);
   const {
     iconType,
     isSort,
@@ -77,6 +78,13 @@ const THead = props => {
       minWidth: 30
     }
   });
+  const finalWidth = size?.width < headerTextWidth ? headerTextWidth : size?.width || 200;
+  useEffect(() => {
+    if (thRef?.current) {
+      const tw = (thRef?.current?.querySelectorAll(".dht-text")[0]?.getBoundingClientRect()?.width || 0) + 16 + 30;
+      setHeaderTextWidth(tw);
+    }
+  }, [thRef?.current, m?.label]);
   useEffect(() => {
     if (isDone) {
       handleResize({
@@ -87,9 +95,9 @@ const THead = props => {
   }, [isDone]);
   return /*#__PURE__*/_jsxs("th", {
     style: {
-      minWidth: size?.width || 200,
-      maxWidth: size?.width || 200,
-      width: size?.width || 200
+      minWidth: finalWidth,
+      maxWidth: finalWidth,
+      width: finalWidth
     },
     ref: thRef,
     children: [/*#__PURE__*/_jsx(Box, {
@@ -107,7 +115,10 @@ const THead = props => {
         }),
         fullWidth: true,
         onClick: onEditProperty(m),
-        children: m.label
+        children: /*#__PURE__*/_jsx("span", {
+          className: "dht-text",
+          children: m.label
+        })
       })
     }), /*#__PURE__*/_jsx(Resizer, {
       classes: classes,

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

@@ -133,7 +133,8 @@ const Table = props => {
   const classes = TableStyles(editorTheme);
   const {
     readOnly,
-    isMobile
+    isMobile,
+    hideTools = []
   } = customProps;
   const [openSetttings, setOpenSettings] = useState(false);
   const [exandTools, setExpandTools] = useState(null);
@@ -304,16 +305,16 @@ const Table = props => {
           ...attributes,
           children: children
         })
-      }), /*#__PURE__*/_jsx(AddRowCol, {
+      }), !hideTools.includes("add_column") && /*#__PURE__*/_jsx(AddRowCol, {
         ...commonAddBtnProps,
         addType: "col",
         onAdd: addCol
       })]
-    }), /*#__PURE__*/_jsx(AddRowCol, {
+    }), !hideTools.includes("add_column") && /*#__PURE__*/_jsx(AddRowCol, {
       ...commonAddBtnProps,
       addType: "row",
       onAdd: addRow
-    }), !readOnly && /*#__PURE__*/_jsx(ToolBar, {
+    }), !readOnly && !hideTools.includes("settings") && /*#__PURE__*/_jsx(ToolBar, {
       selected: selected,
       showTool: showTool,
       classes: classes,

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

@@ -48,7 +48,8 @@ const TableCell = props => {
     customProps
   } = props;
   const {
-    readOnly
+    readOnly,
+    hideTools = []
   } = customProps;
   const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
   const {
@@ -106,8 +107,8 @@ const TableCell = props => {
   const isFirstRow = row === 0;
   const isFirstColumn = column === 0;
   const [hoverRow, hoverCol] = hoverPath ? hoverPath.slice(-2) : [];
-  const showColDrag = isFirstRow && hoverCol === column && !resizing && !readOnly;
-  const showRowDrag = isFirstColumn && hoverRow === row && !resizing && !readOnly;
+  const showColDrag = isFirstRow && hoverCol === column && !resizing && !readOnly && !hideTools.includes("drag");
+  const showRowDrag = isFirstColumn && hoverRow === row && !resizing && !readOnly && !hideTools.includes("drag");
   const [parentProps] = tableNode || [{}];
   const [rowProps] = rowNode || [{}];
   const tableDOM = table.getDOMNode(path, true);

package/dist/Editor/Toolbar/Mini/MiniToolbar.js

@@ -67,6 +67,7 @@ const MiniToolbar = props => {
     if (data) {
       setToolTip(false);
       setData(null);
+      setPopper(null);
     }
   }, [data]);
   useEffect(() => {

package/dist/Editor/plugins/withHTML.js

@@ -238,9 +238,9 @@ const withHtml = editor => {
       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;
-        }
+        // if (editor.isChatEditor) {
+        //   return;
+        // }
         const table = rootElement.querySelector("table");
         const colGrp = table.querySelector("colgroup");
         if (colGrp) {
@@ -256,15 +256,18 @@ const withHtml = editor => {
       }
       const fragment = deserialize(parsed.body);
       const formattedFragment = formatFragment[eltype] ? formatFragment[eltype](fragment) : fragment;
-      let is_img_table = false;
-      formattedFragment.map(f => {
-        if (f.type === "image" || f?.type?.includes("table")) {
-          is_img_table = true;
-        }
-      });
-      if (editor.isChatEditor && is_img_table) {
-        return;
-      }
+
+      // let is_img_table = false;
+      // formattedFragment.map((f) => {
+      //   if (f.type === "image" || f?.type?.includes("table")) {
+      //     is_img_table = true;
+      //   }
+      // });
+
+      // if (editor.isChatEditor && is_img_table) {
+      //   return;
+      // }
+
       if (isTitlePath && isNonText) {
         insertAtNextNode(editor, formattedFragment);
         return;

package/dist/Editor/utils/chatEditor/SlateUtilityFunctions.js

@@ -8,6 +8,9 @@ import { isEmptyTextNode } from "../../helper";
 import { getBreakPointsValue } from "../../helper/theme";
 import insertNewLine from "../insertNewLine";
 import { getBorderColor } from "../helper";
+import Table from "../../Elements/Table/Table";
+import TableRow from "../../Elements/Table/TableRow";
+import TableCell from "../../Elements/Table/TableCell";
 import { jsx as _jsx } from "react/jsx-runtime";
 const alignment = ["alignLeft", "alignRight", "alignCenter"];
 const list_types = ["orderedList", "unorderedList"];
@@ -406,6 +409,26 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx(Mentions, {
         ...props
       });
+    case "table":
+      return /*#__PURE__*/_jsx(Table, {
+        ...props
+      });
+    case "table-head":
+      return /*#__PURE__*/_jsx("thead", {
+        children: children
+      });
+    case "table-body":
+      return /*#__PURE__*/_jsx("tbody", {
+        children: children
+      });
+    case "table-row":
+      return /*#__PURE__*/_jsx(TableRow, {
+        ...props
+      });
+    case "table-cell":
+      return /*#__PURE__*/_jsx(TableCell, {
+        ...props
+      });
     default:
       return /*#__PURE__*/_jsx(SimpleText, {
         ...props,

package/package.json

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