@flozy/editor 1.1.2 → 1.1.4

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

@@ -0,0 +1,42 @@
+import React from "react";
+import { Grid, Slider } from "@mui/material";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+const GridSize = props => {
+  const {
+    value,
+    data,
+    onChange
+  } = props;
+  const {
+    key
+  } = data;
+  const handleChange = e => {
+    onChange({
+      [key]: e.target.value
+    });
+  };
+  return /*#__PURE__*/_jsx(Grid, {
+    container: true,
+    padding: 3,
+    children: /*#__PURE__*/_jsxs(Grid, {
+      item: true,
+      xs: 12,
+      children: [/*#__PURE__*/_jsxs("label", {
+        style: {
+          marginBottom: "12px",
+          fontWeight: "bold"
+        },
+        children: ["Grid Size: ", value || 12, " "]
+      }), /*#__PURE__*/_jsx(Slider, {
+        defaultValue: 12,
+        value: value || 12,
+        step: 1,
+        min: 1,
+        max: 12,
+        onChange: handleChange
+      })]
+    })
+  });
+};
+export default GridSize;

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

@@ -0,0 +1,75 @@
+import React from "react";
+import { Button, Grid, IconButton, InputAdornment, TextField } from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const ImageTexts = props => {
+  const {
+    value,
+    data,
+    onChange
+  } = props;
+  const texts = value || [""];
+  const {
+    key
+  } = data;
+  const handleChange = e => {
+    const updatedTexts = texts?.map((m, i) => {
+      if (`text-${i}` === e.target.name) {
+        return e.target.value;
+      }
+      return m;
+    });
+    onChange({
+      [key]: updatedTexts
+    });
+  };
+  const onAddText = () => {
+    onChange({
+      [key]: [...texts, ""]
+    });
+  };
+  const handleDelete = deleteIndex => () => {
+    const updatedTexts = texts?.filter((m, i) => {
+      return `text=${deleteIndex}` !== i;
+    });
+    onChange({
+      [key]: updatedTexts
+    });
+  };
+  return /*#__PURE__*/_jsxs(Grid, {
+    container: true,
+    padding: 3,
+    spacing: 2,
+    className: "input-adorn",
+    children: [texts?.map((m, i) => {
+      return /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        xs: 12,
+        children: /*#__PURE__*/_jsx(TextField, {
+          fullWidth: true,
+          name: `text-${i}`,
+          placeholder: "Enter Image Text",
+          onChange: handleChange,
+          InputProps: {
+            endAdornment: /*#__PURE__*/_jsx(InputAdornment, {
+              position: "end",
+              children: /*#__PURE__*/_jsx(IconButton, {
+                onClick: handleDelete(i),
+                children: /*#__PURE__*/_jsx(DeleteIcon, {})
+              })
+            })
+          }
+        })
+      }, `imt_${i}`);
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      children: /*#__PURE__*/_jsx(Button, {
+        onClick: onAddText,
+        children: "Add Text"
+      })
+    })]
+  });
+};
+export default ImageTexts;

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

@@ -0,0 +1,21 @@
+import Text from "./text";
+import BannerSpacing from "./bannerSpacing";
+import BorderRadius from "./borderRadius";
+import Color from "./color";
+import Alignment from "./alignment";
+import BackgroundImage from "./backgroundImage";
+import GridSize from "./gridSize";
+import ElementSize from "./elementSize";
+import ImageTexts from "./imageTexts";
+const FieldMap = {
+  text: Text,
+  bannerSpacing: BannerSpacing,
+  borderRadius: BorderRadius,
+  color: Color,
+  alignment: Alignment,
+  backgroundImage: BackgroundImage,
+  gridSize: GridSize,
+  elementSize: ElementSize,
+  imageTexts: ImageTexts
+};
+export default FieldMap;

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

@@ -0,0 +1,46 @@
+import React from "react";
+import { Grid, TextField } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Text = props => {
+  const {
+    value,
+    data,
+    onChange
+  } = props;
+  const {
+    key
+  } = data;
+  const handleChange = e => {
+    onChange({
+      [key]: e.target.value
+    });
+  };
+  return /*#__PURE__*/_jsxs(Grid, {
+    container: true,
+    padding: 1,
+    children: [/*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      style: {
+        fontWeight: "bold",
+        marginBottom: "8px"
+      },
+      children: /*#__PURE__*/_jsx("label", {
+        children: data?.label
+      })
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      children: /*#__PURE__*/_jsx(TextField, {
+        name: key,
+        type: "text",
+        value: value,
+        onChange: handleChange,
+        size: "small",
+        fullWidth: true
+      })
+    })]
+  });
+};
+export default Text;

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

@@ -0,0 +1,51 @@
+const gridItemStyle = [{
+  tab: "Banner Spacing",
+  value: "bannerSpacing",
+  fields: [{
+    label: "Banner Spacing",
+    key: "bannerSpacing",
+    type: "bannerSpacing"
+  }]
+}, {
+  tab: "Border Radius",
+  value: "borderRadius",
+  fields: [{
+    label: "Border Radius",
+    key: "borderRadius",
+    type: "borderRadius"
+  }]
+}, {
+  tab: "Colors",
+  value: "colors",
+  fields: [{
+    label: "Text",
+    key: "textColor",
+    type: "color",
+    needPreview: true
+  }, {
+    label: "Background",
+    key: "bgColor",
+    type: "color"
+  }, {
+    label: "Border",
+    key: "borderColor",
+    type: "color"
+  }]
+}, {
+  tab: "Position",
+  value: "position",
+  fields: [{
+    label: "Set Postion (Vertical & Horizantal)",
+    key: "alignment",
+    type: "alignment"
+  }]
+}, {
+  tab: "Size",
+  value: "gridSize",
+  fields: [{
+    label: "Grid Size",
+    key: "grid",
+    type: "gridSize"
+  }]
+}];
+export default gridItemStyle;

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

@@ -0,0 +1,51 @@
+const gridStyle = [{
+  tab: "Banner Spacing",
+  value: "bannerSpacing",
+  fields: [{
+    label: "Banner Spacing",
+    key: "bannerSpacing",
+    type: "bannerSpacing"
+  }]
+}, {
+  tab: "Border Radius",
+  value: "borderRadius",
+  fields: [{
+    label: "Border Radius",
+    key: "borderRadius",
+    type: "borderRadius"
+  }]
+}, {
+  tab: "Colors",
+  value: "colors",
+  fields: [{
+    label: "Text",
+    key: "textColor",
+    type: "color",
+    needPreview: true
+  }, {
+    label: "Background",
+    key: "bgColor",
+    type: "color"
+  }, {
+    label: "Border",
+    key: "borderColor",
+    type: "color"
+  }]
+}, {
+  tab: "Position",
+  value: "position",
+  fields: [{
+    label: "Set Postion (Vertical & Horizantal)",
+    key: "alignment",
+    type: "alignment"
+  }]
+}, {
+  tab: "Background",
+  value: "backgroundImage",
+  fields: [{
+    label: "Background Image",
+    key: "backgroundImage",
+    type: "backgroundImage"
+  }]
+}];
+export default gridStyle;

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

@@ -0,0 +1,114 @@
+import React, { useState } from "react";
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button, Tabs, Tab, Grid } from "@mui/material";
+import FieldMap from "./fieldTypes";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const StyleContent = props => {
+  const {
+    value,
+    renderTabs,
+    onChange,
+    element,
+    customProps
+  } = props;
+  const tabContent = renderTabs.find(f => f.value === value);
+  const {
+    fields
+  } = tabContent || {
+    fields: []
+  };
+  return /*#__PURE__*/_jsx(Grid, {
+    container: true,
+    spacing: 2,
+    children: /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      style: {
+        marginTop: "12px"
+      },
+      children: [...fields].map(m => {
+        const FieldComponent = FieldMap[m.type];
+        return FieldComponent ? /*#__PURE__*/_jsx(FieldComponent, {
+          data: m,
+          value: element[m.key],
+          onChange: onChange,
+          elementProps: element,
+          customProps: customProps
+        }, `ei_stt_tab_${value}_${m.key}`) : null;
+      })
+    })
+  }, value);
+};
+const StyleTabs = props => {
+  const {
+    value,
+    handleChange,
+    renderTabs
+  } = props;
+  return /*#__PURE__*/_jsx(Tabs, {
+    value: value,
+    onChange: handleChange,
+    variant: "scrollable",
+    scrollButtons: "auto",
+    "aria-label": "scrollable auto tabs example",
+    children: renderTabs.map((m, i) => {
+      return /*#__PURE__*/_jsx(Tab, {
+        value: m.value,
+        label: m.tab
+      }, `editor-stt-tab-${m.value}`);
+    })
+  });
+};
+const StyleBuilder = props => {
+  const {
+    title,
+    renderTabs,
+    element,
+    onSave,
+    onClose,
+    customProps
+  } = props;
+  const [elementProps, setElementProps] = useState(element);
+  const [tab, setTab] = useState(renderTabs[0]?.value);
+  const handleChange = (e, newValue) => {
+    setTab(newValue);
+  };
+  const onElementPropsChange = data => {
+    console.log(data);
+    setElementProps({
+      ...elementProps,
+      ...data
+    });
+  };
+  const handleSave = () => {
+    onSave(elementProps);
+  };
+  return /*#__PURE__*/_jsxs(Dialog, {
+    open: true,
+    fullWidth: true,
+    children: [/*#__PURE__*/_jsx(DialogTitle, {
+      children: title
+    }), /*#__PURE__*/_jsxs(DialogContent, {
+      children: [/*#__PURE__*/_jsx(StyleTabs, {
+        renderTabs: renderTabs,
+        value: tab,
+        handleChange: handleChange
+      }), /*#__PURE__*/_jsx(StyleContent, {
+        renderTabs: renderTabs,
+        value: tab,
+        element: elementProps,
+        onChange: onElementPropsChange,
+        customProps: customProps
+      })]
+    }), /*#__PURE__*/_jsxs(DialogActions, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        onClick: onClose,
+        children: "Cancel"
+      }), /*#__PURE__*/_jsx(Button, {
+        onClick: handleSave,
+        children: "Save"
+      })]
+    })]
+  });
+};
+export default StyleBuilder;

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

@@ -0,0 +1,10 @@
+const pageSettingsStyle = [{
+  tab: "Colors",
+  value: "colors",
+  fields: [{
+    label: "Background",
+    key: "pageColor",
+    type: "color"
+  }]
+}];
+export default pageSettingsStyle;

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

@@ -0,0 +1,38 @@
+const tableStyle = [{
+  tab: "Table",
+  value: "tableSettings",
+  fields: [{
+    label: "Table Background",
+    key: "table.bgColor",
+    type: "color"
+  }, {
+    label: "Border",
+    key: "table.borderColor",
+    type: "color"
+  }]
+}, {
+  tab: "Row",
+  value: "rowSettings",
+  fields: [{
+    label: "Background",
+    key: "row.bgColor",
+    type: "color"
+  }, {
+    label: "Border",
+    key: "row.borderColor",
+    type: "color"
+  }]
+}, {
+  tab: "Column",
+  value: "columnSettings",
+  fields: [{
+    label: "Background",
+    key: "col.bgColor",
+    type: "color"
+  }, {
+    label: "Border",
+    key: "col.borderColor",
+    type: "color"
+  }]
+}];
+export default tableStyle;

package/dist/Editor/common/Uploader.js

@@ -0,0 +1,87 @@
+import React, { useState } from "react";
+import { Grid, Button } from "@mui/material";
+import CloudUploadIcon from "@mui/icons-material/CloudUpload";
+import { convertBase64 } from "../utils/helper";
+import { uploadFile } from "../service/fileupload";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Uploader = props => {
+  const {
+    value,
+    data,
+    onUploaded,
+    customProps
+  } = props;
+  const {
+    key
+  } = data;
+  const [base64, setBase64] = useState(value);
+  const [uploading, setUploading] = useState(false);
+  const handleChange = async e => {
+    const file = e.target.files[0];
+    const strImage = await convertBase64(file);
+    setBase64(strImage);
+    doUpload(strImage);
+  };
+  const doUpload = async strImage => {
+    setUploading(true);
+    const result = await uploadFile({
+      image: strImage
+    }, customProps);
+    setUploading(false);
+    if (result && result?.imageURL) {
+      onUploaded({
+        [key]: result?.imageURL
+      });
+    }
+  };
+  const onRemoveBG = () => {
+    setBase64(null);
+    onUploaded({
+      [key]: "none"
+    });
+  };
+  return /*#__PURE__*/_jsxs(Grid, {
+    container: true,
+    padding: 3,
+    children: [/*#__PURE__*/_jsxs(Grid, {
+      item: true,
+      xs: 12,
+      style: {
+        display: "flex"
+      },
+      justifyContent: "center",
+      alignItems: "center",
+      children: [/*#__PURE__*/_jsxs(Button, {
+        component: "label",
+        variant: "contained",
+        startIcon: /*#__PURE__*/_jsx(CloudUploadIcon, {}),
+        children: ["Upload file", /*#__PURE__*/_jsx("input", {
+          type: "file",
+          style: {
+            opacity: 0
+          },
+          onChange: handleChange
+        })]
+      }), /*#__PURE__*/_jsx("input", {
+        type: "checkbox",
+        value: "none",
+        checked: value === "none",
+        onChange: onRemoveBG
+      }), " ", "None"]
+    }), uploading ? "Uploading..." : "", /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      style: {
+        marginTop: "12px",
+        width: "100%",
+        backgroundImage: base64 ? `url(${base64})` : "none",
+        backgroundSize: "contain",
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "center",
+        height: "100px"
+      }
+    })]
+  });
+};
+export default Uploader;

package/dist/Editor/plugins/withEmbeds.js

@@ -1,20 +1,27 @@
-import { Transforms, Path, Node } from 'slate';
+import { Transforms, Path, Node } from "slate";
 const withEmbeds = editor => {
   const {
     isVoid,
     insertBreak
   } = editor;
-  editor.isVoid = element => ['video', 'image', 'htmlCode'].includes(element.type) ? true : isVoid(element);
+  editor.isVoid = element => {
+    if (["video", "htmlCode"].includes(element.type)) {
+      return true;
+    } else if (element.type === "image") {
+      return true;
+    } else {
+      return isVoid(element);
+    }
+  };
   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, {
-        type: 'paragraph',
+        type: "paragraph",
         children: [{
-          text: ''
+          text: ""
         }]
       }, {
         at: nextPath,

package/dist/Editor/plugins/withTable.js

@@ -1,4 +1,5 @@
 import { Editor, Range, Point, Element } from "slate";
+const NON_DELETABLE_BLOCKS = ["table-cell", "carousel-item"];
 const withTable = editor => {
   const {
     deleteBackward,
@@ -10,12 +11,12 @@ const withTable = editor => {
     } = editor;
     if (selection) {
       const [cell] = Editor.nodes(editor, {
-        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-cell"
+        match: n => !Editor.isEditor(n) && Element.isElement(n) && NON_DELETABLE_BLOCKS.indexOf(n.type) > -1
       });
       const prevNodePath = Editor.before(editor, selection);
       const [tableNode] = Editor.nodes(editor, {
         at: prevNodePath,
-        match: n => !Editor.isEditor(n) && Element.isElement && n.type === "table-cell"
+        match: n => !Editor.isEditor(n) && Element.isElement && NON_DELETABLE_BLOCKS.indexOf(n.type) > -1
       });
       if (cell) {
         const [, cellPath] = cell;
@@ -36,12 +37,12 @@ const withTable = editor => {
     } = editor;
     if (selection && Range.isCollapsed(selection)) {
       const [cell] = Editor.nodes(editor, {
-        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-cell"
+        match: n => !Editor.isEditor(n) && Element.isElement(n) && NON_DELETABLE_BLOCKS.indexOf(n.type) > -1
       });
       const prevNodePath = Editor.after(editor, selection);
       const [tableNode] = Editor.nodes(editor, {
         at: prevNodePath,
-        match: n => !Editor.isEditor(n) && Element.isElement && n.type === "table-cell"
+        match: n => !Editor.isEditor(n) && Element.isElement && NON_DELETABLE_BLOCKS.indexOf(n.type) > -1
       });
       if (cell) {
         const [, cellPath] = cell;

package/dist/Editor/service/fileupload.js

@@ -0,0 +1,17 @@
+export const uploadFile = async (formData, props) => {
+  try {
+    const response = await fetch(`${props.API_HOST}/api/v1/general/notes/file_upload`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${props.token}`
+      },
+      body: JSON.stringify(formData)
+    });
+    const result = await response.json();
+    return result.data;
+  } catch (err) {
+    console.log(err);
+    return err;
+  }
+};