@flozy/editor 1.1.1 → 1.1.4

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;
+  }
+};

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -1,27 +1,29 @@
 import { Editor, Transforms, Element as SlateElement } from "slate";
+import { fontFamilyMap, sizeMap } from "./font";
 import Link from "../Elements/Link/Link";
 import Image from "../Elements/Embed/Image";
 import Video from "../Elements/Embed/Video";
 import Equation from "../Elements/Equation/Equation";
 import HtmlCode from "../Elements/CodeToText/HtmlCode";
 import Table from "../Elements/Table/Table";
+import TableRow from "../Elements/Table/TableRow";
+import TableCell from "../Elements/Table/TableCell";
 import Mentions from "../Elements/Mentions/Mentions";
 import Grid from "../Elements/Grid/Grid";
 import GridItem from "../Elements/Grid/GridItem";
+import Accordion from "../Elements/Accordion/Accordion";
+import AccordionSummary from "../Elements/Accordion/AccordionSummary";
+import AccordionDetails from "../Elements/Accordion/AccordionDetails";
+import Signature from "../Elements/Signature/Signature";
+import Signed from "../Elements/Signature/Signed";
+import EditorButton from "../Elements/Button/EditorButton";
+import Carousel from "../Elements/Carousel/Carousel";
+import CarouselItem from "../Elements/Carousel/CarouselItem";
+import ImageTextWrapper from "../Elements/ImageText/ImageTextWrapper";
+import ImageText from "../Elements/ImageText/ImageText";
 import { jsx as _jsx } from "react/jsx-runtime";
 const alignment = ["alignLeft", "alignRight", "alignCenter"];
 const list_types = ["orderedList", "unorderedList"];
-export const sizeMap = {
-  small: "0.75em",
-  normal: "1em",
-  medium: "1.75em",
-  huge: "2.5em"
-};
-export const fontFamilyMap = {
-  sans: "Helvetica,Arial, sans serif",
-  serif: "Georgia, Times New Roaman,serif",
-  monospace: "Monaco, Courier New,monospace"
-};
 export const toggleBlock = (editor, format) => {
   const isActive = isBlockActive(editor, format);
   const isList = list_types.includes(format);
@@ -71,8 +73,13 @@ export const toggleMark = (editor, format) => {
   }
 };
 export const isMarkActive = (editor, format) => {
-  const marks = Editor.marks(editor);
-  return marks ? marks[format] === true : false;
+  try {
+    const marks = Editor.marks(editor);
+    return marks ? marks[format] === true : false;
+  } catch (err) {
+    console.log(err);
+    return null;
+  }
 };
 export const isBlockActive = (editor, format) => {
   const [match] = Editor.nodes(editor, {
@@ -87,9 +94,14 @@ export const activeMark = (editor, format) => {
     fontSize: "normal",
     fontFamily: "sans"
   };
-  const marks = Editor.marks(editor);
-  const defaultValue = defaultMarkData[format];
-  return marks?.[format] ?? defaultValue;
+  try {
+    const marks = Editor.marks(editor);
+    const defaultValue = defaultMarkData[format];
+    return marks?.[format] ?? defaultValue;
+  } catch (err) {
+    console.log(err);
+    return null;
+  }
 };
 export const getMarked = (leaf, children) => {
   if (leaf.bold) {
@@ -256,20 +268,25 @@ export const getBlock = props => {
         ...props
       });
     case "table-row":
-      return /*#__PURE__*/_jsx("tr", {
-        ...attributes,
-        children: children
+      return /*#__PURE__*/_jsx(TableRow, {
+        ...props
       });
     case "table-cell":
-      return /*#__PURE__*/_jsx("td", {
-        ...element.attr,
-        ...attributes,
-        children: children
+      return /*#__PURE__*/_jsx(TableCell, {
+        ...props
       });
     case "image":
       return /*#__PURE__*/_jsx(Image, {
         ...props
       });
+    case "image-text-wrapper":
+      return /*#__PURE__*/_jsx(ImageTextWrapper, {
+        ...props
+      });
+    case "image-text":
+      return /*#__PURE__*/_jsx(ImageText, {
+        ...props
+      });
     case "video":
       return /*#__PURE__*/_jsx(Video, {
         ...props
@@ -294,6 +311,38 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx(GridItem, {
         ...props
       });
+    case "accordion":
+      return /*#__PURE__*/_jsx(Accordion, {
+        ...props
+      });
+    case "accordion-summary":
+      return /*#__PURE__*/_jsx(AccordionSummary, {
+        ...props
+      });
+    case "accordion-details":
+      return /*#__PURE__*/_jsx(AccordionDetails, {
+        ...props
+      });
+    case "signature":
+      return /*#__PURE__*/_jsx(Signature, {
+        ...props
+      });
+    case "sign":
+      return /*#__PURE__*/_jsx(Signed, {
+        ...props
+      });
+    case "button":
+      return /*#__PURE__*/_jsx(EditorButton, {
+        ...props
+      });
+    case "carousel":
+      return /*#__PURE__*/_jsx(Carousel, {
+        ...props
+      });
+    case "carousel-item":
+      return /*#__PURE__*/_jsx(CarouselItem, {
+        ...props
+      });
     default:
       return /*#__PURE__*/_jsx("div", {
         ...element.attr,

package/dist/Editor/utils/accordion.js

@@ -0,0 +1,25 @@
+import { Transforms } from "slate";
+export const insertAccordion = editor => {
+  const accordion = {
+    type: "accordion",
+    children: [{
+      type: "accordion-summary",
+      children: [{
+        type: "paragraph",
+        children: [{
+          text: "Accordion Header"
+        }]
+      }]
+    }, {
+      type: "accordion-details",
+      children: [{
+        type: "paragraph",
+        children: [{
+          text: "Accordion Content"
+        }]
+      }]
+    }]
+  };
+  Transforms.insertNodes(editor, accordion);
+  Transforms.move(editor);
+};

package/dist/Editor/utils/button.js

@@ -0,0 +1,11 @@
+import { Transforms } from "slate";
+export const insertButton = editor => {
+  const button = {
+    type: "button",
+    children: [{
+      text: ""
+    }]
+  };
+  Transforms.insertNodes(editor, button);
+  Transforms.move(editor);
+};

package/dist/Editor/utils/carousel.js

@@ -0,0 +1,13 @@
+import { Transforms } from "slate";
+import { carouselItem } from "./carouselItem";
+export const insertCarousel = editor => {
+  const grid = {
+    type: "carousel",
+    grid: "container",
+    children: [{
+      ...carouselItem()
+    }]
+  };
+  Transforms.insertNodes(editor, grid);
+  Transforms.move(editor);
+};