@flozy/editor 4.2.2 → 4.2.4

package/dist/Editor/CommonEditor.js

@@ -10,7 +10,7 @@ import { draftToSlate } from "./utils/draftToSlate";
 import useMentions from "./hooks/useMentions";
 import MentionsPopup from "./common/MentionsPopup";
 import { RemoteCursorOverlay } from "./RemoteCursorOverlay/Overlay";
-import { mentionsEvent, commands, indentation, escapeEvent, enterEvent } from "./utils/events";
+import { mentionsEvent, commands, indentation, escapeEvent, enterEvent, upArrowEvent, downArrowEvent } from "./utils/events";
 import withCommon from "./hooks/withCommon";
 import DialogWrapper from "./DialogWrapper";
 import { serializeToText } from "./utils/serializeToText";
@@ -379,6 +379,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
           });
         }
       }
+    } else if (event.key === "ArrowUp" && otherProps?.tagName !== "Pages") {
+      upArrowEvent(event, editor);
+    } else if (event.key === "ArrowDown" && otherProps?.tagName !== "Pages") {
+      downArrowEvent(event, editor);
     }
   }, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
   const Overlay = collaborativeEditor && !isReadOnly ? RemoteCursorOverlay : React.Fragment;

package/dist/Editor/Elements/Embed/Image.js

@@ -47,14 +47,7 @@ const ToolBar = ({
     })]
   }) : null;
 };
-const ImageContent = ({
-  readOnly,
-  setOpenSettings,
-  element,
-  handleImageClick,
-  onTouchEnd,
-  path
-}) => {
+const ImageContent = props => {
   const {
     alt,
     url,
@@ -64,8 +57,13 @@ const ImageContent = ({
     boxShadow,
     frame = null,
     objectFit,
-    webAddress
-  } = element;
+    webAddress,
+    readOnly,
+    setOpenSettings,
+    handleImageClick,
+    onTouchEnd,
+    path
+  } = props;
   const theme = useTheme();
   return !url && !readOnly ? /*#__PURE__*/_jsxs(Box, {
     component: "button",
@@ -278,9 +276,9 @@ const Image = ({
         onSettings: onSettings,
         setOpenNav: setOpenNav
       }), /*#__PURE__*/_jsx(ImageContent, {
+        ...element,
         readOnly: readOnly,
         setOpenSettings: setOpenSettings,
-        element: element,
         handleImageClick: handleImageClick,
         onTouchEnd: onTouchEnd,
         path: path

package/dist/Editor/Elements/Embed/Video.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { Node, Transforms } from "slate";
 import { IconButton, Tooltip, Box, useTheme } from "@mui/material";
@@ -13,6 +13,66 @@ import { getEmbedURL } from "../../helper";
 import { getBreakPointsValue, getTRBLBreakPoints, groupByBreakpoint } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const VideoContent = props => {
+  const {
+    resizing,
+    borderColor,
+    borderWidth,
+    borderStyle,
+    bgColor,
+    embedURL,
+    alt,
+    videoSX
+  } = props;
+  return resizing ? /*#__PURE__*/_jsx("div", {
+    style: {
+      width: "100%",
+      height: "100%",
+      border: "2px dashed black",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    children: /*#__PURE__*/_jsx(Icon, {
+      icon: "videoPlayer"
+    })
+  }) : /*#__PURE__*/_jsx(Box, {
+    component: "iframe",
+    className: "embedd-iframe",
+    sx: {
+      border: "none",
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      maxWidth: "100%",
+      left: "0px",
+      ...(gradientBorder(borderColor) || {}),
+      borderWidth: borderWidth || "1px",
+      borderStyle: borderStyle || "solid",
+      background: bgColor || "transparent",
+      ...videoSX
+    },
+    src: embedURL,
+    title: alt
+  });
+};
+const VideoPlaceholder = props => {
+  const {
+    url,
+    readOnly,
+    onSettings
+  } = props;
+  return !url && !readOnly ? /*#__PURE__*/_jsxs(Box, {
+    component: "button",
+    className: "element-empty-btn",
+    onClick: onSettings,
+    children: [/*#__PURE__*/_jsx(Icon, {
+      icon: "video"
+    }), "Embed Video or Other"]
+  }) : /*#__PURE__*/_jsx(VideoContent, {
+    ...props
+  });
+};
 const Video = ({
   attributes,
   element,
@@ -21,17 +81,12 @@ const Video = ({
 }) => {
   const theme = useTheme();
   const {
-    alt,
     alignment,
     borderRadius,
-    borderWidth,
-    borderColor,
-    borderStyle,
     url,
     xsHidden,
     width: oldWidth,
-    bannerSpacing,
-    bgColor
+    bannerSpacing
   } = element;
   const editor = useSlateStatic();
   const [openSetttings, setOpenSettings] = useState(false);
@@ -124,8 +179,8 @@ const Video = ({
   const getWidth = () => {
     if (resizing) {
       return {
-        width: `${size.width}px`,
-        height: url ? `${size.height}px` : "auto"
+        width: size.width ? `${size.width}px` : "100%",
+        height: url ? `${size.height || 300}px` : "auto"
       };
     } else {
       return {
@@ -149,49 +204,6 @@ const Video = ({
       ...getTRBLBreakPoints(bannerSpacing)
     }
   }, theme);
-  const VideoContent = () => {
-    return resizing ? /*#__PURE__*/_jsx("div", {
-      style: {
-        width: "100%",
-        height: "100%",
-        border: "2px dashed black",
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center"
-      },
-      children: /*#__PURE__*/_jsx(Icon, {
-        icon: "videoPlayer"
-      })
-    }) : /*#__PURE__*/_jsx(Box, {
-      component: "iframe",
-      className: "embedd-iframe",
-      sx: {
-        border: "none",
-        position: "absolute",
-        width: "100%",
-        height: "100%",
-        maxWidth: "100%",
-        left: "0px",
-        ...(gradientBorder(borderColor) || {}),
-        borderWidth: borderWidth || "1px",
-        borderStyle: borderStyle || "solid",
-        background: bgColor || "transparent",
-        ...videoSX
-      },
-      src: embedURL,
-      title: alt
-    });
-  };
-  const VideoPlaceholder = () => {
-    return !url && !readOnly ? /*#__PURE__*/_jsxs(Box, {
-      component: "button",
-      className: "element-empty-btn",
-      onClick: onSettings,
-      children: [/*#__PURE__*/_jsx(Icon, {
-        icon: "video"
-      }), "Embed Video or Other"]
-    }) : /*#__PURE__*/_jsx(VideoContent, {});
-  };
   return /*#__PURE__*/_jsxs(Box, {
     ...attributes,
     className: "embed has-hover video dpath",
@@ -224,7 +236,15 @@ const Video = ({
         ...getWidth(),
         maxWidth: "100%"
       },
-      children: [!readOnly && url && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx(VideoPlaceholder, {}), !readOnly && url ? /*#__PURE__*/_jsx(IconButton, {
+      children: [!readOnly && url && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx(VideoPlaceholder, {
+        ...element,
+        embedURL: embedURL,
+        onSettings: onSettings,
+        videoSX: videoSX,
+        url: url,
+        readOnly: readOnly,
+        resizing: resizing
+      }), !readOnly && url ? /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,
         style: {
           background: "#FFF"

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

@@ -401,6 +401,7 @@ const Form = props => {
               component: "button",
               onClick: onSubmitClick,
               disabled: loading,
+              contentEditable: false,
               sx: {
                 background: buttonProps?.bgColor || "rgb(30, 75, 122)",
                 borderWidth: "1px",
@@ -495,6 +496,7 @@ const Form = props => {
       open: anchorEl !== null,
       anchorEl: anchorEl,
       onClose: handleClose,
+      contentEditable: false,
       children: [/*#__PURE__*/_jsx(MenuItem, {
         onClick: onMenuClick("edit"),
         children: /*#__PURE__*/_jsx(Tooltip, {

package/dist/Editor/Elements/FreeGrid/FreeGrid.js

@@ -465,15 +465,15 @@ const FreeGrid = props => {
       className: "freegrid-container freegrid-container-parent",
       sx: {
         ...classes.root,
-        ...freegridSX
+        ...freegridSX,
+        background: sectionBgColor,
+        backgroundImage: sectionBackgroundImage ? `url('${sectionBackgroundImage}')` : "",
+        backgroundSize: "cover"
       },
       "data-path": path.join("|"),
       style: {
         "--cols": `100%`,
-        "--rows": `repeat(${repeatTimes}, ${ROW_HEIGHT}px)`,
-        background: sectionBgColor,
-        backgroundImage: sectionBackgroundImage ? `url('${sectionBackgroundImage}')` : "",
-        backgroundSize: "cover"
+        "--rows": `repeat(${repeatTimes}, ${ROW_HEIGHT}px)`
       },
       children: [children, !readOnly ? /*#__PURE__*/_jsx("span", {
         placeholder: `Section (${sectionName || "Welcome"})`,

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

@@ -23,7 +23,7 @@ const TableRow = props => {
   return /*#__PURE__*/_jsx("tr", {
     ...attributes,
     style: {
-      backgroundColor: bgColor,
+      background: bgColor,
       border: rowBorderColor ? `1px solid ${rowBorderColor}` : ""
     },
     children: children

package/dist/Editor/common/Shorthands/mentions.js

@@ -3,6 +3,6 @@ const mentions = props => {
     CHARACTERS,
     search
   } = props;
-  return CHARACTERS.filter(c => c.name.toLowerCase().startsWith(search?.toLowerCase())).slice(0, 10);
+  return CHARACTERS.filter(c => c?.name?.toLowerCase()?.startsWith(search?.toLowerCase())).slice(0, 10);
 };
 export default mentions;

package/dist/Editor/plugins/withHTML.js

@@ -101,9 +101,6 @@ const withHtml = editor => {
     return element.type === "image" ? true : isVoid(element);
   };
   editor.insertData = data => {
-    if (editor.isChatEditor) {
-      return;
-    }
     const slateHTML = data?.getData("application/x-slate-fragment");
     const html = data?.getData("text/html");
     const currentEl = getCurrentElement(editor);
@@ -117,6 +114,23 @@ const withHtml = editor => {
         const defaultInsert = loopChildren(decoded, true);
         if (defaultInsert) {
           insertData(data);
+          // } else if (editor.isChatEditor) {
+          //   // Only convert table to paragraphs if in chat editor mode
+          //   const paragraphs = decoded.map(row =>
+          //     row.children.map(cell =>
+          //       cell.children.map(paragraph =>
+          //         paragraph.children.map(textNode => textNode.text).join('')
+          //       ).join(' ')
+          //     ).join(' ')
+          //   ).join('\n'); // Joining with a newline for separate paragraphs
+
+          //   // Insert text as paragraphs
+          //   const textNodes = paragraphs.split('\n').map(text => ({
+          //     type: 'paragraph',
+          //     children: [{ text }]
+          //   }));
+
+          //   Transforms.insertNodes(editor, textNodes);
         } else {
           // do not paste table, grid inside table cell
           // only plain text for internal paste
@@ -141,6 +155,15 @@ 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 === 'table') {
+          is_img_table = true;
+        }
+      });
+      if (editor.isChatEditor && is_img_table) {
+        return;
+      }
       handleInsert(editor, () => Transforms.insertFragment(editor, formattedFragment), formattedFragment);
       return;
     } else {

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

@@ -1,9 +1,6 @@
 import { Editor, Transforms, Element as SlateElement } from "slate";
 import { Box } from "@mui/material";
 import { fontFamilyMap, sizeMap } from "../font";
-import Table from "../../Elements/Table/Table";
-import TableRow from "../../Elements/Table/TableRow";
-import TableCell from "../../Elements/Table/TableCell";
 import Mentions from "../../Elements/Mentions/Mentions";
 import CheckList from "../../Elements/List/CheckList";
 import { isEmptyTextNode } from "../../helper";
@@ -340,26 +337,6 @@ export const getBlock = props => {
         ...props,
         isEmpty: isEmpty
       });
-    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
-      });
     case "mention":
       return /*#__PURE__*/_jsx(Mentions, {
         ...props

package/dist/Editor/utils/events.js

@@ -5,6 +5,7 @@ import { insertAccordion } from "./accordion";
 import { isListItem } from "./helper";
 import RnDCtrlCmds from "./RnD/RnDCtrlCmds";
 import EDITORCMDS from "../common/EditorCmds";
+import { ReactEditor } from "slate-react";
 const HOTKEYS = {
   b: "bold",
   i: "italic",
@@ -284,4 +285,40 @@ export const enterEvent = (e, editor, isMobile) => {
   } catch (err) {
     console.log(err);
   }
+};
+export const upArrowEvent = (e, editor) => {
+  try {
+    const {
+      selection
+    } = editor;
+    if (!selection) return;
+    const prevNodePath = Editor.before(editor, selection, {
+      unit: "line"
+    });
+    if (prevNodePath) {
+      e.preventDefault();
+      Transforms.select(editor, prevNodePath);
+      ReactEditor.focus(editor);
+    }
+  } catch (err) {
+    console.log(err);
+  }
+};
+export const downArrowEvent = (e, editor) => {
+  try {
+    const {
+      selection
+    } = editor;
+    if (!selection) return;
+    const nextNodePath = Editor.after(editor, selection, {
+      unit: "line"
+    });
+    if (nextNodePath) {
+      e.preventDefault();
+      Transforms.select(editor, nextNodePath);
+      ReactEditor.focus(editor);
+    }
+  } catch (err) {
+    console.log(err);
+  }
 };

package/package.json

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