@flozy/editor 4.0.3 → 4.0.4

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -40,8 +40,12 @@ import insertNewLine from "./insertNewLine";
 import Divider from "../Elements/Divider/Divider";
 import { getBorderColor } from "./helper";
 import Code from "../Elements/EmbedScript/Code";
+import FreeGrid from "../Elements/FreeGrid/FreeGrid";
+import FreeGridItem from "../Elements/FreeGrid/FreeGridItem";
+import FreeGridBox from "../Elements/FreeGrid/FreeGridBox";
+import { wrapThemeBreakpoints } from "../Elements/FreeGrid/breakpointConstants";
 import { jsx as _jsx } from "react/jsx-runtime";
-const alignment = ["alignLeft", "alignRight", "alignCenter"];
+const alignment = ["alignLeft", "alignRight", "alignCenter", "alignJustify"];
 const list_types = ["orderedList", "unorderedList"];
 const LIST_FORMAT_TYPE = {
   orderedList: "list-item",
@@ -160,7 +164,7 @@ export const activeMark = (editor, format) => {
     return null;
   }
 };
-export const getMarked = (leaf, children) => {
+export const getMarked = (leaf, children, theme) => {
   const className = leaf?.doublequote ? "doublequote" : "";
   if (leaf.bold) {
     children = /*#__PURE__*/_jsx("strong", {
@@ -218,10 +222,14 @@ export const getMarked = (leaf, children) => {
         className: className,
         component: "span",
         sx: {
-          fontSize: {
+          ...wrapThemeBreakpoints({
             lg: sizeMap[leaf.fontSize] || leaf.fontSize,
             ...getBreakPointsValue(leaf.fontSize, null, "overrideText")
-          },
+          }, "fontSize", theme),
+          // fontSize: {
+          //   lg: sizeMap[leaf.fontSize] || leaf.fontSize,
+          //   ...getBreakPointsValue(leaf.fontSize, null, "overrideText"),
+          // },
           ...textStyles,
           fontFamily: family,
           fontWeight: leaf.fontWeight
@@ -321,6 +329,18 @@ export const getBlock = props => {
         ...element.attr,
         children: children
       });
+    case "alignJustify":
+      return /*#__PURE__*/_jsx("div", {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          flexDirection: "column",
+          textAlign: "justify"
+        },
+        ...attributes,
+        ...element.attr,
+        children: children
+      });
     case "list-item":
       const firstChildren = element.children[0] || {};
       return /*#__PURE__*/_jsx("li", {
@@ -407,6 +427,18 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx(Grid, {
         ...props
       });
+    case "freegrid":
+      return /*#__PURE__*/_jsx(FreeGrid, {
+        ...props
+      });
+    case "freegridItem":
+      return /*#__PURE__*/_jsx(FreeGridItem, {
+        ...props
+      });
+    case "freegridBox":
+      return /*#__PURE__*/_jsx(FreeGridBox, {
+        ...props
+      });
     case "grid-item":
       return /*#__PURE__*/_jsx(GridItem, {
         ...props,

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 RnDCtrlCmds from "./RnD/RnDCtrlCmds";
 import EDITORCMDS from "../common/EditorCmds";
 const HOTKEYS = {
   b: "bold",
@@ -75,6 +76,10 @@ export const commands = props => {
       } else {
         Editor.addMark(editor, HOTKEYS[event.key], true);
       }
+    } else if (RnDCtrlCmds[event.key]) {
+      RnDCtrlCmds[event.key](event, {
+        editor
+      });
     } else if (EDITORCMDS[event.key]) {
       EDITORCMDS[event.key](event, {
         editor,

package/dist/Editor/utils/form.js

@@ -1,8 +1,8 @@
 import { Transforms } from "slate";
 import { formField } from "./formfield";
 import insertNewLine from "./insertNewLine";
-export const insertForm = (editor, item) => {
-  const grid = !item ? {
+export const FORM_NODE = () => {
+  return {
     type: "form",
     grid: "container",
     formName: `form_${new Date().getTime()}`,
@@ -23,6 +23,11 @@ export const insertForm = (editor, item) => {
       ...formField()
     }],
     metadatamapping: "mappingToContactBoard"
+  };
+};
+export const insertForm = (editor, item) => {
+  const grid = !item ? {
+    ...FORM_NODE()
   } : item;
   Transforms.insertNodes(editor, grid);
   insertNewLine(editor);

package/dist/Editor/utils/formfield.js

@@ -11,7 +11,7 @@ export const formField = () => {
     children: [{
       text: ""
     }],
-    field_type: 'text',
+    field_type: "text",
     bgColor: "rgba(255, 255, 255, 1)",
     borderColor: "#ccc",
     bannerSpacing: {

package/dist/Editor/utils/freegrid.js

@@ -0,0 +1,91 @@
+import { Transforms } from "slate";
+import insertNewLine from "./insertNewLine";
+import scrollToNewSection from "../helper/RnD/scrollToNewSection";
+const Default_text_Node = {
+  type: "paragraph",
+  children: [{
+    text: "Effortless Business Growth"
+  }]
+};
+export const insertFreeGridItem = (childType, childTypeNode, extProps = {}, type = "freegridItem") => {
+  return {
+    type: type || "freegridItem",
+    childType: childType || "text",
+    children: [childTypeNode || Default_text_Node],
+    gridArea: "1 / 1 / 2 / 2",
+    height: 300,
+    width: 250,
+    left: 401,
+    top: 0,
+    marginTop: 47,
+    left_xs: 24,
+    top_xs: 24,
+    marginTop_xs: 12,
+    width_xs: 250,
+    height_xs: 300,
+    gridArea_xs: "1 / 1 / 2 / 2",
+    sectionBgColor: "rgb(240, 108, 131)",
+    ...(extProps || {})
+  };
+};
+export const insertFreeGrid = (editor, path, extProps) => {
+  const freegridData = [{
+    type: "freegrid",
+    height: 508,
+    gridTemplateRows: "var(--rows)",
+    gridTemplateColumns: "var(--cols)",
+    children: [{
+      type: "freegridItem",
+      childType: "text",
+      children: [{
+        type: "alignCenter",
+        children: [{
+          type: "paragraph",
+          children: [{
+            text: "Heading One",
+            fontSize: {
+              xs: "38px",
+              sm: "54px",
+              md: "54px",
+              lg: "54px"
+            },
+            fontFamily: "PoppinsBold"
+          }]
+        }]
+      }],
+      gridArea: "2 / 1 / 3 / 2",
+      height: 88,
+      width: 746,
+      left: 129,
+      marginTop: 23,
+      top_xs: 105.1875,
+      left_xs: 22,
+      marginTop_xs: 38,
+      width_xs: 272,
+      height_xs: 163.0078125,
+      gridArea_xs: "2 / 1 / 3 / 2",
+      updated_at: 1728554109479,
+      lg_updatedOn: 1726290562773,
+      xs_updatedOn: 1728554109478
+    }],
+    height_xs: 593.0625,
+    updated_at: 1728554109479,
+    width: 0,
+    sectionBgColor: "rgb(222, 99, 138)",
+    xs_updatedOn: 1727921628092,
+    sectionName: "Home"
+  }];
+  const newPath = path ? path : editor?.selection?.anchor?.path;
+  let upNode = [...freegridData];
+  if (path) {
+    upNode = [{
+      type: "paragraph",
+      children: upNode
+    }];
+  }
+  Transforms.insertNodes(editor, upNode, {
+    at: newPath
+  });
+  scrollToNewSection(editor, newPath, extProps);
+  insertNewLine(editor);
+};

package/dist/Editor/utils/helper.js

@@ -3,6 +3,7 @@ import { ReactEditor } from "slate-react";
 import insertNewLine from "./insertNewLine";
 import { getDevice } from "../helper/theme";
 export const windowVar = {};
+let ST_TIMEOUT = null;
 export const formatDate = (date, format = "MM/DD/YYYY") => {
   if (!date) return "";
   var d = new Date(date),
@@ -398,4 +399,46 @@ export const onDeleteKey = (event, {
   } catch (err) {
     console.log(err);
   }
+};
+export const selectText = (editor, {
+  path,
+  cursorOnly
+}, timeout = 10) => {
+  try {
+    clearTimeout(ST_TIMEOUT);
+    ST_TIMEOUT = setTimeout(() => {
+      ReactEditor.focus(editor);
+      const range = Editor.range(editor, path);
+      const textNode = Node.get(editor, path);
+      if (!cursorOnly) {
+        Transforms.select(editor, range);
+      }
+      if (cursorOnly && textNode) {
+        const textLength = Node.string(textNode).length;
+        editor.selection = {
+          anchor: {
+            path: path,
+            offset: textLength
+          },
+          focus: {
+            path: path,
+            offset: textLength
+          }
+        };
+      }
+      ReactEditor.focus(editor);
+    }, timeout);
+  } catch (err) {
+    console.log(err);
+  }
+};
+export const isFreeGridFragment = fragments => {
+  const types = ["freegrid", "freegridItem", "freegridBox"];
+  const node = fragments[0] || fragments;
+  const fType = types.includes(node.children[0]?.type) || types.includes(node.type);
+  if (fType) {
+    return true;
+  } else {
+    return false;
+  }
 };

package/dist/Editor/utils/insertAppHeader.js

@@ -1,4 +1,48 @@
 import { Editor, Transforms, Path, Range, Element } from "slate";
+export const appHeaderNode = ({
+  menus
+}) => {
+  return {
+    type: "app-header",
+    appTitle: "Logo",
+    appLogo: "none",
+    menus: menus || [{
+      type: "menu",
+      url: "home",
+      target: "",
+      text: "Home",
+      linkType: "page"
+    }, {
+      type: "menu",
+      url: "wireframe2",
+      target: "",
+      text: "Wireframe",
+      linkType: "page"
+    }, {
+      type: "menu",
+      url: "https://www.google.com",
+      target: "",
+      text: "Work",
+      linkType: "webAddress"
+    }, {
+      type: "menu",
+      url: "https://www.google.com",
+      target: "",
+      text: "Contact",
+      linkType: "webAddress"
+    }],
+    menuStyle: "stacked",
+    children: [{
+      text: " "
+    }],
+    logoFontSize: "32px",
+    titleFontFamily: "PoppinsBold",
+    bgColor: "rgb(255, 255, 255, 0)",
+    borderColor: "rgba(255, 255, 255, 0)",
+    textColor: "rgb(0, 0, 0)",
+    cellBgColor: "#FFFFFF"
+  };
+};
 export const createAppHeaderNode = ({
   menus
 }) => ({
@@ -7,46 +51,9 @@ export const createAppHeaderNode = ({
   children: [{
     type: "grid-item",
     grid: 12,
-    children: [{
-      type: "app-header",
-      appTitle: "Logo",
-      appLogo: "none",
-      menus: menus || [{
-        type: "menu",
-        url: "home",
-        target: "",
-        text: "Home",
-        linkType: "page"
-      }, {
-        type: "menu",
-        url: "wireframe2",
-        target: "",
-        text: "Wireframe",
-        linkType: "page"
-      }, {
-        type: "menu",
-        url: "https://www.google.com",
-        target: "",
-        text: "Work",
-        linkType: "webAddress"
-      }, {
-        type: "menu",
-        url: "https://www.google.com",
-        target: "",
-        text: "Contact",
-        linkType: "webAddress"
-      }],
-      menuStyle: "stacked",
-      children: [{
-        text: " "
-      }],
-      logoFontSize: "32px",
-      titleFontFamily: "PoppinsBold",
-      bgColor: "rgb(255, 255, 255, 0)",
-      borderColor: "rgba(255, 255, 255, 0)",
-      textColor: "rgb(0, 0, 0)",
-      cellBgColor: "#FFFFFF"
-    }],
+    children: [...appHeaderNode({
+      menus
+    })],
     bgColor: "rgba(255, 255, 255, 0)",
     lockSpacing: true,
     bannerSpacing: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "4.0.3",
+  "version": "4.0.4",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -36,6 +36,7 @@
     "react-gcolor-picker": "^1.3.1",
     "react-icons": "^4.10.1",
     "react-katex": "^3.0.1",
+    "react-rnd": "^10.4.11",
     "react-scripts": "5.0.1",
     "react-signature-canvas": "^1.0.6",
     "react-slick": "^0.29.0",
@@ -46,6 +47,7 @@
     "slate-react": "^0.98.3",
     "styled-components": "^5.3.11",
     "use-debounce": "^10.0.0",
+    "wavesurfer.js": "^7.8.6",
     "web-vitals": "^2.1.4",
     "y-websocket": "^1.5.0",
     "yjs": "^13.6.8"
@@ -56,6 +58,7 @@
   },
   "scripts": {
     "prepare": "husky install .husky",
+    "analyze": "source-map-explorer build/static/js/*.js",
     "lint": "./node_modules/.bin/eslint --ignore-path .gitignore .",
     "start": "craco start",
     "build": "NODE_OPTIONS='--max_old_space_size=4096' craco build",
@@ -64,7 +67,7 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "NODE_OPTIONS='--max_old_space_size=4096' storybook build",
     "publish:npm": "rm -rf dist && mkdir dist &&  babel src/components -d dist --copy-files",
-    "publish:local": "rm -rf /Users/agenciflow08/Documents/flozyapp/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agenciflow08/Documents/flozyapp/client/node_modules/@flozy/editor/dist --copy-files"
+    "publish:local": "rm -rf /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist --copy-files"
   },
   "eslintConfig": {
     "extends": [
@@ -112,6 +115,7 @@
     "babel-plugin-named-exports-order": "^0.0.2",
     "eslint-plugin-storybook": "^0.6.13",
     "prop-types": "^15.8.1",
+    "source-map-explorer": "^2.5.3",
     "storybook": "^7.4.0",
     "webpack": "^5.88.2"
   },