@flozy/editor 1.9.5 → 1.9.7

package/dist/Editor/CommonEditor.js

@@ -75,7 +75,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     readOnly,
     toolbarOptions,
     otherProps,
-    isIframe
+    isIframe,
+    theme
   } = props;
   const editorWrapper = useRef();
   const mentionsRef = useRef();
@@ -130,7 +131,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   };
   const classes = editorStyles({
     padHeight: !fullScreen ? otherProps?.padHeight : 120,
-    placeHolderColor: invertColor(pageColor || "#FFF")
+    placeHolderColor: invertColor(pageColor || "#FFF"),
+    theme
   });
   const isListItem = useElement(editor, ["list-item", "check-list-item", "accordion-summary"]);
   useEffect(() => {
@@ -228,7 +230,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       });
     },
     getPageSettings: {
-      background: pageBgImage && pageBgImage !== "none" ? `url(${pageBgImage})` : pageColor || "#fff"
+      background: pageBgImage && pageBgImage !== "none" ? `url(${pageBgImage})` : pageColor || ""
     }
   }));
   const [htmlAction, setHtmlAction] = useState({
@@ -339,6 +341,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     }) : null;
   };
   return /*#__PURE__*/_jsx(EditorProvider, {
+    theme: theme,
     children: /*#__PURE__*/_jsx(DialogWrapper, {
       ...props,
       fullScreen: fullScreen,
@@ -357,21 +360,18 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
           children: [/*#__PURE__*/_jsx(DragAndDrop, {
             children: /*#__PURE__*/_jsx(Overlay, {
               children: /*#__PURE__*/_jsx(Box, {
-                className: `${hasTopBanner() ? "has-topbanner" : ""}`,
+                className: `${hasTopBanner() ? "has-topbanner" : ""} ${!pageColor ? "no-color" : ""}`,
                 sx: classes.slateWrapper,
                 id: "slate-wrapper-scroll-container",
                 style: {
-                  background: pageColor || "#FFF"
+                  background: pageColor || "",
+                  color: pageTextColor || ""
                 },
                 children: /*#__PURE__*/_jsxs(Box, {
                   component: "div",
                   className: "max-content",
                   children: [renderTopBanner(), /*#__PURE__*/_jsx("div", {
                     className: "scroll-area",
-                    style: {
-                      // background: pageColor || "#FFF",
-                      color: pageTextColor || "#000000"
-                    },
                     children: /*#__PURE__*/_jsxs(Box, {
                       component: "div",
                       ref: editorWrapper,
@@ -390,7 +390,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                         maxWidth: pageMaxWidth ? `${parseInt(pageMaxWidth)}px !important` : "auto"
                       },
                       children: [!readOnly ? /*#__PURE__*/_jsx(PopupTool, {
-                        onDrawerOpen: onDrawerOpen
+                        onDrawerOpen: onDrawerOpen,
+                        theme: theme
                       }) : null, /*#__PURE__*/_jsx(Editable, {
                         className: "innert-editor-textbox",
                         readOnly: isReadOnly,
@@ -406,12 +407,14 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                         target: target,
                         index: index,
                         chars: chars,
-                        type: type
+                        type: type,
+                        theme: theme
                       }) : null]
                     })
                   }), !readOnly ? /*#__PURE__*/_jsx(MiniToolbar, {
                     customProps: customProps,
-                    toolbarOptions: toolbarOptions
+                    toolbarOptions: toolbarOptions,
+                    theme: theme
                   }) : null, footer && /*#__PURE__*/_jsx(Typography, {
                     sx: {
                       color: "rgb(100, 116, 139)",

package/dist/Editor/Editor.css

@@ -1,6 +1,5 @@
 .editor-wrapper {
   font-family: "Inter", sans-serif;
-  color: #0f172a;
   line-height: 1.43;
   font-weight: 400;
   letter-spacing: 0.01071em;
@@ -248,7 +247,6 @@ blockquote {
 }
 
 .close-popupbtn {
-  background-color: #f8fafc !important;
   border-radius: 4px !important;
   width: 24px;
   height: 24px;
@@ -479,7 +477,7 @@ blockquote {
 }
 
 @media (max-width: 480px) {
-  body {
+  body.editorbody {
     padding: 0px !important;
   }
 
@@ -779,10 +777,6 @@ blockquote {
   font-weight: 500;
 }
 
-.dialogComp .MuiOutlinedInput-notchedOutline {
-  border: 1px solid #ececec;
-}
-
 .iconRadioButton .MuiRadio-root {
   visibility: hidden;
   width: 0px;

package/dist/Editor/Elements/Color Picker/ColorButtons.js

@@ -72,6 +72,7 @@ export const AllColors = props => {
       horizontal: "center"
     },
     onClose: onClose,
+    sx: classes.colorPopper,
     children: /*#__PURE__*/_jsx(Box, {
       component: "div",
       sx: classes.allColor,
@@ -145,6 +146,8 @@ const ColorButtons = props => {
         vertical: "top",
         horizontal: "right"
       },
+      sx: classes.colorPopper,
+      className: "colorPopper",
       children: /*#__PURE__*/_jsx(Box, {
         sx: classes.colorButtonsInner,
         children: restRows.map((m, i) => {

package/dist/Editor/Elements/Color Picker/ColorPicker.js

@@ -8,6 +8,7 @@ import ColorButtons from "./ColorButtons";
 import ColorPickerStyles from "./Styles";
 import colorWheel from "./colorWheel.png";
 import "./ColorPicker.css";
+import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -23,10 +24,13 @@ const ColorPicker = ({
   title,
   classes
 }) => {
+  const {
+    theme
+  } = useEditorContext();
   const [selection, setSelection] = useState();
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
-  const pickerStyles = ColorPickerStyles();
+  const pickerStyles = ColorPickerStyles(theme);
   const onOpen = e => {
     e.preventDefault();
     setAnchorEl(e.currentTarget);
@@ -82,6 +86,7 @@ const ColorPicker = ({
         vertical: "bottom",
         horizontal: "top"
       },
+      sx: classes.colorPickerPopup,
       children: /*#__PURE__*/_jsx(ColorPickerTool, {
         gradient: true,
         value: activeColor,

package/dist/Editor/Elements/Color Picker/Styles.js

@@ -1,4 +1,4 @@
-const ColorPickerStyles = () => ({
+const ColorPickerStyles = theme => ({
   colorButtons: {
     padding: "0px",
     "& .buttonsWrpr": {
@@ -12,6 +12,11 @@ const ColorPickerStyles = () => ({
       border: "1px solid #ccc"
     }
   },
+  colorPopper: {
+    "& .MuiPaper-root": {
+      backgroundColor: theme?.palette?.editor?.background
+    }
+  },
   colorButtonSingle: {
     "&.active": {
       "&:before": {
@@ -49,9 +54,9 @@ const ColorPickerStyles = () => ({
     }
   },
   colorPickerIcon: {
-    '& img': {
-      width: '24px',
-      height: '24px'
+    "& img": {
+      width: "24px",
+      height: "24px"
     }
   }
 });

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

@@ -7,7 +7,7 @@ import EmbedPopup from "./EmbedPopup";
 import { IconButton, Tooltip, Box } from "@mui/material";
 import { GridSettingsIcon } from "../../common/iconslist";
 import { useEditorContext } from "../../hooks/useMouseMove";
-import { getTRBLBreakPoints } from "../../helper/theme";
+import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
 import Icon from "../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -146,7 +146,19 @@ const Image = ({
       draggable: false
     });
   };
-  const width = resizing ? `${size.width}px` : `${size.widthInPercent}%`;
+  const getWidth = () => {
+    if (resizing) {
+      return {
+        width: `${size.width}px`
+      };
+    } else {
+      return {
+        width: url ? {
+          ...getBreakPointsValue(element?.size, null, "overrideReSize", true)
+        } : "100%"
+      };
+    }
+  };
   return /*#__PURE__*/_jsxs(Box, {
     ...attributes,
     component: "div",
@@ -173,13 +185,13 @@ const Image = ({
       customProps: customProps,
       format: "image",
       onDelete: onDelete
-    }) : null, /*#__PURE__*/_jsxs("div", {
+    }) : null, /*#__PURE__*/_jsxs(Box, {
+      component: "div",
       contentEditable: false,
       className: "embed-image-wrpr",
-      style: {
+      sx: {
         position: "relative",
-        width: `${width}`
-        // height: `${size.height}px`,
+        ...getWidth()
       },
       children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx(ImageContent, {}), selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,

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

@@ -10,6 +10,7 @@ import EmbedPopup from "./EmbedPopup";
 import { GridSettingsIcon } from "../../common/iconslist";
 import { gradientBorder } from "../../utils/helper";
 import { getEmbedURL } from "../../helper";
+import { getBreakPointsValue } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Video = ({
@@ -108,7 +109,23 @@ const Video = ({
       at: path
     });
   };
-  const width = resizing ? `${size.width}px` : `${size.widthInPercent || 100}%`;
+  const getWidth = () => {
+    if (resizing) {
+      return {
+        width: `${size.width}px`,
+        height: url ? `${size.height}px` : "auto"
+      };
+    } else {
+      return {
+        width: {
+          ...getBreakPointsValue(element?.size, null, "overrideReSize", true)
+        },
+        height: url ? {
+          ...getBreakPointsValue(element?.size, null, "overrideReSizeH", true)
+        } : "auto"
+      };
+    }
+  };
   const embedURL = getEmbedURL(element);
   const VideoContent = () => {
     return resizing ? /*#__PURE__*/_jsx("div", {
@@ -130,6 +147,7 @@ const Video = ({
         position: "absolute",
         width: "100%",
         height: "100%",
+        maxWidth: "100%",
         left: "0px",
         ...(gradientBorder(borderColor) || {}),
         borderWidth: borderWidth || "1px",
@@ -155,7 +173,7 @@ const Video = ({
     className: "embed has-hover video",
     style: {
       display: "flex",
-      flexDirection: "column",
+      flexDirection: "row",
       width: `100%`,
       justifyContent: horizantal,
       alignContent: vertical
@@ -168,12 +186,13 @@ const Video = ({
       customProps: customProps,
       format: "video",
       onDelete: onDelete
-    }) : null, /*#__PURE__*/_jsxs("div", {
+    }) : null, /*#__PURE__*/_jsxs(Box, {
+      component: "div",
       contentEditable: false,
-      style: {
+      sx: {
         position: "relative",
-        width: `${width}`,
-        height: url ? `${size.height}px` : "auto"
+        ...getWidth(),
+        maxWidth: "100%"
       },
       children: [!readOnly && url && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx(VideoPlaceholder, {}), !readOnly && url ? /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,

package/dist/Editor/Elements/Form/Form.js

@@ -40,6 +40,7 @@ const Form = props => {
     fontFamily,
     textAlign
   } = element;
+  const isEmail = element?.children[0].element === "email";
   const {
     topLeft,
     topRight,

package/dist/Editor/Elements/Form/FormElements/index.js

@@ -2,6 +2,7 @@ import FormText from "./FormText";
 import FormTextArea from "./FormTextArea";
 const FormElements = {
   text: FormText,
-  textArea: FormTextArea
+  textArea: FormTextArea,
+  email: FormText
 };
 export default FormElements;

package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import { Grid, Radio, RadioGroup, Typography, FormControlLabel, Select, MenuItem, FormControl, TextField, Button, Menu } from "@mui/material";
-import FormStyles from "./Styles";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import UserInputs from "./UserInputs";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -21,9 +20,9 @@ const FormWorkflow = props => {
     bodyData,
     setBodyData,
     handleSelectedVariables,
-    handleInputReset
+    handleInputReset,
+    classes
   } = props;
-  const classes = FormStyles();
   const [anchorEl, setAnchorEl] = useState(null);
   const variables = element?.children;
   const type = 1;

package/dist/Editor/Elements/Form/Workflow/Styles.js

@@ -1,4 +1,4 @@
-const FormStyles = () => ({
+const FormStyles = theme => ({
   addButton: {
     display: "flex",
     justifyContent: "flex-end"
@@ -224,6 +224,24 @@ const FormStyles = () => ({
     color: "#fff",
     padding: "8px",
     marginLeft: "8px"
+  },
+  formWorkflow: {
+    "& .MuiPaper-root": {
+      backgroundColor: theme?.palette?.editor?.background
+    },
+    "& .MuiTypography-root": {
+      color: theme?.palette?.editor?.textColor
+    },
+    "& svg": {
+      color: theme?.palette?.editor?.activeColor
+    },
+    "& input": {
+      color: theme?.palette?.editor?.textColor
+    },
+    "& textarea": {
+      backgroundColor: theme?.palette?.editor?.background,
+      color: theme?.palette?.editor?.textColor
+    }
   }
 });
 export default FormStyles;

package/dist/Editor/Elements/Form/Workflow/UserInputs.js

@@ -6,6 +6,7 @@ import { RestRight } from "../../../common/iconslist";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import { AllColors } from "../../Color Picker/ColorButtons";
 import PopupToolStyle from "../../../Toolbar/PopupTool/PopupToolStyle";
+import { useEditorContext } from "../../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const UserInputs = props => {
@@ -18,8 +19,11 @@ const UserInputs = props => {
     handleInputReset
   } = props;
   const variables = element?.children;
-  const classes = FormStyles();
-  const popupClasses = PopupToolStyle();
+  const {
+    theme
+  } = useEditorContext();
+  const classes = FormStyles(theme);
+  const popupClasses = PopupToolStyle(theme);
   const [activeColor, setActiveColor] = useState(["#000000"]);
   //state
   const [anchorEl, setAnchorEl] = useState(null);

package/dist/Editor/Elements/Form/Workflow/index.js

@@ -8,6 +8,7 @@ import FormWorkflow from "./FormWorkflow";
 import { minutes, hours, days } from "./constant";
 import ListWorkflow from "./ListWorkflow";
 import { PlusIcon } from "../../../common/iconslist";
+import { useEditorContext } from "../../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Workflow = props => {
@@ -20,7 +21,10 @@ const Workflow = props => {
   const {
     workflow
   } = element;
-  const classes = FormStyles();
+  const {
+    theme
+  } = useEditorContext();
+  const classes = FormStyles(theme);
   const [workflowList, setWorkflowList] = useState([]);
   const [formData, setFormData] = useState(false);
   const [schedule, setSchedule] = useState("immediately");
@@ -111,6 +115,7 @@ const Workflow = props => {
     }
   };
   return /*#__PURE__*/_jsxs(Dialog, {
+    sx: classes?.formWorkflow,
     open: openWorkflow,
     onClose: closeWorkflow,
     fullWidth: true,
@@ -155,7 +160,8 @@ const Workflow = props => {
         setScheduleEvery: setScheduleEvery,
         setScheduleOn: setScheduleOn,
         handleSelectedVariables: handleSelectedVariables,
-        handleInputReset: handleInputReset
+        handleInputReset: handleInputReset,
+        classes: classes
       })]
     }), /*#__PURE__*/_jsxs(DialogActions, {
       sx: classes.dialogFooter,

package/dist/Editor/Elements/SimpleText.js

@@ -4,6 +4,7 @@ import { Box } from "@mui/material";
 import { getPageSettings } from "../utils/pageSettings";
 import { invertColor } from "../helper";
 import { isTextSelected } from "../utils/helper";
+import { useEditorContext } from "../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const SimpleTextStyle = ({
@@ -45,6 +46,9 @@ const SimpleTextStyle = ({
   }
 });
 const SimpleText = props => {
+  const {
+    theme
+  } = useEditorContext();
   const editor = useSlateStatic();
   const {
     element,
@@ -64,7 +68,7 @@ const SimpleText = props => {
     pageColor
   } = pageSt?.pageProps || {};
   const classes = SimpleTextStyle({
-    pageColor: pageColor || "rgba(255,255,255,1)"
+    pageColor: pageColor || theme?.palette?.editor?.background
   });
   const selected = useSelected();
   const path = ReactEditor.findPath(editor, element);

package/dist/Editor/Styles/EditorStyles.js

@@ -1,6 +1,7 @@
 const editorStyles = ({
   padHeight,
-  placeHolderColor
+  placeHolderColor,
+  theme
 }) => ({
   root: {
     display: "flex",
@@ -26,6 +27,11 @@ const editorStyles = ({
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
+    color: "#0f172a",
+    "&.no-color": {
+      backgroundColor: theme?.palette?.editor?.background,
+      color: theme?.palette?.editor?.textColor
+    },
     "& .max-content": {
       width: "100%",
       display: "flex",
@@ -171,7 +177,10 @@ const editorStyles = ({
       }
     },
     "& .tools-drawer": {
-      zIndex: 1300
+      zIndex: 1300,
+      "& .MuiDrawer-paper": {
+        backgroundColor: theme?.palette?.editor?.background
+      }
     },
     "& .section-tw": {
       "& button": {

package/dist/Editor/Toolbar/FormatTools/Dropdown.js

@@ -4,6 +4,7 @@ import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
 import { fontFamilyMap } from "../../utils/font";
 import { jsx as _jsx } from "react/jsx-runtime";
 const Dropdown = ({
+  classes,
   editor,
   format,
   options,
@@ -26,10 +27,14 @@ const Dropdown = ({
       fontFamily: fontFamilyMap[value],
       width: width || "100%",
       height: "36px",
-      overflow: "hidden",
       borderRadius: "10px",
       fontSize: "14px"
     },
+    MenuProps: {
+      PaperProps: {
+        sx: classes?.textOptions
+      }
+    },
     children: options.map((item, index) => /*#__PURE__*/_jsx(MenuItem, {
       style: {
         fontFamily: item.text

package/dist/Editor/Toolbar/FormatTools/TextSize.js

@@ -10,6 +10,7 @@ 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 TextSize = ({
+  classes,
   editor,
   format,
   fullWidth
@@ -63,6 +64,7 @@ const TextSize = ({
   };
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(TextField, {
+      sx: classes?.textSize,
       value: combinedOldVal,
       onChange: onChangeSize,
       size: "small",

package/dist/Editor/Toolbar/Mini/MiniToolbar.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useSlate } from "slate-react";
-import { Box, Dialog, IconButton, Paper, Popper, Tooltip } from "@mui/material";
+import { Box, Dialog, IconButton, Paper, Popper, Tooltip, useTheme } from "@mui/material";
 import MENU_OPTIONS from "./Options/Options";
 import TextFormat from "../PopupTool/TextFormat";
 import AddElements from "../PopupTool/AddElements";
@@ -27,10 +27,11 @@ const POPUP_TITLE = {
 };
 const MiniToolbar = props => {
   const {
-    customProps
+    customProps,
+    theme
   } = props;
-  const classes = miniToolbarStyles();
-  const popupStyles = usePopupStyle();
+  const classes = miniToolbarStyles(theme);
+  const popupStyles = usePopupStyle(theme);
   const editor = useSlate();
   const [popper, setPopper] = useState(null);
   const [anchorEl, setAnchorEl] = useState(null);

package/dist/Editor/Toolbar/Mini/Styles.js

@@ -1,4 +1,4 @@
-const miniToolbarStyles = () => ({
+const miniToolbarStyles = theme => ({
   root: {
     display: "flex",
     flexDirection: "row",
@@ -26,6 +26,20 @@ const miniToolbarStyles = () => ({
           stroke: "#2563EB"
         }
       }
+    },
+    "&.mini-tool-wrpr-ei": {
+      background: theme?.palette?.editor?.background,
+      borderColor: theme?.palette?.editor?.borderColor,
+      "& button": {
+        "& svg": {
+          stroke: theme?.palette?.editor?.textColor
+        },
+        "&.active": {
+          "& svg": {
+            stroke: theme?.palette?.editor?.activeColor
+          }
+        }
+      }
     }
   }
 });

package/dist/Editor/Toolbar/PopupTool/AddTemplates.js

@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from "react";
 import { Grid, Tabs, Tab, CircularProgress } from "@mui/material";
 import TemplateCard from "./TemplateCard";
+import FullViewCard from "./FullViewCard";
+import ButtonTemplateCard from "./ButtonTemplatesCard";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Categories = props => {
@@ -100,6 +102,43 @@ const AddTemplates = props => {
       return f.title.toLowerCase().includes(search);
     }
   };
+  const renderTemplate = mapData => {
+    switch (mapData?.category) {
+      case "Starter":
+      case "Proposal":
+      case "Page":
+      case "Contract":
+      case "404 Page":
+        return /*#__PURE__*/_jsx(TemplateCard, {
+          classes: classes,
+          onSelectTemplate: onSelectTemplate,
+          m: mapData,
+          fullScreen: fullScreen
+        }, `template_Card_${mapData.id}_popup`);
+      case "Buttons":
+        return /*#__PURE__*/_jsx(ButtonTemplateCard, {
+          classes: classes,
+          onSelectTemplate: onSelectTemplate,
+          m: mapData,
+          fullScreen: fullScreen
+        }, `template_Card_${mapData.id}_popup`);
+      case "Banners":
+      case "Tables":
+        return /*#__PURE__*/_jsx(FullViewCard, {
+          classes: classes,
+          onSelectTemplate: onSelectTemplate,
+          m: mapData,
+          fullScreen: fullScreen
+        }, `template_Card_${mapData.id}_popup`);
+      default:
+        /*#__PURE__*/_jsx(TemplateCard, {
+          classes: classes,
+          onSelectTemplate: onSelectTemplate,
+          m: mapData,
+          fullScreen: fullScreen
+        }, `template_Card_${mapData.id}_popup`);
+    }
+  };
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
     className: `templates ${fullScreen ? "fullscreen" : ""}`,
@@ -121,12 +160,7 @@ const AddTemplates = props => {
       children: [/*#__PURE__*/_jsx(ProgressBar, {
         loading: loading
       }), filteredTemplates.filter(filterByTitle).map(m => {
-        return /*#__PURE__*/_jsx(TemplateCard, {
-          classes: classes,
-          onSelectTemplate: onSelectTemplate,
-          m: m,
-          fullScreen: fullScreen
-        }, `template_Card_${m.id}_popup`);
+        return renderTemplate(m);
       })]
     })]
   });