@flozy/editor 2.0.8 → 2.1.0

package/dist/Editor/CommonEditor.js

@@ -129,7 +129,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     }
   };
   const classes = editorStyles({
-    padHeight: !fullScreen ? otherProps?.padHeight : 120,
+    padHeight: !fullScreen ? otherProps?.padHeight : 20,
     placeHolderColor: invertColor(pageColor || "#FFF"),
     theme
   });

package/dist/Editor/DialogWrapper.js

@@ -41,9 +41,6 @@ const DialogWrapper = props => {
         })
       })
     }), /*#__PURE__*/_jsx(DialogContent, {
-      style: {
-        paddingTop: "12px"
-      },
       children: children
     })]
   }) : children;

package/dist/Editor/Elements/Button/EditorButton.js

@@ -165,7 +165,7 @@ const EditorButton = props => {
             background: bgColor || "rgb(30, 75, 122)",
             borderBlockStyle: "solid",
             borderColor: borderColor || "transparent",
-            borderWidth: borderWidth || "1px",
+            borderWidth: borderWidth !== undefined ? borderWidth : borderColor ? "1px" : "0px",
             borderRadius: {
               ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
             },

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

@@ -27,7 +27,8 @@ const Video = ({
     borderColor,
     borderStyle,
     url,
-    xsHidden
+    xsHidden,
+    width: oldWidth
   } = element;
   const editor = useSlateStatic();
   const [openSetttings, setOpenSettings] = useState(false);
@@ -40,9 +41,18 @@ const Video = ({
     horizantal
   } = alignment || {};
   const path = ReactEditor.findPath(editor, element);
+  const getSize = () => {
+    if (element?.size === undefined) {
+      return {
+        widthInPercent: parseInt(oldWidth)
+      };
+    } else {
+      return element?.size || {};
+    }
+  };
   const [size, onMouseDown, resizing, onLoad] = useResize({
     parentDOM,
-    size: element?.size,
+    size: getSize(),
     onChange: uSize => {
       Transforms.setNodes(editor, {
         size: uSize
@@ -113,10 +123,10 @@ const Video = ({
     } else {
       return {
         width: {
-          ...getBreakPointsValue(element?.size, null, "overrideReSize", true)
+          ...getBreakPointsValue(getSize(), null, "overrideReSize", true)
         },
         height: url ? {
-          ...getBreakPointsValue(element?.size, null, "overrideReSizeH", true)
+          ...getBreakPointsValue(getSize(), null, "overrideReSizeH", true)
         } : "auto"
       };
     }
@@ -175,6 +185,8 @@ const Video = ({
         xs: xsHidden ? "none" : "flex"
       },
       flexDirection: "row",
+      flexWrap: "wrap",
+      // to support oldWidth with link
       width: `100%`,
       justifyContent: horizantal,
       alignContent: vertical

package/dist/Editor/Styles/EditorStyles.js

@@ -234,8 +234,11 @@ const editorStyles = ({
       "& .MuiDialogTitle-root": {
         position: "absolute",
         top: 0,
-        right: "12px",
+        right: "0px",
         zIndex: 100
+      },
+      "& .MuiDialogContent-root": {
+        padding: "0px"
       }
     }
   }

package/dist/Editor/Toolbar/PopupTool/AddElements.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Grid } from "@mui/material";
+import { Grid, Box } from "@mui/material";
 import { toolbarGroups } from "../toolbarGroups";
 import { RenderToolbarIcon } from "../Toolbar";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -17,6 +17,7 @@ const AddElements = props => {
   const filteredElements = elements.filter(f => (hideTools || []).indexOf(f.type) === -1);
   return /*#__PURE__*/_jsx(Grid, {
     container: true,
+    className: "elements-wrpr-pp",
     sx: classes.textFormatWrapper,
     spacing: 2,
     style: {
@@ -24,8 +25,11 @@ const AddElements = props => {
     },
     children: filteredElements.map(m => {
       return /*#__PURE__*/_jsx(Grid, {
+        className: "ele-item-single",
         item: true,
         xs: 6,
+        md: 4,
+        lg: 4,
         children: /*#__PURE__*/_jsx(RenderToolbarIcon, {
           editor: editor,
           element: m,

package/dist/Editor/Toolbar/PopupTool/AddTemplates.js

@@ -5,6 +5,14 @@ import FullViewCard from "./FullViewCard";
 import ButtonTemplateCard from "./ButtonTemplatesCard";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const CATEGORIES_SORT_INDEX = {
+  Brief: 1,
+  Buttons: 2,
+  Banners: 3,
+  Tables: 4,
+  Contract: 5,
+  Proposal: 6
+};
 const Categories = props => {
   const {
     value,
@@ -65,6 +73,9 @@ const AddTemplates = props => {
   useEffect(() => {
     getTemplatesList();
   }, []);
+  const sortCategory = (a, b) => {
+    return (CATEGORIES_SORT_INDEX[a] || Infinity) - (CATEGORIES_SORT_INDEX[b] || Infinity);
+  };
   const getTemplatesList = async () => {
     setLoading(true);
     const result = await services("listTemplates", {});
@@ -74,7 +85,7 @@ const AddTemplates = props => {
         a.push(b.category);
       }
       return a;
-    }, []);
+    }, []).sort(sortCategory);
     const ft = tempList?.filter(f => f.category === lic[0]);
     setTemplates(tempList);
     setCategories(lic);

package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js

@@ -50,9 +50,22 @@ const usePopupStyle = theme => ({
   textFormatWrapper: {
     padding: "0px 16px 16px 16px",
     width: "370px",
+    maxWidth: "100%",
     // 30% of window height
     maxHeight: `${window.innerHeight * 0.45}px`,
     overflow: "auto",
+    "&.elements-wrpr-pp": {
+      width: "500px",
+      maxWidth: "100%",
+      "&.fullscreen": {
+        width: "100%",
+        maxHeight: "fit-content"
+      },
+      "& .ele-item-single": {
+        paddingLeft: "4px",
+        paddingTop: "4px"
+      }
+    },
     "&.templates": {
       width: "500px",
       maxWidth: "100%",

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

@@ -43,6 +43,39 @@ const ELEMENT_TAGS = {
   }),
   PRE: () => ({
     type: "code"
+  }),
+  META: () => ({
+    type: "paragraph"
+  }),
+  STYLE: () => ({
+    type: "paragraph"
+  }),
+  "GOOGLE-SHEETS-HTML-ORIGIN": () => ({
+    type: "paragraph"
+  }),
+  TABLE: () => ({
+    type: "table"
+  }),
+  THEAD: () => ({
+    type: "table-head"
+  }),
+  TBODY: () => ({
+    type: "table-body"
+  }),
+  TH: () => ({
+    type: "table-cell"
+  }),
+  TR: () => ({
+    type: "table-row"
+  }),
+  TD: () => ({
+    type: "table-cell"
+  }),
+  COLGROUP: () => ({
+    type: "paragraph"
+  }),
+  COL: () => ({
+    type: "paragraph"
   })
 };
 
@@ -82,6 +115,7 @@ const deserialize = el => {
     nodeName
   } = el;
   let parent = el;
+  console.log(nodeName);
   if (nodeName === "PRE" && el.childNodes[0] && el.childNodes[0].nodeName === "CODE") {
     parent = el.childNodes[0];
   }

package/dist/Editor/plugins/withEmbeds.js

@@ -17,6 +17,7 @@ const withEmbeds = editor => {
   editor.insertBreak = (...args) => {
     const parentPath = Path.parent(editor.selection.focus.path);
     const parentNode = Node.get(editor, parentPath);
+    console.log(parentNode);
     if (editor.isVoid(parentNode)) {
       const nextPath = Path.next(parentPath);
       Transforms.insertNodes(editor, {

package/dist/Editor/plugins/withHTML.js

@@ -15,6 +15,7 @@ const withHtml = editor => {
   editor.insertData = data => {
     const slateHTML = data?.getData("application/x-slate-fragment");
     const html = data?.getData("text/html");
+    console.log(slateHTML, "****", html);
     if (slateHTML) {
       const [tableNode] = Editor.nodes(editor, {
         match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
@@ -29,6 +30,7 @@ const withHtml = editor => {
       }
     } else if (html) {
       const parsed = new DOMParser().parseFromString(html, "text/html");
+      console.log(parsed.body);
       const fragment = deserialize(parsed.body);
       Transforms.insertFragment(editor, fragment);
       return;

package/dist/Editor/plugins/withTable.js

@@ -5,17 +5,6 @@ const withTable = editor => {
     deleteBackward,
     deleteForward
   } = editor;
-
-  // editor.insertData = (data) => {
-  //   try {
-  //     // const text = data.getData("text/plain");
-  //     Transforms.insertFragment(editor, data);
-  //     return;
-  //   } catch (err) {
-  //     console.log(err);
-  //   }
-  // };
-
   editor.deleteBackward = unit => {
     const {
       selection

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -201,7 +201,7 @@ export const getMarked = (leaf, children) => {
     });
   }
   // cover under single span
-  if (leaf.color || leaf.bgColor || leaf.fontSize || leaf.fontFamily || leaf.fontWeight) {
+  if (leaf.color || leaf.bgColor || leaf.fontSize || leaf.fontFamily || leaf.fontWeight || className) {
     const family = fontFamilyMap[leaf?.fontFamily];
     const textStyles = leaf?.color?.indexOf("gradient") >= 0 ? {
       background: leaf?.color?.concat("text"),
@@ -282,7 +282,8 @@ export const getBlock = props => {
           padding: `${element?.bgColor ? "16px" : "0px"} 8px`,
           borderRadius: `${element?.color ? "0px" : "12px"} 12px 12px ${element?.color ? "0px" : "12px"}`,
           margin: `${element?.bgColor ? "16px" : "0px"} 0px`,
-          width: element?.bgColor ? "calc(100% - 16px)" : "100%"
+          width: element?.bgColor ? "calc(100% - 16px)" : "100%",
+          borderWidth: element?.color ? "0px 0px 0px 3px" : "0px"
         },
         children: children
       });
@@ -353,6 +354,14 @@ export const getBlock = props => {
       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

package/dist/Editor/utils/table.js

@@ -390,8 +390,45 @@ export const createTableCell = text => {
     }]
   };
 };
+
+// const createHead = (cellText) => {
+//   const newHead = Array.from(cellText, (value) => createTableHeadCell(value));
+//   return {
+//     type: "table-head",
+//     children: [
+//       {
+//         type: "table-row",
+//         children: newHead,
+//       },
+//     ],
+//   };
+// };
+
+// export const createTableHeadCell = (text) => {
+//   return {
+//     type: "table-cell",
+//     children: [
+//       {
+//         type: "paragraph",
+//         children: [{ text }],
+//       },
+//     ],
+//   };
+// };
+
+// const createTbody = (children) => {
+//   return [
+//     {
+//       type: "table-body",
+//       children: children,
+//     },
+//   ];
+// };
+
 const createTableNode = (cellText, rows, columns) => {
+  // const tableHead = Array.from([cellText[0]], (value) => createHead(value));
   const tableChildren = Array.from(cellText, value => createRow(value));
+  // const tbodyChildren = createTbody(tableChildren);
   let tableNode = {
     type: "table",
     children: tableChildren,

package/package.json

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