@flozy/editor 4.0.7 → 4.0.8

package/dist/Editor/common/RnD/index.js

@@ -61,7 +61,8 @@ const RnD = props => {
     dragging,
     setDragging,
     contextMenu,
-    setContextMenu
+    setContextMenu,
+    theme
   } = useEditorContext();
   const str_path = path.join("|");
   const selectedElementProps = isSelectedElement(str_path, type);
@@ -245,7 +246,7 @@ const RnD = props => {
           });
           break;
         default:
-          handleActionClick(actionType);
+          handleActionClick(actionType, path);
           return;
       }
     } catch (err) {
@@ -520,7 +521,8 @@ const RnD = props => {
       editor: editor,
       path: sp,
       ...settingsProps,
-      elementProps: elementProps
+      elementProps: elementProps,
+      theme: theme
     }), /*#__PURE__*/_jsx(DragInfo, {
       anchorEl: rndRef?.current,
       open: dragInfoOpen,

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

@@ -5,7 +5,8 @@ const accordionTitleBtnStyle = [{
     label: "Accordion Color",
     key: "accordionTextColor",
     type: "color",
-    needPreview: true
+    needPreview: true,
+    hideGradient: true
   }, {
     label: "Accordion Background Color",
     key: "accordionBgColor",

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

@@ -54,6 +54,7 @@ const appHeaderStyle = [{
     label: "Menu Font Family",
     key: "fontFamily",
     type: "textOptions",
+    webFont: true,
     width: 7,
     options: fontOptions,
     renderOption: option => {

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 const boxStyle = [{
   tab: "Colors",
   value: "sectionColors",
@@ -25,6 +26,36 @@ const boxStyle = [{
     label: "Border",
     key: "sectionBorderRadius",
     type: "borderRadius"
+  }, {
+    label: "Border Color",
+    key: "borderColor",
+    type: "color"
+  }, {
+    label: "Border Width",
+    key: "borderWidth",
+    type: "text",
+    placeholder: "1px",
+    width: 6
+  }, {
+    label: "Border Style",
+    key: "borderStyle",
+    type: "textOptions",
+    width: 6,
+    options: [{
+      text: "Solid",
+      value: "solid"
+    }, {
+      text: "Dotted",
+      value: "dotted"
+    }, {
+      text: "Dashed",
+      value: "dashed"
+    }],
+    renderOption: option => {
+      return /*#__PURE__*/_jsx("span", {
+        children: option.text
+      });
+    }
   }]
 }];
 export default boxStyle;

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

@@ -11,6 +11,7 @@ const buttonStyle = [{
     label: "Font Family",
     key: "fontFamily",
     type: "textOptions",
+    webFont: true,
     options: fontOptions,
     width: 7,
     renderOption: option => {

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

@@ -0,0 +1,10 @@
+const embedScriptStyle = [{
+  tab: "General",
+  value: "general",
+  fields: [{
+    label: "Embed Code",
+    key: "code",
+    type: "text"
+  }]
+}];
+export default embedScriptStyle;

package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js

@@ -89,7 +89,9 @@ const BannerSpacing = props => {
         value: !lockSpacing ? "" : pro_value?.top,
         className: "sliderInput",
         disabled: !lockSpacing,
-        onChange: handleChange
+        onChange: handleChange,
+        type: "number",
+        placeholder: "0"
       })]
     }), /*#__PURE__*/_jsx(FormControlLabel, {
       className: "ccheckbox-primary",
@@ -131,50 +133,54 @@ const BannerSpacing = props => {
             children: [/*#__PURE__*/_jsx("div", {
               className: "bannerSpaceBoxTop",
               children: /*#__PURE__*/_jsx("input", {
-                type: "text",
+                type: "number",
                 name: "top",
                 value: pro_value?.top,
                 className: "borderInput",
                 style: {
                   ...squreStyle.topRight
                 },
-                onChange: handleChange
+                onChange: handleChange,
+                placeholder: "0"
               })
             }), /*#__PURE__*/_jsx("div", {
               className: "bannerSpaceBoxRight",
               children: /*#__PURE__*/_jsx("input", {
-                type: "text",
+                type: "number",
                 name: "right",
                 value: pro_value?.right,
                 className: "borderInput",
                 style: {
                   ...squreStyle.bottomLeft
                 },
-                onChange: handleChange
+                onChange: handleChange,
+                placeholder: "0"
               })
             }), /*#__PURE__*/_jsx("div", {
               className: "bannerSpaceBoxBottom",
               children: /*#__PURE__*/_jsx("input", {
-                type: "text",
+                type: "number",
                 name: "bottom",
                 value: pro_value?.bottom,
                 className: "borderInput",
                 style: {
                   ...squreStyle.bottomRight
                 },
-                onChange: handleChange
+                onChange: handleChange,
+                placeholder: "0"
               })
             }), /*#__PURE__*/_jsx("div", {
               className: "bannerSpaceBoxLeft",
               children: /*#__PURE__*/_jsx("input", {
-                type: "text",
+                type: "number",
                 name: "left",
                 className: "borderInput",
                 value: pro_value?.left,
                 style: {
                   ...squreStyle.topLeft
                 },
-                onChange: handleChange
+                onChange: handleChange,
+                placeholder: "0"
               })
             })]
           })

package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js

@@ -2,7 +2,7 @@ import React from "react";
 import { Grid, Typography, Slider, FormControlLabel, Checkbox, Box } from "@mui/material";
 import { radiusStyle } from "./radiusStyle";
 import useWindowResize from "../../../hooks/useWindowResize";
-import { getBreakPointsValue } from "../../../helper/theme";
+import { getBreakPointsValue, getCustomizationValue } from "../../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BORDER_RADIUS_KEYS = ["topLeft", "topRight", "bottomLeft", "bottomRight"];
@@ -80,11 +80,13 @@ const BorderRadius = props => {
       }), /*#__PURE__*/_jsx(Box, {
         sx: classes.sapcingInput,
         component: "input",
-        value: !lockRadius ? "" : value?.topLeft || 0,
-        className: "sliderInput",
+        value: !lockRadius ? "" : getCustomizationValue(value?.topLeft),
+        className: "sliderInput removeScroll",
         name: "topLeft",
         disabled: !lockRadius,
-        onChange: handleChange
+        onChange: handleChange,
+        type: "number",
+        placeholder: "0"
       })]
     }), /*#__PURE__*/_jsx(FormControlLabel, {
       className: "ccheckbox-primary",
@@ -125,10 +127,10 @@ const BorderRadius = props => {
             borderRadius: `${value?.topLeft}px ${value?.topRight}px ${value?.bottomLeft}px ${value?.bottomRight}px`
           },
           children: [/*#__PURE__*/_jsx("input", {
-            type: "text",
+            type: "number",
             name: "topLeft",
-            value: value?.topLeft,
-            className: "borderInput",
+            value: getCustomizationValue(value?.topLeft),
+            className: "borderInput removeScroll",
             placeholder: "0",
             style: {
               ...radiusStyle.topLeft,
@@ -136,10 +138,10 @@ const BorderRadius = props => {
             },
             onChange: handleChange
           }), /*#__PURE__*/_jsx("input", {
-            type: "text",
+            type: "number",
             name: "topRight",
-            value: value?.topRight,
-            className: "borderInput",
+            value: getCustomizationValue(value?.topRight),
+            className: "borderInput removeScroll",
             placeholder: "0",
             style: {
               ...radiusStyle.topRight,
@@ -148,10 +150,10 @@ const BorderRadius = props => {
             },
             onChange: handleChange
           }), /*#__PURE__*/_jsx("input", {
-            type: "text",
+            type: "number",
             name: "bottomLeft",
-            value: value?.bottomLeft,
-            className: "borderInput",
+            value: getCustomizationValue(value?.bottomLeft),
+            className: "borderInput removeScroll",
             placeholder: "0",
             style: {
               ...radiusStyle.bottomLeft,
@@ -160,10 +162,10 @@ const BorderRadius = props => {
             },
             onChange: handleChange
           }), /*#__PURE__*/_jsx("input", {
-            type: "text",
+            type: "number",
             name: "bottomRight",
-            value: value?.bottomRight,
-            className: "borderInput",
+            value: getCustomizationValue(value?.bottomRight),
+            className: "borderInput removeScroll",
             placeholder: "0",
             style: {
               ...radiusStyle.bottomRight,

package/dist/Editor/common/StyleBuilder/fieldTypes/color.js

@@ -12,11 +12,12 @@ const Color = props => {
   } = props;
   const {
     key,
-    label
+    label,
+    hideGradient
   } = data;
   const [recentColors, setRecentColors] = useState({});
   useEffect(() => {
-    const storedColors = JSON.parse(localStorage.getItem('recentColors'));
+    const storedColors = JSON.parse(localStorage.getItem("recentColors"));
     if (storedColors) {
       setRecentColors(storedColors);
     }
@@ -39,7 +40,7 @@ const Color = props => {
       [key]: updatedColors
     };
     setRecentColors(updatedColors);
-    localStorage.setItem('recentColors', JSON.stringify(updatedColors));
+    localStorage.setItem("recentColors", JSON.stringify(updatedColors));
   };
   return /*#__PURE__*/_jsxs(Grid, {
     item: true,
@@ -68,7 +69,8 @@ const Color = props => {
             classes: classes,
             value: value,
             onSave: onSave,
-            recentColors: recentColors[key]
+            recentColors: recentColors[key],
+            hideGradient: hideGradient
           })
         })
       }

package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js

@@ -2,6 +2,9 @@ import React from "react";
 import { FormControl, Grid, ListItemIcon, ListSubheader, MenuItem, Select, Typography } from "@mui/material";
 import { getBreakPointsValue } from "../../../helper/theme";
 import useWindowResize from "../../../hooks/useWindowResize";
+import { useEditorContext } from "../../../hooks/useMouseMove";
+import FontFamilyAutocomplete from "../../../Toolbar/FormatTools/FontFamilyAutocomplete";
+import { useSlate } from "slate-react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -22,12 +25,17 @@ const TextOptions = props => {
     isBreakpoint,
     options,
     renderOption,
-    width
+    width,
+    webFont = false
   } = data;
+  const {
+    fontFamilies
+  } = useEditorContext();
+  const editor = useSlate();
   const [size] = useWindowResize();
   const value = isBreakpoint ? getBreakPointsValue(val, size?.device) : val;
   const metaDataMappingOptions = metaMappings?.boards || [];
-  const updatedOption = elementProps?.metadatamapping ? [...options, ...metaDataMappingOptions] : options;
+  const updatedOption = elementProps?.metadatamapping ? [...options, ...metaDataMappingOptions] : webFont ? fontFamilies?.options : options;
   const handleChange = (e, d) => {
     if (isBreakpoint) {
       onChange({
@@ -69,7 +77,7 @@ const TextOptions = props => {
         },
         fullWidth: true,
         size: "small",
-        children: /*#__PURE__*/_jsx(Select, {
+        children: !webFont ? /*#__PURE__*/_jsx(Select, {
           onChange: handleChange,
           value: value || updatedOption[0]?.value,
           placeholder: data?.label,
@@ -94,6 +102,14 @@ const TextOptions = props => {
               }), renderOption ? renderOption(m, elementProps) : m.label || m.text]
             }, `${key}_${i}`);
           })
+        }) : /*#__PURE__*/_jsx(FontFamilyAutocomplete, {
+          editor: editor,
+          format: key,
+          options: fontFamilies.options,
+          width: '100%',
+          onChange: onChange,
+          val: value,
+          webFont: true
         })
       })]
     })

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

@@ -16,6 +16,7 @@ const formButtonStyle = [{
     label: "Font Family",
     key: "fontFamily",
     type: "textOptions",
+    webFont: true,
     options: fontOptions,
     renderOption: option => {
       return /*#__PURE__*/_jsx("span", {

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

@@ -31,6 +31,7 @@ const formStyle = [{
     key: "fontFamily",
     type: "textOptions",
     options: fontOptions,
+    webFont: true,
     width: 7,
     renderOption: option => {
       return /*#__PURE__*/_jsx("span", {

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

@@ -59,6 +59,9 @@ const ELEMENT_TAGS = {
   P: () => ({
     type: "paragraph"
   }),
+  DIV: () => ({
+    type: "paragraph"
+  }),
   PRE: () => ({
     type: "code"
   }),

package/dist/Editor/helper/index.js

@@ -294,4 +294,26 @@ export const debounce = function (func, wait, immediate) {
     timeout = setTimeout(later, wait);
     if (callNow) func.apply(context, args);
   };
+};
+export const getTextColor = (color = "") => {
+  return color?.indexOf("gradient") >= 0 ? {
+    background: color?.concat("text"),
+    WebkitBackgroundClip: "text",
+    WebkitTextFillColor: "transparent",
+    color: "transparent",
+    caretColor: "black"
+  } : {
+    color
+  };
+};
+export const getBorderColor = (borderColor = "") => {
+  const borderStyle = borderColor ? {
+    border: "1px solid"
+  } : {};
+  if (borderColor?.indexOf("gradient") >= 0) {
+    borderStyle.borderImage = `${borderColor} 1`;
+  } else {
+    borderStyle.borderColor = borderColor;
+  }
+  return borderStyle;
 };

package/dist/Editor/helper/theme.js

@@ -146,4 +146,5 @@ export const groupByBreakpoint = (styleProps, theme) => {
       ...groupedXS
     }
   };
-};
+};
+export const getCustomizationValue = value => isNaN(parseInt(value)) ? null : parseInt(value);

package/dist/Editor/hooks/useMouseMove.js

@@ -34,6 +34,7 @@ export const EditorProvider = ({
   const [contextMenu, setContextMenu] = useState({
     path: null
   });
+  const [fontFamilies, setFontFamilies] = useState({});
   useEffect(() => {
     window.updateSelectedItem = d => {
       setSelectedElement(d);
@@ -82,7 +83,9 @@ export const EditorProvider = ({
       setContextMenu,
       contextMenu,
       openAI,
-      setOpenAI
+      setOpenAI,
+      fontFamilies,
+      setFontFamilies
     },
     children: children
   });

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -1,6 +1,6 @@
 import { Editor, Transforms, Element as SlateElement } from "slate";
 import { Box } from "@mui/material";
-import { fontFamilyMap, sizeMap } from "./font";
+import { sizeMap } from "./font";
 import Link from "../Elements/Link/Link";
 import Image from "../Elements/Embed/Image";
 import Video from "../Elements/Embed/Video";
@@ -32,7 +32,7 @@ import FormField from "../Elements/Form/FormField";
 import InlineIcon from "../Elements/InlineIcon/InlineIcon";
 import SimpleText from "../Elements/SimpleText";
 import CheckList from "../Elements/List/CheckList";
-import { isEmptyTextNode } from "../helper";
+import { getTextColor, isEmptyTextNode } from "../helper";
 import Attachments from "../Elements/Attachments/Attachments";
 import { getBreakPointsValue } from "../helper/theme";
 import Variables from "../Elements/Variables/Variable";
@@ -206,14 +206,8 @@ export const getMarked = (leaf, children, theme) => {
   }
   // cover under single span
   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"),
-      WebkitBackgroundClip: "text",
-      WebkitTextFillColor: "transparent"
-    } : {
-      color: leaf.color
-    };
+    const family = leaf?.fontFamily;
+    const textStyles = getTextColor(leaf?.color);
     children = /*#__PURE__*/_jsx("span", {
       style: {
         background: leaf.bgColor

package/dist/Editor/utils/chatEditor/SlateUtilityFunctions.js

@@ -321,6 +321,15 @@ export const getBlock = props => {
         ...attributes,
         children: children
       });
+    case "link":
+      return /*#__PURE__*/_jsx("p", {
+        ...attributes,
+        ...element.attr,
+        className: `content-editable ${isEmpty ? "empty" : ""}`
+        // placeholder="paragraph"
+        ,
+        children: children
+      });
     case "unorderedList":
       return /*#__PURE__*/_jsx("ul", {
         ...attributes,

package/dist/Editor/utils/embedScript.js

@@ -9,9 +9,10 @@ export const createEmbedScript = embedData => ({
   }],
   isEncoded: true,
   // to handle the old code's that already inserted
-  isSanitized: true // to handle the old code's that already inserted
+  isSanitized: true,
+  // to handle the old code's that already inserted
+  updatedOn: new Date().getTime()
 });
-
 export const insertEmbedScript = (editor, embedData) => {
   try {
     const embed = createEmbedScript(embedData);
@@ -22,4 +23,21 @@ export const insertEmbedScript = (editor, embedData) => {
   } catch (err) {
     console.log(err);
   }
+};
+export const updateEmbedScript = (editor, embedData, updatePath = null, parentPath = null) => {
+  try {
+    Transforms.setNodes(editor, {
+      embedData: encodeString(embedData),
+      updatedOn: new Date().getTime()
+    }, {
+      at: updatePath
+    });
+    Transforms.setNodes(editor, {
+      lg_updatedOn: new Date().getTime()
+    }, {
+      at: parentPath
+    });
+  } catch (err) {
+    console.log(err);
+  }
 };

package/dist/Editor/utils/mentions.js

@@ -1,4 +1,5 @@
 import { Transforms } from "slate";
+import { ReactEditor } from 'slate-react';
 export const insertMention = (editor, character, type) => {
   if (type === "mentions") {
     const mention = {
@@ -9,6 +10,7 @@ export const insertMention = (editor, character, type) => {
       }]
     };
     Transforms.insertNodes(editor, mention);
+    ReactEditor.focus(editor);
     Transforms.move(editor);
   } else if (type === "elements" && character && character.onInsert) {
     character.onInsert(editor);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "4.0.7",
+  "version": "4.0.8",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -49,6 +49,7 @@
     "use-debounce": "^10.0.0",
     "wavesurfer.js": "^7.8.6",
     "web-vitals": "^2.1.4",
+    "webfontloader": "^1.6.28",
     "y-websocket": "^1.5.0",
     "yjs": "^13.6.8"
   },