@flozy/editor 1.2.2 → 1.2.4

package/dist/Editor/CommonEditor.js

@@ -1,7 +1,7 @@
 import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } from "react";
 import { createEditor } from "slate";
-import { Slate, Editable } from "slate-react";
-import html2canvas from "html2canvas";
+import { Slate, Editable, ReactEditor } from "slate-react";
+import { useDebounce } from "use-debounce";
 import Toolbar from "./Toolbar/Toolbar";
 import { getMarked, getBlock } from "./utils/SlateUtilityFunctions";
 import CodeToText from "./Elements/CodeToText/CodeToText";
@@ -12,11 +12,13 @@ import { RemoteCursorOverlay } from "./RemoteCursorOverlay/Overlay";
 import { mentionsEvent, commands } from "./utils/events";
 import withCommon from "./hooks/withCommon";
 import DialogWrapper from "./DialogWrapper";
-import useTimeout from "./hooks/useTimeout";
 import "./Editor.css";
 import { serialize } from "./utils/serializer";
+import { getThumbnailImage } from "./helper";
+import PopupTool from "./Toolbar/PopupTool";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const PREVIEW_IMAGE_HIDE_CLASS = ["grid-container-toolbar", "grid-item-toolbar", "element-toolbar"];
 const Element = props => {
   return getBlock(props);
 };
@@ -38,18 +40,16 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     onSave,
     editor: collaborativeEditor,
     readOnly,
-    otherProps,
-    timeoutInMS = 1000
+    otherProps
   } = props;
   const editorWrapper = useRef();
   const convertedContent = draftToSlate({
     data: content
   });
   const [value, setValue] = useState(convertedContent);
-  const [lastUpdated, setLastUpdated] = useState(JSON.stringify(convertedContent));
-  const [count] = useTimeout({
-    timeoutInMS: timeoutInMS
-  });
+  const [loadedValue] = useState(value);
+  const [isInteracted, setIsInteracted] = useState(false);
+  const [deboundedValue] = useDebounce(value, 500);
   const editor = useMemo(() => {
     if (collaborativeEditor) return collaborativeEditor;
     return withCommon(createEditor());
@@ -74,17 +74,41 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     }));
   }, [id, content]);
   useEffect(() => {
-    if (count > 0) {
-      updateChanges(value);
+    if (editorWrapper && editorWrapper?.current && loadedValue !== deboundedValue && isInteracted) {
+      const text = serialize(deboundedValue);
+      const title = deboundedValue?.find(f => f.type === "title");
+      onSave(JSON.stringify(deboundedValue), {
+        text: text,
+        title: serialize(title?.children) || "Untitled"
+      });
     }
-  }, [count]);
+  }, [deboundedValue]);
+  const getPreviewImage = async (needBackground = false, options = {}) => {
+    ReactEditor.blur(editor);
+    const dom = needBackground ? editorWrapper?.current : editorWrapper?.current.getElementsByClassName("innert-editor-textbox")[0];
+    const c = await getThumbnailImage(dom, {
+      ...options,
+      allowTaint: true,
+      backgroundColor: null,
+      proxy: "anonymous",
+      useCORS: true,
+      onclone: document => {
+        // hide class
+        for (let hidedeClass of PREVIEW_IMAGE_HIDE_CLASS) {
+          for (let element of document.getElementsByClassName(hidedeClass)) {
+            element.style.display = "none";
+          }
+        }
+        return document;
+      }
+    });
+    return c;
+  };
   useImperativeHandle(ref, () => ({
-    async getThumbnail() {
+    async getThumbnail(needBackground = false, options = {}) {
       try {
-        const c = await html2canvas(editorWrapper?.current);
-        if (c) {
-          return c.toDataURL();
-        }
+        const c = await getPreviewImage(needBackground, options);
+        return c;
       } catch (err) {
         console.log(err);
         return null;
@@ -118,27 +142,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const chars = CHARACTERS.filter(c => c.toLowerCase().startsWith(search?.toLowerCase())).slice(0, 10);
   const handleEditorChange = newValue => {
     setValue(newValue);
-    const isAstChange = editor.operations.some(op => "set_selection" !== op.type);
-    if (isAstChange && onSave && timeoutInMS === 0) {
-      // send the value to onSave api
-      updateChanges(newValue);
-    }
-  };
-  const updateChanges = newValue => {
-    const stringify = JSON.stringify(newValue);
-    const text = serialize(newValue);
-    if (stringify !== lastUpdated && count > 0 && text?.trim().length > 3 && onSave) {
-      if (editorWrapper && editorWrapper?.current) {
-        html2canvas(editorWrapper?.current, {
-          height: 350
-        }).then(c => {
-          onSave(stringify, {
-            text: text,
-            thumbnail: c.toDataURL()
-          });
-          setLastUpdated(stringify);
-        });
-      }
+    if (!isInteracted) {
+      setIsInteracted(true);
     }
   };
   const customProps = {
@@ -211,7 +216,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
               paddingTop: `${bannerSpacing?.top}px`,
               paddingBottom: `${bannerSpacing?.bottom}px`
             },
-            children: [/*#__PURE__*/_jsx(Editable, {
+            children: [/*#__PURE__*/_jsx(PopupTool, {}), /*#__PURE__*/_jsx(Editable, {
+              className: "innert-editor-textbox",
               readOnly: isReadOnly,
               placeholder: "Write something",
               renderElement: renderElement,

package/dist/Editor/Editor.css

@@ -1,9 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
 
-* {
-    font-family: 'Inter', sans-serif;
-}
-
 .ml-1 {
     margin-left: 10px;
 }
@@ -437,4 +433,8 @@ html{
 
 .toolbar svg {
     /* fill: 'red' */
+}
+
+.MuiIconButton-root.btnActive {
+    background-color: #ccc;
 }

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

@@ -1,31 +1,23 @@
 import React, { useRef, useState } from "react";
-import { MdFormatColorText, MdFormatColorFill } from "react-icons/md";
-import "./ColorPicker.css";
+import { ReactEditor } from "slate-react";
+import Button from "../../common/Button";
 import { colors } from "./defaultColors";
 import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions";
 import { Transforms } from "slate";
 import usePopup from "../../utils/customHooks/usePopup";
-import { ReactEditor } from "slate-react";
+import { logo } from "./LogoIcon";
+import "./ColorPicker.css";
 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 logo = {
-  color: /*#__PURE__*/_jsx(MdFormatColorText, {
-    size: 17,
-    style: {
-      fill: '#64748B'
-    }
-  }),
-  bgColor: /*#__PURE__*/_jsx(MdFormatColorFill, {
-    size: 17,
-    style: {
-      fill: '#64748B'
-    }
-  })
+const DEFAULT_COLOR = {
+  color: "#000000",
+  bgcolor: "#FFFFFF"
 };
 const ColorPicker = ({
   format,
-  editor
+  editor,
+  showHex
 }) => {
   const [selection, setSelection] = useState();
   const [hexValue, setHexValue] = useState("");
@@ -68,17 +60,27 @@ const ColorPicker = ({
     setValidHex(isValideHexSix.test(newHex) || isValideHexThree.test(newHex));
     setHexValue(newHex);
   };
+  const activeColor = showOptions ? DEFAULT_COLOR[format] : activeMark(editor, format);
   return /*#__PURE__*/_jsxs("div", {
     className: "color-picker popup-wrapper1 color-picker-dialog",
     ref: colorPickerRef,
-    children: [/*#__PURE__*/_jsx("button", {
+    style: {
+      display: "flex",
+      alignItems: "center"
+    },
+    children: [showHex ? /*#__PURE__*/_jsx("div", {
+      style: {
+        display: "flex"
+      },
+      children: activeColor
+    }) : null, /*#__PURE__*/_jsx(Button, {
       style: {
-        color: showOptions ? "black" : activeMark(editor, format),
+        color: activeColor,
         opacity: "1"
       },
       className: showOptions ? "clicked" : "",
       onClick: toggleOption,
-      children: logo[format]
+      children: logo[format](activeColor)
     }), showOptions && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("div", {
         className: "backdrop",
@@ -125,7 +127,7 @@ const ColorPicker = ({
             className: "colorSaveBtn",
             style: {
               background: validHex ? "#2563EB" : "#64748B",
-              color: '#fff'
+              color: "#fff"
             },
             type: "submit",
             children: "Save"

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

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const logo = {
+  color: color => /*#__PURE__*/_jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "#000000",
+    height: "20px",
+    width: "20px",
+    version: "1.1",
+    id: "Icons",
+    viewBox: "0 0 32 32",
+    children: /*#__PURE__*/_jsxs("g", {
+      children: [/*#__PURE__*/_jsx("path", {
+        d: "M29,27H3c-0.6,0-1,0.4-1,1s0.4,1,1,1h26c0.6,0,1-0.4,1-1S29.6,27,29,27z",
+        fill: color || "#000"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M5,24h4c0.6,0,1-0.4,1-1s-0.4-1-1-1H8.6l1.9-4h11.1l1.9,4H23c-0.6,0-1,0.4-1,1s0.4,1,1,1h4c0.6,0,1-0.4,1-1s-0.4-1-1-1   h-1.4L16.9,3.6C16.7,3.2,16.4,3,16,3s-0.7,0.2-0.9,0.6L6.4,22H5c-0.6,0-1,0.4-1,1S4.4,24,5,24z M16,6.3l4.6,9.7h-9.2L16,6.3z"
+      })]
+    })
+  }),
+  bgColor: color => /*#__PURE__*/_jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24px",
+    height: "24px",
+    viewBox: "0 0 50 50",
+    fill: "none",
+    children: [/*#__PURE__*/_jsx("rect", {
+      width: "48",
+      height: "48",
+      fill: "white",
+      fillOpacity: "0.01"
+    }), /*#__PURE__*/_jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M37 37C39.2091 37 41 35.2091 41 33C41 31.5272 39.6667 29.5272 37 27C34.3333 29.5272 33 31.5272 33 33C33 35.2091 34.7909 37 37 37Z",
+      fill: "#000000"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M20.8535 5.50439L24.389 9.03993",
+      stroke: "#000000",
+      strokeWidth: "4",
+      strokeLinecap: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M23.6818 8.33281L8.12549 23.8892L19.4392 35.2029L34.9955 19.6465L23.6818 8.33281Z",
+      stroke: "#000000",
+      strokeWidth: "4",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M12 20.0732L28.961 25.6496",
+      stroke: "#000000",
+      strokeWidth: "4",
+      strokeLinecap: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M4 43H44",
+      stroke: color || "#FFF",
+      strokeWidth: "4",
+      strokeLinecap: "round"
+    })]
+  })
+};

package/dist/Editor/Elements/Title/title.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Title = props => {
+  const {
+    attributes,
+    children
+  } = props;
+  return /*#__PURE__*/_jsx("div", {
+    ...attributes,
+    style: {
+      fontWeight: "bold"
+    },
+    children: children
+  });
+};
+export default Title;

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

@@ -0,0 +1,22 @@
+import React from "react";
+import Icon from "../../common/Icon";
+import Button from "../../common/Button";
+import { toggleBlock, isBlockActive } from "../../utils/SlateUtilityFunctions.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const BlockButton = ({
+  editor,
+  format
+}) => {
+  return /*#__PURE__*/_jsx(Button, {
+    active: isBlockActive(editor, format),
+    format: format,
+    onMouseDown: e => {
+      e.preventDefault();
+      toggleBlock(editor, format);
+    },
+    children: /*#__PURE__*/_jsx(Icon, {
+      icon: format
+    })
+  });
+};
+export default BlockButton;

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

@@ -0,0 +1,40 @@
+import React from "react";
+import { Select, MenuItem } from "@mui/material";
+import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
+import { fontFamilyMap } from "../../utils/font";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Dropdown = ({
+  editor,
+  format,
+  options
+}) => {
+  const value = activeMark(editor, format);
+  const changeMarkData = (event, format) => {
+    event.preventDefault();
+    const value = event.target.value;
+    addMarkData(editor, {
+      format,
+      value
+    });
+  };
+  return /*#__PURE__*/_jsx(Select, {
+    value: value,
+    className: "editor-dd",
+    onChange: e => changeMarkData(e, format),
+    style: {
+      fontFamily: fontFamilyMap[value],
+      width: "100%",
+      height: "36px",
+      overflow: "hidden",
+      borderRadius: "10px"
+    },
+    children: options.map((item, index) => /*#__PURE__*/_jsx(MenuItem, {
+      style: {
+        fontFamily: item.text
+      },
+      value: item.value,
+      children: item.text
+    }, index))
+  });
+};
+export default Dropdown;

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

@@ -0,0 +1,22 @@
+import React from "react";
+import Icon from "../../common/Icon";
+import Button from "../../common/Button";
+import { toggleMark, isMarkActive } from "../../utils/SlateUtilityFunctions.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const MarkButton = ({
+  editor,
+  format
+}) => {
+  return /*#__PURE__*/_jsx(Button, {
+    active: isMarkActive(editor, format),
+    format: format,
+    onMouseDown: e => {
+      e.preventDefault();
+      toggleMark(editor, format);
+    },
+    children: /*#__PURE__*/_jsx(Icon, {
+      icon: format
+    })
+  });
+};
+export default MarkButton;

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

@@ -0,0 +1,4 @@
+import BlockButton from "./BlockButton";
+import Dropdown from "./Dropdown";
+import MarkButton from "./MarkButton";
+export { BlockButton, Dropdown, MarkButton };

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

@@ -0,0 +1,34 @@
+const usePopupStyle = () => ({
+  popupWrapper: {
+    boxShadow: "0px 4px 10px 0px rgba(0, 0, 0, 0.16)"
+  },
+  textFormatWrapper: {
+    padding: "0px 24px 24px 24px",
+    width: "350px"
+  },
+  textFormatLabel: {
+    display: "flex",
+    alignItems: "center",
+    fontWeight: 600,
+    fontSize: "14px",
+    lineHeight: "25px",
+    marginTop: "8px",
+    marginBottom: "8px",
+    color: "rgba(169, 169, 169, 1)"
+  },
+  textFormatField: {
+    marginBottom: "8px"
+  },
+  textFormatFieldBorder: {
+    display: "flex",
+    alignItems: "center",
+    marginBottom: "8px",
+    border: "1px solid rgba(169, 169, 169, 1)",
+    padding: "0px 8px",
+    borderRadius: "10px"
+  },
+  textFormatCG: {
+    marginBottom: "8px"
+  }
+});
+export default usePopupStyle;

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

@@ -0,0 +1,81 @@
+import React from "react";
+import { Grid } from "@mui/material";
+import toolbarGroups from "../toolbarGroups";
+import { Dropdown, MarkButton } from "../FormatTools";
+import ColorPicker from "../../Elements/Color Picker/ColorPicker";
+import { activeMark } from "../../utils/SlateUtilityFunctions";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const allTools = toolbarGroups.flat();
+const TextFormat = props => {
+  const {
+    classes,
+    editor
+  } = props;
+  const fontFamily = allTools.find(f => f.format === "fontFamily");
+  const fontStyle = allTools.filter(f => f.type === "mark");
+  return /*#__PURE__*/_jsxs(Grid, {
+    container: true,
+    sx: classes.textFormatWrapper,
+    children: [/*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      sx: classes.textFormatLabel,
+      children: "TEXT COLOR"
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      sx: classes.textFormatFieldBorder,
+      children: /*#__PURE__*/_jsx(ColorPicker, {
+        format: "color",
+        activeMark: activeMark,
+        editor: editor,
+        showHex: true
+      })
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      sx: classes.textFormatLabel,
+      children: "BACKGROUND COLOR"
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      sx: classes.textFormatFieldBorder,
+      children: /*#__PURE__*/_jsx(ColorPicker, {
+        format: "bgColor",
+        activeMark: activeMark,
+        editor: editor,
+        showHex: true
+      })
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      sx: classes.textFormatLabel,
+      children: "FONT FAMILY"
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      sx: classes.textFormatField,
+      children: /*#__PURE__*/_jsx(Dropdown, {
+        ...fontFamily,
+        editor: editor
+      })
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      sx: classes.textFormatLabel,
+      children: "FONT STYLE"
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      sx: classes.textFormatCG,
+      children: fontStyle?.map((m, i) => {
+        return /*#__PURE__*/_jsx(MarkButton, {
+          editor: editor,
+          ...m
+        }, `pptool_mark_${i}_${m.id}`);
+      })
+    })]
+  });
+};
+export default TextFormat;

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

@@ -0,0 +1,69 @@
+import React, { useEffect, useState } from "react";
+import { Popper, Fade, Paper, IconButton } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import { Editor, Range } from "slate";
+import { useSlate, useFocused } from "slate-react";
+import TextFormat from "./TextFormat";
+import usePopupStyle from "./PopupToolStyle";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const PopupTool = () => {
+  const classes = usePopupStyle();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const editor = useSlate();
+  const inFocus = useFocused();
+  const {
+    selection
+  } = editor;
+  const open = Boolean(anchorEl);
+  const id = open ? "popup-edit-tool" : "";
+  useEffect(() => {
+    if (!selection || !inFocus || Range.isCollapsed(selection) || Editor.string(editor, selection) === "") {
+      setAnchorEl(null);
+    } else {
+      const domSelection = window.getSelection();
+      const domRange = domSelection.getRangeAt(0);
+      const rect = domRange.getBoundingClientRect();
+      setAnchorEl({
+        clientWidth: rect.width,
+        clientHeight: rect.height,
+        getBoundingClientRect: () => rect
+      });
+    }
+  }, [selection]);
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  return /*#__PURE__*/_jsx(Popper, {
+    id: id,
+    open: open,
+    disablePortal: false,
+    anchorEl: anchorEl,
+    transition: true,
+    placement: "bottom-start",
+    onMouseDown: e => e.preventDefault(),
+    sx: classes.popupWrapper,
+    children: ({
+      TransitionProps
+    }) => /*#__PURE__*/_jsx(Fade, {
+      ...TransitionProps,
+      timeout: 350,
+      children: /*#__PURE__*/_jsxs(Paper, {
+        children: [/*#__PURE__*/_jsx("div", {
+          style: {
+            display: "flex",
+            justifyContent: "end"
+          },
+          children: /*#__PURE__*/_jsx(IconButton, {
+            onClick: handleClose,
+            children: /*#__PURE__*/_jsx(CloseIcon, {})
+          })
+        }), /*#__PURE__*/_jsx(TextFormat, {
+          editor: editor,
+          classes: classes
+        })]
+      })
+    })
+  });
+};
+export default PopupTool;

package/dist/Editor/Toolbar/Toolbar.js

@@ -1,13 +1,9 @@
 import React, { useEffect, useState } from "react";
-import { Select, MenuItem } from "@mui/material";
 import { useSlate } from "slate-react";
-import Button from "../common/Button";
-import Icon from "../common/Icon";
-import { toggleBlock, toggleMark, isMarkActive, addMarkData, isBlockActive, activeMark } from "../utils/SlateUtilityFunctions.js";
-import { fontFamilyMap } from "../utils/font";
+import { isBlockActive, activeMark } from "../utils/SlateUtilityFunctions.js";
 import useFormat from "../utils/customHooks/useFormat.js";
 import defaultToolbarGroups from "./toolbarGroups.js";
-import "./styles.css";
+import { BlockButton, MarkButton, Dropdown } from "./FormatTools";
 import ColorPicker from "../Elements/Color Picker/ColorPicker";
 import LinkButton from "../Elements/Link/LinkButton";
 import Embed from "../Elements/Embed/Embed";
@@ -26,6 +22,7 @@ import CarouselButton from "../Elements/Carousel/CarouselButton";
 import ChipTextButton from "../Elements/ChipText/ChipTextButton";
 import DrawerMenuButton from "../Elements/DrawerMenu/DrawerMenuButton";
 import AppHeaderButton from "../Elements/AppHeader/AppHeaderButton";
+import "./styles.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Toolbar = props => {
@@ -48,68 +45,6 @@ const Toolbar = props => {
     setToolbarGroups(filteredGroups);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isTable]);
-  const BlockButton = ({
-    format
-  }) => {
-    return /*#__PURE__*/_jsx(Button, {
-      active: isBlockActive(editor, format),
-      format: format,
-      onMouseDown: e => {
-        e.preventDefault();
-        toggleBlock(editor, format);
-      },
-      children: /*#__PURE__*/_jsx(Icon, {
-        icon: format
-      })
-    });
-  };
-  const MarkButton = ({
-    format
-  }) => {
-    return /*#__PURE__*/_jsx(Button, {
-      active: isMarkActive(editor, format),
-      format: format,
-      onMouseDown: e => {
-        e.preventDefault();
-        toggleMark(editor, format);
-      },
-      children: /*#__PURE__*/_jsx(Icon, {
-        icon: format
-      })
-    });
-  };
-  const Dropdown = ({
-    format,
-    options
-  }) => {
-    const value = activeMark(editor, format);
-    return /*#__PURE__*/_jsx(Select, {
-      value: value,
-      className: "editor-dd",
-      onChange: e => changeMarkData(e, format),
-      style: {
-        fontFamily: fontFamilyMap[value],
-        width: "200px",
-        height: "36px",
-        overflow: "hidden"
-      },
-      children: options.map((item, index) => /*#__PURE__*/_jsx(MenuItem, {
-        style: {
-          fontFamily: item.text
-        },
-        value: item.value,
-        children: item.text
-      }, index))
-    });
-  };
-  const changeMarkData = (event, format) => {
-    event.preventDefault();
-    const value = event.target.value;
-    addMarkData(editor, {
-      format,
-      value
-    });
-  };
   return /*#__PURE__*/_jsxs("div", {
     className: "toolbar",
     children: [toolbarGroups.map((group, index) => /*#__PURE__*/_jsx("span", {
@@ -118,15 +53,18 @@ const Toolbar = props => {
         switch (element.type) {
           case "block":
             return /*#__PURE__*/_jsx(BlockButton, {
-              ...element
+              ...element,
+              editor: editor
             }, element.id);
           case "mark":
             return /*#__PURE__*/_jsx(MarkButton, {
-              ...element
+              ...element,
+              editor: editor
             }, element.id);
           case "dropdown":
             return /*#__PURE__*/_jsx(Dropdown, {
-              ...element
+              ...element,
+              editor: editor
             }, element.id);
           case "link":
             return /*#__PURE__*/_jsx(LinkButton, {

package/dist/Editor/helper/index.js

@@ -0,0 +1,10 @@
+import html2canvas from "html2canvas";
+export const getThumbnailImage = async (dom, options = {}) => {
+  try {
+    const canvas = await html2canvas(dom, options);
+    return canvas.toDataURL();
+  } catch (err) {
+    console.log(err);
+    return null;
+  }
+};

package/dist/Editor/hooks/withCommon.js

@@ -5,7 +5,8 @@ import withTables from "../plugins/withTable";
 import withEmbeds from "../plugins/withEmbeds";
 import withEquation from "../plugins/withEquation";
 import withMentions from "../plugins/withMentions";
+import withLayout from "../plugins/withLayout";
 const withCommon = props => {
-  return withEquation(withHistory(withEmbeds(withTables(withLinks(withMentions(withReact(props)))))));
+  return withEquation(withLayout(withHistory(withEmbeds(withTables(withLinks(withMentions(withReact(props))))))));
 };
 export default withCommon;

package/dist/Editor/plugins/withLayout.js

@@ -0,0 +1,62 @@
+import { Transforms, Node, Element as SlateElement, Editor } from "slate";
+const withLayout = editor => {
+  const {
+    normalizeNode
+  } = editor;
+  editor.normalizeNode = ([node, path]) => {
+    if (path.length === 0) {
+      if (editor.children.length <= 1 && Editor.string(editor, [0, 0]) === "") {
+        const title = {
+          type: "title",
+          children: [{
+            text: "Untitled"
+          }]
+        };
+        Transforms.insertNodes(editor, title, {
+          at: path.concat(0),
+          select: true
+        });
+      }
+      if (editor.children.length < 2) {
+        const paragraph = {
+          type: "paragraph",
+          children: [{
+            text: ""
+          }]
+        };
+        Transforms.insertNodes(editor, paragraph, {
+          at: path.concat(1)
+        });
+      }
+      for (const [child, childPath] of Node.children(editor, path)) {
+        let type = "";
+        const slateIndex = childPath[0];
+        const enforceType = type => {
+          if (SlateElement.isElement(child) && child.type !== type) {
+            const newProperties = {
+              type
+            };
+            Transforms.setNodes(editor, newProperties, {
+              at: childPath
+            });
+          }
+        };
+        switch (slateIndex) {
+          case 0:
+            type = "title";
+            enforceType(type);
+            break;
+          case 1:
+            type = "paragraph";
+            enforceType(type);
+            break;
+          default:
+            break;
+        }
+      }
+    }
+    return normalizeNode([node, path]);
+  };
+  return editor;
+};
+export default withLayout;

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -25,6 +25,7 @@ import ChipText from "../Elements/ChipText/ChipText";
 import DrawerMenu from "../Elements/DrawerMenu/DrawerMenu";
 import AppHeader from "../Elements/AppHeader/AppHeader";
 import PageSettings from "../Elements/PageSettings/PageSettings";
+import Title from "../Elements/Title/title";
 import { jsx as _jsx } from "react/jsx-runtime";
 const alignment = ["alignLeft", "alignRight", "alignCenter"];
 const list_types = ["orderedList", "unorderedList"];
@@ -93,8 +94,8 @@ export const isBlockActive = (editor, format) => {
 };
 export const activeMark = (editor, format) => {
   const defaultMarkData = {
-    color: "black",
-    bgColor: "black",
+    color: "#000000",
+    bgColor: "#FFFFFF",
     fontSize: "normal",
     fontFamily: "sans"
   };
@@ -363,6 +364,10 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx(PageSettings, {
         ...props
       });
+    case "title":
+      return /*#__PURE__*/_jsx(Title, {
+        ...props
+      });
     default:
       return /*#__PURE__*/_jsx("div", {
         ...element.attr,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -34,6 +34,7 @@
     "slate-history": "^0.93.0",
     "slate-react": "^0.98.3",
     "styled-components": "^5.3.11",
+    "use-debounce": "^10.0.0",
     "web-vitals": "^2.1.4",
     "y-websocket": "^1.5.0",
     "yjs": "^13.6.8"

package/dist/Editor/hooks/useTimeout.js

@@ -1,21 +0,0 @@
-import { useEffect, useState } from "react";
-let t = null;
-const useTimeout = props => {
-  const {
-    timeoutInMS
-  } = props;
-  const [count, setCount] = useState(-1);
-  const onReset = () => {
-    clearTimeout(t);
-    t = setTimeout(() => {
-      setCount(count + 1);
-    }, timeoutInMS);
-  };
-  useEffect(() => {
-    if (timeoutInMS) {
-      onReset();
-    }
-  }, [timeoutInMS, count]);
-  return [count];
-};
-export default useTimeout;