@flozy/editor 5.5.8 → 5.6.0

package/dist/Editor/Elements/AI/PopoverAIInput.js

@@ -4,9 +4,9 @@ import Styles from "./Styles";
 import { Fade, Paper, Popper } from "@mui/material";
 import AIInput from "./AIInput";
 import { ReactEditor, useSlate } from "slate-react";
-import { Node, Transforms } from "slate";
+import { Node, Range, Transforms } from "slate";
 import { MODES } from "./helper";
-import { getSelectedText } from "../../utils/helper";
+import { getSelectedText, getSlateDom } from "../../utils/helper";
 import { VoiceToText } from "./VoiceToText";
 import deserialize from "../../helper/deserialize";
 import useEditorScroll from "../../hooks/useEditorScroll";
@@ -23,7 +23,7 @@ const scrollToAIInput = editor => {
       const slateWrapper = document.getElementById("slate-wrapper-scroll-container");
       let selectionRect;
       if (getSelectedText(editor)) {
-        selectionRect = window.getSelection().getRangeAt(0).getBoundingClientRect();
+        selectionRect = ReactEditor.toDOMRange(editor, editor.selection)?.getBoundingClientRect();
       } else {
         selectionRect = ReactEditor.toDOMRange(editor, getNextLine(editor).at).getBoundingClientRect();
       }
@@ -62,7 +62,7 @@ const getNextLine = editor => {
     } = editor;
     const {
       focus
-    } = selection;
+    } = selection || {};
     if (focus?.path?.length > 0) {
       const {
         text = ""
@@ -102,56 +102,47 @@ const getNextLine = editor => {
     return null;
   }
 };
+const getNextLineDom = editor => {
+  let caret;
+  const sel = getNextLine(editor);
+  if (sel) {
+    const domElement = ReactEditor.toDOMRange(editor, sel.at);
+    const {
+      textContent,
+      parentElement
+    } = domElement?.commonAncestorContainer || {};
+    caret = textContent ? domElement : parentElement; // in mobile, if textContent in not available, it is pointing some <br> tag (getBoundingClientRect not working correctly for <br>), to avoid that, we are pointing the parent element as caret
+  }
+
+  return caret;
+};
 const updateAnchorEl = (setAnchorEl, editor, openAI, selectedElement) => {
   try {
-    if (!editor.selection) {
-      return;
-    }
-    const selection = window.getSelection();
-    if (openAI === "fromToolBar" && selection.anchorOffset !== selection.focusOffset) {
-      // to fix some issue in Drag n Drop
-      return;
-    }
-    if (selection.rangeCount) {
-      let caret;
-      if (getSelectedText(editor)) {
-        // selected text as caret
-        caret = selection.getRangeAt(0);
-      } else {
-        const sel = getNextLine(editor);
-        if (sel) {
-          const domElement = ReactEditor.toDOMRange(editor, sel.at);
-          const {
-            textContent,
-            parentElement
-          } = domElement?.commonAncestorContainer || {};
-          caret = textContent ? domElement : parentElement; // in mobile, if textContent in not available, it is pointing some <br> tag (getBoundingClientRect not working correctly for <br>), to avoid that, we are pointing the parent element as caret
-        }
-      }
-
-      const getBoundingClientRect = () => {
-        const editorContainer = document.querySelector("#slate-wrapper-scroll-container")?.getBoundingClientRect();
-        const caretPos = caret.getBoundingClientRect();
-        const sectionEle = selectedElement?.anchorEl || document.querySelector(".ed-section-inner");
-        const selectedSectionRect = sectionEle?.getBoundingClientRect();
-        const isAIInputReachTop = caretPos.height + caretPos.y <= editorContainer.y;
-        const yValue = isAIInputReachTop ? "-500" : caretPos.y; // -500 is to hide the AI input if the toolbar reached the top
+    const {
+      selection
+    } = editor || {};
+    const isHavingSelection = selection && !Range.isCollapsed(selection) && getSelectedText(editor).trim();
+    const caret = isHavingSelection ? getSlateDom(editor, editor.selection) : getNextLineDom(editor);
+    const caretPos = caret?.getBoundingClientRect() || {};
+    const editorContainer = document.querySelector("#slate-wrapper-scroll-container")?.getBoundingClientRect();
+    const sectionEle = selectedElement?.anchorEl || document.querySelector(".ed-section-inner");
+    const selectedSectionRect = sectionEle?.getBoundingClientRect() || {};
+    const isAIInputReachTop = caretPos.height + caretPos.y <= editorContainer.y;
+    const yValue = isAIInputReachTop ? "-500" : caretPos.y; // -500 is to hide the AI input if the toolbar reached the top
 
-        return {
-          y: yValue,
-          height: caretPos.height,
-          top: yValue,
-          right: caretPos.right,
-          bottom: caretPos.bottom,
-          x: selectedSectionRect.x,
-          left: selectedSectionRect.left,
-          width: selectedSectionRect.width
-        };
-      };
-      setAnchorEl({
-        getBoundingClientRect
-      });
-    }
+    const rect = {
+      y: yValue,
+      height: caretPos.height,
+      top: yValue,
+      right: caretPos.right,
+      bottom: caretPos.bottom,
+      x: selectedSectionRect.x,
+      left: selectedSectionRect.left,
+      width: selectedSectionRect.width
+    };
+    setAnchorEl({
+      getBoundingClientRect: () => rect
+    });
   } catch (err) {
     console.log(err);
   }
@@ -180,7 +171,7 @@ function PopoverAIInput({
   const editor = useSlate();
   const updateAnchor = useCallback(() => {
     updateAnchorEl(setAnchorEl, editor, openAI, selectedEleRef.current);
-  }, [setAnchorEl, editor, openAI, selectedEleRef.current]);
+  }, [editor?.selection, openAI, selectedEleRef.current]);
   useEditorScroll(editorWrapper, updateAnchor);
   const onClickOutside = () => {
     setAnchorEl(null);
@@ -293,9 +284,24 @@ function PopoverAIInput({
   const onInputChange = e => {
     setInputValue(e.target.value);
   };
+  useEffect(() => {
+    if (openAI && getSelectedText(editor).trim()) {
+      const customSelection = document.querySelectorAll(".slate-highlight");
+      const selectionBg = "rgba(35, 131, 226, 0.35)";
+      if (customSelection?.length) {
+        customSelection?.forEach(el => el.style.background = selectionBg);
+
+        // if ai is opened, remove the window selection class and open then slate selection, To resolve: focussing on the ai input removes window selection automatically
+        const selection = window.getSelection();
+        if (selection) {
+          selection.removeAllRanges(); // Clears the selection
+        }
+      }
+    }
+  }, [editor.selection, openAI]);
   return /*#__PURE__*/_jsxs("div", {
     children: [/*#__PURE__*/_jsx(Popper, {
-      open: Boolean(openAI),
+      open: Boolean(openAI) && anchorEl,
       anchorEl: anchorEl,
       transition: true,
       placement: "bottom-start",

package/dist/Editor/Elements/AI/Styles.js

@@ -39,7 +39,13 @@ const Styles = theme => ({
         color: "#94A3B8",
         opacity: 1 /* Firefox */,
         fontFamily: '"Inter", sans-serif',
-        fontWeight: 500
+        fontWeight: 500,
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis"
+      },
+      "&:placeholder-shown": {
+        height: "auto !important"
       },
       "&::-ms-input-placeholder": {
         /* Edge 12-18 */color: "#94A3B8",
@@ -115,7 +121,7 @@ const Styles = theme => ({
     overflow: "auto",
     // width: "240px",
     minWidth: "200px",
-    border: "1px solid #E0E0E0",
+    border: `1px solid ${theme?.palette?.editor?.popUpBorderColor}`,
     padding: "6px"
   },
   optionWrapper: {
@@ -142,16 +148,28 @@ const Styles = theme => ({
       gap: "8px"
     },
     "&:hover": {
-      background: `${theme?.palette?.containers?.bg3 || "#E9F3FE"}`
+      backgroundColor: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`,
+      "& svg path": {
+        stroke: `${theme?.palette?.editor?.textColor} !important`
+      },
+      "& svg": {
+        color: `${theme?.palette?.editor?.textColor} !important`
+      }
+    },
+    "& svg path": {
+      stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
+    },
+    "& svg": {
+      color: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
     },
     "&.active": {
       background: `${theme?.palette?.containers?.bg3 || "#E9F3FE"}`,
-      color: "#2563EB",
+      color: theme?.palette?.editor?.menuOptionsSelectedTextColor,
       "& svg path": {
-        stroke: "#2563EB"
+        stroke: theme?.palette?.editor?.menuOptionsSelectedTextColor
       },
       "& svg": {
-        color: "#2563EB !important"
+        color: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
       }
     }
   },

package/dist/Editor/Elements/Accordion/Accordion.js

@@ -6,7 +6,8 @@ import { IconButton, Tooltip, Box } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { GridSettingsIcon } from "../../common/iconslist";
 import Icon from "../../common/Icon";
-import { useEditorSelection } from "../../hooks/useMouseMove";
+import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
+import useCommonStyle from "../../commonStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const accordionBtnStyleKeys = {
@@ -78,6 +79,10 @@ const Accordion = props => {
     textColor,
     bgColor
   } = element;
+  const {
+    theme
+  } = useEditorContext();
+  const classes = useCommonStyle(theme);
   const onToggle = () => {
     setToggle(!toggle);
   };
@@ -97,6 +102,7 @@ const Accordion = props => {
         children: /*#__PURE__*/_jsx(IconButton, {
           size: "small",
           onClick: onSettings,
+          sx: classes.buttonMoreOption,
           children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
         })
       }), /*#__PURE__*/_jsx(Tooltip, {
@@ -105,6 +111,7 @@ const Accordion = props => {
         children: /*#__PURE__*/_jsx(IconButton, {
           size: "small",
           onClick: onDelete,
+          sx: classes.buttonMoreOption2,
           children: /*#__PURE__*/_jsx(DeleteIcon, {})
         })
       })]

package/dist/Editor/Elements/AppHeader/AppHeader.js

@@ -250,10 +250,10 @@ function AppHeader(props) {
               },
               sx: {
                 mr: 2,
-                [theme.breakpoints.up("sm")]: {
+                [theme?.breakpoints?.up("sm")]: {
                   display: "none"
                 },
-                [theme.breakpoints.between("xs", "md")]: {
+                [theme?.breakpoints.between("xs", "md")]: {
                   display: "block"
                 }
               },
@@ -272,10 +272,10 @@ function AppHeader(props) {
               },
               sx: {
                 flexGrow: 1,
-                [theme.breakpoints.up("sm")]: {
+                [theme?.breakpoints?.up("sm")]: {
                   display: "block"
                 },
-                [theme.breakpoints.between("xs", "md")]: {
+                [theme?.breakpoints?.between("xs", "md")]: {
                   display: "none"
                 },
                 "& img": {
@@ -293,10 +293,10 @@ function AppHeader(props) {
               }) : null, appTitle]
             }), /*#__PURE__*/_jsxs(Box, {
               sx: {
-                [theme.breakpoints.up("sm")]: {
+                [theme?.breakpoints?.up("sm")]: {
                   display: "block"
                 },
-                [theme.breakpoints.between("xs", "md")]: {
+                [theme?.breakpoints?.between("xs", "md")]: {
                   display: "none"
                 }
               },

package/dist/Editor/Elements/Button/EditorButton.js

@@ -11,6 +11,7 @@ import { handleLinkType, windowVar } from "../../utils/helper";
 import LinkSettings from "../../common/LinkSettings";
 import Icon from "../../common/Icon";
 import { useEditorContext } from "../../hooks/useMouseMove";
+import useCommonStyle from "../../commonStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -36,6 +37,7 @@ const EditorButton = props => {
   const [edit, setEdit] = useState(false);
   const [openNav, setOpenNav] = useState(false);
   const [openMoreOptions, setOpenMoreOptions] = useState(false);
+  const classes = useCommonStyle(appTheme);
   const {
     label,
     bgColor,
@@ -136,6 +138,7 @@ const EditorButton = props => {
           arrow: true,
           children: /*#__PURE__*/_jsx(IconButton, {
             onClick: onMenuClick("edit"),
+            sx: classes.buttonMoreOption,
             children: /*#__PURE__*/_jsx(Icon, {
               icon: "pagesSettings"
             })
@@ -145,6 +148,7 @@ const EditorButton = props => {
           arrow: true,
           children: /*#__PURE__*/_jsx(IconButton, {
             onClick: onMenuClick("nav"),
+            sx: classes.buttonMoreOption,
             children: /*#__PURE__*/_jsx(Icon, {
               icon: "link"
             })
@@ -157,7 +161,8 @@ const EditorButton = props => {
               sx: {
                 display: "inline-flex",
                 color: "rgba(0, 0, 0, 0.54)",
-                marginBottom: "0px !important"
+                marginBottom: "0px !important",
+                ...classes.buttonMoreOption3
               },
               ...btnProps,
               children: /*#__PURE__*/_jsx(Icon, {

package/dist/Editor/Elements/Carousel/CarouselItem.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Node, Transforms } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
-import { Tooltip, IconButton } from "@mui/material";
+import { Tooltip, IconButton, Box } 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";
@@ -37,7 +37,7 @@ const CarouselItem = props => {
       className: "element-toolbar hr",
       style: {
         top: "0px",
-        right: "28px"
+        left: "0px"
       },
       contentEditable: false,
       children: /*#__PURE__*/_jsx(Tooltip, {
@@ -53,7 +53,7 @@ const CarouselItem = props => {
   return /*#__PURE__*/_jsx("div", {
     ...attributes,
     className: "carousel-item",
-    children: /*#__PURE__*/_jsxs("div", {
+    children: /*#__PURE__*/_jsxs(Box, {
       className: "carousel-item-inner",
       style: {
         minHeight: "50px",
@@ -61,6 +61,14 @@ const CarouselItem = props => {
         justifyContent: "center",
         alignItems: "center"
       },
+      sx: {
+        "& .ico-grp-ss": {
+          position: "absolute",
+          top: "0px",
+          right: "0px",
+          display: "flex"
+        }
+      },
       children: [children, /*#__PURE__*/_jsx(Toolbar, {})]
     })
   });

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

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Box, IconButton, Popover } from "@mui/material";
-import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
 import Button from "../../common/Button";
 import { colors } from "./defaultColors";
 import ColorPicker from "./colorPicker.svg";
@@ -46,7 +46,7 @@ const SingleColorButton = ({
       id: `in_${id}`,
       onClick: handleMore,
       className: "more-btn-cbs",
-      children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
+      children: /*#__PURE__*/_jsx(KeyboardArrowDownRoundedIcon, {})
     }) : null]
   }, `ci_bs_row_${index}}`);
 };
@@ -82,7 +82,7 @@ export const AllColors = props => {
         children: /*#__PURE__*/_jsx(Box, {
           className: "buttonsWrpr",
           style: {
-            padding: "8px"
+            padding: "5px"
           },
           children: all.map((m, i) => {
             return /*#__PURE__*/_jsx(SingleColorButton, {
@@ -109,11 +109,13 @@ const ColorButtons = props => {
     forMiniTool,
     openColorTool,
     onClose,
-    onColorPickerClick
+    onColorPickerClick,
+    defaultColors = []
   } = props;
   const [row1, ...restRows] = ColorChunks([]);
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
+  const firstRow = defaultColors?.length ? defaultColors : row1;
   const handleMore = e => {
     setAnchorEl(e.currentTarget);
   };
@@ -131,7 +133,7 @@ const ColorButtons = props => {
     sx: classes.colorButtons,
     children: [forMiniTool ? null : /*#__PURE__*/_jsx(Box, {
       className: "buttonsWrpr first",
-      children: [row1].map((m, i) => {
+      children: [firstRow].map((m, i) => {
         return /*#__PURE__*/_jsx(SingleColorButton, {
           id: `p1_${id}`,
           crs: m,

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

@@ -9,13 +9,18 @@ const ColorPickerStyles = theme => ({
       width: "24px",
       height: "24px",
       marginRight: "8px",
-      border: "1px solid #ccc"
+      border: "unset"
     }
   },
   colorPopper: {
     marginTop: "20px",
+    borderRadius: "7px !important",
     "& .MuiPaper-root": {
-      backgroundColor: theme?.palette?.editor?.background,
+      backgroundColor: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
+      background: `${theme?.palette?.editor?.miniToolBarBackground}`,
+      border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
+      borderRadius: "7px !important",
+      padding: "0px 5px",
       '@media only screen and (max-width: 600px)': {
         marginTop: "-40px"
       }
@@ -54,7 +59,7 @@ const ColorPickerStyles = theme => ({
       width: "24px",
       height: "24px",
       margin: "0px 4px",
-      border: "1px solid #ccc"
+      border: "unset"
     }
   },
   colorPickerIcon: {

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

@@ -1,4 +1,4 @@
-export const colors = ["#292D32", "#578CFF", "#A58CFF", "#46BBFF", "#FFC93A", "#33B24F", "#F06C83", "#64748B", "#82A9FE", "#C4B3FF", "#71CBFF", "#FFD055", "#61D57A", "#FA91A4", "#A2B0B9", "#A4C1FF", "#D7CBFF", "#9FDCFF", "#FFDC80", "#8AE59E", "#FCB0BE", "#E4ECF3", "#CDDCFF", "#E0D7FF", "#BEE7FF", "#FFE49E", "#B9F6C6", "#FDCAD3", "#FFFFFF", "#489FF8", "#FE7A00", "linear-gradient(327.62deg, #EBB9E0 13.53%, #9CEEE5 86.82%)", "linear-gradient(310.6deg, #7FA4F4 15.53%, #805EF5 83.64%)", "linear-gradient(95.19deg, #A831E7 4.17%, #F05339 88.89%)", "linear-gradient(90deg, #3F2AB7 12.5%, #0DC9B5 100%)", "#0F172A", "#2563EB", "#8360FD", "#19A9FC", "#FDB52A", "#0E8E2A", "#E1425E"
+export const colors = ["#000000", "#578CFF", "#A58CFF", "#46BBFF", "#FFC93A", "#33B24F", "#F06C83", "#64748B", "#82A9FE", "#C4B3FF", "#71CBFF", "#FFD055", "#61D57A", "#FA91A4", "#A2B0B9", "#A4C1FF", "#D7CBFF", "#9FDCFF", "#FFDC80", "#8AE59E", "#FCB0BE", "#E4ECF3", "#CDDCFF", "#E0D7FF", "#BEE7FF", "#FFE49E", "#B9F6C6", "#FDCAD3", "#FFFFFF", "#489FF8", "#FE7A00", "linear-gradient(327.62deg, #EBB9E0 13.53%, #9CEEE5 86.82%)", "linear-gradient(310.6deg, #7FA4F4 15.53%, #805EF5 83.64%)", "linear-gradient(95.19deg, #A831E7 4.17%, #F05339 88.89%)", "linear-gradient(90deg, #3F2AB7 12.5%, #0DC9B5 100%)", "#0F172A", "#2563EB", "#8360FD", "#19A9FC", "#FDB52A", "#0E8E2A", "#E1425E"
 // "#E6E6E6",
-// "#BEBEBE"
+// "#BEBEBE",
 ];

package/dist/Editor/Elements/DataView/DataView.js

@@ -0,0 +1,124 @@
+import React from "react";
+import { Node, Path, Transforms } from "slate";
+import { ReactEditor, useSlateStatic } from "slate-react";
+import { Box, useTheme } from "@mui/material";
+import { DataViewProvider } from "./Providers/DataViewProvider";
+import useDataViewStyles from "./styles";
+import LayoutView from "./Layouts";
+import FilterView from "./Layouts/FilterView";
+import { insertLineBreakAtEndOfPath } 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 DataView = props => {
+  const {
+    theme: appTheme
+  } = useEditorContext();
+  const theme = useTheme();
+  const editor = useSlateStatic();
+  const {
+    attributes,
+    children,
+    element,
+    customProps
+  } = props;
+  const {
+    CHARACTERS,
+    readOnly
+  } = customProps || {};
+  const {
+    properties,
+    layouts,
+    rows,
+    title
+  } = element;
+  const classes = useDataViewStyles(theme, appTheme);
+  const path = ReactEditor.findPath(editor, element);
+  const users = CHARACTERS?.map(m => {
+    const name = [m?.first_name || "", m?.last_name || ""]?.join(" ").trim();
+    return {
+      value: m?.email,
+      label: name || m?.username || m?.email,
+      avatar: m?.avatar || null
+    };
+  });
+  const onDuplicate = () => {
+    try {
+      const newPath = ReactEditor.findPath(editor, element);
+      const dataViewNode = Node.get(editor, newPath);
+      const cloneNode = JSON.parse(JSON.stringify(dataViewNode));
+      const toPath = Path.next(Path.parent(newPath));
+      Transforms.insertNodes(editor, [{
+        type: "paragraph",
+        children: [{
+          ...cloneNode
+        }]
+      }], {
+        at: toPath
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  const onDelete = () => {
+    try {
+      const newPath = ReactEditor.findPath(editor, element);
+      Transforms.removeNodes(editor, {
+        at: newPath
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  const onEnter = () => {
+    try {
+      const newPath = ReactEditor.findPath(editor, element);
+      const toPath = Path.previous(Path.parent(newPath));
+      insertLineBreakAtEndOfPath(editor, toPath);
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  const onTitleChange = value => {
+    try {
+      Transforms.setNodes(editor, {
+        title: value
+      }, {
+        at: path
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  return /*#__PURE__*/_jsx(Box, {
+    ...attributes,
+    className: "fe-dataview",
+    sx: classes.root,
+    contentEditable: false,
+    "data-title": title,
+    children: /*#__PURE__*/_jsxs(DataViewProvider, {
+      data: {
+        properties,
+        layouts,
+        rows
+      },
+      path: path,
+      editor: editor,
+      title: title,
+      users: users,
+      children: [/*#__PURE__*/_jsx(FilterView, {
+        classes: classes,
+        onEnter: onEnter,
+        onDelete: onDelete,
+        onDuplicate: onDuplicate,
+        readOnly: readOnly,
+        title: title,
+        onTitleChange: onTitleChange
+      }), /*#__PURE__*/_jsx(LayoutView, {
+        readOnly: readOnly,
+        children: children
+      })]
+    })
+  });
+};
+export default DataView;

package/dist/Editor/Elements/DataView/DataViewButton.js

@@ -0,0 +1,23 @@
+import React from "react";
+import ToolbarIcon from "../../common/ToolbarIcon";
+import Icon from "../../common/Icon";
+import { insertDataView } from "../../utils/dataView";
+import { jsx as _jsx } from "react/jsx-runtime";
+const DataViewButton = props => {
+  const {
+    editor,
+    icoBtnType
+  } = props;
+  const onClick = () => {
+    insertDataView(editor);
+  };
+  return /*#__PURE__*/_jsx(ToolbarIcon, {
+    title: "Dynamic Table",
+    onClick: onClick,
+    icon: /*#__PURE__*/_jsx(Icon, {
+      icon: "dataView"
+    }),
+    icoBtnType: icoBtnType
+  });
+};
+export default DataViewButton;