@flozy/editor 4.2.3 → 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/Video.js

@@ -176,11 +176,11 @@ const Video = ({
       at: path
     });
   };
-  const getWidth = useCallback(() => {
+  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 {
@@ -194,7 +194,7 @@ const Video = ({
         }, theme)
       };
     }
-  }, [size]);
+  };
   const embedURL = getEmbedURL(element);
   const videoSX = groupByBreakpoint({
     borderRadius: {
@@ -240,7 +240,10 @@ const Video = ({
         ...element,
         embedURL: embedURL,
         onSettings: onSettings,
-        videoSX: videoSX
+        videoSX: videoSX,
+        url: url,
+        readOnly: readOnly,
+        resizing: resizing
       }), !readOnly && url ? /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,
         style: {

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/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.3",
+  "version": "4.2.4",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"