@flozy/editor 2.1.4 → 2.1.6

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

@@ -1,22 +1,45 @@
+import React, { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const RoundedLightB2 = ({
-  href,
-  id
-}) => {
+const RoundedLightB2 = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    href,
+    id,
+    imagePos,
+    handleClick,
+    imageRef
+  } = props;
+  const {
+    calX,
+    calY,
+    scale
+  } = imagePos || {
+    calX: 0,
+    calY: 0,
+    scale: 100
+  };
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "62",
     height: "62",
     viewBox: "0 0 62 62",
     fill: "none",
+    style: {
+      userSelect: "none"
+    },
+    onClick: handleClick,
+    ref: ref,
     children: [/*#__PURE__*/_jsx("circle", {
       cx: "31",
       cy: "31",
       r: "28.5",
       stroke: "#E0E0E0",
       strokeWidth: "5",
-      fill: `url(#imageSource_${id})`
+      fill: `url(#imageSource_${id})`,
+      ref: imageRef,
+      style: {
+        cursor: "move"
+      }
     }), /*#__PURE__*/_jsx("defs", {
       children: /*#__PURE__*/_jsx("pattern", {
         id: `imageSource_${id}`,
@@ -24,13 +47,14 @@ const RoundedLightB2 = ({
         width: "124",
         height: "124",
         children: /*#__PURE__*/_jsx("image", {
-          x: "0",
-          y: "0",
-          height: "100%",
+          x: calX,
+          y: calY,
+          height: `${scale || 100}%`,
           href: href
         })
       })
     })]
   });
-};
+});
+RoundedLightB2.displayName = "RoundedLightB2";
 export default RoundedLightB2;

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

@@ -0,0 +1,40 @@
+import React, { useState } from "react";
+import Stack from "@mui/material/Stack";
+import Slider from "@mui/material/Slider";
+import { Typography } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const ContinuousSlider = props => {
+  const {
+    val,
+    onChange
+  } = props;
+  const [value, setValue] = useState(val || 100);
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+    onChange(newValue);
+  };
+  return /*#__PURE__*/_jsxs(Stack, {
+    spacing: 2,
+    direction: "row",
+    sx: {
+      mb: 0
+    },
+    alignItems: "center",
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "div",
+      children: "-"
+    }), /*#__PURE__*/_jsx(Slider, {
+      "aria-label": "Volume",
+      value: value,
+      onChange: handleChange,
+      min: 100,
+      step: 1,
+      max: 400
+    }), /*#__PURE__*/_jsx(Typography, {
+      variant: "div",
+      children: "+"
+    })]
+  });
+};
+export default ContinuousSlider;

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

@@ -10,6 +10,7 @@ import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
 import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
 import Icon from "../../common/Icon";
 import frames from "./Frames";
+import ImageFrame from "./Frames/ImageFrame";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Image = ({
@@ -32,7 +33,8 @@ const Image = ({
     objectFit,
     frame = null,
     webAddress,
-    isNewTab
+    isNewTab,
+    framePos
   } = element;
   const {
     readOnly
@@ -72,10 +74,10 @@ const Image = ({
   const arr = Array.from(Node.elements(editor));
   const ele = arr.find(([elem]) => element === elem);
   const {
-    hoverPath
+    hoverPath,
+    selectedPath
   } = useEditorContext();
-  const selected = hoverPath === path.join(",");
-  const ImageFrame = frame ? frames[frame] : null;
+  const selected = hoverPath === path.join(",") || selectedPath === path?.join(",");
   useEffect(() => {
     if (editor && ele && ele[1] !== undefined) {
       const dom = ReactEditor.toDOMNode(editor, element);
@@ -120,6 +122,9 @@ const Image = ({
       at: path
     });
   };
+  const onPosChange = data => {
+    onSave(data);
+  };
   const ToolBar = () => {
     return selected && !showTool ? /*#__PURE__*/_jsx("div", {
       className: "element-toolbar visible-on-hover",
@@ -223,12 +228,16 @@ const Image = ({
         position: "relative",
         ...getWidth()
       },
-      children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx(ImageContent, {}), url && ImageFrame ? /*#__PURE__*/_jsx(Box, {
+      children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx(ImageContent, {}), url && frames[frame] ? /*#__PURE__*/_jsx(Box, {
         component: "div",
         className: "image-frame",
+        "data-path": path.join(","),
         children: /*#__PURE__*/_jsx(ImageFrame, {
+          frame: frame,
+          framePos: framePos,
           href: url,
-          id: path.join(",")
+          id: path.join(","),
+          onChange: onPosChange
         })
       }) : null, selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,

package/dist/Editor/Elements/EmbedScript/Code.js

@@ -0,0 +1,41 @@
+import React, { useEffect, useRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const sanitize = input => {
+  const doc = new DOMParser().parseFromString(input, "text/html");
+  for (const elm of doc.querySelectorAll("*")) {
+    for (const attrib of elm.attributes) {
+      if (attrib.name.startsWith("on")) {
+        elm.removeAttribute(attrib.name);
+      }
+    }
+  }
+  return doc.body.innerHTML;
+};
+const Code = props => {
+  const codeRef = useRef();
+  const {
+    element,
+    attributes,
+    children
+  } = props;
+  const {
+    embedData
+  } = element;
+  useEffect(() => {
+    if (codeRef?.current) {
+      const slotHtml = document.createRange().createContextualFragment(embedData); // Create a 'tiny' document and parse the html string
+      codeRef.current.innerHTML = ""; // Clear the container
+      codeRef.current.appendChild(slotHtml);
+    }
+  }, []);
+  return /*#__PURE__*/_jsxs("div", {
+    contentEditable: false,
+    className: `embed-code`,
+    ...attributes,
+    children: [/*#__PURE__*/_jsx("div", {
+      ref: codeRef
+    }), children]
+  });
+};
+export default Code;

package/dist/Editor/Elements/EmbedScript/EmbedScript.js

@@ -0,0 +1,65 @@
+import React, { useState } from "react";
+import ToolbarIcon from "../../common/ToolbarIcon";
+import Icon from "../../common/Icon";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
+import { insertEmbedScript } from "../../utils/embedScript";
+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 EmbedScript = props => {
+  const {
+    editor,
+    icoBtnType
+  } = props;
+  const [open, setOpen] = useState(false);
+  const [code, setCode] = useState("");
+  const handleChange = e => {
+    setCode(e.target.value);
+  };
+  const handleClick = () => {
+    setOpen(true);
+  };
+  const onSubmit = () => {
+    insertEmbedScript(editor, code);
+  };
+  const onCancel = () => {
+    setOpen(false);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(ToolbarIcon, {
+      title: "Code",
+      onClick: handleClick,
+      icon: /*#__PURE__*/_jsx(Icon, {
+        icon: "embedScript"
+      }),
+      icoBtnType: icoBtnType
+    }), /*#__PURE__*/_jsxs(Dialog, {
+      open: open,
+      fullWidth: true,
+      children: [/*#__PURE__*/_jsx(DialogTitle, {
+        children: "Embed Code"
+      }), /*#__PURE__*/_jsx(DialogContent, {
+        children: /*#__PURE__*/_jsx("textarea", {
+          value: code,
+          onChange: handleChange,
+          style: {
+            minHeight: "200px",
+            width: "100%",
+            resize: "none",
+            padding: "4px",
+            boxSizing: "border-box"
+          }
+        })
+      }), /*#__PURE__*/_jsxs(DialogActions, {
+        children: [/*#__PURE__*/_jsx(Button, {
+          onClick: onSubmit,
+          children: "Save"
+        }), /*#__PURE__*/_jsx(Button, {
+          onClick: onCancel,
+          children: "Cancel"
+        })]
+      })]
+    })]
+  });
+};
+export default EmbedScript;

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

@@ -44,7 +44,8 @@ const FormTextArea = props => {
         },
         borderStyle: borderStyle || "solid",
         color: textColor || "#000",
-        background: bgColor || "transparent"
+        background: bgColor || "transparent",
+        fontSize: '14px'
       }
     })
   });

package/dist/Editor/Elements/List/CheckList.js

@@ -6,6 +6,7 @@ import Icon from "../../common/Icon";
 import CheckListStyle from "./CheckListStyles";
 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 CheckList = ({
   attributes,
   children,
@@ -26,44 +27,50 @@ const CheckList = ({
       at: path
     });
   };
-  return /*#__PURE__*/_jsxs("div", {
-    ...attributes,
-    style: {
-      textAlign: element.alignment || "left",
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center"
-    },
-    children: [/*#__PURE__*/_jsxs("div", {
-      contentEditable: false,
-      className: "checkbox-edit",
-      children: [/*#__PURE__*/_jsx(FormControlLabel, {
-        control: /*#__PURE__*/_jsx(Checkbox, {
-          icon: /*#__PURE__*/_jsx(Icon, {
-            icon: "checkListButton"
-          }),
-          checkedIcon: /*#__PURE__*/_jsx(Icon, {
-            icon: "checkListButtonActive"
-          }),
-          sx: classes.checkBoxHover,
-          checked: checked,
-          onChange: handleCheck
-        })
-      }), /*#__PURE__*/_jsx("span", {
-        className: "checkbox-inner"
-      })]
-    }), /*#__PURE__*/_jsx("div", {
-      contentEditable: !readOnly,
-      suppressContentEditableWarning: true,
+  const nestedCheckList = element?.children?.length && element.children[0].type === "check-list-item";
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs("div", {
+      ...attributes,
       style: {
-        flex: 1,
-        opacity: checked ? 1 : 1,
-        textDecoration: !checked ? "none" : "none"
+        textAlign: element.alignment || "left",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
       },
-      className: `checkbox-list content-editable ${isEmpty ? "empty" : ""}`,
-      placeholder: "Todo List",
-      children: children
-    })]
+      children: [/*#__PURE__*/_jsxs("div", {
+        contentEditable: false,
+        className: "checkbox-edit",
+        style: nestedCheckList ? {
+          visibility: "hidden"
+        } : {},
+        children: [/*#__PURE__*/_jsx(FormControlLabel, {
+          control: /*#__PURE__*/_jsx(Checkbox, {
+            icon: /*#__PURE__*/_jsx(Icon, {
+              icon: "checkListButton"
+            }),
+            checkedIcon: /*#__PURE__*/_jsx(Icon, {
+              icon: "checkListButtonActive"
+            }),
+            sx: classes.checkBoxHover,
+            checked: checked,
+            onChange: handleCheck
+          })
+        }), /*#__PURE__*/_jsx("span", {
+          className: "checkbox-inner"
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        contentEditable: !readOnly,
+        suppressContentEditableWarning: true,
+        style: {
+          flex: 1,
+          opacity: checked ? 1 : 1,
+          textDecoration: !checked ? "none" : "none"
+        },
+        className: `checkbox-list content-editable ${isEmpty ? "empty" : ""}`,
+        placeholder: nestedCheckList ? "" : "Todo List",
+        children: children
+      })]
+    })
   });
 };
 export default CheckList;

package/dist/Editor/Styles/EditorStyles.js

@@ -22,7 +22,9 @@ const editorStyles = ({
       position: "fixed",
       bottom: 0,
       left: 0,
-      width: "100%"
+      width: "100%",
+      zIndex: 99999,
+      background: "white"
     }
   },
   slateWrapper: {
@@ -225,7 +227,7 @@ const editorStyles = ({
       width: "100%",
       height: "100%",
       padding: "0px",
-      pointerEvents: "none",
+      // pointerEvents: "none",
       "& svg": {
         width: "100%",
         height: "100%",

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

@@ -50,10 +50,8 @@ const MiniToolbar = props => {
     }
   }, [editor.selection]);
   const handleClick = type => e => {
-    if (getSelectedText(editor)?.length === 0) {
-      setPopper(type);
-      setAnchorEl(e.currentTarget);
-    }
+    setPopper(type);
+    setAnchorEl(e.currentTarget);
   };
   const onClose = () => {
     setPopper(null);

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Grid, Box } from "@mui/material";
+import { Grid } from "@mui/material";
 import { toolbarGroups } from "../toolbarGroups";
 import { RenderToolbarIcon } from "../Toolbar";
 import { jsx as _jsx } from "react/jsx-runtime";

package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js

@@ -144,6 +144,7 @@ function SelectTypography({
           return selected === t.value;
         }
       }
+      return false;
     });
   }, [typographyOptions, activeMark, isBlockActive, editor]);
   const onChange = (format, option) => {

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

@@ -1,9 +1,9 @@
-import React from "react";
+import React, { useState } from "react";
 import { Grid, Typography, IconButton, Tooltip, TextField } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import OpenInFullIcon from "@mui/icons-material/OpenInFull";
 import CloseFullscreenIcon from "@mui/icons-material/CloseFullscreen";
-import { Search } from "@mui/icons-material";
+import Icon from "../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const SearchBox = props => {
@@ -15,9 +15,6 @@ const SearchBox = props => {
   return /*#__PURE__*/_jsx(TextField, {
     sx: classes.searchBox,
     size: "small",
-    InputProps: {
-      startAdornment: /*#__PURE__*/_jsx(Search, {})
-    },
     value: search,
     onChange: handleChange
   });
@@ -33,6 +30,10 @@ const PopperHeader = props => {
     search,
     onSearch
   } = props;
+  const [openSearch, setOpenSearch] = useState(false);
+  const handleSearchButton = () => {
+    setOpenSearch(!openSearch);
+  };
   return /*#__PURE__*/_jsx(Grid, {
     container: true,
     padding: 2,
@@ -61,16 +62,28 @@ const PopperHeader = props => {
       }), /*#__PURE__*/_jsxs(Grid, {
         sx: classes.textFormatLabel,
         justifyContent: "end",
-        children: [needFullscreen ? /*#__PURE__*/_jsx(SearchBox, {
-          classes: classes,
-          search: search,
-          handleChange: onSearch
+        children: [needFullscreen ? /*#__PURE__*/_jsxs(Grid, {
+          sx: {
+            position: 'relative'
+          },
+          children: [/*#__PURE__*/_jsx(IconButton, {
+            className: openSearch ? 'searchContainer' : '',
+            onClick: handleSearchButton,
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: openSearch ? 'closeIcon' : 'SearchIcon'
+            })
+          }), openSearch && /*#__PURE__*/_jsx(SearchBox, {
+            classes: classes,
+            search: search,
+            handleChange: onSearch
+          })]
         }) : null, needFullscreen ? /*#__PURE__*/_jsx(Tooltip, {
           title: "Toggle Fullscreen",
           arrow: true,
           children: /*#__PURE__*/_jsx(IconButton, {
             style: {
-              marginRight: "8px"
+              marginRight: "8px",
+              marginLeft: "8px"
             },
             className: "close-popupbtn",
             onClick: toggleFullscreen,

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

@@ -133,7 +133,15 @@ const usePopupStyle = theme => ({
     fontSize: "16px",
     lineHeight: "25px",
     marginTop: "12px",
-    marginBottom: "8px"
+    marginBottom: "8px",
+    '& .searchContainer': {
+      position: "absolute",
+      right: 0,
+      zIndex: 3
+    },
+    '& .MuiFormControl-root.MuiTextField-root input': {
+      padding: '8px 35px 6px 12px'
+    }
   },
   textFormatField: {
     marginBottom: "16px"
@@ -331,7 +339,6 @@ const usePopupStyle = theme => ({
     }
   },
   searchBox: {
-    marginRight: "12px",
     "& input": {
       padding: "6px 12px"
     },
@@ -447,13 +454,13 @@ const usePopupStyle = theme => ({
     padding: "4px 8px",
     overflowX: "auto",
     "& .customSelectTool": {
-      padding: "8px",
-      color: theme.palette.secondary.main,
+      padding: "0px 8px",
+      color: theme?.palette?.secondary?.main,
       gap: "4px"
     },
     "& .verticalLine": {
       borderLeft: "1px solid #E0E0E0",
-      minHeight: "35px",
+      minHeight: "20px",
       height: "100%"
     },
     "& .toolWrapper": {
@@ -471,7 +478,7 @@ const usePopupStyle = theme => ({
       textTransform: "none"
     },
     "& .fontColorBtn": {
-      color: theme.palette.secondary.main,
+      color: theme?.palette?.secondary?.main,
       borderRadius: "unset",
       fontSize: "17px",
       padding: "0px",
@@ -498,6 +505,7 @@ const usePopupStyle = theme => ({
       width: "100%",
       justifyContent: "start",
       paddingRight: "20px",
+      fontSize: "14px",
       "& :hover": {
         background: "#F0F5FA !important"
       },
@@ -514,6 +522,13 @@ const usePopupStyle = theme => ({
       minWidth: "0px !important",
       textTransform: "none"
     }
+  },
+  mobileMiniTextWrapper: {
+    boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
+    position: "fixed",
+    bottom: "env(safe-area-inset-bottom)",
+    left: 0,
+    width: "100%"
   }
 });
 export default usePopupStyle;

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

@@ -13,6 +13,7 @@ import LinkButton from "../../Elements/Link/LinkButton";
 import { getPageSettings, updatePageSettings } from "../../utils/pageSettings";
 import { AllColors } from "../../Elements/Color Picker/ColorButtons";
 import { fontFamilyMap } from "../../utils/font";
+import { getBorderColor } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const allTools = toolbarGroups.flat();
@@ -376,10 +377,11 @@ const TextFormat = props => {
           onClick: handleQuote({
             color: !bqColor ? "rgb(47, 94, 188)" : null
           }),
-          children: /*#__PURE__*/_jsx("span", {
+          children: /*#__PURE__*/_jsx("blockquote", {
             style: {
-              borderLeft: `3px solid ${bqColor || "rgb(47, 94, 188)"}`,
-              paddingLeft: "12px"
+              paddingLeft: "12px",
+              ...getBorderColor(bqColor || "transparent", 3),
+              borderWidth: bqColor ? "0px 0px 0px 3px" : "0px"
             },
             children: "Quote"
           })

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

@@ -2,15 +2,12 @@ import React, { useEffect, useState } from "react";
 import { Popper, Fade, Paper } from "@mui/material";
 import { Editor, Range } from "slate";
 import { useSlate, useFocused } from "slate-react";
-import TextFormat from "./TextFormat";
 import usePopupStyle from "./PopupToolStyle";
 import useDrag from "../../hooks/useDrag";
-import PopperHeader from "./PopperHeader";
 import { TableUtil } from "../../utils/table";
 import useWindowResize from "../../hooks/useWindowResize";
-// import MiniTextFormat from "./MiniTextFormat";
+import MiniTextFormat from "./MiniTextFormat";
 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 PopupTool = props => {
   const {
@@ -70,7 +67,14 @@ const PopupTool = props => {
     setOpen(false);
   };
   return open ? /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx(Popper, {
+    children: size.device === "xs" ? /*#__PURE__*/_jsx("div", {
+      className: "mobileMiniTextWrapper",
+      children: /*#__PURE__*/_jsx(MiniTextFormat, {
+        editor: editor,
+        classes: classes,
+        closeMainPopup: handleClose
+      })
+    }) : /*#__PURE__*/_jsx(Popper, {
       id: id,
       open: open,
       anchorEl: anchorEl,
@@ -83,19 +87,15 @@ const PopupTool = props => {
       }) => /*#__PURE__*/_jsx(Fade, {
         ...TransitionProps,
         timeout: 350,
-        children: /*#__PURE__*/_jsxs(Paper, {
+        children: /*#__PURE__*/_jsx(Paper, {
           style: {
             borderRadius: "10px"
           },
-          className: size.device === "xs" ? "mobileMiniTextWrapper" : "",
-          children: [/*#__PURE__*/_jsx(PopperHeader, {
-            title: "Text Settings",
-            classes: classes,
-            onClose: handleClose
-          }), /*#__PURE__*/_jsx(TextFormat, {
+          children: /*#__PURE__*/_jsx(MiniTextFormat, {
             editor: editor,
-            classes: classes
-          })]
+            classes: classes,
+            closeMainPopup: handleClose
+          })
         })
       })
     })

package/dist/Editor/Toolbar/Toolbar.js

@@ -30,6 +30,7 @@ import TopBannerButton from "../Elements/TopBanner/TopBannerButton.js";
 import AttachmentsButton from "../Elements/Attachments/AttachmentsButton";
 import ColorboxButton from "../Elements/Colorbox/ColorboxButton.js";
 import DividerButton from "../Elements/Divider/DividerButton.js";
+import EmbedScript from "../Elements/EmbedScript/EmbedScript.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export const RenderToolbarIcon = props => {
@@ -94,6 +95,14 @@ export const RenderToolbarIcon = props => {
           icoBtnType: icoBtnType,
           lbT: element.lbT
         }, element.id);
+      case "embedScript":
+        return /*#__PURE__*/_jsx(EmbedScript, {
+          format: element.format,
+          editor: editor,
+          customProps: customProps,
+          icoBtnType: icoBtnType,
+          lbT: element.lbT
+        }, element.id);
       case "color-picker":
         return /*#__PURE__*/_jsx(ColorPicker, {
           activeMark: activeMark,