@flozy/editor 1.2.7 → 1.2.9

package/dist/Editor/CommonEditor.js

@@ -75,15 +75,23 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     }));
   }, [id, content]);
   useEffect(() => {
-    if (editorWrapper && editorWrapper?.current && loadedValue !== deboundedValue && isInteracted) {
-      const text = serialize(deboundedValue);
-      const title = deboundedValue?.find(f => f.type === "title");
-      onSave(JSON.stringify(deboundedValue), {
-        text: text,
-        title: serialize(title?.children) || "Untitled"
-      });
+    if (editorWrapper && editorWrapper?.current && loadedValue !== deboundedValue && isInteracted && onSave) {
+      const {
+        value: strVal,
+        ...restVal
+      } = getOnSaveData(deboundedValue);
+      onSave(strVal, restVal);
     }
   }, [deboundedValue]);
+  const getOnSaveData = val => {
+    const text = serialize(val);
+    const title = val?.find(f => f.type === "title");
+    return {
+      value: JSON.stringify(val),
+      text: text,
+      title: serialize(title?.children) || "Untitled"
+    };
+  };
   const getPreviewImage = async (needBackground = false, options = {}) => {
     ReactEditor.blur(editor);
     const dom = needBackground ? editorWrapper?.current : editorWrapper?.current.getElementsByClassName("innert-editor-textbox")[0];
@@ -119,7 +127,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       return editor;
     },
     getContent() {
-      return value;
+      return getOnSaveData(deboundedValue);
     },
     insertFragments(fragments) {
       editor.insertNode(fragments);
@@ -150,8 +158,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       setIsInteracted(true);
     }
   };
+  const isReadOnly = readOnly === "readonly";
   const customProps = {
-    ...(otherProps || {})
+    ...(otherProps || {}),
+    readOnly: isReadOnly
   };
   const renderElement = useCallback(props => {
     return /*#__PURE__*/_jsx(Element, {
@@ -190,7 +200,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       });
     }
   }, [chars, editor, target, mentions, setMentions]);
-  const isReadOnly = readOnly === "readonly";
   const Overlay = collaborativeEditor && !isReadOnly ? RemoteCursorOverlay : React.Fragment;
   return /*#__PURE__*/_jsx(DialogWrapper, {
     ...props,

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

@@ -6,6 +6,7 @@ const ButtonPopup = props => {
   const {
     element,
     onSave,
+    customProps,
     onClose
   } = props;
   return /*#__PURE__*/_jsx(StyleBuilder, {
@@ -14,7 +15,8 @@ const ButtonPopup = props => {
     element: element,
     onSave: onSave,
     onClose: onClose,
-    renderTabs: buttonStyle
+    renderTabs: buttonStyle,
+    customProps: customProps
   });
 };
 export default ButtonPopup;

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

@@ -3,6 +3,7 @@ import { Transforms } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
 import { Menu, MenuItem } from "@mui/material";
 import ButtonPopup from "./ButtonPopup";
+import { actionButtonRedirect } from "../../service/actionTrigger";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const EditorButton = props => {
@@ -12,7 +13,8 @@ const EditorButton = props => {
     customProps
   } = props;
   const {
-    readOnly
+    readOnly,
+    metadata
   } = customProps;
   const editor = useSlateStatic();
   const path = ReactEditor.findPath(editor, element);
@@ -25,8 +27,13 @@ const EditorButton = props => {
     bannerSpacing,
     textColor,
     url,
-    borderColor
+    borderColor,
+    buttonLink
   } = element;
+  const {
+    linkType,
+    redirectOnURLResult
+  } = buttonLink || {};
   const {
     topLeft,
     topRight,
@@ -39,13 +46,34 @@ const EditorButton = props => {
     right,
     bottom
   } = bannerSpacing || {};
-  const onClick = e => {
-    setAnchorEl(e.currentTarget);
+  const onClick = async e => {
+    if (readOnly) {
+      if (metadata?.buttonLink?.handler) {
+        metadata.buttonLink.handler("click");
+      } else if (linkType === "actionTrigger") {
+        if (redirectOnURLResult) {
+          // call api and redirect based on api result
+          const apiResult = await actionButtonRedirect({}, {
+            url: buttonLink?.url
+          });
+          window.open(apiResult, "_blank").focus();
+        } else {
+          const refUrl = buttonLink?.url ? buttonLink?.url.includes("http") ? buttonLink?.url : `//${buttonLink?.url}` : "Link";
+          window.open(refUrl, "_blank").focus();
+        }
+      } else {
+        const refUrl = url ? url.includes("http") ? url : `//${url}` : "Link";
+        window.open(refUrl, "_blank").focus();
+      }
+    } else {
+      setAnchorEl(e.currentTarget);
+    }
   };
   const handleClose = () => {
     setAnchorEl(null);
   };
   const onMenuClick = val => () => {
+    console.log(val, url);
     switch (val) {
       case "open":
         const refUrl = url ? url.includes("http") ? url : `//${url}` : "Link";
@@ -117,7 +145,8 @@ const EditorButton = props => {
     }), edit && /*#__PURE__*/_jsx(ButtonPopup, {
       element: element,
       onSave: onSave,
-      onClose: onClose
+      onClose: onClose,
+      customProps: customProps
     })]
   });
 };

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

@@ -68,6 +68,7 @@ const Embed = ({
       [e.target.name]: e.target.value
     });
   };
+  const imageURL = formData?.url === "none" || !formData?.url ? "" : formData?.url;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(IconButton, {
       className: isBlockActive(editor, format) ? "active" : "",
@@ -127,7 +128,7 @@ const Embed = ({
                 size: "small",
                 fullWidth: true,
                 onChange: handleChange,
-                value: formData?.url || ""
+                value: imageURL || ""
               })
             }), /*#__PURE__*/_jsx(Uploader, {
               value: formData,

package/dist/Editor/Elements/ImageText/ImageText.js

@@ -1,14 +1,41 @@
 import React from "react";
+import { IconButton } from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { Transforms } from "slate";
+import { ReactEditor, useSlateStatic } from "slate-react";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const ImageText = props => {
   const {
     attributes,
+    element,
     children
   } = props;
-  return /*#__PURE__*/_jsx("div", {
+  const editor = useSlateStatic();
+  const onDelete = () => {
+    const path = ReactEditor.findPath(editor, element);
+    Transforms.removeNodes(editor, {
+      at: [...path]
+    });
+  };
+  return /*#__PURE__*/_jsxs("div", {
     className: "image-text",
     ...attributes,
-    children: children
+    style: {
+      position: "relative"
+    },
+    children: [children, /*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsx(IconButton, {
+        onClick: onDelete,
+        style: {
+          background: "#FFF",
+          position: "absolute",
+          right: "0px",
+          top: "0px"
+        },
+        children: /*#__PURE__*/_jsx(DeleteIcon, {})
+      })
+    })]
   });
 };
 export default ImageText;

package/dist/Editor/Elements/Link/LinkButton.js

@@ -1,8 +1,7 @@
 import { useRef, useState } from "react";
 import { Transforms } from "slate";
-import { Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid, TextField, Button, IconButton, Typography } from "@mui/material";
+import { Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid, TextField, Button, IconButton, Typography, Checkbox } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
-import { CheckBox } from "@mui/icons-material";
 import { insertLink } from "../../utils/link";
 import Icon from "../../common/Icon";
 import { isBlockActive } from "../../utils/SlateUtilityFunctions";
@@ -112,7 +111,7 @@ const LinkButton = props => {
               },
               children: /*#__PURE__*/_jsx(FormControl, {
                 children: /*#__PURE__*/_jsx(FormControlLabel, {
-                  control: /*#__PURE__*/_jsx(CheckBox, {
+                  control: /*#__PURE__*/_jsx(Checkbox, {
                     checked: showInNewTab,
                     onChange: handleInputChange
                   }),

package/dist/Editor/Elements/NewLine/NewLineButton.js

@@ -2,9 +2,9 @@ import React from "react";
 import { IconButton } from "@mui/material";
 import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
 import { Transforms } from "slate";
-import { useSlateStatic } from "slate-react";
+import { ReactEditor, useSlateStatic } from "slate-react";
 import { jsx as _jsx } from "react/jsx-runtime";
-const NewLineButton = props => {
+const NewLineButton = () => {
   const editor = useSlateStatic();
   const onAddNewLine = () => {
     Transforms.insertNodes(editor, [{
@@ -13,17 +13,19 @@ const NewLineButton = props => {
         text: ""
       }]
     }], {
-      at: [editor.children.length]
+      at: [editor.children.length],
+      select: true
     });
+    ReactEditor.focus(editor);
   };
   return /*#__PURE__*/_jsx(IconButton, {
     title: "New Line",
     onClick: onAddNewLine,
     children: /*#__PURE__*/_jsx(KeyboardReturnIcon, {
       sx: {
-        fill: '#64748B',
-        width: '18px',
-        height: '18px'
+        fill: "#64748B",
+        width: "18px",
+        height: "18px"
       }
     })
   });

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

@@ -5,10 +5,14 @@ const buttonStyle = [{
     label: "Button Text",
     key: "label",
     type: "text"
-  }, {
-    label: "Button URL",
-    type: "text",
-    key: "url"
+  }]
+}, {
+  tab: "Link",
+  value: "link",
+  fields: [{
+    label: "Button Link",
+    key: "buttonLink",
+    type: "buttonLink"
   }]
 }, {
   tab: "Banner Spacing",

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

@@ -1,12 +1,4 @@
 const embedImageStyle = [{
-  tab: "Image Texts",
-  value: "imageTexts",
-  fields: [{
-    label: "Image Texts",
-    key: "imageTexts",
-    type: "imageTexts"
-  }]
-}, {
   tab: "Banner Spacing",
   value: "bannerSpacing",
   fields: [{

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

@@ -0,0 +1,113 @@
+import React from "react";
+import { FormControl, FormLabel, RadioGroup, FormControlLabel, Grid, Radio, TextField, Select, MenuItem } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const ButtonLink = props => {
+  const {
+    value,
+    data,
+    elementProps,
+    customProps,
+    onChange
+  } = props;
+  const {
+    key
+  } = data;
+  const {
+    metadata
+  } = customProps || {
+    metadata: {}
+  };
+  const {
+    buttonLink
+  } = metadata || {
+    actionTrigger: {}
+  };
+  const {
+    actionTrigger
+  } = buttonLink || {};
+  const {
+    options,
+    onClick
+  } = actionTrigger || {
+    options: []
+  };
+  const optSelected = options.filter(f => f.selected) || [];
+  const handleChange = e => {
+    onChange({
+      [key]: {
+        ...value,
+        [e.target.name]: e.target.value,
+        onClick: onClick || {}
+      }
+    });
+  };
+  const onURLChange = e => {
+    onChange({
+      url: e.target.value
+    });
+  };
+  const renderLinkTypeFields = () => {
+    if (value?.linkType === "webAddress") {
+      return /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        xs: 12,
+        children: /*#__PURE__*/_jsx(TextField, {
+          fullWidth: true,
+          size: "small",
+          placeholder: "https://",
+          onChange: onURLChange,
+          value: elementProps?.url
+        })
+      });
+    } else if (value?.linkType === "actionTrigger") {
+      return /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        xs: 12,
+        children: /*#__PURE__*/_jsx(Select, {
+          name: "actionStep",
+          size: "small",
+          fullWidth: true,
+          value: optSelected[0]?.value || "",
+          children: optSelected.map(m => {
+            return /*#__PURE__*/_jsx(MenuItem, {
+              value: m.value,
+              children: m.label
+            }, `bl_tr_opt_${m.value}`);
+          })
+        })
+      });
+    }
+  };
+  return /*#__PURE__*/_jsxs(Grid, {
+    container: true,
+    padding: 4,
+    spacing: 1,
+    children: [/*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      children: /*#__PURE__*/_jsxs(FormControl, {
+        children: [/*#__PURE__*/_jsx(FormLabel, {
+          id: "demo-radio-buttons-group-label",
+          children: "Where do you want to Link?"
+        }), /*#__PURE__*/_jsxs(RadioGroup, {
+          row: true,
+          "aria-labelledby": "demo-radio-buttons-group-label",
+          value: value?.linkType || "",
+          name: "linkType",
+          onChange: handleChange,
+          children: [/*#__PURE__*/_jsx(FormControlLabel, {
+            value: "actionTrigger",
+            control: /*#__PURE__*/_jsx(Radio, {}),
+            label: "Action Trigger"
+          }), /*#__PURE__*/_jsx(FormControlLabel, {
+            value: "webAddress",
+            control: /*#__PURE__*/_jsx(Radio, {}),
+            label: "Web Address"
+          })]
+        })]
+      })
+    }), renderLinkTypeFields()]
+  });
+};
+export default ButtonLink;

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

@@ -8,6 +8,7 @@ import GridSize from "./gridSize";
 import ElementSize from "./elementSize";
 import ImageTexts from "./imageTexts";
 import MenusArray from "./menusArray";
+import ButtonLink from "./buttonLink";
 const FieldMap = {
   text: Text,
   bannerSpacing: BannerSpacing,
@@ -18,6 +19,7 @@ const FieldMap = {
   gridSize: GridSize,
   elementSize: ElementSize,
   imageTexts: ImageTexts,
-  menusArray: MenusArray
+  menusArray: MenusArray,
+  buttonLink: ButtonLink
 };
 export default FieldMap;

package/dist/Editor/plugins/withEmbeds.js

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

package/dist/Editor/service/actionTrigger.js

@@ -0,0 +1,16 @@
+export const actionButtonRedirect = async (formData, props) => {
+  try {
+    const response = await fetch(`${props.url}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(formData)
+    });
+    const result = await response.json();
+    return result.data;
+  } catch (err) {
+    console.log(err);
+    return err;
+  }
+};

package/dist/Editor/utils/button.js

@@ -4,7 +4,10 @@ export const insertButton = editor => {
     type: "button",
     children: [{
       text: ""
-    }]
+    }],
+    buttonLink: {
+      linkType: "webAddress"
+    }
   };
   Transforms.insertNodes(editor, button);
   Transforms.move(editor);

package/package.json

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