@flozy/editor 5.7.7 → 5.7.9

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

@@ -14,6 +14,7 @@ import MiniColorPicker from "./MiniColorPicker";
 import SelectAlignment from "./SelectAlignment";
 import SelectFontSize from "./SelectFontSize";
 import InfinityAITool from "./InfinityAITool";
+import { viewSlateSelection } from "../../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_COLOR = {
@@ -60,13 +61,15 @@ const MiniTextFormat = props => {
           className: "verticalLine"
         }), /*#__PURE__*/_jsx(SelectList, {
           classes: classes,
-          editor: editor
+          editor: editor,
+          closeMainPopup: closeMainPopup
         }), /*#__PURE__*/_jsx("div", {
           className: "verticalLine mr-1"
         }), /*#__PURE__*/_jsx(SelectAlignment, {
           fontAlign: fontAlign,
           classes: classes,
-          editor: editor
+          editor: editor,
+          closeMainPopup: closeMainPopup
         }), /*#__PURE__*/_jsx("div", {
           className: "verticalLine mr-1"
         }), /*#__PURE__*/_jsx(SelectFontSize, {
@@ -98,7 +101,10 @@ const MiniTextFormat = props => {
           editor: editor,
           customProps: customProps
         }, link.id), /*#__PURE__*/_jsx(IconButton, {
-          onClick: e => setAnchorEl(document.getElementById("mini-text-editor-wrapper")),
+          onClick: e => {
+            viewSlateSelection();
+            setAnchorEl(document.getElementById("mini-text-editor-wrapper"));
+          },
           className: `textSettingsIcon ${open ? "btnActive" : ""}`,
           children: /*#__PURE__*/_jsx(TextToolIcon, {})
         }), /*#__PURE__*/_jsx(Popper, {

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

@@ -416,6 +416,11 @@ const usePopupStyle = theme => ({
     "& .MuiOutlinedInput-notchedOutline": {
       border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`
     },
+    '& .MuiInputBase-root': {
+      '& input': {
+        border: "none !important"
+      }
+    },
     "& svg": {
       width: "20px",
       height: "24px"

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

@@ -9,6 +9,7 @@ import { useEditorContext } from "../../hooks/useMouseMove";
 import usePopupStyles from "../PopupTool/PopupToolStyle";
 import useEditorScroll from "../../hooks/useEditorScroll";
 import { isCarouselSelected } from "../../helper";
+import { hideSlateSelection } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PopupTool = props => {
   const {
@@ -83,6 +84,7 @@ const PopupTool = props => {
       setAnchorEl(null);
     } else {
       updateAnchorEl();
+      hideSlateSelection(); // removes slate selection background, when there is no selection
     }
   }, [selection]);
   useEffect(() => {

package/dist/Editor/common/FontLoader/FontList.js

@@ -1,11 +1,3 @@
-export const defaultFonts = [
-// "EB Garamond",
-"Anton", "DM Serif Text", "Libre Baskerville", "Montserrat", "Open Sans", "Public Sans", "Raleway", "Space Mono", "Great Vibes", "Zeyada", "Allura", "Pinyon Script", "Dancing Script", "Gaegu", "Kite One", "Merriweather"];
-export const otherFonts = ["PoppinsRegular", "PoppinsBold", "Monaco", "Qwitcher Grypen", "Bulgarian Garamond", "Redacted Script", "Herr Von Muellerhoff", "Dawning of a New Day", "Coming Soon", "Engagement", "Ingrid Darling", "La Belle Aurore", "Mea Culpa", "The Girl Next Door", "Helvetica", "Georgia", "Times New Roman", "Courier New", "Impact"];
-export const googleFontList = ["Roboto", "Noto Sans JP", "Poppins", "Lato", "Inter", "Roboto Condensed", "Roboto Mono", "Oswald", "Noto Sans", "Nunito", "Nunito Sans", "Ubuntu", "Rubik", "Playfair Display", "Noto Sans KR", "Roboto Slab", "PT Sans", "Kanit", "Work Sans", "Lora", "DM Sans", "Mulish", "Quicksand", "Fira Sans", "Noto Sans TC", "Inconsolata", "Barlow", "Manrope", "IBM Plex Sans", "PT Serif", "Karla", "Titillium Web", "Heebo", "Noto Serif", "Nanum Gothic", "Noto Color Emoji", "Agdasima", "Bebas Neue", "Libre Franklin", "Mukta", "Outfit", "Josefin Sans", "Source Code Pro", "Jost", "Space Grotesk", "Hind Siliguri", "Arimo", "Cabin", "Barlow Condensed", "Dosis", "Fira Sans Condensed", "Bitter", "Archivo", "Figtree", "Noto Serif JP", "PT Sans Narrow", "Abel", "Noto Sans SC",
-// "Source Sans 3",
-"Hind",
-// "Exo 2",
-"Teko", "Oxygen", "Cairo", "Crimson Text", "Plus Jakarta Sans", "Overpass", "Pacifico", "Prompt", "Red Hat Display", "Varela Round", "Cormorant Garamond", "Assistant", "Comfortaa", "Lexend", "Signika Negative",
-// "M PLUS Rounded 1c",
-"Fjalla One", "Caveat", "IBM Plex Mono", "Arvo", "Lobster", "Schibsted Grotesk", "Chakra Petch", "Maven Pro", "Sora", "Kalam", "Onest", "Space Grotesk", "Outfit", 'Titillium Web', ...defaultFonts];
+const otherFonts = ["PoppinsRegular", "PoppinsBold", "Qwitcher Grypen", "Bulgarian Garamond", "Redacted Script", "Herr Von Muellerhoff", "Dawning of a New Day", "Coming Soon", "Engagement", "Ingrid Darling", "La Belle Aurore", "Mea Culpa", "The Girl Next Door"];
+const mostUsedGoogleFonts = ["Roboto", "Poppins", "Lato", "Inter", "Nunito", "Ubuntu", "Oswald", "Rubik", "Roboto Slab", "PT Sans", "Work Sans", "Lora", "Mulish", "DM Sans", "Fira Sans", "Quicksand", "Barlow", "Manrope", "IBM Plex Sans", "PT Serif", "Libre Franklin", "Bebas Neue", "Cabin", "Titillium Web", "Heebo", "Noto Serif", "Jost", "Source Code Pro", "Josefin Sans", "Dosis", "Fira Sans Condensed", "Archivo", "Noto Serif JP", "Crimson Text", "Cairo", "Pacifico", "Red Hat Display", "Assistant", "Comfortaa", "Lexend", "Fjalla One", "Caveat", "Arvo", "Lobster", "Schibsted Grotesk", "EB Garamond", "Sora", "Kalam", "Onest", "Space Grotesk", "Outfit", "Plus Jakarta Sans"];
+export const googleFontList = [...mostUsedGoogleFonts, ...otherFonts];

package/dist/Editor/common/FontLoader/FontLoader.js

@@ -1,7 +1,11 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import WebFont from "webfontloader";
 import { useEditorContext } from "../../hooks/useMouseMove";
-import { defaultFonts, googleFontList, otherFonts } from "./FontList";
+import { googleFontList } from "./FontList";
+import CircularProgress from '@mui/material/CircularProgress';
+import Box from "@mui/material/Box";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const FontLoader = props => {
   const {
     otherProps,
@@ -10,14 +14,20 @@ const FontLoader = props => {
   const {
     setFontFamilies
   } = useEditorContext();
+  const [loading, setLoading] = useState(false);
   const loadFontsInBatches = (families, batchSize = 5, maxRetries = 3) => {
     let currentIndex = 0;
     let retryCount = 0;
+    let hideLoaderOn = 30;
     function loadNextBatch() {
       if (currentIndex >= families?.length) {
         // console.log("All fonts have been loaded");
+        setLoading(false);
         return;
       }
+      if (currentIndex >= hideLoaderOn) {
+        setLoading(false);
+      }
       const batch = families?.slice(currentIndex, currentIndex + batchSize);
       const batchWithWeights = batch.map(font => `${font}:300,400,600,700`);
       WebFont.load({
@@ -54,21 +64,21 @@ const FontLoader = props => {
     loadNextBatch();
   };
   useEffect(() => {
-    let families = [...otherFonts, ...defaultFonts];
+    let families = [...googleFontList];
     if (!readOnly) {
       otherProps?.services("listGoogleFont", []).then(data => {
-        families = [...families, ...(data?.data || [])];
-        const filteredfamilies = families?.filter(font => !font?.includes("Material"));
+        families = [...(data?.data || [])];
         setFontFamilies({
           id: 1,
           format: "fontFamily",
           type: "fontfamilydropdown",
-          options: filteredfamilies || []
+          options: families || []
         });
         loadFontsInBatches(families);
       }).catch(err => {
         // console.log(err);
       });
+      // setLoading(true);
     } else {
       function correctFontArray(fontString) {
         let fontsArray = fontString.split(",");
@@ -90,9 +100,25 @@ const FontLoader = props => {
       families = families?.map(font => font?.replace(/\"/g, ""));
       families = families?.map(font => font?.replace(", sans-serif", "")); //This is temporary fix for patch
       families = families.filter(font => googleFontList.includes(font));
+      // setLoading(true);
       loadFontsInBatches(families);
     }
   }, []);
-  return null;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: loading ? /*#__PURE__*/_jsx(Box, {
+      sx: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 99999,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+      },
+      children: /*#__PURE__*/_jsx(CircularProgress, {})
+    }) : null
+  });
 };
 export default FontLoader;

package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js

@@ -62,6 +62,7 @@ const FormSettings = props => {
       MuiAccordion: {
         styleOverrides: {
           root: {
+            background: theme?.palette?.editor?.miniToolBarBackground,
             "& .MuiAccordionSummary-root": {
               flexDirection: "row-reverse",
               "& .MuiSvgIcon-root": {

package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js

@@ -9,17 +9,23 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const SwitchViewport = props => {
   const {
     breakpoint,
-    onChange
+    onChange,
+    show
   } = props;
   const classes = useSwitchViewport();
   const {
+    setSelectedElement,
     setActiveBreakPoint
   } = useEditorContext();
   useEffect(() => {
-    console.log(breakpoint);
+    // to reset selection on viewport changes - FS-6589
+    setSelectedElement({});
   }, [breakpoint]);
   return /*#__PURE__*/_jsxs(Box, {
     sx: classes.root,
+    style: {
+      display: show ? "block" : "none"
+    },
     children: [/*#__PURE__*/_jsx(Tooltip, {
       title: "Desktop View",
       children: /*#__PURE__*/_jsx(IconButton, {

package/dist/Editor/common/Section/styles.js

@@ -11,6 +11,9 @@ const SectionStyle = (themeReact, theme) => ({
       "& .sectionIcon": {
         opacity: 1
       },
+      '& .dividerIcon': {
+        opacity: 1
+      },
       "& .sectionPopper": {
         opacity: 1
       }
@@ -52,6 +55,18 @@ const SectionStyle = (themeReact, theme) => ({
         opacity: 1
       }
     },
+    "& .dividerIcon": {
+      opacity: 0,
+      padding: "0px",
+      background: "transparent",
+      border: "none",
+      width: "20px",
+      height: "20px",
+      "& button": {
+        boxShadow: "none",
+        background: "transparent"
+      }
+    },
     "& .ed-section-inner": {
       [themeReact.breakpoints.between("xs", "md")]: {
         maxWidth: `320px !important`,

package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js

@@ -73,6 +73,11 @@ const BackgroundImage = props => {
             children: "REMOVE"
           }) : /*#__PURE__*/_jsx(Grid, {
             className: "uploadImageText",
+            sx: {
+              padding: 0,
+              background: `${theme?.palette?.editor?.inputFieldBgColor}`,
+              border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
+            },
             children: /*#__PURE__*/_jsxs(Button, {
               component: "label",
               variant: "text",

package/dist/Editor/common/StyleBuilder/fieldTypes/card.js

@@ -1,6 +1,7 @@
 import { Box, Card, Checkbox, FormControlLabel, Grid, Tooltip, Typography } from "@mui/material";
 import React from "react";
 import Icon from "../../Icon";
+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";
@@ -15,7 +16,10 @@ const RenderCard = ({
   return /*#__PURE__*/_jsx(Card, {
     sx: {
       position: 'relative',
-      padding: "10px"
+      padding: "10px",
+      '& .MuiCheckbox-root svg': {
+        fill: 'unset !important'
+      }
     },
     children: /*#__PURE__*/_jsx(FormControlLabel, {
       control: /*#__PURE__*/_jsx(Checkbox, {
@@ -81,6 +85,9 @@ const CardsMapping = props => {
     selectedCard,
     infoIcon
   } = data;
+  const {
+    theme
+  } = useEditorContext();
   const activeCard = value === selectedCard;
   const handleChange = e => {
     if (selectedCard === data?.value) {
@@ -99,7 +106,8 @@ const CardsMapping = props => {
     sx: {
       marginBottom: "12px",
       "& .MuiPaper-root": {
-        border: activeCard ? "1px solid #2563EB" : "1px solid #C8D8FA",
+        background: theme?.palette?.editor?.miniToolBarBackground,
+        border: activeCard ? "1px solid #2563EB" : `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
         borderRadius: "8px",
         boxShadow: activeCard ? "0px 4px 16px 0px #2563EB40" : "unset"
       }

package/dist/Editor/common/Uploader.js

@@ -4,6 +4,7 @@ import { convertBase64 } from "../utils/helper";
 import { uploadFile } from "../service/fileupload";
 import Icon from "./Icon";
 import UploadStyles from "../common/ImageSelector/UploadStyles";
+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";
@@ -18,6 +19,9 @@ const Uploader = props => {
   const [base64, setBase64] = useState(value?.url);
   const [fileName, setFileName] = useState("");
   const [uploading, setUploading] = useState(false);
+  const {
+    theme
+  } = useEditorContext();
   const handleChange = async e => {
     const uFile = e.target.files[0];
     const strImage = await convertBase64(uFile);
@@ -99,6 +103,10 @@ const Uploader = props => {
           className: "uploadImageSection",
           children: base64 ? renderThumb() : /*#__PURE__*/_jsx(Grid, {
             className: "uploadImageText",
+            sx: {
+              background: `${theme?.palette?.editor?.inputFieldBgColor}`,
+              border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
+            },
             children: /*#__PURE__*/_jsxs(Button, {
               component: "label",
               variant: "text",

package/dist/Editor/commonStyle.js

@@ -49,16 +49,20 @@ const useCommonStyle = theme => ({
         fontWeight: "500",
         fontFamily: "Inter, sans-serif"
       },
-      "& p": {
-        marginBottom: "7px",
-        marginTop: "4px"
-      },
       "& .MuiPaper-root": {
-        border: 'unset !important',
+        border: `unset !important`,
         borderRadius: '0px',
         height: 'fit-content',
         padding: '2px'
       },
+      "& p": {
+        marginBottom: "7px",
+        marginTop: "4px"
+      },
+      "& p": {
+        marginBottom: "7px",
+        marginTop: "4px"
+      },
       "& .muiIconsListParent": {
         "& svg": {
           color: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
@@ -71,9 +75,6 @@ const useCommonStyle = theme => ({
         },
         "&::-webkit-scrollbar-thumb": {
           background: `${theme?.palette?.editor?.brainPopupScroll} !important`
-        },
-        "&::-webkit-scrollbar-track": {
-          visibility: "hidden"
         }
       },
       "& .MuiGrid-root>.MuiGrid-item": {
@@ -470,10 +471,6 @@ const useCommonStyle = theme => ({
       }
     }
   },
-  pageSettingPopUpRoot: {
-    padding: "16px 8px 16px 10px!important",
-    height: "100%"
-  },
   buttonMoreOption: {
     background: `${theme?.palette?.editor?.aiInputBackground} !important`,
     border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
@@ -486,6 +483,10 @@ const useCommonStyle = theme => ({
       }
     }
   },
+  pageSettingPopUpRoot: {
+    padding: "16px 8px 16px 10px!important",
+    height: "100%"
+  },
   buttonMoreOption2: {
     background: `${theme?.palette?.editor?.aiInputBackground} !important`,
     border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,

package/dist/Editor/helper/deserialize/index.js

@@ -90,9 +90,18 @@ const ELEMENT_TAGS = {
     type: "image",
     url: el.getAttribute("src")
   }),
-  LI: () => ({
-    type: "list-item"
-  }),
+  LI: el => {
+    const checkListItem = el.querySelector(".check-list-item");
+    if (checkListItem) {
+      return {
+        type: "check-list-item",
+        checked: checkListItem?.dataset?.checked === "true"
+      };
+    }
+    return {
+      type: "list-item"
+    };
+  },
   UL: () => ({
     type: "unorderedList"
   }),
@@ -109,7 +118,7 @@ const ELEMENT_TAGS = {
   "GOOGLE-SHEETS-HTML-ORIGIN": paragraphType,
   TABLE: (el, children = []) => {
     try {
-      const bodyChild = children || [];
+      const bodyChild = (children || [])?.filter(f => f !== null);
       const firstRowChildren = bodyChild[0]?.children || [];
       return {
         type: "table",
@@ -129,7 +138,11 @@ const ELEMENT_TAGS = {
   }),
   TD: handleTableCell,
   COLGROUP: paragraphType,
-  COL: paragraphType
+  COL: paragraphType,
+  HR: () => ({
+    type: "divider",
+    borderColor: "#CCC"
+  })
 };
 
 // COMPAT: `B` is omitted here because Google Docs uses `<b>` in weird ways.

package/dist/Editor/helper/index.js

@@ -337,14 +337,14 @@ export const isCarouselSelected = editor => {
       return false;
     }
     const [nodeEntry] = Editor.nodes(editor, {
-      match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === 'carousel'
+      match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "carousel"
     });
     if (!nodeEntry) {
       return false;
     }
     const [node] = nodeEntry;
     const carouselDom = ReactEditor.toDOMNode(editor, node);
-    const isEdit = carouselDom.classList.contains('carousel_slider_edit');
+    const isEdit = carouselDom.classList.contains("carousel_slider_edit");
     return !isEdit;
   } catch (err) {
     console.log(err);

package/dist/Editor/helper/markdown.js

@@ -0,0 +1,45 @@
+import MarkdownIt from "markdown-it";
+const md = new MarkdownIt();
+function markdownItCheckbox(md) {
+  md.core.ruler.push("checkbox_lists", function (state) {
+    const tokens = state.tokens;
+    for (let i = 0; i < tokens.length; i++) {
+      const token = tokens[i];
+      if (token.type === "inline" && token.content) {
+        const taskListRegex = /^\s*(-\s*)?\[\s*([xX\s]?)\s*\]\s+(.*)/;
+        const match = taskListRegex.exec(token.content);
+        if (match) {
+          token.attrJoin("class", "check-list-item");
+          const isChecked = match[2].toLowerCase() === "x"; // Check if checked
+          const content = match[3].trim(); // Extract text after checkbox
+
+          // Create new tokens for the task list item
+          const listItemOpenToken = new state.Token("html_inline", "", 0);
+          listItemOpenToken.content = `<li class="check-list-item" data-checked="${isChecked}">`;
+          const checkboxToken = new state.Token("html_inline", "", 0);
+          checkboxToken.content = `<span class='check-list-item' data-checked="${isChecked}" />`;
+          const textToken = new state.Token("text", "", 0);
+          textToken.content = content;
+          const listItemCloseToken = new state.Token("html_inline", "", 0);
+          listItemCloseToken.content = `</li>`;
+
+          // Replace the original token with the new tokens
+          tokens.splice(i, 1, checkboxToken, textToken);
+        }
+      }
+    }
+  });
+}
+
+// init plugin
+md.use(markdownItCheckbox);
+function convertMDToHTML(data) {
+  try {
+    const html = md.render(data);
+    return html;
+  } catch (err) {
+    console.log(err);
+    return data;
+  }
+}
+export default convertMDToHTML;

package/dist/Editor/plugins/withHTML.js

@@ -1,6 +1,7 @@
 import { Transforms, Editor, Element, Node, Path } from "slate";
 import deserialize from "../helper/deserialize";
 import { decodeAndParseBase64 } from "../utils/helper";
+import convertMDToHTML from "../helper/markdown";
 const avoidDefaultInsert = ["table", "grid"];
 const NON_TEXT_TAGS = ["ol", "ul", "img", "table", "video", "a", "button", "GOOGLE-SHEETS-HTML-ORIGIN"];
 const ALLOWED_TEXT_NODES = ["paragraph", "title", "headingOne", "headingTwo", "headingThree"];
@@ -274,9 +275,15 @@ const withHtml = editor => {
       Transforms.insertFragment(editor, formattedFragment);
       return;
     } else {
-      insertData(data);
+      const html = convertMDToHTML(data.getData("text/plain"));
+      let parsed = new DOMParser().parseFromString(html, "text/html");
+      parsed = parseCopiedHTML(html);
+      const fragment = deserialize(parsed.body);
+      Transforms.insertFragment(editor, fragment);
+      // insertData(data);
     }
   };
+
   return editor;
 };
 export default withHtml;

package/dist/Editor/plugins/withLayout.js

@@ -39,7 +39,7 @@ const withLayout = editor => {
           const title = {
             type: "title",
             children: [{
-              text: "Untitled"
+              text: ""
             }]
           };
           Transforms.insertNodes(editor, title, {

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -173,10 +173,9 @@ export const getMarked = (leaf, children, theme) => {
   if (leaf.highlight) {
     children = /*#__PURE__*/_jsx("span", {
       style: {
-        color: "inherit"
+        color: "inherit",
+        background: "var(--slate-highlight-bg)"
       },
-      className: "slate-highlight" // while opening AI, we will use this element to highlight the selection. (PopoverAIInput.js)
-      ,
       children: children
     });
   }
@@ -302,6 +301,30 @@ export const getBlock = props => {
         placeholder: "Heading 3",
         children: children
       });
+    case "headingFour":
+      return /*#__PURE__*/_jsx("h4", {
+        ...attributes,
+        ...element.attr,
+        className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
+        placeholder: "Heading 4",
+        children: children
+      });
+    case "headingFive":
+      return /*#__PURE__*/_jsx("h5", {
+        ...attributes,
+        ...element.attr,
+        className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
+        placeholder: "Heading 5",
+        children: children
+      });
+    case "headingSix":
+      return /*#__PURE__*/_jsx("h6", {
+        ...attributes,
+        ...element.attr,
+        className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
+        placeholder: "Heading 6",
+        children: children
+      });
     case "blockquote":
       return /*#__PURE__*/_jsx("blockquote", {
         ...attributes,
@@ -589,6 +612,13 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx(ColumnView, {
         ...props
       });
+    case "code":
+      return /*#__PURE__*/_jsx("code", {
+        ...attributes,
+        ...element.attr,
+        className: "markcode",
+        children: children
+      });
     default:
       return /*#__PURE__*/_jsx(SimpleText, {
         ...props,

package/dist/Editor/utils/button.js

@@ -20,10 +20,10 @@ export const insertButton = editor => {
       bottomRight: 30
     },
     bannerSpacing: {
-      left: 16,
-      top: 8,
-      right: 16,
-      bottom: 8
+      left: 24,
+      top: 10,
+      right: 24,
+      bottom: 10
     },
     ...(windowVar.lastButtonProps || {})
   };

package/dist/Editor/utils/draftToSlate.js

@@ -82,7 +82,8 @@ const splitInlineStyleRanges = (text, inlineStyleRanges, data) => {
 };
 export const draftToSlate = props => {
   const {
-    data
+    data,
+    needLayout
   } = props;
   if (data?.blocks && data?.blocks?.length > 0) {
     const converted = data?.blocks?.reduce((a, b) => {
@@ -104,7 +105,7 @@ export const draftToSlate = props => {
     return data;
   } else {
     return [{
-      type: "paragraph",
+      type: needLayout ? "title" : "paragraph",
       children: [{
         text: ""
       }]