@flozy/editor 5.5.0 → 5.5.2

package/dist/Editor/CommonEditor.js

@@ -550,7 +550,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                         renderLeaf: renderLeaf,
                         decorate: d => decorators(d, editor),
                         onKeyDown: onKeyDown,
-                        onSelect: () => handleCursorScroll(editorWrapper.current)
+                        onSelect: () => handleCursorScroll(editorWrapper.current),
+                        scrollSelectionIntoView: () => {
+                          // disable the scrollSelectionIntoView, to resolve editor auto scroll on free-grid
+                        }
                       }), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {
                         ref: mentionsRef,
                         mentions: mentions,

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

@@ -38,7 +38,7 @@ const DataView = props => {
     const name = [m?.first_name || "", m?.last_name || ""]?.join(" ").trim();
     return {
       value: m?.email,
-      name: name || m?.username || m?.email,
+      label: name || m?.username || m?.email,
       avatar: m?.avatar || null
     };
   });

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

@@ -46,11 +46,7 @@ export const DataViewProvider = ({
   const [rows, setRows] = useState(initialData?.rows || []);
   const [selectedRows, setSelectedRows] = useState([]);
   const [search, setSearch] = useState("");
-  const users = peoples?.map(m => {
-    return {
-      value: m?.name
-    };
-  });
+  const [users] = useState(peoples);
 
   // for undo and redo
   // minimal added for perforamnce issue avoid

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

@@ -139,14 +139,17 @@ const MiniToolbar = props => {
         icon: Icon
       }) => {
         const isDisabled = popupType === type || type === "undo" ? !canUndo : type === "redo" ? !canRedo : false;
+        const isFocussed = editor?.selection?.anchor?.path;
+        const disableAddElement = type === "addElement" && !isFocussed;
         return /*#__PURE__*/_jsx(Tooltip, {
           arrow: true,
           title: label,
           disableHoverListener: toolTip,
           children: /*#__PURE__*/_jsx(IconButton, {
-            className: `${type === popper ? "active" : ""} ${type === "undo" && !canUndo || type === "redo" && !canRedo ? "disabled" : ""} ${type === "undo" ? canUndo ? "activeUndo" : "disabledUndo" : type === "redo" ? canRedo ? "activeRedo" : "disabledRedo" : ""}`,
+            className: `${type === popper ? "active" : ""} ${type === "undo" && !canUndo || type === "redo" && !canRedo ? "disabled" : ""} ${type === "undo" ? canUndo ? "activeUndo" : "disabledUndo" : type === "redo" ? canRedo ? "activeRedo" : "disabledRedo" : ""} ${disableAddElement ? "disableAddElement" : ""}
+                `,
             onClick: handleClick(type),
-            disabled: isDisabled,
+            disabled: isDisabled || disableAddElement,
             children: type === "page-settings" ? /*#__PURE__*/_jsx(PageSettingsButton, {
               from: "miniToolBar",
               icoBtnType: "mini",

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

@@ -79,6 +79,11 @@ const miniToolbarStyles = theme => ({
               stroke: theme?.palette?.editor?.svgStrokeDisabled
             }
           }
+        },
+        "&.disableAddElement": {
+          "& svg": {
+            stroke: theme?.palette?.editor?.svgStrokeDisabled
+          }
         }
       }
     }

package/dist/Editor/helper/deserialize/index.js

@@ -1,4 +1,26 @@
 import { jsx } from "slate-hyperscript";
+const inlineStyles = [{
+  key: "bold",
+  getStyle: styles => styles.fontWeight === "bold" || parseInt(styles.fontWeight, 10) >= 700
+}, {
+  key: "italic",
+  getStyle: styles => styles.fontStyle === "italic"
+}, {
+  key: "underline",
+  getStyle: styles => styles.textDecoration.includes("underline")
+}];
+function getInlineTextStyles(element) {
+  if (!element || !element.style) return {};
+  const styles = element.style;
+  const elementStyles = inlineStyles.reduce((total, currVal) => {
+    const style = currVal.getStyle(styles);
+    if (style) {
+      total[currVal.key] = style;
+    }
+    return total;
+  }, {});
+  return elementStyles;
+}
 const handleTableCell = (el, children) => {
   const wrapChild = children?.map(c => {
     if (typeof c === "string") {
@@ -20,6 +42,24 @@ const handleTableCell = (el, children) => {
     }
   };
 };
+const INLINE_TAGS = ["A", "ABBR", "B", "BDO", "CITE", "CODE", "DATA", "DEL", "DFN", "IMG", "INS", "KBD", "LABEL", "MARK", "Q", "SAMP", "SMALL", "SPAN", "SUB", "SUP", "TIME", "VAR"];
+
+// to avoid nested paragraph to resolve performace issue
+const paragraphType = el => {
+  const {
+    childNodes = []
+  } = el || {};
+
+  // if anyone of the child node is text node or wrapped with inline tags, it is considered to be an paragraph node
+  const isHavingText = childNodes?.length ? Array.from(childNodes)?.some(child => {
+    const isTextNode = child?.nodeType === 3;
+    const isHavingInlineTags = TEXT_TAGS[child?.nodeName] || INLINE_TAGS.includes(child.nodeName);
+    return isTextNode || isHavingInlineTags;
+  }) : null;
+  return isHavingText ? {
+    type: "paragraph"
+  } : {};
+};
 const ELEMENT_TAGS = {
   A: el => ({
     type: "link",
@@ -59,24 +99,14 @@ const ELEMENT_TAGS = {
   OL: () => ({
     type: "orderedList"
   }),
-  P: () => ({
-    type: "paragraph"
-  }),
-  DIV: () => ({
-    type: "paragraph"
-  }),
+  P: paragraphType,
+  DIV: paragraphType,
   PRE: () => ({
     type: "code"
   }),
-  META: () => ({
-    type: "paragraph"
-  }),
-  STYLE: () => ({
-    type: "paragraph"
-  }),
-  "GOOGLE-SHEETS-HTML-ORIGIN": () => ({
-    type: "paragraph"
-  }),
+  META: paragraphType,
+  STYLE: paragraphType,
+  "GOOGLE-SHEETS-HTML-ORIGIN": paragraphType,
   TABLE: (el, children = []) => {
     try {
       const bodyChild = children || [];
@@ -98,12 +128,8 @@ const ELEMENT_TAGS = {
     type: "table-row"
   }),
   TD: handleTableCell,
-  COLGROUP: () => ({
-    type: "paragraph"
-  }),
-  COL: () => ({
-    type: "paragraph"
-  })
+  COLGROUP: paragraphType,
+  COL: paragraphType
 };
 
 // COMPAT: `B` is omitted here because Google Docs uses `<b>` in weird ways.
@@ -129,11 +155,18 @@ const TEXT_TAGS = {
   U: () => ({
     underline: true
   })
+  // B: () => ({ bold: true }),
 };
+
 const deserialize = el => {
   if (el.nodeType === 3) {
+    // if there is any line-breaks
     const match = /\r|\n/.exec(el.textContent);
-    return match ? null : el.textContent;
+    const text = el.textContent.replace(/\r|\n/g, "").trim();
+    return match && !text ? null : {
+      text,
+      ...getInlineTextStyles(el.parentNode)
+    };
   } else if (el.nodeType !== 1) {
     return null;
   } else if (el.nodeName === "BR") {
@@ -160,11 +193,20 @@ const deserialize = el => {
       overwriteChild,
       ...attrs
     } = ELEMENT_TAGS[nodeName](el, children);
-    return jsx("element", attrs, overwriteChild || children);
+    if (attrs?.type) {
+      return jsx("element", attrs, overwriteChild || children);
+    }
   }
   if (TEXT_TAGS[nodeName]) {
     const attrs = TEXT_TAGS[nodeName](el);
-    return children.map(child => jsx("text", attrs, child));
+    return children.map(child => {
+      if (child?.type) {
+        // if any list elements (like ul, ol... tags) is wrapped inside the TEXT_TAGS, we will return child as it is, else return it as text node
+        return child;
+      } else {
+        return jsx("text", attrs, child);
+      }
+    });
   }
   return children;
 };

package/dist/Editor/plugins/withHTML.js

@@ -4,6 +4,43 @@ import { decodeAndParseBase64 } from "../utils/helper";
 const avoidDefaultInsert = ["table", "grid"];
 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 parseCopiedHTML = html => {
+  const parsed = new DOMParser().parseFromString(html, "text/html");
+
+  // if ol, ul are inside li, remove and push ol,ul after that li to maintain format between our slate list and external source list's json
+  parsed.querySelectorAll("li > ul, li > ol").forEach(list => {
+    // Find the parent li
+    const parentLi = list.parentElement;
+
+    // Move the list after the parent li
+    parentLi.after(list);
+  });
+
+  // to handle google docs list
+  parsed.querySelectorAll("li p, li div").forEach(element => {
+    const parent = element.parentNode;
+    // Move all child nodes of <p> or <div> to its parent <li>
+    while (element.firstChild) {
+      parent.insertBefore(element.firstChild, element);
+    }
+    // Remove the <p> or <div> element
+    parent.removeChild(element);
+  });
+
+  // claude.ai, copy list inbetween, some li tags are not wrapped with ul or ol
+  parsed.querySelectorAll("li").forEach(li => {
+    // Check if the parent of <li> is not a <ul> or <ol>
+    if (!li.parentElement || li.parentElement.tagName !== "UL" && li.parentElement.tagName !== "OL") {
+      // Create a <ul> element
+      const ul = document.createElement("ul");
+      // Append the <li> to the <ul>
+      ul.appendChild(li.cloneNode(true)); // Clone the <li>
+      // Replace the original <li> in the DOM with the <ul>
+      li.replaceWith(ul);
+    }
+  });
+  return parsed;
+};
 const loopChildren = (children = [], defaultInsert) => {
   if (!children?.length) {
     return defaultInsert;
@@ -28,7 +65,7 @@ const getCurrentElement = editor => {
     return null;
   }
 };
-const getCurrentElementText = editor => {
+export const getCurrentElementText = editor => {
   try {
     if (editor.selection) {
       return Editor.string(editor, editor?.selection?.anchor?.path);
@@ -186,15 +223,15 @@ const withHtml = editor => {
           return;
         }
         const currentText = getCurrentElementText(editor);
-        if (currentText && !isTextNode) {
+        if (currentText?.trim() && !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 parsed = parseCopiedHTML(html);
+      const rootElement = parsed.body;
       const isNonText = rootElement ? rootElement?.querySelector(NON_TEXT_TAGS.toString()) : false;
       const isGoogleSheet = parsed.body.querySelector("google-sheets-html-origin");
       if (isGoogleSheet) {
@@ -230,7 +267,7 @@ const withHtml = editor => {
         return;
       }
       const currentText = getCurrentElementText(editor);
-      if (currentText && isNonText) {
+      if (currentText?.trim() && isNonText) {
         insertAtNextNode(editor, formattedFragment);
         return;
       }

package/package.json

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