@flozy/editor 3.6.7 → 3.6.9

package/dist/Editor/ChatEditor.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useRef, useState, useEffect, useImperativeHandle, forwardRef } from "react";
-import { Editable, Slate } from 'slate-react';
+import { Editable, Slate, ReactEditor } from 'slate-react';
 import { createEditor } from 'slate';
 import { useDebounce } from "use-debounce";
 import withCommon from "./hooks/withCommon";
@@ -44,7 +44,16 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const isReadOnly = readOnly === "readonly";
   useImperativeHandle(ref, () => ({
     emojiClick: emoji => {
-      insertEmoji(editor, emoji?.native, editor.selection);
+      if (editor) {
+        insertEmoji(editor, emoji?.native, editor.selection);
+        ReactEditor.focus(editor);
+      }
+    },
+    // Focus enable
+    enableFocus: () => {
+      if (editor) {
+        ReactEditor.focus(editor);
+      }
     }
   }));
   useEffect(() => {

package/dist/Editor/CommonEditor.js

@@ -29,7 +29,7 @@ import Section from "./common/Section";
 import "animate.css";
 import decorators from "./utils/Decorators";
 import { getTRBLBreakPoints, getVariableValue } from "./helper/theme";
-import { handleInsertLastElement, outsideEditorClickLabel } from "./utils/helper";
+import { handleInsertLastElement, onDeleteKey, outsideEditorClickLabel } from "./utils/helper";
 import useWindowResize from "./hooks/useWindowResize";
 import { getTheme } from "./theme";
 import { useTheme } from "@emotion/react";
@@ -337,7 +337,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     } else if (isCtrlKey) {
       commands({
         event,
-        editor
+        editor,
+        needLayout
       });
     } else if (event.key === "Tab") {
       event.preventDefault();

package/dist/Editor/Elements/Accordion/Accordion.js

@@ -9,6 +9,55 @@ import Icon from "../../common/Icon";
 import { useEditorSelection } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const accordionBtnStyleKeys = {
+  accordionTextColor: "textColor",
+  accordionBgColor: "bgColor",
+  accordionBorderColor: "borderColor"
+};
+const getAccordionData = updateData => {
+  const accordionBtnStyle = {}; // accordion btn style will come under type: accordion node
+  const accordionTitleStyle = {}; // accordion title style will come under type: accordion-summary node
+
+  Object.entries(updateData).forEach(([key, value]) => {
+    const accordionBtnStyleKey = accordionBtnStyleKeys[key];
+    if (accordionBtnStyleKey) {
+      // converting accordion button elementProp keys to node keys e.g: accordionTextColor -> textColor
+      accordionBtnStyle[accordionBtnStyleKey] = value;
+      return;
+    }
+    accordionTitleStyle[key] = value;
+  });
+  return {
+    accordionBtnStyle,
+    accordionTitleStyle
+  };
+};
+const convertAccordionBtnStyleKeys = (data = {}) => {
+  const style = {
+    ...data
+  };
+  Object.entries(accordionBtnStyleKeys).forEach(([key, value]) => {
+    const val = data[value];
+    if (val) {
+      // deleting the existing style key in node e.g: textColor
+      delete style[value];
+
+      // convertint into new key in element props e.g: accordionTextColor
+      style[key] = val;
+    }
+  });
+  return style;
+};
+const getElementProps = element => {
+  const accordionSummary = element.children?.find(c => c.type === "accordion-summary");
+
+  // joining accordion title and button styles
+  const elementProps = {
+    ...accordionSummary,
+    ...convertAccordionBtnStyleKeys(element)
+  };
+  return elementProps;
+};
 const Accordion = props => {
   const {
     attributes,
@@ -69,16 +118,34 @@ const Accordion = props => {
       at: path
     });
   };
+  const setNodes = (data, path) => {
+    Transforms.setNodes(editor, data, {
+      at: path
+    });
+  };
   const onSave = data => {
     const updateData = {
       ...data
     };
-    delete updateData.children;
-    Transforms.setNodes(editor, {
-      ...updateData
-    }, {
-      at: path
-    });
+    const {
+      accordionBtnStyle,
+      accordionTitleStyle
+    } = getAccordionData(updateData);
+
+    // applying accordion title style
+    const accordionSummary = data.children?.find(c => c.type === "accordion-summary");
+    const accordionSummaryPath = ReactEditor.findPath(editor, accordionSummary);
+    setNodes({
+      ...accordionTitleStyle,
+      type: "accordion-summary",
+      children: accordionSummary.children
+    }, accordionSummaryPath);
+
+    // applying accordion button style
+    delete accordionBtnStyle.children;
+    setNodes({
+      ...accordionBtnStyle
+    }, path);
     onClose();
   };
   const onClose = () => {
@@ -123,7 +190,7 @@ const Accordion = props => {
       },
       children: children[1]
     }), !readOnly && /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionBtnPopup, {
-      element: element,
+      element: getElementProps(element),
       onSave: onSave,
       onClose: onClose,
       customProps: customProps

package/dist/Editor/Elements/Accordion/AccordionBtnPopup.js

@@ -1,6 +1,7 @@
 import React from "react";
 import StyleBuilder from "../../common/StyleBuilder";
 import accordionTitleBtnStyle from "../../common/StyleBuilder/accordionTitleBtnStyle";
+import accordionTitleStyle from "../../common/StyleBuilder/accordionTitleStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 const AccordionBtnPopup = props => {
   const {
@@ -10,12 +11,12 @@ const AccordionBtnPopup = props => {
     customProps
   } = props;
   return /*#__PURE__*/_jsx(StyleBuilder, {
-    title: "Accordion Collapse Button",
+    title: "Accordion Settings",
     type: "accordionTitleBtnStyle",
     element: element,
     onSave: onSave,
     onClose: onClose,
-    renderTabs: accordionTitleBtnStyle,
+    renderTabs: [...accordionTitleBtnStyle, ...accordionTitleStyle],
     customProps: customProps
   });
 };

package/dist/Editor/Elements/Accordion/AccordionSummary.js

@@ -1,68 +1,17 @@
-import React, { useState } from "react";
-import { Transforms } from "slate";
-import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
-import AccordionTitlePopup from "./AccordionTitlePopup";
-import { IconButton, Tooltip } from "@mui/material";
-import { GridSettingsIcon } from "../../common/iconslist";
-import { useEditorSelection } from "../../hooks/useMouseMove";
+import React from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 const AccordionSummary = props => {
   const {
     attributes,
     children,
-    element,
-    customProps
+    element
   } = props;
-  const {
-    readOnly
-  } = customProps;
-  const [openSetttings, setOpenSettings] = useState(false);
-  const editor = useSlateStatic();
-  const [showTool] = useEditorSelection(editor);
-  const selected = useSelected();
-  const path = ReactEditor.findPath(editor, element);
   const {
     textColor,
     bgColor,
     borderColor
   } = element;
-  const ToolBar = () => {
-    return selected && !showTool ? /*#__PURE__*/_jsx("div", {
-      className: "element-toolbar hr",
-      contentEditable: false,
-      style: {
-        top: "-42px"
-      },
-      children: /*#__PURE__*/_jsx(Tooltip, {
-        title: "Settings",
-        arrow: true,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: onSettings,
-          children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
-        })
-      })
-    }) : null;
-  };
-  const onSettings = () => {
-    setOpenSettings(true);
-  };
-  const onSave = data => {
-    const updateData = {
-      ...data
-    };
-    delete updateData.children;
-    Transforms.setNodes(editor, {
-      ...updateData
-    }, {
-      at: path
-    });
-    onClose();
-  };
-  const onClose = () => {
-    setOpenSettings(false);
-  };
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: `accordion-summary-container`,
     ...attributes,
     style: {
@@ -72,12 +21,7 @@ const AccordionSummary = props => {
       border: `1px solid ${borderColor}`,
       color: textColor
     },
-    children: [children, !readOnly && /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionTitlePopup, {
-      element: element,
-      onSave: onSave,
-      onClose: onClose,
-      customProps: customProps
-    }) : null]
+    children: children
   });
 };
 export default AccordionSummary;

package/dist/Editor/common/EditorCmds.js

@@ -0,0 +1,35 @@
+import { Editor, Transforms } from "slate";
+const selectAll = (event, {
+  editor,
+  needLayout
+}) => {
+  try {
+    if (needLayout) {
+      event.preventDefault();
+      // Select the entire document
+      const {
+        selection
+      } = editor;
+      const [firstNode] = Editor.nodes(editor, {
+        at: [0]
+      }); // First node
+      const [lastNode] = Editor.nodes(editor, {
+        at: [editor.children.length - 1]
+      }); // Last node
+
+      if (firstNode && lastNode) {
+        Transforms.select(editor, {
+          anchor: Editor.start(editor, [0]),
+          // Start at the first node
+          focus: Editor.end(editor, [editor.children.length - 1]) // End at the last node
+        });
+      }
+    }
+  } catch (err) {
+    console.log(err);
+  }
+};
+const EDITORCMDS = {
+  a: selectAll
+};
+export default EDITORCMDS;

package/dist/Editor/common/MentionsPopup/MentionsListCard.js

@@ -13,7 +13,8 @@ const MentionsListCard = props => {
   } = props;
   const {
     name,
-    email
+    email,
+    avatar_filename = null
   } = data;
   return /*#__PURE__*/_jsxs(Card, {
     sx: {
@@ -37,7 +38,9 @@ const MentionsListCard = props => {
         alignItems: "center"
       },
       alt: name,
-      children: /*#__PURE__*/_jsx(Avatar, {})
+      children: /*#__PURE__*/_jsx(Avatar, {
+        src: avatar_filename
+      })
     }), /*#__PURE__*/_jsx(Box, {
       sx: {
         display: "flex",

package/dist/Editor/common/MentionsPopup/Styles.js

@@ -10,7 +10,7 @@ const usePopupStyles = theme => ({
   papper: {
     boxShadow: "none",
     width: "300px",
-    height: "300px",
+    height: "auto",
     overflow: "auto",
     padding: "8px",
     margin: "0px",
@@ -39,10 +39,13 @@ const usePopupStyles = theme => ({
       color: theme?.palette?.editor?.textColor
     },
     "&.active": {
-      background: `${theme?.palette?.containers?.bg3 || "#E9F3FE"}`
+      background: `#2563EB2B`,
+      "& .MuiTypography-root": {
+        color: `${theme?.palette?.editor?.activeColor} !important`
+      }
     },
     "&:hover": {
-      background: `${theme?.palette?.containers?.bg3 || "#E9F3FE"}`
+      background: theme?.palette?.action?.hover || `#F4F4F4`
     },
     "&.renderComp": {
       padding: "0px",

package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js

@@ -1,18 +1,18 @@
 const accordionTitleBtnStyle = [{
   tab: "Colors",
-  value: "colors",
+  value: "accordionColor",
   fields: [{
-    label: "Text Color",
-    key: "textColor",
+    label: "Accordion Color",
+    key: "accordionTextColor",
     type: "color",
     needPreview: true
   }, {
-    label: "Background Color",
-    key: "bgColor",
+    label: "Accordion Background Color",
+    key: "accordionBgColor",
     type: "color"
   }, {
-    label: "Border Color",
-    key: "borderColor",
+    label: "Accordion Border Color",
+    key: "accordionBorderColor",
     type: "color"
   }]
 }];

package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js

@@ -1,20 +1,4 @@
 const accordionTitleStyle = [{
-  tab: "Banner Spacing",
-  value: "bannerSpacing",
-  fields: [{
-    label: "Banner Spacing",
-    key: "bannerSpacing",
-    type: "bannerSpacing"
-  }]
-}, {
-  tab: "Border Radius",
-  value: "borderRadius",
-  fields: [{
-    label: "Border Radius",
-    key: "borderRadius",
-    type: "borderRadius"
-  }]
-}, {
   tab: "Colors",
   value: "colors",
   fields: [{
@@ -31,5 +15,21 @@ const accordionTitleStyle = [{
     key: "borderColor",
     type: "color"
   }]
+}, {
+  tab: "Banner Spacing",
+  value: "bannerSpacing",
+  fields: [{
+    label: "Banner Spacing",
+    key: "bannerSpacing",
+    type: "bannerSpacing"
+  }]
+}, {
+  tab: "Border Radius",
+  value: "borderRadius",
+  fields: [{
+    label: "Border Radius",
+    key: "borderRadius",
+    type: "borderRadius"
+  }]
 }];
 export default accordionTitleStyle;

package/dist/Editor/hooks/useMouseMove.js

@@ -78,7 +78,6 @@ const useMouseMove = () => {
   }, []);
   const onMouseMove = e => {
     const dpath = e?.target?.closest(".dpath");
-    console.log(dpath);
     if (dpath) {
       console.log(`Stopped position: (${e.clientX}, ${e.clientY})`, dpath);
       setEvent({

package/dist/Editor/plugins/withLayout.js

@@ -32,16 +32,21 @@ const withLayout = editor => {
   editor.normalizeNode = ([node, path]) => {
     if (path.length === 0) {
       if (editor.children.length <= 1 && Editor.string(editor, [0, 0]) === "") {
-        const title = {
-          type: "title",
-          children: [{
-            text: "Untitled"
-          }]
-        };
-        Transforms.insertNodes(editor, title, {
-          at: path.concat(0),
-          select: true
-        });
+        const {
+          anchor
+        } = editor?.selection || {};
+        if (anchor?.offset !== 0) {
+          const title = {
+            type: "title",
+            children: [{
+              text: "Untitled"
+            }]
+          };
+          Transforms.insertNodes(editor, title, {
+            at: path.concat(0),
+            select: true
+          });
+        }
       }
       if (editor.children.length === 0) {
         const paragraph = {

package/dist/Editor/plugins/withTable.js

@@ -8,7 +8,7 @@ const withTable = editor => {
     delete: slateDelete
   } = editor;
   editor.delete = arg => {
-    if (arg.reverse) {
+    if (arg?.reverse) {
       const table = new TableUtil(editor);
       const cellsSelected = table.isCellSelected(editor.selection);
       if (cellsSelected && cellsSelected.length > 1) {

package/dist/Editor/utils/events.js

@@ -3,6 +3,7 @@ import { toggleBlock } from "./SlateUtilityFunctions";
 import insertNewLine from "./insertNewLine";
 import { insertAccordion } from "./accordion";
 import { isListItem } from "./helper";
+import EDITORCMDS from "../common/EditorCmds";
 const HOTKEYS = {
   b: "bold",
   i: "italic",
@@ -63,7 +64,8 @@ export const commands = props => {
   try {
     const {
       event,
-      editor
+      editor,
+      needLayout
     } = props;
     if (HOTKEYS[event.key]) {
       event.preventDefault();
@@ -73,6 +75,11 @@ export const commands = props => {
       } else {
         Editor.addMark(editor, HOTKEYS[event.key], true);
       }
+    } else if (EDITORCMDS[event.key]) {
+      EDITORCMDS[event.key](event, {
+        editor,
+        needLayout
+      });
     }
   } catch (err) {
     console.log(err);
@@ -96,7 +103,7 @@ export const indentation = props => {
           Transforms.wrapNodes(editor, {
             type: listItem.type,
             children: [{
-              text: ''
+              text: ""
             }]
           });
         } else {
@@ -153,7 +160,7 @@ const checkListEnterEvent = (editor, type) => {
     Transforms.insertNodes(editor, {
       type: "check-list-item",
       children: [{
-        text: ''
+        text: ""
       }]
     }, {
       at: newPath
@@ -162,7 +169,7 @@ const checkListEnterEvent = (editor, type) => {
     // focus on the end of the line
     Transforms.move(editor, {
       distance: 1,
-      unit: 'line'
+      unit: "line"
     });
   } else {
     toggleBlock(editor, type);

package/dist/Editor/utils/helper.js

@@ -405,4 +405,25 @@ export const getContrastColor = color => {
 
   // Return black for light colors, white for dark colors
   return luminance > 0.5 ? "#000000" : "#FFFFFF";
+};
+export const onDeleteKey = (event, {
+  editor
+}) => {
+  try {
+    const {
+      selection
+    } = editor;
+    if (selection) {
+      // If text is selected, delete the selection
+      Transforms.delete(editor);
+    } else {
+      // If no text is selected, handle deleting the next character/element
+      Transforms.delete(editor, {
+        unit: "character",
+        reverse: false
+      });
+    }
+  } catch (err) {
+    console.log(err);
+  }
 };

package/package.json

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