@flozy/editor 1.1.1 → 1.1.4

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

@@ -1,103 +1,118 @@
-import React, { useRef, useState } from 'react';
-import Button from '../../common/Button';
-import Icon from '../../common/Icon';
-import { isBlockActive } from '../../utils/SlateUtilityFunctions';
-import usePopup from '../../utils/customHooks/usePopup';
-import { insertEmbed } from '../../utils/embed';
-import { Transforms } from 'slate';
-import { ReactEditor } from 'slate-react';
-import './Embed.css';
+import React, { useRef, useState } from "react";
+import { Transforms } from "slate";
+import { ReactEditor } from "slate-react";
+import { Grid, Dialog, DialogTitle, DialogContent, DialogActions, Button, TextField, IconButton } from "@mui/material";
+import Icon from "../../common/Icon";
+import { isBlockActive } from "../../utils/SlateUtilityFunctions";
+import usePopup from "../../utils/customHooks/usePopup";
+import { insertEmbed } from "../../utils/embed";
+import Uploader from "../../common/Uploader";
+import "./Embed.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const EMBED_LABEL = {
+  image: "Image",
+  video: "Video"
+};
 const Embed = ({
   editor,
-  format
+  format,
+  customProps
 }) => {
   const urlInputRef = useRef();
+  const [open, setOpen] = useState(false);
   const [showInput, setShowInput] = usePopup(urlInputRef);
   const [formData, setFormData] = useState({
-    url: '',
-    alt: ''
+    url: "",
+    alt: ""
   });
   const [selection, setSelection] = useState();
-  const handleButtonClick = e => {
+  const handleFormSubmit = () => {
+    if (formData?.url) {
+      selection && Transforms.select(editor, selection);
+      selection && ReactEditor.focus(editor);
+      insertEmbed(editor, {
+        ...formData
+      }, format);
+      setShowInput(false);
+      setFormData({
+        url: "",
+        alt: ""
+      });
+    }
+  };
+  const onToggle = e => {
     e.preventDefault();
     setSelection(editor.selection);
     selection && ReactEditor.focus(editor);
-    setShowInput(prev => !prev);
+    setOpen(true);
   };
-  const handleFormSubmit = e => {
-    e.preventDefault();
-    selection && Transforms.select(editor, selection);
-    selection && ReactEditor.focus(editor);
-    insertEmbed(editor, {
-      ...formData
-    }, format);
-    setShowInput(false);
+  const onSave = () => {
+    handleFormSubmit();
+    setOpen(false);
+  };
+  const onClose = () => {
+    setOpen(false);
+  };
+  const onUploaded = uploadedData => {
     setFormData({
-      url: '',
-      alt: ''
+      ...formData,
+      ...uploadedData
     });
   };
-  const handleImageUpload = () => {
-    setShowInput(false);
+  const handleChange = e => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    });
   };
-  return /*#__PURE__*/_jsxs("div", {
-    ref: urlInputRef,
-    className: "popup-wrapper",
-    children: [/*#__PURE__*/_jsx(Button, {
-      active: isBlockActive(editor, format),
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(IconButton, {
+      className: isBlockActive(editor, format) ? "active" : "",
       style: {
-        border: showInput ? '1px solid lightgray' : '',
-        borderBottom: 'none'
+        border: showInput ? "1px solid lightgray" : "",
+        borderBottom: "none"
       },
       format: format,
-      onClick: handleButtonClick,
+      onClick: onToggle,
       children: /*#__PURE__*/_jsx(Icon, {
         icon: format
       })
-    }), showInput && /*#__PURE__*/_jsxs("div", {
-      className: "popup",
-      children: [format === 'image' && /*#__PURE__*/_jsxs("div", {
-        children: [/*#__PURE__*/_jsxs("div", {
-          style: {
-            display: 'flex',
-            gap: '10px'
-          },
-          onClick: handleImageUpload,
-          children: [/*#__PURE__*/_jsx(Icon, {
-            icon: "upload"
-          }), /*#__PURE__*/_jsx("span", {
-            children: "Upload"
+    }), /*#__PURE__*/_jsxs(Dialog, {
+      open: open,
+      fullWidth: true,
+      children: [/*#__PURE__*/_jsx(DialogTitle, {
+        children: EMBED_LABEL[format] || "Embed"
+      }), /*#__PURE__*/_jsx(DialogContent, {
+        children: /*#__PURE__*/_jsxs(Grid, {
+          container: true,
+          children: [/*#__PURE__*/_jsx(Grid, {
+            item: true,
+            xs: 12,
+            children: /*#__PURE__*/_jsx(TextField, {
+              name: "url",
+              placeholder: "Enter URL",
+              size: "small",
+              fullWidth: true,
+              onChange: handleChange,
+              value: formData?.url || ""
+            })
+          }), /*#__PURE__*/_jsx(Uploader, {
+            value: formData,
+            data: {
+              key: "url"
+            },
+            customProps: customProps,
+            onUploaded: onUploaded
           })]
-        }), /*#__PURE__*/_jsx("p", {
-          style: {
-            textAlign: 'center',
-            opacity: '0.7',
-            width: '100%'
-          },
-          children: "OR"
-        })]
-      }), /*#__PURE__*/_jsxs("form", {
-        onSubmit: handleFormSubmit,
-        children: [/*#__PURE__*/_jsx("input", {
-          type: "text",
-          placeholder: "Enter url",
-          value: formData.url,
-          onChange: e => setFormData(prev => ({
-            ...prev,
-            url: e.target.value
-          }))
-        }), /*#__PURE__*/_jsx("input", {
-          type: "text",
-          placeholder: "Enter alt",
-          value: formData.alt,
-          onChange: e => setFormData(prev => ({
-            ...prev,
-            alt: e.target.value
-          }))
+        })
+      }), /*#__PURE__*/_jsxs(DialogActions, {
+        children: [/*#__PURE__*/_jsx(Button, {
+          onClick: onClose,
+          children: "Cancel"
         }), /*#__PURE__*/_jsx(Button, {
-          type: "submit",
+          onClick: onSave,
           children: "Save"
         })]
       })]

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

@@ -0,0 +1,23 @@
+import React from "react";
+import StyleBuilder from "../../common/StyleBuilder";
+import embedImageStyle from "../../common/StyleBuilder/embedImageStyle";
+import { jsx as _jsx } from "react/jsx-runtime";
+const EmbedPopup = props => {
+  const {
+    element,
+    onSave,
+    onClose,
+    customProps,
+    format
+  } = props;
+  return /*#__PURE__*/_jsx(StyleBuilder, {
+    title: "Image",
+    type: format === "image" ? "embedImageStyle" : "embedImageStyle",
+    element: element,
+    onSave: onSave,
+    onClose: onClose,
+    renderTabs: format === "image" ? embedImageStyle : embedImageStyle,
+    customProps: customProps
+  });
+};
+export default EmbedPopup;

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

@@ -1,36 +1,59 @@
 import React, { useEffect, useState } from "react";
-import { useSlateStatic, useSelected, useFocused, ReactEditor } from "slate-react";
-import { Node, Transforms } from "slate";
+import { useSlateStatic, useSelected, ReactEditor } from "slate-react";
+import { Node, Transforms, Editor, Element, Path } from "slate";
 import Icon from "../../common/Icon";
 import useResize from "../../utils/customHooks/useResize";
+import { insertImageText } from "../../utils/imageText";
+import EmbedPopup from "./EmbedPopup";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Image = ({
   attributes,
   element,
-  children
+  children,
+  customProps
 }) => {
   const {
     url,
-    alt
+    alt,
+    bannerSpacing,
+    alignment,
+    bgColor,
+    borderColor
   } = element;
+  const {
+    left,
+    top,
+    right,
+    bottom
+  } = bannerSpacing || {};
+  const {
+    vertical,
+    horizantal
+  } = alignment || {};
   const editor = useSlateStatic();
   const selected = useSelected();
-  const focused = useFocused();
   const [parentDOM, setParentDOM] = useState(null);
+  const [openSetttings, setOpenSettings] = useState(false);
   const [size, onMouseDown, resizing, onLoad] = useResize({
     parentDOM,
     size: element?.size
   });
   const arr = Array.from(Node.elements(editor));
   const ele = arr.find(([elem]) => element === elem);
+  const path = ReactEditor.findPath(editor, element);
   useEffect(() => {
     if (editor && ele[1] !== undefined) {
       const dom = ReactEditor.toDOMNode(editor, Node.get(editor, ele[1]));
       setParentDOM(dom);
-      onLoad(dom);
+      onLoad(element?.size || {});
     }
   }, []);
+  useEffect(() => {
+    if (!resizing) {
+      onLoad(element?.size || {});
+    }
+  }, [element?.size]);
   useEffect(() => {
     if (!resizing) {
       Transforms.setNodes(editor, {
@@ -38,17 +61,74 @@ const Image = ({
       });
     }
   }, [resizing]);
+  const handleImageClick = () => {
+    Transforms.select(editor, {
+      anchor: Editor.start(editor, path),
+      focus: Editor.end(editor, path)
+    });
+  };
+  const onSettings = () => {
+    setOpenSettings(true);
+  };
+  const onSave = data => {
+    const updateData = {
+      ...data
+    };
+    delete updateData.children;
+    Transforms.setNodes(editor, {
+      ...updateData
+    }, {
+      at: path
+    });
+    onClose();
+  };
+  const onClose = () => {
+    setOpenSettings(false);
+  };
+  const onAddText = () => {
+    Transforms.wrapNodes(editor, {
+      type: "image-text-wrapper",
+      children: []
+    });
+    insertImageText(editor, [...path, 1]);
+  };
+  const ToolBar = () => {
+    return selected ? /*#__PURE__*/_jsxs("div", {
+      className: "element-toolbar",
+      contentEditable: false,
+      children: [/*#__PURE__*/_jsx("button", {
+        onClick: onAddText,
+        children: "Add Text"
+      }), /*#__PURE__*/_jsx("button", {
+        onClick: onSettings,
+        children: "Settings"
+      })]
+    }) : null;
+  };
+  const totalMinus = (parseInt(left) || 0) + (parseInt(right) || 0);
   return /*#__PURE__*/_jsxs("div", {
     ...attributes,
     className: "embed",
     style: {
       display: "flex",
-      width: "100%",
+      width: `calc(100% - ${totalMinus}px)`,
       maxWidth: "100%",
-      boxShadow: selected && focused && "0 0 3px 3px lightgray"
+      paddingLeft: `${left}px`,
+      paddingRight: `${right}px`,
+      paddingTop: `${top}px`,
+      paddingBottom: `${bottom}px`,
+      backgroundColor: bgColor,
+      justifyContent: horizantal,
+      alignContent: vertical,
+      border: `1px solid ${borderColor}`
     },
     ...element.attr,
-    children: [/*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(EmbedPopup, {
+      element: element,
+      onSave: onSave,
+      onClose: onClose,
+      customProps: customProps
+    }) : null, /*#__PURE__*/_jsxs("div", {
       contentEditable: false,
       style: {
         position: "relative",
@@ -57,7 +137,8 @@ const Image = ({
       },
       children: [/*#__PURE__*/_jsx("img", {
         alt: alt,
-        src: url
+        src: url,
+        onClick: handleImageClick
       }), selected && /*#__PURE__*/_jsx("button", {
         onPointerDown: onMouseDown,
         style: {
@@ -66,6 +147,7 @@ const Image = ({
           opacity: 1,
           background: "transparent"
         },
+        className: "resize",
         children: /*#__PURE__*/_jsx(Icon, {
           icon: "resize"
         })

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

@@ -1,5 +1,6 @@
-import React from "react";
-import { useSelected, useFocused } from "slate-react";
+import React, { useState, useEffect } from "react";
+import { useSelected, useFocused, useSlateStatic, ReactEditor } from "slate-react";
+import { Node, Transforms } from "slate";
 import Icon from "../../common/Icon";
 import useResize from "../../utils/customHooks/useResize";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -13,21 +14,45 @@ const Video = ({
     url,
     alt
   } = element;
-  const [size, onMouseDown, resizing] = useResize();
+  const editor = useSlateStatic();
   const selected = useSelected();
   const focused = useFocused();
+  const [parentDOM, setParentDOM] = useState(null);
+  const [size, onMouseDown, resizing, onLoad] = useResize({
+    parentDOM,
+    size: element?.size
+  });
+  const arr = Array.from(Node.elements(editor));
+  const ele = arr.find(([elem]) => element === elem);
+  useEffect(() => {
+    if (editor && ele[1] !== undefined) {
+      const dom = ReactEditor.toDOMNode(editor, Node.get(editor, ele[1]));
+      setParentDOM(dom);
+      onLoad(dom);
+    }
+  }, []);
+  useEffect(() => {
+    if (!resizing) {
+      Transforms.setNodes(editor, {
+        size: size
+      });
+    }
+  }, [resizing]);
   return /*#__PURE__*/_jsxs("div", {
     ...attributes,
     className: "embed",
     style: {
       display: "flex",
+      width: "100%",
+      maxWidth: "100%",
       boxShadow: selected && focused && "0 0 3px 3px lightgray"
     },
     ...element.attr,
     children: [/*#__PURE__*/_jsxs("div", {
       contentEditable: false,
       style: {
-        width: `${size.width}px`,
+        position: "relative",
+        width: size.widthInPercent ? `${size.widthInPercent}%` : `${size.width}px`,
         height: `${size.height}px`
       },
       children: [
@@ -50,13 +75,14 @@ const Video = ({
         frameBorder: "0",
         title: alt
       }), selected && /*#__PURE__*/_jsx("button", {
-        onMouseDown: onMouseDown,
+        onPointerDown: onMouseDown,
         style: {
           width: "15px",
           height: "15px",
           opacity: 1,
           background: "transparent"
         },
+        className: "resize",
         children: /*#__PURE__*/_jsx(Icon, {
           icon: "resize"
         })

package/dist/Editor/Elements/Equation/EquationButton.js

@@ -1,9 +1,9 @@
-import { useRef, useState } from 'react';
-import Button from '../../common/Button';
-import Icon from '../../common/Icon';
-import usePopup from '../../utils/customHooks/usePopup';
-import { insertEquation } from '../../utils/equation';
-import { Transforms } from 'slate';
+import { useRef, useState } from "react";
+import Button from "../../common/Button";
+import Icon from "../../common/Icon";
+import usePopup from "../../utils/customHooks/usePopup";
+import { insertEquation } from "../../utils/equation";
+import { Transforms } from "slate";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const EquationButton = ({
@@ -11,7 +11,7 @@ const EquationButton = ({
 }) => {
   const equationInputRef = useRef(null);
   const [showInput, setShowInput] = usePopup(equationInputRef);
-  const [math, setMath] = useState('');
+  const [math, setMath] = useState("");
   const [displayInline, setDisplayInline] = useState(false);
   const [selection, setSelection] = useState();
   const toggleButton = () => {
@@ -22,7 +22,7 @@ const EquationButton = ({
   const handleInputChange = ({
     target
   }) => {
-    if (target.type === 'checkbox') {
+    if (target.type === "checkbox") {
       setDisplayInline(prev => !prev);
     } else {
       setMath(target.value);
@@ -32,12 +32,12 @@ const EquationButton = ({
     if (!math) return;
     selection && Transforms.select(editor, selection);
     insertEquation(editor, math, displayInline);
-    console.log('btn click');
+    console.log("btn click");
     setShowInput(false);
   };
   return /*#__PURE__*/_jsxs("div", {
     ref: equationInputRef,
-    className: "popup-wrapper",
+    className: "popup-wrapper1",
     children: [/*#__PURE__*/_jsx(Button, {
       format: "equation",
       onClick: toggleButton,
@@ -48,8 +48,8 @@ const EquationButton = ({
       className: "popup",
       children: [/*#__PURE__*/_jsxs("div", {
         style: {
-          display: 'flex',
-          gap: '5px'
+          display: "flex",
+          gap: "5px"
         },
         children: [/*#__PURE__*/_jsx("input", {
           type: "text",

package/dist/Editor/Elements/Grid/Grid.js

@@ -1,20 +1,39 @@
-import React from "react";
+import React, { useState } from "react";
 import { Transforms, Path } from "slate";
-import { useSelected, useSlateStatic } from "slate-react";
+import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
 import { gridItem } from "../../utils/gridItem";
+import GridPopup from "./GridPopup";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Grid = props => {
   const {
     attributes,
     children,
-    element
+    element,
+    customProps
   } = props;
+  const [openSetttings, setOpenSettings] = useState(false);
   const {
-    grid
+    grid,
+    bannerSpacing,
+    bgColor,
+    alignment,
+    backgroundImage,
+    borderColor
   } = element;
+  const {
+    left,
+    top,
+    right,
+    bottom
+  } = bannerSpacing || {};
+  const {
+    vertical,
+    horizantal
+  } = alignment || {};
   const editor = useSlateStatic();
   const selected = useSelected();
+  const path = ReactEditor.findPath(editor, element);
   const onAddGridItem = () => {
     const currentPath = editor.selection?.anchor?.path;
     const ancestorsPath = Path.ancestors(currentPath, {
@@ -39,20 +58,57 @@ const Grid = props => {
       });
     }
   };
+  const onSettings = () => {
+    setOpenSettings(true);
+  };
+  const onSave = data => {
+    const updateData = {
+      ...data
+    };
+    delete updateData.children;
+    Transforms.setNodes(editor, {
+      ...updateData
+    }, {
+      at: path
+    });
+    onClose();
+  };
+  const onClose = () => {
+    setOpenSettings(false);
+  };
   const GridToolBar = () => {
-    return selected ? /*#__PURE__*/_jsx("div", {
+    return selected ? /*#__PURE__*/_jsxs("div", {
       className: "grid-container-toolbar",
       contentEditable: false,
-      children: /*#__PURE__*/_jsx("button", {
+      children: [/*#__PURE__*/_jsx("button", {
+        onClick: onSettings,
+        children: "Settings"
+      }), /*#__PURE__*/_jsx("button", {
         onClick: onAddGridItem,
         children: "+ Add Item"
-      })
+      })]
     }) : null;
   };
   return /*#__PURE__*/_jsxs("div", {
     className: `grid-container ${grid}`,
     ...attributes,
-    children: [/*#__PURE__*/_jsx(GridToolBar, {}), children]
+    style: {
+      paddingLeft: `${left}px`,
+      paddingRight: `${right}px`,
+      paddingTop: `${top}px`,
+      paddingBottom: `${bottom}px`,
+      backgroundColor: bgColor,
+      justifyContent: horizantal,
+      alignContent: vertical,
+      backgroundImage: backgroundImage ? `url(${backgroundImage})` : "none",
+      border: `1px solid ${borderColor}`
+    },
+    children: [/*#__PURE__*/_jsx(GridToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(GridPopup, {
+      element: element,
+      onSave: onSave,
+      onClose: onClose,
+      customProps: customProps
+    }) : null, children]
   });
 };
 export default Grid;

package/dist/Editor/Elements/Grid/GridButton.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { IconButton } from "@mui/material";
 import ViewComfyIcon from "@mui/icons-material/ViewComfy";
 import { insertGrid } from "../../utils/grid";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -9,12 +10,9 @@ const GridButton = props => {
   const handleInsertGrid = () => {
     insertGrid(editor);
   };
-  return /*#__PURE__*/_jsx("button", {
+  return /*#__PURE__*/_jsx(IconButton, {
     onClick: handleInsertGrid,
     title: "Layout",
-    style: {
-      marginLeft: "8px"
-    },
     children: /*#__PURE__*/_jsx(ViewComfyIcon, {})
   });
 };